Adjust some styling on top of #83 (#85)

* Add color mode switcher * Add darkmode to syntax highlighter * yarn build * cleanup + minor fixes * Remove merge leftover --------- Co-authored-by: Alexandre Iooss <erdnaxe@crans.org> Co-authored-by: Kevin Chung <kchung@ctfd.io>
CTFd · Jun 18, 2024 · 77f664b · 77f664b
1 parent dfc0d1c
commit 77f664b
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 63 deletions.
diff --git a/assets/scss/includes/components/_challenge.scss b/assets/scss/includes/components/_challenge.scss
@@ -9,12 +9,32 @@
   }
 }
 
-.challenge-button {
-  box-shadow: 3px 3px 3px var(--bs-secondary);
+[data-bs-theme="light"] .challenge-button {
+  border: none;
+  box-shadow: 0 0 15px var(--bs-secondary);
+
+  &.challenge-solved {
+    background-color: #29c830;
+
+    &:hover {
+      background-color: #37d63e;
+    }
+  }
 }
 
-.challenge-solved {
-  background-color: #37d63e !important;
-  opacity: 0.6;
+[data-bs-theme="dark"] .challenge-button {
   border: none;
+  background-color: var(--bs-gray-dark);
+
+  &:hover {
+    background-color: var(--bs-gray);
+  }
+
+  &.challenge-solved {
+    background-color: #29c830;
+
+    &:hover {
+      background-color: #37d63e;
+    }
+  }
 }
diff --git a/assets/scss/includes/components/_jumbotron.scss b/assets/scss/includes/components/_jumbotron.scss
@@ -20,10 +20,3 @@ main {
     padding: 4rem 2rem;
   }
 }
-
-// @media (min-width: 768px) {
-//   .jumbotron {
-//     // I kind of like this, but it could be discussed
-//     clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
-//   }
-// }
diff --git a/assets/scss/includes/utils/_fonts.scss b/assets/scss/includes/utils/_fonts.scss
@@ -1,11 +1,3 @@
-/* Handle offline font loading */
-// $fa-font-path: "../../../node_modules/@fortawesome/fontawesome-free/webfonts" !default;
-// $fa-font-display: auto !default;
-// @import "../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
-// @import "../../../node_modules/@fortawesome/fontawesome-free/scss/regular.scss";
-// @import "../../../node_modules/@fortawesome/fontawesome-free/scss/solid.scss";
-// @import "../../../node_modules/@fortawesome/fontawesome-free/scss/brands.scss";
-
 @use "~/@fontsource/lato/scss/mixins" as Lato;
 @use "~/@fontsource/raleway/scss/mixins" as Raleway;
 
@@ -20,9 +12,6 @@ $fa-font-path: "../webfonts";
 @import "~/@fortawesome/fontawesome-free/scss/solid.scss";
 @import "~/@fortawesome/fontawesome-free/scss/brands.scss";
 
-// @import "~/@fontsource/lato/index.css";
-// @import "~/@fontsource/lato/index.css";
-
 html,
 body,
 .container {

diff --git a/assets/scss/includes/utils/_lolight.scss b/assets/scss/includes/utils/_lolight.scss
@@ -15,7 +15,7 @@
   color: #032f62;
 }
 .ll-pct {
-  /* operators, punctation */
+  /* operators, punctuation */
   color: #24292f;
 }
 .ll-key {

diff --git a/assets/scss/includes/utils/_min-height.scss b/assets/scss/includes/utils/_min-height.scss
@@ -1,15 +1,19 @@
 .min-vh-0 {
-  min-height: 0vh !important;
+  min-height: 0 !important;
 }
+
 .min-vh-25 {
   min-height: 25vh !important;
 }
+
 .min-vh-50 {
   min-height: 50vh !important;
 }
+
 .min-vh-75 {
   min-height: 75vh !important;
 }
+
 .min-vh-100 {
   min-height: 100vh !important;
 }
diff --git a/assets/scss/includes/utils/_opacity.scss b/assets/scss/includes/utils/_opacity.scss
@@ -1,15 +1,19 @@
 .opacity-0 {
   opacity: 0 !important;
 }
+
 .opacity-25 {
   opacity: 0.25 !important;
 }
+
 .opacity-50 {
   opacity: 0.5 !important;
 }
+
 .opacity-75 {
   opacity: 0.75 !important;
 }
+
 .opacity-100 {
   opacity: 1 !important;
 }
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
@@ -24,7 +24,6 @@ h2 {
 }
 
 a {
-  color: #337ab7;
   text-decoration: none !important;
 }
 
@@ -33,6 +32,13 @@ blockquote {
   padding-left: 15px;
 }
 
+input,
+select,
+button {
+  padding: 0.6rem !important;
+  height: auto !important;
+}
+
 .fa-spin.spinner {
   text-align: center;
   opacity: 0.5;
@@ -48,40 +54,3 @@ blockquote {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
   background-size: 8px 10px;
 }
-
-// HMM
-
-.input-filled-valid {
-  background-color: transparent !important;
-  border-color: #a3d39c;
-  box-shadow: 0 0 0 0.1rem #a3d39c;
-  transition:
-    background-color 0.3s,
-    border-color 0.3s;
-}
-
-.input-filled-invalid {
-  background-color: transparent !important;
-  border-color: #d46767;
-  box-shadow: 0 0 0 0.1rem #d46767;
-  transition:
-    background-color 0.3s,
-    border-color 0.3s;
-}
-
-.form-control {
-  padding: 0.8em !important;
-  background: #f0f0f0;
-  color: #aaa;
-  /* Behavior changed in Bootstrap v4.1.3. See https://github.com/twbs/bootstrap/issues/27629 */
-  height: auto !important;
-}
-
-.form-control:focus {
-  background-color: transparent;
-  border-color: #a3d39c;
-  box-shadow: 0 0 0 0.1rem #a3d39c;
-  transition:
-    background-color 0.3s,
-    border-color 0.3s;
-}