Complete GUI Refactor # Patch 1

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

@@ -0,0 +1,57 @@
+@mixin accented-display($bg-color) {
+  background: $bg-color;
+  color: rgb(0, 0, 0);
+  font-family: 'WorkSans-Bold';
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+}
+
+@mixin slider-bar {
+  input[type='range'] {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+    cursor: pointer;
+    background: transparent;
+    border-color: transparent;
+    color: transparent;
+  }
+
+  input[type='range']::-webkit-slider-thumb {
+    -webkit-appearance: none;
+  }
+
+  input[type='range']:focus {
+    outline: none;
+  }
+
+  input[type='range']::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 1.2rem;
+    width: 1.2rem;
+    border-radius: 50%;
+    border: 2px solid rgb(0, 0, 0);
+    z-index: 2;
+    background: var(--yellow-accent);
+    margin-top: -0.5rem;
+  }
+
+  input[type='range']::-webkit-slider-runnable-track {
+    border-radius: 2rem;
+    height: 0.2rem;
+    background: var(--btn-primary-bg);
+  }
+
+  input[type='range']::-moz-range-track {
+    border-radius: 2rem;
+    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/_Animations.scss

@@ -19,3 +19,21 @@
     opacity: 1;
   }
 }
+
+@keyframes slideDown {
+  0% {
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideUp {
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}

lama_cleaner/app/src/styles/_Colors.scss

@@ -9,7 +9,7 @@
   --border-color: rgb(100, 100, 120);
 
   // Editor
-  --editor-toolkit-bg: rgb(240, 240, 250, 0.15);
+  --editor-toolkit-bg: rgb(240, 240, 250, 0.5);
 
   // Modal
   --modal-bg: var(--page-bg);

lama_cleaner/app/src/styles/_ColorsDark.scss

@@ -9,7 +9,7 @@
   --border-color: rgb(100, 100, 120);
 
   // Editor
-  --editor-toolkit-bg: rgb(20, 20, 30, 0.15);
+  --editor-toolkit-bg: rgb(20, 20, 30, 0.5);
 
   // Modal
   --modal-bg: var(--page-bg);