💥 eww(bar/workspaces): fix workspace indicator with a literal script

eww/styles/audio-popup.scss

@@ -8,8 +8,10 @@ box.audio-popup {
 }
 
 .audio-popup .separator {
-    box-shadow: 0 0 0 1px darken($color: $foreground, $amount: 25);
-    margin: 4px 0;
+    border-top: .5px solid rgba(darken($color: $foreground, $amount: 25), .7);
+    margin-bottom: 8px;
+    margin-left: 6px;
+    margin-right: 6px;
     border-radius: 1px;
 }
 
@@ -26,3 +28,27 @@ box.audio-popup {
         color: $background;
     }
 }
+
+
+.audio-popup {
+
+    trough {
+        background: darken($color: $foreground, $amount: 25);
+        border-radius: 6px;
+    }
+
+    trough highlight {
+        background: $foreground;
+        padding: 10px;
+        border-radius: inherit;
+    }
+
+    slider:active highlight {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    scale {
+        padding: 10px;
+    }
+}

eww/styles/bar.scss

@@ -33,26 +33,21 @@
     }
 }
 
-.workspaces {
+// Styles the literal script for workspace indicators
+ .workspaces {
     padding: 2px 0px;
     border-radius: 10px;
 
     & > button {
-        padding: 0 0;
         border-radius: 16px;
         margin: 0 2px;
+        padding: 5px 12px;
         background: $color1;
-        transition: ease-in 80ms;
-        transition-property: all;
 
         &.active {
-            padding: 0 22px;
+            padding: 5px 22px;
             background: $foreground;
         }
-
-        &.default {
-            padding: 0 12px;
-        }
     }
 }
 
@@ -180,11 +175,11 @@
     }
 }
 
-.notifications button {
+.control-center-toggle button {
     padding-left: 12px;
     padding-right: 10px;
 
-    &.open, &:hover {
-        background: $color3;
+    &.open {
+        background: darken($color: $color3, $amount: 15);
     }
 }

eww/styles/control-center.scss

@@ -27,6 +27,14 @@ box.cc {
     .button-row {
         margin: 7px 0;
     }
+
+    .color-picker {
+        padding-right: 11px;
+    }
+
+    .powermenu {
+        padding-right: 11px;
+    }
 }
 
 .control-center .mediaplayer {
@@ -151,3 +159,47 @@ box.cc {
         }
     }
 }
+
+.toggle-grid {
+    .grid-toggle .toggle {
+        margin: 0 6px;
+
+        &:first-child {
+            margin-left: 0;
+        }
+
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+}
+
+.grid-toggle {
+    
+    &.active {
+        background: darken($color: $color1, $amount: 2);
+    }
+
+    & > .toggle {
+        padding: 8px;
+        border-radius: 18px;
+
+        label {
+            font-family: "Cantarell", "0xProto Nerd Font";
+        }
+
+        .icon {
+            margin-right: 6px;
+            font-size: 16px;
+        }
+
+        label.header {
+            font-weight: 700;
+            font-size: 12px;
+        }
+
+        label.body {
+            font-size: 11px;
+        }
+    }
+}

eww/styles/general.scss

@@ -58,17 +58,20 @@ box.vertical-button-row {
     }
 }
 
-button {
+button,
+.button {
     padding: 6px 10px;
     border-radius: 12px;
     background: none;
 }
 
-button:hover {
+button:hover,
+.button:hover {
     background: darken($color: $color2, $amount: 5);
 }
 
-button:active {
+button:active,
+.button:active {
     background: darken($color: $color3, $amount: 10);
 }