✨ eww: better user experience with volume menu and control center

eww/styles/bar.scss

@@ -38,7 +38,7 @@
     padding: 2px 0px;
     border-radius: 50%;
 
-    & > button {
+    & button {
         $padding-block: 5px;
 
         border-radius: 16px;

eww/styles/control-center.scss

@@ -136,11 +136,14 @@ box.cc {
             & > box {
                 background: darken($color: $color2, $amount: 15);
             }
+            &:checked > box {
+                background: $color3;
+            }
         }
 
         &:checked {
             & > box {
-                background: darken($color: $color3, $amount: 12);
+                background: darken($color: $color3, $amount: 5);
             }
         }
 
@@ -155,14 +158,26 @@ box.cc {
             margin-left: -16px; // This covers the checkbox space, hiding the check thing
 
             .icon {
-                font-size: 14px;
+                font-size: 15px;
                 padding-right: 5px;
             }
 
             .label {
-                font-size: 12px;
+                font-size: 12.6px;
                 font-weight: 600;
             }
         }
     }
+
+    & .network {
+        .icon {
+            margin-right: 5px;
+        }
+    }
+
+    & .dnd {
+        .icon {
+            margin-right: 4px;
+        }
+    }
 }

eww/styles/general.scss

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

eww/styles/volume-control.scss

@@ -5,7 +5,7 @@
     border-radius: 16px;
 
     trough {
-        background: rgba(lighten($color: $background, $amount: 8), .4);
+        background: rgba(lighten($color: $background, $amount: 25), .5);
         border-radius: 6px;
     }