style refine

lama_cleaner/app/src/styles/Mixins/_Mixins.scss

@@ -1,7 +1,7 @@
 @mixin accented-display($bg-color) {
   background: $bg-color;
   color: rgb(0, 0, 0);
-  font-family: 'WorkSans-Bold';
+  font-family: 'WorkSans';
   padding: 0.5rem;
   border-radius: 0.5rem;
 }
@@ -30,7 +30,7 @@
     height: 1.2rem;
     width: 1.2rem;
     border-radius: 50%;
-    border: 2px solid rgb(0, 0, 0);
+    border: 1px solid rgb(0, 0, 0);
     z-index: 2;
     background: var(--yellow-accent);
     margin-top: -0.5rem;
@@ -47,10 +47,6 @@
     background: var(--btn-primary-bg);
   }
 
-  input[type='range']::-ms-fill-lower {
-    background-color: red;
-  }
-
   input[type='range']::-moz-range-progress {
     background: var(--yellow-accent);
   }

lama_cleaner/app/src/styles/_Colors.scss

@@ -2,22 +2,28 @@
   // General
 
   // Theme
-  --page-bg: rgb(240, 240, 250);
-  --page-text-color: rgb(0, 0, 0);
+  --page-bg: rgb(255, 255, 255);
+  --page-text-color: #040404;
+  --yellow-accent: #ffcc00;
   --link-color: rgb(0, 0, 0);
-  --yellow-accent: rgb(255, 190, 0);
   --border-color: rgb(100, 100, 120);
 
   // Editor
-  --editor-toolkit-bg: rgb(240, 240, 250, 0.5);
+  --editor-toolkit-bg: rgba(255, 255, 255, 0.5);
+  --options-text-color: var(--page-text-color);
+  --editor-size-border-color: var(--border-color);
 
   // Modal
   --modal-bg: var(--page-bg);
   --modal-text-color: rgb(0, 0, 0);
-  --modal-hotkey-bg: rgb(240, 240, 240);
+  --modal-hotkey-border-color: rgb(0, 0, 0);
+  --model-mask-bg: rgba(209,213,219,0.4);
 
   // Shared
   --btn-primary-bg: rgb(210, 210, 220);
+  --btn-text-color: black;
+  --btn-text-hover-color: black;
+  --btn-border-color: rgb(100, 100, 120);
   --btn-primary-hover-bg: var(--yellow-accent);
   --animation-pulsing-bg: rgb(255, 255, 255, 0.5);
 }

lama_cleaner/app/src/styles/_ColorsDark.scss

@@ -2,22 +2,29 @@
   // General
 
   // Theme
-  --page-bg: rgb(20, 20, 30);
-  --page-text-color: rgb(200, 200, 210);
-  --link-color: rgb(255, 190, 0);
-  --yellow-accent: rgb(255, 190, 0);
+  --page-bg: #040404;
+  --page-text-color: #F9F9F9;
+  --yellow-accent: #ffcc00;
+  --link-color: var(--yellow-accent);
   --border-color: rgb(100, 100, 120);
 
   // Editor
-  --editor-toolkit-bg: rgb(20, 20, 30, 0.5);
+  --editor-toolkit-bg: rgba(0, 0, 0, 0.5);
+  --options-text-color: var(--page-text-color);
+  --editor-size-border-color: var(--yellow-accent);
 
   // Modal
   --modal-bg: var(--page-bg);
   --modal-text-color: var(--page-text-color);
-  --modal-hotkey-bg: rgb(60, 60, 90);
+  // --modal-hotkey-bg: rgb(60, 60, 90);
+  --modal-hotkey-border-color: var(--page-text-color);;
+  --model-mask-bg: rgba(76, 76, 87, 0.4);
 
   // Shared
   --btn-primary-bg: rgb(140, 140, 180);
+  --btn-text-color: white;
+  --btn-text-hover-color: var(--page-bg);
+  --btn-border-color: var(--yellow-accent);
   --btn-primary-hover-bg: var(--yellow-accent);
   --animation-pulsing-bg: rgb(240, 240, 255);
 }

lama_cleaner/app/src/styles/_index.scss

@@ -9,10 +9,10 @@
 @use '../components/Editor/Editor';
 @use '../components/LandingPage/LandingPage';
 @use '../components/Header/Header';
+@use '../components/Header/ThemeChanger';
 @use '../components/Shortcuts/Shortcuts';
 
 // Shared
-@use '../components/shared/ThemeChanger';
 @use '../components/FileSelect/FileSelect';
 @use '../components/shared/Button';
 @use '../components/shared/Modal';