feat(hypr,waybar): finalize visual overhaul

dots/.config/hypr/wm/appearance.conf

@@ -1,5 +1,5 @@
 decoration {
-    rounding = 8
+    rounding = 10
 
     blur = true
     blur_size = 10

dots/.config/hypr/wm/general.conf

@@ -6,7 +6,7 @@ general {
     gaps_in = 5
     gaps_out = 10
     border_size = 2
-    col.active_border = 0xff$waveRed
+    col.active_border = 0xff$waveRed 0xff$surimiOrange 0xff$sakuraPink 0xff$roninYellow 0xff$crystalBlue 115deg
     col.inactive_border = 0xff$oniViolet
     apply_sens_to_raw = false
 }

dots/.config/waybar/config

@@ -11,7 +11,7 @@
             "disk",
             "battery",
             "custom/audio-device",
-            "custom/pipewire"
+            "wireplumber"
         ],
         "modules-center": [
             "custom/media"
@@ -34,8 +34,8 @@
             "min-length": 5,
             "design-capacity": true,
             "states": {
-                "full": 90,
+                "warning": 30,
-                "warning": 20,
+                "near-critical": 15,
                 "critical": 10
             },
             "tooltip": false,
@@ -57,20 +57,36 @@
             ]
         },
         "wlr/workspaces": {
-            "format": "{icon}",
+            "format": "",
-            "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,
+            "format-alt": " {:%H:%M %p}",
-            "tooltip-format": "<big>{:%Y %B \t week: %V }</big>\n<tt>{calendar}</tt>",
+            "tooltip-format": "<tt><small>{calendar}</small></tt>",
-            "min-length": 18
+            "calendar": {
+                "mode": "year",
+                "mode-mon-col": 3,
+                "weeks-pos": "right",
+                "on-scroll": 1,
+                "on-click-right": "mode",
+                "format": {
+                    "months": "<span color='#FFA066'><b>{}</b></span>",
+                    "days": "<span color='#DCD7BA'><b>{}</b></span>",
+                    "weeks": "<span color='#A3D4D5'><b>W{}</b></span>",
+                    "weekdays": "<span color='#E6C384'><b>{}</b></span>",
+                    "today": "<span color='#FF5D62'><b><u>{}</u></b></span>"
+                }
+            },
+            "actions": {
+                "on-click-right": "mode",
+                "on-click-forward": "tz_up",
+                "on-click-backward": "tz_down",
+                "on-scroll-up": "shift_up",
+                "on-scroll-down": "shift_down"
+            }
         },
         "custom/lock": {
             "tooltip": false,
@@ -79,15 +95,25 @@
             "on-click": "swaylock"
         },
         "network": {
-            "interval": 10,
+            "on-click-right": "iwctl station wlan0 disconnect",
-            "format-wifi": " {essid}",
+            "interval": 1,
-            "format-ethernet": " {ipaddr}",
+            "format-alt": " {bandwidthUpBytes} |  {bandwidthDownBytes}",
-            "format-linked": " {ifname}",
+            "format-disconnected": "{icon} Disconnected",
-            "format-disconnected": " Disconnected",
+            "format-linked": " {ifname} | ↕ {bandwidthTotalBytes}",
+            "format-wifi": "{icon} {essid} | ↕ {bandwidthTotalBytes}",
+            "format-ethernet": "{icon} {ipaddr}/{cidr} | ↕ {bandwidthTotalBytes}",
+            "tooltip-format": "{ifname}: {ipaddr}/{cidr} 󰌹 {gwaddr}",
+            "format-icons": {
+                "ethernet": "󰈀",
+                "disconnected": "",
+                "wifi": [
+                    "󰖪",
+                    ""
+                ]
+            },
             "tooltip": true,
-            "tooltip-format": "IP: {ipaddr}/{cidr}\nGW: {gwaddr}/{cidr}\nNM: {netmask}",
+            "max-length": 60,
-            "max-length": 20,
+            "min-length": 30
-            "min-length": 14
         },
         "custom/audio-device": {
             "tooltip": false,
@@ -96,22 +122,17 @@
             "format": " {}",
             "exec": "wpctl status | grep -m 1 '*' | cut -d '.' -f2 | cut -d '[' -f1 | xargs"
         },
-        "custom/pipewire": {
+        "wireplumber": {
-            "format": "{icon} {percentage}%",
+            "format": "{icon}{volume}%",
-            "return-type": "json",
+            "format-muted": "󰖁  0%",
-            "signal": 8,
+            "on-right-click": "helvum",
-            "interval": "once",
+            "on-click": "pw-volume mute toggle",
-            "format-icons": {
+            "format-icons": [
-                "mute": "婢",
+                "󰕿 ",
-                "default": [
+                "󰖀 ",
-                    "奄",
+                "󰕾 "
-                    "奔",
-                    "墳"
             ]
         },
-            "on-click": "pw-volume mute toggle; pkill -RTMIN+8 waybar",
-            "exec": "pw-volume status"
-        },
         "idle_inhibitor": {
             "tooltip": false,
             "format": "{icon}",
@@ -149,6 +170,8 @@
         "custom/asusmode": {
             "interval": 1,
             "format": " {}",
+            "on-click": "asusctl profile -n",
+            "on-click-right": "rog-control-center",
             "exec": "asusctl profile -p | awk '{print $NF}'"
         },
         "memory": {
@@ -164,14 +187,14 @@
             "interval": 60,
             "tooltip-format": "{used} used out of {total} ({percentage_used}%)",
             "min-length": 5,
-            "format": "🖴 {percentage_used}%",
+            "format": "󰋊 {percentage_used}%",
             "states": {
                 "critical": 90
             }
         },
         "custom/media": {
-            "interval": 1,
             "return-type": "json",
+            "on-click": "playerctl play-pause",
             "exec": "~/.config/waybar/scripts/get-media.bash",
             "escape": true
         }

dots/.config/waybar/scripts/get-media.bash

@@ -1,10 +1,11 @@
 #!/usr/bin/env bash
 
-main() {
+get-album-info () {
 	local class
 	local text=""
-	class="$(playerctl metadata --format '{{lc(status)}}')"
 
+	while :; do
+		if class="$(playerctl metadata --format '{{lc(status)}}')"; then
 			local player_ctl_info
 			player_ctl_info="$(playerctl metadata --format '{{ artist }} | {{ title }} | {{ album }}')"
 
@@ -14,9 +15,19 @@ main() {
 			elif [[ "${class}" == "paused" ]]; then
 				text=" ${player_ctl_info}"
 			fi
+		else
+			class="paused"
+			text="󰓄 No Media"
+		fi
 
 		printf '{"class": "%s", "text": "%s"}\n' "${class}" "${text}"
+		sleep .08
+	done
+}
 
+
+main() {
+	get-album-info
 }
 
 main

dots/.config/waybar/style.css

@@ -58,13 +58,14 @@
 #battery,
 #disk,
 #custom-audio-device,
-#custom-pipewire,
 #workspaces,
 #custom-media,
 #custom-weather,
 #custom-launcher,
 #network,
 #clock,
+#wireplumber,
+#image,
 #custom-lock {
   background-color: #16161d;
   color: #dcd7ba;
@@ -72,6 +73,19 @@
   border-radius: 20px;
 }
 
+/* Media */
+#custom-media {
+  margin: 0;
+  background: linear-gradient(
+    -45deg,
+    rgba(126, 156, 216, 0.9),
+    rgba(210, 126, 153, 0.9),
+    rgba(149, 127, 184, 0.9)
+  );
+  background-size: 400% 400%;
+  animation: gradient_scroll 10s ease infinite;
+}
+
 /* Launcher */
 #custom-launcher {
   padding-right: 0.3rem;
@@ -84,48 +98,88 @@
 #cpu,
 #temperature,
 #memory,
-#disk {
+#disk,
+#battery {
   color: #7e9cd8;
+  margin-left: 0rem;
+  margin-right: 0rem;
 }
 
 #cpu {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
-  padding-left: 1rem;
+  padding-right: 0em;
-  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;
+  color: #dca561;
-  border-top-left-radius: 0;
+  border-radius: 0px;
-  border-bottom-left-radius: 0;
   padding-left: 0.35rem;
   padding-right: 1rem;
+}
+
+#battery {
   margin-left: 0rem;
+  padding-left: 0rem;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  color: #98bb6c;
+}
+
+#battery.warning {
+  color: #e6c384;
+}
+
+#battery.near-critical {
+  color: #c34043;
+}
+
+#battery.critical {
+  color: #e82424;
+  animation: blink_text 1.5s linear infinite;
+}
+
+/* Audio Device & Wireplumber Audio Return */
+#custom-audio-device,
+#wireplumber {
+  margin-right: 0rem;
+}
+
+#custom-audio-device {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  padding-right: 0.35rem;
+  color: #ff9e3b;
+}
+
+#wireplumber {
+  border-top-left-radius: 0;
+  padding-left: 0.35rem;
+  border-bottom-left-radius: 0;
+  margin-left: 0rem;
+  color: #d27e99;
 }
 
 /* Worksapces */
 #workspaces {
-  border-radius: 14px;
   margin-left: 0.25rem;
   margin-right: 0.25rem;
+  margin-top: 0rem;
+  margin-bottom: 0rem;
+  padding-top: 1em;
+  padding-bottom: 1em;
 }
 
 #workspaces * {
@@ -133,12 +187,15 @@
 }
 
 #workspaces button {
-  padding: 0px;
+  border-radius: 50%;
-  margin: 5px 5px;
+  min-height: 0.0em;
-  min-height: 0.75rem;
+  min-width: 0.0em;
-  min-width: 0.75rem;
+  padding-left: 0.0rem;
-  border-radius: 100%;
+  padding-right: 0.0rem;
+  padding-top: 0.4rem;
+  padding-bottom: 0.4rem;
   background-color: #54546d;
+  color: transparent;
 }
 
 #workspaces button.active {
@@ -169,8 +226,26 @@
 
 /* Asus Fan Mode */
 #custom-asusmode {
-  margin-right: 0.25rem;
+  color: #ffa066;
-  margin-left: 0.25rem;
+}
+
+/* Network */
+#network {
+  color: #a3d4d5;
+}
+
+#network.disconnected {
+  color: #e6c384;
+}
+
+/* Clock */
+#clock {
+  color: #ff5d62;
+}
+
+/* Lock */
+#custom-lock {
+  color: #957fb8;
 }
 
 /*=============*/
@@ -189,3 +264,21 @@
     background-position: 400% 200%;
   }
 }
+
+@keyframes blink_text {
+  50% {
+    color: transparent;
+  }
+}
+
+@keyframes gradient_scroll {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}