feat: waybar modules styles

configs/hyprland/waybar/gandalf/config.jsonc

@@ -6,6 +6,8 @@
     "clock",
     "hyprland/language",
     "battery",
+    "backlight",
+    "memory",
     "cpu",
     "custom/gpu-usage",
     "pulseaudio#input",
@@ -119,22 +121,18 @@
     "on-click": "activate",
     "format": "{icon}",
     "format-icons": {
-      // dot style :
       // "active": "",
-      // "default": ""
-      // symbolic style :
+      "default": "",
       "1": "",
       "2": "",
       "3": "",
       "4": "",
       "5": "",
-      "6": "",
-      "7": "",
-      "8": "",
-      "9": ""
+      "6": ""
     },
     "persistent-workspaces": {
-      "*": 7
+      "eDP-1": 7,
+      "HDMI-A-1": 6
     }
   },
   "keyboard-state": {
@@ -164,7 +162,7 @@
     "interval": 1
   },
   "memory": {
-    "format": "{used:0.1f} / {total:0.1f}  ",
+    "format": "{used:0.1f} / {total:0.0f}  ",
     "interval": 5
   },
   "backlight": {

configs/hyprland/waybar/gandalf/style.css

@@ -12,25 +12,4 @@ window>box {
   margin-bottom: 2px;
   padding: 5px 4px;
   background-color: @backgrounddark;
-}
-
-#taskbar button {
-  opacity: 0.2;
-}
-
-#taskbar button.active {
-  opacity: 1;
-}
-
-#backlight {
-  background-color: #90b1b1;
-}
-
-#custom-power {
-  font-size: 18px;
-  min-width: 20px;
-}
-
-#custom-launcher {
-  font-size: 18px;
 }

configs/hyprland/waybar/river/style.css

@@ -9,29 +9,4 @@ window>box {
   min-height: 28px;
   padding: 6px;
   padding-bottom: 2px;
-}
-
-#taskbar button {
-  opacity: 0.2;
-}
-
-#taskbar button.active {
-  opacity: 1;
-}
-
-#backlight {
-  background-color: #90b1b1;
-}
-
-#custom-power {
-  font-size: 18px;
-  min-width: 20px;
-}
-
-#custom-launcher {
-  font-size: 18px;
-}
-
-#wireplumber.muted {
-  color: red;
 }

configs/hyprland/waybar/style/main.css

@@ -1,5 +1,6 @@
 @import "./modules/battery.css";
 @import "./modules/network.css";
+@import "./modules/taskbar.css";
 
 * {
     border: none;
@@ -34,70 +35,14 @@
     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 {
+#battery,
+#backlight {
     min-width: 65px;
 }
 
@@ -107,4 +52,13 @@
 
 #wireplumber.muted {
     color: red;
+}
+
+#custom-power {
+    font-size: 18px;
+    min-width: 20px;
+}
+
+#custom-launcher {
+    font-size: 18px;
 }

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

@@ -1,13 +1,24 @@
 #battery.charging,
 #battery.plugged {
-    background-color: #26a65b;
+    color: #00ff00;
+    animation: pulse 2s cubic-bezier(0.075, 0.82, 0.165, 1) infinite;
 }
 
 #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;
+    animation: pulse 2s cubic-bezier(0.075, 0.82, 0.165, 1) infinite;
+}
+
+@keyframes pulse {
+    0% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.5;
+    }
+
+    100% {
+        opacity: 1;
+    }
 }

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

@@ -0,0 +1,63 @@
+#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;
+}
+
+#taskbar button.active {
+    opacity: 1;
+}