waybar: reorder some modules into groups

diff --git a/dot-config/waybar/config.jsonc b/dot-config/waybar/config.jsonc
index 64b1a9395779f9e4da89710973333c854a1a9da9..9ba4dcb080369e70ed8fd489f61acf1faab3f186 100644 (file)
--- a/dot-config/waybar/config.jsonc
+++ b/dot-config/waybar/config.jsonc
@@ -11,23 +11,16 @@
     "mpd"
   ],
   "modules-center": [
-    "hyprland/window",
-    "hyprland/submap"
+    "hyprland/submap",
+    "hyprland/window"
   ],
   "modules-right": [
-    "custom/voidspacer",
-    "cpu",
-    "memory",
-    "group/temps",
-    "group/gammarelay",
+    "group/sysmon",
+    "group/display",
                "network",
                "wireplumber",
-    "hyprland/language",
-    "custom/voidspacer",
-    "tray",
     "custom/voidspacer",
-    "clock",
-    "idle_inhibitor",
+    "group/trayclock",
     "custom/voidspacer",
     "custom/notification"
   ],
@@ -61,12 +54,12 @@
     "rewrite-default": "👉 {title}",
     "rewrite": {
       "(.*) – Mozilla Firefox": " $1",
-      "(.*) - qutebrowser": "ï\89© $1",
+      "(.*) - qutebrowser": "ï\89¨ $1",
       "(.*) - Kakoune": " $1",
       "(.*) - Dolphin": " $1",
       "lfrun(.*)": "󰀶 $1",
-      "NCMPCPP(.*)": "󰲹 $1",
-      "Threema(.*)": "󰭺 $1"
+      "Now playing(.*)": " Now playing $1",
+      "Threema(.*)": "󰭺 $1",
     },
     "on-click": "hyprctl dispatch pseudo",
     "on-click-right": "~/.config/hypr/scripts/mousefocus_toggle.sh",
@@ -122,6 +115,7 @@
   "mpd": {
     "format": "mpd: {stateIcon} {artist} - {album} - {title} ⸨{songPosition}|{queueLength}⸩ {consumeIcon}{randomIcon}{repeatIcon}{singleIcon}",
     "format-disconnected": "",
+    "format-paused": "",
     "format-stopped": "",
     "unknown-tag": "N/A",
     "interval": 2,
@@ -183,8 +177,8 @@
     "on-scroll-down": "mpc volume -5 > /dev/null 2>&1"
   },
   "tray": {
-    "icon-size": 24,
-    "spacing": 8
+    "icon-size": 18,
+    "spacing": 6
   },
   "cpu": {
     //"format": "<span color='#efefef'>{usage:2}%</span> ",
@@ -302,10 +296,10 @@
     "escape": true
   },
   "idle_inhibitor": {
-    "format": "{icon}",
+    "format": "{icon} ",
     "format-icons": {
-      "activated": "",
-      "deactivated": ""
+      "activated": " on",
+      "deactivated": " off"
     }
   },
   "custom/wallpaper": {
@@ -340,6 +334,29 @@
     "on-scroll-down": "busctl --user -- call rs.wl-gammarelay / rs.wl.gammarelay UpdateGamma d -0.02",
     "interval": "2"
   },
+  "group/trayclock": {
+    "orientation": "horizontal",
+    "modules": [
+      "tray",
+      "clock",
+    ]
+  },
+  "group/display": {
+    "orientation": "horizontal",
+    "modules": [
+      "idle_inhibitor",
+      "group/gammarelay",
+      "hyprland/language"
+    ]
+  },
+  "group/sysmon": {
+    "orientation": "horizontal",
+    "modules": [
+      "cpu",
+      "group/temps",
+      "memory"
+    ]
+  },
   "group/gammarelay": {
     "orientation": "inherit",
     "drawer": {

diff --git a/dot-config/waybar/style.css b/dot-config/waybar/style.css
index c39c3416c03863c4d0dd178b8ec5d2aeb12a3075..40a9f2b28adb227230d1874723aee2d91838e5d7 100644 (file)
--- a/dot-config/waybar/style.css
+++ b/dot-config/waybar/style.css
@@ -4,8 +4,8 @@
 /* -----------------------------------  window ----------------------------------- */
 * {
   font-family: "Iosevka Nerd Font Propo";
-  font-size: 16px;
-  min-height: 11px;
+  font-size: 13px;
+  min-height: 7px;
   padding: 0;
   margin: 0;
 }
@@ -34,33 +34,7 @@ tooltip label {
   color: @base05;
 }
 
-/* ------------------------------------ modules individual config  ------------------------------- */
-#custom-launcher {
-  padding-left: 10px;
-  padding-right: 10px;
-  margin-top: 2px;
-  margin-left: 1px;
-  margin-right: 1px;
-  margin-bottom: 3px;
-  color: @base00;
-  background: @base0D;
-  border: 1px solid @base03;
-  border-radius: 4px 8px 4px 8px;
-}
-
-#custom-notification {
-  padding-left: 10px;
-  padding-right: 10px;
-  margin-top: 2px;
-  margin-left: 1px;
-  margin-right: 1px;
-  margin-bottom: 3px;
-  color: @base00;
-  background: @base0E;
-  border: 1px solid @base03;
-  border-radius: 8px 4px 8px 4px;
-}
-
+/* ------------------------------------ workspaces begin ------------------------------ */
 #workspaces {
   border-radius: 0px;
   padding-left: 5px;
@@ -78,7 +52,7 @@ tooltip label {
   color: @base00;
   border: 1px solid @base03;
   padding: 0 8px;
-  margin-top: 1px;
+  margin-top: 2px;
   margin-left: 1px;
   margin-right: 1px;
   margin-bottom: 2px;
@@ -112,215 +86,293 @@ tooltip label {
   color: @base00;
   transition: all 0.3s ease;
 }
+/* ------------------------------------ workspaces end ------------------------------ */
 
-#mpd {
-  border-radius: 0px;
-  padding-left: 8px;
-  padding-right: 8px;
-  margin-top: 2px;
+/* ------------------------------------ modules individual config  ------------------------------- */
+#custom-launcher {
+  padding-left: 10px;
+  padding-right: 10px;
+  margin-top: 1px;
   margin-left: 1px;
   margin-right: 1px;
   margin-bottom: 2px;
-  color: @base05;
-  background: none;
-  border: none;
+  color: @base00;
+  background: @base0D;
+  border: 1px solid @base01;
+  border-radius: 4px 8px 4px 8px;
 }
 
-#mpris {
-  padding-left: 8px;
-  padding-right: 8px;
+#custom-notification {
+  padding-left: 10px;
+  padding-right: 10px;
+  margin-top: 1px;
+  margin-left: 1px;
+  margin-right: 1px;
+  margin-bottom: 2px;
   color: @base00;
-  background: none;
+  background: @base0E;
+  border: 1px solid @base01;
+  border-radius: 8px 4px 8px 4px;
+}
+
+#mpd {
+  padding-left: 4px;
+  padding-right: 4px;
+  color: @base0D;
+  background-color: alpha(@base0D, 0.1);
   border: none;
+    border-radius: 0px 0px 4px 4px;
+    margin-top: 0px;
+    margin-bottom: 4px;
+    border-top: none;
+    border-left: 1px solid;
+    border-right: 1px solid;
+    border-bottom: 1px solid;
+    border-color: alpha(@base0D, 0.4);
 }
 
-#tray {
+#mpris {
   padding-left: 8px;
   padding-right: 8px;
   color: @base00;
-  background-color: alpha(@base02, 0.8);
+  background: none;
   border: none;
-  border-radius: 8px;
-  margin-top: 2px;
-  margin-left: 1px;
-  margin-right: 1px;
-  margin-bottom: 2px;
 }
 
 #window {
-  border-radius: 0px;
-  color: @base05;
-  background: alpha(@base03, 0.3);
   padding-left: 10px;
   padding-right: 10px;
-  border: none;
-  border-radius: 4px;
-  margin: 2px;
+  color: @base05;
+  background-color: alpha(@base04, 0.1);
+    border-radius: 0px 0px 4px 4px;
+    margin-top: 0px;
+    margin-bottom: 4px;
+    border-top: none;
+    border-left: 1px solid;
+    border-right: 1px solid;
+    border-bottom: 1px solid;
+    border-color: alpha(@base04, 0.4);
 }
 
 window#waybar {
-  border-top: 0px solid @base01;
-  border-left: 2px solid @base01;
-  border-right: 2px solid @base01;
-  border-bottom: 2px solid @base01;
-  background-color: alpha(@base00, 0.92);
+  border-top: none;
+  border-left: 1px solid @base00;
+  border-right: 1px solid @base00;
+  border-bottom: 1px solid @base00;
+  background-color: alpha(@base01, 0.92);
   transition-property: background-color;
   transition-duration: 0.5s;
-  /*background-image: url("/home/andy/dotfiles/config/waybar/textures/D_0.65.png");
-  background-position: topleft;
-  background-repeat: repeat-x;
-  */
+  /*background: linear-gradient(180deg, rgba(21,21,21,1) 0%, rgba(21,21,21,1) 45%, rgba(32,32,32,0.3) 100%);*/
 }
 
 #submap {
-    color: @base00;
-    background-color: @base08;
-}
-
-/* ------------------------------------ modules bulk config ------------------------------ */
-#wireplumber {
-  padding-left: 8px;
-  padding-right: 8px;
-  color: @base0C;
-  background-color: alpha(@base0C, 0.1);
-  border: none;
-    border-radius: 0px 0px 4px 4px;
+    font-weight: 500;
+    padding-left: 6px;
+    padding-right: 6px;
+    color: @base08;
+    background-color: alpha(@base08, 0.1);
+    border-radius: 0px 4px 4px 0px;
     margin-top: 0px;
-    margin-bottom: 2px;
-    border-top: 0px solid;
+    margin-bottom: 4px;
+    border-top: none;
     border-left: 1px solid;
     border-right: 1px solid;
     border-bottom: 1px solid;
-    border-color: alpha(@base0C, 0.4);
+    border-color: alpha(@base08, 0.4);
 }
 
+/* ------------------------------------ sysmon group begin ------------------------------ */
 #cpu {
-  padding-left: 8px;
-  padding-right: 4px;
+  padding-left: 6px;
+  padding-right: 6px;
   color: @base0B;
   background-color: alpha(@base0B, 0.1);
   border: none;
-    border-radius: 0px 0px 4px 4px;
+    border-radius: 0px 0px 0px 4px;
     margin-top: 0px;
-    margin-bottom: 2px;
-    border-top: 0px solid;
+    margin-bottom: 4px;
+    border-top: none;
     border-left: 1px solid;
-    border-right: 1px solid;
+    border-right: none;
     border-bottom: 1px solid;
     border-color: alpha(@base0B, 0.4);
 }
-
+#temperature,
+#temperature#cpu,
+#temperature#chipset,
+#temperature#vrm,
+#temperature#gpu {
+  padding-left: 6px;
+  padding-right: 6px;
+  color: @base0B;
+  background-color: alpha(@base0B, 0.1);
+    border-radius: 0px 0px 0px 0px;
+    margin-top: 0px;
+    margin-bottom: 4px;
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    border-bottom: 1px solid;
+    border-color: alpha(@base0B, 0.4);
+}
+#temperature.critical,
+#temperature#cpu.critical,
+#temperature#chipset.critical,
+#temperature#vrm.critical,
+#temperature#gpu.critical {
+  padding-left: 6px;
+  padding-right: 6px;
+  color: @base08;
+  background-color: alpha(@base08, 0.1);
+    border-radius: 0px 0px 0px 0px;
+    margin-top: 0px;
+    margin-bottom: 4px;
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    border-bottom: 1px solid;
+    border-color: alpha(@base08, 0.4);
+}
 #memory {
-  padding-left: 4px;
-  padding-right: 8px;
-  color: @base0A;
-  background-color: alpha(@base0A, 0.1);
+  padding-left: 6px;
+  padding-right: 6px;
+  color: @base0B;
+  background-color: alpha(@base0B, 0.1);
   border: none;
-    border-radius: 0px 0px 4px 4px;
+    border-radius: 0px 0px 4px 0px;
     margin-top: 0px;
-    margin-bottom: 2px;
-    border-top: 0px solid;
-    border-left: 1px solid;
+    margin-bottom: 4px;
+    border-top: none;
+    border-left: none;
     border-right: 1px solid;
     border-bottom: 1px solid;
-    border-color: alpha(@base0A, 0.4);
+    border-color: alpha(@base0B, 0.4);
 }
+/* ------------------------------------ sysmon group end ------------------------------ */
 
-#network {
-  padding-left: 4px;
-  padding-right: 4px;
-  color: @base0E;
-  background-color: alpha(@base0E, 0.1);
-  border: none;
-    border-radius: 0px 0px 4px 4px;
+/* ------------------------------------ trayclock group begin ------------------------------ */
+#tray {
+  padding-left: 6px;
+  padding-right: 6px;
+  color: @base00;
+  background-color: alpha(@base04, 0.1);
+    border-radius: 0px 0px 0px 4px;
     margin-top: 0px;
-    margin-bottom: 2px;
-    border-top: 0px solid;
+    margin-bottom: 4px;
+    border-top: none;
     border-left: 1px solid;
+    border-right: none;
+    border-bottom: 1px solid;
+    border-color: alpha(@base04, 0.4);
+}
+
+#clock {
+    font-weight: 500;
+  padding-left: 6px;
+  padding-right: 6px;
+  color: @base06;
+  background-color: alpha(@base04, 0.1);
+    border-radius: 0px 0px 4px 0px;
+    margin-top: 0px;
+    margin-bottom: 4px;
+    border-top: none;
+    border-left: none;
     border-right: 1px solid;
     border-bottom: 1px solid;
-    border-color: alpha(@base0E, 0.4);
+    border-color: alpha(@base04, 0.4);
 }
+/* ------------------------------------ trayclock group end ------------------------------ */
 
-#language {
-  padding-left: 2px;
+/* ------------------------------------ display group begin ------------------------------ */
+#idle_inhibitor {
+  padding-left: 6px;
   padding-right: 2px;
-  color: @base09;
-  background-color: alpha(@base09, 0.1);
-    border-radius: 0px 0px 4px 4px;
+  color: @base0A;
+  background-color: alpha(@base0A, 0.1);
+    border-radius: 0px 0px 0px 4px;
     margin-top: 0px;
-    margin-bottom: 2px;
-    border-top: 0px solid;
+    margin-bottom: 4px;
+    border-top: none;
     border-left: 1px solid;
-    border-right: 1px solid;
+    border-right: none;
     border-bottom: 1px solid;
-    border-color: alpha(@base09, 0.4);
+    border-color: alpha(@base0A, 0.4);
 }
 
-#temperature,
-#temperature#cpu,
-#temperature#chipset,
-#temperature#vrm,
-#temperature#gpu {
-  padding-left: 8px;
-  padding-right: 8px;
-  color: @base0D;
-  background-color: alpha(@base0D, 0.1);
-    border-radius: 0px 0px 4px 4px;
+#custom-gammarelay-temperature,
+#custom-gammarelay-gamma,
+#custom-gammarelay-brightness {
+  padding-left: 4px;
+  padding-right: 4px;
+  color: @base0A;
+  background-color: alpha(@base0A, 0.1);
+    border-radius: 0px 0px 0px 0px;
     margin-top: 0px;
-    margin-bottom: 2px;
-    border-top: 0px solid;
-    border-left: 1px solid;
+    margin-bottom: 4px;
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    border-bottom: 1px solid;
+    border-color: alpha(@base0A, 0.4);
+}
+#language {
+  padding-left: 2px;
+  padding-right: 2px;
+  color: @base0A;
+  background-color: alpha(@base0A, 0.1);
+    border-radius: 0px 0px 4px 0px;
+    margin-top: 0px;
+    margin-bottom: 4px;
+    border-top: none;
+    border-left: none;
     border-right: 1px solid;
     border-bottom: 1px solid;
-    border-color: alpha(@base0D, 0.4);
+    border-color: alpha(@base0A, 0.4);
 }
+/* ------------------------------------ display group end ------------------------------ */
 
-#temperature.critical,
-#temperature#cpu.critical,
-#temperature#chipset.critical,
-#temperature#vrm.critical,
-#temperature#gpu.critical {
-  padding-left: 8px;
-  padding-right: 8px;
-  color: @base08;
-  background-color: alpha(@base08, 0.1);
+/* ------------------------------------ modules bulk config ------------------------------ */
+#wireplumber {
+  padding-left: 6px;
+  padding-right: 6px;
+  color: @base0C;
+  background-color: alpha(@base0C, 0.1);
+  border: none;
     border-radius: 0px 0px 4px 4px;
     margin-top: 0px;
-    margin-bottom: 2px;
-    border-top: 0px solid;
+    margin-bottom: 4px;
+    border-top: none;
     border-left: 1px solid;
     border-right: 1px solid;
     border-bottom: 1px solid;
-    border-color: alpha(@base08, 0.4);
+    border-color: alpha(@base0C, 0.4);
 }
 
-#custom-gammarelay-temperature,
-#custom-gammarelay-gamma,
-#custom-gammarelay-brightness {
-  padding-left: 8px;
-  padding-right: 8px;
-  color: @base08;
-  background-color: alpha(@base08, 0.1);
+#network {
+  padding-left: 4px;
+  padding-right: 4px;
+  color: @base09;
+  background-color: alpha(@base09, 0.1);
+  border: none;
     border-radius: 0px 0px 4px 4px;
     margin-top: 0px;
-    margin-bottom: 2px;
-    border-top: 0px solid;
+    margin-bottom: 4px;
+    border-top: none;
     border-left: 1px solid;
     border-right: 1px solid;
     border-bottom: 1px solid;
-    border-color: alpha(@base08, 0.4);
+    border-color: alpha(@base09, 0.4);
 }
 
 #custom-powermenu {
-  padding-left: 8px;
-  padding-right: 8px;
+  padding-left: 4px;
+  padding-right: 4px;
   color: @base09;
   background-color: alpha(@base09, 0.3);
     border-radius: 0px 0px 4px 4px;
     margin-top: 0px;
-    margin-bottom: 2px;
-    border-top: 0px solid;
+    margin-bottom: 4px;
+    border-top: none;
     border-left: 1px solid;
     border-right: 1px solid;
     border-bottom: 1px solid;
@@ -361,34 +413,3 @@ window#waybar {
     background-color: alpha(@base07, 0.7);
 }
 
-#idle_inhibitor,
-#custom-wallpaper {
-  padding-left: 4px;
-  padding-right: 4px;
-  color: @base0D;
-  background-color: alpha(@base0D, 0.3);
-    border-radius: 0px 0px 4px 4px;
-    margin-top: 0px;
-    margin-bottom: 2px;
-    border-top: 0px solid;
-    border-left: 1px solid;
-    border-right: 1px solid;
-    border-bottom: 1px solid;
-    border-color: alpha(@base0D, 0.4);
-}
-
-#clock {
-  padding-left: 8px;
-  padding-right: 12px;
-  color: @base0C;
-  background-color: alpha(@base0C, 0.3);
-    border-radius: 0px 0px 4px 4px;
-    margin-top: 0px;
-    margin-bottom: 2px;
-    border-top: 0px solid;
-    border-left: 1px solid;
-    border-right: 1px solid;
-    border-bottom: 1px solid;
-    border-color: alpha(@base0C, 0.4);
-}
-