theme quiz final page

scout-ch · Oct 18, 2023 · c6c5458 · c6c5458
1 parent c3d3bf9
commit c6c5458
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 23 deletions.
diff --git a/src/styles/quiz.scss b/src/styles/quiz.scss
@@ -1,14 +1,23 @@
+@import './utilities.scss';
+
 .quiz-container {
   display: block;
-  // border: 0.5px solid var(--color-primary-light);
-  box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
-  padding: 10px 15px 10px 15px;
-  margin: 10px 15px 10px 15px;
-  border-radius: 1rem;
-  font-family: unset !important;
+  padding: 10px;
+  @include default-style;
 }
 
 .react-quiz-container {
+  margin: unset;
+  font-family: unset;
+  font-weight: unset;
+  font-size: var(--body-font-size, 14px);
+  width: unset !important;
+  max-width: fit-content;
+
+  .questionWrapperBody > :nth-child(2) {
+    @include default-color();
+  }
+
   //  * {all: unset !important;}
   h2 {
     color: var(--color-primary-light);
@@ -25,34 +34,26 @@
 
 
   .btn {
+    font-weight: unset !important;
+    font-size: unset !important;
     border-color: var(--borderColor-muted, var(--color-border-muted)) !important;
     border-radius: 6px !important;
     margin-right: 0.5em;
     margin-left: 0.5em;
-    &:not(:disabled):not(.incorrect):hover {
-      filter: brightness(105%);
-      opacity: 0.9;
-    }
-    &:not(:disabled):active {
-      filter: brightness(105%);
-      opacity: 0.8;
-    }
     &:disabled {
-      // color: var(--fgColor-default, var(--color-fg-default)) !important;
-      // background-color: var(--bgColor-default, var(--color-bg-default))  !important;
       cursor: not-allowed;
       opacity: 0.6;
     }
     img {
       max-width: 250px;
     }
     &:not(.incorrect):not(.correct) {
-      color: var(--fgColor-default, var(--color-fg-default)) !important;
+      @include default-color();
       background-color: var(--bgColor-default, var(--color-bg-default))  !important;
     }
   }
   .startQuizBtn {
-    color: var(--fgColor-default, var(--color-fg-default)) !important;
+    @include default-color();
     background-color: var(--bgColor-default, var(--color-bg-default))  !important;
   }
 
@@ -63,14 +64,31 @@
     }
   }
 
-  .result-answer-wrapper,.explanation {
-    border-radius: 0.5rem;
-  }
-
+
   .incorrect {
     cursor: not-allowed !important;
     pointer-events: none;
     opacity: 0.6;
   }
-
+
+  .quiz-result-filter {
+    @include default-style();
+    & * {
+      border: none !important;
+    }
+  }
+
+  .result-answer-wrapper {
+    @include default-style;
+    h3 {
+      @include default-color;
+    }
+    .explanation {
+      border-radius: 6px;
+    }
+    *:disabled {
+      opacity: 1;
+    }
+  }
+
 }
diff --git a/src/styles/utilities.scss b/src/styles/utilities.scss
@@ -148,4 +148,19 @@ input[type="week"],
 select:focus,
 textarea {
   font-size: 16px;
+}
+
+/* for theme aware color overrides */
+@mixin default-color {
+  color: var(--fgColor-default, var(--color-fg-default)) !important;
+  background-color: var(--bgColor-default, var(--color-bg-default)) !important;
+}
+@mixin default-border {
+  border: var(--borderWidth-thin, 1px) solid var(--borderColor-default, var(--color-border-default)) !important;
+  border-radius: 6px;
+}
+
+@mixin default-style {
+  @include default-color();
+  @include default-border();
 }