CIT/Vmeda.Online
3
0
Fork 1
forked from EVOgeek/Vmeda.Online
Code Pull Requests Activity

MOBILE-3651 quiz: Support dark theme

Browse Source
This commit is contained in:
Dani Palou 2021-02-24 11:33:55 +01:00
parent 6ae95070d2
commit 7d00aefdd9
5 changed files with 34 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/addons/mod/quiz/components/index/index.scss
View File

@ -11,10 +11,7 @@
}
.item:nth-child(even) {
--background: var(--gray-lighter);
// @include darkmode() {
// background-color: $core-dark-item-divider-bg-color;
// }
--background: var(--light);
}
.addon-mod_quiz-highlighted,
@ -24,21 +21,17 @@
--background: var(--blue-light);
color: var(--blue-dark);
}
// @include darkmode() {
// .addon-mod_quiz-highlighted,
// .item.addon-mod_quiz-highlighted,
// .addon-mod_quiz-highlighted p,
// .item.addon-mod_quiz-highlighted p {
// background-color: $blue-dark;
// color: $blue-light;
// }
// .item.addon-mod_quiz-highlighted.activated,
// .item.addon-mod_quiz-highlighted.activated p {
// background-color: $blue;
// color: $blue-light;
// }
// }
}
}
:host-context(body.dark) {
.addon-mod_quiz-table {
.addon-mod_quiz-highlighted,
.item.addon-mod_quiz-highlighted,
.addon-mod_quiz-highlighted p,
.item.addon-mod_quiz-highlighted p {
--background: var(--blue-dark);
color: var(--blue-light);
}
}
}

10
src/addons/qtype/ddwtos/component/ddwtos.scss
View File

@ -76,16 +76,10 @@
}
span.incorrect {
background-color: var(--red-light);
// @include darkmode() {
// background-color: $red-dark;
// }
background-color: var(--core-question-incorrect-color-bg);
}
span.correct {
background-color: var(--green-light);
// @include darkmode() {
// background-color: $green-dark;
// }
background-color: var(--core-question-correct-color-bg);
}
@for $i from 0 to length($core-dd-question-colors) {

5
src/addons/qtype/gapselect/component/gapselect.scss
View File

@ -14,10 +14,5 @@
-moz-border-radius: 4px;
border-radius: 4px;
margin-bottom: 10px;
background: var(--gray-lighter);
// @include darkmode() {
// background: $gray-dark;
// }
}
}

21
src/core/features/question/question.scss
View File

@ -1,27 +1,6 @@
@import "~theme/globals";
$core-dd-question-colors: $white, $blue-light, #DCDCDC, #D8BFD8, #87CEFA, #DAA520, #FFD700, #F0E68C !default;
:host ::ng-deep {
--core-question-correct-color: var(--green-dark);
--core-question-correct-color-bg: var(--green-light);
--core-question-incorrect-color: var(--red);
--core-question-incorrect-color-bg: var(--red-light);
--core-question-feedback-color: var(--yellow-dark);
--core-question-feedback-color-bg: var(--yellow-light);
--core-question-warning-color: var(--red);
--core-question-saved-color-bg: var(--gray-light);
--core-question-state-correct-color: var(--green-light);
--core-question-state-partial-color: var(--yellow-light);
--core-question-state-partial-text: var(--yellow);
--core-question-state-incorrect-color: var(--red-light);
--core-question-feedback-color: var(--yellow-dark);
--core-question-feedback-background-color: var(--yellow-light);
--core-dd-question-selected-shadow: 2px 2px 4px var(--gray-dark);
.core-question-answer-correct {
color: var(--core-question-correct-color);
}

19
src/theme/theme.dark.scss
View File

@ -74,4 +74,23 @@
--core-login-background: var(--custom-login-background, #3a3a3a);
--core-login-text-color: var(--custom-login-text-color, white);
--core-question-correct-color: var(--green-light);
--core-question-correct-color-bg: var(--green-dark);
--core-question-incorrect-color: var(--red);
--core-question-incorrect-color-bg: var(--red-dark);
--core-question-feedback-color: var(--yellow-light);
--core-question-feedback-color-bg: var(--yellow-dark);
--core-question-warning-color: var(--red);
--core-question-saved-color-bg: var(--gray-dark);
--core-question-state-correct-color: var(--green-dark);
--core-question-state-partial-color: var(--yellow-dark);
--core-question-state-partial-text: var(--yellow);
--core-question-state-incorrect-color: var(--red-dark);
--core-question-feedback-color: var(--yellow-light);
--core-question-feedback-background-color: var(--yellow-dark);
--core-dd-question-selected-shadow: 2px 2px 4px var(--gray-light);
}