make waybar "float", change colors and way of styling widgets

waybar/config.jsonc

@@ -2,11 +2,12 @@
 {
     // "layer": "top", // Waybar at top layer
     // "position": "bottom", // Waybar position (top|bottom|left|right)
-    "height": 32, // Waybar height (to be removed for auto height)
+    // "height": 32, // Waybar height (to be removed for auto height)
     // "width": 1280, // Waybar width
     "spacing": 4, // Gaps between modules (4px)
     // Choose the order of the modules
     "modules-left": [
+        "custom/logo",
         "hyprland/workspaces",
         "hyprland/window"
     ],
@@ -69,6 +70,12 @@
         },
         "escape": true
     },
+    "custom/logo": {
+        "format": "", // Change to desired logo
+        "tooltip": false,
+        "escape": true,
+        "on-click": "wofi --show drun -I -a -b" // Change to desired action
+    },
     "custom/notifications": {
     	"tooltip": false,
     	"format": "{icon}",
@@ -155,16 +162,15 @@
     },
     "battery": {
         "states": {
-            // "good": 95,
+            "good": 95,
             "warning": 30,
             "critical": 15
         },
         "format": "{capacity}% {icon}",
-        "format-full": "{capacity}% {icon}",
         "format-charging": "{capacity}% ",
         "format-plugged": "{capacity}% ",
         "format-alt": "{time} {icon}",
-        // "format-good": "", // An empty format will hide the module
+        "format-good": "{capacity}% {icon}",
         "format-full": "",
         "format-icons": ["", "", "", "", ""]
     },
@@ -192,12 +198,11 @@
         "format-alt": "{ifname}: {ipaddr}/{cidr}"
     },
     "pulseaudio": {
-        // "scroll-step": 1, // %, can be a float
         "format": "{volume}% {icon} {format_source}",
         "format-bluetooth": "{volume}% {icon} {format_source}",
         "format-bluetooth-muted": " {icon}",
         "format-muted": " {format_source}",
-        "format-source": "{volume}%",
+        "format-source": "{icon} {volume}%",
         "format-icons": {
             "headphone": "",
             "hands-free": "",
@@ -218,7 +223,12 @@
             "spotify": "",
             "default": "󰎇"
         },
-        
+        "tooltip": true,
+        "tooltip-format": {
+            "1": "Scroll-Up: Next<br>Scroll-Down: Previous"
+        },
+        "on-scroll-down": "playerctl --player spotify previous",
+        "on-scroll-up": "playerctl --player spotify next",
         "exec": "$HOME/.config/waybar/mediaplayer.py --player spotify 2> /dev/null", // Script in resources folder
     	"on-click": "playerctl --player spotify play-pause" // Change "spotify to your preferred player"
     }

waybar/style.css

@@ -1,17 +1,30 @@
 
 @import "mocha.css";
 
+@define-color hover shade(@blue, .5);
+
+* {
+    color: @text;
+    border-radius: 14px;
+}
+
 window {
     font-family: "0xProto Nerd Font Regular", "Font Awesome", sans-serif;
     font-size: 12px;
     color: @text;
+    border-radius: 16px;
 }
 
-* {
+/* Manage "floating" waybar position with paddings */
-    color: @text;
+window > * {
-    border-radius: 12px;
+    margin-top: 5px;
-    margin-left: 0;
+    margin-left: 4px;
-    margin-right: 0;
+    margin-right: 4px;
+    padding: 2px;
+}
+
+window > * {
+    background: alpha(@base, .8);
 }
 
 window#waybar {
@@ -22,22 +35,18 @@ window#waybar.hidden {
     opacity: .1;
 }
 
-/*
+/*window#waybar.empty {
-window#waybar.empty {
     background-color: transparent;
 }
 window#waybar.solo {
     background-color: #FFFFFF;
 }
-*/
-
 window#waybar.termite {
     background-color: alpha(@base, .1);
 }
-
 window#waybar.chromium {
     background-color: @base;
-}
+}*/
 
 button {
     /* Use box-shadow instead of border so the text isn't offset */
@@ -50,7 +59,25 @@ button {
 
 /* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
 button:hover {
-    background-color: alpha(shade(@blue, .3), .4);
+    background-color: @hover;
+}
+
+widget > * {
+    padding-top: 1px;
+    padding-bottom: 1px;
+    transition: 100ms ease-in;
+}
+
+widget > *:hover:not(#window):not(#workspaces):not(#tray):not(#custom-media) {
+    background: @hover;
+}
+
+#custom-logo {
+    padding-left: 12px;
+    padding-right: 18px;
+    font-size: 15.2px;
+    transition: 110ms ease-in;
+    margin-right: 6px;
 }
 
 /* you can set a style on hover for any module like this */
@@ -59,21 +86,24 @@ button:hover {
 }
 
 #workspaces {
-    background: alpha(@base, .3);
+    border-radius: 16px;
-    padding-top: 2px;
+    padding-left: 2px;
-    padding-bottom: 2px;
+    padding-right: 2px;
 }
 
 #workspaces button {
     color: @text;
-    padding-left: 6px;
+    background: transparent;
-    padding-right: 6.9px;
     font-size: 19px;
+    border-radius: 16px; 
+}
+
+#workspaces button *:hover {
+    background: @base;
 }
 
 #workspaces button.active {
     background: alpha(shade(@blue, .5), .6);
-    /* Customize font size and stuff when in different states */
 }
 
 #workspaces button.urgent {
@@ -126,16 +156,6 @@ button:hover {
 #workspaces {}
 */
 
-/* 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: alpha(@base, .3);
 }