✨ feat(waybar): use css margin instead of waybar's, add shadows

waybar/animations.css

@@ -1,24 +1,15 @@
-@keyframes blink {
+@keyframes workspace-pick-attention { 
-    0% {
-        background: @color3;
-    }
-
-    100% {
-        background: @color2;
-    }
-}
-
-@keyframes pick-attention { 
-    25% {
-        background: @color6;
-    }
-
     50% {
+        background: @color4;
+        padding: 0 18px;
+    }
+
+    60% {
         background: @color1;
     }
 
-    75% {
+    80% {
-        background: @color6;
+        background: @color4;
     }
 
     100% {

waybar/config.jsonc

@@ -2,7 +2,7 @@
     "position": "top",
     "layer": "top",
     "spacing": 0, 
-    "margin": 5,
+    "margin": 0,
     "reload_style_on_change": true,
     "modules-left": [
         "custom/logo",
@@ -140,9 +140,6 @@
         "format": "  {}%"
     },
     "temperature": {
-        // "thermal-zone": 2,
-        // "hwmon-path": "/sys/class/hwmon/hwmon2/temp1_input",
-        // "format-critical": "{temperatureC}°C {icon}",
         "critical-threshold": 80,
         "format": "{icon} {temperatureC}°C",
         "format-icons": ["", "", ""]
@@ -190,8 +187,8 @@
         "format-icons": [ "󰤯", "󰤟", "󰤢", "󰤥", "󰤨" ]
     },
     "pulseaudio": { 
-        "format": "{volume}% {icon}",
+        "format": "{icon}   {volume}%",
-        "format-bluetooth": "{volume}% {icon}󰂯",
+        "format-bluetooth": "{icon}󰂯 {volume}%",
         "format-muted": "",
         "format-icons": {
             "headphone": "",

waybar/modules.css

@@ -13,45 +13,47 @@
 
 /* Workspace Indicator */
 #workspaces {
-    padding: 4px;
+    padding: 5px 0;
+    margin: 0 4px;
 }
 
-#workspaces button {
+#workspaces > button {
+    border: none;
+    box-shadow: none;
     background: @color1;
     border-radius: 14px;
     padding: 0 4px;
     margin: 0 2px;
 }
 
-#workspaces button.active {
+#workspaces > button.active {
     background: @foreground;
     padding-left: 14px;
     padding-right: 14px;
 }
 
-#workspaces button.urgent {
+#workspaces > button.urgent {
-    animation: pick-attention;
+    animation: workspace-pick-attention;
     animation-duration: 2s;
 }
 
-#workspace button.special {
+#workspace > button.special {
     background: @color3;
 }
 
-#workspaces button:first-child {
+#workspaces > button:first-child {
     margin-left: 0px;
 }
 
-#workspaces button:last-child {
+#workspaces > button:last-child {
     margin-right: 0px;
 }
 
-
 /* Notifications */
 widget #custom-notifications {
     font-size: 16px;
-    padding-left: 10px;
+    padding-left: 12px;
-    padding-right: 12px;
+    padding-right: 14px;
 }
 
 widget #custom-notifications.cc-open {
@@ -108,9 +110,14 @@ window.empty #window {
 /* Pulse Audio */
 #pulseaudio {
     padding-left: 8px;
-    padding-right: 8px;
+    padding-right: 16px;
 }
 
+#pulseaudio.bluetooth {
+    padding: 0 8px;
+}
+
+
 /* Media Player Info */
 #custom-media {
     box-shadow: none;

waybar/style.css

@@ -15,19 +15,18 @@ window#waybar {
     background: transparent;
 }
 
-window#waybar.hidden {
-    opacity: 0;
-}
-
 window > * > * {
     padding: 4px;
+    margin-bottom: 8px;
 }
 
 .modules-left, 
 .modules-center, 
 .modules-right {
-    background: alpha(@background, .80);
+    background: alpha(@background, .74);
-    border-radius: 14px;
+    border-radius: 16px;
+    margin: 6px;
+    box-shadow: 0 0 2px 0 black;
 }
 
 .module {
@@ -57,10 +56,12 @@ menu {
 
 menu > separator {
     padding: 0px;
+    margin: 2px 0;
 }
 
 menu > * {
     border-radius: 2px;
+    margin: 0;
 }
 
 menu > *:first-child {