waybar config

hyprland/.config/hypr/keybinds.conf

@@ -2,7 +2,7 @@
 # /* ---- 💫 https://github.com/JaKooLit 💫 ---- */  #
 #
 $mainMod = SUPER
-$files = thunar
+$files = dolphin
 $term = kitty
 
 # Default

hyprland/.config/hypr/scripts/waybar.sh

@@ -1,6 +1,6 @@
 #!/bin/bash
 
-CONFIG_FILES="$HOME/.config/waybar/config $HOME/.config/waybar/style.css"
+CONFIG_FILES="$HOME/.config/waybar/config.jsonc $HOME/.config/waybar/style.css"
 
 trap "killall waybar" EXIT
 

hyprland/.config/waybar/config

@@ -1,32 +0,0 @@
-{
-  "layer":"top",
-  "position":"top",
-  "modules-left":["hyprland/workspaces"],
-  "modules-center":["hyprland/window"],
-  "modules-right":["wireplumber","battery","clock"],
-  "battery":{
-    "format":"{capacity}% {icon}",
-    "format-icons": ["", "", "", "", ""],
-  },
-  "clock": {
-    "format":"{:%H:%M}",
-    "format-alt": "{:%Y-%m-%d %H:%M}"
-  },
-  "idle_inhibitor": {
-    "format": "{icon}",
-    "format-icons": {
-      "activated": "",
-      "deactivated": ""
-    }
-  },
-  "wireplumber": {
-    "format":"{volume}% {icon}",
-    "format-muted": "",
-    "scroll-step": 1,
-    "on-click":"qpwgraph",
-    "format-icons": ["", "", ""],
-    "tooltip":true,
-    "tooltip-format": "{volume}%"
-  }
-}
-

hyprland/.config/waybar/config.jsonc

@@ -0,0 +1,75 @@
+{
+  "layer":"top",
+  "position":"top",
+  "height": 32,
+
+  "modules-left":["hyprland/workspaces"],
+  "hyprland/workspaces": {
+      // "persistent-workspaces":{"*":9,},
+      "sort-by":"id",
+      "format": "{icon} {windows}",
+      "format-icons":{
+        "active":"",
+        "default":"",
+      },
+      "format-window-separator": " ",
+      "window-rewrite-default": "",
+      // "window-rewrite": {
+      // "title<.*youtube.*>": "", // Windows whose titles contain "youtube"
+      // "class<librewolf>": "", // Windows whose classes are "firefox"
+      // "class<librewolf> title<.*GitHub.*>": "", // Windows whose class is "firefox" and title contains "github". Note that "class" always comes first.
+      // "kitty": "", // Windows that contain "foot" in either class or title. For optimization reasons, it will only match against a title if at least one other window explicitly matches against a title.
+      // "code": "󰨞",
+      // },
+    },
+
+  "modules-center":["hyprland/window"],
+  "hyprland/window":{
+    "separate-outputs": true,
+  },
+
+  "modules-right":["keyboard-state#caps","keyboard-state#num","wireplumber","battery","clock"],
+ 
+  "keyboard-state#caps": {
+    "capslock": true,
+    "numlock": true,
+    "format": "{name} {icon}",
+    "format-icons": {
+      "locked":"",
+      "unlocked": ""
+    }
+  },
+  // "keyboard-state#num": {
+  //   "numlock": true,
+  //   "format": "{icon}",
+  //   "format-icons": {
+  //     "locked":"󰎣",
+  //     "unlocked": ""
+  //   }
+  // },
+  "battery":{
+    "format":"{capacity}% {icon}",
+    "format-icons": ["", "", "", "", ""],
+  },
+  "clock": {
+    "format":"{:%H:%M}",
+    "format-alt": "{:%Y-%m-%d %H:%M}"
+  },
+  "idle_inhibitor": {
+    "format": "{icon}",
+    "format-icons": {
+      "activated": "",
+      "deactivated": ""
+    }
+  },
+  "wireplumber": {
+    "format":"{volume}% {icon}",
+    "format-muted": "",
+    "scroll-step": 1,
+    "on-click":"qpwgraph",
+    "format-icons": ["", "", ""],
+    "tooltip":true,
+    "tooltip-format": "{volume}%"
+  }
+}
+

hyprland/.config/waybar/style.css

@@ -1,24 +1,41 @@
 * {
-  font-family: FontAwesome, NotoSans, Helvetica, Arial, sans-serif;
+  font-family: FontAwesome, 'Noto Sans', sans-serif;
   font-size: 1rem;
+  min-height: 0;
+  border: none;
+  border-radius: 0;
 }
 
 window#waybar {
   background-color: rgba(43,48,59,0.5);
   color: #ffffff;
-  transition-property: background-color;
-  transition-duration: .5s;
 }
 
-window#waybar.hidden {
-  opacity: 0.2;
+tooltip {
+  background: rgba(43,48,59,0.5);
+  border: 1px solid rgba(100,114,125,0.5)
+}
+tooltip label {
+  color: white;
 }
 
 #wireplumber,
 #clock,
 #battery {
   padding: 0 0.625rem;
-  color: #ffffff;
+  /* color: #ffffff; */
+}
+
+#workspace button {
+  padding: 0 0.5em;
+  background: transparent;
+  color: white;
+  border-bottom: 3px solid transparent;
+}
+
+#workspace button.focused {
+  background: #64727D;
+  border-bottom: 3px solid white;
 }
 
 #window,
@@ -53,6 +70,28 @@ window#waybar.hidden {
   background-color: #00ff00;
 }
 
+#battery.charging {
+  color: white;
+  background-color: #26A65B;
+}
+
+@keyframes blink {
+  to {
+      background-color: #ffffff;
+      color: black;
+  }
+}
+
+#battery.warning:not(.charging) {
+  background: #f53c3c;
+  color: white;
+  animation-name: blink;
+  animation-duration: 0.5s;
+  animation-timing-function: steps(12);
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
 #clock {
   background-color: #ffffff;
   color: #000000;
@@ -65,3 +104,17 @@ window#waybar.hidden {
 #idle_inhibitor.deactivated {
   font-size: 1.5rem;
 }
+
+#keyboard-state {
+  margin: 0 0.625rem;
+  min-width: 0.5rem;
+  /* padding: 0 0.625rem; */
+}
+
+#keyboard-state > label {
+  padding: 0 5px;
+}
+
+#keyboard-state > label.locked {
+  background: rgba(0, 0, 0, 0.2);
+}