Update waybar

waybar/.config/waybar/colors.css

@@ -8,3 +8,5 @@
 @define-color red-gradient #D32F2F;
 @define-color blue #0091EA;
 @define-color blue-gradient #00B0FF;
+@define-color purple #651FFF;
+@define-color purple-gradient #7C4DFF;

waybar/.config/waybar/config.jsonc

@@ -1,52 +1,113 @@
+// Waybar Config
+// https://github.com/Alexays/Waybar
+// Marvin Elsen <contact@marvinelsen.com>
+
+// See https://github.com/Alexays/Waybar/wiki/Configuration#bar-config
 {
     "layer": "top",
     "position": "top",
     "modules-left": ["hyprland/workspaces"],
     "modules-center": ["clock#date", "clock#time"],
-    "modules-right": ["tray", "network", "bluetooth"],
+    "modules-right": ["tray", "pulseaudio#input", "pulseaudio#output", "bluetooth", "network"],
+    // See https://github.com/Alexays/Waybar/wiki/Module:-Hyprland
     "hyprland/workspaces": {
-        "format": "{name}",
+        "format": "{icon}",
+        "format-icons": {
+            "1": "一",
+            "2": "二",
+            "3": "三",
+            "4": "四",
+            "5": "五",
+            "6": "六",
+            "7": "七",
+            "8": "八",
+            "9": "九",
+            "10": "十"
+        },
+        "on-scroll-up": "hyprctl dispatch workspace +1",
+        "on-scroll-down": "hyprctl dispatch workspace -1",
         "persistent-workspaces": {
-            "*": 5,
+            "*": 5
        }
     },
+    // See https://github.com/Alexays/Waybar/wiki/Module:-Bluetooth
     "bluetooth": {
         "format-on": "󰂯  On",
         "format-connected": "󰂱  On",
         "format-off": "󰂲  Off",
+        "format-disabled": "󰂲  Disabled",
         "format-no-controller": "󰂲  No Controller",
         "tooltip-format": "{controller_alias}\t{controller_address}\n\n{num_connections} connected",
-        "tooltip-format-connected": "{controller_alias}\t{controller_address}\n\n{num_connections} connected\n\n{device_enumerate}",
+        "tooltip-format-connected": "{controller_alias}\t{controller_address}\n\n{num_connections} connected:\n\n{device_enumerate}",
         "tooltip-format-enumerate-connected": "{device_alias}\t{device_address}",
-        "tooltip-format-enumerate-connected-battery": "{device_alias}\t{device_address}\t{device_battery_percentage}%"
+        "tooltip-format-enumerate-connected-battery": "{device_alias}\t{device_address}\t{device_battery_percentage}%",
+        "on-click": "rfkill toggle bluetooth"
     },
-    "pulseaudio": {
+    // See https://github.com/Alexays/Waybar/wiki/Module:-PulseAudio
-        "tooltip": false,
+    "pulseaudio#input": {
-        "scroll-step": 5,
+        "format": "{format_source}",
+        "format-source": "󰍬   {volume}%",
+        "format-source-muted": "󰍭   Muted",
+        "on-click": "pactl set-source-mute @DEFAULT_SOURCE@ toggle",
+        "on-click-right": "pavucontrol --tab=4",
+        "on-scroll-up": "pactl set-source-volume @DEFAULT_SOURCE@ +5%",
+        "on-scroll-down": "pactl set-source-volume @DEFAULT_SOURCE@ -5%",
+        "tooltip": false
+    },
+    // See https://github.com/Alexays/Waybar/wiki/Module:-PulseAudio
+    "pulseaudio#output": {
         "format": "{icon}   {volume}%",
-        "format-muted": "{icon} {volume}%",
+        "format-muted": "󰖁   Muted",
         "on-click": "pactl set-sink-mute @DEFAULT_SINK@ toggle",
+        "on-click-right": "pavucontrol",
         "format-icons": {
-            "default": ["", "", ""]
+            "default": ["", "", ""],
-        }
+            "headphone": "󰋋",
+            "speaker": "󰓃"
         },
+        "scroll-step": 5
+    },
+    // See https://github.com/Alexays/Waybar/wiki/Module:-Network
     "network": {
         "format-wifi": "󰖩   Online",
         "format-ethernet": "󰛳   Online",
         "format-disconnected": "󰲜   Offline",
-        "tooltip-format-ethernet": "{ifname}\t{ipaddr}"
+        "tooltip-format-ethernet": "{ifname}\t{ipaddr}",
+        "tooltip-format-wifi": "{essid}\t{signalStrength}%",
+        "tooltip-format-disconnected": "Disconnected",
+        "family": "ipv4"
     },
+    // See https://github.com/Alexays/Waybar/wiki/Module:-Tray
     "tray": {
         "icon-size": 18,
         "spacing": 10,
         "show-passive-items": true
     },
+    // See https://github.com/Alexays/Waybar/wiki/Module:-Clock
     "clock#date": {
-        "interval": 60,
+        "format": "{:%a %b %d}",
-        "format": "{:%a %b %d}"
+        "tooltip-format": "<tt>{calendar}</tt>",
+        "calendar": {
+            "mode": "month",
+            "mode-mon-col": 3,
+            "weeks-pos": "right",
+            "format": {
+                "months": "<span color='#ffead3'><b>{}</b></span>",
+                "days": "<span color='#ecc6d9'><b>{}</b></span>",
+                "weeks": "<span color='#99ffdd'><b>W{}</b></span>",
+                "weekdays": "<span color='#ffcc66'><b>{}</b></span>",
+                "today": "<span color='#ff6699'><b><u>{}</u></b></span>"
+            }
         },
+        "actions": {
+            "on-click-right": "mode",
+            "on-scroll-up": "shift_up",
+            "on-scroll-down": "shift_down"
+        }
+    },
+    // See https://github.com/Alexays/Waybar/wiki/Module:-Clock
     "clock#time": {
-        "interval": 60,
+        "format": "{:%H:%M}",
-        "format": "{:%H:%M}"
+        "tooltip": false
     }
 }

waybar/.config/waybar/style.css

@@ -1,7 +1,11 @@
+/* Waybar Style */
+/* https://github.com/Alexays/Waybar */
+/* Marvin Elsen <contact@marvinelsen.com */
+
+/* See https://github.com/Alexays/Waybar/wiki/Styling */
 @import "colors.css";
 
 * {
-    border: none;
     font-family: "Inter SemiBold", "FantasqueSansM Nerd Font";
     font-size: 1rem;
 }
@@ -10,10 +14,6 @@ window#waybar {
     background: transparent;
 }
 
-window#waybar.hidden {
-    opacity: 0.2;
-}
-
 #waybar .module {
     margin-top: 8px;
 
@@ -46,6 +46,7 @@ window#waybar.hidden {
 #workspaces button {
     border-radius: 16px;
     color: @text;
+    border-radius: 20px;
 }
 
 #workspaces button.empty {
@@ -88,3 +89,19 @@ window#waybar.hidden {
 
     background: linear-gradient(0deg, @red 0%, @red-gradient 100%);
 }
+
+#pulseaudio.input {
+    background: linear-gradient(0deg, @purple 0%, @purple-gradient 100%);
+}
+
+#pulseaudio.input.source-muted {
+    background: linear-gradient(0deg, @red 0%, @red-gradient 100%);
+}
+
+#pulseaudio.output {
+    background: linear-gradient(0deg, @purple 0%, @purple-gradient 100%);
+}
+
+#pulseaudio.output.muted {
+    background: linear-gradient(0deg, @red 0%, @red-gradient 100%);
+}