moodle/moodle
3
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-08-05 00:46:50 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

MDL-69392 theme_boost: Improve question colour contrast

Browse source 
* 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.
This commit is contained in:
Jun Pataleta 2020-08-27 22:54:48 +08:00
parent 0cdfaccd4e
commit 0ce40927cf
3 changed files with 25 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

10
theme/boost/scss/moodle/question.scss
View file

@ -245,7 +245,7 @@ body.path-question-type {
width: 7em;
padding: 0.5em;
margin-bottom: 1.8em;
background-color: $gray-300;
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 {
@include alert-variant(theme-color-level('warning', $alert-bg-level), theme-color-level('warning', $alert-border-level), theme-color-level('warning', $alert-color-level)); /* stylelint-disable-line max-line-length */
@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 {
@include alert-variant(theme-color-level('info', $alert-bg-level), theme-color-level('info', $alert-border-level), theme-color-level('info', $alert-color-level)); /* stylelint-disable-line max-line-length */
@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,

15
theme/boost/style/moodle.css
View file

@ -15637,7 +15637,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 {
@ -15674,7 +15674,7 @@ body.path-question-type {
.que .outcome,
.que .comment {
color: #7d5a29;
color: #8e662e;
background-color: #fcefdc;
border-color: #fbe8cd;
/* stylelint-disable-line max-line-length */ }
@ -15683,17 +15683,20 @@ body.path-question-type {
border-top-color: #f9ddb5; }
.que .outcome .alert-link,
.que .comment .alert-link {
color: #573e1c; }
color: #674a22; }
.que .outcome a,
.que .comment a {
color: #041f37; }
.que .formulation {
color: #00434e;
background-color: #cce6ea;
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: #00171b; }
color: black; }
.que.multichoice .answer div.r0 .icon.fa-check,
.que.multichoice .answer div.r1 .icon.fa-check,

15
theme/classic/style/moodle.css
View file

@ -15856,7 +15856,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; }
@ -15895,7 +15895,7 @@ body.path-question-type {
.que .outcome,
.que .comment {
color: #7d5a29;
color: #8e662e;
background-color: #fcefdc;
border-color: #fbe8cd;
/* stylelint-disable-line max-line-length */ }
@ -15904,17 +15904,20 @@ body.path-question-type {
border-top-color: #f9ddb5; }
.que .outcome .alert-link,
.que .comment .alert-link {
color: #573e1c; }
color: #674a22; }
.que .outcome a,
.que .comment a {
color: #041f37; }
.que .formulation {
color: #00434e;
background-color: #cce6ea;
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: #00171b; }
color: black; }
.que.multichoice .answer div.r0 .icon.fa-check,
.que.multichoice .answer div.r1 .icon.fa-check,