refactor(waybar): initial style updates and refactoring

dots/.config/waybar/config

@@ -3,12 +3,13 @@
         "layer": "top",
         "position": "top",
         "modules-left": [
+            "custom/launcher",
+            "wlr/workspaces",
             "cpu",
-      "temperature",
-      "custom/asusmode",
             "memory",
-      "battery",
+            "temperature",
             "disk",
+            "battery",
             "custom/audio-device",
             "custom/pipewire"
         ],
@@ -16,16 +17,18 @@
             "custom/media"
         ],
         "modules-right": [
-      "custom/weather",
+            "custom/asusmode",
             "network",
             "clock",
             "custom/lock"
         ],
-    "custom/weather": {
+        "custom/launcher": {
+            "format": "{}",
             "tooltip": false,
             "min-length": 5,
-      "exec": "curl 'https://wttr.in/?format='%t''",
+            "interval": 1,
-      "interval": 3600
+            "on-click": "wofi",
+            "exec": "printf '󰫢'"
         },
         "battery": {
             "min-length": 5,
@@ -53,6 +56,16 @@
                 ""
             ]
         },
+        "wlr/workspaces": {
+            "format": "{icon}",
+            "format-icons": {
+                "active": "",
+                "default": ""
+            },
+            "on-scroll-up": "hyprctl dispatch workspace e-1",
+            "on-scroll-down": "hyprctl dispatch workspace e+1",
+            "on-click": "activate"
+        },
         "clock": {
             "format": " {:%a %b %d %I:%M %p}",
             "tooltip": true,
@@ -110,7 +123,7 @@
         "cpu": {
             "interval": 4,
             "min-length": 6,
-      "format": " {usage}%",
+            "format": " {usage}%",
             "tooltip": false,
             "states": {
                 "critical": 90
@@ -151,7 +164,7 @@
             "interval": 60,
             "tooltip-format": "{used} used out of {total} ({percentage_used}%)",
             "min-length": 5,
-      "format": " {percentage_used}%",
+            "format": "🖴 {percentage_used}%",
             "states": {
                 "critical": 90
             }
@@ -161,28 +174,6 @@
             "return-type": "json",
             "exec": "~/.config/waybar/scripts/get-media.bash",
             "escape": true
-    },
-    "wlr/workspaces": {
-      "on-click": "activate"
-    }
-  },
-  {
-    "layer": "bottom",
-    "position": "bottom",
-    "modules-center": [
-      "wlr/workspaces"
-    ],
-    "wlr/workspaces": {
-      "format": "{name}",
-      "on-click": "activate"
-    },
-    "custom/sway-mode": {
-      "exec": "swaymsg -t get_binding_state | jq '.name' -r",
-      "format": " {}",
-      "interval": 1
-    },
-    "sway/language": {
-      "format": " {long}"
         }
     }
 ]

dots/.config/waybar/style.css

@@ -35,201 +35,157 @@
 /* peachRed       #FF5D62; */
 /* surimiOrange   #FFA066; */
 
+/* Global Styling */
 * {
-  min-height: 0;
+  border: none;
-  padding: 3px;
+  font-family: "Fira Code", monospace;
-  border-radius: 20px;
+  font-size: 13px;
-  margin-left: 5px;
+  border-radius: 0px;
-  margin-right: 5px;
+  margin-top: 0.1rem;
-  padding-right: 4px;
+  margin-left: 0.25rem;
-  padding-left: 4px;
+  margin-right: 0.25rem;
-  padding-top: 1px;
-  padding-bottom: 1px;
 }
 
+/* Bar Styling */
 #waybar {
   background: transparent;
-  font-family: JetBrainsMono;
-  font-size: medium;
-  color: #dcd7ba;
 }
 
-#custom-media {
+#cpu,
-  background: #16161d;
+#temperature,
-  border-top: 2px solid #957fb8;
+#custom-asusmode,
-  border-left: 2px solid #957fb8;
+#memory,
-  border-right: 2px solid #957fb8;
+#battery,
+#disk,
+#custom-audio-device,
+#custom-pipewire,
+#workspaces,
+#custom-media,
+#custom-weather,
+#custom-launcher,
+#network,
+#clock,
+#custom-lock {
+  background-color: #16161d;
   color: #dcd7ba;
+  padding: 0.4rem 0.8rem;
+  border-radius: 20px;
 }
 
-#custom-asusmode {
+/* Launcher */
-  background: #16161d;
+#custom-launcher {
-  border-top: 2px solid #957fb8;
+  padding-right: 0.3rem;
-  border-left: 2px solid #957fb8;
+  padding-left: 0.1rem;
-  color: #dcd7ba;
+  color: #957fb8;
+  margin-right: 0.25rem;
 }
 
-#custom-audio-device {
+/* System Status */
-  background: #16161d;
+#cpu,
-  border-top: 2px solid #957fb8;
+#temperature,
-  border-left: 2px solid #957fb8;
+#memory,
-  color: #dcd7ba;
+#disk {
+  color: #7e9cd8;
 }
 
-#custom-sway-mode {
+#cpu {
-  background: #16161d;
+  border-top-right-radius: 0;
-  border-bottom: 2px solid #957fb8;
+  border-bottom-right-radius: 0;
-  border-left: 2px solid #957fb8;
+  padding-left: 1rem;
-  color: #dcd7ba;
+  padding-right: 0.2rem;
+  margin-right: 0rem;
 }
 
+#memory {
+  border-radius: 0px;
+  padding-left: 0.1rem;
+  padding-right: 0.35rem;
+  margin-left: 0rem;
+  margin-right: 0rem;
+}
+
+#temperature {
+  border-radius: 0px;
+  padding-left: 0.35rem;
+  padding-right: 0.35rem;
+  margin-left: 0rem;
+  margin-right: 0rem;
+}
+
+#disk {
+  color: #ff5d62;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  padding-left: 0.35rem;
+  padding-right: 1rem;
+  margin-left: 0rem;
+}
+
+/* Worksapces */
 #workspaces {
-  background: #16161d;
+  border-radius: 14px;
-  transition: none;
+  margin-left: 0.25rem;
-  border-top: 2px solid #957fb8;
+  margin-right: 0.25rem;
-  border-left: 2px solid #957fb8;
+}
-  border-right: 2px solid #957fb8;
+
-  padding-right: 20px;
+#workspaces * {
-  padding-left: 20px;
+  font-size: 0px;
 }
 
 #workspaces button {
-  transition: none;
+  padding: 0px;
-  margin: 0px;
+  margin: 5px 5px;
-  color: #957fb8;
+  min-height: 0.75rem;
-  background: transparent;
+  min-width: 0.75rem;
-  border-bottom: 2px solid #957fb8;
+  border-radius: 100%;
-  border-radius: 0px;
+  background-color: #54546d;
-  padding-right: 25px;
-  padding-left: 25px;
-  padding-top: 5px;
-  padding-bottom: 5px;
 }
 
 #workspaces button.active {
-  color: #98bb6c;
+  background: radial-gradient(
-  border-bottom: 2px solid #98bb6c;
+    circle,
-  border-radius: 0px;
+    #d27e99 0%,
+    #e46876 10%,
+    #7fb4ca 20%,
+    #a3d4d5 30%,
+    #ff9e3b 40%,
+    #e6c384 50%,
+    #98bb6c 60%,
+    #938aa9 70%,
+    #9cabca 80%,
+    #ffa066 90%,
+    #957fb8 100%
+  );
+  background-size: 400% 400%;
+  animation: gradient_roll 30s ease-in-out infinite;
 }
 
 #workspaces button:hover {
   transition: none;
   box-shadow: inherit;
   text-shadow: inherit;
-  border-top: 0px;
+  background-color: #ff5d62;
-  border-bottom: 2px solid #a3d4d5;
-  color: #a3d4d5;
-  border-right: 0px;
-  border-left: 0px;
-  border-radius: 0px;
 }
 
-#idle_inhibitor {
+/* Asus Fan Mode */
-  margin-left: 0px;
+#custom-asusmode {
-  background: #16161d;
+  margin-right: 0.25rem;
-  border-top: 2px solid #957fb8;
+  margin-left: 0.25rem;
-  border-left: 2px solid #957fb8;
-  color: #dcd7ba;
 }
 
-#network,
+/*=============*/
-#custom-weather,
+/* Animations */
-#clock,
+/*===========*/
-#custom-lock {
+@keyframes gradient_roll {
-  background: #16161d;
+  0% {
-  border-top: 2px solid #957fb8;
+    background-position: 0% 200%;
-  border-right: 2px solid #957fb8;
+  }
-  color: #dcd7ba;
-}
 
-#cpu,
+  50% {
-#memory,
+    background-position: 200% 0%;
-#custom-pipewire,
+  }
-#disk,
-#temperature,
-#battery {
-  background: #16161d;
-  border-top: 2px solid #957fb8;
-  border-left: 2px solid #957fb8;
-  color: #dcd7ba;
-}
 
-#disk.critical {
+  100% {
-  color: #e82424;
+    background-position: 400% 200%;
-}
-
-#temperature.critical {
-  color: #e82424;
-}
-
-#cpu.critical {
-  color: #e82424;
-}
-
-#memory.critical {
-  color: #e82424;
-}
-
-@keyframes blink1 {
-  to {
-    color: #98bb6c;
   }
 }
-
-#battery.plugged {
-  background-color: #16161d;
-  animation-name: blink1;
-  animation-duration: 2s;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
-}
-
-@keyframes blink2 {
-  to {
-    background-color: #e6c384;
-  }
-}
-
-#battery.charging {
-  animation-name: blink2;
-  animation-duration: 8s;
-  animation-timing-function: ease-in-out;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
-}
-
-@keyframes blink3 {
-  to {
-    background-color: #ff9e3b;
-  }
-}
-
-#battery.warning:not(.charging) {
-  animation-name: blink3;
-  animation-duration: 4s;
-  animation-timing-function: ease-in-out;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
-}
-
-@keyframes blink4 {
-  to {
-    background-color: #e82424;
-  }
-}
-
-#battery.critical:not(.charging) {
-  animation-name: blink4;
-  animation-duration: 4s;
-  animation-timing-function: ease-in-out;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
-}
-
-#language {
-  border-bottom: 2px solid #957fb8;
-  border-right: 2px solid #957fb8;
-  background: #16161d;
-  color: #dcd7ba;
-}