made a base config for waybar!

2 files changed, 183 insertions, 160 deletions

diff --git a/config/hyprland/waybar/config.jsonc b/config/hyprland/waybar/config.jsonc
index 5428f79..ea9d1b3 100644
--- a/config/hyprland/waybar/config.jsonc
+++ b/config/hyprland/waybar/config.jsonc
@@ -1,98 +1,81 @@
 {
-	"position": "top", 
-	"height": 25,
-
-	"modules-left":   ["wlr/workspaces"],
-	"modules-center": ["custom/media"],
-	"modules-right":  ["battery", "network", "pulseaudio", "clock", "tray"],
-
-	"wlr/workspaces": {
-		"disable-scroll": true,
-		"all-outputs": true,
+    // "layer": "top", // Waybar at top layer
+    // "position": "bottom", // Waybar position (top|bottom|left|right)
+    "height": 30, // Waybar height (to be removed for auto height)
+    // "width": 1280, // Waybar width
+    "spacing": 0, // Gaps between modules (4px)
+    // Choose the order of the modules
+    "modules-left": ["wlr/workspaces"],
+    "modules-center": ["hyprland/window"],
+    "modules-right": ["mpd", "pulseaudio",  "cpu", "memory", "backlight", "battery", "battery#bat2", "clock", "tray"],
+    // Modules configuration
+    "wlr/workspaces": {
+        "disable-scroll": true,
+        "all-outputs": true,
+        "format": "{name}",
 		"on-click": "activate",
-	//"format": "{icon}",
-	"persistent_workspaces": {
-		"1": [],
-		"2": [],
-		"3": [],
-		"4": [],
-		"5": [],
-		"6": [],
-		"7": [],
-		"8": [],
-		"9": [],
-		"10": []
-	},
-	/*"format-icons": {
-	  "1": "",
-	  "2": "",
-	  "3": "",
-	  "4": "",
-	  "5": "",
-	  "6": "",
-	  "7": "",
-	  "8": "",
-	  "9": "",
-	  "10": "",
-	  "default": "",
-	  "active": ""
-	}*/
-	},
-	"battery": {
-		"states": {
-			"good": 95,
-			"warning": 30,
-			"critical": 15
-		},
-		"format": "{capacity}% {icon}",
-		"format-charging": "{capacity}% ",
-		"format-plugged": "{capacity}% ",
-		"format-alt": "{time} {icon}",
-		// "format-good": "", // An empty format will hide the module
-		// "format-full": "",
-		"format-icons": ["", "", "", "", ""]
-	},
-	"battery#bat2": {
-		"bat": "BAT2"
-	},
-	"clock": {
-		"format": "{: %R   %d/%m}",
-		"tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>"
-	},
-	"network": {
-		"format-wifi": "  {essid}",
-		"format-ethernet": " {essid}",
-		"format-linked": "{ifname} (No IP) ",
-		"format-disconnected": "睊 Disconnected",
-		"tooltip-format-wifi": "Signal Strenght: {signalStrength}% | Down Speed: {bandwidthDownBits}, Up Speed: {bandwidthUpBits}"
-	},
-	"pulseaudio": {
-		"format": "{icon} {volume}%",
-		"format-muted": "Muted",
-		"on-click": "pactl set-sink-mute @DEFAULT_SINK@ toggle",
-		"scroll-step": 1,
-		"format-icons": {
-			"headphone": "",
-			"hands-free": "",
-			"headset": "",
-			"phone": "",
-			"portable": "",
-			"car": "",
-			"default": ["", "", "墳", ""]
-		}
-	},
-	"mpd": {
-		"format": "{icon} {}",
-		"return-type": "json",
-		"max-length": 40,
-		"format-icons": {
-			"spotify": "",
-			"default": ""
-		},
-		"escape": true,
-	},
-	"tray": {
-		"icon-size": 13,
-		"spacing": 10
+    },
+	"hyprland/window": {
+		"format": "{}",
+		"seperate-outputs": true
 	},
+    "mpd": {
+        "format": "{artist} - {title} {elapsedTime:%M:%S}/{totalTime:%M:%S}",
+        "format-disconnected": "",
+        "format-stopped": "",
+        "format-paused": "",
+        "unknown-tag": "",
+        "interval": 1,
+		"title-len": 48,
+        "tooltip": false
+    },
+    "clock": {
+		"tooltip": false,
+    },
+    "cpu": {
+        "format": "{usage}% ",
+        "tooltip": false
+    },
+    "memory": {
+        "format": "{used:0.1f}G "
+    },
+    "backlight": {
+        // "device": "acpi_video1",
+        "format": "{percent}% {icon}",
+        "format-icons": ["", "", "", "", "", "", "", "", ""]
+    },
+    "battery": {
+        "states": {
+            // "good": 95,
+            "warning": 30,
+            "critical": 15
+        },
+        "format": "{capacity}% {icon}",
+        "format-charging": "{capacity}% ",
+        "format-plugged": "{capacity}% ",
+        "format-alt": "{time} {icon}",
+        // "format-good": "", // An empty format will hide the module
+        // "format-full": "",
+        "format-icons": ["", "", "", "", ""]
+    },
+    "battery#bat2": {
+        "bat": "BAT2"
+    },
+    "pulseaudio": {
+        // "scroll-step": 1, // %, can be a float
+        "format": "{volume}% {icon}",
+        "format-bluetooth": "{volume}% {icon} {format_source}",
+        "format-bluetooth-muted": " {icon} {format_source}",
+        "format-muted": " {format_source}",
+        "format-icons": {
+            "headphone": "",
+            "hands-free": "",
+            "headset": "",
+            "phone": "",
+            "portable": "",
+            "car": "",
+            "default": ["", "", ""]
+        },
+        "on-click": "pavucontrol"
+    },
 }
diff --git a/config/hyprland/waybar/style.css b/config/hyprland/waybar/style.css
index c1a3f93..6621c03 100644
--- a/config/hyprland/waybar/style.css
+++ b/config/hyprland/waybar/style.css
@@ -1,127 +1,167 @@
 * {
-    border: none;
-    border-radius: 0;
-    font-family: "FiraCode Nerd Font";
+    font-family: JetBrains Mono;
+	font-weight: bold;
     font-size: 13px;
-    min-height: 0;
 }
 
 window#waybar {
-    background: rgba(129,161,193,0.54);
-    color: #2e3440;
-	border-radius: 3px;
-	border: solid #2e3449 1px;
+    background-color: rgba(46, 52, 64, 0.5);
+    border-bottom: 3px solid rgba(76, 86, 106, 0.5);
+	color: #d8dee9;
+    transition-property: background-color;
+    transition-duration: .5s;
 }
 
-#window {
-    font-weight: normal;
-    font-family: "FiraCode Nerd Font";
+window#waybar.hidden {
+    opacity: 0.2;
 }
 
-#workspaces {
-    padding: 0 5px;
+button {
+    /* Use box-shadow instead of border so the text isn't offset */
+    box-shadow: inset 0 -3px transparent;
+    /* Avoid rounded borders under each button name */
+    border: none;
+    border-radius: 0;
+}
+
+/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
+button:hover {
+    background: inherit;
+    box-shadow: inset 0 -3px #d8dee9;
 }
 
 #workspaces button {
     padding: 0 5px;
-    color: #BBBBBB;
+    color: #d8dee9;
 }
 
-#workspaces button.visible {
-  color: inherit;
-  background-color: #ff007c;
+#workspaces button:hover {
+    background: rgba(0, 0, 0, 0.2);
 }
 
-#workspaces button.active{
-  color: inherit;
-  background-color: #ff007c;
+#workspaces button.active {
+    background-color: #64727D;
+    box-shadow: inset 0 -3px #bcb4ee;
 }
 
-#workspaces button.focused {
-    color: #BBBBBB;
-    background-color: #ff007c;
+#workspaces button.urgent {
+    background-color: #eb4d4b;
 }
 
-#workspaces button.urgent {
-  color: #F44747;
+#mode {
+    background-color: #64727D;
+    border-bottom: 3px solid #ffffff;
+}
+
+#clock,
+#battery,
+#cpu,
+#memory,
+#disk,
+#temperature,
+#backlight,
+#network,
+#pulseaudio,
+#wireplumber,
+#custom-media,
+#tray,
+#mode,
+#idle_inhibitor,
+#scratchpad,
+#mpd {
+    padding: 0 10px;
 }
-#workspaces button.hidden {
-  color: #F44747;
+
+#window {
+	background-color: #88c0d0;
+	color: #2e3440;
+	border-radius: 20px;
+	padding: 0 10px;
 }
 
-#tags button {
-    padding: 0 5px;
-    color: #BBBBBB;
+#window,
+#workspaces {
+    margin: 0 4px;
 }
 
-#tags button.occupied {
-  color: inherit;
-  background-color: #ff007c;
+/* If workspaces is the leftmost module, omit left margin */
+.modules-left > widget:first-child > #workspaces {
+    margin-left: 0;
 }
 
+/* If workspaces is the rightmost module, omit right margin */
+.modules-right > widget:last-child > #workspaces {
+    margin-right: 0;
+}
 
+#clock {
+    background-color: #64727D;
+}
 
-#tags button.focused {
-    color: #BBBBBB;
-    background-color: #ff007c;
+#battery {
+    background-color: #ffffff;
+    color: #000000;
 }
 
-#tags button.urgent {
-  color: #F44747;
+#battery.charging, #battery.plugged {
+    color: #ffffff;
+    background-color: #26A65B;
 }
 
-#mode {
-    background: #ff007c;
-    border-bottom: 3px solid #BBBBBB;
+#battery.critical:not(.charging) {
+    background-color: #f53c3c;
+    color: #ffffff;
 }
 
-#clock, #battery, #cpu, #memory, #network, #pulseaudio, #custom-spotify, #tray, #mode, #custom-wofi-power {
-    padding: 0 10px;
-    margin: 0 2px;
+label:focus {
+    background-color: #000000;
 }
 
-#clock {
-    font-weight: normal;
+#backlight {
+    background-color: #90b1b1;
 }
 
-#battery icon {
-    color: #F44747;
+#mpd {
+    background-color: #d08770;
+    color: #2e3440;
 }
 
-@keyframes blink {
-    to {
-        background-color: #ff007c;
-        color: black;
-    }
+#pulseaudio {
+    background-color: #ebcb8b;
+    color: #2e3440;
 }
 
-#battery.warning:not(.charging) {
-    color: #F44747;
-    animation-name: blink;
-    animation-duration: 0.5s;
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
+#pulseaudio.muted {
+    background-color: #b48ead;
+    color: #2a5c45;
 }
 
 #cpu {
+    background-color: #a3be8c;
+    color: #2e3440;
 }
 
 #memory {
+    background-color: #b48ead;
 }
 
-#network {
+#tray {
+    background-color: #2980b9;
 }
 
-#network.disconnected {
-    background: #F44747;
+#tray > .passive {
+    -gtk-icon-effect: dim;
 }
 
-#pulseaudio {
+#tray > .needs-attention {
+    -gtk-icon-effect: highlight;
+    background-color: #eb4d4b;
 }
 
-#pulseaudio.muted {
+#scratchpad {
+    background: rgba(0, 0, 0, 0.2);
 }
 
-#tray {
+#scratchpad.empty {
+	background-color: transparent;
 }