refactor: waybar styling

configs/hyprland/waybar/gandalf/config.jsonc

@@ -5,6 +5,7 @@
   "modules-center": [
     "clock",
     "hyprland/language",
+    "battery",
     "cpu",
     "custom/gpu-usage",
     "pulseaudio#input",
@@ -16,7 +17,6 @@
   ],
   "modules-right": [
     // "custom/launcher",
-    "battery",
     "network",
     "network#network-2"
   ],

configs/hyprland/waybar/gandalf/style.css

@@ -1,103 +1,17 @@
 @import "../../../.config/hypr-theme/waybar/global.css";
-
+@import "../style/main.css";
-* {
-  border: none;
-  border-radius: 4px;
-  font-family: Roboto;
-  font-size: 10px;
-  font-weight: bold;
-  color: #fff;
-  min-height: 0;
-}
 
 window {
   border-radius: 0;
-  background-color: @backgrounddark;
+  background-color: transparent;
 }
 
 window>box {
   min-height: 30px;
+  margin: 4px;
+  margin-bottom: 2px;
   padding: 5px 4px;
-}
-
-#clock,
-#battery,
-#cpu,
-#custom-gpu-usage,
-#memory,
-#disk,
-#temperature,
-#backlight,
-#network,
-#pulseaudio,
-#custom-media,
-#custom-launcher,
-#custom-power,
-#taskbar,
-#wireplumber,
-#language,
-#workspaces,
-#tray {
   background-color: @backgrounddark;
-  border: #272727 1px solid;
-  padding: 0px 6px;
-}
-
-#workspaces,
-#tray {
-  padding: 0px 10px;
-}
-
-#tray menu * {
-  all: unset;
-}
-
-#tray menu {
-  background-color: @backgrounddark;
-}
-
-#tray menu menuitem {
-  border-radius: 4px;
-  padding: 6px;
-}
-
-#tray menu separator {
-  min-height: 1px;
-  margin: 6px 0px;
-  background: @workspacesbackground2;
-}
-
-#tray menu menuitem:hover {
-  background-color: #f53c3c;
-}
-
-#workspaces * {
-  font-size: 12px;
-}
-
-#workspaces button {
-  all: unset;
-  opacity: 0.2;
-  padding: 0px 6px;
-  transition: all 0.4s cubic-bezier(0.55, -0.68, 0.48, 1.682);
-}
-
-#workspaces button:first-child {
-  padding-left: 0px;
-}
-
-#workspaces button:last-child {
-  padding-right: 0px;
-}
-
-#workspaces button.active {
-  opacity: 1;
-}
-
-#workspaces button:hover {
-  opacity: 1;
-  background-color: @backgrounddark;
-
 }
 
 #taskbar button {
@@ -108,20 +22,6 @@ window>box {
   opacity: 1;
 }
 
-#battery.charging,
-#battery.plugged {
-  background-color: #26a65b;
-}
-
-#battery.critical:not(.charging) {
-  background-color: #f53c3c;
-  animation-name: blink;
-  animation-duration: 0.5s;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
-}
-
 #backlight {
   background-color: #90b1b1;
 }
@@ -133,34 +33,4 @@ window>box {
 
 #custom-launcher {
   font-size: 18px;
-}
-
-#network {
-  min-width: 160px;
-}
-
-#network.network-2 {
-  min-width: 170px;
-
-}
-
-#network.disconnected {
-  color: red;
-}
-
-#language,
-#clock,
-#wireplumber,
-#pulseaudio,
-#cpu,
-#custom-gpu-usage {
-  min-width: 65px;
-}
-
-#memory {
-  min-width: 85px;
-}
-
-#wireplumber.muted {
-  color: red;
 }

configs/hyprland/waybar/river/style.css

@@ -1,14 +1,5 @@
 @import "../../../.config/hypr-theme/waybar/global.css";
-
+@import "../style/main.css";
-* {
-  border: none;
-  border-radius: 4px;
-  font-family: Roboto;
-  font-size: 10px;
-  font-weight: bold;
-  color: #fff;
-  min-height: 0;
-}
 
 window {
   background-color: transparent;
@@ -20,86 +11,6 @@ window>box {
   padding-bottom: 2px;
 }
 
-#clock,
-#battery,
-#cpu,
-#custom-gpu-usage,
-#memory,
-#disk,
-#temperature,
-#backlight,
-#network,
-#pulseaudio,
-#custom-media,
-#custom-launcher,
-#custom-power,
-#taskbar,
-#wireplumber,
-#language,
-#workspaces,
-#tray {
-  /* border: #272727 1px solid; */
-  background-color: @backgrounddark;
-  padding: 0px 4px;
-}
-
-#workspaces,
-#tray {
-  padding: 0px 10px;
-}
-
-#tray menu * {
-  all: unset;
-}
-
-#tray menu {
-  background-color: @backgrounddark;
-}
-
-#tray menu menuitem {
-  border-radius: 4px;
-  padding: 6px;
-}
-
-#tray menu separator {
-  min-height: 1px;
-  margin: 6px 0px;
-  background: @workspacesbackground2;
-}
-
-#tray menu menuitem:hover {
-  background-color: #f53c3c;
-}
-
-#workspaces * {
-  font-size: 12px;
-}
-
-#workspaces button {
-  all: unset;
-  opacity: 0.2;
-  padding: 0px 6px;
-  transition: all 0.4s cubic-bezier(0.55, -0.68, 0.48, 1.682);
-}
-
-#workspaces button:first-child {
-  padding-left: 0px;
-}
-
-#workspaces button:last-child {
-  padding-right: 0px;
-}
-
-#workspaces button.active {
-  opacity: 1;
-}
-
-#workspaces button:hover {
-  opacity: 1;
-  background-color: @backgrounddark;
-
-}
-
 #taskbar button {
   opacity: 0.2;
 }
@@ -108,20 +19,6 @@ window>box {
   opacity: 1;
 }
 
-#battery.charging,
-#battery.plugged {
-  background-color: #26a65b;
-}
-
-#battery.critical:not(.charging) {
-  background-color: #f53c3c;
-  animation-name: blink;
-  animation-duration: 0.5s;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
-}
-
 #backlight {
   background-color: #90b1b1;
 }
@@ -135,28 +32,6 @@ window>box {
   font-size: 18px;
 }
 
-#network {
-  min-width: 140px;
-}
-
-#network.network-2 {
-  min-width: 150px;
-}
-
-#network.disconnected {
-  color: red;
-}
-
-#language,
-#clock,
-#wireplumber,
-#pulseaudio,
-#cpu,
-#custom-gpu-usage,
-#memory {
-  min-width: 65px;
-}
-
 #wireplumber.muted {
   color: red;
 }

configs/hyprland/waybar/style/main.css

@@ -0,0 +1,110 @@
+@import "./modules/battery.css";
+@import "./modules/network.css";
+
+* {
+    border: none;
+    border-radius: 4px;
+    font-family: Roboto;
+    font-size: 10px;
+    font-weight: bold;
+    color: #fff;
+    min-height: 0;
+}
+
+#clock,
+#battery,
+#cpu,
+#custom-gpu-usage,
+#memory,
+#disk,
+#temperature,
+#backlight,
+#network,
+#pulseaudio,
+#custom-media,
+#custom-launcher,
+#custom-power,
+#taskbar,
+#wireplumber,
+#language,
+#workspaces,
+#tray {
+    background-color: @backgrounddark;
+    border: #272727 1px solid;
+    padding: 0px 6px;
+}
+
+#workspaces,
+#tray {
+    padding: 0px 10px;
+}
+
+#tray menu * {
+    all: unset;
+}
+
+#tray menu {
+    background-color: @backgrounddark;
+}
+
+#tray menu menuitem {
+    border-radius: 4px;
+    padding: 6px;
+}
+
+#tray menu separator {
+    min-height: 1px;
+    margin: 6px 0px;
+    background: @workspacesbackground2;
+}
+
+#tray menu menuitem:hover {
+    background-color: #f53c3c;
+}
+
+#workspaces * {
+    font-size: 12px;
+}
+
+#workspaces button {
+    all: unset;
+    opacity: 0.2;
+    padding: 0px 6px;
+    transition: all 0.4s cubic-bezier(0.55, -0.68, 0.48, 1.682);
+}
+
+#workspaces button:first-child {
+    padding-left: 0px;
+}
+
+#workspaces button:last-child {
+    padding-right: 0px;
+}
+
+#workspaces button.active {
+    opacity: 1;
+}
+
+#workspaces button:hover {
+    opacity: 1;
+    background-color: @backgrounddark;
+}
+
+
+#language,
+#clock,
+#wireplumber,
+#pulseaudio,
+#cpu,
+#custom-gpu-usage,
+#battery {
+    min-width: 65px;
+}
+
+#memory {
+    min-width: 85px;
+}
+
+#wireplumber.muted {
+    color: red;
+}

configs/hyprland/waybar/style/modules/battery.css

@@ -0,0 +1,13 @@
+#battery.charging,
+#battery.plugged {
+    background-color: #26a65b;
+}
+
+#battery.critical:not(.charging) {
+    background-color: #f53c3c;
+    animation-name: blink;
+    animation-duration: 0.5s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+}

configs/hyprland/waybar/style/modules/network.css

@@ -0,0 +1,11 @@
+#network {
+    min-width: 160px;
+}
+
+#network.network-2 {
+    min-width: 170px;
+}
+
+#network.disconnected {
+    color: red;
+}