From d701f79c11626beb697fcdd6e2afe463613c25ba Mon Sep 17 00:00:00 2001 From: Maximilian Friedersdorff Date: Thu, 24 Apr 2025 13:54:01 +0100 Subject: [PATCH] Style waybar --- home/dot_config/waybar/style.css | 162 +++++++++++-------------------- 1 file changed, 58 insertions(+), 104 deletions(-) diff --git a/home/dot_config/waybar/style.css b/home/dot_config/waybar/style.css index 5f9a47a..791a448 100644 --- a/home/dot_config/waybar/style.css +++ b/home/dot_config/waybar/style.css @@ -1,3 +1,21 @@ +@define-color base03 #002b36; +@define-color base02 #073642; +@define-color base01 #586e75; +@define-color base00 #657b83; +@define-color base0 #839496; +@define-color base1 #93a1a1; +@define-color base2 #eee8d5; +@define-color base3 #fdf6e3; +@define-color yellow #b58900; +@define-color orange #cb4b16; +@define-color red #dc322f; +@define-color magenta #d33682; +@define-color violet #6c71c4; +@define-color blue #268bd2; +@define-color cyan #2aa198; +@define-color green #859900; + + * { /* `otf-font-awesome` is required to be installed for icons */ font-family: JetBrainsMono, FontAwesome, Roboto, Helvetica, Arial, sans-serif; @@ -6,8 +24,8 @@ } window#waybar { - background-color: rgba(43, 48, 59, 0.3); - border-bottom: 3px solid rgba(100, 114, 125, 0.5); + background-color: rgba(0, 43, 54, 0.3); + border-bottom: 3px solid rgba(101, 123, 131, 0.5); color: #ffffff; transition-property: background-color; transition-duration: .5s; @@ -55,11 +73,6 @@ button:hover { box-shadow: inset 0 -3px #ffffff; } -/* you can set a style on hover for any module like this */ -#pulseaudio:hover { - background-color: #a37800; -} - #workspaces button { padding: 0 5px; background-color: transparent; @@ -71,17 +84,17 @@ button:hover { } #workspaces button.focused { - background-color: #64727D; + background-color: @base02; box-shadow: inset 0 -3px #ffffff; } #workspaces button.urgent { - background-color: #eb4d4b; + background-color: @orange; } #mode { - background-color: #64727D; - box-shadow: inset 0 -3px #ffffff; + background-color: @violet; + box-shadow: inset 0 -3px @base03; } #clock, @@ -99,18 +112,19 @@ button:hover { #mode, #idle_inhibitor, #scratchpad, -#power-profiles-daemon, #custom-power, -#mpd { +#language +{ padding: 0 10px; - color: #ffffff; + background-color: @base03; + color: @base1; } #window, #workspaces { margin: 0 4px; } - +halestorm darkness always wins .modules-right *, .modules-left * { border-radius: 5px; } @@ -119,7 +133,7 @@ button:hover { .modules-left > widget:first-child > #workspaces { margin-left: 0; } - +halestorm darkness always wins /* If workspaces is the rightmost module, omit right margin */ .modules-right > widget:last-child > #workspaces { margin-right: 0; @@ -133,31 +147,32 @@ button:hover { padding-bottom: 7px; } + #clock { - background-color: #64727D; + border-bottom: 3px solid @violet; } -#battery { - background-color: #ffffff; - color: #000000; +#backlight { + border-bottom: 3px solid @violet; } #battery.charging, #battery.plugged { - color: #ffffff; - background-color: #26A65B; + border-bottom: 3px solid @green; +} + +#battery { + border-bottom: 3px solid @blue; } @keyframes blink { to { - background-color: #ffffff; - color: #000000; + border-bottom: 3px solid @red; } } /* Using steps() instead of linear as a timing function to limit cpu usage */ #battery.critical:not(.charging) { - background-color: #f53c3c; - color: #ffffff; + border-bottom: 3px solid @base03; animation-name: blink; animation-duration: 0.5s; animation-timing-function: steps(12); @@ -165,102 +180,60 @@ button:hover { 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: #2ecc71; - color: #000000; + border-bottom: 3px solid @cyan; } #memory { - background-color: #9b59b6; + border-bottom: 3px solid @magenta; } #disk { - background-color: #964B00; -} - -#backlight { - background-color: #90b1b1; + border-bottom: 3px solid @orange; } #network { - background-color: #2980b9; + border-bottom: 3px solid @blue; } #network.disconnected { - background-color: #f53c3c; + border-bottom: 3px solid @orange; } #pulseaudio { - background-color: #f1c40f; - color: #000000; + border-bottom: 3px solid @yellow; } #pulseaudio.muted { - background-color: #90b1b1; - color: #2a5c45; -} - -#wireplumber { - background-color: #fff0f5; - color: #000000; -} - -#wireplumber.muted { - background-color: #f53c3c; + border-bottom: 3px solid @orange; } #custom-media { - background-color: #66cc99; - color: #2a5c45; - min-width: 100px; + border-bottom: 3px solid @cyan; } -#custom-media.custom-spotify { - background-color: #66cc99; -} - -#custom-media.custom-vlc { - background-color: #ffa000; +#custom-media.custom-firefox { + border-bottom: 3px solid @orange; } #custom-power { - background-color: #2d3436; + border-bottom: 3px solid @base01; } #temperature { - background-color: #f0932b; + border-bottom: 3px solid @yellow; } #temperature.critical { - background-color: #eb4d4b; + border-bottom: 3px solid @orange; } #tray { - background-color: #2980b9; - padding: 0 10px; + border-bottom: 3px solid @green; } #tray > .passive { @@ -273,34 +246,15 @@ label:focus { } #idle_inhibitor { - background-color: #2d3436; + border-bottom: 3px solid @base01; } #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; + border-bottom: 3px solid @base3; } #language { - background: #00b093; - color: #740864; + border-bottom: 3px solid @cyan; padding: 0 5px; margin: 0 5px; min-width: 16px;