MOBILE-3651 quiz: Support dark theme
parent
6ae95070d2
commit
7d00aefdd9
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -14,10 +14,5 @@
|
|||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
background: var(--gray-lighter);
|
||||
|
||||
// @include darkmode() {
|
||||
// background: $gray-dark;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue