refactor styles a bit

src/styles/Colors.scss

@@ -45,14 +45,15 @@ $props-to-transition: ("sidebar", "main", "text", "button");
     transition-property: $props;
 }
 
-// Color Function
+// $key: the key of the color, e.g. "main"
-// $light-offset is added when in light mode
+// $alpha: tha alpha in rgba()
+// $light-offset: added when in light mode
 @function spiceColor($key, $alpha: 1, $light-offset: 0) {
     @if $alpha == 1 {
         @return var(--spice-#{$key});
     } @else if $light-offset == 0 {
         @return rgba(var(--spice-rgb-#{$key}), $alpha);
     } @else {
-        @return rgba(var(--spice-rgb-#{$key}), calc($alpha + var(--is_light) * $light-offset));
+        @return rgba(var(--spice-rgb-#{$key}), lightOffset($alpha, $light-offset));
     }
 }

src/styles/ConfigMenu.scss

@@ -103,6 +103,7 @@
                         align-items: center;
                         gap: 10px;
                         padding: 8px 16px;
+                        user-select: text;
 
                         &[hidden] {
                             display: none;
@@ -128,8 +129,16 @@
                             border-bottom-right-radius: 0px;
                         }
 
-                        &[invalid]::before {
+                        &[invalid] {
-                            border: 2px solid rgba(red, 0.8);
+                            &::before {
+                                border: 2px solid rgba(red, 0.8);
+                            }
+
+                            .dribbblish-config-item-input::before {
+                                content: var(--validation-error);
+                                margin-right: 8px;
+                                color: rgba(red, 0.8);
+                            }
                         }
 
                         &[changed] {
@@ -190,7 +199,6 @@
                                     height: min-content;
                                     color: spiceColor("subtext");
                                     line-height: calc(1em + 6px); // To have line gaps
-                                    line-break: anywhere;
                                 }
 
                                 .x-settings-secondColumn {
@@ -200,13 +208,8 @@
                         }
 
                         .dribbblish-config-item-input {
+                            display: flex;
                             min-width: fit-content;
-
-                            &::before {
-                                content: var(--validation-error);
-                                margin-right: 8px;
-                                color: rgba(red, 0.8);
-                            }
                         }
                     }
                 }

src/styles/ContextMenu.scss

@@ -4,13 +4,18 @@
     position: relative;
     border-radius: var(--main-corner-radius);
     padding: 8px;
+    box-shadow: 0px 0px 8px spiceColor("subtext", 0.1, 0.1);
+
+    &:not([data-depth="0"]) {
+        margin: -5px 0px;
+    }
 
     &::before {
         z-index: -1;
         content: "";
         position: absolute;
         inset: 0px;
-        background-color: spiceColor("main", calc(0.75 - 0.1 * var(--is_light))) !important;
+        background-color: spiceColor("main", 0.75, -0.1) !important;
         backdrop-filter: blur(10px);
         border-radius: var(--main-corner-radius);
     }
@@ -24,7 +29,7 @@
             &:focus,
             &:active,
             &[aria-expanded="true"] {
-                background-color: spiceColor("subtext", calc(0.1 + 0.3 * var(--is_light)));
+                background-color: spiceColor("subtext", 0.1, 0.3);
             }
 
             &::before,

src/styles/Inputs.scss

@@ -66,7 +66,7 @@ select {
     &:active {
         background-color: spiceColor("selected-row", 0.6) !important;
     }
-    
+
     option {
         background: spiceColor("main") !important;
     }
@@ -136,7 +136,7 @@ input {
 
     &[type="time"] {
         &::-webkit-calendar-picker-indicator {
-            filter: invert(calc(1 - var(--is_light)));
+            filter: invert(var(--is_dark));
         }
     }
 

src/styles/Markdown.scss

@@ -1,4 +1,14 @@
 *[markdown] {
+    ol,
+    ul {
+        list-style: inside;
+
+        > li::marker {
+            content: "• ";
+            font-weight: 900;
+        }
+    }
+
     code {
         background-color: spiceColor("subtext", 0.1);
         padding: 0px 5px;
@@ -6,6 +16,6 @@
     }
 
     .muted {
-        color: spiceColor("subtext", 0.5);
+        color: spiceColor("subtext", 0.5, 0.2);
     }
 }

src/styles/Util.scss

@@ -0,0 +1,4 @@
+// returns $n and adds $offset when the theme is light
+@function lightOffset($n, $offset) {
+    @return calc($n + $offset * var(--is_light));
+}

src/styles/main.scss

@@ -3,6 +3,7 @@
     @return #{"invert("}$v#{")"};
 }
 
+@import "Util";
 @import "Colors";
 @import "Fonts";
 @import "Inputs";
@@ -23,28 +24,22 @@
     --image-radius: 10px;
     --sidebar-icons-border-radius: 50vh; // 50vh = round / pill
     --song-transition-speed: 3s;
-}
+    --is_dark: calc(1 - var(--is_light));
-
-.os-scrollbar-handle {
-    background-color: spiceColor("text") !important;
-    border-radius: calc(var(--scrollbar-vertical-size) / 2);
-}
-
-.os-scrollbar-handle:hover {
-    filter: brightness(80%);
 }
 
 ::-webkit-scrollbar {
     width: var(--scrollbar-vertical-size);
 }
 
+.os-scrollbar-handle,
 ::-webkit-scrollbar-thumb {
-    background-color: spiceColor("text") !important;
+    background-color: spiceColor("sidebar") !important;
-    border-radius: calc(var(--scrollbar-vertical-size) / 2);
+    border-radius: 50vw;
 }
 
+.os-scrollbar-handle:hover,
 ::-webkit-scrollbar-thumb:hover {
-    filter: brightness(80%);
+    background-color: spiceColor("sidebar", 0.8) !important;
 }
 
 .main-type-mesto,
@@ -1216,7 +1211,7 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
     background-position: center center;
     filter: blur(15px);
     border-radius: var(--main-corner-radius);
-    opacity: calc(0.07 + 0.03 * var(--is_light, 0));
+    opacity: lightOffset(0.07, 0.03);
     transition: background-image var(--song-transition-speed) linear;
 }