WebSVN – Moodle – Diff – /theme/universe/scss/moodle/course.scss

 $activity-item-border: theme-color-level('primary', -2) !default;
 $activity-item-color: $body-color;
 $activity-item-hover: theme-color-level('primary', -12) !default;
 $activity-add-hover: theme-color-level('primary', -10) !default;
+$category-box-padding: 20px !default;
 $course-cover-height: 240px !default;
-/* Cards */
 $course-card-shadow-color: $primary-color-600 !default;
 /* Cards */
+.rui-course-card-img-top {
-.rui-course-card-img-top {
+    margin: 0;
-    margin: 0;
+    position: relative;
     width: 100%;
-    height: 200px;
+    width: 100%;
-    border-radius: $btn-border-radius;
+    height: $course-cover-height;
+    background-repeat: no-repeat;
-    background-repeat: no-repeat;
+    background-size: cover;
-    background-size: cover;
-    background-position: center;
+    background-position: center;
-    @if variable-exists(showcolorcoursecardmask) {
+    border-radius: $btn-border-radius - 1px;
+    .block-recentlyaccessedcourses &,
+    .block_starredcourses & {
+        height: 140px;
+    }
+    .rui-course-listitem--cat & {
+        margin-bottom: -31px;
+    }
+}
+.rui-course-card-img {
+    margin: 0;
+    width: 100%;
+    height: $course-cover-height;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    border-radius: $btn-border-radius;
+    position: relative;
+    overflow: hidden;
-        @if $showcolorcoursecardmask=='yes' {
+    img {
-            background-color: $course-card-shadow-color;
+        width: auto;
-            background-blend-mode: luminosity;
+        height: 100%;
         object-fit: cover;
         position: absolute;
+    }
+}
-.rui-course-card-deck {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
+.rui-course-card-deck {
     display: flex;
-    .rui-course-card {
+    flex-direction: column;
-        width: 100%;
+    align-items: stretch;
         display: none;
+    }
+}
+.rui-course-desc {
-.rui-course-desc {
+    color: $body-color-secondary;
-    font-size: 1.125rem; //18px
+    font-size: 1.125rem;// 18px.
-    @include media-breakpoint-between(xs, sm) {
+    .theme-dark & {
-        font-size: 1rem; //16px
+        color: $dm-body-color-secondary;
+    }
-    }
+    strong {
-    width: 100%;
+        color: $body-color;
+        .theme-dark & {
-    // @if variable-exists(coursedescwidth) {
+            color: $dm-body-color;
-    //     max-width: $coursedescwidth;
+        }
+    }
-    // }
+    @include media-breakpoint-between(xs, sm) {
-}
+        font-size: $font-size-md;
+    }
 .activity-description {
-    width: 100%;
+.rui-dashboard-bottom {
     .block:first-of-type {
-    // @if variable-exists(incoursedescwidth) {
+        margin-top: 30px;
     //     max-width: $incoursedescwidth;
-    // }
 }
-.page-mycourses,
 .rui-dashboard-main,
-.rui-dashboard-bottom,
+#block-region-dmiddleblocks,
-.rui-dashboard-top {
+.page-mycourses,
 .rui-dashboard-main,
+.rui-dashboard-bottom,
-    .block-myoverview,
+.rui-dashboard-top {
+    .block-myoverview {
+        .rui-course-card-deck {
+            display: grid;
+            flex-direction: column;
+            align-items: stretch;
-    .block-recentlyaccessedcourses,
+            @include media-breakpoint-up(xl) {
+                grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+                gap: 40px;
+            }
+            @include media-breakpoint-between(md, lg) {
-    .block_starredcourses {
+                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-        .rui-course-card-deck {
+                gap: 40px;
+            }
             display: grid;
-            flex-direction: column;
+            @include media-breakpoint-between(xs, sm) {
-            align-items: stretch;
+                grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
                 gap: 10px;
             grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
             gap: 36px;
+    }
+}
-}
+.block-recentlyaccessedcourses,
+.block_starredcourses {
+    position: relative;
+    .rui-course-card-deck {
+        display: grid;
+        flex-direction: column;
-.courses,
+        align-items: stretch;
 .rui-category-browse {
-    position: relative;
-    .rui-course-card-deck {
+        @include media-breakpoint-up(md) {
-        display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
-        flex-direction: column;
+            gap: 20px;
+        }
-        align-items: stretch;
+        @include media-breakpoint-between(xs, sm) {
-        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
-        gap: 36px;
+            gap: 10px;
+        }
+    }
+}
+.courses,
+.rui-category-browse {
+    position: relative;
+    .rui-course-card-deck {
+        display: grid;
+        flex-direction: column;
+        align-items: stretch;
+        @include media-breakpoint-up(lg) {
-    }
+            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+            gap: 40px;
+            .rui-course-card-title {
+                font-size: 1.25rem;
+            }
-}
+        }
-// Main Block Column
+        @include media-breakpoint-only(lmd) {
-#block-region-dmiddleblocks {
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
             gap: 40px;
+        }
+    }
+}
 .rui-course-card {
+    padding: 0 0 10px;
+    display: grid;
+    align-content: flex-start;
+    background-color: $container-bg;
+    //border: 1px solid $border-color;
-    padding: 0;
+    border-radius: $btn-border-radius;
-    position: relative;
-    overflow: hidden;
+    position: relative;
-    .rui-course--list & {
+    .block-myoverview & {
-        padding: 20px;
+        display: grid;
-        border: 1px solid $border-color;
+    }
-        border-radius: $btn-border-radius;
+    .course_category_tree & {
+        display: grid;
+        overflow: hidden;
+    }
-        .theme-dark & {
+    .theme-dark & {
-            border-color: $dm-border-color;
-        }
         background-color: $dm-container-bg;
         border-color: $dm-border-color;
+    }
+    .customfield {
+        font-size: $font-size-xs;
+        color: $body-color-light;
+        @include media-breakpoint-up(md) {
+            padding: 0 20px;
+            margin-top: 5px;
+        }
     .customfield {
-        padding: 0;
+        @include media-breakpoint-between(xs, sm) {
-        margin: 10px 0;
+            padding: 0 10px;
+            margin-top: 5px;
+        }
+        .theme-dark & {
+            color: $body-color-light;
+        }
+        .rui-course--list & {
+            padding: 0;
+            margin: 10px 0 0;
         font-size: $font-size-xs;
-        color: $body-color-light;
+            img {
                 max-width: 20px;
+                max-height: 20px;
+            }
+        }
+        .customfieldname {
-        .theme-dark & {
+            font-weight: $font-weight-medium;
             color: $body-color-light;
         &.rui-cf-customcourselogo,
-        .customfieldname {
+        &.rui-cf-customcoursedmlogo,
     .dropdown {
         position: absolute;
         top: 0;
+        right: 0;
+        z-index: 3;
+    }
+}
+.rui-course-card-body {
+    margin: 10px $category-box-padding 0;
+    flex-wrap: wrap;
+    .block-recentlyaccessedcourses &,
+    .block_starredcourses & {
+        @include media-breakpoint-up(md) {
+            margin: 10px 20px 0;
+        }
+        @include media-breakpoint-between(xs, sm) {
+            margin: 10px 10px 0;
+        }
+    }
+    .summary {
+        p {
+            margin-bottom: 0;
         right: 0;
+    }
 }
+.rui-course-card-wrapper {
+    #page-enrol-index & {
-.rui-course-card-margin {
+        margin-bottom: $category-box-padding - 15px;
     margin: 0 20px 0;
+}
         filter: grayscale(100%);
+    }
+}
+.rui-course-cat-badge {
-.rui-course-cat-badge {
+    margin-bottom: 3px;
+    display: grid;
+    font-weight: $font-weight-bold;
+    color: $body-color-light;
-    display: grid;
+    @include media-breakpoint-up(md) {
+        font-size: $font-size-sm;
+    }
-    font-size: $font-size-sm;
+    @include media-breakpoint-between(xs, sm) {
+        font-size: 11px;
+        svg {
-    font-weight: $font-weight-medium;
+            width: 12px;
+            height: 12px;
+        }
+    }
+    .block-recentlyaccessedcourses &,
+    .block_starredcourses & {
+        font-size: 0.688rem; // 11px
     color: $gray-500;
     .theme-dark & {
         color: $dm-body-color-light;
+    }
+}
 a.rui-course-cat-badge:hover {
     background-color: $gray-200;
 a.rui-course-cat-badge:hover {
+    color: $gray-500;
-    color: $gray-500;
+    text-decoration: none;
     text-decoration: none;
     .theme-dark & {
-    .theme-dark & {
+        background-color: $dm-gray-200;
-        color: $dm-gray-200;
+        color: $dm-gray-800;
+    }
+}
 .rui-course-hidden-badge {
-    padding: 3px 7px;
+    padding: .25rem .75rem;
     border-radius: $btn-border-radius;
-    background-color: $red-100;
-    font-size: 11px;
+    background-color: $red-100;
-    font-weight: $font-weight-medium;
-    color: $red-700;
-}
     font-size: $font-size-xs;
+    font-weight: $font-weight-medium;
+    color: $red-700;
+}
+.rui-course-card-progress-bar,
+.rui-course-card-footer-progress {
+    align-self: flex-end;
+    position: relative;
+    margin: 10px 0;
+    line-height: 25px;
+    .rui-mo-progress-text {
+        background-color: $gray-900;
+        color: $gray-100;
+        position: absolute;
+        top: 4px;
+        padding: 1px 6px;
+        font-size: 11px!important;
+        line-height: 1.5;
+        border-radius: $btn-border-radius;
 .rui-customfields-container,
 .rui-card-course-contacts,
-.rui-course-card-footer-progress {
+    @include media-breakpoint-between(xs, sm) {
+        svg {
+            display: none;
+        }
+    }
+    .rui-course-listitem & {
+        padding: 0 20px 10px;
+        border-top: none;
     width: 100%;
-    padding: 0 20px;
+        @include media-breakpoint-up(md) {
             padding: 0 20px 10px;
     align-self: flex-end;
-    .rui-course-listitem & {
+        @include media-breakpoint-between(xs, sm) {
+            padding: 0 10px 5px;
+        }
+    }
-        padding: 0 20px 10px;
+    .rui-progress-100 & {
+        border-color: var(--primary-color-100);
+    }
+}
-        border-top: none;
+.rui-mo-progress-text {
+    .rui-mo-progress-0 & {
+        left: 0!important;
+    }
+    .rui-mo-progress-100 & {
+        right: 0!important;
+        left: auto!important;
+    }
+}
-    }
+.rui-customfields-container {
+    @include media-breakpoint-up(md) {
+        margin: 15px $category-box-padding 0;
+    }
+    @include media-breakpoint-between(xs,sm) {
+        margin: 15px 10px 0;
     .rui-progress-100 & {
         border-color: var(--primary-color-100);
 .rui-course-card-wrapper + .rui-customfields-container {
 .rui-course-card-icons {
     position: absolute;
     top: 10px;
+    left: 10px;
-    left: 10px;
+    z-index: 2;
     display: inline-flex;
         width: 18px;
         height: 18px;
         color: $white;
         background-color: rgba($black, 0.2);
-        backdrop-filter: blur(10px);
+        backdrop-filter: blur(2rem);
-        -webkit-backdrop-filter: blur(10px);
-        border-radius: 50%;
+        -webkit-backdrop-filter: blur(2rem);
-        .theme-dark & {
             filter: invert(0);
         border-radius: $btn-border-radius-xl;
         display: flex;
         align-content: center;
         justify-content: center;
         background-color: rgba($black, 0.2);
-        backdrop-filter: blur(10px);
+        backdrop-filter: blur(2rem);
-        -webkit-backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(2rem);
-        border-radius: 50%;
+        border-radius: $btn-border-radius-xl;
         box-sizing: content-box;
     .icon:not(.hidden) {
         display: inline-grid;
+    }
-    .rui-course-card--noimg & {
-        margin: 10px 20px 0;
+    .rui-course-card--noimg & {
         position: relative;
         top: 0;
-        left: 0;
-        @include media-breakpoint-down(sm) {
-            margin-left: 0;
         left: 0;
         &:empty {
             display: none;
+        }
+    }
+}
 .rui-course-card-icons--right {
+    position: absolute;
-    position: absolute;
+    top: 10px;
-    top: 10px;
+    left: 10px;
-    right: 10px;
-    display: inline-flex;
-    font-size: 11px;
-    .rui-course-list & {
-        position: relative;
+    z-index: 3;
         top: 0;
-        right: 0;
+    display: inline-flex;
     font-size: 12px;
     .rui-icon-container {
-        color: $white;
+    .rui-icon-container {
-        font-weight: $font-weight-bold;
+        color: $white;
-        text-transform: uppercase;
+        font-weight: $font-weight-bold;
+        text-transform: uppercase;
-        margin-left: .35rem;
         padding: 6px;
         display: flex;
         align-items: center;
         justify-content: center;
-        width: 30px;
+        width: 32px;
-        height: 30px;
+        height: 32px;
+            }
+        }
+    }
+}
-.rui-coursemenu-btn {
+.rui-myoverview-action-menu {
     position: absolute;
-    top: 10px;
+    top: 0;
-    right: 10px;
+    right: 0;
+    z-index: 3;
+}
-    z-index: 3;
+.rui-coursemenu-btn {
     margin: 10px;
     width: 30px;
     height: 30px;
     display: inline-grid;
     align-content: center;
     justify-content: center;
     background-color: rgba($black, 0.2);
-    background-color: rgba($black, 0.2);
+    backdrop-filter: blur(2rem);
-    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(2rem);
     border: none;
     color: $white;
     border-radius: $btn-border-radius;
+    .rui-course-listitem & {
+        top: -20px;
+        right: 14px;
+    }
-    .rui-course-listitem & {
+    .rui-course-list-body & {
-        top: 5px;
+        @include media-breakpoint-up(md) {
-        right: 0;
+            color: $body-color;
+            .theme-dark & {
                 color: $dm-body-color;
-    .rui-course-list-body & {
+            }
         top: 0;
         right: 0;
-    }
+}
 .rui-course-listitem {
-.rui-course-listitem {
+    list-style: none;
-    margin: 0 0 5px;
-    border: 1px solid $border-color !important;
-    border-radius: $btn-border-radius;
-    .theme-dark & {
-        border-color: $dm-border-color !important;
+    margin: 0 0 5px;
-    }
+    border: 1px solid $border-color!important;
-    .rui-course-card-title .icon {
+    border-radius: $btn-border-radius;
-        margin-right: .35rem;
-    }
-    .rui-course-card-title a {
+    .theme-dark & {
-        max-width: calc(100% - 100px);
+        border-color: $dm-border-color;
+    }
-        min-width: 100%;
+    .rui-course-card-title .icon {
-    }
+        margin-right: .35rem;
-}
+    }
-.rui-course-listitem-img {
+}
-    margin-bottom: 35px;
     width: 200px;
-    height: 100%;
+.rui-card-course-contacts {
-    min-height: 100px;
+    width: 100%;
-    border-radius: $btn-border-radius;
+    display: inline-flex;
+    flex-wrap: wrap;
-    overflow: hidden;
+    align-items: center;
-    position: relative;
-    background-size: cover;
-    background-position: center;
+    .rui-contant-name {
-    @if variable-exists(showcolorcoursecardmask) {
-        @if $showcolorcoursecardmask=='yes' {
+        font-size: $font-size-sm;
-            background-color: $course-card-shadow-color;
+        font-weight: $font-weight-medium;
-            background-blend-mode: luminosity;
+        color: $body-color;
-        }
-    }
-    @include media-breakpoint-between(xs, sm) {
+        .theme-dark & {
-        display: none;
-    }
+            color: $dm-body-color;
+        }
+    }
+    #page-enrol-index & {
-.rui-card-course-contacts {
+        display: none;
-    position: absolute;
-    top: 185px;
         visibility: hidden;
     padding-right: 15px;
     display: inline-flex;
-    flex-wrap: wrap;
-    .rui-course-card--noimg & {
-        top: 0;
+    .rui-card-avatar {
-        margin: 20px 0 10px;
+        width: 36px;
         height: 36px;
-    .rui-card-contact {
-        margin-right: .35rem;
-    }
-    .rui-card-avatar {
-        width: 30px;
-        height: 30px;
-        border-radius: $btn-border-radius-lg;
-    }
-}
-.rui-course-card-link {
-    padding: 10px 20px;
-    width: 100%;
-    display: flex;
-    justify-content: flex-start;
-    align-content: center;
-    color: $body-color;
-    .theme-dark & {
-        color: $dm-body-color;
         margin: -3px;
         border: 3px solid $container-bg;
-    &:hover {
+        border-radius: $btn-border-radius-lg;
-        text-decoration: none;
+        position: relative;
         color: $link-color;
         .theme-dark & {
-        .theme-dark & {
+            border-color: $dm-container-bg;
+        }
+    }
+}
-.rui-course-card-title {
-    font-size: $font-size-base;
+.rui-course-card-title {
     font-weight: $font-weight-bold;
+    line-height: 1.3;
+    @include media-breakpoint-up(md) {
+        font-size: 1.125rem; // 18px.
+    }
-    line-height: 1.3;
+    @include media-breakpoint-between(xs, sm) {
+        font-size: 1rem;
+    }
+    .block-recentlyaccessedcourses &,
+    .block_starredcourses & {
+        font-size: $font-size-md;
+    }
+    .theme-primary.icon {
+        .theme-dark {
+            color: var(--primary-color-300);
+        }
     margin-bottom: 0;
     a {
+        font-weight: $font-weight-bold;
+        color: $body-color;
+        text-decoration: none;
+        &:before {
+            display: none;
+        }
+        .block-recentlyaccessedcourses &,
+        .block_starredcourses & {
-    a {
+            display: grid;
         color: $body-color;
+        }
+    }
+}
 .rui-course-card-text {
+    margin-bottom: 16px;
-    margin-top: .35rem;
+    padding-right: 7px;
     max-height: $max-course-card-text-height;
+    overflow-y: auto;
+    color: $body-color-light;
+    #page-enrol-index & {
+        display: none;
+        visibility: hidden;
+    }
-    overflow-y: auto;
+    @include media-breakpoint-up(md) {
+        font-size: $font-size-sm;
+    }
+    @include media-breakpoint-between(xs, sm) {
-    font-size: $font-size-md;
+        font-size: $font-size-xs;
     color: $body-color-secondary;
+    .rui-course-card--noimg & {
+        max-height: $max-course-card-text-height + 200px;
+    }
+    .theme-dark & {
+        color: $dm-body-color-light;
+    }
+    .no-overflow {
+        overflow: hidden;
+    }
+    img {
+        max-width: 100%;
+        height: auto;
-    .rui-course-card--noimg & {
+        margin-left: 0;
-        max-height: $max-course-card-text-height + 200px;
+        margin-right: 0;
+    }
+    }
     h4 {
         font-size: 12px;
-    }
-    .theme-dark & {
-        color: $dm-body-color-secondary;
+    }
+}
-.rui-course-list-body {
-    padding: 10px;
-    //Container for SVG
-    .icon {
-        margin-right: .35rem;
-        padding: 6px;
-        width: 18px;
-        height: 18px;
-        color: $white;
-        background-color: rgba($black, 0.2);
-        backdrop-filter: blur(10px);
-        -webkit-backdrop-filter: blur(10px);
+.rui-course-list-body {
-        border-radius: 50%;
+    position: relative;
         .theme-dark & {
-            filter: invert(0);
-        }
-    }
-    //Moodle 4.0
-    .text-primary:not(.hidden) {
-        position: absolute;
-        z-index: 2;
-        top: 20px;
-        left: 20px;
-        margin-right: .35rem;
-        padding: 6px;
-        width: 18px;
-        height: 18px;
-        color: $white !important;
-        display: flex;
-        align-content: center;
-        justify-content: center;
-        background-color: rgba($black, 0.2);
-        backdrop-filter: blur(10px);
-        -webkit-backdrop-filter: blur(10px);
+    [data-region="favourite-icon"] {
-        border-radius: 50%;
+        line-height: 1;
-        box-sizing: content-box;
-        @include media-breakpoint-between(xs, sm) {
-            top: 3px;
+    }
-            left: 3px;
-            width: 14px;
+    @include media-breakpoint-up(md) {
-            height: 14px;
         padding: 20px;
+    }
-        .theme-dark & {
+    @include media-breakpoint-between(xs, sm) {
+        padding: 10px;
             filter: invert(0);
     .rui-course-card-title {
         .icon:not(.hidden) {
-    .icon:not(.hidden) {
-        display: inline-grid;
+            display: inline;
-    }
+        }
+    }
+}
-//UI for Course Card - Finished
-.rui-progress-100 {
+//UI for Course Card - Finished
-    border-color: $green-200;
+.rui-progress-100 {
     .theme-dark & {
         filter: invert(1);
+    }
+}
-.section_add_menus {
+.rui-category-label a {
-    text-align: right;
+    &::after {
+        display: none;
     clear: both;
 }
 .section_add_menus {
-.section-modchooser {
+    text-align: right;
     clear: both;
+}
         .contentwithoutlink,
         .activityinstance {
             min-width: 40%;
             display: table-cell;
-            padding-right: 0;
+            padding-right: 4px;
             min-height: 2em;
             >a {
             /* stylelint-disable-line declaration-no-important */
+        }
         &.indented {
             .activity-item {
-                margin-left: 64px;
-            }
-        }
+                border: 0;
-        &.indented+.indented {
+                @include media-breakpoint-up(md) {
-            .activity-item {
+                    margin-left: 63px;
-                border-color: rgba($border-color, .6);
+                }
-                .theme-dark & {
+                @include media-breakpoint-between(xs, sm) {
-                    border-color: rgba($dm-border-color, .6);
+                    margin-left: 20px;
+                }
 .topics+.single-section {
     margin-top: 30px;
+}
 .section li.activity {
-    padding: .25rem 0;
+    padding: 0;
-    margin: 0;
+    margin: .25rem 0;
     clear: both;
     position: relative;
     transition: $transition-base;
     &:last-child {
-    &:last-child {
+        padding: 0;
-        padding: 0 0 0 0;
+        margin-bottom: 0;
+    }
+}
 .course-content .current::before {
     content: "";
-    border: 2px solid $primary-color-600;
+    border-left: 3px solid var(--main-theme-color);
     border-radius: 17px;
     width: calc(100% + 12px);
-    height: calc(100% + 12px);
+    height: calc(100% + 18px);
     position: absolute;
     z-index: -1;
-    top: -6px;
+    top: -9px;
-    left: -6px;
+    left: -16px;
-    // background-color: rgba($primary-color-100, .5);
+    // background-color: rgba(var(--primary-color-100), .5);
+}
 .course-content li {
     &.section {
+        ul {
-        ul {
+            flex-wrap: wrap;
             list-style: disc;
     display: block;
+}
 .jumpmenu {
+    float: none;
-    float: none;
+    max-width: 160px;
+}
 .completionprogress {
 #page-site-index .subscribelink {
     text-align: right;
+}
 #frontpage-available-course-list h2,
 #site-news-forum h2,
 #frontpage-course-list h2,
 #frontpage-category-names h2,
+#frontpage-category-combo h2 {
+    margin: 0 0 30px;
+    display: block;
+    font-size: 3rem;
+    font-weight: $font-weight-bold;
+    text-align: center;
+    color: $body-color;
+    .theme-dark & {
+        color: $dm-body-color;
+    }
+    @include media-breakpoint-only(md) {
-#frontpage-category-combo h2 {
+        font-size: 2.5rem; // 40px
-    margin-bottom: 9px;
+    }
     @include media-breakpoint-between(xs, sm) {
-        display: block;
+    @include media-breakpoint-between(xs, sm) {
-        text-align: center;
+        font-size: 1.5rem; // 24px
+    }
 .path-course-view .block.drag .header {
     cursor: move;
+}
 .path-course-view .completionprogress {
-    font-size: $font-size-md;
+    font-size: $font-size-sm;
     color: $body-color-secondary;
 span.editinstructions {
     position: absolute;
     top: -15px;
-    font-size: $font-size-md;
+    font-size: $font-size-sm;
     padding: .25rem .5rem;
     text-decoration: none;
     z-index: $zindex-tooltip;
     left: 0;
     width: 60%;
     margin: 0 20%;
     padding: .5rem;
-    font-size: $font-size-md;
+    font-size: $font-size-sm;
     text-align: center;
     z-index: 1; // Required in order to have this above relatively positioned course content@mixin
     border: none;
 .dndupload-preview {
     list-style: none;
     margin-top: 1rem;
     margin-bottom: 1rem;
-    padding: .85rem 1.5rem;
+    padding: 1rem;
     display: inline-flex;
     border-radius: $btn-border-radius;
     color: $gray-800;
-    font-weight: $font-weight-medium;
     font-weight: $font-weight-medium;
     .theme-dark & {
         background-color: $dm-gray-100;
         border: 2px dashed $dm-gray-300;
     &.even {
         background-color: $table-accent-bg;
+    }
+}
-.courses>.paging.paging-morelink {
-    text-align: right;
-    padding: 0 0 $spacer 0;
-}
-.course_category_tree .category .numberofcourse {
-    font-size: $font-size-md;
-}
-.course_category_tree .controls {
-    visibility: hidden;
-}
-.course_category_tree .controls div {
-    display: inline;
-    cursor: pointer;
-}
-.jsenabled .course_category_tree .controls {
-    visibility: visible;
-}
-.course_category_tree .controls {
+.subcategories {
-    margin-bottom: 5px;
-    text-align: right;
-    float: right;
-}
-.course_category_tree .controls div {
-    padding-right: 2em;
-    font-size: 75%;
-}
-.course_category_tree .category.with_children.collapsed>.info>.categoryname {
+    padding-bottom: 30px;
-    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.25 12L8.75 7.75V16.25L14.25 12Z' stroke='#{url-friendly-colour($body-color)}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E%0A");
+    margin-bottom: 30px;
-    .dir-rtl & {
         background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.75 12L14.25 7.75V16.25L8.75 12Z' stroke='#{url-friendly-colour($body-color)}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E%0A");
-    }
+    border-bottom: 1px solid $border-color;
     .theme-dark & {
-        background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.25 12L8.75 7.75V16.25L14.25 12Z' stroke='#{url-friendly-colour($dm-body-color)}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E%0A");
+        border-color: $dm-border-color;
-    }
-    .dir-rtl.theme-dark & {
-        background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.75 12L14.25 7.75V16.25L8.75 12Z' stroke='#{url-friendly-colour($dm-body-color)}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E%0A");
+    }
-    }
+    @include media-breakpoint-up(xl) {
-}
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+        gap: 30px;
 .course_category_tree .category.with_children>.info>.categoryname {
-    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 9.75L16.25 15.25H7.75L12 9.75Z' stroke='#{url-friendly-colour($body-color)}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E%0A");
+        #page-site-index &,
+        .category-browse-0 & {
-    .theme-dark & {
+            grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+        }
+    }
-        background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 9.75L16.25 15.25H7.75L12 9.75Z' stroke='#{url-friendly-colour($dm-body-color)}' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E%0A");
+    @include media-breakpoint-between(lmd,lg) {
-    }
+        display: grid;
         grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-.course_category_tree .category>.info>.categoryname {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='#{url-friendly-colour($body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19.25 17.25V9.75C19.25 8.64543 18.3546 7.75 17.25 7.75H4.75V17.25C4.75 18.3546 5.64543 19.25 6.75 19.25H17.25C18.3546 19.25 19.25 18.3546 19.25 17.25Z'%3E%3C/path%3E%3Cpath stroke='#{url-friendly-colour($body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M13.5 7.5L12.5685 5.7923C12.2181 5.14977 11.5446 4.75 10.8127 4.75H6.75C5.64543 4.75 4.75 5.64543 4.75 6.75V11'%3E%3C/path%3E%3C/svg%3E%0A");
-    .theme-dark & {
-        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='#{url-friendly-colour($dm-body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19.25 17.25V9.75C19.25 8.64543 18.3546 7.75 17.25 7.75H4.75V17.25C4.75 18.3546 5.64543 19.25 6.75 19.25H17.25C18.3546 19.25 19.25 18.3546 19.25 17.25Z'%3E%3C/path%3E%3Cpath stroke='#{url-friendly-colour($dm-body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M13.5 7.5L12.5685 5.7923C12.2181 5.14977 11.5446 4.75 10.8127 4.75H6.75C5.64543 4.75 4.75 5.64543 4.75 6.75V11'%3E%3C/path%3E%3C/svg%3E%0A");
-    }
-}
-.course_category_tree .category.with_children.collapsed>.info>.categoryname,
-.course_category_tree .category.with_children>.info>.categoryname,
-.course_category_tree .category>.info>.categoryname {
-    background-color: $container-bg;
-    background-size: 24px;
-    background-repeat: no-repeat;
-    background-position: 17px;
-    border: 1px solid $border-color;
+        gap: 30px;
-    position: relative;
-    width: 100%;
-    margin: .25rem auto;
+        #page-site-index &,
-    padding-top: 7px;
+        .category-browse-0 & {
-    padding-left: 46px;
-    padding-bottom: 7px;
-    padding-right: 7px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    border-radius: $btn-border-radius;
-    font-family: $font-family-base;
+            grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
-    font-weight: $font-weight-medium;
+        }
-    font-size: $font-size-base;
+    }
-    line-height: 1.5;
-    color: $body-color;
+    @include media-breakpoint-only(md) {
         display: grid;
-    .dir-rtl & {
+        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-        background-position: calc(100% - 12px);
+        gap: 30px;
-    }
-    .theme-dark & {
-        background-color: $dm-container-bg;
+    }
-        border-color: $dm-border-color;
-        color: $dm-body-color;
+    @include media-breakpoint-between(xs, sm) {
+        display: grid;
         grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
         gap: 30px;
-    .spinner {
-        position: absolute;
-        top: 5px;
-        left: 5px;
+    }
-        width: 12px;
-        height: 12px;
-        margin: 0;
-    }
-}
-.course_category_tree .category.collapsed>.content {
-    display: none;
+    .category {
-}
-.course_category_tree .category>.info {
+        border-radius: $btn-border-radius;
-    clear: both;
+        border: 1px solid $border-color;
-}
-.course_category_tree .category>.content {
-    .wrapper-md {
-        width: $wrapper-md - 20px;
+        .theme-dark & {
-        @include media-breakpoint-between(xs, md) {
-            width: 100%;
-        }
-    }
-}
+            border-color: $dm-border-color;
+        }
-.rui-category-link {
     border-radius: $btn-border-radius;
     position: relative;
-    padding: 4px 7px;
+.courses>.paging.paging-morelink {
-    border-radius: $btn-border-radius;
+    text-align: right;
-    color: $body-color;
+    padding: 0 0 $spacer 0;
+}
+.rui-category-link {
+    font-size: 2rem;
     font-weight: $font-weight-bold;
     .theme-dark & {
-        color: $dm-body-color;
+    &:after {
         display: none;
+        }
         &.highlight {
+            background-color: $body-bg;
+            .theme-dark & {
+                background-color: $dm-body-bg;
             background-color: $body-bg;
             >div,
             >div:hover,
             &[data-selected='1']>div {
  * Tablets                           768      979
  * Small tablets and large phones    481      767
  * Phones                              0      480
  */
-#page-course-management #action_bar {
-    margin-bottom: 30px;
-}
-#course-category-listings {
-    padding: 0;
-    margin: 30px 0;
-}
-#category-listing,
-#course-listing {
-    border: 1px solid $border-color;
-    border-radius: $btn-border-radius;
-    .theme-dark & {
-        border-color: $dm-border-color;
-    }
-}
 @media (min-width: 1200px) and (max-width: 1600px) {
     #course-category-listings.columns-3 {
         background-color: $body-bg;
             margin: 0 0 1em;
+        }
+    }
+}
 .page-settings-menu .menubar>a>.icon {
     width: auto;
     height: 32px;
     font-size: 32px;
+}
-.activity-navigation {
-    background-color: $gray-100;
+.activity-navigation {
-    padding: 10px;
-    border-radius: 30px;
-    @include media-breakpoint-between(xs, sm) {
-        padding: 0;
+    background-color: $gray-100;
     border-radius: $btn-border-radius + 6px;
     .theme-dark & {
         background-color: $dm-gray-100;
-    }
+    }
     .row {
         align-items: center;
         flex-wrap: nowrap;
-    }
+    #prev-activity-link,
+    #next-activity-link {
-    #jump-to-activity.custom-select {
-        margin: 0 auto;
-    }
+        white-space: pre-wrap;
     .text-truncate {
+}
-        max-width: 200px;
-        @include media-breakpoint-between(xs, sm) {
+.automatic-completion-conditions {
-            display: none;
-        }
+    .badge {
-    }
+        font-size: 100%;
+    }
     @include media-breakpoint-between(xs, sm) {
+.action-menu-item,
+.course-item-actions {
-        .urlselect {
+    .action-hide,
+    .action-show {
-            margin: 10px 0;
-        }
+        margin: 0 .5rem;
-        .btn {
+    }
-            width: 100%;
-        }
-    }
+    .action-delete {
+        float: right;
-}
+        margin-left: .5rem;
+    }
-.rui-forum-nav-btns,
-#prev-activity-link,
-#next-activity-link {
+    a {
-    white-space: pre-wrap;
-    position: relative;
+        margin: 1px;
-    background-repeat: no-repeat;
+        .fa-fw {
-    background-size: 20px;
+            padding: 9px;
-    height: 40px;
-    border-radius: 30px;
+            display: inline-flex;
-}
+            align-items: center;
-.rui-btn-action-link {
+            justify-content: center;
-    padding: 10px;
             border-radius: $btn-border-radius;
-    &.current {
-        background-color: $gray-300;
-        color: $gray-700;
-        .theme-dark & {
-            background-color: $dm-gray-300;
+            background-color: $gray-200;
-            color: $dm-gray-600;
+            color: $gray-800;
-        }
+            transition: $transition-base;
-    }
+            .theme-dark & {
-    &:hover {
+                filter: invert(1);
-        background-color: $gray-400;
+            }
+        }
-        color: $gray-800;
         &:hover .fa-fw {
-        .theme-dark & {
+            background-color: $gray-300;
-            background-color: $dm-gray-400;
-            color: $dm-gray-800;
-        }
-    }
-}
-.prev-discussion .rui-forum-nav-btns,
-#prev-activity-link {
-    padding-left: 30px;
-    background-position: center;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='#{url-friendly-colour($body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10.25 6.75L4.75 12L10.25 17.25'%3E%3C/path%3E%3Cpath stroke='#{url-friendly-colour($body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19.25 12H5'%3E%3C/path%3E%3C/svg%3E%0A");
     @include media-breakpoint-between(xs, sm) {
-        padding-left: 30px;
+            .theme-dark & {
                 background-color: $dm-gray-300;
+            }
         display: none;
+    }
     @include media-breakpoint-up(md) {
+        margin: 0 $rui-date-margin-left;
+        .modtype_subsection & {
+            margin-right: 0;
         margin: 0 $rui-date-margin-left;
+    }
     @include media-breakpoint-between(xs, sm) {
     .rui-activity-wrapper {
         display: flex;
         flex-wrap: wrap;
         border: 1px solid $border-color;
-        border-radius: $btn-border-radius;
+        border-radius: $btn-border-radius + 5px;
         padding: 5px;
         .theme-dark & {
             padding-bottom: 0;
             border: none;
+        }
+        .automatic-completion-conditions {
-        .automatic-completion-conditions {
+            margin-left: 5px;
             width: 100%;
             display: inline-flex;
             justify-content: flex-start;
             flex-flow: wrap;
             width: 100%;
             background-color: var(--primary-color-100);
             border-color: var(--primary-color-100);
             .theme-dark & {
-                background-color: $primary-color-700;
+                background-color: var(--primary-color-700);
                 border-color: var(--primary-color-100);
+            }
+        }
 .block-add {
     width: 100%;
     margin: .35rem 0;
     border-radius: $btn-border-radius;
     background-color: var(--primary-color-100);
-    color: $primary-color-600;
+    color: var(--main-theme-color);
     border-width: $border-width;
     .theme-dark & {
         background-color: var(--primary-color-100);
-        color: $primary-color-600;
+        color: var(--main-theme-color);
+    }
     .pluscontainer {
         border: 1px solid var(--primary-color-100);
+    }
     &:hover {
         cursor: pointer;
         background-color: var(--primary-color-100);
-        color: $primary-color-600;
+        color: var(--main-theme-color);
         .theme-dark & {
             background-color: var(--primary-color-100);
-            color: $primary-color-600;
+            color: var(--main-theme-color);
     justify-content: center;
     align-items: center;
     background-color: $gray-100;
     border-radius: $activity-iconcontainer-width;
     padding: 0.7rem;
-    margin: 0 10px 0 0;
+    margin: 0 12px;
     color: $gray-600;
+    text-decoration: none;
     .theme-dark & {
-        background-color: $dm-gray-100;
+        background-color: $dm-gray-400;
-        color: $dm-gray-600;
+        color: $dm-gray-900;
-    }
+    }
     &[aria-expanded="true"],
     &:hover {
         background-color: var(--primary-color-100);
-        color: $primary-color-600;
+        color: var(--main-theme-color);
         .theme-dark & {
-            background-color: $dm-gray-200;
+            background-color: $dm-gray-400;
-            color: $dm-gray-700;
+            color: $dm-gray-900;
+        }
     width: 100%;
     justify-content: space-between;
     color: $body-color;
+    border-bottom: 1px solid $border-color;
-    border-bottom: 1px solid $border-color;
+    text-decoration: none;
     .theme-dark & {
         color: $dm-body-color;
         font-size: 1rem;
+    }
     &[aria-expanded="true"],
     &:hover {
-        border-color: $primary-color-600;
+        border-color: var(--main-theme-color);
         text-decoration: none;
+    }
     .theme-dark & {
         color: $dm-body-color-secondary;
+    }
     &:hover {
-        color: $primary-color-600;
+        color: var(--main-theme-color);
         .theme-dark & {
             color: var(--primary-color-100);
 .rui-hidden-badge {
     position: relative;
     margin: 0 $rui-date-margin-left;
+}
 .path-section-view,
 .path-course-view {
     .activity-item {
         position: relative;
         background-color: $container-bg;
+            }
+        }
+    }
+}
 .theme-dark.path-section-view,
 .theme-dark.path-course-view {
     .activity-item {
         background-color: $dm-container-bg;
 .theme-dark.editing .activity-item:hover {
     background-color: $dm-black;
-}
-.section .draggable .activity-item .dragicon {
-    display: none;
+}
 .automatic-completion-conditions .badge {
     font-size: 80%;
     .theme-dark & {
         color: $dm-body-color-light;
+    }
+}
+.subcategories {
-.subcategories .subcategories {
+    padding-bottom: 30px;
+    margin-bottom: 30px;
-    margin-left: 30px;
+    border-bottom: 1px solid $border-color;
+    .theme-dark & {
+        border-color: $dm-border-color;
+    }
+    @include media-breakpoint-up(xl) {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+        gap: 30px;
+        #page-site-index &,
+        .category-browse-0 & {
+            grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+        }
+    }
+    @include media-breakpoint-between(lmd,lg) {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+        gap: 30px;
+        #page-site-index &,
+        .category-browse-0 & {
+            grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+        }
+    }
+    @include media-breakpoint-only(md) {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+        gap: 30px;
+    }
+    @include media-breakpoint-between(xs, sm) {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+        gap: 30px;
+    }
+    .category {
+        border-radius: $btn-border-radius;
+        border: 1px solid $border-color;
+        .theme-dark & {
+            border-color: $dm-border-color;
+        }
+    }
+}
+// Custom Fields on Course Box
+.rui-course-card {
+    .rui-custom-field-contaner {
+        margin-top: 10px;
+    }
+    .rui-custom-field-contaner + .rui-custom-field-contaner {
+        margin-top: 0;
+    }
+    .rui-custom-field-box {
+        display: flex;
+        flex-wrap: wrap;
+        font-size: $font-size-sm;
+        color: $body-color-secondary;
+        margin: 0 0 6px;
+        .theme-dark & {
+            color: $dm-body-color-secondary;
+        }
+        .rui-custom-field-name {
+            margin-right: .5rem;
+            font-weight: $font-weight-bold;
+        }
+        .rui-custom-field-price {
+            display: none;
+            + .rui-custom-field-value {
+                font-size: 20px;
+                font-weight: $font-weight-bold;
+                color: var(--main-theme-color);
+            }
+        }
+        #page-enrol-index & {
+            display: none;
+            visibility: hidden;
+        }
+    }
+    // Reset margin for ratings.
+    .rui-cf-tool_courserating {
+        margin: 0!important;
+    }
+    .rui-cf-price {
+        margin-top: 20px;
+    }
-    .dir-rtl & {
+    .rui-cf-price + .rui-custom-field-box {
+        margin-top: 20px;
+    }
+}
+.rui-course-header-custom-f .rui-cf-tool_courserating {
+    display: none!important;
+    visibility: hidden;
+}
+.rui-categorybox-wrapper {
+    p, div.rui-cat-content, ul, ol  {
+        padding: 0 $category-box-padding;
+        font-size: $font-size-sm;
+        color: $body-color-secondary;
+        word-break: break-word;
+        .theme-dark & {
+            color: $dm-body-color-secondary;
+        }
+        &:empty {
+            display: none;
+        }
+    }
+    img,
+    .vjs-poster {
+        width: 100%;
+        border-radius: $btn-border-radius;
+        overflow: hidden;
+    }
+}
+.rui-category-box-subcat {
+    margin: 20px $category-box-padding;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+.rui-categoryname {
+    padding: 20px $category-box-padding;
+    margin-bottom: 0;
+    a {
+        display: flex;
+        font-size: 1.5rem;
+        color: $headings-color;
+        font-weight: $font-weight-bold;
+        .subcategories & {
+            font-size: $font-size-base;
+            #page-site-index &,
+            .category-browse-0 & {
+                font-size: 1.5rem;
+            }
+        }
+        &:hover {
+            color: $link-hover-color;
+            .theme-dark & {
+                color: $dm-link-hover-color;
+            }
+        }
+        .theme-dark & {
+            color: $dm-headings-color;
+        }
+    }
+}
+.rui-no-courses-title {
+    margin: -15px 20px 20px;
+    font-size: 1rem;
+    color: $body-color-light;
+    font-weight: $font-weight-medium;
+    .subcategories & {
+        font-size: $font-size-sm;
+        #page-site-index &,
+        .category-browse-0 & {
+            font-size: 1rem;
+        }
+    }
+    .theme-dark & {
+        color: $dm-body-color-light;
+    }
+}
+.rui-subcat-badge {
+    padding: 4px 10px;
+    background-color: $gray-100;
+    border-radius: $btn-border-radius;
+    font-size: .85rem;
+    color: $body-color;
+    font-weight: $font-weight-medium;
+    text-decoration: none;
+    &:hover {
+        text-decoration: none;
+    }
+    .theme-dark & {
-        margin-left: 0;
+        background-color: $dm-gray-100;
-        margin-right: 30px;
+        color: $dm-body-color;
+    }
+}
     width: 100%;
     border-radius: $btn-border-radius-lg;
-    aspect-ratio: 16 / 6;
-    @if variable-exists(showcolorcoursecardmask) {
-        @if $showcolorcoursecardmask=='yes' {
-            background-color: $course-card-shadow-color;
-            background-blend-mode: luminosity;
     aspect-ratio: 16 / 6;
+}
+.rui-course-cover--style-2 {
+    background-attachment: fixed;
+    background-size: contain;
+}
 .rui-course-cover--fw {
     .show-drawer-left.show-drawer-right & {
         margin-left: -40px;
         width: calc(100% + 80px);
     }
     @include media-breakpoint-up(md) {
-        margin-left: -127px;
+        margin-left: -100px;
-        width: calc(100% + 254px);
+        width: calc(100% + 200px);
 .course-section-header:focus-within+.content .section .activity:first-child div.divider button,
 .content .section .activity:focus-within div.divider button {
     visibility: visible;
+}
-.activity {
-    div.divider {
-        height: 2rem;
-        margin-top: -1.25rem;
-        margin-bottom: -0.75rem;
-        z-index: 5;
-        button {
-            border-radius: 100%;
-            background-color: $primary-color-600;
-            width: 40px;
-            height: 40px;
-            position: absolute;
-            top: -14px;
-            left: calc(50% - 20px);
-            opacity: 0;
-            visibility: hidden;
-            transition: visibility 0.1s;
-            margin: 0;
-            padding: 0;
-            .icon {
-                color: $primary-color-100;
-                font-size: 18px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-            }
-            img {
-                width: 24px;
-                height: 24px;
-                filter: invert(1);
-            }
-        }
-    }
-    &:not(.dragging) div.divider {
-        &:hover button,
-        &:focus button,
-        &:focus-within button {
-            opacity: 1;
-            visibility: visible;
-        }
-    }
-}
 .bulkenabled .bulk-hidden {
     display: none !important; // stylelint-disable-line declaration-no-important
+}
 .rui-forum-nav-btns {
     white-space: pre-wrap;
     position: relative;
+}
-.subcategories .category.loaded {
-    border: 2px solid $gray-200;
-    margin-bottom: 4px;
-    padding: 4px 9px 9px;
-    border-radius: $btn-border-radius;
-    .theme-dark & {
-        border-color: $dm-border-color;
-    }
-    &.collapsed {
-        padding: 0;
-        border: 0;
-    }
 // Moodle 4.3
 .btn--dialog {
+        }
+    }
+}
 &.section-summary {
-    padding: 10px;
+    padding: 7px 14px 7px 24px;
+    border-radius: $btn-border-radius;
+    border: 1px solid $border-color;
+    .theme-dark & {
+        border-color: $dm-border-color;
+    }
+    .section-summary-activities {
+        font-size: $font-size-xs;
+        .icon {
+            font-size: $font-size-xs;
+            margin-right: 3px;
+        }
+    }
+    .theme-dark & {
+        background-color: $dm-gray-100;
     border-radius: $btn-border-radius;
+}
 .section-summary-activities .activity-count {
+}
 .courseindex .courseindex-item {
     .dragicon {
+        position: absolute;
-        position: absolute;
+        z-index: 3;
         top: 0;
+        right: -3px;
+        .icon {
+            color: $body-color;
         right: 0;
+    }
                 color: $dm-body-color-light;
+            }
+        }
+    }
-    &.dimmed:not(.restrictions)::before {
+    &.dimmed:not(.restrictions)::after {
         content: '';
         position: absolute;
-        top: 0;
+        top: 3px;
-        right: 0;
+        right: -20px;
-        width: 30px;
+        width: 20px;
-        height: 30px;
+        height: 20px;
-        border-radius: 30px;
+        border-radius: 20px;
         background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='#{url-friendly-colour($body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M18.6247 10C19.0646 10.8986 19.25 11.6745 19.25 12C19.25 13 17.5 18.25 12 18.25C11.2686 18.25 10.6035 18.1572 10 17.9938M7 16.2686C5.36209 14.6693 4.75 12.5914 4.75 12C4.75 11 6.5 5.75 12 5.75C13.7947 5.75 15.1901 6.30902 16.2558 7.09698'%3E%3C/path%3E%3Cpath stroke='#{url-friendly-colour($body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19.25 4.75L4.75 19.25'%3E%3C/path%3E%3Cpath stroke='#{url-friendly-colour($body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M10.409 13.591C9.53033 12.7123 9.53033 11.2877 10.409 10.409C11.2877 9.5303 12.7123 9.5303 13.591 10.409'%3E%3C/path%3E%3C/svg%3E");
         background-repeat: no-repeat;
         background-position: center;
-        background-size: 18px;
+        background-size: 12px;
         background-color: $yellow-300;
         z-index: 1;
+    }
+}
 // Course additional informations.
-.rui-course-card {
-    .rui-mo-progress-text {
-        font-size: $font-size-xs;
 .rui-course-card {
     .rui-course-card-text+.rui-custom-field-box {
         margin-top: 20px;
+    }
     .rui-custom-field-box {
         width: 100%;
-        display: flex;
-        margin-bottom: 5px;
+        display: flex;
-        font-size: $font-size-xs;
+        margin-bottom: 5px;
-        opacity: .7;
+        font-size: $font-size-xs;
         .rui-custom-field-name {
             margin-right: 5px;
+        }
+    }
     align-items: center;
     overflow-x: auto;
+    gap: 0;
+    .path-enrol & {
+        margin: 7px 0 0 0;
     gap: 0;
     .rui-custom-field-box {
         margin-right: 32px;
         margin-bottom: 20px;
     display: none !important;
     visibility: hidden;
+}
-.tool_courserating-cfield {
-    display: inline-flex;
+.tool_courserating-cfield {
     border: 1px solid $border-color;
-    padding: 13px;
-    margin: 10px 0;
+    padding: 13px;
     box-sizing: content-box;
     border-radius: $btn-border-radius;
-    .rui-course-card & {
-        padding: 0;
+    .tool_courserating-ratingcolor,
-        margin: 0 -3px;
-        border: 0;
+    .tool_courserating-ratings {
-        color: $body-color;
+        text-decoration: none;
-        .theme-dark & {
+        .rui-course-card & {
+            color: $white;
+        }
+    }
+    .rui-course-card & {
+        position: absolute;
+        top: calc(#{$course-cover-height} - 47px);
+        left: 10px;
+        padding: 7px;
+        background-color: rgba($black, .5);
+        backdrop-filter: blur(2rem);
-            color: $dm-body-color;
+        -webkit-backdrop-filter: blur(2rem);
         border: 0;
+    }
     .theme-dark & {
         border-color: $dm-border-color;
+    }
     .rui-course-info-box & {
         margin: 0;
         display: none;
         visibility: hidden;
+    }
             color: $dm-body-color-light;
+        }
+    }
+}
+.tool_courserating-widget {
+    .add-rating-link {
+        margin: 20px 3px;
+    }
+}
+.rui-course-card {
+    .rui-custom-field-box.rui-cf-difficulty,
+    .rui-custom-field-box.rui-cf-duration {
+        margin: 0;
+        background-color: rgba($black, .7);
+        border-radius: $btn-border-radius;
+        padding: 4px 10px;
+        font-size: $font-size-sm;
+        font-weight: $font-weight-medium;
+        color: $white;
+        .rui-custom-field-name {
+            display: none;
+        }
+    }
+    .rui-custom-field-box.rui-cf-difficulty {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        width: auto;
+    }
+    .rui-custom-field-box.rui-cf-duration {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        width: auto;
+    }
+}
 #course-category-listings .listitem>div .item-actions .aabtn.menu-action {
     background-color: transparent;
+}
     .list-group-item {
         .flex-shrink-0 {
             display: flex;
+        }
+    }
+}
+/* Moodle 4.4 *
+/
+/* Variables definition*/
+$activity-border-radius: 1rem !default;
+$activity-border-width: 1px !default;
+$activity-hover-border-color: $primary !default;
+$divider-color: $gray-300 !default;
+$divider-width: 2px !default;
+$divider-hover-color: $primary !default;
+/* Functions/Mixins definition */
+// Activity completion button custom styling mixin.
+@mixin completion-button() {
+    &.btn {
+        @include button-variant($white, $gray-400, $gray-600);
+        min-height: map-get($iconsizes, 5);
+        font-weight: bold;
+        @include border-radius();
+        .icon {
+            font-size: inherit;
+        }
+    }
+    @each $color, $value in $theme-colors {
+        &.btn-#{$color} {
+            $bg-color: theme-color-level($color, $alert-bg-level);
+            @include button-variant($bg-color, $bg-color, $value);
+            color: theme-color-level($color, $alert-color-level);
+            &:hover {
+                color: color-yiq($value);
+            }
+        }
+    }
+}
+.editing .activity-item {
+    cursor: move;
+    border: $activity-border-width solid transparent;
+    @include border-radius($activity-border-radius);
+    .a {
+        cursor: pointer;
+    }
+    &:hover,
+    &.selected {
+        border: $activity-border-width solid $activity-hover-border-color;
+        box-shadow: $box-shadow-sm;
+    }
+}
+/* Dividers */
+.divider {
+    position: relative;
+    hr {
+        width: 100%;
+        margin: 20px;
+        border-top: $divider-width dashed $divider-color;
+    }
+    .divider-content {
+        opacity: 0;
+        visibility: hidden;
+        transition: visibility 0.1s;
+        position: absolute;
+        background: linear-gradient(transparent 40%, $container-bg 40%, $container-bg 60%, transparent 60%);
+        .section.hidden & {
+            background: linear-gradient(transparent 40%, $container-bg 40%, $container-bg 60%, transparent 60%);
+            .theme-dark & {
+                background: linear-gradient(transparent 40%, $dm-container-bg 40%, $dm-container-bg 60%, transparent 60%);
+            }
+        }
+        .theme-dark & {
+            background: linear-gradient(transparent 40%, $dm-container-bg 40%, $dm-container-bg 60%, transparent 60%);
+        }
+    }
+    &.always-visible {
+        .divider-content {
+            opacity: 1;
+            visibility: visible;
+        }
+    }
+    &.always-hidden {
+        hr {
+            opacity: 0;
+            visibility: hidden;
+        }
+    }
+    &:hover,
+    &:focus,
+    &:focus-within {
+        .divider-content {
+            opacity: 1;
+            visibility: visible;
+        }
+        hr {
+            opacity: 1;
+            visibility: visible;
+        }
+    }
+    // Style the hr divider when the "Add content" button is hovered.
+    &:has(.btn.add-content:hover) {
+        hr {
+            border-color: $divider-hover-color;
+        }
+    }
+}
+// These styles will make the activity and section dividers buttons visible (but still without opacity) so
+// buttons can be keyboard focusable.
+.activity:focus-within + .activity .divider .divider-content,
+.course-section-header:focus-within + .content .section .activity:first-child .divider .divider-content,
+.content .section .activity:focus-within .divider .divider-content,
+.course-content:focus-within .changenumsections .divider .divider-content {
+    visibility: visible;
+}
+// Hide last section "Add section". It will rely on the course format general "Add section" button.
+.course-content ul.topics > li:last-child .changenumsections {
+    display: none;
+}
+// Custom buttons for dividers.
+.btn.add-content {
+    position: relative;
+    z-index: 1;
+    @include border-radius($rounded-pill);
+    font-size: $font-size-sm;
+    font-weight: bold;
+    color: theme-color-level("primary", $alert-color-level);
+    background-color: theme-color-level("primary", $alert-bg-level);
+    border: 0;
+    &:hover,
+    &:focus {
+        color: color-yiq($primary);
+        background-color: $primary;
+    }
+    .icon {
+        font-size: 16px;
+    }
+}
+/* Course section */
+.course-section {
+    list-style: none;
+    //margin-top: map-get($spacers, 3);
+    // Custom styles for course sections while editing.
+    .editing & {
+        margin-top: map-get($spacers, 2);
+    }
+    .section-item {
+        width: 100%;
+        display: inline-flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    &.hidden {
+        .section-item {
+            background-color: $gray-100;
+        }
+    }
+    .sectionname > a {
+        &:before {
+            background-color: $dm-body-color;
+            .theme-dark & {
+                background-color: $dm-body-color;
+            }
+        }
+        .theme-dark & {
+            color: $dm-body-color;
+        }
+        &:hover {
+            text-decoration: none;
+            text-decoration-color: $body-color;
+            .theme-dark & {
+                text-decoration-color: $dm-body-color;
+            }
+        }
+    }
+    .sectionbadges .badge {
+        margin-left: map-get($spacers, 2);
+        font-weight: normal;
+        .icon {
+            font-size: 12px;
+            width: 12px;
+            height: 12px;
+        }
+    }
+    .course-section-header.draggable {
+        cursor: move;
+    }
+    .section_action_menu {
+        .dropdown-toggle::after {
+            display: none;
+        }
+    }
+    .summarytext {
+        // Add rounded borders to images.
+        img {
+            @include border-radius($activity-border-radius);
+        }
+    }
+}
+.rui-course-header {
+    .single-section-page & {
+        display: none;
+        visibility: hidden;
+    }
+}
+.course-section.main.section-summary {
+    position: relative;
+    h3.sectionname {
+        font-size: $font-size-lg;
+        font-weight: $font-weight-medium;
+    }
+}
+.section-summary-activities {
+    &:empty {
+        display: none;
+    }
+    font-size: $font-size-sm;
+}
+.course-content li.section li.activity ul {
+    margin: 0 0 10px!important;
+}
+.modtype_subsection {
+    h3.sectionname {
+        font-size: $font-size-md!important;
+    }
+    .section-summary {
+        margin-bottom: 0!important;
+        background-color: $gray-100;
+        border: 0;
+        .theme-dark & {
+            background-color: $dm-gray-100;
+            border: 0;
+        }
+    }
+}

Proyectos de Subversion Moodle

(root)/theme/universe/scss/moodle/course.scss – Rev 1 → 1441