From e6f9307c9fbe848c13163db7947911c0b20dde90 Mon Sep 17 00:00:00 2001
From: Nico <nico@astolfo.org>
Date: Sun, 28 Dec 2025 19:21:15 +1100
Subject: [PATCH] waybar: clean up styles and config

---
 stow/.config/waybar/config.jsonc |  13 +-
 stow/.config/waybar/style.css    | 410 +++++++++++--------------------
 2 files changed, 141 insertions(+), 282 deletions(-)

diff --git a/stow/.config/waybar/config.jsonc b/stow/.config/waybar/config.jsonc
index 9f6d3b4..742bd40 100644
--- a/stow/.config/waybar/config.jsonc
+++ b/stow/.config/waybar/config.jsonc
@@ -3,13 +3,14 @@
   "position": "right", // Waybar position (top|bottom|left|right)
   //"height": 40,
   "margin": "0 5 5 5",
-  //"width": 1350, // Waybar width
+  "width": 50,
   // Choose the order of the modules idle_inhibitor
   "modules-left": [
     "hyprland/workspaces",
     "niri/workspaces",
     "tray",
-    "custom/media"
+    "custom/media",
+    "privacy"
   ],
   "modules-center": [],
   "modules-right": [
@@ -17,7 +18,6 @@
     "wireplumber",
     "backlight",
     "battery",
-    "privacy",
     "clock",
     "custom/swaync"
   ],
@@ -159,7 +159,7 @@
   },
   "privacy": {
     "icon-spacing": 4,
-    "icon-size": 18,
+    "icon-size": 24,
     "transition-duration": 250,
     "modules": [
       {
@@ -167,11 +167,6 @@
         "tooltip": true,
         "tooltip-icon-size": 24
       },
-//      {
-//        "type": "audio-out",
-//        "tooltip": true,
-//        "tooltip-icon-size": 24
-//      },
       {
         "type": "audio-in",
         "tooltip": true,
diff --git a/stow/.config/waybar/style.css b/stow/.config/waybar/style.css
index 3480970..a037fc9 100644
--- a/stow/.config/waybar/style.css
+++ b/stow/.config/waybar/style.css
@@ -1,16 +1,11 @@
 @import "colors.css";
 
 * {
-    /* `otf-font-awesome` is required to be installed for icons */
-/*    font-family: ComicShannsMono Nerd Font, FontAwesome, Roboto, Helvetica, Arial, sans-serif;*/
     font-size: 20px;
-/*    border-radius: 10px;*/
     transition-duration: 0.5s;
-}
-
-.module {
-    margin-top: 5px;
-    margin-bottom: 5px;
+    /* `otf-font-awesome` is required to be installed for icons */
+    /* font-family: ComicShannsMono Nerd Font, FontAwesome, Roboto, Helvetica, Arial, sans-serif;*/
+    /* border-radius: 10px;*/
 }
 
 window#waybar {
@@ -18,34 +13,148 @@ window#waybar {
     background-color: transparent;
 }
 
-window#waybar.hidden {
-    opacity: 0.2;
+.module,#privacy-item {
+    margin-top: 5px;
+    margin-bottom: 5px;
+    padding: 10px 0px;
+}
+
+#privacy-item,
+#clock,
+#temperature,
+#network,
+#pulseaudio,
+#custom-media,
+#tray,
+#mode,
+#idle_inhibitor,
+#privacy-item,
+#mpd,
+#workspaces {
+    color: @primary;
+    background-color: @background;
+}
+
+#cpu,
+#memory,
+#disk,
+#battery,
+#backlight,
+#wireplumber {
+    color: @secondary;
+    background-color: @background;
+}
+
+#network,
+#custom-media {
+    color: @tertiary;
+    background-color: @background;
+}
+
+#network.disconnected,
+#wireplumber.muted {
+    color: @error;
+    background-color: @error_container;
 }
 
 /*
-window#waybar.empty {
-    background-color: transparent;
-}
-window#waybar.solo {
-    background-color: #FFFFFF;
-}
-*/
+ * hover variants
+ */
 
-/*button {
-    border: none;
-    border-radius: 0;
-}*/
+#privacy-item:hover,
+#clock:hover,
+#temperature:hover,
+#network:hover,
+#pulseaudio:hover,
+#custom-media:hover,
+#tray:hover,
+#mode:hover,
+#idle_inhibitor:hover,
+#privacy-item:hover,
+#mpd:hover,
+#workspaces:hover {
+    color: @on_primary_container;
+    background-color: @primary_container;
+}
 
-#workspaces {
+#cpu:hover,
+#memory:hover,
+#disk:hover,
+#battery:hover,
+#backlight:hover,
+#wireplumber:hover {
+    color: @on_secondary_container;
+    background-color: @secondary_container;
+}
+
+#network:hover,
+#custom-media:hover {
+    color: @on_tertiary_container;
+    background-color: @tertiary_container;
+}
+
+#network.disconnected:hover,
+#wireplumber.muted:hover {
+    color: @on_error_container;
+    background-color: @error_container;
+}
+
+/*
+ * module variations
+ */
+
+#tray > .needs-attention {
+    -gtk-icon-effect: highlight;
+    background-color: #eb4d4b;
+}
+
+#clock {
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+    margin-bottom: 0px;
+}
+
+#custom-swaync {
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
+    margin-top: 0px;
+
+    color: @background;
+    background-color: @primary;
+}
+
+#custom-swaync:hover {
+    color: @primary;
     background-color: @background;
-    color: @primary;
-/*    border-radius: 10px;*/
 }
 
-#workspaces button {
-    color: @primary;
-    padding: 5 0px;
-    border-radius: inherit;
+
+#wireplumber {
+    margin-bottom: 0px;
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+}
+
+#backlight {
+    margin-top: 0px;
+    margin-bottom: 0px;
+    border-radius: 0px;
+}
+
+#battery {
+    margin-top: 0px;
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
+}
+
+#battery.charging, #battery.plugged {
+    color: #26A65B;
+}
+
+/* workspace indicator styles */
+#workspaces {
+  padding-top: 0px;
+  padding-bottom: 0px;
 }
 
 #workspaces button.active {
@@ -53,252 +162,7 @@ window#waybar.solo {
     background-color: @primary_container;
 }
 
-#workspaces button:hover {
-    color: @on_primary;
-    background: @on_primary_container;
-    border: 0px solid black;
-}/*
-
 #workspaces button.urgent {
     color: @error;
     background-color: @error_container;
-}*/
-
-#clock,
-#battery,
-#cpu,
-#memory,
-#disk,
-#temperature,
-#backlight,
-#network,
-#pulseaudio,
-#wireplumber,
-#custom-media,
-#tray,
-#mode,
-#idle_inhibitor,
-#scratchpad,
-#power-profiles-daemon,
-#mpd {
-    padding: 10 0px;
-    background-color: @background;
-    color: @primary;
-}
-
-#clock {
-    border-bottom-left-radius: 0px;
-    border-bottom-right-radius: 0px;
-    margin-bottom: 0px;
-
-    border-right: none;
-
-    background-color: @background;
-    color: @primary;
-}
-
-#custom-swaync {
-    border-top-left-radius: 0px;
-    border-top-right-radius: 0px;
-    margin-top: 0px;
-    margin-bottom: 0px;
-
-    border-left: none;
-
-    background-color: @primary;
-    color: @background;
-    padding: 10px;
-}
-
-
-
-#wireplumber {
-    background-color: @background;
-    color: @secondary;
-
-    margin-bottom: 0px;
-    border-bottom-left-radius: 0px;
-    border-bottom-right-radius: 0px;
-}
-
-#backlight {
-    background-color: @background;
-    color: @secondary;
-
-    margin-top: 0px;
-    margin-bottom: 0px;
-    border-radius: 0px;
-}
-
-
-#battery {
-    background-color: @background;
-    color: @secondary;
-    margin-top: 0px;
-    border-top-left-radius: 0px;
-    border-top-right-radius: 0px;
-}
-
-
-
-
-#battery.charging, #battery.plugged {
-    color: #ffffff;
-    background-color: #26A65B;
-}
-
-@keyframes blink {
-    to {
-        background-color: #ffffff;
-        color: #000000;
-    }
-}
-
-/* Using steps() instead of linear as a timing function to limit cpu usage */
-#battery.critical:not(.charging) {
-    background-color: #f53c3c;
-    color: #ffffff;
-    animation-name: blink;
-    animation-duration: 0.5s;
-    animation-timing-function: steps(12);
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
-}
-
-#cpu {
-    background-color: @primary;
-    color: #000000;
-}
-
-#memory {
-    background-color: @background;
-    color: @secondary;
-}
-
-#disk {
-    background-color: @background;
-    color: @tertiary;
-}
-
-#network {
-    background-color: @background;
-    color: @tertiary;
-}
-
-#network.disconnected {
-    background-color: @background;
-    color: @error;
-}
-
-#wireplumber.muted {
-    background-color: @background;
-    color: @error;
-}
-
-#custom-media {
-    background-color: @background;
-    color: @tertiary;
-    min-height: 100px;
-}
-
-#tray {
-    background-color: @background;
-    color: @primary;
-}
-
-#tray > .passive {
-    -gtk-icon-effect: dim;
-}
-
-#tray > .needs-attention {
-    -gtk-icon-effect: highlight;
-    background-color: #eb4d4b;
-}
-
-#privacy {
-    padding: 0;
-}
-
-#privacy-item {
-    padding: 0 5px;
-    color: @primary;
-}
-
-
-/*
- * hover variants
- */
-
-#clock:hover {
-    background-color: @primary;
-    color: @background;
-}
-
-#custom-swaync:hover {
-    background-color: @background;
-    color: @primary;
-}
-
-#battery:hover {
-    background-color: @secondary;
-    color: @background;
-}
-
-#cpu:hover {
-    background-color: @primary;
-    color: @background;
-}
-
-#memory:hover {
-    background-color: @secondary;
-    color: @background;
-}
-
-#disk:hover {
-    background-color: @background;
-    color: @tertiary;
-}
-
-#backlight:hover {
-    background-color: @tertiary;
-    color: @background;
-}
-
-#network:hover {
-    background-color: @secondary;
-    color: @background;
-}
-
-#network.disconnected:hover {
-    background-color: @error;
-    color: @background;
-}
-
-#wireplumber:hover {
-    background-color: @tertiary;
-    color: @background;
-}
-
-#wireplumber.muted:hover {
-    background-color: @error;
-    color: @background;
-}
-
-#custom-media:hover {
-    background-color: @tertiary;
-    color: @background;
-}
-
-#tray:hover {
-    background-color: @primary;
-    color: @background;
-}
-
-#privacy:hover {
-    padding: 0;
-}
-
-#privacy-item:hover {
-    background-color: @primary;
-    color: @background;
 }