From 5e422d7d5de356fd3d12a0c00e0077d09f3dd4b9 Mon Sep 17 00:00:00 2001 From: Aleksei Bavshin Date: Sat, 3 Feb 2024 01:07:23 -0800 Subject: [PATCH 01/10] waybar: install and add to the package --- Makefile | 4 ++++ sway-config-fedora.spec.rpkg | 24 +++++++++++++++++++++++- waybar/build.mk | 7 +++++++ 3 files changed, 34 insertions(+), 1 deletion(-) create mode 100644 waybar/build.mk diff --git a/Makefile b/Makefile index 21cf3e2..da29fe4 100644 --- a/Makefile +++ b/Makefile @@ -54,6 +54,10 @@ ifeq ($(WITH_SDDM),yes) install: install-sddm endif +ifeq ($(WITH_WAYBAR),yes) +include waybar/build.mk +endif + install: install-sway install-swaylock check: diff --git a/sway-config-fedora.spec.rpkg b/sway-config-fedora.spec.rpkg index 208bbd7..8935d7a 100644 --- a/sway-config-fedora.spec.rpkg +++ b/sway-config-fedora.spec.rpkg @@ -1,7 +1,9 @@ # vim: ft=spec %bcond initialsetup %[0%{?fedora} >= 40 || 0%{?rhel} >= 10] %bcond sddm 1 +%bcond waybar 1 %global sway_ver 1.8 +%global waybar_ver 0.9.24 Name: {{{ git_name }}} Version: {{{ git_version }}} @@ -88,6 +90,23 @@ This package contains configuration and dependencies for SDDM to use Sway for the greeter display server. %endif +%if %{with waybar} +%package -n waybar-config-fedora +Summary: Fedora Sway Spin configuration for Waybar + +Requires: waybar >= %{waybar_ver} +Provides: waybar-config = %{waybar_ver}+%{version}-%{release} +Conflicts: waybar-config + +%description -n waybar-config-fedora +%{summary}. + +%files -n waybar-config-fedora +%license LICENSE +%config(noreplace) %{_sysconfdir}/xdg/waybar/config +%config(noreplace) %{_sysconfdir}/xdg/waybar/style.css +%endif + %prep {{{ git_setup_macro path=$(git rev-parse --show-toplevel) }}} @@ -98,7 +117,10 @@ to use Sway for the greeter display server. %install -%make_install PREFIX='%{_prefix}' WITH_INITIALSETUP='%[%{with initialsetup}?"yes":"no"]' WITH_SDDM='%[%{with sddm}?"yes":"no"]' +%make_install PREFIX='%{_prefix}' \ + WITH_INITIALSETUP='%[%{with initialsetup}?"yes":"no"]' \ + WITH_SDDM='%[%{with sddm}?"yes":"no"]' \ + WITH_WAYBAR='%[%{with waybar}?"yes":"no"]' %files diff --git a/waybar/build.mk b/waybar/build.mk new file mode 100644 index 0000000..6d60675 --- /dev/null +++ b/waybar/build.mk @@ -0,0 +1,7 @@ +.PHONY: install-waybar + +install-waybar: + install -D -m 0644 -pv -t $(DESTDIR)$(SYSCONFDIR)/xdg/waybar \ + waybar/config waybar/style.css + +install: install-waybar From 27e0f2569a7dddf28eae510d1d8a4f35d3ee62bf Mon Sep 17 00:00:00 2001 From: Aleksei Bavshin Date: Sat, 3 Feb 2024 01:12:20 -0800 Subject: [PATCH 02/10] waybar: disable most of the modules --- waybar/config | 24 +++++++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/waybar/config b/waybar/config index daad8ab..b0571b8 100644 --- a/waybar/config +++ b/waybar/config @@ -5,9 +5,27 @@ // "width": 1280, // Waybar width "spacing": 4, // Gaps between modules (4px) // Choose the order of the modules - "modules-left": ["sway/workspaces", "sway/mode", "sway/scratchpad", "custom/media"], - "modules-center": ["sway/window"], - "modules-right": ["mpd", "idle_inhibitor", "pulseaudio", "network", "cpu", "memory", "temperature", "backlight", "keyboard-state", "sway/language", "battery", "battery#bat2", "clock", "tray"], + "modules-left": [ + "sway/workspaces", + "sway/mode", + "sway/scratchpad" + ], + "modules-center": [ + "sway/window" + ], + "modules-right": [ + "idle_inhibitor", + "pulseaudio", + "network", + // "cpu", + // "memory", + // "temperature", + // "backlight", + "sway/language", + "battery", + "clock", + "tray" + ], // Modules configuration // "sway/workspaces": { // "disable-scroll": true, From 84dfce4a10a581ffcb91b13d9f803c3d042d708d Mon Sep 17 00:00:00 2001 From: Aleksei Bavshin Date: Sun, 4 Feb 2024 15:36:09 -0800 Subject: [PATCH 03/10] waybar: change font to monospace --- waybar/style.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/waybar/style.css b/waybar/style.css index cf5c5fb..6858aac 100644 --- a/waybar/style.css +++ b/waybar/style.css @@ -1,6 +1,5 @@ * { - /* `otf-font-awesome` is required to be installed for icons */ - font-family: FontAwesome, Roboto, Helvetica, Arial, sans-serif; + font-family: 'Noto Sans Mono', 'Font Awesome 6 Free', 'Font Awesome 6 Brands', monospace; font-size: 13px; } From 9d283787b40fb15d7c9972a8c448856e6c2ce6e5 Mon Sep 17 00:00:00 2001 From: Aleksei Bavshin Date: Sat, 10 Feb 2024 16:22:19 -0800 Subject: [PATCH 04/10] waybar: use moon phase emojis insted of symbols Whatever the required font is, we don't have it in the default installation. --- waybar/config | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/waybar/config b/waybar/config index b0571b8..ff16693 100644 --- a/waybar/config +++ b/waybar/config @@ -122,7 +122,7 @@ "backlight": { // "device": "acpi_video1", "format": "{percent}% {icon}", - "format-icons": ["", "", "", "", "", "", "", "", ""] + "format-icons": ["🌑", "🌘", "🌗", "🌖", "🌕"] }, "battery": { "states": { From 3bc2aefe96a06a59aa9d7290a61e6cba09e2640e Mon Sep 17 00:00:00 2001 From: Aleksei Bavshin Date: Mon, 12 Feb 2024 20:42:52 -0800 Subject: [PATCH 05/10] waybar: common rules for module margins and padding --- waybar/config | 2 +- waybar/style.css | 53 ++++++++++++++++++++++-------------------------- 2 files changed, 25 insertions(+), 30 deletions(-) diff --git a/waybar/config b/waybar/config index ff16693..1938433 100644 --- a/waybar/config +++ b/waybar/config @@ -97,7 +97,7 @@ }, "tray": { // "icon-size": 21, - "spacing": 10 + "spacing": 5 }, "clock": { // "timezone": "America/New_York", diff --git a/waybar/style.css b/waybar/style.css index 6858aac..bada4b5 100644 --- a/waybar/style.css +++ b/waybar/style.css @@ -48,7 +48,6 @@ button:hover { } #workspaces button { - padding: 0 5px; background-color: transparent; color: #ffffff; } @@ -71,39 +70,38 @@ button:hover { border-bottom: 3px solid #ffffff; } -#clock, -#battery, -#cpu, -#memory, -#disk, -#temperature, -#backlight, -#network, -#pulseaudio, -#wireplumber, -#custom-media, -#tray, -#mode, -#idle_inhibitor, -#scratchpad, -#mpd { +/* Common module rules */ +.modules-left > widget > label, +.modules-center > widget > label, +.modules-right > widget > label { + color: inherit; + margin: 0; padding: 0 10px; - color: #ffffff; } -#window, -#workspaces { - margin: 0 4px; +.modules-left > widget > box, +.modules-center > widget > box, +.modules-right > widget > box { + color: inherit; + margin: 0; + padding: 0; } -/* If workspaces is the leftmost module, omit left margin */ -.modules-left > widget:first-child > #workspaces { +/* If the leftmost module is a box, omit left margin and padding */ +.modules-left > widget:first-child > box { margin-left: 0; + padding-left: 0; } -/* If workspaces is the rightmost module, omit right margin */ -.modules-right > widget:last-child > #workspaces { +/* If the rightmost module is a box, omit right margin and padding */ +.modules-right > widget:last-child > box { margin-right: 0; + padding-right: 0; +} + +#image { + margin: 0; + padding: 0 10px; } #clock { @@ -209,6 +207,7 @@ label:focus { #tray { background-color: #2980b9; + padding: 0 5px; } #tray > .passive { @@ -249,16 +248,12 @@ label:focus { #language { background: #00b093; color: #740864; - padding: 0 5px; - margin: 0 5px; min-width: 16px; } #keyboard-state { background: #97e1ad; color: #000000; - padding: 0 0px; - margin: 0 5px; min-width: 16px; } From 1281b3c577a808f2fc24a6be1a51c5b8921381c5 Mon Sep 17 00:00:00 2001 From: Aleksei Bavshin Date: Mon, 12 Feb 2024 20:48:00 -0800 Subject: [PATCH 06/10] waybar: fix vertical alignment for 'mode' --- waybar/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/waybar/style.css b/waybar/style.css index bada4b5..533d7af 100644 --- a/waybar/style.css +++ b/waybar/style.css @@ -67,7 +67,7 @@ button:hover { #mode { background-color: #64727D; - border-bottom: 3px solid #ffffff; + box-shadow: inset 0 -3px #ffffff; } /* Common module rules */ From 65b7d593148c6f320dfa51df6c018b6959c7aa8b Mon Sep 17 00:00:00 2001 From: Aleksei Bavshin Date: Mon, 12 Feb 2024 20:56:28 -0800 Subject: [PATCH 07/10] waybar: reset button styles --- waybar/style.css | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/waybar/style.css b/waybar/style.css index 533d7af..3b27c2c 100644 --- a/waybar/style.css +++ b/waybar/style.css @@ -34,11 +34,13 @@ window#waybar.chromium { } 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; + /* reset all builtin/theme styles */ + all: unset; + /* Restore some properties */ + min-height: 24px; + min-width: 16px; + padding: 0 10px; + transition: all 200ms ease-out; } /* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */ From b4c4556b069081b6aed7a8c279ab59f720e2cbd3 Mon Sep 17 00:00:00 2001 From: Aleksei Bavshin Date: Mon, 12 Feb 2024 21:22:31 -0800 Subject: [PATCH 08/10] waybar: less colorful bar --- waybar/style.css | 274 ++++++++++++++++++++++------------------------- 1 file changed, 131 insertions(+), 143 deletions(-) diff --git a/waybar/style.css b/waybar/style.css index 3b27c2c..10c0c27 100644 --- a/waybar/style.css +++ b/waybar/style.css @@ -3,8 +3,10 @@ font-size: 13px; } +@define-color inactive_module_color #a9a9a9; + window#waybar { - background-color: rgba(43, 48, 59, 0.5); + background-color: rgba(43, 48, 59, 0.8); border-bottom: 3px solid rgba(100, 114, 125, 0.5); color: #ffffff; transition-property: background-color; @@ -15,24 +17,6 @@ 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 { /* reset all builtin/theme styles */ all: unset; @@ -49,30 +33,10 @@ button:hover { box-shadow: inset 0 -3px #ffffff; } -#workspaces button { - background-color: transparent; - color: #ffffff; -} +/* + * Common module rules + */ -#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: #eb4d4b; -} - -#mode { - background-color: #64727D; - box-shadow: inset 0 -3px #ffffff; -} - -/* Common module rules */ .modules-left > widget > label, .modules-center > widget > label, .modules-right > widget > label { @@ -101,23 +65,62 @@ button:hover { padding-right: 0; } +/* + * Workspace state and focused window rules + */ + +/* +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; +} +*/ + +/* + * Styles and colors for important states + */ + +#workspaces button { + background-color: transparent; + color: #ffffff; +} + +#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: #eb4d4b; +} + +#mode { + background-color: #64727D; + box-shadow: inset 0 -3px #ffffff; +} + #image { margin: 0; padding: 0 10px; } -#clock { - background-color: #64727D; -} - -#battery { - background-color: #ffffff; - color: #000000; -} - #battery.charging, #battery.plugged { - color: #ffffff; - background-color: #26A65B; + color: #26A65B; } @keyframes blink { @@ -128,8 +131,7 @@ button:hover { } #battery.critical:not(.charging) { - background-color: #f53c3c; - color: #ffffff; + color: #f53c3c; animation-name: blink; animation-duration: 0.5s; animation-timing-function: linear; @@ -137,78 +139,13 @@ button:hover { animation-direction: alternate; } -label:focus { - background-color: #000000; -} - -#cpu { - background-color: #2ecc71; - color: #000000; -} - -#memory { - background-color: #9b59b6; -} - -#disk { - background-color: #964B00; -} - -#backlight { - background-color: #90b1b1; -} - -#network { - background-color: #2980b9; -} - -#network.disconnected { - background-color: #f53c3c; -} - -#pulseaudio { - background-color: #f1c40f; - color: #000000; -} - -#pulseaudio.muted { - background-color: #90b1b1; - color: #2a5c45; -} - -#wireplumber { - background-color: #fff0f5; - color: #000000; -} - +#network.disconnected, +#pulseaudio.muted, #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: #f0932b; -} - -#temperature.critical { - background-color: #eb4d4b; + color: @inactive_module_color; } #tray { - background-color: #2980b9; padding: 0 5px; } @@ -216,46 +153,46 @@ label:focus { -gtk-icon-effect: dim; } +@keyframes needs-attention { + to { + background-color: rgba(235, 77, 75, 0.5); + } +} + #tray > .needs-attention { -gtk-icon-effect: highlight; - background-color: #eb4d4b; + animation-name: needs-attention; + animation-duration: 1s; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-direction: alternate; + background-color: transparent; } #idle_inhibitor { - background-color: #2d3436; + color: @inactive_module_color; } #idle_inhibitor.activated { - background-color: #ecf0f1; - color: #2d3436; -} - -#mpd { - background-color: #66cc99; - color: #2a5c45; -} - -#mpd.disconnected { - background-color: #f53c3c; + color: inherit; } +#mpd.disconnected, +#mpd.paused, #mpd.stopped { - background-color: #90b1b1; + color: @inactive_module_color; } -#mpd.paused { - background-color: #51a37a; +#cpu.high, +#temperature.critical { + color: #eb4d4b; } #language { - background: #00b093; - color: #740864; min-width: 16px; } #keyboard-state { - background: #97e1ad; - color: #000000; min-width: 16px; } @@ -274,3 +211,54 @@ label:focus { #scratchpad.empty { background-color: transparent; } + +/* + * Less important colors. + * Uncomment this if you want more colorful bar + */ +/* +#cpu { + color: #2ecc71; +} + +#memory { + color: #9b59b6; +} + +#disk { + color: #964B00; +} + +#backlight { + color: #90b1b1; +} + +#network { + color: #2980b9; +} + +#pulseaudio, +#wireplumber { + color: #f1c40f; +} + +#temperature { + color: #f0932b; +} + +#mpd { + color: #66cc99; +} + +#mpd.paused { + color: #51a37a; +} + +#language { + color: #00b093; +} + +#keyboard-state { + color: #97e1ad; +} +*/ From 0e75a119b2183910793e615f6a4fea77c56f466e Mon Sep 17 00:00:00 2001 From: Aleksei Bavshin Date: Mon, 12 Feb 2024 21:38:41 -0800 Subject: [PATCH 09/10] waybar: fix underline (box-shadow) and border positioning Thin down borders and underlines to 2px --- waybar/style.css | 59 ++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 55 insertions(+), 4 deletions(-) diff --git a/waybar/style.css b/waybar/style.css index 10c0c27..5713a4f 100644 --- a/waybar/style.css +++ b/waybar/style.css @@ -7,12 +7,21 @@ window#waybar { background-color: rgba(43, 48, 59, 0.8); - border-bottom: 3px solid rgba(100, 114, 125, 0.5); + border-color: rgba(100, 114, 125, 0.5); + border-style: solid; color: #ffffff; transition-property: background-color; transition-duration: .5s; } +window#waybar:not(.bottom):not(.left):not(.right) { + border-bottom-width: 2px; +} + +window#waybar.bottom { + border-top-width: 2px; +} + window#waybar.hidden { opacity: 0.2; } @@ -30,7 +39,14 @@ button { /* 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; +} + +window#waybar:not(.bottom):not(.left):not(.right) button:hover{ + box-shadow: inset 0 -2px; +} + +window#waybar.bottom button:hover { + box-shadow: inset 0 2px; } /* @@ -65,6 +81,27 @@ button:hover { padding-right: 0; } +/* + * Uncomment to draw module underlines + */ +/* +window#waybar:not(.bottom):not(.left):not(.right) .modules-left > widget > label, +window#waybar:not(.bottom):not(.left):not(.right) .modules-center > widget > label, +window#waybar:not(.bottom):not(.left):not(.right) .modules-right > widget > label { + box-shadow: inset 0 -2px; +} + +window#waybar.bottom .modules-left > widget > label, +window#waybar.bottom .modules-center > widget > label, +window#waybar.bottom .modules-right > widget > label { + box-shadow: inset 0 2px; +} + +window#waybar #window { + box-shadow: none; +} +*/ + /* * Workspace state and focused window rules */ @@ -102,7 +139,14 @@ window#waybar.chromium { #workspaces button.focused { background-color: #64727D; - box-shadow: inset 0 -3px #ffffff; +} + +window#waybar:not(.bottom):not(.left):not(.right) #workspaces button.focused { + box-shadow: inset 0 -2px; +} + +window#waybar.bottom #workspaces button.focused { + box-shadow: inset 0 2px; } #workspaces button.urgent { @@ -111,7 +155,14 @@ window#waybar.chromium { #mode { background-color: #64727D; - box-shadow: inset 0 -3px #ffffff; +} + +window#waybar:not(.bottom):not(.left):not(.right) #mode { + box-shadow: inset 0 -2px; +} + +window#waybar.bottom #mode { + box-shadow: inset 0 2px; } #image { From 810ddff2493af345031273db3f0744c5e2ae983b Mon Sep 17 00:00:00 2001 From: Aleksei Bavshin Date: Mon, 12 Feb 2024 22:18:08 -0800 Subject: [PATCH 10/10] waybar: fine-tune colors for dark background --- waybar/style.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/waybar/style.css b/waybar/style.css index 5713a4f..19acc08 100644 --- a/waybar/style.css +++ b/waybar/style.css @@ -171,7 +171,7 @@ window#waybar.bottom #mode { } #battery.charging, #battery.plugged { - color: #26A65B; + color: #32cd32; } @keyframes blink { @@ -273,7 +273,7 @@ window#waybar.bottom #mode { } #memory { - color: #9b59b6; + color: #ba55d3; } #disk { @@ -285,7 +285,7 @@ window#waybar.bottom #mode { } #network { - color: #2980b9; + color: #00bfff; } #pulseaudio,