Dark mode support

SkyEye-FAST · Jul 13, 2024 · e16413c · e16413c
1 parent 5e0946d
commit e16413c
Show file tree

Hide file tree

Showing 14 changed files with 323 additions and 169 deletions.
diff --git a/static/css/dark-mode.css b/static/css/dark-mode.css
@@ -0,0 +1,29 @@
+body {
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+body.dark-mode {
+    background-color: #424242;
+    color: #e0e0e0;
+}
+
+.mode-toggle {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+}
+
+#mode-switch {
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+}
+
+#mode-icon {
+    font-size: 48px;
+    color: inherit;
+}
+
+.invert {
+    filter: invert(1);
+}
diff --git a/static/css/error.css b/static/css/error.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.font.im/css2?&family=Noto+Serif:[email protected]&display=swap');
+@import url("https://fonts.font.im/css2?&family=Noto+Serif:[email protected]&display=swap");
 
 body {
     background-color: #f9f2e0;
@@ -9,7 +9,7 @@ body {
     flex-direction: column;
     margin: 0;
     height: 100vh;
-    font-family: 'Noto Serif', 'Times New Roman', SimSun, Times, serif;
+    font-family: "Noto Serif", "Times New Roman", SimSun, Times, serif;
 }
 
 a {
@@ -39,7 +39,7 @@ a {
     line-height: inherit;
     vertical-align: middle;
     font-size: inherit;
-    transform: translateY(-.1em);
+    transform: translateY(-0.1em);
 }
 
 /* 响应式设计 */
@@ -55,4 +55,4 @@ a {
     .teahouse-logo {
         width: 20em;
     }
-}
+}
diff --git a/static/css/index.css b/static/css/index.css
@@ -1,12 +1,12 @@
-@import url('https://fonts.font.im/css2?family=Fira+Code&family=Noto+Serif+JP&family=Noto+Serif+KR&family=Noto+Serif:[email protected]&family=Noto+Serif+HK&family=Noto+Serif+SC:wght@400;600;700;900&family=Noto+Serif+TC:wght@300;400&display=swap');
+@import url("https://fonts.font.im/css2?family=Fira+Code&family=Noto+Serif+JP&family=Noto+Serif+KR&family=Noto+Serif:[email protected]&family=Noto+Serif+HK&family=Noto+Serif+SC:wght@400;600;700;900&family=Noto+Serif+TC:wght@300;400&display=swap");
 
 @font-face {
     font-display: swap;
-    font-family: '一点明体';
+    font-family: "一点明体";
     font-style: normal;
     font-weight: normal;
-    src: local('一点明体'),
-        url('../fonts/I.Ming-8.10.subset.woff2') format('woff2');
+    src: local("一点明体"),
+        url("../fonts/I.Ming-8.10.subset.woff2") format("woff2");
     /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 
@@ -18,7 +18,6 @@ body {
     flex-direction: column;
     align-items: center;
     gap: 1em;
-    transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 /* 链接样式 */
@@ -29,11 +28,6 @@ body {
     top: 15px;
 }
 
-body.dark-mode {
-    background-color: #2e2e2e;
-    color: #f9f2e0;
-}
-
 .github-icon {
     width: 48px;
     height: auto;
@@ -56,21 +50,27 @@ body.dark-mode {
     transition: color 0.3s ease;
 }
 
+.mode-toggle {
+    position: absolute;
+    top: 15px;
+    right: 75px;
+}
+
 .material-symbols-outlined.md-48 {
     position: absolute;
     font-size: 48px;
 }
 
 /* 标题样式 */
 .title {
-    font-family: 'Noto Serif', 'Times New Roman', SimSun, Times, serif;
+    font-family: "Noto Serif", "Times New Roman", SimSun, Times, serif;
     font-size: 2.5em;
     font-weight: 600;
     text-align: center;
 }
 
 .subtitle {
-    font-family: 'Fira Code', 'Source Code Pro', Consolas, Monaco, monospace;
+    font-family: "Fira Code", "Source Code Pro", Consolas, Monaco, monospace;
     font-size: 1.25em;
     text-align: center;
 }
@@ -83,7 +83,7 @@ table {
 table td,
 table th {
     text-align: center;
-    padding: .5em 2em;
+    padding: 0.5em 2em;
     border-width: 2px;
     border-style: solid;
     font-size: 1.5em;
@@ -153,7 +153,8 @@ table th {
 }
 
 .table-header {
-    font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Source Han Serif CN', "思源宋体", 'Times New Roman', SimSun, Times, serif;
+    font-family: "Noto Serif SC", "Source Han Serif SC", "Source Han Serif CN",
+        "思源宋体", "Times New Roman", SimSun, Times, serif;
     font-size: 2.25em;
     white-space: nowrap;
 }
@@ -169,35 +170,43 @@ table th {
 }
 
 .zh-cn {
-    font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Source Han Serif CN', '思源宋体', 'Times New Roman', SimSun, Times, serif;
+    font-family: "Noto Serif SC", "Source Han Serif SC", "Source Han Serif CN",
+        "思源宋体", "Times New Roman", SimSun, Times, serif;
 }
 
 .zh-hk {
-    font-family: 'Noto Serif HK', 'Source Han Serif HC', 'Source Han Serif HK', '思源宋體 香港', 'Times New Roman', SimSun, Times, serif;
+    font-family: "Noto Serif HK", "Source Han Serif HC", "Source Han Serif HK",
+        "思源宋體 香港", "Times New Roman", SimSun, Times, serif;
 }
 
 .zh-tw {
-    font-family: 'Noto Serif TC', 'Source Han Serif TC', 'Source Han Serif TW', '思源宋體', 'Times New Roman', SimSun, Times, serif;
+    font-family: "Noto Serif TC", "Source Han Serif TC", "Source Han Serif TW",
+        "思源宋體", "Times New Roman", SimSun, Times, serif;
 }
 
 .lzh {
-    font-family: '一点明体', "Noto Serif TC Light", 'Source Han Serif TC Light', 'Source Han Serif TW Light', "思源宋體 Light", 'Times New Roman', SimSun, Times, serif;
+    font-family: "一点明体", "Noto Serif TC Light", "Source Han Serif TC Light",
+        "Source Han Serif TW Light", "思源宋體 Light", "Times New Roman", SimSun,
+        Times, serif;
 }
 
 .ja {
-    font-family: 'Noto Serif JP', 'Source Han Serif', 'Source Han Serif JP', 'Times New Roman', SimSun, Times, serif;
+    font-family: "Noto Serif JP", "Source Han Serif", "Source Han Serif JP",
+        "Times New Roman", SimSun, Times, serif;
 }
 
 .ko {
-    font-family: 'Noto Serif KR', 'Source Han Serif K', 'Source Han Serif KR', 'Times New Roman', Times, serif;
+    font-family: "Noto Serif KR", "Source Han Serif K", "Source Han Serif KR",
+        "Times New Roman", Times, serif;
 }
 
 .vi {
-    font-family: 'Noto Serif', 'Times New Roman', SimSun, Times, serif;
+    font-family: "Noto Serif", "Times New Roman", SimSun, Times, serif;
 }
 
 .minecraft-title {
-    font-family: 'Noto Serif', 'Source Han Serif', 'Times New Roman', SimSun, Times, serif;
+    font-family: "Noto Serif", "Source Han Serif", "Times New Roman", SimSun,
+        Times, serif;
     text-align: center;
     font-size: 2.25em;
     font-weight: 900;
@@ -225,7 +234,7 @@ table th {
 
 .form .container input,
 .form .container select {
-    padding: .2em;
+    padding: 0.2em;
     border: 1px solid #ccc;
     border-radius: 5px;
 }
@@ -254,29 +263,6 @@ table th {
     display: none;
 }
 
-/* light/dark mode */
-
-.mode-toggle {
-    position: absolute;
-    top: 15px;
-    right: 75px;
-}
-
-#mode-switch {
-    border: none;
-    background-color: transparent;
-    cursor: pointer;
-}
-
-#mode-icon {
-    font-size: 48px;
-    color: inherit;
-}
-
-.invert {
-    filter: invert(1);
-}
-
 /* collapse */
 .collapsible {
     position: relative;
@@ -325,7 +311,7 @@ table th {
     }
 
     .mode-toggle {
-        right: 50px
+        right: 50px;
     }
 
     .title {
@@ -389,4 +375,4 @@ table th {
         width: 60%;
         font-size: 1em;
     }
-}
+}
diff --git a/static/css/quiz_portal.css b/static/css/quiz_portal.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.font.im/css2?family=Fira+Code&family=Noto+Serif+SC:wght@900&display=swap');
+@import url("https://fonts.font.im/css2?family=Fira+Code&family=Noto+Serif+SC:wght@900&display=swap");
 
 body {
     display: flex;
@@ -9,38 +9,36 @@ body {
     background-color: #f9f2e0;
 }
 
-.container {
+.container-1 {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     text-align: center;
-    background-color: white;
+    background-color: #fff;
     padding: 20px;
     width: 600px;
     border-radius: 8px;
 }
 
 a {
     font-size: larger;
-    color: #000;
 }
 
 .github-icon {
-    width: 2.25ex;
+    width: 1.75ex;
     height: inherit;
     display: inline-block;
     line-height: inherit;
     vertical-align: middle;
-    transform: translateY(-.1em);
+    transform: translateY(-0.1em);
 }
 
 .material-symbols-outlined.b {
-    color: #000;
     display: inline-block;
     line-height: inherit;
     vertical-align: middle;
-    transform: translateY(-.1em);
+    transform: translateY(-0.1em);
     font-size: inherit;
 }
 
@@ -52,14 +50,15 @@ a {
 }
 
 input[type="text"] {
-    font-family: 'Fira Code', 'Source Code Pro', Consolas, Monaco, monospace;
+    font-family: "Fira Code", "Source Code Pro", Consolas, Monaco, monospace;
     flex: 1;
     padding: 10px 20px;
     font-size: 20px;
     border-radius: 8px;
 }
 
 button {
+    background-color: #f0f0f0;
     cursor: pointer;
     font-size: 20px;
     border: solid 1px;
@@ -79,7 +78,8 @@ button {
 }
 
 .title {
-    font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Source Han Serif CN', '思源宋体', 'Times New Roman', SimSun, Times, serif;
+    font-family: "Noto Serif SC", "Source Han Serif SC", "Source Han Serif CN",
+        "思源宋体", "Times New Roman", SimSun, Times, serif;
     font-size: 2.25em;
     font-weight: 900;
     text-align: center;
@@ -111,4 +111,4 @@ button {
     .links {
         font-size: smaller;
     }
-}
+}
diff --git a/static/css/quiz_sub.css b/static/css/quiz_sub.css
@@ -27,18 +27,50 @@ body {
     text-align: center;
     vertical-align: top;
     box-sizing: border-box;
+    color: #000;
     background-color: #9ca3af25;
     font-weight: 700;
     transition: all 0.2s ease;
 }
 
-input[type="text"] {
+.box {
+    color: #000;
+    background-color: #9ca3af25;
+}
+
+.box.correct {
+    color: #000;
+    background-color: #79b851;
+}
+
+.box.exist {
+    color: #000;
+    background-color: #f3c237;
+}
+
+.box.dark {
+    color: #e0e0e0;
+    background-color: #9ca3af25;
+}
+
+.box.correct.dark {
+    color: #e0e0e0;
+    background-color: #538d4e;
+}
+
+.box.exist.dark {
+    color: #e0e0e0;
+    background-color: #b59f3b;
+}
+
+#inputBox {
     margin-top: 20px;
     width: 50%;
     height: 3em;
     font-size: 1.75em;
     text-align: center;
-    border: 2px solid #50535a1a;
+    border: 2px solid;
+    border-color: #50535a1a;
     border-radius: 8px;
     box-sizing: border-box;
     background-color: transparent;
@@ -280,4 +312,4 @@ table tr td:nth-child(2) {
         width: auto;
         padding: 20px 20px;
     }
-}
+}