✨ feat: wallpaper menu, blue colors on waybar with blur

waybar/_colors.css

@@ -5,14 +5,13 @@
 @define-color red #f38ba8;
 @define-color maroon #eba0ac;
 @define-color peach #fab387;
-@define-color yellow alpha(#f9e2af, .8);
+@define-color yellow #f9e2af;
 @define-color green #a6e3a1;
 @define-color teal #94e2d5;
 @define-color sky #89dceb;
 @define-color sapphire #74c7ec;
 @define-color blue #89b4fa;
 @define-color lavender #b4befe;
-@define-color text #cdd6f4;
 @define-color subtext1 #bac2de;
 @define-color subtext0 #a6adc8;
 @define-color overlay2 #9399b2;
@@ -25,8 +24,9 @@
 @define-color mantle #181825;
 @define-color crust #11111b;
 
-@define-color background alpha(@base, .6);
-@define-color bar shade(@yellow, .2);
-@define-color hover shade(@yellow, .5);
-@define-color active shade(@yellow, .55);
-@define-color highlight shade(@yellow, .4);
+@define-color highlight shade(@blue, .67);
+@define-color bar alpha(shade(@highlight, .8), .3);
+@define-color hover shade(@highlight, .6);
+@define-color active shade(@highlight, .58);
+@define-color text rgb(245, 245, 245);
+@define-color text_dark rgb(30, 30, 30);

waybar/config.jsonc

@@ -1,11 +1,6 @@
-// -*- mode: jsonc -*-
 {
-    // "layer": "top", // Waybar at top layer
-    // "position": "bottom", // Waybar position (top|bottom|left|right)
-    // "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
+    "spacing": 4, 
+    "margin": 5,
     "modules-left": [
         "custom/logo",
         "hyprland/workspaces",
@@ -20,7 +15,7 @@
         "pulseaudio",
 	    "custom/notifications"
     ],
-    // Modules configuration
+
     "hyprland/workspaces": {
         "disable-scroll": false,
         "all-outputs": true,
@@ -74,7 +69,7 @@
         "format": "", // Change to desired logo
         "tooltip": false,
         "escape": true,
-        "on-click": "wofi --show drun -I -a -b" // Change to desired action
+        "on-click": "wofi -s drun" // Change to desired action
     },
     "custom/notifications": {
     	"tooltip": false,
@@ -174,10 +169,7 @@
         "format-good": "{capacity}% {icon}",
         "format-full": "",
         "format-icons": ["", "", "", "", ""]
-    },
-    "battery#bat2": {
-        "bat": "BAT2"
-    },
+    }, 
     "power-profiles-daemon": {
       "format": "{icon}",
       "tooltip-format": "Power profile: {profile}\nDriver: {driver}",
@@ -225,9 +217,9 @@
             "spotube": " ",
             "default": "󰎇"
         }, 
-        "on-scroll-down": "playerctl --player spotify previous",
-        "on-scroll-up": "playerctl --player spotify next",
+        "on-scroll-down": "playerctl previous",
+        "on-scroll-up": "playerctl next",
         "exec": "$HOME/.config/waybar/mediaplayer.py 2> /dev/null", // Script in resources folder
-    	"on-click": "playerctl --player spotify play-pause" // Change "spotify to your preferred player"
+    	"on-click": "playerctl play-pause" // Change "spotify to your preferred player"
     }
 }

waybar/style.css

@@ -4,26 +4,22 @@
 * {
     color: @text;
     border-radius: 14px;
+    transition: 120ms ease-in;
 }
 
 window {
-    font-family: "0xProto Nerd Font Regular", "Font Awesome", sans-serif;
+    font-family: "Cantarell", "Font Awesome", sans-serif;
     font-size: 12px;
     color: @text;
     border-radius: 16px;
 }
 
-/* Manage "floating" waybar position with paddings */
 window > * {
-    margin-top: 5px;
-    margin-left: 4px;
-    margin-right: 4px;
     padding: 2px;
-    background: @bar;
 }
 
 window#waybar {
-    background-color: transparent;
+    background: @bar;
 }
 
 window#waybar.hidden {
@@ -40,24 +36,6 @@ button:hover {
     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;
-}
-
 #workspaces {
     border-radius: 16px;
     padding-left: 2px;
@@ -92,10 +70,13 @@ widget > *:hover:not(#window):not(#workspaces):not(#tray):not(#custom-media) {
     background-color: alpha(shade(@orange, 0.6), .3);
 }
 
-#custom-notifications {
-    font-size: 16px;
-    padding-left: 10px;
-    padding-right: 12px;
+widget > * {
+    padding-top: 1px;
+    padding-bottom: 1px;
+}
+
+widget > *:hover:not(#window):not(#workspaces):not(#tray):not(#custom-media) {
+    background: @hover;
 }
 
 #clock,
@@ -113,10 +94,13 @@ widget > *:hover:not(#window):not(#workspaces):not(#tray):not(#custom-media) {
 #mode,
 #idle_inhibitor,
 #scratchpad,
+#window,
 #power-profiles-daemon,
+#custom-notifications,
+#custom-logo,
 #mpd {
     padding: 0 10px;
-    color: @text;
+    font-weight: 500;
 }
 
 /*
@@ -131,6 +115,20 @@ widget > *:hover:not(#window):not(#workspaces):not(#tray):not(#custom-media) {
     }
 }
 
+#custom-logo {
+    padding-left: 12px;
+    padding-right: 18px;
+    font-size: 15.2px;
+    transition: 110ms ease-in;
+    margin-right: 6px;
+}
+
+#custom-notifications {
+    font-size: 16px;
+    padding-left: 10px;
+    padding-right: 12px;
+}
+
 #battery.charging, #battery.plugged {
     color: @text;
     background-color: alpha(@base, .3);
@@ -152,10 +150,13 @@ widget > *:hover:not(#window):not(#workspaces):not(#tray):not(#custom-media) {
 }
 
 #custom-media {
-    background: @highlight;
+    border: 2px solid @highlight;
+    font-weight: 500;
+    transition: 200ms ease-in;
 }
 
 #custom-media:hover {
+    border: 2px solid transparent;
     background: @hover;
 }