From a0b32034f7c557bcaa38e3610c8a97eeee7a00a8 Mon Sep 17 00:00:00 2001 From: Mathias Magnusson Date: Sun, 29 Jun 2025 22:28:05 +0200 Subject: Initial commit --- dot-config/waybar/style.css | 193 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 193 insertions(+) create mode 100644 dot-config/waybar/style.css (limited to 'dot-config/waybar/style.css') diff --git a/dot-config/waybar/style.css b/dot-config/waybar/style.css new file mode 100644 index 0000000..438d30f --- /dev/null +++ b/dot-config/waybar/style.css @@ -0,0 +1,193 @@ +* { + font-size: 14px; + border-radius: 4px; +} + +window#waybar { + /* `otf-font-awesome` is required to be installed for icons */ + font-family: FontAwesome, monospace; + background-color: transparent; + border-bottom: 0px; + color: #ebdbb2; + transition-property: background-color; + transition-duration: .5s; +} + +window#waybar.hidden { + opacity: 0.2; +} + +window#waybar.empty #window { + background-color: transparent; +} + +/* +window#waybar.empty { + background-color: transparent; +} +window#waybar.solo { + background-color: #FFFFFF; +} +*/ + +.modules-right { + margin: 10px 6px 0 0; +} +.modules-center { + margin: 10px 0 0 0; +} +.modules-left { + margin: 10px 0 0 6px; +} + +button { + /* Use box-shadow instead of border so the text isn't offset */ + /* box-shadow: inset 0 -3px transparent; */ + border: 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 #ebdbb2; +} */ + +#workspaces { + background-color: #282828; +} + +#workspaces button { + padding: 0 5px; + background-color: transparent; + color: #ebdbb2; + border-radius: 0; +} + +#workspaces button:first-child { + border-radius: 5px 0 0 5px; +} + +#workspaces button:last-child { + border-radius: 0 5px 5px 0; +} + +#workspaces button:hover { + color: #d79921; +} + +#workspaces button.focused { + background-color: #665c54; + /* box-shadow: inset 0 -3px #ffffff; */ +} + +#workspaces button.urgent { + background-color: #b16286; +} + +#idle_inhibitor, +#cava, +#scratchpad, +#mode, +#window, +#clock, +#battery, +#backlight, +#wireplumber, +#tray, +#mpris, +#network, +#temperature, +#bluetooth, +#memory, +#custom-poweroff, +#custom-reboot, +#custom-suspend, +#load { + padding: 0 10px; + background-color: #282828; + color: #ebdbb2; +} + +#custom-reboot, +#custom-suspend { + margin-right: 3px; +} + +#privacy { + padding: 0 10px; + background-color: #bc4b3c; + color: #ebdbb2; +} + +#mode { + background-color: #689d6a; + color: #282828; + /* box-shadow: inset 0 -3px #ffffff; */ +} + +/* 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; +} + +#cava { + padding: 0 5px; +} + +#battery.charging, #battery.plugged { + background-color: #98971a; + color: #282828; +} + +@keyframes blink { + to { + background-color: #282828; + color: #ebdbb2; + } +} + +/* Using steps() instead of linear as a timing function to limit cpu usage */ +#battery.critical:not(.charging) { + background-color: #cc241d; + color: #ebdbb2; + animation-name: blink; + animation-duration: 0.5s; + animation-timing-function: steps(12); + animation-iteration-count: infinite; + animation-direction: alternate; +} + +label:focus { + background-color: #000000; +} + +#wireplumber.muted { + background-color: #458588; +} + +#tray > .passive { + -gtk-icon-effect: dim; +} + +#tray > .needs-attention { + -gtk-icon-effect: highlight; +} + +#mpris.playing { + background-color: #d79921; + color: #282828; +} + +#tray menu { + font-family: sans-serif; +} + +#scratchpad.empty { + background: transparent; +} -- cgit v1.2.3