TIC 3361 - Courseware CSS aufteilen

Closes #3361

Merge request studip/studip!2293

resources/assets/stylesheets/scss/courseware/a11y.scss

+.assistive-text {
+    position: absolute;
+    margin: -1px;
+    border: 0;
+    padding: 0;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+}

resources/assets/stylesheets/scss/courseware/blockadder.scss

+.cw-tools-element-adder-tabs {
+    .cw-tabs-nav {
+        margin-top: 4px;
+        border: none;
+        border-bottom: solid thin var(--content-color-40);
+
+        button {
+            max-width: unset;
+            padding: 1em 1.5em 4px 1.5em;
+            margin: 0px 2em;
+        }
+    }
+    .cw-tabs-content {
+        border: none;
+        overflow-x: hidden;
+        overflow-y: auto;
+        scrollbar-width: thin;
+        scrollbar-color: var(--base-color) var(--dark-gray-color-5);
+
+        .input-group.files-search {
+            &.search {
+                border: thin solid var(--dark-gray-color-30);
+                margin-bottom: 0px;
+                input {
+                    border: none;
+                }
+            }
+
+            .input-group-append {
+                .button {
+                    border: none;
+                    border-left: thin solid var(--dark-gray-color-30);
+                    &.active {
+                        background-color: var(--base-color);
+                    }
+                }
+                .reset-search {
+                    border: none;
+                    background-color: var(--white);
+                }
+            }
+
+            .active-filter {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                border: solid thin var(--black);
+                background-color: var(--content-color-10);
+                margin: 3px;
+                padding: 2px 3px;
+
+                .removefilter {
+                    border: none;
+                    background-color: transparent;
+                }
+            }
+        }
+
+        .cw-block-search {
+            width: inherit;
+        }
+
+        .filterpanel {
+            margin-bottom: 5px;
+            padding: 2px;
+            border: thin solid var(--dark-gray-color-30);
+            border-top: none;
+            background-color: var(--white);
+
+            .button {
+                min-width: inherit;
+                margin: 4px 2px;
+
+                &.button-active {
+                    background-color: var(--base-color);
+                    color: var(--white);
+                }
+            }
+        }
+    }
+
+    .cw-collapsible {
+        .cw-collapsible-content {
+            display: none;
+            &.cw-collapsible-content-open {
+                display: block;
+            }
+        }
+    }
+}
+
+.cw-element-adder-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+.cw-blockadder-item-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    grid-auto-rows: auto;
+    grid-gap: 4px;
+
+    .cw-blockadder-item-wrapper {
+        display: flex;
+        border: solid thin var(--content-color-40);
+        max-width: 254px;
+
+        &:hover {
+            border-color: var(--base-color);
+        }
+        .cw-blockadder-item {
+            padding: 64px 10px 4px 10px;
+            @include background-icon(unit-test, clickable, 48);
+            background-position: 10px 10px;
+            background-repeat: no-repeat;
+            cursor: pointer;
+
+            @each $item, $icon in $blockadder-items {
+                &.cw-blockadder-item-#{$item} {
+                    @include background-icon($icon, clickable, 48);
+                }
+            }
+            .cw-clipboard-item-title,
+            .cw-blockadder-item-title {
+                display: inline-block;
+                font-weight: 600;
+                margin-bottom: 2px;
+            }
+            .cw-blockadder-item-description {
+                display: inline-block;
+                margin: 0 0 4px;
+            }
+        }
+        .cw-blockadder-item-fav {
+            height: 32px;
+            padding: 8px;
+            background-color: transparent;
+            border: none;
+            cursor: pointer;
+        }
+    }
+}
+
+.cw-block-adder-area {
+    background-color: var(--white);
+    border: solid thin var(--content-color-40);
+    padding: 1em 0;
+    color: var(--base-color);
+    text-align: center;
+    width: 100%;
+    font-weight: 600;
+    cursor: pointer;
+
+    &:hover {
+        border-color: var(--base-color);
+    }
+
+    &.cw-block-adder-active {
+        border: solid thin var(--base-color);
+        background-color: var(--base-color);
+        color: var(--white);
+    }
+
+    img {
+        vertical-align: text-bottom;
+    }
+}
+.cw-block-helper-buttons {
+    display: inline-block;
+    width: 100%;
+
+    .cw-block-helper-reset {
+        float: right;
+    }
+
+    .button.cw-block-helper-reset::before {
+        content: '';
+        @include background-icon(refresh);
+        background-repeat: no-repeat;
+        float: left;
+        height: 16px;
+        width: 16px;
+        margin: 1px 5px 0 -8px;
+    }
+}
+
+.cw-block-helper-results {
+    margin-top: 5px;
+}
+
+.cw-containeradder-item {
+    margin-bottom: 4px;
+    padding: 1em 1em 1em 6em;
+    @include background-icon(unit-test, clickable, 48);
+    background-position: 12px center;
+    background-repeat: no-repeat;
+    border: solid thin var(--content-color-40);
+    cursor: pointer;
+
+    &:hover {
+        border-color: var(--base-color);
+    }
+
+    @each $item, $icon in $containeradder-items {
+        &.cw-containeradder-item-#{$item} {
+            @include background-icon($icon, clickable, 48);
+        }
+    }
+
+    .cw-containeradder-item-title {
+        font-weight: 600;
+    }
+}
+
+.cw-container-style-selector {
+    display: flex;
+    margin-bottom: 8px;
+
+    label {
+        border: solid thin var(--content-color-40);
+        padding: calc(0.5em + 32px) 1em 0.5em 1em;
+        color: var(--base-color);
+        text-align: center;
+        width: 33%;
+        background-position: center 0.5em;
+        background-repeat: no-repeat;
+        cursor: pointer;
+
+        &.full {
+            @include background-icon(column-full, clickable, 32);
+        }
+        &.half {
+            @include background-icon(column-half, clickable, 32);
+        }
+        &.half-center {
+            @include background-icon(column-half-centered, clickable, 32);
+        }
+        &:hover {
+            color: var(--active-color);
+        }
+        &:not(:first-child) {
+            border-left: solid thin transparent;
+        }
+        &.cw-container-style-selector-active {
+            background-color: var(--content-color-20);
+            border: solid thin var(--base-color);
+        }
+
+    }
+    input[type=radio] {
+        position: absolute;
+        opacity: 0;
+        width: 0;
+
+        &:focus + label {
+            outline-color: Highlight;
+            outline-color: -webkit-focus-ring-color;
+            outline-style: auto;
+            outline-width: 1px;
+        }
+    }
+}
+.cw-element-inserter-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+
+.cw-clipboard-item-wrapper {
+    display: flex;
+    width: calc(50% - 4px);
+    border: solid thin var(--content-color-40);
+    margin-bottom: 4px;
+
+    &:hover {
+        border-color: var(--base-color);
+    }
+
+    .cw-clipboard-item {
+        width: 207px;
+        padding: 64px 10px 4px 10px;
+        @include background-icon(unit-test, clickable, 48);
+        background-position: 10px 10px;
+        background-repeat: no-repeat;
+        cursor: pointer;
+        background-color: var(--white);
+        border: none;
+        text-align: left;
+        color: var(--base-color);
+
+        @each $item, $icon in $blockadder-items {
+            &.cw-clipboard-item-#{$item} {
+                @include background-icon($icon, clickable, 48);
+            }
+        }
+        @each $item, $icon in $containeradder-items {
+            &.cw-clipboard-item-#{$item} {
+                @include background-icon($icon, clickable, 48);
+            }
+        }
+    
+        .cw-clipboard-item-title {
+            display: inline-block;
+            font-weight: 600;
+            margin-bottom: 2px;
+        }
+
+    }
+    .cw-clipboard-item-action-menu-wrapper {
+        padding: 8px;
+    }
+}
+.action-menu.is-open,
+.action-menu-wrapper.is-open {
+    &.cw-clipboard-item-action-menu {
+        z-index: 42;
+    }
+}
\ No newline at end of file

resources/assets/stylesheets/scss/courseware/blocks/audio.scss

+@use '../../../mixins.scss' as *;
+
+$media-buttons: (
+    play: play,
+    stop: stop,
+    pause: pause,
+    prev: arr_eol-left,
+    next: arr_eol-right
+);
+
+.cw-block-audio {
+    .cw-audio-container {
+        border: solid thin var(--content-color-40);
+        padding-top: 1em;
+    }
+    .cw-audio-controls {
+        text-align: right;
+        padding: 0 0.5em;
+    }
+    .cw-audio-range {
+        margin: 0 5px 10px 0;
+        &::-moz-focus-outer {
+            border: 0;
+        }
+        &.ui-widget-content {
+            background-color: var(--base-color);
+        }
+        .ui-widget-header {
+            background-color: var(--dark-gray-color-5);
+        }
+        .ui-slider-handle {
+            border-radius: 20px;
+            width: 1em;
+            height: 1.7em;
+            top: -0.5em;
+            background-color: var(--dark-gray-color-20);
+            border-color: var(--content-color-40);
+            cursor: pointer;
+            margin-left: -2px;
+        }
+    }
+    .cw-audio-button {
+        border: solid thin var(--content-color-40);
+        background-color: var(--white);
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-size: 24px;
+        min-height: 27px;
+        line-height: 130%;
+        padding: 5px 15px 5px 30px;
+        cursor: pointer;
+        font-size: 14px;
+        box-sizing: border-box;
+        text-align: center;
+        text-decoration: none;
+        vertical-align: bottom;
+        white-space: nowrap;
+        min-width: unset;
+        margin: 5px;
+        height: 46px;
+        width: 46px;
+        display: inline-block;
+
+        &:hover {
+            background-color: var(--base-color);
+        }
+
+        @each $button, $icon in $media-buttons {
+            &.cw-audio-#{$button}button {
+                @include background-icon($icon, clickable, 24);
+                &:hover {
+                    @include background-icon($icon, info-alt, 24);
+                }
+            }
+        }
+    }
+
+    .cw-audio-time {
+        position: relative;
+        top: -1em;
+        color: var(--base-gray);
+    }
+
+    .cw-audio-range {
+        display: block;
+        margin: 0 auto 1.5em;
+        -webkit-appearance: none;
+        position: relative;
+        overflow: hidden;
+        height: 18px;
+        width: 100%;
+        cursor: pointer;
+        border-radius: 0;
+    }
+
+    .cw-audio-range::-webkit-slider-runnable-track {
+        background: var(--dark-gray-color-20);
+    }
+
+    .cw-audio-range::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        width: 9px; /* 1 */
+        height: 18px;
+        background: var(--white);
+        box-shadow: -100vw 0 0 100vw var(--base-color);
+        border: solid thin var(--content-color-40);
+    }
+
+    .cw-audio-range::-moz-range-track {
+        height: 18px;
+        background: var(--dark-gray-color-10);
+    }
+
+    .cw-audio-range::-moz-range-thumb {
+        background: var(--white);
+        height: 18px;
+        width: 9px;
+        border: solid thin var(--content-color-40);
+        border-radius: 0 !important;
+        box-shadow: -100vw 0 0 100vw var(--base-color);
+        box-sizing: border-box;
+    }
+
+    .cw-audio-range::-ms-fill-lower {
+        background: var(--base-color);
+    }
+
+    .cw-audio-range::-ms-thumb {
+        background: var(--white);
+        border: solid thin var(--content-color-40);
+        height: 18px;
+        width: 9px;
+        box-sizing: border-box;
+    }
+
+    .cw-audio-range::-ms-ticks-after {
+        display: none;
+    }
+
+    .cw-audio-range::-ms-ticks-before {
+        display: none;
+    }
+
+    .cw-audio-range::-ms-track {
+        background: var(--dark-gray-color-20);
+        color: transparent;
+        height: 18px;
+        border: none;
+    }
+
+    .cw-audio-range::-ms-tooltip {
+        display: none;
+    }
+    .cw-audio-playlist-wrapper {
+        margin-top: -1em;
+        padding-top: 1em;
+        border: solid thin var(--content-color-40);
+        border-top: none;
+
+        &.empty {
+            border: none;
+        }
+
+        .cw-audio-playlist {
+            padding-left: 0;
+            list-style: none;
+            cursor: pointer;
+
+            &.with-recorder {
+                border-bottom: solid thin var(--content-color-40);
+            }
+
+            li {
+                margin: 0 1em;
+                &:not(:last-child) {
+                    border-bottom: solid thin var(--dark-gray-color-30);
+                }
+
+                .cw-playlist-item {
+                    display: block;
+                    @include background-icon(file-audio2, clickable, 24);
+                    background-repeat: no-repeat;
+                    background-position: 1em center;
+
+                    margin: 1em 0;
+                    padding: 1em;
+                    padding-left: 4em;
+                    color: var(--base-color);
+                    &:hover {
+                        color: var(--active-color);
+                    }
+                    &.current-item {
+                        @include background-icon(play, clickable, 24);
+                        font-weight: 700;
+                        &.is-playing {
+                            @include background-icon(pause, clickable, 24);
+                        }
+                    }
+                }
+            }
+        }
+        .cw-audio-playlist-recorder {
+            padding: 1em;
+        }
+    }
+
+    .cw-audio-current-track {
+        @include background-icon(file-audio2, info, 96);
+        background-position: top center;
+        background-repeat: no-repeat;
+        width: 100%;
+        min-height: 140px;
+        margin: 1em 0 2em 0;
+        p {
+            text-align: center;
+            padding-top: 106px;
+        }
+    }
+    .cw-audio-empty {
+        @include background-icon(file, info, 96);
+        border: solid thin var(--content-color-40);
+        background-position: center 1em;
+        background-repeat: no-repeat;
+        min-height: 140px;
+        padding: 1em;
+        p {
+            text-align: center;
+            padding-top: 106px;
+        }
+    }
+}

resources/assets/stylesheets/scss/courseware/blocks/biography.scss

+@use '../../../mixins.scss' as *;
+
+$achievement-types: (
+    certificate: file-text,
+    accreditation: vcard,
+    award: medal,
+    book: literature,
+    publication: news,
+    membership: group3,
+);
+
+$goals-types: (
+    personal: person2,
+    school: doctoral-cap,
+    academic: doctoral-cap,
+    professional: tools,
+);
+
+.cw-block-biography {
+    .cw-block-biography-content {
+        display: flex;
+        min-height: 200px;
+        flex-direction: row;
+        padding: 2em 2em 2em 1em;
+        border: 2px solid var(--base-color);
+
+        .cw-block-biography-type {
+            margin: auto 1em auto 0;
+            padding-top: 96px;
+            min-width: 192px;
+            max-width: 192px;
+            text-align: center;
+            background-repeat: no-repeat;
+            background-position: center top;
+        }
+
+        .cw-block-biography-details {
+            h2, h3 {
+                margin-top: 0;
+            }
+        }
+
+    }
+}
+
+.cw-block-biography-achievements {
+    @each $type, $icon in $achievement-types {
+        .cw-block-biography-achievements-type-#{$type} {
+            @include background-icon($icon, clickable, 96);
+        }
+    }
+}
+
+.cw-block-biography-goals {
+    @each $type, $icon in $goals-types {
+        .cw-block-biography-goals-type-#{$type} {
+            @include background-icon($icon, clickable, 96);
+        }
+    }
+}
+
+.cw-block-biography-personal-information {
+    .cw-block-biography-content {
+        min-height: 140px;
+
+        .cw-block-biography-personal-information-type {
+            @include background-icon(person2, clickable, 96);
+        }
+
+        .cw-block-biography-personal-information-details {
+            display: grid;
+            max-height: 7em;
+            grid-template-columns: max-content 1fr;
+            grid-gap: 5px 10px;
+
+            .preface {
+                grid-column-start: 1;
+                grid-column-end: 3;
+            }
+        }
+    }
+}
\ No newline at end of file

resources/assets/stylesheets/scss/courseware/blocks/canvas.scss

+@use '../../../mixins.scss' as *;
+
+.cw-block-canvas {
+    .cw-canvasblock-canvas {
+        max-width: 100%;
+        border: solid thin var(--content-color-40);
+    }
+
+    .cw-canvasblock-upload-message {
+        display: none;
+    }
+
+    .cw-canvasblock-original-img {
+        display: none;
+    }
+
+    .cw-canvasblock-tool-selected-text {
+        cursor: text;
+    }
+
+    h1.cw-canvasblock-description {
+        border-bottom: none;
+    }
+
+    .cw-canvasblock-toolbar {
+        border: solid thin var(--content-color-40);
+        border-bottom: none;
+
+        .cw-canvasblock-buttonset {
+            display: inline-block;
+            padding: 5px;
+            margin-right: 0.5em;
+
+            button {
+                cursor: pointer;
+                user-select: none;
+                border: solid thin var(--content-color-40);
+                height: 32px;
+                width: 32px;
+                background-color: var(--white);
+                background-position: center;
+                background-repeat: no-repeat;
+                background-size: 24px 24px;
+
+                &.cw-canvasblock-color {
+                    $colors: (
+                        white: var(--white),
+                        blue: #3498db,
+                        green: #2ecc71,
+                        purple: #9b59b6,
+                        red: #e74c3c,
+                        yellow: #fed330,
+                        orange: #f39c12,
+                        grey: #95a5a6,
+                        darkgrey: #34495e,
+                        black: var(--black),
+                    );
+
+                    @each $name, $color in $colors {
+                        &.#{'' + $name} {
+                            background-color: $color;
+                        }
+                    }
+
+                    &.selected-color {
+                        border: solid 2px var(--black);
+                    }
+                }
+
+                &.cw-canvasblock-reset {
+                    @include background-icon(refresh, clickable, 24);
+                }
+
+                &.cw-canvasblock-size {
+                    @include background-icon(stop, clickable);
+
+                    &.cw-canvasblock-size-small {
+                        background-size: 8px 7px;
+                    }
+                    &.cw-canvasblock-size-normal {
+                        background-size: 16px 14px;
+                    }
+                    &.cw-canvasblock-size-large {
+                        background-size: 22px 20px;
+                    }
+                    &.cw-canvasblock-size-huge {
+                        background-size: 26px 24px;
+                    }
+                    &.selected-size {
+                        border: solid 2px var(--black);
+                    }
+                }
+
+                &.cw-canvasblock-tool {
+                    &.cw-canvasblock-tool-pen {
+                        @include background-icon(comment, clickable);
+                    }
+
+                    &.cw-canvasblock-tool-text {
+                        vertical-align: top;
+                        font-size: 22px;
+                        color: var(--base-color);
+                        font-weight: 600;
+                    }
+
+                    &.selected-tool {
+                        border: solid 2px var(--black);
+                    }
+                }
+
+                &.cw-canvasblock-undo {
+                    @include background-icon(arr_2left, clickable, 24);
+                }
+
+                &.cw-canvasblock-download {
+                    @include background-icon(download, clickable, 24);
+                }
+
+                &.cw-canvasblock-store {
+                    @include background-icon(upload, clickable, 24);
+                }
+
+                &.cw-canvasblock-show-all {
+                    @include background-icon(group2, clickable, 24);
+
+                    &.selected-view {
+                        border: solid 2px var(--black);
+                    }
+                }
+
+                &.cw-canvasblock-show-own {
+                    @include background-icon(person, clickable, 24);
+
+                    &.selected-view {
+                        border: solid 2px var(--black);
+                    }
+                }
+            }
+        }
+    }
+
+    .cw-canvasblock-tool-selected-text {
+        cursor: text;
+    }
+}

resources/assets/stylesheets/scss/courseware/blocks/code.scss

+.cw-block-code {
+    pre {
+        margin-bottom: 0;
+    }
+
+    .hljs {
+        display: block;
+        overflow-x: auto;
+        padding: 0.5em;
+        background: var(--dark-gray-color-5);
+        color: black;
+        border: solid thin var(--content-color-40);
+    }
+
+    .hljs-comment,
+    .hljs-quote,
+    .hljs-variable {
+        color: var(--dark-green);
+    }
+
+    .hljs-keyword,
+    .hljs-selector-tag,
+    .hljs-selector-class,
+    .hljs-built_in,
+    .hljs-name,
+    .hljs-tag {
+        color: var(--base-color);
+        font-weight: 600;
+    }
+
+    .hljs-string,
+    .hljs-title,
+    .hljs-section,
+    .hljs-attribute,
+    .hljs-literal,
+    .hljs-template-tag,
+    .hljs-template-variable,
+    .hljs-type,
+    .hljs-addition {
+        color: var(--orange-80);
+        font-weight: 400;
+    }
+
+    .hljs-deletion,
+    .hljs-selector-attr,
+    .hljs-selector-pseudo,
+    .hljs-meta {
+        color: var(--petrol);
+        font-weight: 400;
+    }
+
+    .hljs-doctag {
+        color: var(--dark-gray-color-75);
+        font-weight: 400;
+    }
+
+    .hljs-attr {
+        color: var(--active-color);
+        font-weight: 400;
+    }
+
+    .hljs-symbol,
+    .hljs-bullet,
+    .hljs-link {
+        color: var(--petrol);
+        font-weight: 400;
+    }
+
+    .hljs-emphasis {
+        font-style: italic;
+        font-weight: 400;
+    }
+
+    .hljs-strong {
+        font-weight: 600;
+    }
+
+    .code-lang {
+        background: var(--dark-gray-color-5);
+        border: solid thin var(--content-color-40);
+        border-top: none;
+        padding: 5px 10px;
+        text-align: right;
+        color: var(--dark-gray-color-45);
+        font-family: monospace;
+        text-transform: full-width;
+    }
+}

resources/assets/stylesheets/scss/courseware/blocks/confirm.scss

+.cw-block-confirm {
+    .cw-block-confirm-content {
+        border: solid thin var(--content-color-40);
+        padding: 1em;
+        margin: 0;
+
+        input[type='checkbox'] {
+            margin-right: 2em;
+            vertical-align: bottom;
+        }
+    }
+}

resources/assets/stylesheets/scss/courseware/blocks/date.scss

+.cw-container-colspan-half,
+.cw-container-colspan-half-center {
+    .cw-block-date {
+        .cw-block-content {
+            font-size: 9px;
+        }
+    }
+}
+
+.cw-block-date {
+    .cw-date-countdown,
+    .cw-date-date {
+        margin: 0 auto;
+        width: max-content;
+    }
+
+    .cw-date-countdown {
+        .cw-date-countdown-digit {
+            display: inline-block;
+            margin-right: 4px;
+
+            .cw-date-countdown-number {
+                font-size: 6em;
+                line-height: 1.25em;
+                height: 1.25em;
+                padding: 3px 0.5em;
+                background: rgba(245, 245, 245, 1);
+                font-weight: 300;
+            }
+
+            .cw-date-countdown-label-sg,
+            .cw-date-countdown-label-pl {
+                padding: 5px;
+                font-size: 1.25em;
+                text-align: left;
+                text-transform: uppercase;
+            }
+        }
+    }
+
+    .cw-date-date {
+        .cw-date-date-space {
+            display: inline-block;
+            width: 2em;
+        }
+
+        .cw-date-date-digits {
+            display: inline-block;
+
+            .cw-date-date-number {
+                font-size: 5em;
+                line-height: 1.25em;
+                height: 1.25em;
+                padding: 0.25em;
+                background: rgba(245, 245, 245, 1);
+                font-weight: 300;
+            }
+        }
+    }
+}
+
+.responsive-display {
+    .cw-block-date {
+        .cw-block-content {
+            font-size: 9px;
+
+            .cw-date-countdown-number {
+                font-size: 3.5em;
+            }
+            .cw-date-countdown-label-sg,
+            .cw-date-countdown-label-pl {
+                font-size: 1em;
+            }
+            .cw-date-date-number {
+                font-size: 3em;
+            }
+        }
+    }
+}

resources/assets/stylesheets/scss/courseware/blocks/default-block.scss

+.cw-default-block {
+    display: flex;
+    flex-flow: row;
+    .cw-default-block-invisible-info {
+        img {
+            vertical-align: text-bottom;
+        }
+    }
+
+}
+
+.cw-block-header {
+    background-color: var(--content-color-20);
+    padding: 4px 10px 4px 22px;
+
+    .cw-block-header-toggle {
+        display: inline-block;
+        width: calc(100% - 50px);
+    }
+
+    span {
+        color: var(--base-color);
+        font-weight: 700;
+        line-height: 2em;
+        font-size: 1.1em;
+
+        &.cw-default-block-invisible-info,
+        &.cw-default-block-blocker-warning {
+            font-weight: 400;
+        }
+    }
+
+    img {
+        vertical-align: text-bottom;
+    }
+
+    .cw-block-actions {
+        position: relative;
+        float: right;
+        margin-top: 4px;
+        .is-open{
+            z-index: 30;
+        }
+    }
+}
+
+.cw-discuss-wrapper,
+.cw-block-features {
+    header{
+        background-color: var(--content-color-20);
+        color: var(--base-color);
+        font-weight: 600;
+        padding: 0.5em;
+    }
+
+    .cw-block-features-content{
+        margin: 1em;
+    }
+}
+
+.cw-discuss-wrapper {
+    flex-shrink: 3;
+    flex-grow: 2;
+    margin-left: 10px;
+}
+
+.cw-block-edit textarea {
+    width: -moz-available;
+    height: -moz-available;
+    min-height: 8em;
+    border: solid thin var(--content-color-40);
+    resize: none;
+}
+
+.cw-block-actions {
+    padding-left: 14px;
+}
+.cw-button-box {
+    float: right;
+}
+
+.cw-content-wrapper {
+    display: flex;
+    flex-flow: column;
+    width: 100%;
+    .cw-block-content {
+        overflow: auto;
+        position: relative;
+    }
+}
+.cw-content-wrapper-active {
+    border: solid thin var(--content-color-40);
+    .cw-block-content {
+        padding: $cw-wrapper-gap;
+    }
+}
+
+
+.cw-container-wrapper-discuss {
+    .cw-container-colspan-full {
+        .cw-content-wrapper {
+            max-width: $max-content-width;
+        }
+    }
+    .cw-container-colspan-half,
+    .cw-container-colspan-half-center {
+        .cw-content-wrapper {
+            max-width: 540px;
+        }
+    }
+}
+
+.cw-block-title {
+    padding: 4px;
+    background-color: var(--content-color-20);
+    color: var(--base-color);
+    font-weight: 700;
+    text-align: center;
+    border: solid thin var(--content-color-40);
+    border-bottom: none;
+}
+
+.cw-file-empty {
+    @include background-icon(file, info, 96);
+    border: solid thin var(--content-color-40);
+    background-position: center 1em;
+    background-repeat: no-repeat;
+    min-height: 140px;
+    padding: 1em;
+    p {
+        text-align: center;
+        padding-top: 106px;
+    }
+}
\ No newline at end of file

resources/assets/stylesheets/scss/courseware/blocks/dialog-cards.scss

+@use '../../../mixins.scss' as *;
+
+.cw-block-dialog-cards-content {
+    display: flex;
+
+    .cw-dialogcards {
+        flex-grow: 2;
+
+        .scene {
+            margin: 0 auto;
+            width: 440px;
+            height: 600px;
+            perspective: 880px;
+            display: none;
+
+            &.active {
+                display: block;
+                animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+                transform: translate3d(0, 0, 0);
+                backface-visibility: hidden;
+                perspective: 1000px;
+            }
+        }
+
+        .card {
+            width: 100%;
+            height: 78%;
+            transition: transform 1s;
+            transform-style: preserve-3d;
+            cursor: pointer;
+            position: relative;
+            top: 11%;
+        }
+
+        .card.is-flipped {
+            transform: rotateY(180deg);
+        }
+
+        .card__face {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            color: var(--black);
+            text-align: center;
+            font-weight: bold;
+            font-size: 1.2em;
+            backface-visibility: hidden;
+            box-shadow: 0 2px 15px fade-out($black, 0.7);
+
+            img {
+                max-width: 380px;
+                max-height: 220px;
+                margin-top: 1em;
+            }
+
+            .cw-dialogcards-front-no-image {
+                @include background-icon(question, navigation, 150);
+            }
+
+            .cw-dialogcards-back-no-image {
+                @include background-icon(exclaim, navigation, 150);
+            }
+
+            .cw-dialogcards-front-no-image,
+            .cw-dialogcards-back-no-image {
+                width: 100%;
+                height: 180px;
+                margin-top: 2em;
+                background-repeat: no-repeat;
+                background-position-x: center;
+            }
+
+            p {
+                margin: 1em 3em 1em 4em;
+                padding-right: 1em;
+                overflow-y: auto;
+                max-height: 12em;
+                text-align: justify;
+            }
+        }
+
+        .card__face--front {
+            @include background-icon(arr_1right, clickable);
+            background-color: var(--white);
+            background-repeat: no-repeat;
+            background-position: 95% 95%;
+        }
+
+        .card__face--back {
+            @include background-icon(arr_1left, clickable);
+            background-color: var(--white);
+            background-repeat: no-repeat;
+            background-position: 5% 95%;
+            transform: rotateY(180deg);
+        }
+    }
+
+    .cw-dialogcards-navbutton {
+        color: transparent;
+        width: 35px;
+        height: 35px;
+        border-radius: 2px;
+        background-position: 50%;
+        background-repeat: no-repeat;
+        background-color: var(--base-color);
+        border: none;
+        display: block;
+        z-index: 4;
+        margin: auto 2px;
+        padding: 0;
+        cursor: pointer;
+
+        &.cw-dialogcards-prev {
+            @include background-icon(arr_1left, info-alt, 24);
+        }
+
+        &.cw-dialogcards-next {
+            @include background-icon(arr_1right, info-alt, 24);
+            right: 0;
+        }
+
+        &.cw-dialogcards-prev-disabled,
+        &.cw-dialogcards-next-disabled {
+            background-color: var(--light-gray-color-40);
+        }
+    }
+
+    @keyframes shake {
+        10%,
+        90% {
+            transform: translate3d(-1px, 0, 0);
+        }
+
+        20%,
+        80% {
+            transform: translate3d(2px, 0, 0);
+        }
+
+        30%,
+        50%,
+        70% {
+            transform: translate3d(-4px, 0, 0);
+        }
+
+        40%,
+        60% {
+            transform: translate3d(4px, 0, 0);
+        }
+    }
+}

resources/assets/stylesheets/scss/courseware/blocks/document.scss

+.cw-block-document {
+    .cw-pdf-main-container {
+        width: calc(100% - 2px);
+        border: solid thin var(--content-color-40);
+
+        .cw-block-title {
+            border: none;
+            border-bottom: solid thin var(--content-color-40);
+        }
+    }
+    .cw-pdf-toolbar {
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: baseline;
+        align-content: space-around;
+        background-color: var(--content-color-20);
+        padding: 4px 8px;
+
+        button {
+            height: 100%;
+            margin: 0 2px 0 0;
+            padding: 4px;
+
+            &.active {
+                background-color: var(--base-color);
+            }
+        }
+
+        .cw-pdf-toolbar-left {
+            position: relative;
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            align-items: baseline;
+            align-content: space-between;
+            width: 33%;
+        }
+
+        .cw-pdf-toolbar-middle {
+            position: relative;
+            display: flex;
+            justify-content: center;
+            width: 34%;
+
+            .cw-pdf-zoom-buttons {
+                margin-right: 8px;
+
+                button {
+                    margin: 0;
+                    padding: 4px 0;
+                }
+            }
+        }
+
+        .cw-pdf-toolbar-right {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-end;
+            align-items: baseline;
+            align-content: space-between;
+            position: relative;
+            width: 33%;
+            margin-right: 4px;
+        }
+
+        .cw-pdf-page-nav {
+            margin: 0 4px;
+
+            button {
+                margin: 0;
+                padding: 4px 0;
+            }
+
+            .cw-pdf-page-num {
+                text-align: right;
+                width: 2em;
+            }
+        }
+
+        .cw-pdf-search-box {
+            position: absolute;
+            top: 33px;
+            left: 22px;
+            width: auto;
+            background-color: var(--content-color-20);
+            border-top: none;
+            padding: 6px;
+            z-index: 2;
+            line-height: normal;
+
+            .cw-pdf-search-num {
+                margin: 4px 0 0 0;
+                display: block;
+            }
+
+            .cw-pdf-search-navs {
+                display: inline-block;
+
+                button {
+                    margin: 0;
+                    padding: 0;
+                }
+            }
+        }
+    }
+
+    .cw-pdf-outer-container {
+        position: relative;
+        width: 100%;
+
+        .cw-pdf-content {
+            display: flex;
+            flex-direction: row;
+
+            .cw-pdf-sidebar {
+                width: 25%;
+                min-width: 270px;
+                align-self: stretch;
+                background-color: var(--white);
+                border-right: solid 1px var(--content-color-40);
+
+                ul.cw-pdf-toc-list,
+                ul.cw-pdf-toc-sub-list {
+                    padding: 0;
+                    list-style: none;
+
+                    li {
+                        padding: 0.5em 1em;
+                    }
+                }
+
+                ul.cw-pdf-toc-list {
+                    margin-top: 1em;
+                }
+            }
+
+            .cw-pdf-viewer-container {
+                width: 100%;
+                height: 100%;
+                overflow: hidden;
+                cursor: text;
+
+                &.hand-cursor-grab {
+                    cursor: grab;
+
+                    &.grabbing {
+                        cursor: grabbing;
+                    }
+                }
+
+                &.has-error {
+                    display: none;
+                }
+
+                .page {
+                    position: relative;
+                    margin: 0 auto;
+                }
+            }
+        }
+
+        .cw-pdf-viewer-fake-container {
+            position: absolute;
+        }
+
+        .cw-pdf-error-page {
+            overflow: hidden;
+            width: calc(100% - 16px);
+            height: 100%;
+            padding: 8px;
+            display: table;
+        }
+    }
+}

resources/assets/stylesheets/scss/courseware/blocks/embed.scss

+.cw-block-embed {
+    .cw-block-content {
+        .cw-block-embed-iframe-wrapper {
+            overflow-y: hidden;
+
+            iframe {
+                height: 100% !important;
+                width: 100% !important;
+            }
+        }
+        .cw-block-embed-info {
+            margin-top: 0.5em;
+        }
+    }
+}
\ No newline at end of file

resources/assets/stylesheets/scss/courseware/blocks/files.scss

+@use '../../../mixins.scss' as *;
+
+// folder block
+.cw-block-folder-info {
+    border: solid thin var(--content-color-40);
+    padding: 10px 10px 0 10px;
+    overflow: hidden;
+    border-bottom: none;
+}
+
+.cw-block-folder-list {
+    border: solid thin var(--content-color-40);
+    padding: 0;
+    list-style: none;
+
+    .cw-block-folder-file-item {
+        list-style: none;
+
+        &:not(:last-child) {
+            border-bottom: solid thin var(--content-color-40);
+        }
+
+        a {
+            display: block;
+        }
+
+        &:hover {
+            background-color: hsla(217, 6%, 45%, 0.2);
+        }
+    }
+
+    .cw-block-folder-download-icon {
+        @include background-icon(download, clickable, 24);
+        background-repeat: no-repeat;
+        float: right;
+        height: 24px;
+        width: 24px;
+        margin: 1em;
+    }
+}
+
+.cw-block-folder-upload {
+    border: solid thin var(--content-color-40);
+    padding: 1em 10px;
+    border-top: none;
+
+    .cw-file-input {
+        width: calc(100% - 148px);
+        vertical-align: middle;
+    }
+}
+
+// for folder and download block
+.cw-block-file-info {
+    @include background-icon(file, clickable, 24);
+    background-repeat: no-repeat;
+    display: block;
+    padding: 16px 16px 16px 40px;
+    background-position: 10px 16px;
+    width: calc(100% - 56px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &.cw-block-file-icon-empty {
+        color: var(--black);
+        @include background-icon(folder-empty, info, 24);
+    }
+
+    &.cw-block-file-icon-none {
+        color: var(--black);
+        @include background-icon(file, info, 24);
+    }
+
+    &.cw-block-file-icon-audio {
+        @include background-icon(file-audio, clickable, 24);
+
+        &.download-disabled {
+            @include background-icon(file-audio, info, 24);
+        }
+    }
+
+    &.cw-block-file-icon-pic {
+        @include background-icon(file-pic, clickable, 24);
+
+        &.download-disabled {
+            @include background-icon(file-pic, info, 24);
+        }
+    }
+
+    &.cw-block-file-icon-video {
+        @include background-icon(file-video, clickable, 24);
+
+        &.download-disabled {
+            @include background-icon(file-video, info, 24);
+        }
+    }
+
+    &.cw-block-file-icon-pdf {
+        @include background-icon(file-pdf, clickable, 24);
+
+        &.download-disabled {
+            @include background-icon(file-pdf, info, 24);
+        }
+    }
+
+    &.cw-block-file-icon-word {
+        @include background-icon(file-word, clickable, 24);
+
+        &.download-disabled {
+            @include background-icon(file-word, info, 24);
+        }
+    }
+
+    &.cw-block-file-icon-spreadsheet {
+        @include background-icon(file-excel, clickable, 24);
+
+        &.download-disabled {
+            @include background-icon(file-excel, info, 24);
+        }
+    }
+
+    &.cw-block-file-icon-text {
+        @include background-icon(file-text, clickable, 24);
+
+        &.download-disabled {
+            @include background-icon(file-text, info, 24);
+        }
+    }
+
+    &.cw-block-file-icon-ppt {
+        @include background-icon(file-ppt, clickable, 24);
+
+        &.download-disabled {
+            @include background-icon(file-ppt, info, 24);
+        }
+    }
+
+    &.cw-block-file-icon-archive {
+        @include background-icon(file-archive, clickable, 24);
+
+        &.download-disabled {
+            @include background-icon(file-archive, info, 24);
+        }
+    }
+
+    &.cw-block-file-icon-file {
+        @include background-icon(file, clickable, 24);
+
+        &.download-disabled {
+            @include background-icon(file, info, 24);
+        }
+    }
+}
+.cw-block-file-details {
+    margin-top: -16px;
+    padding-left: 40px;
+    padding-bottom: 16px;
+    color: var(--dark-gray-color);
+}
+.cw-block-file-owner,
+.cw-block-file-mkdate {
+    display: block;
+    width: calc(100% - 56px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+// download block
+.cw-block-download {
+    .cw-block-download-content {
+        border: solid thin var(--content-color-40);
+
+        .cw-block-download-file-item {
+            a {
+                display: block;
+            }
+
+            &:hover {
+                background-color: fade-out($dark-gray-color-75, 0.8);
+            }
+
+            .cw-block-download-download-icon {
+                @include background-icon(download, clickable, 24);
+                background-repeat: no-repeat;
+                float: right;
+                height: 24px;
+                width: 24px;
+                margin: 1em;
+            }
+        }
+    }
+}

resources/assets/stylesheets/scss/courseware/blocks/gallery.scss

+@use '../../../mixins.scss' as *;
+
+.cw-block-gallery {
+    .cw-block-content {
+        overflow: hidden;
+    }
+}
+
+.cw-block-gallery-content {
+    position: relative;
+    margin: auto;
+}
+
+.cw-block-gallery-slides {
+    display: none;
+
+    img {
+        display: block;
+        max-width: 100%;
+        margin-left: auto;
+        margin-right: auto;
+    }
+}
+
+.cw-block-gallery-prev,
+.cw-block-gallery-next {
+    cursor: pointer;
+    position: absolute;
+    background-color: fade-out($white, 0.6);
+    top: 50%;
+    height: 36px;
+    width: 36px;
+    background-repeat: no-repeat;
+    background-position: center;
+    margin-top: -22px;
+    transition: 200ms ease;
+    user-select: none;
+    border: none;
+
+    &:hover {
+        background-color: var(--base-color);
+    }
+}
+
+.cw-block-gallery-prev {
+    @include background-icon(arr_1left, clickable, 24);
+
+    &:hover {
+        @include background-icon(arr_1left, info-alt, 24);
+    }
+}
+
+.cw-block-gallery-next {
+    right: 0;
+    @include background-icon(arr_1right, clickable, 24);
+
+    &:hover {
+        @include background-icon(arr_1right, info-alt, 24);
+    }
+}
+
+.cw-block-gallery-file-description {
+    width: -moz-available;
+    color: var(--white);
+    font-size: 15px;
+    padding: 8px 12px;
+    position: absolute;
+    bottom: 8px;
+    text-align: center;
+
+    p {
+        display: -webkit-inline-box;
+        background-color: fade-out($black, 0.6);
+        padding: 0 2em;
+        margin-bottom: 4px;
+        overflow: hidden;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+    }
+
+    &.show-on-hover {
+        display: none;
+    }
+}
+
+.cw-block-gallery-content:hover .show-on-hover {
+    display: block;
+}
+
+.cw-block-gallery-number-text {
+    color: var(--white);
+    font-size: 12px;
+    padding: 8px 12px;
+    position: absolute;
+    top: 0;
+    background-color: fade-out($black, 0.6);
+}
+
+.cw-block-gallery-fade {
+    -webkit-animation-name: fade;
+    -webkit-animation-duration: 1.5s;
+    animation-name: fade;
+    animation-duration: 1.5s;
+}
+
+@-webkit-keyframes fade {
+    from {
+        opacity: 0.4;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes fade {
+    from {
+        opacity: 0.4;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+.cw-block-gallery-grid {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    list-style: none;
+    padding: 0;
+
+    figure {
+        padding: 1px 4px;
+        margin: unset;
+
+        figcaption {
+            margin-bottom: 12px;
+
+            .cw-block-gallery-grid-file-name {
+                font-weight: 700;
+                margin-bottom: 4px;
+                overflow: hidden;
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+            }
+
+            .cw-block-gallery-grid-file-description {
+                overflow: hidden;
+                display: -webkit-box;
+                -webkit-line-clamp: 5;
+                -webkit-box-orient: vertical;
+            }
+        }
+    }
+}
+
+.cw-container-wrapper-edit .cw-block-gallery-grid {
+    margin: 0;
+}

resources/assets/stylesheets/scss/courseware/blocks/iframe.scss

+@use '../../../mixins.scss' as *;
+
+.cw-block-iframe {
+    .cw-block-content {
+        iframe {
+            border: solid thin var(--content-color-40);
+            width: calc(100% - 2px);
+        }
+
+        .cw-block-iframe-cc-data {
+            border: solid thin var(--content-color-40);
+            border-top: none;
+            margin-top: -6px;
+            padding-top: 10px;
+            height: 75px;
+
+            .cw-block-iframe-cc {
+                width: 120px;
+                height: 50px;
+                margin-left: 4px;
+                display: inline-block;
+                background-repeat: no-repeat;
+
+                &.cw-block-iframe-cc-by {
+                    background-image: url('#{$image-path}/cc/by.svg');
+                }
+                &.cw-block-iframe-cc-by-nc {
+                    background-image: url('#{$image-path}/cc/by-nc.eu.svg');
+                }
+                &.cw-block-iframe-cc-by-nc-nd {
+                    background-image: url('#{$image-path}/cc/by-nc-nd.eu.svg');
+                }
+                &.cw-block-iframe-cc-by-nc-sa {
+                    background-image: url('#{$image-path}/cc/by-nc-sa.svg');
+                }
+                &.cw-block-iframe-cc-by-nd {
+                    background-image: url('#{$image-path}/cc/by-nd.svg');
+                }
+                &.cw-block-iframe-cc-by-sa {
+                    background-image: url('#{$image-path}/cc/by-sa.svg');
+                }
+            }
+
+            .cw-block-iframe-cc-infos {
+                display: inline-block;
+                vertical-align: top;
+                padding-left: 1em;
+                p {
+                    margin: 0;
+                }
+            }
+        }
+    }
+}

resources/assets/stylesheets/scss/courseware/blocks/image-map.scss

+@import '../variables.scss';
+
+.cw-block-image-map {
+    .cw-image-map-canvas,
+    .cw-image-map-original-img {
+        display: none;
+    }
+
+    form.default {
+        label.cw-block-image-map-dimensions > input[type='number'] {
+            display: inline-block;
+        }
+    }
+}
+
+.cw-draggable-shapes-wrapper {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    margin: $cw-wrapper-gap;
+
+    .cw-draggable-area {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        &:hover {
+            cursor: grab;
+        }
+    }
+}
\ No newline at end of file

resources/assets/stylesheets/scss/courseware/blocks/keypoint.scss

+@use '../../../mixins.scss' as *;
+@import '../variables.scss';
+
+.cw-keypoint-content {
+    display: flex;
+    min-height: 52px;
+    padding: 1.5em 2.5em 1.5em 2.5em;
+    border-style: solid;
+    border-width: 2px;
+    align-items: center;
+}
+
+.cw-keypoint-content > img {
+    flex-shrink: 0;
+}
+
+.cw-keypoint-red {
+    border-color: map-get($icon-colors, 'icon-red');
+}
+
+.cw-keypoint-blue {
+    border-color: map-get($icon-colors, 'icon-blue');
+}
+
+.cw-keypoint-green {
+    border-color: map-get($icon-colors, 'icon-green');
+}
+
+.cw-keypoint-gray {
+    border-color: map-get($icon-colors, 'icon-gray');
+}
+
+.cw-keypoint-yellow {
+    border-color: map-get($icon-colors, 'icon-yellow');
+}
+
+.cw-keypoint-sentence {
+    display: inline;
+    font-size: 1.25em;
+    padding-left: 1.5em;
+    margin-top: 10px;
+}
+
+.cw-keypoint-label-color {
+    width: 32px !important;
+    min-width: 32px !important;
+    height: 32px;
+    padding: 5px !important;
+
+    > .cw-keypoint-input-color {
+        visibility: hidden;
+        position: absolute;
+    }
+
+    > .cw-keypoint-input-color + div {
+        cursor: pointer;
+        border: 2px solid transparent;
+        height: 32px;
+        width: 32px;
+    }
+
+    > .cw-keypoint-input-color:checked + div {
+        /* (RADIO CHECKED) IMAGE STYLES */
+        @include background-icon(accept, info_alt, 24);
+        background-repeat: no-repeat;
+        background-position: center;
+    }
+}
+
+label[for='cw-keypoint-color'] {
+    vertical-align: top;
+}
+
+.cw-keypoint-label-color {
+    display: inline-block !important;
+}
+
+.cw-keypoint-icons {
+    background-color: var(--white);
+}
+
+.cw-keypoint-bg-red {
+    background-color: map-get($icon-colors, 'icon-red');
+}
+
+.cw-keypoint-bg-blue {
+    background-color: map-get($icon-colors, 'icon-blue');
+}
+
+.cw-keypoint-bg-green {
+    background-color: map-get($icon-colors, 'icon-green');
+}
+
+.cw-keypoint-bg-gray {
+    background-color: map-get($icon-colors, 'icon-gray');
+}
+
+.cw-keypoint-bg-yellow {
+    background-color: map-get($icon-colors, 'icon-yellow');
+}

resources/assets/stylesheets/scss/courseware/blocks/link.scss

+@use '../../../mixins.scss' as *;
+
+.cw-block-link {
+    a {
+        text-decoration: none;
+    }
+
+    .cw-link {
+        border: solid thin var(--content-color-40);
+        color: var(--base-color);
+        height: 20px;
+        padding: 1em;
+
+        .cw-link-title {
+            margin-left: 3em;
+        }
+
+        &:hover {
+            background-color: var(--base-color);
+            border: solid thin var(--base-color);
+            color: var(--white);
+        }
+
+        &.internal {
+            @include background-icon(link-intern, clickable, 28);
+            background-position: 1em 50%;
+            background-repeat: no-repeat;
+
+            &:hover {
+                @include background-icon(link-intern, info-alt, 28);
+            }
+        }
+
+        &.external {
+            @include background-icon(link-extern, clickable, 28);
+            background-position: 1em 50%;
+            background-repeat: no-repeat;
+
+            &:hover {
+                @include background-icon(link-extern, info-alt, 28);
+            }
+
+            .cw-link-og-image {
+                display: inline-block;
+                max-width: 40%;
+                vertical-align: top;
+                margin-right: 2em;
+            }
+
+            .cw-link-og-textwrapper {
+                display: inline-block;
+                max-width: 50%;
+
+                p {
+                    margin: 0;
+                }
+
+                .cw-link-og-site {
+                    font-size: 1.25em;
+                }
+
+                .cw-link-og-title {
+                    font-weight: 600;
+                }
+
+                .cw-link-og-description {
+                    color: var(--base-color-80);
+                    text-align: justify;
+                }
+            }
+        }
+    }
+}