MOBILE-3651 quiz: Support dark theme
parent
6ae95070d2
commit
7d00aefdd9
|
@ -11,10 +11,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.item:nth-child(even) {
|
.item:nth-child(even) {
|
||||||
--background: var(--gray-lighter);
|
--background: var(--light);
|
||||||
// @include darkmode() {
|
|
||||||
// background-color: $core-dark-item-divider-bg-color;
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.addon-mod_quiz-highlighted,
|
.addon-mod_quiz-highlighted,
|
||||||
|
@ -24,21 +21,17 @@
|
||||||
--background: var(--blue-light);
|
--background: var(--blue-light);
|
||||||
color: var(--blue-dark);
|
color: var(--blue-dark);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
// @include darkmode() {
|
}
|
||||||
// .addon-mod_quiz-highlighted,
|
|
||||||
// .item.addon-mod_quiz-highlighted,
|
:host-context(body.dark) {
|
||||||
// .addon-mod_quiz-highlighted p,
|
.addon-mod_quiz-table {
|
||||||
// .item.addon-mod_quiz-highlighted p {
|
.addon-mod_quiz-highlighted,
|
||||||
// background-color: $blue-dark;
|
.item.addon-mod_quiz-highlighted,
|
||||||
// color: $blue-light;
|
.addon-mod_quiz-highlighted p,
|
||||||
// }
|
.item.addon-mod_quiz-highlighted p {
|
||||||
|
--background: var(--blue-dark);
|
||||||
// .item.addon-mod_quiz-highlighted.activated,
|
color: var(--blue-light);
|
||||||
// .item.addon-mod_quiz-highlighted.activated p {
|
}
|
||||||
// background-color: $blue;
|
|
||||||
// color: $blue-light;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -76,16 +76,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
span.incorrect {
|
span.incorrect {
|
||||||
background-color: var(--red-light);
|
background-color: var(--core-question-incorrect-color-bg);
|
||||||
// @include darkmode() {
|
|
||||||
// background-color: $red-dark;
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
span.correct {
|
span.correct {
|
||||||
background-color: var(--green-light);
|
background-color: var(--core-question-correct-color-bg);
|
||||||
// @include darkmode() {
|
|
||||||
// background-color: $green-dark;
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@for $i from 0 to length($core-dd-question-colors) {
|
@for $i from 0 to length($core-dd-question-colors) {
|
||||||
|
|
|
@ -14,10 +14,5 @@
|
||||||
-moz-border-radius: 4px;
|
-moz-border-radius: 4px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
background: var(--gray-lighter);
|
|
||||||
|
|
||||||
// @include darkmode() {
|
|
||||||
// background: $gray-dark;
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,27 +1,6 @@
|
||||||
@import "~theme/globals";
|
@import "~theme/globals";
|
||||||
|
|
||||||
$core-dd-question-colors: $white, $blue-light, #DCDCDC, #D8BFD8, #87CEFA, #DAA520, #FFD700, #F0E68C !default;
|
|
||||||
|
|
||||||
:host ::ng-deep {
|
: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 {
|
.core-question-answer-correct {
|
||||||
color: var(--core-question-correct-color);
|
color: var(--core-question-correct-color);
|
||||||
}
|
}
|
||||||
|
|
|
@ -74,4 +74,23 @@
|
||||||
|
|
||||||
--core-login-background: var(--custom-login-background, #3a3a3a);
|
--core-login-background: var(--custom-login-background, #3a3a3a);
|
||||||
--core-login-text-color: var(--custom-login-text-color, white);
|
--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);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue