waybar: let's try a new style

diff --git a/config/dot-config/waybar/config.jsonc b/config/dot-config/waybar/config.jsonc
index cd235f22a8cd6643e9d16f275d6077c2561d97bc..98f2acc6d9a21ab32f7a46781d7a72ae8d1bc51d 100644 (file)
--- a/config/dot-config/waybar/config.jsonc
+++ b/config/dot-config/waybar/config.jsonc
@@ -3,27 +3,24 @@
   "layer": "top", // Waybar at top layer
   "position": "top", // Waybar position (top|bottom|left|right)
   "width": 3440, // Waybar width
-  "height": 20, // Waybar height, leave blank for auto
+  "height": 30, // Waybar height, leave blank for auto
   "spacing": 1, // Gaps between modules (4px)
-  "modules-left": ["custom/launcher", "hyprland/workspaces", "custom/pipespacer", "hyprland/window", "hyprland/submap"],
-  "modules-center": ["mpd"],
+  "modules-left": ["custom/launcher", "hyprland/workspaces", "custom/voidspacer", "mpd"],
+  "modules-center": ["hyprland/window", "hyprland/submap"],
   "modules-right": [
-    "tray",
-    "custom/pipespacer",
+    "custom/voidspacer",
     "cpu",
     "memory",
-    "custom/pipespacer",
     "group/temps",
-    "custom/pipespacer",
     "group/gammarelay",
-    "custom/pipespacer",
     "wireplumber",
-    "custom/pipespacer",
     "hyprland/language",
-    "custom/pipespacer",
-    "idle_inhibitor",
-    "custom/pipespacer",
+    "custom/voidspacer",
+    "tray",
+    "custom/voidspacer",
     "clock",
+    "idle_inhibitor",
+    "custom/voidspacer",
     "custom/notification",
   ],
 
@@ -84,7 +81,7 @@
        },
 
        "hyprland/language": {
-       "format": " {} ",
+       "format": " <span color='#efefef'>󰌌</span> {} ",
        "format-en": "en",
        "format-de": "de",
        },
@@ -164,18 +161,18 @@
   },
 
   "tray": {
-    "icon-size": 16,
+    "icon-size": 24,
     "spacing": 8,
   },
 
   "cpu": {
-    "format": "{usage:2} ó°\8d\9b",
+    "format": "<span color='#efefef'>{usage:2}%</span> ï\8b\9b",
     "on-click": "footclient -a popup btop -p 3",
     "interval": 1,
   },
 
   "memory": {
-    "format": "{percentage:2} 󰳿",
+    "format": "<span color='#efefef'>{percentage:2}%</span> 󰳿",
     "on-click": "footclient -a popup btop -p 4",
     "interval": 1,
   },
@@ -183,26 +180,26 @@
   "temperature": {
     "hwmon-path": "/sys/class/hwmon/hwmon5/temp1_input",
     "critical-threshold": 42,
-    "format": "󰞍 {temperatureC}°C",
+    "format": "<span color='#efefef'>{temperatureC}°C</span> 󰞍",
     "on-click-right": "foot -a popup /usr/local/bin/fan2go-tui",
   },
 
   "temperature#cpu": {
     "hwmon-path": "/sys/class/hwmon/hwmon3/temp1_input",
     "critical-threshold": 95,
-    "format": " {temperatureC}°C ",
+    "format": "<span color='#efefef'>{temperatureC}°C</span> ",
   },
 
   "temperature#board": {
     "hwmon-path": "/sys/class/hwmon/hwmon4/temp1_input",
     "critical-threshold": 85,
-    "format": "󰇅 {temperatureC}°C ",
+    "format": "<span color='#efefef'>{temperatureC}°C</span> 󰇅",
   },
 
   "temperature#gpu": {
     "hwmon-path": "/sys/class/drm/card0/device/hwmon/hwmon0/temp2_input",
     "critical-threshold": 110,
-    "format": "󰍹 {temperatureC}°C ",
+    "format": "<span color='#efefef'>{temperatureC}°C</span> 󰍹",
   },
 
   "network": {
@@ -235,9 +232,9 @@
     "on-click": "pavucontrol",
   },
 
-  "pipewire": {
+  "wireplumber": {
     "scroll-step": 5, // %, can be a float
-    "format": "{volume} {icon}",
+    "format": "<span color='#efefef'>{volume}</span> {icon}",
     "format-bluetooth": "{icon} {volume}%",
     "format-bluetooth-muted": " {icon}",
     "format-muted": " ",
@@ -253,11 +250,12 @@
       "default": ["", "", ""],
     },
     "on-click": "pavucontrol",
+    "on-click-right": "helvum",
   },
 
   "clock": {
     "timezone": "Europe/Berlin",
-    "tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>",
+    "tooltip-format": "<span size='13pt'>{calendar}</span>",
     "format-alt": "{:%Y-%m-%d}",
     "smooth-scrolling-threshold": "single",
     "calendar": {
@@ -332,69 +330,67 @@
   },
 
   "custom/gammarelay-temperature": {
-    "format": "{} ",
+    "format": "<span color='#efefef'>{}</span> ",
     "exec": "wl-gammarelay-rs watch {t}",
     "on-scroll-up": "busctl --user -- call rs.wl-gammarelay / rs.wl.gammarelay UpdateTemperature n +100",
     "on-scroll-down": "busctl --user -- call rs.wl-gammarelay / rs.wl.gammarelay UpdateTemperature n -100",
-    "on-click": "$HOME/.config/hypr/scripts/gammarelay-auto-temp.py > /dev/null 2>&1 &",
-    "on-click-middle": "busctl --user -- set-property rs.wl-gammarelay / rs.wl.gammarelay Temperature q 6500",
+    "on-click-middle": "$HOME/.config/hypr/scripts/gammarelay-auto-temp.py > /dev/null 2>&1 &",
     "on-click-right": "pkill -f '/usr/lib/python-exec/python3.12/python /home/andy/.config/hypr/scripts/gammarelay-auto-temp.py'",
     "interval": "2",
   },
   "custom/gammarelay-brightness": {
-    "format": "{}% ",
+    "format": "<span color='#efefef'>{}%</span> ",
     "exec": "wl-gammarelay-rs watch {bp}",
     "on-scroll-up": "busctl --user -- call rs.wl-gammarelay / rs.wl.gammarelay UpdateBrightness d +0.02",
     "on-scroll-down": "busctl --user -- call rs.wl-gammarelay / rs.wl.gammarelay UpdateBrightness d -0.02",
     "interval": "2",
   },
   "custom/gammarelay-gamma": {
-    "format": "{} 𝛄",
+    "format": "<span color='#efefef'>{}</span> 𝛄",
     "exec": "wl-gammarelay-rs watch {g}",
     "on-scroll-up": "busctl --user -- call rs.wl-gammarelay / rs.wl.gammarelay UpdateGamma d +0.02",
     "on-scroll-down": "busctl --user -- call rs.wl-gammarelay / rs.wl.gammarelay UpdateGamma d -0.02",
     "interval": "2",
   },
-  "group/system": {
-    "orientation": "inherit",
-    "drawer": {
-      "transition-duration": 500,
-      "children-class": "not-system",
-    },
-    "modules": ["custom/powermenu", "idle_inhibitor", "custom/wallpaper"],
-  },
 
   "group/gammarelay": {
-    "orientation": "inherit",
-    "drawer": {
-      "transition-duration": 500,
-      "children-class": "not-gammarelay",
-      "transition-left-to-right": false,
+      "orientation": "horizontal",
+      "drawer": {
+        "transition-duration": 500,
+        "children-class": "not-gammarelay",
+        "transition-left-to-right": false,
+        "click-to-reveal": 1,
+      },
+      "modules": [
+        "custom/gammarelay-temperature",
+        "custom/gammarelay-gamma",
+        "custom/gammarelay-brightness",
+      ],
     },
-    "modules": [
-      "custom/gammarelay-temperature",
-      "custom/gammarelay-gamma",
-      "custom/gammarelay-brightness",
-    ],
-  },
 
-  "group/temps": {
-    "orientation": "inherit",
-    "drawer": {
-      "transition-duration": 750,
-      "children-class": "not-temps",
-      "transition-left-to-right": false,
+    "group/temps": {
+      "orientation": "horizontal",
+      "drawer": {
+        "transition-duration": 500,
+        "children-class": "not-temps",
+        "transition-left-to-right": false,
+        "click-to-reveal": 1,
+      },
+      "modules": [
+        "temperature",
+        "temperature#cpu",
+        "temperature#board",
+        "temperature#gpu",
+      ],
+    },
+    "custom/pipespacer": {
+      "format": "󰇙",
+      "max-length": 1,
+      "tooltip": false,
+    },
+    "custom/voidspacer": {
+      "format": " ",
+      "max-length": 1,
+      "tooltip": false,
     },
-    "modules": [
-      "temperature",
-      "temperature#cpu",
-      "temperature#board",
-      "temperature#gpu",
-    ],
-  },
-  "custom/pipespacer": {
-    "format": "|",
-    "max-length": 3,
-    "tooltip": false,
-  },
 }

diff --git a/config/dot-config/waybar/style.css b/config/dot-config/waybar/style.css
index 0d27246d345ad77b000d57bf59e19cac7715e467..41bea8ad88d877bb1b2fd4928e3cd3559b71afef 100644 (file)
--- a/config/dot-config/waybar/style.css
+++ b/config/dot-config/waybar/style.css
@@ -3,9 +3,9 @@
 
 /* -----------------------------------  window ----------------------------------- */
 * {
-  font-family: "SF Mono Nerd Font";
-  font-size: 11pt;
-  min-height: 12px;
+  font-family: "Iosevka Nerd Font Propo";
+  font-size: 16px;
+  min-height: 11px;
   padding: 0;
   margin: 0;
 }
@@ -43,11 +43,9 @@ tooltip label {
   margin-right: 1px;
   margin-bottom: 3px;
   color: @base00;
-  background: @base09;
+  background: @base0D;
   border: 1px solid alpha(@base02, 0.9);
   border-radius: 4px 8px 4px 8px;
-  font-size: 13pt;
-  font-weight: 500;
 }
 
 #workspaces {
@@ -58,7 +56,6 @@ tooltip label {
   margin-left: 0px;
   margin-right: 0px;
   margin-bottom: 2px;
-  font-size: 13pt;
   background: none;
 }
 
@@ -72,7 +69,6 @@ tooltip label {
   margin-left: 1px;
   margin-right: 1px;
   margin-bottom: 2px;
-  font-weight: 500;
   transition: all 0.3s ease;
 }
 
@@ -82,7 +78,7 @@ tooltip label {
   text-shadow: inherit;
   color: @base01;
   opacity: 0.8;
-  background: @base0F;
+  background: alpha(@base07, 0.8);
   border: inherit;
   padding: 0 8px;
   transition: all 0.3s ease;
@@ -92,7 +88,7 @@ tooltip label {
 #workspaces button.focused,
 #workspaces button.active {
   border-radius: 8px;
-  background: @base09;
+  background: @base0C;
   border: 1px solid @base02;
   padding: 0 8px;
   color: @base00;
@@ -132,10 +128,12 @@ tooltip label {
 #window {
   border-radius: 0px;
   color: @base05;
-  background: none;
-  border: none;
+  background: alpha(@base03, 0.3);
   padding-left: 10px;
   padding-right: 10px;
+  border: none;
+  border-radius: 4px;
+  margin: 2px;
 }
 
 window#waybar {
@@ -143,7 +141,7 @@ window#waybar {
   border-left: 2px solid @base01;
   border-right: 2px solid @base01;
   border-bottom: 2px solid @base01;
-  background-color: alpha(@base00, 0.95);
+  background-color: alpha(@base00, 0.92);
   transition-property: background-color;
   transition-duration: 0.5s;
   /*background-image: url("/home/andy/dotfiles/config/waybar/textures/D_0.65.png");
@@ -158,62 +156,45 @@ window#waybar {
 }
 
 /* ------------------------------------ modules right ------------------------------ */
-#tray {
-  padding-left: 8px;
-  padding-right: 8px;
-  color: @base00;
-  background-color: alpha(@base00, 0.3);
-  background: none;
-  border: none;
-}
-
-#pulseaudio {
-  padding-left: 8px;
-  padding-right: 8px;
-  color: @base0C;
-  background-color: alpha(@base09, 0.3);
-  font-weight: 600;
-  background: none;
-  border: none;
-}
-
 #wireplumber {
   padding-left: 8px;
   padding-right: 8px;
   color: @base0C;
-  background-color: alpha(@base09, 0.3);
-  font-weight: 600;
-  background: none;
+  background-color: alpha(@base0C, 0.1);
   border: none;
+  border-radius: 8px;
+  margin: 2px;
 }
 
 #cpu {
   padding-left: 8px;
   padding-right: 4px;
-  color: @base0A;
-  background-color: alpha(@base0A, 0.3);
-  font-weight: 600;
-  background: none;
+  color: @base0B;
+  background-color: alpha(@base0B, 0.1);
   border: none;
+  border-radius: 8px;
+  margin: 2px;
 }
+
 #memory {
   padding-left: 4px;
   padding-right: 8px;
   color: @base0A;
-  background-color: alpha(@base0A, 0.3);
-  font-weight: 600;
-  background: none;
+  background-color: alpha(@base0A, 0.1);
   border: none;
+    border-radius: 8px;
+    margin-top: 2px;
+    margin-bottom: 2px;
 }
 
-#clock {
-  padding-left: 8px;
-  padding-right: 12px;
-  color: @base05;
-  background-color: alpha(@base00, 0.3);
-  font-weight: 600;
-  background: none;
-  border: none;
+#language {
+  padding-left: 4px;
+  padding-right: 8px;
+  color: @base09;
+  background-color: alpha(@base09, 0.1);
+    border-radius: 8px;
+    margin-top: 2px;
+    margin-bottom: 2px;
 }
 
 #temperature,
@@ -224,9 +205,10 @@ window#waybar {
   padding-left: 8px;
   padding-right: 8px;
   color: @base0D;
-  background-color: alpha(@base0D, 0.3);
-  background: none;
-  border: none;
+  background-color: alpha(@base0D, 0.1);
+    border-radius: 8px;
+    margin-top: 2px;
+    margin-bottom: 2px;
 }
 
 #temperature.critical,
@@ -237,9 +219,10 @@ window#waybar {
   padding-left: 8px;
   padding-right: 8px;
   color: @base08;
-  background-color: alpha(@base08, 0.3);
-  background: none;
-  border: none;
+  background-color: alpha(@base08, 0.1);
+    border-radius: 8px;
+    margin-top: 2px;
+    margin-bottom: 2px;
 }
 
 #custom-gammarelay-temperature,
@@ -247,20 +230,11 @@ window#waybar {
 #custom-gammarelay-brightness {
   padding-left: 8px;
   padding-right: 8px;
-  color: @base09;
-  background-color: alpha(@base09, 0.3);
-  background: none;
-  border: none;
-}
-
-#idle_inhibitor,
-#custom-wallpaper {
-  padding-left: 8px;
-  padding-right: 8px;
-  color: @base0E;
-  background-color: alpha(@base0E, 0.3);
-  background: none;
-  border: none;
+  color: @base08;
+  background-color: alpha(@base08, 0.1);
+    border-radius: 8px;
+    margin-top: 2px;
+    margin-bottom: 2px;
 }
 
 #custom-powermenu {
@@ -268,8 +242,9 @@ window#waybar {
   padding-right: 8px;
   color: @base09;
   background-color: alpha(@base09, 0.3);
-  background: none;
-  border: none;
+    border-radius: 8px;
+    margin-top: 2px;
+    margin-bottom: 2px;
 }
 
 #custom-pipespacer {
@@ -286,14 +261,66 @@ window#waybar {
   margin-right: 1px;
   margin-bottom: 3px;
   color: @base00;
-  background: @base09;
+  background: @base0E;
   border: 1px solid alpha(@base02, 0.5);
   border-radius: 8px 4px 8px 4px;
-  font-size: 13pt;
-  font-weight: 500;
 }
 
-#language {
-    color: @base09;
+#cpu:hover,
+#memory:hover,
+#clock:hover,
+#custom-gammarelay-brightness:hover,
+#custom-gammarelay-gamma:hover,
+#custom-gammarelay-temperature:hover,
+#language:hover,
+#temperature#chipset.critical:hover,
+#temperature#chipset:hover,
+#temperature#cpu.critical:hover,
+#temperature#cpu:hover,
+#temperature#gpu.critical:hover,
+#temperature#gpu:hover,
+#temperature#vrm.critical:hover,
+#temperature#vrm:hover,
+#temperature.critical:hover,
+#temperature:hover,
+#wireplumber:hover,
+#custom-wallpaper:hover {
+    background-color: alpha(@base05, 0.2);
+}
+
+#idle_inhibitor:hover {
+    background-color: alpha(@base07, 0.8);
+}
+
+#idle_inhibitor,
+#custom-wallpaper {
+  padding-left: 8px;
+  padding-right: 8px;
+  color: @base00;
+  background-color: alpha(@base0D, 0.9);
+    border-radius: 8px;
+    margin-top: 4px;
+    margin-bottom: 4px;
+}
+
+#tray {
+  padding-left: 8px;
+  padding-right: 8px;
+  color: @base00;
+  background-color: alpha(@base02, 0.3);
+  border: none;
+  border-radius: 8px;
+  margin: 2px;
+}
+
+#clock {
+  font-size: 18px;
+  padding-left: 8px;
+  padding-right: 12px;
+  color: @base0C;
+  background-color: alpha(@base0C, 0.3);
+    border-radius: 8px;
+    margin-top: 4px;
+    margin-bottom: 4px;
 }