waybar/config.jsonc

@@ -7,13 +7,12 @@
   "spacing": 8, // Gaps between modules (4px)
   // Choose the order of the modules
   "modules-left": [
+    "custom/os",
     "hyprland/workspaces",
     "tray",
-        "hyprland/window"
+    "hyprland/window",
-    ],
-    "modules-center": [
-        "custom/spotify"
   ],
+  "modules-center": ["mpris"],
   "modules-right": [
     "custom/swww",
     "wireplumber",
@@ -23,50 +22,61 @@
     "temperature",
     "idle_inhibitor",
     "clock",
-        "custom/swaync"
+    "custom/swaync",
   ],
+  "custom/os": {
+    "format": "󱄅",
+    "on-click": "~/.config/rofi/scripts/powermenu_t1",
+  },
   "idle_inhibitor": {
     "format": "{icon}",
     "tooltip-format-activated": "On",
     "tooltip-format-deactivated": "Off",
     "format-icons": {
-            "activated": "󱫗",
+      "activated": "󱫔",
-            "deactivated": "󰔛"
+      "deactivated": "󱫐",
-        }
+    },
   },
   "hyprland/workspaces": {
     "active-only": false,
     "format": "{icon}",
     "format-icons": {
-        "default": ""
+      "default": "",
-      }
+      "1": "󰭹",
+      "2": "󰈹",
+      "3": "",
+      "4": "",
+    },
+    "persistent-workspaces": {
+      "*": 4, // 5 workspaces by default on every monitor
+    },
   },
   "hyprland/window": {
     "format": "{}",
     "rewrite": {
       "(.*) — Mozilla Firefox": "󰈹  $1",
-          "(.*) - fish": "> [$1]",
+      "~(.*)": "󰅬 $1",
-          "nv": "  neovim"
+      "nv": "  neovim",
     },
     "separate-outputs": true,
-      "max-length": "40"
+    "max-length": "40",
   },
   "tray": {
     "icon-size": 18,
-        "spacing": 10
+    "spacing": 10,
   },
   "clock": {
     "timezone": "America/New_York",
     "tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>",
     "format-alt": "{:%Y-%m-%d}",
-        "on-click": ""
+    "on-click": "",
   },
   "cpu": {
     "format": "󰻠 {usage}%",
-        "tooltip": true
+    "tooltip": true,
   },
   "memory": {
-        "format": "{}% 󰍛"
+    "format": "  {}%",
   },
   "temperature": {
     // "thermal-zone": 2,
@@ -74,11 +84,12 @@
     "critical-threshold": 80,
     // "format-critical": "{temperatureC}°C {icon}",
     "format": "{icon} {temperatureC}°C",
-        "format-icons": ["", "", ""]
+    "format-icons": ["", "", ""],
   },
   "wireplumber": {
     "format": "  {volume}%",
-      "format-mute": "  {volume}%"
+    "format-mute": "  {volume}%",
+    "on-click": "~/.config/rofi/applets/bin/volume.sh",
   },
   "network": {
     // "interface": "wlp2*", // (Optional) To force the use of this interface
@@ -86,19 +97,24 @@
     "format-wifi": "  {signalStrength}%",
     "format-ethernet": "󰈀",
     "format-linked": "{ifname} (No IP) ",
-        "format-disconnected": "󰖪"
+    "format-disconnected": "󰖪",
     //"format-alt": "{ifname}: {ipaddr}/{cidr}"
   },
-    "custom/spotify": {
+  "mpris": {
-        "format": "{}",
+    "format": "{player_icon} {dynamic}",
-        "on-click": "playerctl --player=spotify play-pause",
+    "format-paused": "{status_icon} <i>{dynamic}</i>",
-        "exec": "/usr/bin/python3 $HOME/.config/waybar/modules/mediaplayer.py --player spotify",
+    "player-icons": {
-        "return-type": "json",
+      "default": "▶",
-        "max-length": 40,
+      "mpv": "🎵",
-        "format-icons": {
+      "spotify": "",
-            "spotify": " ",
+      "firefox": "󰈹",
-            "default": "🎜 "
+    },
-        }
+    "interval": 1,
+    "status-icons": {
+      "paused": "⏸",
+    },
+    "dynamic-len": 36,
+    "on-click-middle": "playerctld shift",
   },
   "custom/swaync": {
     "format": "{icon}",
@@ -109,17 +125,16 @@
       "notification": "<span foreground='red'><small><sup>⬤</sup></small></span>",
       "none": " ",
       "dnd-notification": "<span foreground='red'><small><sup>⬤</sup></small></span>",
-        "dnd-none": " "
+      "dnd-none": " ",
-      }
+    },
   },
   "custom/swww": {
     "format": "{icon}",
     "tooltip": false,
     "tooltip-format": "Change Wallpaper",
-      "on-click": "bash ~/.config/waybar/modules/switch-wallpaper.sh &",
+    "on-click": "pywal",
     "format-icons": {
-        "default": " "
+      "default": "",
-      }
+    },
-    }
+  },
 }
-

waybar/style.css

@@ -1,37 +1,121 @@
-* {
-  /* `otf-font-awesome` is required to be installed for icons */
-  font-family: "JetBrains Mono", "Iosevka Nerd Font", FontAwesome, Roboto, Helvetica, Arial, sans-serif;
-  text-shadow: none;
-  transition: color 0.5s ease-in-out;
-  transition: background-color 0.5s ease-in-out;
-}
-
 /*
 * Color Palette
 */
-@import url('../../.cache/wal/colors-waybar.css');
+@import url("../../.cache/wal/colors-waybar.css");
+
+* {
+  /* `otf-font-awesome` is required to be installed for icons */
+  font-family: "JetBrains Mono", "Iosevka Nerd Font", FontAwesome, Roboto,
+    Helvetica, Arial, sans-serif;
+  text-shadow: none;
+  transition: color 0.5s ease-in-out;
+  transition: background-color 0.5s ease-in-out;
+  font-size: 16px;
+}
+
+@define-color button @color1;
+@define-color button-hover @color3;
+@define-color button-active @color2;
 
 /*
 * General
 */
-@import url('./styles/module-groups.css');
+@import url("./styles/waybar.css");
-@import url('./styles/modules.css');
+
-@import url('./styles/waybar.css');
+/*
+ * Workspaces
+ */
+#workspaces {
+  border-radius: 9999px;
+  background: @button;
+}
+
+#workspaces button {
+  padding: 0 9px 0 4px;
+  box-shadow: none;
+  border: none;
+  border-radius: 9999px;
+  color: @color7;
+  font-size: 24px;
+}
+
+#workspaces button.active {
+  color: @button-active;
+}
+
+#workspaces button:hover {
+  background: transparent;
+  color: @button-hover;
+}
+
+#workspaces button.focused {
+  color: @button-active;
+}
+
+#workspaces button.urgent {
+  color: #bf616a;
+}
 
 /*
 * Modules 
 */
-@import url('./styles/modules/clock.css');
+#cpu,
-@import url('./styles/modules/cpu.css');
+#memory,
-@import url('./styles/modules/idle.css');
+#network,
-@import url('./styles/modules/memory.css');
+#temperature {
-@import url('./styles/modules/network.css');
+  color: @color7;
-@import url('./styles/modules/spotify.css');
+}
-@import url('./styles/modules/swaync.css');
-@import url('./styles/modules/swww.css');
-@import url('./styles/modules/temperature.css');
-@import url('./styles/modules/tray.css');
-@import url('./styles/modules/window.css');
-@import url('./styles/modules/wireplumber.css');
-@import url('./styles/modules/workspaces.css');
 
+#clock,
+#idle_inhibitor,
+#mpris,
+#custom-swaync,
+#wireplumber,
+#custom-swww,
+#custom-os {
+  background: @button;
+}
+
+#clock:hover,
+#idle_inhibitor:hover,
+#mpris:hover,
+#custom-swaync:hover,
+#wireplumber:hover,
+#custom-swww:hover,
+#custom-os:hover {
+  background: @button-hover;
+}
+
+#idle_inhibitor.activated {
+  background-color: @button-active;
+}
+
+#idle_inhibitor {
+  padding: 0 16px 0 12px;
+}
+
+#mpris.spotify {
+  background-color: #1db954;
+}
+
+#network.disconnected {
+  color: #f53c3c;
+}
+
+#temperature.critical {
+  color: #bf616a;
+}
+
+#wireplumber.muted {
+  color: #f53c3c;
+}
+
+#custom-swww {
+  padding: 0 16px 0 8px;
+  font-size: 18px;
+}
+
+#custom-os {
+  padding: 0 12px 0 6px;
+  font-size: 24px;
+}

waybar/styles/waybar.css

@@ -1,10 +1,12 @@
 window#waybar {
-  background: linear-gradient(90deg, mix(@color0, transparent, 0.5), mix(@color1, transparent, 0.5), mix(@color0, transparent, 0.5));
+  background: @background;
   animation: fadeIn 2.5s;
+  padding: 2px 0 2px 0;
+  border-radius: 0 0 20px 20px;
 }
 
 button {
-  text-shadow: none;
+  text-shadow: 2px 2px;
 }
 
 window#waybar.hidden {
@@ -12,7 +14,38 @@ window#waybar.hidden {
 }
 
 @keyframes fadeIn {
-  0% { opacity: 0; }
+  0% {
-  100% { opacity: 1; }
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
+.module {
+  border-radius: 9999px;
+  margin: 8px 0;
+}
+
+label.module {
+  padding: 0 10px;
+  /* box-shadow: inset 0 -2px; */
+}
+
+box.module {
+  padding: 0 10px;
+}
+
+.modules-left {
+  padding: 0 3px;
+  margin-left: 10px;
+}
+
+.modules-center {
+  padding: 0 3px;
+}
+
+.modules-right {
+  padding: 0 3px;
+  margin-right: 10px;
+}