diff --git a/templates/.config/waybar/config.jsonc.j2 b/templates/.config/waybar/config.jsonc.j2 index 18294d1..b21caf0 100644 --- a/templates/.config/waybar/config.jsonc.j2 +++ b/templates/.config/waybar/config.jsonc.j2 @@ -8,7 +8,6 @@ "niri/workspaces" ], "modules-center": [ - "niri/window" ], "modules-right": [ @@ -82,6 +81,10 @@ "\uf241", "\uf240", ], + "states": { + "warning": 30, + "critical": 10, + }, "format-charging": "\ue55b {capacity}% {time}", "format-full": "\ue55c {capacity}%", }, @@ -108,11 +111,19 @@ "cpu": { "format": "\uf2db {usage}%", - "tooltip": false + "tooltip": false, + "states": { + "warning": 70, + "critical": 90 + } }, "memory": { "format": "\uf538 {percentage}%", - "tooltip-format": "{used}GiB / {total}GiB" + "tooltip-format": "{used}GiB / {total}GiB", + "states": { + "warning": 70, + "critical": 90 + } }, {% if host.temperature_path %} diff --git a/templates/.config/waybar/style.css.j2 b/templates/.config/waybar/style.css.j2 index 09caa44..888d8e2 100644 --- a/templates/.config/waybar/style.css.j2 +++ b/templates/.config/waybar/style.css.j2 @@ -1,328 +1,69 @@ +/* Seti UI by */ +@define-color base00 #151718; +@define-color base01 #282a2b; +@define-color base02 #3B758C; +@define-color base03 #41535B; +@define-color base04 #43a5d5; +@define-color base05 #d6d6d6; +@define-color base06 #eeeeee; +@define-color base07 #ffffff; +@define-color base08 #Cd3f45; +@define-color base09 #db7b55; +@define-color base0A #e6cd69; +@define-color base0B #9fca56; +@define-color base0C #55dbbe; +@define-color base0D #55b5db; +@define-color base0E #a074c4; +@define-color base0F #8a553f; + * { /* `otf-font-awesome` is required to be installed for icons */ font-family: '{{ host.system_mono_font }}', 'Font Awesome 6 Free'; font-size: 13px; + + color: @base05; } window#waybar { - background-color: rgba(43, 48, 59, 0.5); - border-bottom: 3px solid rgba(100, 114, 125, 0.5); - color: #ffffff; - transition-property: background-color; - transition-duration: .5s; + {# background: rgba(@base00, 0.5); #} + background: rgba(0x15, 0x17, 0x18, 0.5); } -window#waybar.hidden { - opacity: 0.2; +.modules-left { + padding-left: 4px; +} +.modules-right { + padding-right: 4px; } -/* -window#waybar.empty { - background-color: transparent; -} -window#waybar.solo { - background-color: #FFFFFF; -} -*/ +.module { + padding: 0 5px; + margin: 4px 0; + background: @base01; + border-radius: 6px; -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: #a37800; +#workspaces { + padding: 0; } #workspaces button { padding: 0 5px; - background-color: transparent; - color: #ffffff; } -#workspaces button:hover { - background: rgba(0, 0, 0, 0.2); + +#wireplumber.muted #network.disabled .warning { + box-shadow: 0 -3px 0 @base0A; } -#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; -} - -#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: #2ecc71; - color: #000000; -} - -#memory { - background-color: #9b59b6; -} - -#disk { - background-color: #964B00; -} - -#backlight { - background-color: #90b1b1; +.critical { + box-shadow: 0 -3px 0 @base08; } #network { - background-color: #2980b9; + box-shadow: 0 -3px 0 @base0B; } - #network.disconnected { - background-color: #f53c3c; -} - -#pulseaudio { - background-color: #f1c40f; - 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: #f0932b; -} - -#temperature.critical { - background-color: #eb4d4b; -} - -#tray { - background-color: #2980b9; -} - -#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: #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; -} - -#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; + box-shadow: none; }