TIC 3361 - Courseware CSS aufteilen

Closes #3361

Merge request studip/studip!2293

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

+@use '../../../mixins.scss' as *;
+
+.cw-block-lti {
+    .cw-block-content {
+        .cw-block-lti-content {
+            border: solid thin var(--content-color-40);
+            box-sizing: border-box;
+        }
+
+        .cw-block-lti-icon-tool {
+            @include background-icon(plugin, info, 24);
+            background-repeat: no-repeat;
+            display: block;
+            padding: 16px 16px 16px 40px;
+            background-position: 10px center;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+}

resources/assets/stylesheets/scss/courseware/blocks/table-of-contents.scss

+@use '../../../mixins.scss' as *;
+@import '../variables.scss';
+
+.cw-block-table-of-contents {
+    .cw-block-content {
+        overflow: unset;
+    }
+}
+
+.cw-block-table-of-contents-list {
+    padding: 0;
+    list-style: none;
+    border: solid thin var(--content-color-40);
+    li {
+        &:not(:last-child) {
+            border-bottom: solid thin var(--dark-gray-color-30);
+        }
+        a {
+            display: block;
+            padding: 1em;
+        }
+        &:hover {
+            background-color: fade-out($dark-gray-color-75, 0.8);
+        }
+    }
+}
+
+.cw-block-table-of-contents-list-details {
+    padding: 0;
+    list-style: none;
+    border: solid thin var(--content-color-40);
+    li {
+        &:not(:last-child) {
+            border-bottom: solid thin var(--dark-gray-color-30);
+        }
+
+        &:hover {
+            background-color: fade-out($dark-gray-color-75, 0.8);
+        }
+        a {
+            display: block;
+            padding: 1em;
+        }
+    }
+}
+
+.cw-block-table-of-contents-title-box {
+    min-height: 3em;
+    padding-left: 1em;
+    border-left-width: 10px;
+    border-left-style: solid;
+
+    @each $name, $color in $tile-colors {
+        &.#{'' + $name} {
+            border-color: $color;
+        }
+    }
+
+    p,
+    p:hover {
+        color: var(--black);
+    }
+}
+
+.cw-container-colspan-half {
+    .cw-block-table-of-contents-tiles.cw-tiles {
+        .tile {
+            width: 267px;
+        }
+    }
+}

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

+.cw-block-text {
+    .cktoolbar {
+        width: 100% !important;
+        max-width: 100% !important;
+        position: relative !important;
+        top: 0 !important;
+    }
+
+    .cke {
+        width: 100% !important;
+    }
+
+    .ckplaceholder {
+        height: 0 !important;
+    }
+}

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

+@import '../variables.scss';
+
+%clearfix {
+    &:after, &:before {
+        content: '';
+        display: block;
+        width: 100%;
+        clear: both;
+    }
+}
+
+.cw-timeline {
+    list-style: none;
+    width: 100%;
+    margin: 30px auto;
+    position: relative;
+    padding: 0;
+    transition: all 0.4s ease;
+
+    &:before {
+        content:"";
+        width: 3px;
+        height: 100%;
+        background: var(--content-color-40);
+        left: 50%;
+        top: 0;
+        position: absolute;
+    }
+
+    &:after {
+        content: "";
+        clear: both;
+        display: table;
+        width: 100%;
+    }
+
+    .cw-timeline-item {
+        margin-bottom: 50px;
+        position: relative;
+        @extend %clearfix;
+
+        .cw-timeline-item-icon {
+            background: var(--white);
+            width: 50px;
+            height: 50px;
+            position: absolute;
+            top: 0;
+            left: 50%;
+            overflow: hidden;
+            margin-left: -25px;
+            @each $name, $color in $tile-colors {
+                &.cw-timeline-item-icon-color-#{"" + $name} {
+                    border: solid 2px $color;
+                }
+            }
+
+            border-radius: 50%;
+
+            img {
+                position: relative;
+                top: 9px;
+                left: 9px;
+
+                &.charcoal {
+                    filter: brightness(0) saturate(100%) invert(22%) sepia(29%) saturate(364%) hue-rotate(168deg) brightness(87%) contrast(79%);
+                }
+                &.royal-purple {
+                    filter: brightness(0) saturate(100%) invert(35%) sepia(43%) saturate(658%) hue-rotate(234deg) brightness(100%) contrast(87%);
+                }
+                &.iguana-green {
+                    filter: brightness(0) saturate(100%) invert(74%) sepia(9%) saturate(1885%) hue-rotate(76deg) brightness(86%) contrast(88%);
+                }
+                &.queen-blue {
+                    filter: brightness(0) saturate(100%) invert(44%) sepia(10%) saturate(2086%) hue-rotate(178deg) brightness(88%) contrast(80%);
+                }
+                &.verdigris {
+                    filter: brightness(0) saturate(100%) invert(64%) sepia(11%) saturate(4959%) hue-rotate(131deg) brightness(103%) contrast(49%);
+                }
+                &.mulberry {
+                    filter: brightness(0) saturate(100%) invert(49%) sepia(16%) saturate(1665%) hue-rotate(271deg) brightness(88%) contrast(95%);
+                }
+                &.pumpkin {
+                    filter: brightness(0) saturate(100%) invert(38%) sepia(86%) saturate(1993%) hue-rotate(13deg) brightness(104%) contrast(108%);
+                }
+                &.sunglow {
+                    filter: brightness(0) saturate(100%) invert(93%) sepia(69%) saturate(6824%) hue-rotate(313deg) brightness(102%) contrast(100%);
+                }
+                &.apple-green {
+                    filter: brightness(0) saturate(100%) invert(69%) sepia(5%) saturate(5203%) hue-rotate(42deg) brightness(100%) contrast(84%);
+                }
+                &.studip-blue {
+                    filter: brightness(0) saturate(100%) invert(26%) sepia(19%) saturate(1783%) hue-rotate(177deg) brightness(96%) contrast(93%);
+                }
+                &.studip-lightblue {
+                    filter: brightness(0) saturate(100%) invert(91%) sepia(12%) saturate(190%) hue-rotate(190deg) brightness(104%) contrast(89%);
+                }
+                &.studip-red {
+                    filter: brightness(0) saturate(100%) invert(8%) sepia(95%) saturate(6904%) hue-rotate(1deg) brightness(95%) contrast(109%);
+                }
+                &.studip-green {
+                    filter: brightness(0) saturate(100%) invert(27%) sepia(85%) saturate(1531%) hue-rotate(109deg) brightness(95%) contrast(101%);
+                }
+                &.studip-yellow {
+                    filter: brightness(0) saturate(100%) invert(94%) sepia(14%) saturate(7314%) hue-rotate(330deg) brightness(103%) contrast(101%);
+                }
+                &.studip-gray {
+                    filter: brightness(0) saturate(100%) invert(46%) sepia(1%) saturate(2621%) hue-rotate(169deg) brightness(87%) contrast(87%);
+                }
+            }
+        }
+
+        .cw-timeline-item-content {
+            width: 40%;
+            background: var(--white);
+            padding: 20px;
+            transition: all var(--transition-duration) ease;
+
+            h3 {
+                padding: 15px;
+                color: var(--white);
+                margin: -20px -20px 0 -20px;
+                font-weight: 700;
+                min-height: 1.1em;
+            }
+
+            article {
+                min-height: 2em;
+                border: solid thin var(--content-color-20);
+                border-top: none;
+                margin: 0 -20px;
+                padding: 15px;
+
+                header {
+                    font-weight: 700;
+                    font-size: 1.1em;
+                    margin: 0.5em 0;
+                }
+            }
+
+            &:before {
+                content: '';
+                position: absolute;
+                left: calc(40% + 40px);
+                top: 18px;
+                width: 0;
+                height: 0;
+                border-top: 7px solid transparent;
+                border-bottom: 7px solid transparent;
+            }
+            &.left {
+                h3 {
+                    text-align: right;
+                }
+            }
+            &.right {
+                float: right;
+
+                h3 {
+                    text-align: left;
+                }
+
+                &:before {
+                    content: '';
+                    right: calc(40% + 40px);
+                    left: inherit;
+                    border-left: 0;
+                }
+            }
+
+            @each $name, $color in $tile-colors {
+                &.cw-timeline-item-content-color-#{"" + $name} {
+                    border-color: $color;
+                    h3 {
+                        background-color: $color;
+                    }
+                    &.left {
+                        &:before {
+                            border-left: 7px solid $color;
+                        }
+                    }
+                    &.right {
+                        &:before {
+                            border-right: 7px solid $color;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+@mixin oneSidedTimeline() {
+    .cw-timeline {
+        &:before {
+            left: 25px;
+        }
+        .cw-timeline-item {
+            .cw-timeline-item-icon {
+                left: 25px;
+            }
+            .cw-timeline-item-content {
+                width: stretch;
+                margin-left: 70px;
+                &.left {
+                    float: unset;
+
+                    h3 {
+                        text-align: left;
+                    }
+
+                    &:before {
+                        content: '';
+                        right: calc(100% - 70px);
+                        left: inherit;
+                        border-left: 0;
+                    }
+                }
+                &.right {
+                    float: unset;
+                    &:before {
+                        right: calc(100% - 70px);
+                    }
+                }
+
+                @each $name, $color in $tile-colors {
+                    &.cw-timeline-item-content-color-#{"" + $name} {
+                        &.left {
+                            &:before {
+                                border-right: 7px solid $color;
+                                border-left: none;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+.cw-container-colspan-half {
+    @include oneSidedTimeline();
+}
+
+@media only screen and (max-width: 1070px) {
+    @include oneSidedTimeline();
+}

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

+.cw-typewriter-content {
+    .vue-typer {
+        &.font-typewriter {
+            font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace;
+        }
+
+        &.font-trebuchet {
+            font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif;
+        }
+
+        &.font-tahoma {
+            font-family: Tahoma, Verdana, Segoe, sans-serif;
+        }
+
+        &.font-georgia {
+            font-family: Georgia, Times, 'Times New Roman', serif;
+        }
+
+        &.font-narrow {
+            font-family: 'Arial Narrow', Arial, 'Helvetica Condensed', Helvetica, sans-serif;
+        }
+
+        &.size-tall {
+            font-size: 1.25em;
+            line-height: 1.25em;
+        }
+
+        &.size-grande {
+            font-size: 1.5em;
+            line-height: 1.25em;
+        }
+
+        &.size-huge {
+            font-size: 2em;
+            line-height: 1.25em;
+        }
+    }
+}

resources/assets/stylesheets/scss/courseware/comments.scss

+.cw-structural-element-feedback,
+.cw-structural-element-comments {
+    padding: 0 1em;
+}
+
+.cw-structural-element-feedback-items,
+.cw-structural-element-comments-items,
+.cw-block-feedback-items,
+.cw-block-comments-items {
+    min-height: 1em;
+    max-height: 225px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    margin: -1em -1em 0em 0em;
+    padding: 0em 1em 0em 0em;
+    scroll-behavior: smooth;
+}
+
+.studip-dialog-content {
+    .cw-structural-element-feedback-items,
+    .cw-structural-element-comments-items,
+    .cw-block-feedback-items,
+    .cw-block-comments-items {
+        max-height: unset;
+    }
+}
+
+.cw-structural-element-feedback-create,
+.cw-structural-element-comment-create,
+.cw-block-feedback-create,
+.cw-block-comment-create {
+    border-top: solid thin var(--content-color-40);
+    padding-top: 1em;
+    textarea {
+        width: calc(100% - 6px);
+        resize: none;
+        border: solid thin var(--content-color-40);
+        &:active {
+            border: solid thin var(--content-color-80);
+        }
+    }
+}
+.cw-structural-element-comments-empty,
+.cw-structural-element-feedback-empty,
+.cw-block-comments-empty,
+.cw-block-feedback-empty {
+    .cw-structural-element-feedback-create,
+    .cw-structural-element-comment-create,
+    .cw-block-feedback-create,
+    .cw-block-comment-create {
+        border-top: none;
+    }
+}
+
+.cw-comments-overview-dialog-comments-context {
+    margin: 0 0 1.5em 0;
+}
\ No newline at end of file

resources/assets/stylesheets/scss/courseware/containers/default-container.scss

+.cw-container {
+    margin-bottom: 1em;
+
+    &.cw-container-colspan-full {
+        max-width: $max-content-width;
+        width: 100%;
+    }
+    &.cw-container-colspan-half {
+        max-width: 540px;
+        width: 100%;
+    }
+    &.cw-container-colspan-half-center {
+        width: $max-content-width;
+        .cw-container-content {
+            max-width: 540px;
+            margin: auto;
+        }
+    }
+
+    .cw-container-header {
+        background-color: var(--content-color-20);
+        padding: 4px 10px 4px 22px;
+
+        .cw-container-header-toggle {
+            display: inline-block;
+            width: calc(100% - 40px);
+        }
+
+        span {
+            color: var(--base-color);
+            font-weight: 700;
+            line-height: 2em;
+            font-size: 1.1em;
+
+            &.cw-default-container-blocker-warning {
+                font-weight: 400;
+            }
+        }
+
+        img {
+            vertical-align: text-bottom;
+        }
+
+        .cw-container-actions {
+            position: relative;
+            float: right;
+            margin-top: 4px;
+            // z-index: 31;
+            .is-open {
+                z-index: 31;
+            }
+        }
+    }
+
+    &.cw-container-active {
+        &.cw-container-colspan-half-center {
+            .cw-container-content {
+                max-width: unset;
+                .cw-block-wrapper {
+                    max-width: 540px;
+                    margin: auto;
+                }
+            }
+        }
+        .cw-container-content {
+            border: solid thin var(--content-color-40);
+        }
+    }
+
+
+    .cw-block-wrapper {
+        padding: 0;
+        margin: 0;
+        list-style: none;
+
+        &.cw-block-wrapper-active {
+            padding: 14px 10px;
+
+            .cw-tabs-content {
+                padding: 14px 0;
+            }
+        }
+
+        .cw-block-item {
+            padding: 0;
+            margin: 0 0 1em 0;
+        }
+    }
+
+    .cw-container-list-block-list {
+        padding: 0;
+        list-style: none;
+    }
+
+    .cw-container-tabs-block-list {
+        list-style: none;
+        padding: 1em 1em 0 1em;
+    }
+
+    .cw-container-accordion-block-list {
+        list-style: none;
+        padding: 0 1em;
+    }
+}
+
+.cw-container-section-delete {
+    img {
+        cursor: pointer;
+    }
+}
+
+form.cw-container-dialog-edit-form {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+
+    fieldset {
+        max-width: 200px;
+    }
+}
+
+.cw-container-wrapper-discuss {
+    flex-direction: column;
+
+    .cw-container-colspan-full {
+        max-width: unset;
+    }
+    .cw-container-colspan-half-center,
+    .cw-container-colspan-half {
+        max-width: 1050px;
+    }
+    .cw-container-colspan-half-center {
+        width: 100%;
+        .cw-container-content {
+            width: 1050px;
+        }
+    }
+}
+
+.cw-radioset {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin-bottom: 1em;
+    .cw-radioset-box {
+        width: 128px;
+        height: 128px;
+        text-align: center;
+        margin-right: 16px;
+        border: solid thin var(--content-color-40);
+        &.selected {
+            border-color: var(--base-color);
+            background-color: var(--content-color-20);
+        }
+        &:last-child {
+            margin-right: 0;
+        }
+        label {
+            height: 100%;
+            width: 100%;
+            margin: 0;
+            cursor: pointer;
+            .label-icon {
+                background-position: center 8px;
+                background-repeat: no-repeat;
+                height: 64px;
+                padding: 8px;
+                &.accordion {
+                    @include background-icon(block-accordion, clickable, 64);
+                }
+                &.list {
+                    @include background-icon(view-list, clickable, 64);
+                }
+                &.tabs {
+                    @include background-icon(block-tabs, clickable, 64);
+                }
+                &.full {
+                    @include background-icon(column-full, clickable, 64);
+                }
+                &.half {
+                    @include background-icon(column-half, clickable, 64);
+                }
+                &.half-center {
+                    @include background-icon(column-half-centered, clickable, 64);
+                }
+            }
+
+        }
+        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;
+            }
+        }
+    }
+}
\ No newline at end of file

resources/assets/stylesheets/scss/courseware/content-courses.scss

+.cw-content-courses {
+    h2 {
+        margin: 0;
+        font-weight: 400;
+        padding: 5px 0;
+        font-size: 1.4em;
+    }
+
+    ul.cw-tiles {
+        margin-bottom: 20px;
+    }
+}
\ No newline at end of file

resources/assets/stylesheets/scss/courseware/dashboard.scss

+
+.cw-dashboard {
+    display: flex;
+    max-width: 1112px;
+    flex-wrap: wrap;
+
+    .cw-dashboard-box {
+        margin-bottom: 1em;
+        margin-right: 1em;
+
+        &.cw-dashboard-box-full {
+            max-width: $max-content-width;
+            width: calc(100% - 16px);
+        }
+        &.cw-dashboard-box-half {
+            width: calc(50% - 16px);
+        }
+
+        &.cw-collapsible .cw-collapsible-content.cw-collapsible-content-open {
+            padding: 0;
+        }
+    }
+    .cw-dashboard-overview {
+        display: flex;
+        padding: 10px;
+        flex-wrap: wrap;
+        justify-content: center;
+
+    }
+
+    &.cw-dashboard-task-view {
+        display: unset;
+        max-width: unset;
+        flex-wrap: unset;
+
+        .cw-dashboard-tasks-wrapper,
+        .cw-dashboard-students-wrapper {
+            max-height: unset;
+        }
+    }
+}
+
+#course-courseware-dashboard {
+    .action-menu-item a {
+        cursor: pointer;
+    }
+}
+
+.responsive-display {
+    .cw-dashboard {
+        .cw-dashboard-box {
+
+            &.cw-dashboard-box-full {
+                width: 100%
+            }
+            &.cw-dashboard-box-half {
+                width: 100%
+            }
+        }
+    }
+}
+
+.cw-activities-wrapper {
+    max-width: $max-content-width;
+
+    .cw-companion-box {
+        margin: 10px;
+    }
+
+    .cw-activities {
+        list-style: none;
+        padding: 0;
+
+        .cw-activity-item {
+            border-bottom: solid thin var(--content-color-40);
+            padding: 0.5em;
+
+            &:last-child {
+                border: none;
+            }
+
+            p {
+                margin: 0 0 4px 0;
+                img {
+                    padding-right: 0.5em;
+                    vertical-align: text-bottom;
+                }
+            }
+        }
+    }
+}
+
+.cw-dashboard-box {
+    .cw-dashboard-tasks-wrapper,
+    .cw-dashboard-students-wrapper {
+        padding: 10px;
+    }
+}
+
+.cw-dashboard-tasks-wrapper,
+.cw-dashboard-students-wrapper {
+
+    table.default {
+        margin: 0;
+        thead {
+            tr {
+                th {
+                    &.feedback {
+                        min-width: 11em;
+                    }
+                    &.renewal {
+                        min-width: 14em;
+                    }
+                }
+            }
+        }
+        tbody {
+            tr {
+                td {
+                    img {
+                        vertical-align: text-bottom;
+                        &.display-feedback,
+                        &.edit {
+                            cursor: pointer;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file

resources/assets/stylesheets/scss/courseware/layouts/collapsible.scss

+@use '../../../mixins.scss' as *;
+
+.cw-collapsible {
+    border: solid thin var(--content-color-40);
+    margin-bottom: -1px;
+
+    .cw-collapsible-title {
+        @include background-icon(arr_1right, clickable);
+        background-position: 6px center;
+        background-repeat: no-repeat;
+        background-color: var(--content-color-20);
+        padding: 0.5em 2em;
+        margin: 0;
+        font-weight: 600;
+        color: var(--base-color);
+        cursor: pointer;
+
+        &.cw-collapsible-open {
+            @include background-icon(arr_1down, clickable);
+
+            .cw-container-list-sort-mode {
+                margin-top: 8px;
+            }
+        }
+
+        img {
+            vertical-align: top;
+        }
+    }
+
+    .cw-collapsible-content {
+        display: none;
+        &.cw-collapsible-content-open {
+            display: block;
+            padding: 10px;
+        }
+    }
+}
+
+form .cw-collapsible .cw-collapsible-content.cw-collapsible-content-open {
+    padding: unset;
+
+    label {
+        margin: 1.5ex;
+    }
+}

resources/assets/stylesheets/scss/courseware/layouts/companion.scss

+@use '../../../mixins.scss' as *;
+
+$companion-types: (
+    default: basic,
+    unsure: unsure,
+    special: special,
+    alert: alert,
+    sad: sad,
+    happy: happy,
+    pointing: pointing-right,
+    curious: curious
+);
+
+.cw-companion-overlay {
+    position: fixed;
+    bottom: 46px;
+    right: 0;
+    width: 360px;
+    max-width: calc(100% - 140px);
+    height: 120px;
+    z-index: 42000;
+    border: solid thin var(--content-color-40);
+    background-color: var(--white);
+    background-repeat: no-repeat;
+    background-position: 1em center;
+    background-size: 100px;
+    box-shadow: 5px 5px var(--dark-gray-color-10);
+    padding-left: 120px;
+    transform: translateX(100%);
+    transition: transform .5s ease;
+
+    @each $type, $image in $companion-types {
+        &.#{$type} {
+            background-image: url("#{$image-path}/companion/Tin_#{$image}.svg");
+        }
+    }
+
+    &.cw-companion-overlay-in {
+        transform: translateX(0);
+        right: 12px;
+    }
+
+    .cw-companion-overlay-content {
+        display: inline-block;
+        position: relative;
+        top: 25%;
+        padding: 0 1em;
+    }
+
+    .cw-compantion-overlay-close {
+        @include background-icon(decline);
+        background-color: var(--white);
+        background-repeat: no-repeat;
+
+        position: absolute;
+        top: 7px;
+        right: 7px;
+        height: 16px;
+        width: 16px;
+        border: none;
+        cursor: pointer;
+    }
+}
+
+.cw-companion-box {
+    display: flex;
+    height: 120px;
+    border: solid thin var(--content-color-40);
+    background-color: var(--white);
+    background-repeat: no-repeat;
+    background-position: 1em center;
+    background-size: 100px;
+    padding-left: 120px;
+    align-items: center;
+    margin-bottom: 1em;
+
+    @each $type, $image in $companion-types {
+        &.#{$type} {
+            background-image: url("#{$image-path}/companion/Tin_#{$image}.svg");
+        }
+    }
+
+    &.cw-companion-box-in-form {
+        margin-top: 8px;
+    }
+
+    p {
+        margin: 0 1em 10px 0;
+    }
+}
\ No newline at end of file

resources/assets/stylesheets/scss/courseware/layouts/import-zip.scss

+.cw-import-zip {
+    margin-bottom: 1em;
+
+    header {
+        font-size: 1.15;
+        font-weight: 700;
+    }
+    .progress-bar-wrapper {
+        width: 100%;
+        border: solid thin var(--content-color-40);
+
+        .progress-bar {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            color: white;
+            text-align: center;
+            white-space: nowrap;
+            background-color: var(--base-color);
+        }
+    }
+}

resources/assets/stylesheets/scss/courseware/layouts/input-file.scss

+.cw-file-input {
+    width: stretch;
+    border: solid thin var(--base-color);
+    font-size: 14px;
+    cursor: pointer;
+
+    &::file-selector-button {
+        font-family: inherit;
+        border: none;
+        border-right: solid thin var(--base-color);
+        background-color: var(--white);
+        padding: 6px 15px;
+        margin-right: 10px;
+        color: var(--base-color);
+
+        &:hover {
+            background-color: var(--base-color);
+            color: var(--white);
+        }
+    }
+}
+.cw-file-input-change {
+    border: solid thin var(--base-color);
+
+    button.button {
+        padding: 0.5em 1.5em;
+        margin: 0 0 0 -1px;
+        line-height: 100%;
+        border: none;
+        border-right: solid thin var(--base-color);
+    }
+
+    span {
+        padding: 0.5em 1.5em 0.5em 0.5em;
+    }
+}

resources/assets/stylesheets/scss/courseware/layouts/progress.scss

+.cw-unit-progress {
+    .cw-unit-progress-breadcrumb {
+        padding: 10px 0;
+
+        a img {
+            vertical-align: top;
+        }
+    }
+
+    .cw-unit-progress-chapter {
+        text-align: center;
+        margin-bottom: -3.5em;
+
+        h1 {
+            border: none;
+            margin: 0;
+            padding: 0;
+        }
+
+        .cw-progress-circle {
+            font-size: 18px;
+            margin: 1em auto;
+
+            &.cw-unit-progress-current {
+                font-size: 12px;
+                top: -4.5em;
+                left: -2.5em;
+            }
+        }
+    }
+
+    .cw-unit-progress-subchapter-list {
+        border-top: solid thin var(--content-color-40);
+        padding: 0 1em 0 1em;
+
+        .cw-unit-empty-info {
+            margin-top: 10px;
+        }
+    }
+}
+
+.cw-unit-progress-item {
+    display: block;
+    border-bottom: solid thin var(--content-color-40);
+    padding: 10px 0;
+
+    &:hover {
+        background-color: hsla(217, 6%, 45%, 0.2);
+    }
+
+    &:last-child {
+        border: none;
+    }
+
+    .cw-unit-progress-item-value,
+    .cw-unit-progress-item-description {
+        display: inline-block;
+        vertical-align: top;
+    }
+
+    .cw-unit-progress-item-value {
+        width: 70px;
+        color: var(--base-color);
+        font-size: xx-large;
+
+        .cw-progress-circle {
+            font-size: 12px;
+            margin: 4px;
+        }
+    }
+
+    .cw-unit-progress-item-description {
+        color: var(--base-color);
+        padding: 0.5em 0 0 1em;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+}
+
+.cw-progress-circle {
+    font-size: 14px;
+    margin: 10px;
+    position: relative;
+    padding: 0;
+    width: 5em;
+    height: 5em;
+    background-color: var(--dark-gray-color-10);
+    border-radius: 50%;
+    line-height: 5em;
+
+    &:after {
+        border: none;
+        position: absolute;
+        top: 0.35em;
+        left: 0.35em;
+        text-align: center;
+        display: block;
+        border-radius: 50%;
+        width: 4.3em;
+        height: 4.3em;
+        background-color: white;
+        content: ' ';
+    }
+
+    span {
+        position: absolute;
+        line-height: 5em;
+        width: 5em;
+        text-align: center;
+        display: block;
+        color: var(--base-color);
+        z-index: 2;
+    }
+
+    .left-half-clipper {
+        border-radius: 50%;
+        width: 5em;
+        height: 5em;
+        position: absolute;
+        clip: rect(0, 5em, 5em, 2.5em);
+    }
+
+    &.over50 .left-half-clipper {
+        clip: rect(auto, auto, auto, auto);
+    }
+
+    .value-bar {
+        position: absolute;
+        clip: rect(0, 2.5em, 5em, 0);
+        width: 5em;
+        height: 5em;
+        border-radius: 50%;
+        border: 0.45em solid var(--base-color);
+        box-sizing: border-box;
+    }
+
+    &.over50 .first50-bar {
+        position: absolute;
+        clip: rect(0, 5em, 5em, 2.5em);
+        background-color: var(--base-color);
+        border-radius: 50%;
+        width: 5em;
+        height: 5em;
+    }
+
+    &:not(.over50) .first50-bar {
+        display: none;
+    }
+
+    &.p0 .value-bar {
+        display: none;
+    }
+
+    @for $i from 1 through 100 {
+        &.p#{$i} .value-bar {
+            transform: rotate(calc(360deg * $i / 100));
+        }
+    }
+}
\ No newline at end of file

resources/assets/stylesheets/scss/courseware/layouts/ribbon.scss

+@use '../../../mixins.scss' as *;
+
+$consum_ribbon_width: calc(100% - 58px);
+#course-courseware-courseware,
+#contents-courseware-courseware,
+#contents-courseware-shared_content_courseware {
+    &.consume {
+        overflow: hidden;
+    }
+
+    #content-wrapper {
+        position: relative;
+    }
+}
+
+.cw-ribbon-wrapper-consume {
+    position: fixed;
+    padding: 15px;
+    background-color: var(--white);
+    width: $consum_ribbon_width;
+    height: 46px;
+    z-index: 42;
+}
+
+.cw-ribbon-consume-bottom {
+    position: fixed;
+    top: 75px;
+    height: 15px;
+    left: 0;
+    width: calc(100% - 1em);
+    background-color: var(--white);
+    z-index: 40;
+}
+
+.cw-ribbon-sticky-top {
+    position: fixed;
+    top: 40px;
+    height: 20px;
+    width: calc(100% - 314px);
+    background-color: var(--white);
+    z-index: 39;
+}
+
+.cw-ribbon-sticky-bottom {
+    position: fixed;
+    top: 110px;
+    height: 16px;
+    width: calc(100% - 314px);
+    background-color: var(--white);
+    z-index: 39;
+}
+
+.cw-ribbon-sticky-spacer {
+    height: 80px;
+}
+
+.cw-ribbon {
+    display: flex;
+    flex-wrap: wrap;
+    height: auto;
+    min-height: 30px;
+    border: solid thin var(--dark-gray-color-30);
+    margin-bottom: 15px;
+    padding: 1em;
+    justify-content: space-between;
+    background-color: var(--dark-gray-color-5);
+
+    &.cw-ribbon-sticky {
+        position: fixed;
+        top: 50px;
+        width: calc(100% - 346px);
+        z-index: 40;
+    }
+
+    &.cw-ribbon-consume {
+        width: $consum_ribbon_width;
+        position: fixed;
+        margin-bottom: 0;
+    }
+
+    .cw-ribbon-wrapper-left {
+        display: flex;
+        max-width: calc(100% - 106px);
+
+        .cw-ribbon-nav {
+            display: flex;
+            min-width: 75px;
+
+            &.single-icon {
+                min-width: 45px;
+            }
+        }
+
+        .cw-ribbon-breadcrumb {
+            font-size: 1.25em;
+            line-height: 1.5em;
+            margin-right: 1em;
+            min-width: 0;
+
+            ul {
+                display: flex;
+                list-style: none;
+                padding-left: 0;
+
+                li + li:before {
+                    padding: 0 0.25em;
+                    content: '/';
+                    background-repeat: no-repeat;
+                    background-position: center;
+                }
+
+                .cw-ribbon-breadcrumb-item {
+                    display: inline;
+                    flex-shrink: 100000;
+                    min-width: 0;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+
+                    a {
+                        color: var(--base-color);
+                        text-decoration: none;
+                        &:hover {
+                            color: var(--active-color);
+                        }
+                    }
+
+                    img {
+                        vertical-align: text-top;
+                    }
+
+                    &.cw-ribbon-breadcrumb-item-current {
+                        flex-shrink: 1;
+                    }
+                }
+            }
+        }
+    }
+
+    .cw-ribbon-wrapper-right {
+        display: flex;
+
+        button {
+            border: none;
+            background-color: transparent;
+            cursor: pointer;
+        }
+    }
+
+    .cw-ribbon-button {
+        height: 24px;
+        width: 24px;
+        margin: 0 7px;
+        padding: 1px 2px;
+        border: none;
+        background-color: transparent;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: 24px;
+        cursor: pointer;
+
+        &.cw-ribbon-button-menu {
+            @include background-icon(table-of-contents, clickable, 24);
+        }
+
+        &.cw-ribbon-button-prev {
+            @include background-icon(arr_1left, clickable, 24);
+            margin: 0 0.5em 0 0;
+        }
+
+        &.cw-ribbon-button-next {
+            @include background-icon(arr_1right, clickable, 24);
+            margin: 0 1em 0 0;
+        }
+
+        &.cw-ribbon-button-prev-disabled {
+            @include background-icon(arr_1left, inactive, 24);
+            margin: 0 0.5em 0 0;
+            cursor: default;
+        }
+
+        &.cw-ribbon-button-next-disabled {
+            @include background-icon(arr_1right, inactive, 24);
+            margin: 0 1em 0 0;
+            cursor: default;
+        }
+    }
+
+    .cw-ribbon-action-menu {
+        vertical-align: text-top;
+        margin: 2px 0 0 2px;
+        &.is-open {
+            z-index: 32;
+        }
+    }
+}
+
+.cw-ribbon-tools {
+    background-color: var(--white);
+    border: solid thin var(--content-color-40);
+    box-shadow: 2px 2px var(--dark-gray-color-30);
+    position: absolute;
+    right: -570px;
+    top: 15px;
+    height: 100%;
+    max-width: calc(100% - 28px);
+    display: flex;
+    flex-flow: row;
+    transition: right 0.8s;
+    z-index: 42;
+
+    &.unfold {
+        right: 0px;
+        margin-right: 15px;
+    }
+
+    &.cw-ribbon-tools-consume {
+        position: fixed;
+
+        &.unfold {
+            right: 15px;
+        }
+    }
+
+    &.cw-ribbon-tools-sticky {
+        position: absolute;
+        top: -1px;
+        margin-right: 0;
+    }
+
+    .cw-ribbon-tool-content {
+        height: 100%;
+        width: 540px;
+        background-color: var(--white);
+        padding: 0;
+        overflow: hidden;
+
+        .cw-ribbon-tool-content-nav {
+            position: sticky;
+            height: 100%;
+            top: 0;
+            background-color: var(--white);
+            margin: 0;
+            padding: 0;
+            color: var(--base-color);
+            display: flex;
+            z-index: 43;
+
+            .cw-tools-hide-button {
+                position: absolute;
+                border: none;
+                height: 36px;
+                width: 24px;
+                min-width: 24px;
+                margin-right: 1em;
+                padding: 0 4px;
+                right: 0;
+                top: 12px;
+                cursor: pointer;
+                @include background-icon(decline, clickable, 24);
+                background-repeat: no-repeat;
+                background-size: 24px;
+                background-position: center right;
+                background-color: var(--white);
+            }
+
+            > .cw-ribbon-tool-content-tablist {
+                width: 100%;
+                height: 100%;
+
+                > .cw-tabs-nav {
+                    border: none;
+                    width: calc(100% - 48px);
+
+                    > button {
+                        padding: 18px 8px 4px 8px;
+                        margin-top: 2px;
+                        max-width: unset;
+                        flex-grow: 0.5;
+                        &::after {
+                            margin-top: 16px;
+                        }
+                    }
+                }
+
+                > .cw-tabs-content {
+                    border: none;
+                    border-top: solid thin var(--content-color-40);
+                    padding: 0;
+                    height: calc(100% - 58px);
+
+                    > .cw-tab {
+                        height: calc(100% - 22px);
+                        padding: 14px 8px 8px 8px;
+                        position: relative;
+                        overflow-y: auto;
+                        overflow-x: hidden;
+                        scrollbar-width: thin;
+                        scrollbar-color: var(--base-color) var(--white);
+
+                        &.cw-ribbon-tool-blockadder-tab {
+                            height: 100%;
+                            overflow: hidden;
+                            padding: 0;
+                        }
+                    }
+                }
+            }
+        }
+
+        .cw-ribbon-tool {
+            padding: 14px 8px 6px 8px;
+            height: calc(100% - 64px);
+            overflow-y: auto;
+            overflow-x: hidden;
+            scrollbar-width: thin;
+            scrollbar-color: var(--base-color) var(--white);
+        }
+    }
+}
+
+#courseware-public-index {
+    .cw-ribbon-tools {
+        top: 127px;
+
+        &.cw-ribbon-tools-consume {
+            top: 14px;
+        }
+
+        &.cw-ribbon-tools-sticky {
+            top: 56px;
+        }
+    }
+}
+
+.cw-structural-element-consumemode {
+    .cw-ribbon-tools {
+        top: 25px;
+    }
+}
+
+.responsive-display {
+    .cw-ribbon-sticky-top,
+    .cw-ribbon-sticky-bottom,
+    .cw-ribbon-wrapper-consume,
+    .cw-ribbon-consume-bottom {
+        width: 100%;
+    }
+
+    .cw-ribbon {
+        &.cw-ribbon-sticky {
+            width: calc(100% - 62px);
+        }
+    }
+
+    .cw-ribbon-sticky-spacer {
+        height: 75px;
+    }
+}

resources/assets/stylesheets/scss/courseware/layouts/tabs.scss

+@use '../../../mixins.scss' as *;
+@import '../variables.scss';
+
+.cw-tabs-nav {
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    border: solid thin var(--content-color-40);
+    border-bottom: none;
+
+    button {
+        background-color: var(--white);
+        border: none;
+        padding: 1em 0 4px 0;
+        margin: 0 7px 0 21px;
+        color: var(--base-color);
+        cursor: pointer;
+        text-align: center;
+        flex-grow: 1;
+        max-width: max-content;
+
+        &::after {
+            display: block;
+            margin-top: 4px;
+            margin-bottom: -5px;
+            margin-left: -14px;
+            width: calc(100% + 28px);
+            content: '';
+            border-bottom: solid 3px var(--dark-gray-color-75);
+            transform: scaleX(0);
+            transition: transform var(--transition-duration) ease-in-out;
+        }
+
+        &.is-active,
+        &:hover {
+            color: var(--black);
+            &:after {
+                transform: scaleX(1);
+            }
+        }
+
+        @each $icon in $icons {
+            &.cw-tabs-nav-icon-text-#{$icon} {
+                &::before {
+                    @include background-icon($icon);
+                    background-repeat: no-repeat;
+                    background-position: left bottom;
+
+                    display: inline-block;
+                    height: 16px;
+                    width: 16px;
+                    margin-bottom: -2px;
+                    padding-left: 4px;
+                    content: '';
+                }
+            }
+            &.is-active.cw-tabs-nav-icon-text-#{$icon},
+            &.cw-tabs-nav-icon-text-#{$icon}:hover {
+                &::before {
+                    @include background-icon($icon, info);
+                }
+            }
+        }
+        @each $icon in $icons {
+            &.cw-tabs-nav-icon-solo-#{$icon} {
+                &::before {
+                    display: inline-block;
+                    height: 24px;
+                    width: 24px;
+                    content: '';
+
+                    @include background-icon($icon, clickable, 24);
+                    background-repeat: no-repeat;
+                    background-position: center;
+                }
+            }
+            &.is-active.cw-tabs-nav-icon-solo-#{$icon},
+            &.cw-tabs-nav-icon-solo-#{$icon}:hover {
+                &::before {
+                    @include background-icon($icon, info);
+                }
+            }
+        }
+    }
+
+    &:hover li {
+        &.is-active::after {
+            transform: scaleX(0);
+        }
+        &:hover::after {
+            transform: scaleX(1);
+        }
+    }
+}
+
+.cw-tabs-content {
+    border: solid thin var(--content-color-40);
+    padding: 4px;
+}
+
+.cw-tabs {
+    .cw-tab {
+        display: none;
+        height: 0;
+
+        &.cw-tab-active {
+            display: block;
+            height: unset;
+            padding: 4px 8px;
+        }
+    }
+}