From 77e14274ae60d09a5353ca4576f632a75e55673d Mon Sep 17 00:00:00 2001 From: danmac Date: Wed, 25 Jun 2025 00:16:33 +0930 Subject: [PATCH] waybar powerline --- waybar/config.jsonc | 86 ++- waybar/icons/pika-logo.svg | 832 +++++++++++++++++++++++++ waybar/style.css | 282 +++++---- waybar/themes/catppuccin-macchiato.css | 26 + 4 files changed, 1088 insertions(+), 138 deletions(-) create mode 100644 waybar/icons/pika-logo.svg create mode 100644 waybar/themes/catppuccin-macchiato.css diff --git a/waybar/config.jsonc b/waybar/config.jsonc index 778b68f..0160272 100644 --- a/waybar/config.jsonc +++ b/waybar/config.jsonc @@ -1,13 +1,47 @@ { "layer": "top", // Waybar at top layer + "output": "DP-1", // Only display on on monitor "position": "top", // Waybar position (top|bottom|left|right) "height": 36, // Waybar height (to be removed for auto height) // Choose the order of the modules - "modules-left": ["custom/launcher", "wlr/taskbar", "custom/spacer", "niri/workspaces", "custom/spacer", "niri/window"], - "modules-center": ["custom/swaync", "clock"], - "modules-right": ["idle_inhibitor", "cpu", "memory", "temperature", "pulseaudio", "tray", "custom/power"], + "modules-left": [ + "custom/logo", + "wlr/taskbar", + "custom/pl-taskbar", + "niri/workspaces", + "custom/pl-workspaces", + "niri/window", + "custom/pl-window" + ], + "modules-center": [ + "custom/pl-swaync-before", + "custom/swaync", + "custom/pl-swaync", + "clock", + "custom/pl-clock" + ], + "modules-right": [ + "custom/pl-idle-before", + "idle_inhibitor", + "custom/pl-idle", + "cpu", + "memory", + "temperature", + "custom/pl-stats", + "pulseaudio", + "custom/pl-pulse", + "tray", + "custom/pl-tray", + "custom/power" + ], // Modules configuration + "custom/logo": { + "format": " ", + "on-click": "cosmic-app-library" + }, "wlr/taskbar": { + "active-first": true, + "icon-size": 24, "on-click": "activate", "on-click-middle": "close", "app_ids-mapping": { @@ -16,9 +50,6 @@ "steam_app_2357570": "Overwatch 2.desktop" } }, - "custom/spacer": { - "format": " " - }, "idle_inhibitor": { "format": "{icon}", "format-icons": { @@ -60,7 +91,7 @@ "on-click-right": "exec wezterm -e btm" }, "memory": { - "format": "{}% ", + "format": "{percentage}% / {used:0.1f}GiB / {avail:0.1f}GiB ", "on-click-right": "exec wezterm -e btm" }, "temperature": { @@ -85,7 +116,7 @@ "critical": 15 }, "format": "{icon}", - "format-charging": "", + "format-charging": "󱐋", "format-plugged": "", "format-alt": "{capacity}% {time}", "format-icons": ["", "", "", "", ""] @@ -124,7 +155,7 @@ "format-source-muted": "", "format-icons": { "headphones": "", - "handsfree": "", + "handsfree": "", "headset": "", "phone": "", "portable": "", @@ -135,7 +166,7 @@ "on-click": "pactl set-sink-mute @DEFAULT_SINK@ toggle", "on-click-right": "pavucontrol", "tooltip": false - }, + }, "custom/power": { "format" : "⏻ ", "tooltip": false, @@ -168,5 +199,38 @@ "on-click": "sleep 0.1 && swaync-client -t -sw", "on-click-right": "swaync-client -d -sw", "escape": true, - }, + }, + "custom/pl-taskbar": { + "format": "" + }, + "custom/pl-workspaces": { + "format": "" + }, + "custom/pl-window": { + "format": "" + }, + "custom/pl-swaync": { + "format": "" + }, + "custom/pl-clock": { + "format": "" + }, + "custom/pl-idle": { + "format": "" + }, + "custom/pl-stats": { + "format": "" + }, + "custom/pl-pulse": { + "format": "" + }, + "custom/pl-tray": { + "format": "" + }, + "custom/pl-swaync-before": { + "format": "" + }, + "custom/pl-idle-before": { + "format": "" + }, } diff --git a/waybar/icons/pika-logo.svg b/waybar/icons/pika-logo.svg new file mode 100644 index 0000000..2fb5c74 --- /dev/null +++ b/waybar/icons/pika-logo.svg @@ -0,0 +1,832 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/waybar/style.css b/waybar/style.css index 544d9ae..afb666b 100644 --- a/waybar/style.css +++ b/waybar/style.css @@ -1,162 +1,190 @@ +@import "themes/catppuccin-macchiato.css"; + * { - border: none; - border-radius: 0; - min-height: 0; font-family: NotoSans NF SemBd; - font-size: 14px; + font-size: 15px; + margin: 0px; + min-height: 0; + border-radius: 0; + color: @text; } -window#waybar { - /* background-color: rgba(30, 30, 46, 0.5); */ - background: transparent; - transition-property: background-color; - transition-duration: 0.5s; +#waybar { + background-color: alpha(@base, 0.7); + /* background: transparent; */ } -window#waybar.hidden { - opacity: 0.5; +#custom-logo { + background-image: url("./icons/pika-logo.svg"); + background-color: @base; + background-position: center; + background-repeat: no-repeat; + background-size: 24px; + padding: 0px 8px 0px 24px; +} + +#custom-pl-taskbar, +#custom-pl-workspaces, +#custom-pl-window, +#custom-pl-swaync, +#custom-pl-clock, +#custom-pl-idle, +#custom-pl-stats, +#custom-pl-swaync-before, +#custom-pl-pulse, +#custom-pl-idle-before, +#custom-pl-tray { + font-size: 26px; +} + +#workspaces *, +#window *, +#custom-swaync, +#clock, +#idle_inhibitor, +#cpu, +#memory, +#temperature, +#pulseaudio, +#custom-power, +#custom-pl-tray { + color: @base; +} + +#taskbar { + background-color: @base; +} + +#custom-pl-taskbar { + color: @base; + background-color: @mauve; } #workspaces { - background-color: transparent; + background-color: @mauve; } #workspaces button, #taskbar button { - all: initial; - /* Remove GTK theme values (waybar #1351) */ - min-width: 0; - /* Fix weird spacing in materia (waybar #450) */ - box-shadow: inset 0 -3px transparent; - /* Use box-shadow instead of border so the text isn't offset */ - padding: 6px 18px; - margin: 6px 3px; - border-radius: 4px; - background-color: #1e1e2e; - color: #cdd6f4; + background: transparent; + box-shadow: inherit; + text-shadow: inherit; + border: none; } -#workspaces button.active, -#taskbar button.active { - color: #1e1e2e; - background-color: #cdd6f4; -} - -#taskbar button { - padding: 6px 8px; +#workspaces button.active { + box-shadow: inset 0 -4px @base; + color: @base; } #workspaces button:hover { + background: transparent; box-shadow: inherit; text-shadow: inherit; - color: #1e1e2e; - background-color: #cdd6f4; + box-shadow: inset 0 -4px @base; + color: @base; } -#workspaces button.urgent { - background-color: #f38ba8; +#taskbar button.active { + box-shadow: inset 0 -4px @subtext1; + color: @base; } -#custom-spacer { - margin: 12px; - border-left: 2px solid white; +#taskbar button:hover { + box-shadow: inset 0 -4px @subtext1; +} + +#custom-pl-workspaces { + color: @mauve; + background-color: @lavender; +} + +#window { + background-color: @lavender; + color: @base; +} + +#custom-pl-window { + color: @lavender; + background: transparent; +} + +#custom-pl-swaync-before { + background: transparent; + color: @teal; +} + +#custom-swaync { + background-color: @teal; +} + +#custom-pl-swaync { + color: @teal; + background-color: @green; +} + +#clock { + background-color: @green; +} + +#custom-pl-clock { + color: @green; + background: transparent; +} + +#custom-pl-idle-before { + background: transparent; + color: @yellow; +} + +#idle_inhibitor { + background-color: @yellow; +} + +#custom-pl-idle { + background: @peach; + color: @yellow; } -#memory, -#custom-power, -#battery, -#backlight, -#wireplumber, -#network, -#clock, #cpu, -#bluetooth, -#pulseaudio, -#temperature, -#window, -#idle_inhibitor, -#custom-swaync, +#memory, +#temperature { + background: @peach; + padding: 0px 6px; +} + +#custom-pl-stats { + color: @peach; + background-color: @red; +} + +#pulseaudio { + background-color: @red; +} + +#custom-pl-pulse { + color: @red; + background-color: @base; +} + #tray { - border-radius: 4px; - margin: 6px 3px; - padding: 6px 12px; - background-color: #1e1e2e; - color: #181825; + background-color: @base; + padding: 0px 6px; +} + +#custom-pl-tray, +#custom-power { + background-color: @sky; } #custom-power { - margin-right: 6px; -} - -#custom-logo { - padding-right: 7px; - padding-left: 7px; - margin-left: 5px; - font-size: 15px; - border-radius: 8px 0px 0px 8px; - color: #1793d1; -} - -#memory, -#cpu { - background-color: #f5a97f; -} - -#battery { - background-color: #f38ba8; -} - -#battery.warning, -#battery.critical, -#battery.urgent { - background-color: #ff0000; - color: #FFFF00; -} - -#battery.charging { - background-color: #a6e3a1; - color: #181825; -} - -#backlight, -#bluetooth { - background-color: #8aadf4; -} - -#wireplumber, -#pulseaudio { - background-color: #a6da95; -} - -#network, -#custom-swaync { - background-color: #8bd5ca; -} - -#clock, -#custom-power, -#idle_inhibitor, -#window { - color: #cdd6f4; -} - -#power, -#temperature { - background-color: #b7bdf8; -} - -tooltip { - border-radius: 8px; - padding: 15px; - background-color: rgba(30, 30, 46, 0.8); -} - -tooltip label { - padding: 5px; + padding-right: 6px; } menu { - border-radius: 8px; - padding: 15px; - background-color: rgba(30, 30, 46, 0.8); + background-color: alpha(@base, 0.7); +} + +menu button:hover { + background-color: @sky; } diff --git a/waybar/themes/catppuccin-macchiato.css b/waybar/themes/catppuccin-macchiato.css new file mode 100644 index 0000000..112ee32 --- /dev/null +++ b/waybar/themes/catppuccin-macchiato.css @@ -0,0 +1,26 @@ +@define-color rosewater #f4dbd6; +@define-color flamingo #f0c6c6; +@define-color pink #f5bde6; +@define-color mauve #c6a0f6; +@define-color red #ed8796; +@define-color maroon #ee99a0; +@define-color peach #f5a97f; +@define-color yellow #eed49f; +@define-color green #a6da95; +@define-color teal #8bd5ca; +@define-color sky #91d7e3; +@define-color sapphire #7dc4e4; +@define-color blue #8aadf4; +@define-color lavender #b7bdf8; +@define-color text #cad3f5; +@define-color subtext1 #b8c0e0; +@define-color subtext0 #a5adcb; +@define-color overlay2 #939ab7; +@define-color overlay1 #8087a2; +@define-color overlay0 #6e738d; +@define-color surface2 #5b6078; +@define-color surface1 #494d64; +@define-color surface0 #363a4f; +@define-color base #24273a; +@define-color mantle #1e2030; +@define-color crust #181926;