style: Improve code structure

koujiangqq · May 12, 2024 · 97eb5c6 · 97eb5c6
1 parent 861c9c2
commit 97eb5c6
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 42 deletions.
diff --git a/src/style/calculator/mixin.less b/src/style/calculator/mixin.less
@@ -39,6 +39,26 @@
     }
 }
 
+.scrollbar-style() {
+    @size: 7px;
+    &::-webkit-scrollbar {
+        width: @size;
+        height: @size;
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: var(--ca-gray8);
+        &:hover {
+            background-color: var(--ca-gray7);
+        }
+        &:active {
+            background-color: var(--ca-gray6);
+        }
+    }
+    &::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+}
+
 .function-tag() {
     display: flex;
     align-items: center;

diff --git a/src/style/layout.less b/src/style/layout.less
@@ -1,5 +1,6 @@
 @import "./fonts.less";
 @import "./vars.less";
+@import "./theme.less";
 @import "./animation.less";
 
 @import "./dialog.less";

diff --git a/src/style/theme.less b/src/style/theme.less
@@ -0,0 +1,23 @@
+body[theme=light] {
+    kbd {
+        background-color: #dad8d8;
+        border-color: var(--ca-gray1);
+    }
+
+    .select {
+        .select-button button, .select-panel {
+            background-color: var(--ca-light2);
+        }
+        .select-panel-wrapper {
+            box-shadow: 0 0 5px 0 #636262, 0 5px 15px #7e7e7e;
+        }
+    }
+
+    #dialogs dialog {
+        box-shadow: 0 0 11px 0px #636262, 0 16px 15px #7e7e7e;
+    }
+
+    .calculator-container .output-container .number-box-list .number-box.active * {
+        color: #3b3c3c !important;
+    }
+}
diff --git a/src/style/vars.less b/src/style/vars.less
@@ -53,50 +53,8 @@
         --ca-tag-const: #4d7ed8;
         --ca-tag-func: #8250df;
         --ca-selection: #afd2f3;
-
-        kbd {
-            background-color: #dad8d8;
-            border-color: var(--ca-gray1);
-        }
-
-        .select {
-            .select-button button, .select-panel {
-                background-color: var(--ca-light2);
-            }
-            .select-panel-wrapper {
-                box-shadow: 0 0 5px 0 #636262, 0 5px 15px #7e7e7e;
-            }
-        }
-
-        #dialogs dialog {
-            box-shadow: 0 0 11px 0px #636262, 0 16px 15px #7e7e7e;
-        }
-
-        .calculator-container .output-container .number-box-list .number-box.active * {
-            color: #3b3c3c !important;
-        }
     }
 
     --ca-seniority-split: "的";
     --ca-atom-split: "+";
 }
-
-.scrollbar-style() {
-    @size: 7px;
-    &::-webkit-scrollbar {
-        width: @size;
-        height: @size;
-    }
-    &::-webkit-scrollbar-thumb {
-        background-color: var(--ca-gray8);
-        &:hover {
-            background-color: var(--ca-gray7);
-        }
-        &:active {
-            background-color: var(--ca-gray6);
-        }
-    }
-    &::-webkit-scrollbar-track {
-        background-color: transparent;
-    }
-}