From 6d3b1574de834a7aad6e6c8c81f45bf9da48e400 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mikel=20Mart=C3=ADn?= Date: Tue, 29 Oct 2024 10:17:38 +0100 Subject: [PATCH] MDL-80303 theme_boost: Clean and reorder course SCSS - Reorder SCSS blocks to improve readability - Clean comment style to improve readability - Refactor some SCSS blocks - Move some styles from core.scss to course.scss --- course/format/social/format.php | 2 +- course/renderer.php | 2 +- theme/boost/scss/moodle/core.scss | 50 --- theme/boost/scss/moodle/course.scss | 419 ++++++++++---------- theme/boost/scss/moodle/deprecated.scss | 10 + theme/boost/style/moodle.css | 491 ++++++++++++------------ theme/classic/style/moodle.css | 491 ++++++++++++------------ 7 files changed, 704 insertions(+), 761 deletions(-) diff --git a/course/format/social/format.php b/course/format/social/format.php index 4fd8a4c4bc694..8c07ca8f2ee5d 100644 --- a/course/format/social/format.php +++ b/course/format/social/format.php @@ -64,7 +64,7 @@ echo $OUTPUT->box($introcontent, 'generalbox', 'intro'); } -echo html_writer::div(forum_get_subscribe_link($forum, $modcontext), 'subscribelink'); +echo html_writer::div(forum_get_subscribe_link($forum, $modcontext), 'subscribelink text-end'); $numdiscussions = course_get_format($course)->get_course()->numdiscussions; if ($numdiscussions < 1) { diff --git a/course/renderer.php b/course/renderer.php index 437c406e9bb9c..7ae053c35c320 100644 --- a/course/renderer.php +++ b/course/renderer.php @@ -1627,7 +1627,7 @@ protected function frontpage_news($forum) { $subtext = get_string('subscribe', 'forum'); } $suburl = new moodle_url('/mod/forum/subscribe.php', array('id' => $forum->id, 'sesskey' => sesskey())); - $output .= html_writer::tag('div', html_writer::link($suburl, $subtext), array('class' => 'subscribelink')); + $output .= html_writer::tag('div', html_writer::link($suburl, $subtext), ['class' => 'subscribelink text-end']); } $coursemodule = get_coursemodule_from_instance('forum', $forum->id); diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss index ed61cbac41c2a..df6ea83b6299d 100644 --- a/theme/boost/scss/moodle/core.scss +++ b/theme/boost/scss/moodle/core.scss @@ -221,18 +221,6 @@ button.btn-close, padding: 0; } -.section li.movehere a { - display: block; - width: 100%; - height: 2rem; - border: 2px dashed $gray-800; -} - -.editing .course-content .hidden.sectionname { - visibility: hidden; - display: initial; -} - .inline, .inline-list li { display: inline; @@ -1024,40 +1012,6 @@ tr.flagged-tag a { left: 50%; } -.mod-indent-outer { - display: table; -} - -.mod-indent { - display: table-cell; -} - -.label .mod-indent { - float: left; - padding-top: 20px; -} - -.activity.label.modtype_label .mod-indent { - float: none; -} - -@include media-breakpoint-up(sm) { - $mod-indent-size: 30px; - /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */ - - @for $i from 1 through 16 { - $width: ($i * $mod-indent-size); - - .mod-indent-#{$i} { - width: $width; - } - } - - .mod-indent-huge { - width: (16 * $mod-indent-size); - } -} - /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */ .resourcecontent .mediaplugin_mp3 object { height: 25px; @@ -2098,10 +2052,6 @@ dd:after { } } -h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions { - margin-top: -20px; -} - /** Chart area. */ .chart-area { @include media-breakpoint-up(lg) { diff --git a/theme/boost/scss/moodle/course.scss b/theme/boost/scss/moodle/course.scss index b3fd0b15866a4..42f29695f0363 100644 --- a/theme/boost/scss/moodle/course.scss +++ b/theme/boost/scss/moodle/course.scss @@ -2,118 +2,7 @@ * Course page styles. */ -/* Spinners */ - -.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; - } - } - } -} - -@keyframes editinprogress-rotation { - 0% { - opacity: 0; - transform: rotate(0deg); - } - 50% { - opacity: 1; - } - 100% { - opacity: 0; - transform: rotate(359deg); - } -} - -/* 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; - } -} - -/* Highlight current section */ -// TODO: Move to "Section" block. - -.course-content .current { - position: relative; -} - -.course-content .current::before { - border-left: $primary 3px solid; - bottom: 0; - content: ""; - left: -8px; - position: absolute; - top: 0; -} - -/* Variables definition*/ - +// Variables. $activity-item-padding: 0.75rem !default; $activity-border-radius: 1rem !default; $activity-border-width: 2px !default; @@ -122,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); @@ -147,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; @@ -169,13 +76,30 @@ $divider-hover-color: $primary !default; } } -/* Course content */ +// 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; + } +} -.course-content ul.section-list { - padding: 0; +// 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; } -/* Course section */ +/* Sections */ .course-section { list-style: none; @@ -198,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 { @@ -290,67 +229,15 @@ $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; +// Old movehere link styles. +.section li.movehere a { + display: block; + width: 100%; + height: 2rem; + border: 2px dashed $gray-800; } -/* 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; - } - } -} - -.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; -} - -/* 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; - } - } - } -} - -/* Activity cards */ +/* Activities */ .activity { list-style: none; @@ -622,7 +509,7 @@ $divider-hover-color: $primary !default; /* Dividers */ -.divider { +.course-content .divider { position: relative; hr { width: 100%; @@ -692,7 +579,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(); @@ -790,7 +677,26 @@ $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; +} + +/* Default activity completion page */ .defaultactivitycompletion-item { a { @@ -803,7 +709,7 @@ $divider-hover-color: $primary !default; } } -/* Home page course specific styles */ +/* Home page course */ .sitetopic { .section-item { @@ -812,23 +718,7 @@ $divider-hover-color: $primary !default; } } -#page-site-index .subscribelink { - text-align: right; -} - -.path-course-view { - .subscribelink { - text-align: right; - } - .unread { - margin-left: 30px; - } - .block.drag .header { - cursor: move; - } -} - -/* Styles for the Move activity and Move section modals */ +/* Move activity and Move section modals */ .move-activity-tree { .collapse-list-item { @@ -870,7 +760,7 @@ $divider-hover-color: $primary !default; } } -/* Subsection specific styles */ +/* Subsections */ .activity.subsection { border-top: none; @@ -917,3 +807,130 @@ $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 { + // 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; + } +} + +/* Old indentation styles */ + +.mod-indent-outer { + display: table; +} + +.mod-indent { + display: table-cell; +} + +.label .mod-indent { + float: left; + padding-top: 20px; +} + +.activity.label.modtype_label .mod-indent { + float: none; +} + +@include media-breakpoint-up(sm) { + $mod-indent-size: 30px; + /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */ + + @for $i from 1 through 16 { + $width: ($i * $mod-indent-size); + + .mod-indent-#{$i} { + width: $width; + } + } + + .mod-indent-huge { + width: (16 * $mod-indent-size); + } +} diff --git a/theme/boost/scss/moodle/deprecated.scss b/theme/boost/scss/moodle/deprecated.scss index d37ece4191c0a..0b48a22c5d76f 100644 --- a/theme/boost/scss/moodle/deprecated.scss +++ b/theme/boost/scss/moodle/deprecated.scss @@ -60,3 +60,13 @@ .path-course-view li.activity form.togglecompletion img { max-width: none; /* The width is 0 so ensure we don't end up with a relative max-width */ } + +// +// Deprecated since Moodle 5.0. +// + +// In 6.0 all YUI section spinners wont be needed. +.course-content .stateready .section .spinner { + @include deprecated-styles(); + display: none; +} diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css index a3b7fed1cee56..ebe31cb483990 100644 --- a/theme/boost/style/moodle.css +++ b/theme/boost/style/moodle.css @@ -23229,18 +23229,6 @@ button.btn-close:focus:hover, padding: 0; } -.section li.movehere a { - display: block; - width: 100%; - height: 2rem; - border: 2px dashed #343a40; -} - -.editing .course-content .hidden.sectionname { - visibility: hidden; - display: initial; -} - .inline, .inline-list li { display: inline; @@ -24074,77 +24062,6 @@ tr.flagged-tag a { left: 50%; } -.mod-indent-outer { - display: table; -} - -.mod-indent { - display: table-cell; -} - -.label .mod-indent { - float: left; - padding-top: 20px; -} - -.activity.label.modtype_label .mod-indent { - float: none; -} - -@media (min-width: 576px) { - /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */ - .mod-indent-1 { - width: 30px; - } - .mod-indent-2 { - width: 60px; - } - .mod-indent-3 { - width: 90px; - } - .mod-indent-4 { - width: 120px; - } - .mod-indent-5 { - width: 150px; - } - .mod-indent-6 { - width: 180px; - } - .mod-indent-7 { - width: 210px; - } - .mod-indent-8 { - width: 240px; - } - .mod-indent-9 { - width: 270px; - } - .mod-indent-10 { - width: 300px; - } - .mod-indent-11 { - width: 330px; - } - .mod-indent-12 { - width: 360px; - } - .mod-indent-13 { - width: 390px; - } - .mod-indent-14 { - width: 420px; - } - .mod-indent-15 { - width: 450px; - } - .mod-indent-16 { - width: 480px; - } - .mod-indent-huge { - width: 480px; - } -} /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */ .resourcecontent .mediaplugin_mp3 object { height: 25px; @@ -25132,10 +25049,6 @@ dd:after { display: block; } -h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions { - margin-top: -20px; -} - /** Chart area. */ @media (min-width: 992px) { .chart-area .chart-image { @@ -28137,90 +28050,25 @@ table.calendartable caption { /* * Course page styles. */ -/* Spinners */ -.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; +/* Course content */ +.course-content ul.section-list { + padding: 0; + margin: 0; } -@keyframes editinprogress-rotation { - 0% { - opacity: 0; - transform: rotate(0deg); - } - 50% { - opacity: 1; - } - 100% { - opacity: 0; - transform: rotate(359deg); - } -} -/* 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-content .section-item ul, +.course-content .section-item .activity-item ul { + list-style: disc; } - -/* Highlight current section */ -.course-content .current { - position: relative; +.course-content .section-item ul ul, +.course-content .section-item .activity-item ul ul { + list-style: circle; } - -.course-content .current::before { - border-left: #0f6cbf 3px solid; - bottom: 0; - content: ""; - left: -8px; - position: absolute; - top: 0; +.course-content .section-item ul ul ul, +.course-content .section-item .activity-item ul ul ul { + list-style: square; } -/* Variables definition*/ -/* Functions/Mixins definition */ -/* Section Expand all/Collapse all */ .section-collapsemenu .collapseall { display: block; } @@ -28234,12 +28082,27 @@ table.calendartable caption { display: block; } -/* Course content */ -.course-content ul.section-list { - padding: 0; +.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; } -/* Course section */ +/* Sections */ .course-section { list-style: none; margin-top: 1rem; @@ -28255,6 +28118,17 @@ table.calendartable caption { .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; } @@ -28322,59 +28196,14 @@ table.calendartable caption { 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; -} - -.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; -} - -/* Re-style ordered list in course content */ -.course-content .section-item ul, -.course-content .section-item .activity-item ul { - list-style: disc; -} -.course-content .section-item ul ul, -.course-content .section-item .activity-item ul ul { - list-style: circle; -} -.course-content .section-item ul ul ul, -.course-content .section-item .activity-item ul ul ul { - list-style: square; +.section li.movehere a { + display: block; + width: 100%; + height: 2rem; + border: 2px dashed #343a40; } -/* Activity cards */ +/* Activities */ .activity { list-style: none; padding-top: 0.25rem; @@ -29010,47 +28839,47 @@ table.calendartable caption { } /* 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; } @@ -29065,7 +28894,7 @@ table.calendartable caption { display: none; } -.btn.add-content { +.course-content .divider .btn.add-content { position: relative; z-index: 1; border-radius: 0.5rem; @@ -29074,23 +28903,23 @@ table.calendartable caption { 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; @@ -29154,7 +28983,20 @@ table.calendartable caption { } } -/* 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; +} + +/* Default activity completion page */ .defaultactivitycompletion-item a { color: #000; text-decoration: none; @@ -29164,27 +29006,13 @@ table.calendartable caption { height: 32px; } -/* Home page course specific styles */ +/* Home page course */ .sitetopic .section-item { margin-bottom: 1.5rem; border-radius: 0.5rem; } -#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; -} - -/* Styles for the Move activity and Move section modals */ +/* Move activity and Move section modals */ .move-activity-tree .collapse-list-item { border-radius: 0.5rem; } @@ -29213,7 +29041,7 @@ table.calendartable caption { font-weight: bold; } -/* Subsection specific styles */ +/* Subsections */ .activity.subsection { border-top: none; } @@ -29256,6 +29084,142 @@ table.calendartable caption { visibility: hidden; } +/* Spinners */ +@keyframes editinprogress-rotation { + 0% { + opacity: 0; + transform: rotate(0deg); + } + 50% { + opacity: 1; + } + 100% { + opacity: 0; + transform: rotate(359deg); + } +} +.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; +} + +/* Old indentation styles */ +.mod-indent-outer { + display: table; +} + +.mod-indent { + display: table-cell; +} + +.label .mod-indent { + float: left; + padding-top: 20px; +} + +.activity.label.modtype_label .mod-indent { + float: none; +} + +@media (min-width: 576px) { + /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */ + .mod-indent-1 { + width: 30px; + } + .mod-indent-2 { + width: 60px; + } + .mod-indent-3 { + width: 90px; + } + .mod-indent-4 { + width: 120px; + } + .mod-indent-5 { + width: 150px; + } + .mod-indent-6 { + width: 180px; + } + .mod-indent-7 { + width: 210px; + } + .mod-indent-8 { + width: 240px; + } + .mod-indent-9 { + width: 270px; + } + .mod-indent-10 { + width: 300px; + } + .mod-indent-11 { + width: 330px; + } + .mod-indent-12 { + width: 360px; + } + .mod-indent-13 { + width: 390px; + } + .mod-indent-14 { + width: 420px; + } + .mod-indent-15 { + width: 450px; + } + .mod-indent-16 { + width: 480px; + } + .mod-indent-huge { + width: 480px; + } +} /* * Course management page styles. */ @@ -38949,6 +38913,25 @@ body.behat-site .path-course-view li.activity form.togglecompletion::before, max-width: none; /* The width is 0 so ensure we don't end up with a relative max-width */ } +.course-content .stateready .section .spinner { + /* stylelint-disable declaration-no-important */ + /* stylelint-enable */ + display: none; +} +body.behat-site .course-content .stateready .section .spinner, +.course-content .stateready .section .spinner body.behat-site.course-content .stateready .section .spinner, body.themedesignermode .course-content .stateready .section .spinner, +.course-content .stateready .section .spinner body.themedesignermode.course-content .stateready .section .spinner { + outline: 3px dotted #ca3120 !important; + background-color: #fceeed !important; +} +body.behat-site .course-content .stateready .section .spinner::before, +.course-content .stateready .section .spinner body.behat-site.course-content .stateready .section .spinner::before, body.themedesignermode .course-content .stateready .section .spinner::before, +.course-content .stateready .section .spinner body.themedesignermode.course-content .stateready .section .spinner::before { + content: "Deprecated style in use" !important; + color: #ca3120 !important; + font-size: smaller !important; +} + body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css index e7a6a7dc3eb8f..9fae01241aefd 100644 --- a/theme/classic/style/moodle.css +++ b/theme/classic/style/moodle.css @@ -23229,18 +23229,6 @@ button.btn-close:focus:hover, padding: 0; } -.section li.movehere a { - display: block; - width: 100%; - height: 2rem; - border: 2px dashed #343a40; -} - -.editing .course-content .hidden.sectionname { - visibility: hidden; - display: initial; -} - .inline, .inline-list li { display: inline; @@ -24074,77 +24062,6 @@ tr.flagged-tag a { left: 50%; } -.mod-indent-outer { - display: table; -} - -.mod-indent { - display: table-cell; -} - -.label .mod-indent { - float: left; - padding-top: 20px; -} - -.activity.label.modtype_label .mod-indent { - float: none; -} - -@media (min-width: 576px) { - /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */ - .mod-indent-1 { - width: 30px; - } - .mod-indent-2 { - width: 60px; - } - .mod-indent-3 { - width: 90px; - } - .mod-indent-4 { - width: 120px; - } - .mod-indent-5 { - width: 150px; - } - .mod-indent-6 { - width: 180px; - } - .mod-indent-7 { - width: 210px; - } - .mod-indent-8 { - width: 240px; - } - .mod-indent-9 { - width: 270px; - } - .mod-indent-10 { - width: 300px; - } - .mod-indent-11 { - width: 330px; - } - .mod-indent-12 { - width: 360px; - } - .mod-indent-13 { - width: 390px; - } - .mod-indent-14 { - width: 420px; - } - .mod-indent-15 { - width: 450px; - } - .mod-indent-16 { - width: 480px; - } - .mod-indent-huge { - width: 480px; - } -} /* Audio player size in 'block' mode (can only change width, height is hardcoded in JS) */ .resourcecontent .mediaplugin_mp3 object { height: 25px; @@ -25132,10 +25049,6 @@ dd:after { display: block; } -h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions { - margin-top: -20px; -} - /** Chart area. */ @media (min-width: 992px) { .chart-area .chart-image { @@ -28137,90 +28050,25 @@ table.calendartable caption { /* * Course page styles. */ -/* Spinners */ -.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; +/* Course content */ +.course-content ul.section-list { + padding: 0; + margin: 0; } -@keyframes editinprogress-rotation { - 0% { - opacity: 0; - transform: rotate(0deg); - } - 50% { - opacity: 1; - } - 100% { - opacity: 0; - transform: rotate(359deg); - } -} -/* 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-content .section-item ul, +.course-content .section-item .activity-item ul { + list-style: disc; } - -/* Highlight current section */ -.course-content .current { - position: relative; +.course-content .section-item ul ul, +.course-content .section-item .activity-item ul ul { + list-style: circle; } - -.course-content .current::before { - border-left: #0f6cbf 3px solid; - bottom: 0; - content: ""; - left: -8px; - position: absolute; - top: 0; +.course-content .section-item ul ul ul, +.course-content .section-item .activity-item ul ul ul { + list-style: square; } -/* Variables definition*/ -/* Functions/Mixins definition */ -/* Section Expand all/Collapse all */ .section-collapsemenu .collapseall { display: block; } @@ -28234,12 +28082,27 @@ table.calendartable caption { display: block; } -/* Course content */ -.course-content ul.section-list { - padding: 0; +.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; } -/* Course section */ +/* Sections */ .course-section { list-style: none; margin-top: 1rem; @@ -28255,6 +28118,17 @@ table.calendartable caption { .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; } @@ -28322,59 +28196,14 @@ table.calendartable caption { 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; -} - -.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; -} - -/* Re-style ordered list in course content */ -.course-content .section-item ul, -.course-content .section-item .activity-item ul { - list-style: disc; -} -.course-content .section-item ul ul, -.course-content .section-item .activity-item ul ul { - list-style: circle; -} -.course-content .section-item ul ul ul, -.course-content .section-item .activity-item ul ul ul { - list-style: square; +.section li.movehere a { + display: block; + width: 100%; + height: 2rem; + border: 2px dashed #343a40; } -/* Activity cards */ +/* Activities */ .activity { list-style: none; padding-top: 0.25rem; @@ -29010,47 +28839,47 @@ table.calendartable caption { } /* 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; } @@ -29065,7 +28894,7 @@ table.calendartable caption { display: none; } -.btn.add-content { +.course-content .divider .btn.add-content { position: relative; z-index: 1; border-radius: 0.25rem; @@ -29074,23 +28903,23 @@ table.calendartable caption { 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; @@ -29154,7 +28983,20 @@ table.calendartable caption { } } -/* 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; +} + +/* Default activity completion page */ .defaultactivitycompletion-item a { color: #000; text-decoration: none; @@ -29164,27 +29006,13 @@ table.calendartable caption { height: 32px; } -/* Home page course specific styles */ +/* Home page course */ .sitetopic .section-item { margin-bottom: 1.5rem; border-radius: 0.25rem; } -#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; -} - -/* Styles for the Move activity and Move section modals */ +/* Move activity and Move section modals */ .move-activity-tree .collapse-list-item { border-radius: 0.25rem; } @@ -29213,7 +29041,7 @@ table.calendartable caption { font-weight: bold; } -/* Subsection specific styles */ +/* Subsections */ .activity.subsection { border-top: none; } @@ -29256,6 +29084,142 @@ table.calendartable caption { visibility: hidden; } +/* Spinners */ +@keyframes editinprogress-rotation { + 0% { + opacity: 0; + transform: rotate(0deg); + } + 50% { + opacity: 1; + } + 100% { + opacity: 0; + transform: rotate(359deg); + } +} +.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; +} + +/* Old indentation styles */ +.mod-indent-outer { + display: table; +} + +.mod-indent { + display: table-cell; +} + +.label .mod-indent { + float: left; + padding-top: 20px; +} + +.activity.label.modtype_label .mod-indent { + float: none; +} + +@media (min-width: 576px) { + /* Creates a series of .mod-indent-# rule declarations based on indent size and number of indent levels. */ + .mod-indent-1 { + width: 30px; + } + .mod-indent-2 { + width: 60px; + } + .mod-indent-3 { + width: 90px; + } + .mod-indent-4 { + width: 120px; + } + .mod-indent-5 { + width: 150px; + } + .mod-indent-6 { + width: 180px; + } + .mod-indent-7 { + width: 210px; + } + .mod-indent-8 { + width: 240px; + } + .mod-indent-9 { + width: 270px; + } + .mod-indent-10 { + width: 300px; + } + .mod-indent-11 { + width: 330px; + } + .mod-indent-12 { + width: 360px; + } + .mod-indent-13 { + width: 390px; + } + .mod-indent-14 { + width: 420px; + } + .mod-indent-15 { + width: 450px; + } + .mod-indent-16 { + width: 480px; + } + .mod-indent-huge { + width: 480px; + } +} /* * Course management page styles. */ @@ -38883,6 +38847,25 @@ body.behat-site .path-course-view li.activity form.togglecompletion::before, max-width: none; /* The width is 0 so ensure we don't end up with a relative max-width */ } +.course-content .stateready .section .spinner { + /* stylelint-disable declaration-no-important */ + /* stylelint-enable */ + display: none; +} +body.behat-site .course-content .stateready .section .spinner, +.course-content .stateready .section .spinner body.behat-site.course-content .stateready .section .spinner, body.themedesignermode .course-content .stateready .section .spinner, +.course-content .stateready .section .spinner body.themedesignermode.course-content .stateready .section .spinner { + outline: 3px dotted #ca3120 !important; + background-color: #fceeed !important; +} +body.behat-site .course-content .stateready .section .spinner::before, +.course-content .stateready .section .spinner body.behat-site.course-content .stateready .section .spinner::before, body.themedesignermode .course-content .stateready .section .spinner::before, +.course-content .stateready .section .spinner body.themedesignermode.course-content .stateready .section .spinner::before { + content: "Deprecated style in use" !important; + color: #ca3120 !important; + font-size: smaller !important; +} + body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;