From 302d0e5a97830bc740c796249f498fe85ab0f105 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Dias?= Date: Wed, 4 Sep 2024 22:36:25 -0300 Subject: [PATCH] :sparkles: feat(waybar): fancier waybar, pywal colors --- waybar/_colors.css | 32 --------- waybar/config.jsonc | 76 ++++++++------------ waybar/modules/control-center.sh | 9 +++ waybar/style.css | 117 ++++++++++++------------------- 4 files changed, 83 insertions(+), 151 deletions(-) delete mode 100644 waybar/_colors.css create mode 100644 waybar/modules/control-center.sh diff --git a/waybar/_colors.css b/waybar/_colors.css deleted file mode 100644 index bca8776..0000000 --- a/waybar/_colors.css +++ /dev/null @@ -1,32 +0,0 @@ -@define-color rosewater #f5e0dc; -@define-color flamingo #f2cdcd; -@define-color pink #f5c2e7; -@define-color mauve #cba6f7; -@define-color red #f38ba8; -@define-color maroon #eba0ac; -@define-color peach #fab387; -@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 subtext1 #bac2de; -@define-color subtext0 #a6adc8; -@define-color overlay2 #9399b2; -@define-color overlay1 #7f849c; -@define-color overlay0 #6c7086; -@define-color surface2 #585b70; -@define-color surface1 #45475a; -@define-color surface0 #313244; -@define-color base #1e1e2e; -@define-color mantle #181825; -@define-color crust #11111b; - -@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); diff --git a/waybar/config.jsonc b/waybar/config.jsonc index e5ca5df..537b5d6 100644 --- a/waybar/config.jsonc +++ b/waybar/config.jsonc @@ -1,6 +1,8 @@ { + "position": "top", "spacing": 4, "margin": 5, + "reload_style_on_change": true, "modules-left": [ "custom/logo", "hyprland/workspaces", @@ -13,13 +15,12 @@ "modules-right": [ "tray", "pulseaudio", + "bluetooth", "custom/notifications" ], "hyprland/workspaces": { - "disable-scroll": false, "all-outputs": true, - "warp-on-scroll": true, "format": "{icon}", "format-icons": { "urgent": "", @@ -30,14 +31,16 @@ "persistent-workspaces": { "1": [], "2": [] - } + }, + + "on-scroll-down": "hyprctl dispatch workspace e-1", + "on-scroll-up": "hyprctl dispatch workspace e+1" }, "bluetooth": { - "format": " {status}", - "format-connected": " {device_alias}", - "format-connected-battery": " {device_alias} {device_battery_percentage}%", - // "format-device-preference": [ "device1", "device2" ], // preference list deciding the displayed device - "tooltip-format": "{controller_alias}\t{controller_address}\n\n{num_connections} connected", + "format": "", + "format-on": "󰂯", + "format-connected": "󰂱", + "tooltip-format": "{controller_alias}{controller_address}\n\n{num_connections} connected", "tooltip-format-connected": "{controller_alias}\t{controller_address}\n\n{num_connections} connected\n\n{device_enumerate}", "tooltip-format-enumerate-connected": "{device_alias}\t{device_address}", "tooltip-format-enumerate-connected-battery": "{device_alias}\t{device_address}\t{device_battery_percentage}%" @@ -52,14 +55,17 @@ } }, "hyprland/window": { - "format": "{class}: {title}", + "format": "{class}", "show-empty": false, + "icon": true, "rewrite": { - ": ": "", - "firefox(.*)": "Firefox", - "(.*)kitty(.*)": "Kitty", - "Spotify(.*)": "Spotify", - "discord(.*) - Discord": "Discord$1", + "zen-alpha": "Zen Browser", + "firefox": "Firefox", + "kitty": "Kitty", + "spotify": "Spotify", + "(.*)spotube": "Spotube", + "(.*)discord": "Discord", + "(.*)vesktop": "Vesktop", "org.gnome.(.*)": "$1" }, @@ -91,33 +97,11 @@ "on-click-right": "swaync-client -d -sw", "escape": true }, - "mpd": { - "format": "{stateIcon} {consumeIcon}{randomIcon}{repeatIcon}{singleIcon}{artist} - {album} - {title} ({elapsedTime:%M:%S}/{totalTime:%M:%S}) ⸨{songPosition}|{queueLength}⸩ {volume}% ", - "format-disconnected": "Disconnected ", - "format-stopped": "{consumeIcon}{randomIcon}{repeatIcon}{singleIcon}Stopped ", - "unknown-tag": "N/A", - "interval": 5, - "consume-icons": { - "on": "" - }, - "random-icons": { - "off": " ", - "on": "" - }, - "repeat-icons": { - "on": "" - }, - "single-icons": { - "on": "1" - }, - "state-icons": { - "paused": "", - "playing": "" - }, - "tooltip-format": "MPD (connected)", - "tooltip-format-disconnected": "MPD (disconnected)", - "exec": "mpd" - }, + "custom/control-center": { + "format": "loading control center...", + "return-type": "json", + "exec": "sh $HOME/.config/waybar/modules/control-center.sh" + }, "idle_inhibitor": { "format": "{icon}", "format-icons": { @@ -136,19 +120,19 @@ "format-alt": "{:%Y-%m-%d}" }, "cpu": { - "format": "{usage}% ", + "format": " {usage}%", "tooltip": true, "escape": true }, "memory": { - "format": "{}% " + "format": " {}%" }, "temperature": { // "thermal-zone": 2, // "hwmon-path": "/sys/class/hwmon/hwmon2/temp1_input", "critical-threshold": 80, // "format-critical": "{temperatureC}°C {icon}", - "format": "{temperatureC}°C {icon}", + "format": "{icon} {temperatureC}°C", "format-icons": ["", "", ""] }, "backlight": { @@ -192,8 +176,8 @@ }, "pulseaudio": { "format": "{volume}% {icon} {format_source}", - "format-bluetooth": "{volume}% {icon} {format_source}", - "format-bluetooth-muted": " {icon}", + "format-bluetooth": "{volume}% {icon} {format_source}", + "format-bluetooth-muted": " {icon}", "format-muted": " {format_source}", "format-source": "{icon} {volume}%", "format-icons": { diff --git a/waybar/modules/control-center.sh b/waybar/modules/control-center.sh new file mode 100644 index 0000000..7059735 --- /dev/null +++ b/waybar/modules/control-center.sh @@ -0,0 +1,9 @@ + +# Default return +CONTROL_CENTER_JSON="{ \"text\": \"\", \"bluetooth\": \"$BLUETOOTH_ACTIVE\" }" +$BLUETOOTH_ACTIVE=false + +if [[ $(systemctl is-active bluetooth) =~ "active" ]] +then + $BLUETOOTH_ACTIVE=true +fi diff --git a/waybar/style.css b/waybar/style.css index cc0903d..9ab2c03 100644 --- a/waybar/style.css +++ b/waybar/style.css @@ -1,39 +1,48 @@ -@import "_colors.css"; +@import "../../.cache/wal/colors-waybar.css"; * { - color: @text; + color: @foreground; border-radius: 14px; transition: 120ms ease-in; } -window { - font-family: "Cantarell", "Font Awesome", sans-serif; - font-size: 12px; - color: @text; - border-radius: 16px; -} - -window > * { - padding: 2px; -} - window#waybar { - background: @bar; + font-family: "Noto Sans", "Font Awesome", sans-serif; + font-size: 12px; + color: @foreground; + border-radius: 16px; + background: transparent; } window#waybar.hidden { opacity: 0; } -button { - border: none; - background: @background; - transition: 120ms ease-in; +window > * > * { + padding: 2px; +} + +.modules-left, .modules-center, .modules-right { + background: alpha(@background, .65); +} + +.module, .widget { + padding: 0 10px; + font-weight: 500; +} + +widget > * { + padding-top: 1px; + padding-bottom: 1px; +} + +widget > *:hover:not(#window):not(#workspaces):not(#tray):not(#custom-media) { + background: @color1; } button:hover { - background-color: @hover; + background: @color1; } #workspaces { @@ -43,13 +52,13 @@ button:hover { } #workspaces button { - color: @text; background: transparent; font-size: 19px; border-radius: 16px; } #workspaces button label { + color: @foreground; margin-top: .2px; margin-left: .1px; } @@ -62,52 +71,10 @@ button:hover { background: @active; } -#workspaces button.active label { - margin-right: 1px; -} - #workspaces button.urgent { - background-color: alpha(shade(@orange, 0.6), .3); + background-color: @color1; } -widget > * { - padding-top: 1px; - padding-bottom: 1px; -} - -widget > *:hover:not(#window):not(#workspaces):not(#tray):not(#custom-media) { - background: @hover; -} - -#clock, -#battery, -#cpu, -#memory, -#disk, -#temperature, -#backlight, -#network, -#pulseaudio, -#wireplumber, -#custom-media, -#tray, -#mode, -#idle_inhibitor, -#scratchpad, -#window, -#power-profiles-daemon, -#custom-notifications, -#custom-logo, -#mpd { - padding: 0 10px; - font-weight: 500; -} - -/* -#window, -#workspaces {} -*/ - @keyframes blink { to { background-color: alpha(@crust, .3); @@ -140,8 +107,8 @@ widget > *:hover:not(#window):not(#workspaces):not(#tray):not(#custom-media) { /* Using steps() instead of linear as a timing function to limit cpu usage */ #battery.critical:not(.charging) { - background-color: alpha(shade(@orange, 0.5), .3); - color: @text; + background-color: @color1; + color: @foreground; animation-name: blink; animation-duration: 0.5s; animation-timing-function: steps(12); @@ -149,19 +116,27 @@ widget > *:hover:not(#window):not(#workspaces):not(#tray):not(#custom-media) { animation-direction: alternate; } +#bluetooth { + font-size: 14px; +} + +#bluetooth.connected { + padding-right: 12px; +} + #custom-media { - border: 2px solid @highlight; + border: 2px solid @color1; font-weight: 500; transition: 200ms ease-in; } #custom-media:hover { border: 2px solid transparent; - background: @hover; + background: @color2; } #temperature.critical { - background-color: alpha(@red, .3); + background-color: @color1; } #tray > .passive { @@ -170,9 +145,5 @@ widget > *:hover:not(#window):not(#workspaces):not(#tray):not(#custom-media) { #tray > .needs-attention { -gtk-icon-effect: highlight; - background: alpha(@orange, .3); -} - -#scratchpad.empty { - background-color: transparent; + background: @color1; }