MDL-69392 theme_boost: Improve question colour contrast

* Lighten info container. * Fix colour contrast for the question container by - Lightening the background a bit - Darkening the text colour a bit - Making sure the link colour has good colour contrast against the question text. * Fix colour contrast for the comments container by - Lightening the text colour a bit - Darkening the link colour a bit for better colour contrast against the feedback text.
moodle · Oct 21, 2020 · e3db7a4 · e3db7a4
1 parent 22e41d7
commit e3db7a4
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 26 deletions.
diff --git a/theme/boost/scss/moodle/question.scss b/theme/boost/scss/moodle/question.scss
@@ -249,8 +249,8 @@ body.path-question-type {
     width: 7em;
     padding: 0.5em;
     margin-bottom: 1.8em;
-    background-color: $gray-lighter;
-    border: 1px solid darken($gray-lighter, 7%);
+    background-color: $gray-100;
+    border: 1px solid darken($gray-300, 7%);
 
     @include border-radius(2px);
 }
@@ -292,11 +292,15 @@ body.path-question-type {
 }
 .que .outcome,
 .que .comment {
-    @extend .alert-warning;
+    @include alert-variant(theme-color-level('warning', $alert-bg-level), theme-color-level('warning', $alert-border-level), theme-color-level('warning', $alert-color-level - 0.9)); /* stylelint-disable-line max-line-length */
+    // Darken link colour inside comments for better colour contrast against regular text.
+    a {
+        color: darken($link-color, 30%);
+    }
 }
 
 .que .formulation {
-    @extend .alert-info;
+    @include alert-variant(theme-color-level('info', $alert-bg-level - 1.30), theme-color-level('info', $alert-border-level), theme-color-level('info', $alert-color-level + 4)); /* stylelint-disable-line max-line-length */
 }
 
 .que.multichoice .answer div.r0 .icon.fa-check,

diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
@@ -5965,25 +5965,23 @@ p.arrow_button input[type="button"],
   .alert-success .alert-link, .que .comment .alert-link {
     color: #0c1b0b; }
 
-.alert-info, #page-admin-index .releasenoteslink, #adminsettings .form-overridden, .que .formulation, .assignfeedback_editpdf_widget .label {
+.alert-info, #page-admin-index .releasenoteslink, #adminsettings .form-overridden, .assignfeedback_editpdf_widget .label {
   color: #00434e;
   background-color: #cce6ea;
   border-color: #b8dce2; }
-  .alert-info hr, #page-admin-index .releasenoteslink hr, #adminsettings .form-overridden hr, .que .formulation hr, .assignfeedback_editpdf_widget .label hr {
+  .alert-info hr, #page-admin-index .releasenoteslink hr, #adminsettings .form-overridden hr, .assignfeedback_editpdf_widget .label hr {
     border-top-color: #a6d3db; }
-  .alert-info .alert-link, #page-admin-index .releasenoteslink .alert-link, #adminsettings .form-overridden .alert-link, .que .formulation .alert-link, .assignfeedback_editpdf_widget .label .alert-link {
+  .alert-info .alert-link, #page-admin-index .releasenoteslink .alert-link, #adminsettings .form-overridden .alert-link, .assignfeedback_editpdf_widget .label .alert-link {
     color: #00171b; }
 
 .alert-warning,
-#page-admin-index .adminwarning, .uninstalldeleteconfirmexternal,
-.que .outcome,
-.que .comment {
+#page-admin-index .adminwarning, .uninstalldeleteconfirmexternal {
   color: #7d5a29;
   background-color: #fcefdc;
   border-color: #fbe8cd; }
-  .alert-warning hr, #page-admin-index .adminwarning hr, .uninstalldeleteconfirmexternal hr, .que .outcome hr, .que .comment hr {
+  .alert-warning hr, #page-admin-index .adminwarning hr, .uninstalldeleteconfirmexternal hr {
     border-top-color: #f9ddb5; }
-  .alert-warning .alert-link, #page-admin-index .adminwarning .alert-link, .uninstalldeleteconfirmexternal .alert-link, .que .outcome .alert-link, .que .comment .alert-link {
+  .alert-warning .alert-link, #page-admin-index .adminwarning .alert-link, .uninstalldeleteconfirmexternal .alert-link {
     color: #573e1c; }
 
 .alert-danger,
@@ -11491,10 +11489,10 @@ body.h5p-embed .h5pmessages {
 .alert-success a, .que .comment a {
   color: #0c1b0b; }
 
-.alert-info a, #page-admin-index .releasenoteslink a, #adminsettings .form-overridden a, .que .formulation a, .assignfeedback_editpdf_widget .label a {
+.alert-info a, #page-admin-index .releasenoteslink a, #adminsettings .form-overridden a, .assignfeedback_editpdf_widget .label a {
   color: #00171b; }
 
-.alert-warning a, #page-admin-index .adminwarning a, .uninstalldeleteconfirmexternal a, .que .outcome a, .que .comment a {
+.alert-warning a, #page-admin-index .adminwarning a, .uninstalldeleteconfirmexternal a {
   color: #573e1c; }
 
 .alert-danger a, #page-admin-index .adminerror a {
@@ -15104,7 +15102,7 @@ body.path-question-type {
   width: 7em;
   padding: 0.5em;
   margin-bottom: 1.8em;
-  background-color: #dee2e6;
+  background-color: #f8f9fa;
   border: 1px solid #cad0d7; }
 
 .que h3.no {
@@ -15131,6 +15129,32 @@ body.path-question-type {
 .que .content {
   margin: 0 0 0 8.5em; }
 
+.que .outcome,
+.que .comment {
+  color: #8e662e;
+  background-color: #fcefdc;
+  border-color: #fbe8cd;
+  /* stylelint-disable-line max-line-length */ }
+  .que .outcome hr,
+  .que .comment hr {
+    border-top-color: #f9ddb5; }
+  .que .outcome .alert-link,
+  .que .comment .alert-link {
+    color: #674a22; }
+  .que .outcome a,
+  .que .comment a {
+    color: #041f37; }
+
+.que .formulation {
+  color: #001a1e;
+  background-color: #e7f3f5;
+  border-color: #b8dce2;
+  /* stylelint-disable-line max-line-length */ }
+  .que .formulation hr {
+    border-top-color: #a6d3db; }
+  .que .formulation .alert-link {
+    color: black; }
+
 .que.multichoice .answer div.r0 .icon.fa-check,
 .que.multichoice .answer div.r1 .icon.fa-check,
 .que.multichoice .answer div.r0 .icon.fa-remove,

diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
@@ -6145,25 +6145,23 @@ p.arrow_button input[type="button"],
   .alert-success .alert-link, .que .comment .alert-link {
     color: #0c1b0b; }
 
-.alert-info, #page-admin-index .releasenoteslink, #adminsettings .form-overridden, .que .formulation, .assignfeedback_editpdf_widget .label {
+.alert-info, #page-admin-index .releasenoteslink, #adminsettings .form-overridden, .assignfeedback_editpdf_widget .label {
   color: #00434e;
   background-color: #cce6ea;
   border-color: #b8dce2; }
-  .alert-info hr, #page-admin-index .releasenoteslink hr, #adminsettings .form-overridden hr, .que .formulation hr, .assignfeedback_editpdf_widget .label hr {
+  .alert-info hr, #page-admin-index .releasenoteslink hr, #adminsettings .form-overridden hr, .assignfeedback_editpdf_widget .label hr {
     border-top-color: #a6d3db; }
-  .alert-info .alert-link, #page-admin-index .releasenoteslink .alert-link, #adminsettings .form-overridden .alert-link, .que .formulation .alert-link, .assignfeedback_editpdf_widget .label .alert-link {
+  .alert-info .alert-link, #page-admin-index .releasenoteslink .alert-link, #adminsettings .form-overridden .alert-link, .assignfeedback_editpdf_widget .label .alert-link {
     color: #00171b; }
 
 .alert-warning,
-#page-admin-index .adminwarning, .uninstalldeleteconfirmexternal,
-.que .outcome,
-.que .comment {
+#page-admin-index .adminwarning, .uninstalldeleteconfirmexternal {
   color: #7d5a29;
   background-color: #fcefdc;
   border-color: #fbe8cd; }
-  .alert-warning hr, #page-admin-index .adminwarning hr, .uninstalldeleteconfirmexternal hr, .que .outcome hr, .que .comment hr {
+  .alert-warning hr, #page-admin-index .adminwarning hr, .uninstalldeleteconfirmexternal hr {
     border-top-color: #f9ddb5; }
-  .alert-warning .alert-link, #page-admin-index .adminwarning .alert-link, .uninstalldeleteconfirmexternal .alert-link, .que .outcome .alert-link, .que .comment .alert-link {
+  .alert-warning .alert-link, #page-admin-index .adminwarning .alert-link, .uninstalldeleteconfirmexternal .alert-link {
     color: #573e1c; }
 
 .alert-danger,
@@ -11731,10 +11729,10 @@ body.h5p-embed .h5pmessages {
 .alert-success a, .que .comment a {
   color: #0c1b0b; }
 
-.alert-info a, #page-admin-index .releasenoteslink a, #adminsettings .form-overridden a, .que .formulation a, .assignfeedback_editpdf_widget .label a {
+.alert-info a, #page-admin-index .releasenoteslink a, #adminsettings .form-overridden a, .assignfeedback_editpdf_widget .label a {
   color: #00171b; }
 
-.alert-warning a, #page-admin-index .adminwarning a, .uninstalldeleteconfirmexternal a, .que .outcome a, .que .comment a {
+.alert-warning a, #page-admin-index .adminwarning a, .uninstalldeleteconfirmexternal a {
   color: #573e1c; }
 
 .alert-danger a, #page-admin-index .adminerror a {
@@ -15350,7 +15348,7 @@ body.path-question-type {
   width: 7em;
   padding: 0.5em;
   margin-bottom: 1.8em;
-  background-color: #dee2e6;
+  background-color: #f8f9fa;
   border: 1px solid #cad0d7;
   border-radius: 2px; }
 
@@ -15378,6 +15376,32 @@ body.path-question-type {
 .que .content {
   margin: 0 0 0 8.5em; }
 
+.que .outcome,
+.que .comment {
+  color: #8e662e;
+  background-color: #fcefdc;
+  border-color: #fbe8cd;
+  /* stylelint-disable-line max-line-length */ }
+  .que .outcome hr,
+  .que .comment hr {
+    border-top-color: #f9ddb5; }
+  .que .outcome .alert-link,
+  .que .comment .alert-link {
+    color: #674a22; }
+  .que .outcome a,
+  .que .comment a {
+    color: #041f37; }
+
+.que .formulation {
+  color: #001a1e;
+  background-color: #e7f3f5;
+  border-color: #b8dce2;
+  /* stylelint-disable-line max-line-length */ }
+  .que .formulation hr {
+    border-top-color: #a6d3db; }
+  .que .formulation .alert-link {
+    color: black; }
+
 .que.multichoice .answer div.r0 .icon.fa-check,
 .que.multichoice .answer div.r1 .icon.fa-check,
 .que.multichoice .answer div.r0 .icon.fa-remove,