From eea1ff7bea343c24a754094e528a9e2516ec2fcf Mon Sep 17 00:00:00 2001
From: retrozinndev <joaovodias@gmail.com>
Date: Sun, 10 Nov 2024 13:01:55 -0300
Subject: [PATCH] :sparkles: feat(waybar): use css margin instead of waybar's,
 add shadows

---
 waybar/animations.css              | 25 ++++++++----------------
 waybar/config.jsonc                | 13 +++++--------
 waybar/modules.css                 | 31 ++++++++++++++++++------------
 waybar/modules/swaync-recording.sh |  0
 waybar/style.css                   | 13 +++++++------
 5 files changed, 39 insertions(+), 43 deletions(-)
 create mode 100644 waybar/modules/swaync-recording.sh

diff --git a/waybar/animations.css b/waybar/animations.css
index d035285..f3c5c80 100644
--- a/waybar/animations.css
+++ b/waybar/animations.css
@@ -1,24 +1,15 @@
-@keyframes blink {
-    0% {
-        background: @color3;
-    }
-
-    100% {
-        background: @color2;
-    }
-}
-
-@keyframes pick-attention { 
-    25% {
-        background: @color6;
-    }
-
+@keyframes workspace-pick-attention { 
     50% {
+        background: @color4;
+        padding: 0 18px;
+    }
+
+    60% {
         background: @color1;
     }
 
-    75% {
-        background: @color6;
+    80% {
+        background: @color4;
     }
 
     100% {
diff --git a/waybar/config.jsonc b/waybar/config.jsonc
index 5bb4809..d1621c5 100644
--- a/waybar/config.jsonc
+++ b/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",
@@ -132,17 +132,14 @@
     },
 
     "cpu": {
-        "format": " {usage}%",
+        "format": "  {usage}%",
         "tooltip": true,
         "escape": true
     },
     "memory": {
-        "format": " {}%"
+        "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-bluetooth": "{volume}% {icon}󰂯",
+        "format": "{icon}   {volume}%",
+        "format-bluetooth": "{icon}󰂯 {volume}%",
         "format-muted": "",
         "format-icons": {
             "headphone": "",
diff --git a/waybar/modules.css b/waybar/modules.css
index c7bffcc..d936ecb 100644
--- a/waybar/modules.css
+++ b/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 {
-    animation: pick-attention;
+#workspaces > button.urgent {
+    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-right: 12px;
+    padding-left: 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;
diff --git a/waybar/modules/swaync-recording.sh b/waybar/modules/swaync-recording.sh
new file mode 100644
index 0000000..e69de29
diff --git a/waybar/style.css b/waybar/style.css
index 188f8ba..6efb79e 100644
--- a/waybar/style.css
+++ b/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);
-    border-radius: 14px;
+    background: alpha(@background, .74);
+    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 {