✨ eww: add new features and fix issues

eww/styles/bar.scss

@@ -1,6 +1,4 @@
 
-$foreground: lighten($color: $foreground, $amount: 10);
-
 .bar {
     background: transparent;
     padding: 4px;
@@ -29,60 +27,9 @@ $foreground: lighten($color: $foreground, $amount: 10);
     & > *:last-child {
         margin-right: 0;
     }
-}
 
-button {
-    padding: 6px 10px;
-    border-radius: 12px;
-    background: none;
-}
-
-button:hover {
-    background: $color3;
-}
-
-button:active {
-    background: darken($color: $color3, $amount: 10);
-}
-
-button label {
-    color: $foreground;
-}
-
-menu {
-    background: $background;
-    border-radius: 14px;
-    padding: 2px;
-
-    & > menuitem {
-        padding: 8px 24px;
-        border-radius: 5px;
-
-        &:hover {
-            background: $color1;
-        }
-
-        &:first-child {
-            border-top-left-radius: inherit;
-            border-top-right-radius: inherit;
-        }
-
-        &:last-child {
-            border-bottom-left-radius: inherit;
-            border-bottom-right-radius: inherit;
-        }
-
-        label {
-            font-weight: 600;
-            color: $foreground;
-        }
-    }
-
-    & > separator {
-        background: lighten($color: $background, $amount: 5);
-        margin: .5px 10px;
-        padding: 1px 0;
-        border-radius: 1px;
+    & > *:only-child {
+        margin: 0 0px;
     }
 }
 
@@ -131,29 +78,53 @@ menu {
 
 .mediaplayer {
     border-radius: 12px;
-    box-shadow: inset 0 0 0px 2px $color3;
-    padding: 0 4px;
-    padding-right: 0px;
 
-    & label.media-title,
-    & label.media-artist {
-        margin: 0 4px;
-        padding-right: 5px;
-        color: $foreground;
-        font-size: inherit;
+    & > .media {
+        border-radius: inherit;
+        background: darken($color: $color3, $amount: 15);
+        
+        & > label {
+            color: $foreground;
+            font-size: inherit;
 
-        &.media-title {
-            margin-top: 6px;
-            margin-bottom: 6px;
-            border-right: .5px solid darken($color: $foreground, $amount: 20);
+            &:first-child {
+                margin-left: 8px;
+            }
+
+            &:last-child {
+                margin-right: 8px;
+            }
+        }
+
+        & > box.separator {
+            margin: 8px 4px;
+            padding: 0 1px;
+            background: darken($color: $foreground, $amount: 20);
         }
     }
 
-    &.revealed label.media-artist {
-        border-right: 2px solid $color3;
+    &.revealed {
+        background: darken($color: $color3, $amount: 25);
+        transition: 80ms linear;
+
+        .media {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        .media-controls {
+            background: darken($color: $color3, $amount: 25);
+            border-top-right-radius: 12px;
+            border-bottom-right-radius: 12px;
+
+            & button:last-child {
+                border-top-right-radius: 12px;
+                border-bottom-right-radius: 12px;
+            }
+        }
     }
 
-    & button {
+    button {
         padding: 0 7px;
         border-radius: 0px;
     }
@@ -161,26 +132,23 @@ menu {
 
 .window {
     padding: 0 4px;
-    padding-right: 6px;
 
-    & > .window-icon {
-        padding-right: 24px;
-        margin-right: 4px;
-        background-position: center;
-        background-size: 24px;
-        background-repeat: no-repeat;
+    & > .icon {
+        margin: 0 4px;
     }
 
-    & > label.window-class {
-        font-size: 10px;
-        font-family: monospace;
-        color: darken($color: $foreground, $amount: 20);
-    }
+    & > box.info {
+        & > label.window-class {
+            font-size: 10px;
+            font-family: monospace;
+            color: darken($color: $foreground, $amount: 20);
+        }
 
-    & > label.window-title {
-        margin-top: -2px;
-        font-size: inherit;
-        color: $foreground;
+        & > label.window-title {
+            margin-top: -2px;
+            font-size: inherit;
+            color: $foreground;
+        }
     }
 }
 
@@ -189,6 +157,29 @@ menu {
     padding-right: 7px;
 }
 
+.audio-eventbox { 
+    &:hover box.audio {
+        background: darken($color: $color2, $amount: 5);
+    }
+
+    & > box.audio {
+        padding: 0 8px;
+        border-radius: 12px;
+
+        label {
+            font-weight: 600;
+
+            &:first-child {
+                margin-right: 2px;
+            }
+
+            &:last-child {
+                margin-left: 2px;
+            }
+        }
+    }
+}
+
 .notifications button {
     padding-left: 12px;
     padding-right: 10px;