From aa7259e525d1829e0a6d4c5d6fa128ab0132b31d Mon Sep 17 00:00:00 2001 From: Alexander Bias <alexander.bias@uni-ulm.de> Date: Sat, 28 Nov 2020 22:59:17 +0100 Subject: [PATCH] Adjusted SCSS brand color and gray color variables after the BS4Alpha compatibility layer has been removed in theme Boost core. --- CHANGES.md | 3 +++ scss/post.scss | 48 ++++++++++++++++++++++++------------------------ settings.php | 10 +++++----- 3 files changed, 32 insertions(+), 29 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 844ec0f..39bf50f 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -6,6 +6,9 @@ Changes ### Unreleased +* 2020-11-28 - Adjusted SCSS brand color and gray color variables after the BS4Alpha compatibility layer has been removed in theme Boost core. + PLEASE NOTE: If you have used $brand-* or $gray-* variables in your RAW SCSS as we did in Boost Campus up to now, you might have to adapt your SCSS code now as well. + See https://github.com/moodle/moodle/blob/MOODLE_38_STABLE/theme/boost/scss/moodle/bs4alphacompat.scss#L29-L43 for the compatibility variable assignments which have vanished. * 2020-11-28 - Adjusted navbar.mustache due to upstream changes in theme Boost core. * 2020-11-28 - Prepare compatibility for Moodle 3.10. * 2020-11-18 - Change in Moodle release support: diff --git a/scss/post.scss b/scss/post.scss index 68d75c0..e3885bb 100644 --- a/scss/post.scss +++ b/scss/post.scss @@ -271,7 +271,7 @@ body.loginbackgroundimage #page { .usertext:hover, .dropdown-toggle:hover, .site-name:hover { - color: $brand-primary; + color: $primary; } .navbar-brand:not(.has-logo) .site-name:hover { color: #fff; @@ -451,10 +451,10 @@ body.loginbackgroundimage #page { ul.topics, ul.weeks, ul.periods { - /* Set section dividing border-color to brand-primary. */ + /* Set section dividing border-color to primary brand color. */ li.section.main { border: none; - border-bottom: 1px solid $brand-primary; + border-bottom: 1px solid $primary; padding-top: 3rem; padding-bottom: 2rem; margin: 0; @@ -474,9 +474,9 @@ body.loginbackgroundimage #page { } /* Change style of highlighted section to highlight more. */ li.section.main.current { - border-bottom: $brand-primary 4px solid; - border-top: $brand-primary 3px solid; /*1px less because of section dividing border. */ - background: $gray-lightest; + border-bottom: $primary 4px solid; + border-top: $primary 3px solid; /*1px less because of section dividing border. */ + background: $gray-100; } /* Remove highlighting from Theme Boost. */ li.section.main.current::before { @@ -501,14 +501,14 @@ body.loginbackgroundimage #page { } /* Add border to description text to differ it from module content. */ .section .contentafterlink { - border-left: 2px solid $gray-light; + border-left: 2px solid $gray-600; padding-left: 10px; font-size: .9rem; } /* Add border to description text for restricted activities and show it also to students. This is needed because the classes for teachers and students differ. */ .section li:not(.label) .contentwithoutlink:not(:empty) { - border-left: 2px solid $gray-light; + border-left: 2px solid $gray-600; padding-left: 10px; font-size: .9rem; display: block; @@ -541,7 +541,7 @@ body.loginbackgroundimage #page { } .section-navigation .mdl-left:not(:empty), .section-navigation .mdl-right:not(:empty) { - background-color: $brand-primary; + background-color: $primary; padding: 2px 8px; border-radius: 2px; a { @@ -558,7 +558,7 @@ body.loginbackgroundimage #page { ul.periods { /* Add bottom border to last section in editing mode. */ li.section.main:last-child { - border-bottom: 1px solid $brand-primary; + border-bottom: 1px solid $primary; } /* Special rule for hidden sections in editing mode as indents are different in this view. */ li.section.main.hidden { @@ -580,9 +580,9 @@ body.loginbackgroundimage #page { */ /* Add a decent background to intro text */ #intro { - background-color: $gray-lightest; + background-color: $gray-100; margin-bottom: 1em; - border-left: 3px solid $brand-primary; + border-left: 3px solid $primary; padding-left: 15px; padding-right: 15px; } @@ -593,7 +593,7 @@ body.loginbackgroundimage #page { /* Adjust the activity navigation buttons to suit to the topics navigation buttons. */ #next-activity-link, #prev-activity-link { - background-color: $brand-primary; + background-color: $primary; padding: 4px 8px; border-radius: 2px; color: #fff; @@ -756,11 +756,11 @@ blockquote::before { /* Set footer blocks text color from white to dark gray. */ .block { - color: $gray-dark; + color: $gray-900; /* Set link and icon color from white to gray. */ a, .icon { - color: $gray-dark; + color: $gray-900; } /* Remove the underline decoration from footer blocks context menu items.*/ .dropdown-item.menu-action { @@ -854,7 +854,7 @@ blockquote::before { /* Mark broken links with red color. */ a[href*="/brokenfile.php"] { - color: $brand-danger; + color: $danger; } /* Add Font Awesome "broken chain" icon in front of broken link. */ @@ -939,7 +939,7 @@ a[href^="mailto"]::before { right: 0.5em; line-height: 1.7rem; color: #fff; - background-color: $brand-primary; + background-color: $primary; border-radius: 100px; cursor: pointer; box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3); @@ -992,7 +992,7 @@ a[href^="mailto"]::before { } /* We have to add a border for the users who do not have a switch role menu item due to their capabilities. */ .dropdown-menu.dropdown-menu-right a:last-child { - border-bottom: 1px solid $gray-lighter; + border-bottom: 1px solid $gray-300; } .dropdown-menu-right div:last-of-type { margin-bottom: 0; @@ -1103,31 +1103,31 @@ a[href^="mailto"]::before { } .video-js { .vjs-big-play-button { - background-color: $brand-primary; + background-color: $primary; border-radius: 2px; } &:hover .vjs-big-play-button { - background-color: $brand-primary; + background-color: $primary; } .vjs-big-play-button { &:focus, &:active { - background-color: $gray-dark; + background-color: $gray-900; } } .vjs-loading-spinner { - border-color: $brand-primary; + border-color: $primary; } .vjs-control-bar2 { background-color: transparent; } .vjs-control-bar { - background-color: $gray-dark !important; + background-color: $gray-900 !important; color: #fff; } .vjs-play-progress, .vjs-volume-level { - background-color: $brand-primary; + background-color: $primary; } .vjs-big-play-button { border-width: 2px; diff --git a/settings.php b/settings.php index d08399d..c41f1a2 100644 --- a/settings.php +++ b/settings.php @@ -96,7 +96,7 @@ if ($ADMIN->fulltree) { $setting = new admin_setting_heading($name, $title, null); $page->add($setting); - // Variable $brand-color. + // Variable $primary. // We use an empty default value because the default colour should come from the preset. $name = 'theme_boost_campus/brandcolor'; $title = get_string('brandcolor', 'theme_boost', null, true); @@ -105,7 +105,7 @@ if ($ADMIN->fulltree) { $setting->set_updatedcallback('theme_reset_all_caches'); $page->add($setting); - // Variable $brand-succes-color. + // Variable $success. $name = 'theme_boost_campus/brandsuccesscolor'; $title = get_string('brandsuccesscolorsetting', 'theme_boost_campus', null, true); $description = get_string('brandsuccesscolorsetting_desc', 'theme_boost_campus', null, true); @@ -113,7 +113,7 @@ if ($ADMIN->fulltree) { $setting->set_updatedcallback('theme_reset_all_caches'); $page->add($setting); - // Variable $brand-info-color. + // Variable $info. $name = 'theme_boost_campus/brandinfocolor'; $title = get_string('brandinfocolorsetting', 'theme_boost_campus', null, true); $description = get_string('brandinfocolorsetting_desc', 'theme_boost_campus', null, true); @@ -121,7 +121,7 @@ if ($ADMIN->fulltree) { $setting->set_updatedcallback('theme_reset_all_caches'); $page->add($setting); - // Variable $brand-warning-color. + // Variable $warning. $name = 'theme_boost_campus/brandwarningcolor'; $title = get_string('brandwarningcolorsetting', 'theme_boost_campus', null, true); $description = get_string('brandwarningcolorsetting_desc', 'theme_boost_campus', null, true); @@ -129,7 +129,7 @@ if ($ADMIN->fulltree) { $setting->set_updatedcallback('theme_reset_all_caches'); $page->add($setting); - // Variable $brand-warning-color. + // Variable $danger. $name = 'theme_boost_campus/branddangercolor'; $title = get_string('branddangercolorsetting', 'theme_boost_campus', null, true); $description = get_string('branddangercolorsetting_desc', 'theme_boost_campus', null, true); -- GitLab