From 8db7f8a1e97492993b116505598c91f1bf4e0302 Mon Sep 17 00:00:00 2001 From: js0ny Date: Wed, 8 Oct 2025 10:33:54 +0100 Subject: [PATCH] feat: niri-waybar --- home/dot_config/waybar/config.bak | 30 ++ home/dot_config/waybar/config.jsonc | 211 +++++++++-- home/dot_config/waybar/current.css | 28 ++ .../waybar/modules/hyprland-workspace.jsonc | 6 +- home/dot_config/waybar/modules/misc.jsonc | 6 +- home/dot_config/waybar/style.css | 164 +++++---- home/dot_config/waybar/style.css.bak | 329 ++++++++++++++++++ 7 files changed, 670 insertions(+), 104 deletions(-) create mode 100644 home/dot_config/waybar/config.bak create mode 100644 home/dot_config/waybar/style.css.bak diff --git a/home/dot_config/waybar/config.bak b/home/dot_config/waybar/config.bak new file mode 100644 index 0000000..da794cb --- /dev/null +++ b/home/dot_config/waybar/config.bak @@ -0,0 +1,30 @@ +// -*- mode: jsonc -*- +{ + // "layer": "top", // Waybar at top layer + // "position": "bottom", // Waybar position (top|bottom|left|right) + "include": [ + "~/.config/waybar/modules/hyprland-workspace.jsonc", + "~/.config/waybar/modules/misc.jsonc", + "~/.config/waybar/modules/niri.jsonc" + ], + "height": 30, // 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/osicon", "hyprland/workspaces", "sway/mode", "sway/scratchpad"], + "modules-center": ["hyprland/window"], + "modules-right": [ + "tray", + // "idle_inhibitor", + "pulseaudio", + "network", + // "power-profiles-daemon", + "cpu", + "memory", + "temperature", + "backlight", + // "hyprland/language", + "battery", + "clock", + ], +} diff --git a/home/dot_config/waybar/config.jsonc b/home/dot_config/waybar/config.jsonc index de9ce34..afc52ed 100644 --- a/home/dot_config/waybar/config.jsonc +++ b/home/dot_config/waybar/config.jsonc @@ -1,29 +1,194 @@ -// -*- mode: jsonc -*- { - // "layer": "top", // Waybar at top layer + "layer": "top", // Waybar at top layer // "position": "bottom", // Waybar position (top|bottom|left|right) + // "position": "right", + // "position": "left", + // "output": "eDP-1", + "height": 32, // Waybar height (to be removed for auto height) + "margin-top": 4, + "margin-left": 4, + "margin-right": 4, + // "width": 300, // Waybar width + "spacing": 0, // Gaps between modules (4px) "include": [ - "~/.config/waybar/modules/hyprland-workspace.jsonc", - "~/.config/waybar/modules/misc.jsonc", + // "~/.config/waybar/modules/hyprland-workspace.jsonc", + "~/.config/waybar/modules/misc.jsonc" + // "~/.config/waybar/modules/niri.jsonc" ], - "height": 30, // 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": ["hyprland/workspaces", "sway/mode", "sway/scratchpad"], - "modules-center": ["hyprland/window"], - "modules-right": [ - "tray", - // "idle_inhibitor", - "pulseaudio", - "network", - // "power-profiles-daemon", - "cpu", - "memory", - "temperature", - "backlight", - // "hyprland/language", - "battery", - "clock", - ], + "modules-left": ["custom/osicon", "wlr/taskbar"], + // "modules-center": ["clock"], + "modules-right": ["tray", "pulseaudio", "cpu", "memory", "network", "battery", "clock"], + // "modules-right": ["cpu", "memory", "battery", "network", "tray"], + // Modules configuration + // "sway/workspaces": { + // "disable-scroll": true, + // "all-outputs": true, + // "warp-on-scroll": false, + // "format": "{name}: {icon}", + // "format-icons": { + // "1": "", + // "2": "", + // "3": "", + // "4": "", + // "5": "", + // "urgent": "", + // "focused": "", + // "default": "" + // } + // }, + "custom/logout": { + "format": "⏻", + "tooltip": false, + "on-click": "niri msg action quit" + }, + "wlr/taskbar": { + // "all-outputs": true, + // "format": "{icon} {title} {short_state}", + "format": "{icon}", + "tooltip-format": "{title} | {app_id}", + "on-click": "activate", + "on-click-middle": "close", + "on-click-right": "fullscreen" + }, + "keyboard-state": { + "numlock": true, + "capslock": true, + "format": "{name} {icon}", + "format-icons": { + "locked": "", + "unlocked": "" + } + }, + "sway/mode": { + "format": "{}" + }, + "sway/scratchpad": { + "format": "{icon} {count}", + "show-empty": false, + "format-icons": ["", ""], + "tooltip": true, + "tooltip-format": "{app}: {title}" + }, + "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": 2, + "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)" + }, + "idle_inhibitor": { + "format": "{icon}", + "format-icons": { + "activated": "", + "deactivated": "" + } + }, + "tray": { + // "icon-size": 21, + "spacing": 10 + }, + "clock": { + "tooltip-format": "{:%Y %B}\n{calendar}", + "format": "{:%e %B %H:%M}" + }, + "cpu": { + "format": "{usage}% ", + "tooltip": false + }, + "memory": { + "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-icons": ["", "", ""] + }, + "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" + }, + "network": { + // "interface": "wlp2*", // (Optional) To force the use of this interface + "format-wifi": "", + "format-ethernet": "", + "tooltip-format": "{ifname} via {gwaddr} ", + "format-linked": "", + "format-disconnected": "⚠", + "format-alt": "{ifname}: {ipaddr}/{cidr}" + }, + "pulseaudio": { + "scroll-step": 5, // %, can be a float + "format": "{icon}", + "tooltip-format": "{volume}% {icon}", + "format-bluetooth": "{volume}% {icon}", + "format-bluetooth-muted": " {icon}", + "format-muted": "", + "format-source": "{volume}% ", + "format-source-muted": "", + "format-icons": { + "headphone": "", + "hands-free": "", + "headset": "", + "phone": "", + "portable": "", + "car": "", + "default": ["", "", ""] + }, + "on-click": "pavucontrol", + "on-click-right": "pactl set-sink-mute @DEFAULT_SINK@ toggle" + }, + "custom/media": { + "format": "{icon} {}", + "return-type": "json", + "max-length": 40, + "format-icons": { + "spotify": "", + "default": "🎜" + }, + "escape": true, + "exec": "$HOME/.config/waybar/mediaplayer.py 2> /dev/null" // Script in resources folder + // "exec": "$HOME/.config/waybar/mediaplayer.py --player spotify 2> /dev/null" // Filter player based on name + } } + diff --git a/home/dot_config/waybar/current.css b/home/dot_config/waybar/current.css index e69de29..8cae229 100644 --- a/home/dot_config/waybar/current.css +++ b/home/dot_config/waybar/current.css @@ -0,0 +1,28 @@ +@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 text #cdd6f4; +@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 accent #f5c2e7; + diff --git a/home/dot_config/waybar/modules/hyprland-workspace.jsonc b/home/dot_config/waybar/modules/hyprland-workspace.jsonc index 892823f..ab20d89 100644 --- a/home/dot_config/waybar/modules/hyprland-workspace.jsonc +++ b/home/dot_config/waybar/modules/hyprland-workspace.jsonc @@ -9,9 +9,9 @@ "on-click": "activate", "on-scroll-up": "hyprctl dispatch workspace e+1", "on-scroll-down": "hyprctl dispatch workspace e-1", - "persistent-workspaces": { - "*": 5 - }, + // "persistent-workspaces": { + // "*": 5 + // }, "format-icons": { "1": "一", diff --git a/home/dot_config/waybar/modules/misc.jsonc b/home/dot_config/waybar/modules/misc.jsonc index 59c0fbf..98c03d5 100644 --- a/home/dot_config/waybar/modules/misc.jsonc +++ b/home/dot_config/waybar/modules/misc.jsonc @@ -183,5 +183,9 @@ "suspend": "systemctl suspend", "hibernate": "systemctl hibernate" } + }, + "custom/osicon": { + "format": "", + "on-click-right": "rofi -show drun" } -} \ No newline at end of file +} diff --git a/home/dot_config/waybar/style.css b/home/dot_config/waybar/style.css index 47c2fb7..100f4f8 100644 --- a/home/dot_config/waybar/style.css +++ b/home/dot_config/waybar/style.css @@ -1,17 +1,18 @@ -@import "current.css"; - * { - font-family: 'Maple Mono NF SC', 'Noto Sans Mono', 'Font Awesome 6 Free', 'Font Awesome 6 Brands', monospace; - font-size: 13px; + /* `otf-font-awesome` is required to be installed for icons */ + font-family: Cantarell, 'Font Awesome 6 Free'; + font-size: 14px; + font-feature-settings: "tnum"; } window#waybar { - /* background-color: rgba(43, 48, 59, 0.5); */ - /* border-bottom: 3px solid rgba(100, 114, 125, 0.5); */ - background-color: @base; - color: @text; - transition-property: background-color; - transition-duration: .5s; + background: transparent; + /* background-color: rgba(30, 30, 46, 0.5); */ + /* border-bottom: 2px solid rgba(147, 153, 178, 0.5); */ + /* border: 1px solid rgba(166, 173, 200, 1.0); */ + color: #ffffff; + /* transition-property: background-color; */ + /* transition-duration: .5s; */ } window#waybar.hidden { @@ -38,27 +39,27 @@ window#waybar.chromium { button { /* Use box-shadow instead of border so the text isn't offset */ - box-shadow: inset 0 -3px transparent; + box-shadow: none; /* Avoid rounded borders under each button name */ border: none; border-radius: 0; + transition-property: none; } /* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */ button:hover { - background: inherit; - box-shadow: inset 0 -3px #ffffff; -} - -/* you can set a style on hover for any module like this */ -#pulseaudio:hover { - background-color: @lavender; + background: none; + box-shadow: none; + text-shadow: none; + border: none; + -gtk-icon-effect: none; + -gtk-icon-shadow: none; } #workspaces button { padding: 0 5px; background-color: transparent; - color: @text; + color: #ffffff; } #workspaces button:hover { @@ -71,12 +72,12 @@ button:hover { } #workspaces button.urgent { - background-color: @maroon; + background-color: #eb4d4b; } #mode { background-color: #64727D; - box-shadow: inset 0 -3px #ffffff; + border-bottom: 3px solid #ffffff; } #clock, @@ -94,10 +95,12 @@ button:hover { #mode, #idle_inhibitor, #scratchpad, -#power-profiles-daemon, +#custom-osicon, #mpd { padding: 0 10px; - color: #ffffff; + color: #f0f0ff; + background-color: rgba(30, 30, 46, 0.6); + border-radius: 99px; } #window, @@ -116,14 +119,19 @@ button:hover { } #clock { - background-color: #64727D; + /* background-color: #64727D; */ + font-weight: bold; + /* background-color: rgba(0, 0, 0, 0.3); */ + /* border-radius: 99px; */ } #battery { - background-color: #ffffff; - color: #000000; + /* background-color: #f9e2af; */ + /* color: #000000; */ + margin-left: 4px; } +/* #battery.charging, #battery.plugged { color: #ffffff; background-color: #26A65B; @@ -136,47 +144,34 @@ button:hover { } } -/* Using steps() instead of linear as a timing function to limit cpu usage */ #battery.critical:not(.charging) { background-color: #f53c3c; color: #ffffff; animation-name: blink; animation-duration: 0.5s; - animation-timing-function: steps(12); + animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; } - -#power-profiles-daemon { - padding-right: 15px; -} - -#power-profiles-daemon.performance { - background-color: #f53c3c; - color: #ffffff; -} - -#power-profiles-daemon.balanced { - background-color: #2980b9; - color: #ffffff; -} - -#power-profiles-daemon.power-saver { - background-color: #2ecc71; - color: #000000; -} +*/ label:focus { background-color: #000000; } #cpu { - background-color: @green; - color: #000000; + /* background-color: #f38ba8; */ + /* color: #000000; */ + border-radius: 99px 0px 0px 99px; + padding: 0 0 0 10px; + margin-left: 4px; } #memory { - background-color: @mauve; + /* background-color: #fab387; */ + /* color: #000000; */ + border-radius: 0px 99px 99px 0px; + /* padding: 0 10px 0 0; */ } #disk { @@ -188,15 +183,51 @@ label:focus { } #network { - background-color: @blue; + /* background-color: #a6e3a1; */ + /* color: #000000; */ } +/* #network.disconnected { background-color: #f53c3c; } +*/ + +#taskbar { + margin-left: 4px; +} + +#taskbar button { + color: #f0f0ff; + background-color: rgba(30, 30, 46, 0.6); +} + +#taskbar button:first-child { + border-radius: 99px 0 0 99px; +} + +#taskbar button:last-child { + border-radius: 0 99px 99px 0; +} + +#taskbar button:first-child:last-child { + border-radius: 99px; +} + +#taskbar button:hover { + background-color: rgba(49, 50, 68, 0.6); +} + +#taskbar button.active { + background-color: rgba(88, 91, 112, 0.6); +} + +#taskbar button.active:hover { + background-color: rgba(108, 112, 134, 0.6); +} #pulseaudio { - background-color: @yellow; + background-color: #f1c40f; color: #000000; } @@ -229,7 +260,7 @@ label:focus { } #temperature { - background-color: @peach; + background-color: #f0932b; } #temperature.critical { @@ -237,7 +268,7 @@ label:focus { } #tray { - background-color: @blue; + /* background-color: #2980b9; */ } #tray > .passive { @@ -276,8 +307,8 @@ label:focus { } #language { - background: @green; - color: @mauve; + background: #00b093; + color: #740864; padding: 0 5px; margin: 0 5px; min-width: 16px; @@ -306,24 +337,3 @@ label:focus { #scratchpad.empty { background-color: transparent; } - -#privacy { - padding: 0; -} - -#privacy-item { - padding: 0 5px; - color: white; -} - -#privacy-item.screenshare { - background-color: #cf5700; -} - -#privacy-item.audio-in { - background-color: #1ca000; -} - -#privacy-item.audio-out { - background-color: #0069d4; -} diff --git a/home/dot_config/waybar/style.css.bak b/home/dot_config/waybar/style.css.bak new file mode 100644 index 0000000..47c2fb7 --- /dev/null +++ b/home/dot_config/waybar/style.css.bak @@ -0,0 +1,329 @@ +@import "current.css"; + +* { + font-family: 'Maple Mono NF SC', 'Noto Sans Mono', 'Font Awesome 6 Free', 'Font Awesome 6 Brands', monospace; + font-size: 13px; +} + +window#waybar { + /* background-color: rgba(43, 48, 59, 0.5); */ + /* border-bottom: 3px solid rgba(100, 114, 125, 0.5); */ + background-color: @base; + color: @text; + transition-property: background-color; + transition-duration: .5s; +} + +window#waybar.hidden { + opacity: 0.2; +} + +/* +window#waybar.empty { + background-color: transparent; +} +window#waybar.solo { + background-color: #FFFFFF; +} +*/ + +window#waybar.termite { + background-color: #3F3F3F; +} + +window#waybar.chromium { + background-color: #000000; + border: none; +} + +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 #ffffff; +} + +/* you can set a style on hover for any module like this */ +#pulseaudio:hover { + background-color: @lavender; +} + +#workspaces button { + padding: 0 5px; + background-color: transparent; + color: @text; +} + +#workspaces button:hover { + background: rgba(0, 0, 0, 0.2); +} + +#workspaces button.focused { + background-color: #64727D; + box-shadow: inset 0 -3px #ffffff; +} + +#workspaces button.urgent { + background-color: @maroon; +} + +#mode { + background-color: #64727D; + box-shadow: inset 0 -3px #ffffff; +} + +#clock, +#battery, +#cpu, +#memory, +#disk, +#temperature, +#backlight, +#network, +#pulseaudio, +#wireplumber, +#custom-media, +#tray, +#mode, +#idle_inhibitor, +#scratchpad, +#power-profiles-daemon, +#mpd { + padding: 0 10px; + color: #ffffff; +} + +#window, +#workspaces { + margin: 0 4px; +} + +/* 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; +} + +#battery { + background-color: #ffffff; + color: #000000; +} + +#battery.charging, #battery.plugged { + color: #ffffff; + background-color: #26A65B; +} + +@keyframes blink { + to { + background-color: #ffffff; + color: #000000; + } +} + +/* Using steps() instead of linear as a timing function to limit cpu usage */ +#battery.critical:not(.charging) { + background-color: #f53c3c; + color: #ffffff; + animation-name: blink; + animation-duration: 0.5s; + animation-timing-function: steps(12); + animation-iteration-count: infinite; + animation-direction: alternate; +} + +#power-profiles-daemon { + padding-right: 15px; +} + +#power-profiles-daemon.performance { + background-color: #f53c3c; + color: #ffffff; +} + +#power-profiles-daemon.balanced { + background-color: #2980b9; + color: #ffffff; +} + +#power-profiles-daemon.power-saver { + background-color: #2ecc71; + color: #000000; +} + +label:focus { + background-color: #000000; +} + +#cpu { + background-color: @green; + color: #000000; +} + +#memory { + background-color: @mauve; +} + +#disk { + background-color: #964B00; +} + +#backlight { + background-color: #90b1b1; +} + +#network { + background-color: @blue; +} + +#network.disconnected { + background-color: #f53c3c; +} + +#pulseaudio { + background-color: @yellow; + color: #000000; +} + +#pulseaudio.muted { + background-color: #90b1b1; + color: #2a5c45; +} + +#wireplumber { + background-color: #fff0f5; + color: #000000; +} + +#wireplumber.muted { + background-color: #f53c3c; +} + +#custom-media { + background-color: #66cc99; + color: #2a5c45; + min-width: 100px; +} + +#custom-media.custom-spotify { + background-color: #66cc99; +} + +#custom-media.custom-vlc { + background-color: #ffa000; +} + +#temperature { + background-color: @peach; +} + +#temperature.critical { + background-color: #eb4d4b; +} + +#tray { + background-color: @blue; +} + +#tray > .passive { + -gtk-icon-effect: dim; +} + +#tray > .needs-attention { + -gtk-icon-effect: highlight; + background-color: #eb4d4b; +} + +#idle_inhibitor { + background-color: #2d3436; +} + +#idle_inhibitor.activated { + background-color: #ecf0f1; + color: #2d3436; +} + +#mpd { + background-color: #66cc99; + color: #2a5c45; +} + +#mpd.disconnected { + background-color: #f53c3c; +} + +#mpd.stopped { + background-color: #90b1b1; +} + +#mpd.paused { + background-color: #51a37a; +} + +#language { + background: @green; + color: @mauve; + padding: 0 5px; + margin: 0 5px; + min-width: 16px; +} + +#keyboard-state { + background: #97e1ad; + color: #000000; + padding: 0 0px; + margin: 0 5px; + min-width: 16px; +} + +#keyboard-state > label { + padding: 0 5px; +} + +#keyboard-state > label.locked { + background: rgba(0, 0, 0, 0.2); +} + +#scratchpad { + background: rgba(0, 0, 0, 0.2); +} + +#scratchpad.empty { + background-color: transparent; +} + +#privacy { + padding: 0; +} + +#privacy-item { + padding: 0 5px; + color: white; +} + +#privacy-item.screenshare { + background-color: #cf5700; +} + +#privacy-item.audio-in { + background-color: #1ca000; +} + +#privacy-item.audio-out { + background-color: #0069d4; +}