From d771a0188ed6ad4618724a098d5e012413afcdf8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikel=20Mart=C3=ADn?= <mikel@moodle.com>
Date: Thu, 24 Oct 2024 15:47:10 +0200
Subject: [PATCH] MDL-80303 theme_boost: Remove unused/unneded course SCSS

- Remove unused/unneeded styles in course.scss
- The .activity-wrapper class and its related SCSS styles are not
needed anymore after MDL-77863 was integrated.
---
 .../format/templates/local/content.mustache   |  13 +-
 .../local/content/frontpagesection.mustache   |   2 +-
 .../templates/local/content/section.mustache  |   3 +-
 .../local/content/section/cmitem.mustache     |   2 +-
 theme/boost/scss/moodle/course.scss           | 775 +++++-------------
 theme/boost/style/moodle.css                  | 616 ++++----------
 theme/classic/style/moodle.css                | 616 ++++----------
 7 files changed, 551 insertions(+), 1476 deletions(-)

diff --git a/course/format/templates/local/content.mustache b/course/format/templates/local/content.mustache
index 9d9336c865872..0dd3cdb861834 100644
--- a/course/format/templates/local/content.mustache
+++ b/course/format/templates/local/content.mustache
@@ -53,7 +53,8 @@
                 "id": 35,
                 "header": {
                     "name": "Section title",
-                    "url": "#"
+                    "url": "#",
+                    "headinglevel": 3
                 },
                 "cmlist": {
                     "cms": [
@@ -83,7 +84,8 @@
                 "id": 36,
                 "header": {
                     "name": "Section 2 title",
-                    "url": "#"
+                    "url": "#",
+                    "headinglevel": 3
                 },
                 "cmlist": {
                     "cms": [
@@ -139,7 +141,8 @@
             "id": 37,
             "header": {
                 "name": "Single Section Example",
-                "url": "#"
+                "url": "#",
+                "headinglevel": 3
             },
             "cmlist": {
                 "cms": [
@@ -169,7 +172,7 @@
 <div id="course-format-{{uniqid}}">
     <h2 class="accesshide">{{{title}}}</h2>
     {{{completionhelp}}}
-    <ul class="{{format}}" data-for="course_sectionlist">
+    <ul class="{{format}} section-list" data-for="course_sectionlist">
         {{#initialsection}}
             {{$ core_courseformat/local/content/section }}
                 {{> core_courseformat/local/content/section }}
@@ -188,7 +191,7 @@
                 {{> core_courseformat/local/content/sectionnavigation }}
             {{/ core_courseformat/local/content/sectionnavigation }}
         {{/sectionnavigation}}
-        <ul class="{{format}}">
+        <ul class="{{format}} section-list">
         {{#singlesection}}
             {{$ core_courseformat/local/content/section }}
                 {{> core_courseformat/local/content/section }}
diff --git a/course/format/templates/local/content/frontpagesection.mustache b/course/format/templates/local/content/frontpagesection.mustache
index 18d7106eca8b8..4d3781cce20ff 100644
--- a/course/format/templates/local/content/frontpagesection.mustache
+++ b/course/format/templates/local/content/frontpagesection.mustache
@@ -38,7 +38,7 @@
     </div>
     {{/showsettings}}
     <div class="sitetopic">
-        <ul class="topics frontpage" data-for="course_sectionlist">
+        <ul class="topics section-list frontpage" data-for="course_sectionlist">
             {{#sections}}
                 {{> core_courseformat/local/content/section }}
             {{/sections}}
diff --git a/course/format/templates/local/content/section.mustache b/course/format/templates/local/content/section.mustache
index 110eed2ca26e0..4138fd2116f1b 100644
--- a/course/format/templates/local/content/section.mustache
+++ b/course/format/templates/local/content/section.mustache
@@ -32,7 +32,8 @@
             "name": "Section title",
             "title": "<a href=\"http://moodle/course/view.php?id=5#section-0\">Section title</a>",
             "url": "#",
-            "ishidden": true
+            "ishidden": true,
+            "headinglevel": 3
         },
         "cmlist": {
             "cms": [
diff --git a/course/format/templates/local/content/section/cmitem.mustache b/course/format/templates/local/content/section/cmitem.mustache
index be1cba56a308c..f95bacb4e36a7 100644
--- a/course/format/templates/local/content/section/cmitem.mustache
+++ b/course/format/templates/local/content/section/cmitem.mustache
@@ -39,7 +39,7 @@
     }
 }}
 <li
-    class="activity activity-wrapper {{module}} modtype_{{module}} {{extraclasses}} {{#hasinfo}}hasinfo{{/hasinfo}} {{#indent}}indented{{/indent}}"
+    class="activity {{module}} modtype_{{module}} {{extraclasses}} {{#hasinfo}}hasinfo{{/hasinfo}} {{#indent}}indented{{/indent}}"
     id="{{anchor}}"
     data-for="cmitem"
     data-id="{{id}}"
diff --git a/theme/boost/scss/moodle/course.scss b/theme/boost/scss/moodle/course.scss
index c0ff0c701edde..a97a40980a56e 100644
--- a/theme/boost/scss/moodle/course.scss
+++ b/theme/boost/scss/moodle/course.scss
@@ -2,504 +2,7 @@
  * Course page styles.
  */
 
-.section {
-    .side {
-        &.left {
-            float: left;
-        }
-
-        &.right {
-            float: right;
-            clear: right;
-        }
-        margin-top: 0.5rem;
-    }
-
-    .spinner {
-        height: 16px;
-        width: 16px;
-    }
-
-    .activity {
-        .spinner {
-            left: 100%;
-            position: absolute;
-        }
-
-        /* The command block for each activity */
-        .actions {
-            position: absolute;
-            right: 0;
-            top: 0;
-            display: flex;
-        }
-
-        .contentwithoutlink,
-        .activityinstance {
-            min-width: 40%;
-
-            > a {
-                display: inline-flex;
-                align-items: center;
-            }
-
-            .dimmed {
-                .activityicon {
-                    opacity: .5;
-                }
-            }
-        }
-
-        .stealth {
-            color: $text-muted;
-        }
-        a.stealth,
-        a.stealth:hover {
-            color: lighten($link-color, 25%) !important; /* stylelint-disable-line declaration-no-important */
-        }
-
-        &.indented {
-            .activity-item {
-                margin-left: map-get($spacers, 3);
-            }
-        }
-    }
-
-    .label {
-        .contentwithoutlink,
-        .activityinstance {
-            padding-right: 32px;
-            display: block;
-            height: inherit;
-        }
-        @include media-breakpoint-up(sm) {
-            .mod-indent-outer {
-                padding-left: 24px;
-                display: block;
-            }
-        }
-    }
-
-    .filler {
-        // This must be sized like an icon to fill the space.
-        width: 16px;
-        height: 16px;
-        padding: 0;
-        margin: 0 ($spacer * 0.5);
-        display: inline-block;
-    }
-
-    .activity.editor_displayed {
-        a.editing_title,
-        .moodle-actionmenu {
-            display: none;
-        }
-
-        div.activityinstance {
-            padding-right: initial;
-
-            input {
-                margin-bottom: initial;
-                padding-top: initial;
-                padding-bottom: initial;
-                vertical-align: text-bottom;
-            }
-        }
-    }
-}
-
-.section .activity .activityinstance {
-    display: inline-flex;
-    align-items: center;
-    margin-bottom: 1rem;
-}
-
-.editing {
-    .section {
-        .activity {
-            .contentwithoutlink,
-            .activityinstance {
-                padding-right: 200px;
-            }
-            .mod-indent-outer {
-                /**
-                 * Add appropriate padding such that nothing overlaps the
-                 * absolute positioned move icon.
-                 */
-                padding-left: 2rem;
-            }
-        }
-    }
-    // Remove old spinners if the reactive state is ready.
-    .course-content .stateready .section .spinner {
-        display: none;
-    }
-    // New editing in progress spinners.
-    .editinprogress {
-        position: relative;
-
-        & > * {
-            opacity: .4;
-        }
-
-        .corelightbox,
-        .lightbox {
-            display: none;
-        }
-
-        &:after {
-            @extend .fa-solid;
-            position: absolute;
-            font-size: 20px;
-            color: $gray-600;
-            content: fa-content($fa-var-spinner);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 30px;
-            height: 30px;
-            left: calc(50% - 15px);
-            top: calc(50% - 15px);
-            animation: editinprogress-rotation 2s infinite linear;
-        }
-
-        // Prevent inner editingprogress.
-        .editinprogress {
-            &:after {
-                display: none;
-            }
-        }
-    }
-}
-
-@keyframes editinprogress-rotation {
-    0% {
-        opacity: 0;
-        transform: rotate(0deg);
-    }
-    50% {
-        opacity: 1;
-    }
-    100% {
-        opacity: 0;
-        transform: rotate(359deg);
-    }
-}
-
-.editing_show + .editing_assign,
-.editing_hide + .editing_assign {
-    // if roles icon missing, add space
-    margin-left: 20px;
-}
-
-.section .activity .commands {
-    white-space: nowrap;
-    display: inline-block;
-}
-
-.section .activity.modtype_label.label {
-    font-weight: normal;
-
-    // Remove min-height for labels so top and bottom paddings can be displayed more consistently.
-    .contentwithoutlink {
-        min-height: 0;
-    }
-
-    // When activity information is shown remove the bottom margin for the last p/i elements.
-    &.hasinfo {
-        p:last-child,
-        i:last-child {
-            margin-bottom: 0;
-        }
-    }
-}
-
-// The activity-wrapper class ensures these styles are not used when the new activity styles
-// from MDL-71691 are not affected. As soons as MDL-72656 is integrated and these styles
-// are removed the core_courseformat/local/content/cm template no longer needs this class.
-.section li.activity:not(.activity-wrapper) {
-    padding: 0.2em;
-    clear: both;
-
-    &.hasinfo {
-        border-bottom: $border-width solid $table-border-color;
-        padding-top: map-get($spacers, 3);
-        padding-bottom: map-get($spacers, 3);
-
-        &:last-child {
-            border-bottom: 0;
-            padding-bottom: 0;
-        }
-    }
-}
-
-// Compensate for the border widths when dropzones are displayed.
-.course-content .section.dropready {
-
-    &.main.drop-down {
-        border-bottom: 1px solid $dropzone-border;
-    }
-
-    .course-section-header.dropready.drop-zone {
-        margin-top: -2px;
-    }
-
-    li.activity.dropready.drop-down {
-        border-bottom: 1px solid $dropzone-border;
-        margin-bottom: -1px;
-    }
-
-    li.activity.dropready.drop-up {
-        border-top: 1px solid $dropzone-border;
-        margin-top: -1px;
-    }
-
-    [data-for="sectioninfo"] {
-        // When a section is empty, the activity dropzone indicator is below
-        // the section info. This ensures the dropzone will not displace the content
-        // even if the section has no restrictions or info to display.
-        min-height: 1px;
-    }
-
-    [data-for="sectioninfo"].drop-down {
-        margin-top: -1px;
-    }
-}
-
-.section .activity .activityinstance .groupinglabel {
-    padding-left: 30px;
-}
-
-.section.main:not(.course-section) .activity .availabilityinfo,
-.section.main:not(.course-section) .activity .contentafterlink {
-    margin-top: 0.5em;
-    margin-left: 30px;
-}
-
-.section .activity .contentafterlink p {
-    margin: .5em 0;
-}
-
-.editing .section.main:not(.course-section) {
-    .activity:hover,
-    .activity.action-menu-shown,
-    .sectionname:hover {
-        background-color: $table-accent-bg;
-    }
-}
-
-.course-content .current {
-    position: relative;
-}
-
-.course-content .current::before {
-    border-left: $primary 3px solid;
-    bottom: 0;
-    content: "";
-    left: -8px;
-    position: absolute;
-    top: 0;
-}
-
-.course-content ul li.section.hidden:not(.course-section) {
-    .sectionname > span,
-    .content > div.summary,
-    .activity .activityinstance {
-        color: $text-muted;
-    }
-}
-
-.course-content ul.topics,
-.course-content ul.weeks {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-
-    li.section {
-        .content {
-            margin: 0;
-            padding: 0;
-        }
-
-        @include media-breakpoint-up(sm) {
-            .summary,
-            .content > .availabilityinfo {
-                margin-left: 25px;
-            }
-        }
-
-        .left,
-        .right {
-            padding: 0 6px 0;
-            text-align: right;
-            width: auto;
-        }
-    }
-}
-
-.course-content .single-section ul.topics li.section,
-.course-content .single-section ul.weeks li.section {
-    padding-top: 0;
-}
-
-@include media-breakpoint-down(sm) {
-    body:not(.editing) {
-        .course-content ul.topics,
-        .course-content ul.weeks {
-            li.section {
-                .left,
-                .right {
-                    display: none;
-                }
-            }
-        }
-    }
-}
-
-.course-content {
-    margin-top: 0;
-}
-
-.course-content .hidden {
-    display: none;
-}
-
-.course-content li {
-    &.section:not(.course-section) {
-        @include media-breakpoint-down(sm) {
-            ul {
-                padding-left: 0;
-            }
-        }
-        ul {
-            list-style: disc;
-
-            ul {
-                list-style: circle;
-
-                ul {
-                    list-style: square;
-                }
-            }
-        }
-
-        li {
-            &.activity {
-                ul {
-                    list-style: disc;
-
-                    ul {
-                        list-style: circle;
-
-                        ul {
-                            list-style: square;
-                        }
-                    }
-                }
-            }
-        }
-
-        .right {
-            > .icon:first-child {
-                /* Remove the spacer icon. */
-                display: none;
-            }
-        }
-    }
-}
-
-.path-course-view.editing #region-main > .card-block {
-    padding-bottom: 13rem;
-}
-
-.path-course-view .completionprogress {
-    margin-left: 25px;
-}
-
-.path-course-view .completionprogress {
-    display: block;
-    float: right;
-    height: 20px;
-    position: relative;
-}
-
-#page-site-index .subscribelink {
-    text-align: right;
-}
-
-#site-news-forum h2,
-#frontpage-course-list h2,
-#frontpage-category-names h2,
-#frontpage-category-combo h2 {
-    margin-bottom: 9px;
-}
-
-.path-course-view a.reduce-sections {
-    padding-left: 0.2em;
-}
-
-.path-course-view .subscribelink {
-    text-align: right;
-}
-
-.path-course-view .unread {
-    margin-left: 30px;
-}
-
-.path-course-view .block.drag .header {
-    cursor: move;
-}
-
-.path-course-view .completionprogress {
-    text-align: right;
-}
-
-.path-course-view .single-section .completionprogress {
-    margin-right: 5px;
-}
-
-.path-course-view li.activity span.autocompletion img {
-    vertical-align: text-bottom;
-    margin-left: 0;
-}
-
-.path-course-view {
-    &.editing {
-        li.activity span.autocompletion img {
-            /* Use the same spacing as the filler. */
-            margin-right: $spacer * 0.5;
-            margin-left: $spacer * 0.5;
-        }
-    }
-}
-
-li.section.hidden span.commands a.editing_hide,
-li.section.hidden span.commands a.editing_show {
-    cursor: default;
-}
-
-.single-section-page .header-action {
-    display: inline-block;
-}
-
-input.titleeditor {
-    width: 330px;
-    vertical-align: text-bottom;
-}
-
-.automatic-completion-conditions {
-    .badge {
-        font-size: 100%;
-    }
-}
-
-// These are the new styles for the renewed course UI in isssue MDL-71691
-// once the old course renderers are removed in MDL-72656, all css related
-// to activities and sections above this commend needs to be reviewed an
-// possibly removed.
-
-/* Variables definition*/
-
+// Variables.
 $activity-item-padding: 0.75rem !default;
 $activity-border-radius: 1rem !default;
 $activity-border-width: 2px !default;
@@ -508,9 +11,7 @@ $divider-color: $gray-300 !default;
 $divider-width: 2px !default;
 $divider-hover-color: $primary !default;
 
-/* Functions/Mixins definition */
-
-// Activity completion button custom styling mixin.
+// Mixins.
 @mixin completion-button() {
     &.btn {
         @include button-variant($white, $gray-400, $gray-600);
@@ -533,8 +34,28 @@ $divider-hover-color: $primary !default;
     }
 }
 
-/* Section Expand all/Collapse all */
+/* Course content */
 
+.course-content ul.section-list {
+    padding: 0;
+    margin: 0;
+}
+
+// Re-style ordered list in course content.
+.course-content .section-item,
+.course-content .section-item .activity-item {
+    ul {
+        list-style: disc;
+        ul {
+            list-style: circle;
+            ul {
+                list-style: square;
+            }
+        }
+    }
+}
+
+// Expand all/Collapse all.
 .section-collapsemenu {
     .collapseall {
         display: block;
@@ -555,7 +76,30 @@ $divider-hover-color: $primary !default;
     }
 }
 
-/* Course section */
+// Course 'add section' button.
+.btn.add-section {
+    @include border-radius($activity-border-radius);
+    border: $divider-width dashed $border-color;
+    color: $primary;
+    font-size: $font-size-sm;
+    font-weight: bold;
+    &:hover,
+    &:focus {
+        background-color: $primary-light-background;
+        border: $divider-width solid $primary;
+        color: $primary;
+    }
+}
+
+// Max sections reached alert.
+.max-section-alert {
+    border-top: $divider-width dashed $border-color;
+    font-size: $font-size-sm;
+    font-weight: normal;
+    color: $gray-600;
+}
+
+/* Sections */
 
 .course-section {
     list-style: none;
@@ -578,6 +122,21 @@ $divider-hover-color: $primary !default;
         }
     }
 
+    // Highlighted section.
+    &.current {
+        > .section-item {
+            position: relative;
+            &::before {
+                border-left: $primary 3px solid;
+                bottom: 0;
+                content: "";
+                left: -8px;
+                position: absolute;
+                top: 0;
+            }
+        }
+    }
+
     .sectionname > a {
         color: $gray-900;
         &:hover {
@@ -670,63 +229,18 @@ $divider-hover-color: $primary !default;
     }
 }
 
-// Course 'add section' button.
-.btn.add-section {
-    @include border-radius($activity-border-radius);
-    border: $divider-width dashed $border-color;
-    color: $primary;
-    font-size: $font-size-sm;
-    font-weight: bold;
-    &:hover,
-    &:focus {
-        background-color: $primary-light-background;
-        border: $divider-width solid $primary;
-        color: $primary;
-    }
-}
-
-.max-section-alert {
-    border-top: $divider-width dashed $border-color;
-    font-size: $font-size-sm;
-    font-weight: normal;
-    color: $gray-600;
-}
-
-/* Single section page specific styles */
-
-.single-section {
-    // Revert main section's styles.
-    > ul > .course-section {
-        &.hidden .section-item {
-            background-color: inherit;
-        }
-        .section-item {
-            padding: 0;
-            border: none;
-        }
-    }
-}
-
-/* Re-style ordered list in course content */
-.course-content .activity-altcontent {
-    ul {
-        list-style: disc;
-        ul {
-            list-style: circle;
-            ul {
-                list-style: square;
-            }
-        }
-    }
-}
-
-/* Activity cards */
+/* Activities */
 
 .activity {
     list-style: none;
     padding-top: map-get($spacers, 1);
     margin-top: map-get($spacers, 1);
     border-top: $border-width solid $border-color;
+    &.indented {
+        .activity-item {
+            margin-left: map-get($spacers, 3);
+        }
+    }
     // Custom styles for activity while editing and for the first activity card in the section.
     .editing &,
     .section &:first-child {
@@ -987,7 +501,7 @@ $divider-hover-color: $primary !default;
 
 /* Dividers */
 
-.divider {
+.course-content .divider {
     position: relative;
     hr {
         width: 100%;
@@ -1057,7 +571,7 @@ $divider-hover-color: $primary !default;
 }
 
 // Custom buttons for dividers.
-.btn.add-content {
+.course-content .divider .btn.add-content {
     position: relative;
     z-index: 1;
     @include border-radius();
@@ -1155,7 +669,31 @@ $divider-hover-color: $primary !default;
     }
 }
 
-/* Activity completion */
+/* Single section page */
+
+.single-section {
+    // Revert main section's styles.
+    > ul > .course-section {
+        &.hidden .section-item {
+            background-color: inherit;
+        }
+        .section-item {
+            padding: 0;
+            border: none;
+        }
+    }
+}
+
+.single-section-page .header-action {
+    display: inline-block;
+}
+
+.course-content .single-section ul.topics li.section,
+.course-content .single-section ul.weeks li.section {
+    padding-top: 0;
+}
+
+/* Default activity completion page */
 
 .defaultactivitycompletion-item {
     a {
@@ -1168,20 +706,34 @@ $divider-hover-color: $primary !default;
     }
 }
 
-/* Home page course specific styles */
+/* Home page course */
 
 .sitetopic {
-    // Hide the first activity top border.
-    .activity:first-of-type hr {
-        display: none;
-    }
     .section-item {
         margin-bottom: map-get($spacers, 4);
         @include border-radius();
     }
 }
 
-/* Styles for the Move activity and Move section modals */
+/* Social format */
+
+#page-site-index .subscribelink {
+    text-align: right;
+}
+
+.path-course-view {
+    .subscribelink {
+        text-align: right;
+    }
+    .unread {
+        margin-left: 30px;
+    }
+    .block.drag .header {
+        cursor: move;
+    }
+}
+
+/* Move activity and Move section modals */
 
 .move-activity-tree {
     .collapse-list-item {
@@ -1223,7 +775,7 @@ $divider-hover-color: $primary !default;
     }
 }
 
-/* Subsection specific styles */
+/* Subsections */
 
 .activity.subsection {
     border-top: none;
@@ -1270,3 +822,98 @@ $divider-hover-color: $primary !default;
         visibility: hidden;
     }
 }
+
+/* Spinners */
+
+// Edit in progress spinner animation.
+@keyframes editinprogress-rotation {
+    0% {
+        opacity: 0;
+        transform: rotate(0deg);
+    }
+    50% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+        transform: rotate(359deg);
+    }
+}
+
+.editing {
+    // Remove old spinners if the reactive state is ready.
+    .course-content .stateready .section .spinner {
+        display: none;
+    }
+    // New editing in progress spinners.
+    .editinprogress {
+        position: relative;
+
+        & > * {
+            opacity: .4;
+        }
+
+        .corelightbox,
+        .lightbox {
+            display: none;
+        }
+
+        &:after {
+            @extend .fa-solid;
+            position: absolute;
+            font-size: 20px;
+            color: $gray-600;
+            content: fa-content($fa-var-spinner);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 30px;
+            height: 30px;
+            left: calc(50% - 15px);
+            top: calc(50% - 15px);
+            animation: editinprogress-rotation 2s infinite linear;
+        }
+
+        // Prevent inner editingprogress.
+        .editinprogress {
+            &:after {
+                display: none;
+            }
+        }
+    }
+}
+
+/* Drag and drop */
+
+// Compensate for the border widths when dropzones are displayed.
+.course-content .section.dropready {
+
+    &.main.drop-down {
+        border-bottom: 1px solid $dropzone-border;
+    }
+
+    .course-section-header.dropready.drop-zone {
+        margin-top: -2px;
+    }
+
+    li.activity.dropready.drop-down {
+        border-bottom: 1px solid $dropzone-border;
+        margin-bottom: -1px;
+    }
+
+    li.activity.dropready.drop-up {
+        border-top: 1px solid $dropzone-border;
+        margin-top: -1px;
+    }
+
+    [data-for="sectioninfo"] {
+        // When a section is empty, the activity dropzone indicator is below
+        // the section info. This ensures the dropzone will not displace the content
+        // even if the section has no restrictions or info to display.
+        min-height: 1px;
+    }
+
+    [data-for="sectioninfo"].drop-down {
+        margin-top: -1px;
+    }
+}
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 2b06718815de5..c5efe134cf608 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -28137,404 +28137,25 @@ table.calendartable caption {
 /*
  * Course page styles.
  */
-.section .side {
-  margin-top: 0.5rem;
-}
-.section .side.left {
-  float: left;
-}
-.section .side.right {
-  float: right;
-  clear: right;
-}
-.section .spinner {
-  height: 16px;
-  width: 16px;
-}
-.section .activity {
-  /* The command block for each activity */
-}
-.section .activity .spinner {
-  left: 100%;
-  position: absolute;
-}
-.section .activity .actions {
-  position: absolute;
-  right: 0;
-  top: 0;
-  display: flex;
-}
-.section .activity .contentwithoutlink,
-.section .activity .activityinstance {
-  min-width: 40%;
-}
-.section .activity .contentwithoutlink > a,
-.section .activity .activityinstance > a {
-  display: inline-flex;
-  align-items: center;
-}
-.section .activity .contentwithoutlink .dimmed .activityicon,
-.section .activity .activityinstance .dimmed .activityicon {
-  opacity: 0.5;
-}
-.section .activity .stealth {
-  color: #6a737b;
-}
-.section .activity a.stealth,
-.section .activity a.stealth:hover {
-  color: #5babf2 !important; /* stylelint-disable-line declaration-no-important */
-}
-.section .activity.indented .activity-item {
-  margin-left: 1rem;
-}
-.section .label .contentwithoutlink,
-.section .label .activityinstance {
-  padding-right: 32px;
-  display: block;
-  height: inherit;
-}
-@media (min-width: 576px) {
-  .section .label .mod-indent-outer {
-    padding-left: 24px;
-    display: block;
-  }
-}
-.section .filler {
-  width: 16px;
-  height: 16px;
-  padding: 0;
-  margin: 0 0.5rem;
-  display: inline-block;
-}
-.section .activity.editor_displayed a.editing_title,
-.section .activity.editor_displayed .moodle-actionmenu {
-  display: none;
-}
-.section .activity.editor_displayed div.activityinstance {
-  padding-right: initial;
-}
-.section .activity.editor_displayed div.activityinstance input {
-  margin-bottom: initial;
-  padding-top: initial;
-  padding-bottom: initial;
-  vertical-align: text-bottom;
-}
-
-.section .activity .activityinstance {
-  display: inline-flex;
-  align-items: center;
-  margin-bottom: 1rem;
-}
-
-.editing .section .activity .contentwithoutlink,
-.editing .section .activity .activityinstance {
-  padding-right: 200px;
-}
-.editing .section .activity .mod-indent-outer {
-  /**
-   * Add appropriate padding such that nothing overlaps the
-   * absolute positioned move icon.
-   */
-  padding-left: 2rem;
-}
-.editing .course-content .stateready .section .spinner {
-  display: none;
-}
-.editing .editinprogress {
-  position: relative;
-}
-.editing .editinprogress > * {
-  opacity: 0.4;
-}
-.editing .editinprogress .corelightbox,
-.editing .editinprogress .lightbox {
-  display: none;
-}
-.editing .editinprogress:after {
-  position: absolute;
-  font-size: 20px;
-  color: #6a737b;
-  content: "\f110";
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 30px;
-  height: 30px;
-  left: calc(50% - 15px);
-  top: calc(50% - 15px);
-  animation: editinprogress-rotation 2s infinite linear;
-}
-.editing .editinprogress .editinprogress:after {
-  display: none;
-}
-
-@keyframes editinprogress-rotation {
-  0% {
-    opacity: 0;
-    transform: rotate(0deg);
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-    transform: rotate(359deg);
-  }
-}
-.editing_show + .editing_assign,
-.editing_hide + .editing_assign {
-  margin-left: 20px;
-}
-
-.section .activity .commands {
-  white-space: nowrap;
-  display: inline-block;
-}
-
-.section .activity.modtype_label.label {
-  font-weight: normal;
-}
-.section .activity.modtype_label.label .contentwithoutlink {
-  min-height: 0;
-}
-.section .activity.modtype_label.label.hasinfo p:last-child,
-.section .activity.modtype_label.label.hasinfo i:last-child {
-  margin-bottom: 0;
-}
-
-.section li.activity:not(.activity-wrapper) {
-  padding: 0.2em;
-  clear: both;
-}
-.section li.activity:not(.activity-wrapper).hasinfo {
-  border-bottom: 1px solid #dee2e6;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-.section li.activity:not(.activity-wrapper).hasinfo:last-child {
-  border-bottom: 0;
-  padding-bottom: 0;
-}
-
-.course-content .section.dropready.main.drop-down {
-  border-bottom: 1px solid #1d2125;
-}
-.course-content .section.dropready .course-section-header.dropready.drop-zone {
-  margin-top: -2px;
-}
-.course-content .section.dropready li.activity.dropready.drop-down {
-  border-bottom: 1px solid #1d2125;
-  margin-bottom: -1px;
-}
-.course-content .section.dropready li.activity.dropready.drop-up {
-  border-top: 1px solid #1d2125;
-  margin-top: -1px;
-}
-.course-content .section.dropready [data-for=sectioninfo] {
-  min-height: 1px;
-}
-.course-content .section.dropready [data-for=sectioninfo].drop-down {
-  margin-top: -1px;
-}
-
-.section .activity .activityinstance .groupinglabel {
-  padding-left: 30px;
-}
-
-.section.main:not(.course-section) .activity .availabilityinfo,
-.section.main:not(.course-section) .activity .contentafterlink {
-  margin-top: 0.5em;
-  margin-left: 30px;
-}
-
-.section .activity .contentafterlink p {
-  margin: 0.5em 0;
-}
-
-.editing .section.main:not(.course-section) .activity:hover,
-.editing .section.main:not(.course-section) .activity.action-menu-shown,
-.editing .section.main:not(.course-section) .sectionname:hover {
-  background-color: rgba(0, 0, 0, 0.03);
-}
-
-.course-content .current {
-  position: relative;
-}
-
-.course-content .current::before {
-  border-left: #0f6cbf 3px solid;
-  bottom: 0;
-  content: "";
-  left: -8px;
-  position: absolute;
-  top: 0;
-}
-
-.course-content ul li.section.hidden:not(.course-section) .sectionname > span,
-.course-content ul li.section.hidden:not(.course-section) .content > div.summary,
-.course-content ul li.section.hidden:not(.course-section) .activity .activityinstance {
-  color: #6a737b;
-}
-
-.course-content ul.topics,
-.course-content ul.weeks {
+/* Course content */
+.course-content ul.section-list {
   padding: 0;
   margin: 0;
-  list-style: none;
-}
-.course-content ul.topics li.section .content,
-.course-content ul.weeks li.section .content {
-  margin: 0;
-  padding: 0;
-}
-@media (min-width: 576px) {
-  .course-content ul.topics li.section .summary,
-  .course-content ul.topics li.section .content > .availabilityinfo,
-  .course-content ul.weeks li.section .summary,
-  .course-content ul.weeks li.section .content > .availabilityinfo {
-    margin-left: 25px;
-  }
-}
-.course-content ul.topics li.section .left,
-.course-content ul.topics li.section .right,
-.course-content ul.weeks li.section .left,
-.course-content ul.weeks li.section .right {
-  padding: 0 6px 0;
-  text-align: right;
-  width: auto;
 }
 
-.course-content .single-section ul.topics li.section,
-.course-content .single-section ul.weeks li.section {
-  padding-top: 0;
-}
-
-@media (max-width: 767.98px) {
-  body:not(.editing) .course-content ul.topics li.section .left,
-  body:not(.editing) .course-content ul.topics li.section .right,
-  body:not(.editing) .course-content ul.weeks li.section .left,
-  body:not(.editing) .course-content ul.weeks li.section .right {
-    display: none;
-  }
-}
-.course-content {
-  margin-top: 0;
-}
-
-.course-content .hidden {
-  display: none;
-}
-
-@media (max-width: 767.98px) {
-  .course-content li.section:not(.course-section) ul {
-    padding-left: 0;
-  }
-}
-.course-content li.section:not(.course-section) ul {
-  list-style: disc;
-}
-.course-content li.section:not(.course-section) ul ul {
-  list-style: circle;
-}
-.course-content li.section:not(.course-section) ul ul ul {
-  list-style: square;
-}
-.course-content li.section:not(.course-section) li.activity ul {
+.course-content .section-item ul,
+.course-content .section-item .activity-item ul {
   list-style: disc;
 }
-.course-content li.section:not(.course-section) li.activity ul ul {
+.course-content .section-item ul ul,
+.course-content .section-item .activity-item ul ul {
   list-style: circle;
 }
-.course-content li.section:not(.course-section) li.activity ul ul ul {
+.course-content .section-item ul ul ul,
+.course-content .section-item .activity-item ul ul ul {
   list-style: square;
 }
-.course-content li.section:not(.course-section) .right > .icon:first-child {
-  /* Remove the spacer icon. */
-  display: none;
-}
 
-.path-course-view.editing #region-main > .card-block {
-  padding-bottom: 13rem;
-}
-
-.path-course-view .completionprogress {
-  margin-left: 25px;
-}
-
-.path-course-view .completionprogress {
-  display: block;
-  float: right;
-  height: 20px;
-  position: relative;
-}
-
-#page-site-index .subscribelink {
-  text-align: right;
-}
-
-#site-news-forum h2,
-#frontpage-course-list h2,
-#frontpage-category-names h2,
-#frontpage-category-combo h2 {
-  margin-bottom: 9px;
-}
-
-.path-course-view a.reduce-sections {
-  padding-left: 0.2em;
-}
-
-.path-course-view .subscribelink {
-  text-align: right;
-}
-
-.path-course-view .unread {
-  margin-left: 30px;
-}
-
-.path-course-view .block.drag .header {
-  cursor: move;
-}
-
-.path-course-view .completionprogress {
-  text-align: right;
-}
-
-.path-course-view .single-section .completionprogress {
-  margin-right: 5px;
-}
-
-.path-course-view li.activity span.autocompletion img {
-  vertical-align: text-bottom;
-  margin-left: 0;
-}
-
-.path-course-view.editing li.activity span.autocompletion img {
-  /* Use the same spacing as the filler. */
-  margin-right: 0.5rem;
-  margin-left: 0.5rem;
-}
-
-li.section.hidden span.commands a.editing_hide,
-li.section.hidden span.commands a.editing_show {
-  cursor: default;
-}
-
-.single-section-page .header-action {
-  display: inline-block;
-}
-
-input.titleeditor {
-  width: 330px;
-  vertical-align: text-bottom;
-}
-
-.automatic-completion-conditions .badge {
-  font-size: 100%;
-}
-
-/* Variables definition*/
-/* Functions/Mixins definition */
-/* Section Expand all/Collapse all */
 .section-collapsemenu .collapseall {
   display: block;
 }
@@ -28548,7 +28169,27 @@ input.titleeditor {
   display: block;
 }
 
-/* Course section */
+.btn.add-section {
+  border-radius: 1rem;
+  border: 2px dashed #dee2e6;
+  color: #0f6cbf;
+  font-size: 0.8203125rem;
+  font-weight: bold;
+}
+.btn.add-section:hover, .btn.add-section:focus {
+  background-color: #e7f0f9;
+  border: 2px solid #0f6cbf;
+  color: #0f6cbf;
+}
+
+.max-section-alert {
+  border-top: 2px dashed #dee2e6;
+  font-size: 0.8203125rem;
+  font-weight: normal;
+  color: #6a737b;
+}
+
+/* Sections */
 .course-section {
   list-style: none;
   margin-top: 1rem;
@@ -28564,6 +28205,17 @@ input.titleeditor {
 .course-section.hidden .section-item, .course-section.orphaned .section-item {
   background-color: #f8f9fa;
 }
+.course-section.current > .section-item {
+  position: relative;
+}
+.course-section.current > .section-item::before {
+  border-left: #0f6cbf 3px solid;
+  bottom: 0;
+  content: "";
+  left: -8px;
+  position: absolute;
+  top: 0;
+}
 .course-section .sectionname > a {
   color: #1d2125;
 }
@@ -28631,53 +28283,16 @@ input.titleeditor {
   z-index: 5;
 }
 
-.btn.add-section {
-  border-radius: 1rem;
-  border: 2px dashed #dee2e6;
-  color: #0f6cbf;
-  font-size: 0.8203125rem;
-  font-weight: bold;
-}
-.btn.add-section:hover, .btn.add-section:focus {
-  background-color: #e7f0f9;
-  border: 2px solid #0f6cbf;
-  color: #0f6cbf;
-}
-
-.max-section-alert {
-  border-top: 2px dashed #dee2e6;
-  font-size: 0.8203125rem;
-  font-weight: normal;
-  color: #6a737b;
-}
-
-/* Single section page specific styles */
-.single-section > ul > .course-section.hidden .section-item {
-  background-color: inherit;
-}
-.single-section > ul > .course-section .section-item {
-  padding: 0;
-  border: none;
-}
-
-/* Re-style ordered list in course content */
-.course-content .activity-altcontent ul {
-  list-style: disc;
-}
-.course-content .activity-altcontent ul ul {
-  list-style: circle;
-}
-.course-content .activity-altcontent ul ul ul {
-  list-style: square;
-}
-
-/* Activity cards */
+/* Activities */
 .activity {
   list-style: none;
   padding-top: 0.25rem;
   margin-top: 0.25rem;
   border-top: 1px solid #dee2e6;
 }
+.activity.indented .activity-item {
+  margin-left: 1rem;
+}
 .editing .activity, .section .activity:first-child {
   padding-top: 0;
   margin-top: 0;
@@ -29304,47 +28919,47 @@ input.titleeditor {
 }
 
 /* Dividers */
-.divider {
+.course-content .divider {
   position: relative;
 }
-.divider hr {
+.course-content .divider hr {
   width: 100%;
   margin: 0.5rem 0.25rem;
   border-top: 2px dashed #dee2e6;
 }
-.changenumsections.disabled .divider hr {
+.changenumsections.disabled .course-content .divider hr {
   border-top: 2px dashed #dee2e6;
 }
-.divider .divider-content {
+.course-content .divider .divider-content {
   opacity: 0;
   visibility: hidden;
   transition: visibility 0.1s;
   position: absolute;
   background: linear-gradient(transparent 40%, #fff 40%, #fff 60%, transparent 60%);
 }
-.section.hidden .divider .divider-content {
+.section.hidden .course-content .divider .divider-content {
   background: linear-gradient(transparent 40%, #f8f9fa 40%, #f8f9fa 60%, transparent 60%);
 }
-.divider.always-visible .divider-content {
+.course-content .divider.always-visible .divider-content {
   opacity: 1;
   visibility: visible;
 }
-.divider.always-hidden hr {
+.course-content .divider.always-hidden hr {
   opacity: 0;
   visibility: hidden;
 }
-.divider:hover .divider-content, .divider:focus .divider-content, .divider:focus-within .divider-content {
+.course-content .divider:hover .divider-content, .course-content .divider:focus .divider-content, .course-content .divider:focus-within .divider-content {
   opacity: 1;
   visibility: visible;
 }
-.divider:hover hr, .divider:focus hr, .divider:focus-within hr {
+.course-content .divider:hover hr, .course-content .divider:focus hr, .course-content .divider:focus-within hr {
   opacity: 1;
   visibility: visible;
 }
-.divider:has(.btn.add-content:hover) hr {
+.course-content .divider:has(.btn.add-content:hover) hr {
   border-color: #0f6cbf;
 }
-.changenumsections.disabled .divider:has(.btn.add-content:hover) hr {
+.changenumsections.disabled .course-content .divider:has(.btn.add-content:hover) hr {
   border-color: #e9ecef;
 }
 
@@ -29359,7 +28974,7 @@ input.titleeditor {
   display: none;
 }
 
-.btn.add-content {
+.course-content .divider .btn.add-content {
   position: relative;
   z-index: 1;
   border-radius: 0.5rem;
@@ -29368,23 +28983,23 @@ input.titleeditor {
   color: #083660;
   background-color: #cfe2f2;
 }
-.btn.add-content:hover, .btn.add-content:focus {
+.course-content .divider .btn.add-content:hover, .course-content .divider .btn.add-content:focus {
   color: #fff;
   background-color: #0f6cbf;
 }
-.btn.add-content .icon {
+.course-content .divider .btn.add-content .icon {
   width: 14px;
   height: 14px;
   font-size: 14px;
 }
-.changenumsections.disabled .btn.add-content {
+.changenumsections.disabled .course-content .divider .btn.add-content {
   color: #8f959e;
   background-color: #e9ecef;
   outline: none;
   box-shadow: none;
   pointer-events: auto;
 }
-.changenumsections.disabled .btn.add-content:hover, .changenumsections.disabled .btn.add-content:focus {
+.changenumsections.disabled .course-content .divider .btn.add-content:hover, .changenumsections.disabled .course-content .divider .btn.add-content:focus {
   color: #8f959e;
   background-color: #e9ecef;
   outline: none;
@@ -29448,7 +29063,25 @@ input.titleeditor {
   }
 }
 
-/* Activity completion */
+/* Single section page */
+.single-section > ul > .course-section.hidden .section-item {
+  background-color: inherit;
+}
+.single-section > ul > .course-section .section-item {
+  padding: 0;
+  border: none;
+}
+
+.single-section-page .header-action {
+  display: inline-block;
+}
+
+.course-content .single-section ul.topics li.section,
+.course-content .single-section ul.weeks li.section {
+  padding-top: 0;
+}
+
+/* Default activity completion page */
 .defaultactivitycompletion-item a {
   color: #000;
   text-decoration: none;
@@ -29458,16 +29091,28 @@ input.titleeditor {
   height: 32px;
 }
 
-/* Home page course specific styles */
-.sitetopic .activity:first-of-type hr {
-  display: none;
-}
+/* Home page course */
 .sitetopic .section-item {
   margin-bottom: 1.5rem;
   border-radius: 0.5rem;
 }
 
-/* Styles for the Move activity and Move section modals */
+/* Social format */
+#page-site-index .subscribelink {
+  text-align: right;
+}
+
+.path-course-view .subscribelink {
+  text-align: right;
+}
+.path-course-view .unread {
+  margin-left: 30px;
+}
+.path-course-view .block.drag .header {
+  cursor: move;
+}
+
+/* Move activity and Move section modals */
 .move-activity-tree .collapse-list-item {
   border-radius: 0.5rem;
 }
@@ -29496,7 +29141,7 @@ input.titleeditor {
   font-weight: bold;
 }
 
-/* Subsection specific styles */
+/* Subsections */
 .activity.subsection {
   border-top: none;
 }
@@ -29539,6 +29184,73 @@ input.titleeditor {
   visibility: hidden;
 }
 
+/* Spinners */
+@keyframes editinprogress-rotation {
+  0% {
+    opacity: 0;
+    transform: rotate(0deg);
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: rotate(359deg);
+  }
+}
+.editing .course-content .stateready .section .spinner {
+  display: none;
+}
+.editing .editinprogress {
+  position: relative;
+}
+.editing .editinprogress > * {
+  opacity: 0.4;
+}
+.editing .editinprogress .corelightbox,
+.editing .editinprogress .lightbox {
+  display: none;
+}
+.editing .editinprogress:after {
+  position: absolute;
+  font-size: 20px;
+  color: #6a737b;
+  content: "\f110";
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 30px;
+  height: 30px;
+  left: calc(50% - 15px);
+  top: calc(50% - 15px);
+  animation: editinprogress-rotation 2s infinite linear;
+}
+.editing .editinprogress .editinprogress:after {
+  display: none;
+}
+
+/* Drag and drop */
+.course-content .section.dropready.main.drop-down {
+  border-bottom: 1px solid #1d2125;
+}
+.course-content .section.dropready .course-section-header.dropready.drop-zone {
+  margin-top: -2px;
+}
+.course-content .section.dropready li.activity.dropready.drop-down {
+  border-bottom: 1px solid #1d2125;
+  margin-bottom: -1px;
+}
+.course-content .section.dropready li.activity.dropready.drop-up {
+  border-top: 1px solid #1d2125;
+  margin-top: -1px;
+}
+.course-content .section.dropready [data-for=sectioninfo] {
+  min-height: 1px;
+}
+.course-content .section.dropready [data-for=sectioninfo].drop-down {
+  margin-top: -1px;
+}
+
 /*
  * Course management page styles.
  */
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 8425ca1644bdb..265dde815c13e 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -28137,404 +28137,25 @@ table.calendartable caption {
 /*
  * Course page styles.
  */
-.section .side {
-  margin-top: 0.5rem;
-}
-.section .side.left {
-  float: left;
-}
-.section .side.right {
-  float: right;
-  clear: right;
-}
-.section .spinner {
-  height: 16px;
-  width: 16px;
-}
-.section .activity {
-  /* The command block for each activity */
-}
-.section .activity .spinner {
-  left: 100%;
-  position: absolute;
-}
-.section .activity .actions {
-  position: absolute;
-  right: 0;
-  top: 0;
-  display: flex;
-}
-.section .activity .contentwithoutlink,
-.section .activity .activityinstance {
-  min-width: 40%;
-}
-.section .activity .contentwithoutlink > a,
-.section .activity .activityinstance > a {
-  display: inline-flex;
-  align-items: center;
-}
-.section .activity .contentwithoutlink .dimmed .activityicon,
-.section .activity .activityinstance .dimmed .activityicon {
-  opacity: 0.5;
-}
-.section .activity .stealth {
-  color: #6a737b;
-}
-.section .activity a.stealth,
-.section .activity a.stealth:hover {
-  color: #5babf2 !important; /* stylelint-disable-line declaration-no-important */
-}
-.section .activity.indented .activity-item {
-  margin-left: 1rem;
-}
-.section .label .contentwithoutlink,
-.section .label .activityinstance {
-  padding-right: 32px;
-  display: block;
-  height: inherit;
-}
-@media (min-width: 576px) {
-  .section .label .mod-indent-outer {
-    padding-left: 24px;
-    display: block;
-  }
-}
-.section .filler {
-  width: 16px;
-  height: 16px;
-  padding: 0;
-  margin: 0 0.5rem;
-  display: inline-block;
-}
-.section .activity.editor_displayed a.editing_title,
-.section .activity.editor_displayed .moodle-actionmenu {
-  display: none;
-}
-.section .activity.editor_displayed div.activityinstance {
-  padding-right: initial;
-}
-.section .activity.editor_displayed div.activityinstance input {
-  margin-bottom: initial;
-  padding-top: initial;
-  padding-bottom: initial;
-  vertical-align: text-bottom;
-}
-
-.section .activity .activityinstance {
-  display: inline-flex;
-  align-items: center;
-  margin-bottom: 1rem;
-}
-
-.editing .section .activity .contentwithoutlink,
-.editing .section .activity .activityinstance {
-  padding-right: 200px;
-}
-.editing .section .activity .mod-indent-outer {
-  /**
-   * Add appropriate padding such that nothing overlaps the
-   * absolute positioned move icon.
-   */
-  padding-left: 2rem;
-}
-.editing .course-content .stateready .section .spinner {
-  display: none;
-}
-.editing .editinprogress {
-  position: relative;
-}
-.editing .editinprogress > * {
-  opacity: 0.4;
-}
-.editing .editinprogress .corelightbox,
-.editing .editinprogress .lightbox {
-  display: none;
-}
-.editing .editinprogress:after {
-  position: absolute;
-  font-size: 20px;
-  color: #6a737b;
-  content: "\f110";
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 30px;
-  height: 30px;
-  left: calc(50% - 15px);
-  top: calc(50% - 15px);
-  animation: editinprogress-rotation 2s infinite linear;
-}
-.editing .editinprogress .editinprogress:after {
-  display: none;
-}
-
-@keyframes editinprogress-rotation {
-  0% {
-    opacity: 0;
-    transform: rotate(0deg);
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-    transform: rotate(359deg);
-  }
-}
-.editing_show + .editing_assign,
-.editing_hide + .editing_assign {
-  margin-left: 20px;
-}
-
-.section .activity .commands {
-  white-space: nowrap;
-  display: inline-block;
-}
-
-.section .activity.modtype_label.label {
-  font-weight: normal;
-}
-.section .activity.modtype_label.label .contentwithoutlink {
-  min-height: 0;
-}
-.section .activity.modtype_label.label.hasinfo p:last-child,
-.section .activity.modtype_label.label.hasinfo i:last-child {
-  margin-bottom: 0;
-}
-
-.section li.activity:not(.activity-wrapper) {
-  padding: 0.2em;
-  clear: both;
-}
-.section li.activity:not(.activity-wrapper).hasinfo {
-  border-bottom: 1px solid #dee2e6;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-.section li.activity:not(.activity-wrapper).hasinfo:last-child {
-  border-bottom: 0;
-  padding-bottom: 0;
-}
-
-.course-content .section.dropready.main.drop-down {
-  border-bottom: 1px solid #1d2125;
-}
-.course-content .section.dropready .course-section-header.dropready.drop-zone {
-  margin-top: -2px;
-}
-.course-content .section.dropready li.activity.dropready.drop-down {
-  border-bottom: 1px solid #1d2125;
-  margin-bottom: -1px;
-}
-.course-content .section.dropready li.activity.dropready.drop-up {
-  border-top: 1px solid #1d2125;
-  margin-top: -1px;
-}
-.course-content .section.dropready [data-for=sectioninfo] {
-  min-height: 1px;
-}
-.course-content .section.dropready [data-for=sectioninfo].drop-down {
-  margin-top: -1px;
-}
-
-.section .activity .activityinstance .groupinglabel {
-  padding-left: 30px;
-}
-
-.section.main:not(.course-section) .activity .availabilityinfo,
-.section.main:not(.course-section) .activity .contentafterlink {
-  margin-top: 0.5em;
-  margin-left: 30px;
-}
-
-.section .activity .contentafterlink p {
-  margin: 0.5em 0;
-}
-
-.editing .section.main:not(.course-section) .activity:hover,
-.editing .section.main:not(.course-section) .activity.action-menu-shown,
-.editing .section.main:not(.course-section) .sectionname:hover {
-  background-color: rgba(0, 0, 0, 0.03);
-}
-
-.course-content .current {
-  position: relative;
-}
-
-.course-content .current::before {
-  border-left: #0f6cbf 3px solid;
-  bottom: 0;
-  content: "";
-  left: -8px;
-  position: absolute;
-  top: 0;
-}
-
-.course-content ul li.section.hidden:not(.course-section) .sectionname > span,
-.course-content ul li.section.hidden:not(.course-section) .content > div.summary,
-.course-content ul li.section.hidden:not(.course-section) .activity .activityinstance {
-  color: #6a737b;
-}
-
-.course-content ul.topics,
-.course-content ul.weeks {
+/* Course content */
+.course-content ul.section-list {
   padding: 0;
   margin: 0;
-  list-style: none;
-}
-.course-content ul.topics li.section .content,
-.course-content ul.weeks li.section .content {
-  margin: 0;
-  padding: 0;
-}
-@media (min-width: 576px) {
-  .course-content ul.topics li.section .summary,
-  .course-content ul.topics li.section .content > .availabilityinfo,
-  .course-content ul.weeks li.section .summary,
-  .course-content ul.weeks li.section .content > .availabilityinfo {
-    margin-left: 25px;
-  }
-}
-.course-content ul.topics li.section .left,
-.course-content ul.topics li.section .right,
-.course-content ul.weeks li.section .left,
-.course-content ul.weeks li.section .right {
-  padding: 0 6px 0;
-  text-align: right;
-  width: auto;
 }
 
-.course-content .single-section ul.topics li.section,
-.course-content .single-section ul.weeks li.section {
-  padding-top: 0;
-}
-
-@media (max-width: 767.98px) {
-  body:not(.editing) .course-content ul.topics li.section .left,
-  body:not(.editing) .course-content ul.topics li.section .right,
-  body:not(.editing) .course-content ul.weeks li.section .left,
-  body:not(.editing) .course-content ul.weeks li.section .right {
-    display: none;
-  }
-}
-.course-content {
-  margin-top: 0;
-}
-
-.course-content .hidden {
-  display: none;
-}
-
-@media (max-width: 767.98px) {
-  .course-content li.section:not(.course-section) ul {
-    padding-left: 0;
-  }
-}
-.course-content li.section:not(.course-section) ul {
-  list-style: disc;
-}
-.course-content li.section:not(.course-section) ul ul {
-  list-style: circle;
-}
-.course-content li.section:not(.course-section) ul ul ul {
-  list-style: square;
-}
-.course-content li.section:not(.course-section) li.activity ul {
+.course-content .section-item ul,
+.course-content .section-item .activity-item ul {
   list-style: disc;
 }
-.course-content li.section:not(.course-section) li.activity ul ul {
+.course-content .section-item ul ul,
+.course-content .section-item .activity-item ul ul {
   list-style: circle;
 }
-.course-content li.section:not(.course-section) li.activity ul ul ul {
+.course-content .section-item ul ul ul,
+.course-content .section-item .activity-item ul ul ul {
   list-style: square;
 }
-.course-content li.section:not(.course-section) .right > .icon:first-child {
-  /* Remove the spacer icon. */
-  display: none;
-}
 
-.path-course-view.editing #region-main > .card-block {
-  padding-bottom: 13rem;
-}
-
-.path-course-view .completionprogress {
-  margin-left: 25px;
-}
-
-.path-course-view .completionprogress {
-  display: block;
-  float: right;
-  height: 20px;
-  position: relative;
-}
-
-#page-site-index .subscribelink {
-  text-align: right;
-}
-
-#site-news-forum h2,
-#frontpage-course-list h2,
-#frontpage-category-names h2,
-#frontpage-category-combo h2 {
-  margin-bottom: 9px;
-}
-
-.path-course-view a.reduce-sections {
-  padding-left: 0.2em;
-}
-
-.path-course-view .subscribelink {
-  text-align: right;
-}
-
-.path-course-view .unread {
-  margin-left: 30px;
-}
-
-.path-course-view .block.drag .header {
-  cursor: move;
-}
-
-.path-course-view .completionprogress {
-  text-align: right;
-}
-
-.path-course-view .single-section .completionprogress {
-  margin-right: 5px;
-}
-
-.path-course-view li.activity span.autocompletion img {
-  vertical-align: text-bottom;
-  margin-left: 0;
-}
-
-.path-course-view.editing li.activity span.autocompletion img {
-  /* Use the same spacing as the filler. */
-  margin-right: 0.5rem;
-  margin-left: 0.5rem;
-}
-
-li.section.hidden span.commands a.editing_hide,
-li.section.hidden span.commands a.editing_show {
-  cursor: default;
-}
-
-.single-section-page .header-action {
-  display: inline-block;
-}
-
-input.titleeditor {
-  width: 330px;
-  vertical-align: text-bottom;
-}
-
-.automatic-completion-conditions .badge {
-  font-size: 100%;
-}
-
-/* Variables definition*/
-/* Functions/Mixins definition */
-/* Section Expand all/Collapse all */
 .section-collapsemenu .collapseall {
   display: block;
 }
@@ -28548,7 +28169,27 @@ input.titleeditor {
   display: block;
 }
 
-/* Course section */
+.btn.add-section {
+  border-radius: 1rem;
+  border: 2px dashed #dee2e6;
+  color: #0f6cbf;
+  font-size: 0.8203125rem;
+  font-weight: bold;
+}
+.btn.add-section:hover, .btn.add-section:focus {
+  background-color: #e7f0f9;
+  border: 2px solid #0f6cbf;
+  color: #0f6cbf;
+}
+
+.max-section-alert {
+  border-top: 2px dashed #dee2e6;
+  font-size: 0.8203125rem;
+  font-weight: normal;
+  color: #6a737b;
+}
+
+/* Sections */
 .course-section {
   list-style: none;
   margin-top: 1rem;
@@ -28564,6 +28205,17 @@ input.titleeditor {
 .course-section.hidden .section-item, .course-section.orphaned .section-item {
   background-color: #f8f9fa;
 }
+.course-section.current > .section-item {
+  position: relative;
+}
+.course-section.current > .section-item::before {
+  border-left: #0f6cbf 3px solid;
+  bottom: 0;
+  content: "";
+  left: -8px;
+  position: absolute;
+  top: 0;
+}
 .course-section .sectionname > a {
   color: #1d2125;
 }
@@ -28631,53 +28283,16 @@ input.titleeditor {
   z-index: 5;
 }
 
-.btn.add-section {
-  border-radius: 1rem;
-  border: 2px dashed #dee2e6;
-  color: #0f6cbf;
-  font-size: 0.8203125rem;
-  font-weight: bold;
-}
-.btn.add-section:hover, .btn.add-section:focus {
-  background-color: #e7f0f9;
-  border: 2px solid #0f6cbf;
-  color: #0f6cbf;
-}
-
-.max-section-alert {
-  border-top: 2px dashed #dee2e6;
-  font-size: 0.8203125rem;
-  font-weight: normal;
-  color: #6a737b;
-}
-
-/* Single section page specific styles */
-.single-section > ul > .course-section.hidden .section-item {
-  background-color: inherit;
-}
-.single-section > ul > .course-section .section-item {
-  padding: 0;
-  border: none;
-}
-
-/* Re-style ordered list in course content */
-.course-content .activity-altcontent ul {
-  list-style: disc;
-}
-.course-content .activity-altcontent ul ul {
-  list-style: circle;
-}
-.course-content .activity-altcontent ul ul ul {
-  list-style: square;
-}
-
-/* Activity cards */
+/* Activities */
 .activity {
   list-style: none;
   padding-top: 0.25rem;
   margin-top: 0.25rem;
   border-top: 1px solid #dee2e6;
 }
+.activity.indented .activity-item {
+  margin-left: 1rem;
+}
 .editing .activity, .section .activity:first-child {
   padding-top: 0;
   margin-top: 0;
@@ -29304,47 +28919,47 @@ input.titleeditor {
 }
 
 /* Dividers */
-.divider {
+.course-content .divider {
   position: relative;
 }
-.divider hr {
+.course-content .divider hr {
   width: 100%;
   margin: 0.5rem 0.25rem;
   border-top: 2px dashed #dee2e6;
 }
-.changenumsections.disabled .divider hr {
+.changenumsections.disabled .course-content .divider hr {
   border-top: 2px dashed #dee2e6;
 }
-.divider .divider-content {
+.course-content .divider .divider-content {
   opacity: 0;
   visibility: hidden;
   transition: visibility 0.1s;
   position: absolute;
   background: linear-gradient(transparent 40%, #fff 40%, #fff 60%, transparent 60%);
 }
-.section.hidden .divider .divider-content {
+.section.hidden .course-content .divider .divider-content {
   background: linear-gradient(transparent 40%, #f8f9fa 40%, #f8f9fa 60%, transparent 60%);
 }
-.divider.always-visible .divider-content {
+.course-content .divider.always-visible .divider-content {
   opacity: 1;
   visibility: visible;
 }
-.divider.always-hidden hr {
+.course-content .divider.always-hidden hr {
   opacity: 0;
   visibility: hidden;
 }
-.divider:hover .divider-content, .divider:focus .divider-content, .divider:focus-within .divider-content {
+.course-content .divider:hover .divider-content, .course-content .divider:focus .divider-content, .course-content .divider:focus-within .divider-content {
   opacity: 1;
   visibility: visible;
 }
-.divider:hover hr, .divider:focus hr, .divider:focus-within hr {
+.course-content .divider:hover hr, .course-content .divider:focus hr, .course-content .divider:focus-within hr {
   opacity: 1;
   visibility: visible;
 }
-.divider:has(.btn.add-content:hover) hr {
+.course-content .divider:has(.btn.add-content:hover) hr {
   border-color: #0f6cbf;
 }
-.changenumsections.disabled .divider:has(.btn.add-content:hover) hr {
+.changenumsections.disabled .course-content .divider:has(.btn.add-content:hover) hr {
   border-color: #e9ecef;
 }
 
@@ -29359,7 +28974,7 @@ input.titleeditor {
   display: none;
 }
 
-.btn.add-content {
+.course-content .divider .btn.add-content {
   position: relative;
   z-index: 1;
   border-radius: 0.25rem;
@@ -29368,23 +28983,23 @@ input.titleeditor {
   color: #083660;
   background-color: #cfe2f2;
 }
-.btn.add-content:hover, .btn.add-content:focus {
+.course-content .divider .btn.add-content:hover, .course-content .divider .btn.add-content:focus {
   color: #fff;
   background-color: #0f6cbf;
 }
-.btn.add-content .icon {
+.course-content .divider .btn.add-content .icon {
   width: 14px;
   height: 14px;
   font-size: 14px;
 }
-.changenumsections.disabled .btn.add-content {
+.changenumsections.disabled .course-content .divider .btn.add-content {
   color: #8f959e;
   background-color: #e9ecef;
   outline: none;
   box-shadow: none;
   pointer-events: auto;
 }
-.changenumsections.disabled .btn.add-content:hover, .changenumsections.disabled .btn.add-content:focus {
+.changenumsections.disabled .course-content .divider .btn.add-content:hover, .changenumsections.disabled .course-content .divider .btn.add-content:focus {
   color: #8f959e;
   background-color: #e9ecef;
   outline: none;
@@ -29448,7 +29063,25 @@ input.titleeditor {
   }
 }
 
-/* Activity completion */
+/* Single section page */
+.single-section > ul > .course-section.hidden .section-item {
+  background-color: inherit;
+}
+.single-section > ul > .course-section .section-item {
+  padding: 0;
+  border: none;
+}
+
+.single-section-page .header-action {
+  display: inline-block;
+}
+
+.course-content .single-section ul.topics li.section,
+.course-content .single-section ul.weeks li.section {
+  padding-top: 0;
+}
+
+/* Default activity completion page */
 .defaultactivitycompletion-item a {
   color: #000;
   text-decoration: none;
@@ -29458,16 +29091,28 @@ input.titleeditor {
   height: 32px;
 }
 
-/* Home page course specific styles */
-.sitetopic .activity:first-of-type hr {
-  display: none;
-}
+/* Home page course */
 .sitetopic .section-item {
   margin-bottom: 1.5rem;
   border-radius: 0.25rem;
 }
 
-/* Styles for the Move activity and Move section modals */
+/* Social format */
+#page-site-index .subscribelink {
+  text-align: right;
+}
+
+.path-course-view .subscribelink {
+  text-align: right;
+}
+.path-course-view .unread {
+  margin-left: 30px;
+}
+.path-course-view .block.drag .header {
+  cursor: move;
+}
+
+/* Move activity and Move section modals */
 .move-activity-tree .collapse-list-item {
   border-radius: 0.25rem;
 }
@@ -29496,7 +29141,7 @@ input.titleeditor {
   font-weight: bold;
 }
 
-/* Subsection specific styles */
+/* Subsections */
 .activity.subsection {
   border-top: none;
 }
@@ -29539,6 +29184,73 @@ input.titleeditor {
   visibility: hidden;
 }
 
+/* Spinners */
+@keyframes editinprogress-rotation {
+  0% {
+    opacity: 0;
+    transform: rotate(0deg);
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: rotate(359deg);
+  }
+}
+.editing .course-content .stateready .section .spinner {
+  display: none;
+}
+.editing .editinprogress {
+  position: relative;
+}
+.editing .editinprogress > * {
+  opacity: 0.4;
+}
+.editing .editinprogress .corelightbox,
+.editing .editinprogress .lightbox {
+  display: none;
+}
+.editing .editinprogress:after {
+  position: absolute;
+  font-size: 20px;
+  color: #6a737b;
+  content: "\f110";
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 30px;
+  height: 30px;
+  left: calc(50% - 15px);
+  top: calc(50% - 15px);
+  animation: editinprogress-rotation 2s infinite linear;
+}
+.editing .editinprogress .editinprogress:after {
+  display: none;
+}
+
+/* Drag and drop */
+.course-content .section.dropready.main.drop-down {
+  border-bottom: 1px solid #1d2125;
+}
+.course-content .section.dropready .course-section-header.dropready.drop-zone {
+  margin-top: -2px;
+}
+.course-content .section.dropready li.activity.dropready.drop-down {
+  border-bottom: 1px solid #1d2125;
+  margin-bottom: -1px;
+}
+.course-content .section.dropready li.activity.dropready.drop-up {
+  border-top: 1px solid #1d2125;
+  margin-top: -1px;
+}
+.course-content .section.dropready [data-for=sectioninfo] {
+  min-height: 1px;
+}
+.course-content .section.dropready [data-for=sectioninfo].drop-down {
+  margin-top: -1px;
+}
+
 /*
  * Course management page styles.
  */