waybar updates

.config/waybar/hypr-config

@@ -1,17 +1,42 @@
 {
-    "layer": "bottom",
+    "layer": "top",
     "position": "top",
-    "modules-left": ["hyprland/window"],
+    "spacing": 0,
-    "modules-center": ["wlr/workspaces"],
+    "modules-left": ["wlr/workspaces"],
-    "modules-right": ["clock", "idle_inhibitor", "tray"],
+    "modules-center": ["clock"],
-    "hyprland/window": {
+    "modules-right": ["memory", "custom/gpu", "cpu", "disk", "disk#sda", "tray"],
-        "format": "{}",
-	"seperate-outputs": true
-    },
     "wlr/workspaces": {
-        "format": "{name}",
+        "format": "{icon}",
+	"all-outputs": true,
 	"on-click": "activate",
-	"sort-by-number": true
+	"sort-by-number": true,
+	"format-icons": {
+	    "urgent": ""
+	    //"active": "●",
+	    //"default": "○"
+	},
+    },
+    "custom/gpu": {
+	"exec": "cat /sys/class/hwmon/hwmon2/device/gpu_busy_percent",
+	"format": "{icon}",
+	"format-icons": ["▁", "▂", "▃", "▄", "▅", "▆", "▇", "█"],
+	"interval": 1
+    },
+    "cpu": {
+	"interval": 1,
+        "format": "{icon0}{icon1}{icon2}{icon3}{icon4}{icon5}{icon6}{icon7}{icon8}{icon9}{icon10}{icon11}{icon12}{icon13}{icon14}{icon15}",
+	"format-icons": ["▁", "▂", "▃", "▄", "▅", "▆", "▇", "█"],
+    },
+    "memory": {
+        "interval": 10
+    },
+    "disk": {
+        "path": "/",
+	"tooltip-format": "{free} available on {path}"
+    },
+    "disk#sda": {
+        "path": "/home/mark/Files",
+	"tooltip-format": "{free} available on {path}"
     },
     "idle_inhibitor": {
     	"format": "{icon}",
@@ -22,10 +47,11 @@
          }
     },
     "tray": {
-        "icon-size": 24,
+        "icon-size": 26,
-        "spacing": 16
+        "spacing": 8
     },
     "clock": {
-	"format": "{:%m-%d %H:%M}",
+	"format": "{:%H:%M}",
+	"tooltip-format": "{:%d %m}"
     }
 }

.config/waybar/style.css

@@ -2,45 +2,35 @@
 
 * {
     border: none;
-    border-radius: 0;
+    border-radius: 10px;
+    margin: 0;
+    color: @foreground;
     font-family: 'Source Code Pro';
+    text-shadow: 0 0 2px @background;
     font-weight: bold;
     font-size: 18px;
-    min-height: 0;
 }
 
 window {
-    padding: 0;
-}
-
-window#waybar {
-    background-color: alpha(@background, 0.5);
-    color: @foreground;
     background: transparent;
-
 }
 
-window#waybar.hidden {
+.modules-right, .modules-center, .modules-left {
-    opacity: 0.2;
+    padding: 0;
+    margin-top: 5px;
 }
 
-window#waybar.kitty {
+#workspaces {
-    background-color: #3F3F3F;
+   background-color: alpha(@background, 0.5);
-}
+   margin-left: 8px;
-
-#window {
-    padding: 0 15px 0 5px;
-    background-color: alpha(@color2, 0.3);
-    border-radius: 0 0 10px 0;
 }
 
 #workspaces button {
-    padding: 2px 5px 3px 5px;
+    padding: 1px 7px 2px 7px;
-    margin: 0 3px;
+    margin: 0;
     font-weight:bold;
-    background-color: alpha(@background, 0.5);
+    /*background-color: alpha(@background, 1.0);*/
     color: alpha(@foreground, 1.0);
-    border-radius: 0 0 15px 15px;
 }
 
 /* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
@@ -72,8 +62,36 @@ window#waybar.kitty {
 #mode,
 #mpd,
 #disk,
-#idle_inhibitor {
+#idle_inhibitor,
+#custom-gpu
+{
     padding: 0 10px;
-    margin: 0 5px;
+    margin: 0 8px 0 0;
     color: @foreground;
 }
+
+#clock {
+    background-color:alpha(@background, 0.5);
+}
+
+.modules-right > *:nth-child(1) > * {
+    background-color: alpha(@color1, 1.0);
+}
+.modules-right > *:nth-child(2) > * {
+    background-color: alpha(@color2, 1.0);
+}
+.modules-right > *:nth-child(3) > * {
+    background-color: alpha(@color3, 1.0);
+}
+.modules-right > *:nth-child(4) > * {
+    background-color: alpha(@color4, 1.0);
+}
+.modules-right > *:nth-child(5) > * {
+    background-color: alpha(@color5, 1.0);
+}
+.modules-right > *:nth-child(6) > * {
+    background-color: alpha(@color6, 1.0);
+}
+.modules-right > *:nth-child(7) > * {
+    background-color: alpha(@color7, 1.0);
+}