diff --git a/.config/waybar/style.css b/.config/waybar/style.css new file mode 100644 index 0000000..d915da2 --- /dev/null +++ b/.config/waybar/style.css @@ -0,0 +1,284 @@ +* { + font-family: "Symbols Nerd Font", sans-serif; + font-size: 13px; +} + +window#waybar { + background-color: #200020; + color: #888888; + border-bottom: 3px solid #300030; + 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 #300030; + /* 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 #a800a8; +} + +#workspaces button { + padding: 0 5px; + /* background-color: transparent; */ + background-color: #180018; + box-shadow: inset 0 -3px #200020; +} + +#workspaces button:hover { + background: rgba(0, 0, 0, 0.2); +} + +#workspaces button.focused { + background-color: #500050; + color: #ffffaa; + box-shadow: inset 0 -3px #ffffaa; +} + +#workspaces button.urgent { + background-color: #b000b0; + color: #000000; +} + +/* #mode { */ +/* background-color: #64727D; */ +/* border-bottom: 3px solid #ffffff; */ +/* } */ + +#clock, +#battery, +#cpu, +#memory, +#disk, +#temperature, +#backlight, +#network, +#pulseaudio, +#wireplumber, +#custom-load, +#custom-kbd, +#tray, +#mode, +#idle_inhibitor, +#scratchpad, +#mpd { + padding: 2 5px; +} + +#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 { + font-size: 120%; +} + +#battery { + font-weight: bold; +} + +/* #battery.charging, #battery.plugged { */ +/* color: #ffffff; */ +/* background-color: #26A65B; */ +/* } */ + +@keyframes blink { + to { + background-color: #ffffff; + color: #000000; + } +} + +#battery.critical:not(.charging) { + background-color: #b000b0; + color: #000000; + animation-name: blink; + animation-duration: 0.5s; + animation-timing-function: linear; + animation-iteration-count: infinite; + 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: #b000b0; + color: #000000; +} + +/* #pulseaudio { */ +/* background-color: #f1c40f; */ +/* color: #000000; */ +/* } */ +/**/ +/* #pulseaudio.muted { */ +/* background-color: #90b1b1; */ +/* color: #2a5c45; */ +/* } */ + +#wireplumber { + color: #8888aa; +} + +#wireplumber.muted { + background-color: #b000b0; + color: #000000; +} + +#custom-load { + padding-right: 0; + color: #aa8888; +} + +/* #custom-media.custom-spotify { */ +/* background-color: #66cc99; */ +/* } */ +/**/ +/* #custom-media.custom-vlc { */ +/* background-color: #ffa000; */ +/* } */ + +/* #temperature { */ +/* color: #888800; */ +/* } */ + +#temperature.critical { + background-color: #b000b0; + color: #000000; +} + +#tray { + background-color: #180018; + box-shadow: inset 0 -3px #200020; +} + +#tray > .passive { + -gtk-icon-effect: dim; +} + +#tray > .needs-attention { + -gtk-icon-effect: highlight; + background-color: #b000b0; + color: #000000; +} + +#idle_inhibitor { + background-color: #180018; +} + +#idle_inhibitor.activated { + background-color: #500050; + color: #ffaaaa; +} + +/* #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; +}