max/dotfiles
1
0
Fork 0
Code Issues Pull requests Projects 1 Releases Packages Wiki Activity Actions

Style waybar

Browse source
This commit is contained in:
Maximilian Friedersdorff 2025-04-24 13:54:01 +01:00
parent 577f998d72
commit d701f79c11
1 changed files with 58 additions and 104 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

162
home/dot_config/waybar/style.css
View file

@ -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 */ /* `otf-font-awesome` is required to be installed for icons */
font-family: JetBrainsMono, FontAwesome, Roboto, Helvetica, Arial, sans-serif; font-family: JetBrainsMono, FontAwesome, Roboto, Helvetica, Arial, sans-serif;
@ -6,8 +24,8 @@
} }
window#waybar { window#waybar {
background-color: rgba(43, 48, 59, 0.3); background-color: rgba(0, 43, 54, 0.3);
border-bottom: 3px solid rgba(100, 114, 125, 0.5); border-bottom: 3px solid rgba(101, 123, 131, 0.5);
color: #ffffff; color: #ffffff;
transition-property: background-color; transition-property: background-color;
transition-duration: .5s; transition-duration: .5s;
@ -55,11 +73,6 @@ button:hover {
box-shadow: inset 0 -3px #ffffff; 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 { #workspaces button {
padding: 0 5px; padding: 0 5px;
background-color: transparent; background-color: transparent;
@ -71,17 +84,17 @@ button:hover {
} }
#workspaces button.focused { #workspaces button.focused {
background-color: #64727D; background-color: @base02;
box-shadow: inset 0 -3px #ffffff; box-shadow: inset 0 -3px #ffffff;
} }
#workspaces button.urgent { #workspaces button.urgent {
background-color: #eb4d4b; background-color: @orange;
} }
#mode { #mode {
background-color: #64727D; background-color: @violet;
box-shadow: inset 0 -3px #ffffff; box-shadow: inset 0 -3px @base03;
} }
#clock, #clock,
@ -99,18 +112,19 @@ button:hover {
#mode, #mode,
#idle_inhibitor, #idle_inhibitor,
#scratchpad, #scratchpad,
#power-profiles-daemon,
#custom-power, #custom-power,
#mpd { #language
{
padding: 0 10px; padding: 0 10px;
color: #ffffff; background-color: @base03;
color: @base1;
} }
#window, #window,
#workspaces { #workspaces {
margin: 0 4px; margin: 0 4px;
} }
halestorm darkness always wins
.modules-right *, .modules-left * { .modules-right *, .modules-left * {
border-radius: 5px; border-radius: 5px;
} }
@ -119,7 +133,7 @@ button:hover {
.modules-left > widget:first-child > #workspaces { .modules-left > widget:first-child > #workspaces {
margin-left: 0; margin-left: 0;
} }
halestorm darkness always wins
/* If workspaces is the rightmost module, omit right margin */ /* If workspaces is the rightmost module, omit right margin */
.modules-right > widget:last-child > #workspaces { .modules-right > widget:last-child > #workspaces {
margin-right: 0; margin-right: 0;
@ -133,31 +147,32 @@ button:hover {
padding-bottom: 7px; padding-bottom: 7px;
} }
#clock { #clock {
background-color: #64727D; border-bottom: 3px solid @violet;
} }
#battery { #backlight {
background-color: #ffffff; border-bottom: 3px solid @violet;
color: #000000;
} }
#battery.charging, #battery.plugged { #battery.charging, #battery.plugged {
color: #ffffff; border-bottom: 3px solid @green;
background-color: #26A65B; }
#battery {
border-bottom: 3px solid @blue;
} }
@keyframes blink { @keyframes blink {
to { to {
background-color: #ffffff; border-bottom: 3px solid @red;
color: #000000;
} }
} }
/* Using steps() instead of linear as a timing function to limit cpu usage */ /* Using steps() instead of linear as a timing function to limit cpu usage */
#battery.critical:not(.charging) { #battery.critical:not(.charging) {
background-color: #f53c3c; border-bottom: 3px solid @base03;
color: #ffffff;
animation-name: blink; animation-name: blink;
animation-duration: 0.5s; animation-duration: 0.5s;
animation-timing-function: steps(12); animation-timing-function: steps(12);
@ -165,102 +180,60 @@ button:hover {
animation-direction: alternate; 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 { label:focus {
background-color: #000000; background-color: #000000;
} }
#cpu { #cpu {
background-color: #2ecc71; border-bottom: 3px solid @cyan;
color: #000000;
} }
#memory { #memory {
background-color: #9b59b6; border-bottom: 3px solid @magenta;
} }
#disk { #disk {
background-color: #964B00; border-bottom: 3px solid @orange;
}
#backlight {
background-color: #90b1b1;
} }
#network { #network {
background-color: #2980b9; border-bottom: 3px solid @blue;
} }
#network.disconnected { #network.disconnected {
background-color: #f53c3c; border-bottom: 3px solid @orange;
} }
#pulseaudio { #pulseaudio {
background-color: #f1c40f; border-bottom: 3px solid @yellow;
color: #000000;
} }
#pulseaudio.muted { #pulseaudio.muted {
background-color: #90b1b1; border-bottom: 3px solid @orange;
color: #2a5c45;
}
#wireplumber {
background-color: #fff0f5;
color: #000000;
}
#wireplumber.muted {
background-color: #f53c3c;
} }
#custom-media { #custom-media {
background-color: #66cc99; border-bottom: 3px solid @cyan;
color: #2a5c45;
min-width: 100px;
} }
#custom-media.custom-spotify { #custom-media.custom-firefox {
background-color: #66cc99; border-bottom: 3px solid @orange;
}
#custom-media.custom-vlc {
background-color: #ffa000;
} }
#custom-power { #custom-power {
background-color: #2d3436; border-bottom: 3px solid @base01;
} }
#temperature { #temperature {
background-color: #f0932b; border-bottom: 3px solid @yellow;
} }
#temperature.critical { #temperature.critical {
background-color: #eb4d4b; border-bottom: 3px solid @orange;
} }
#tray { #tray {
background-color: #2980b9; border-bottom: 3px solid @green;
padding: 0 10px;
} }
#tray > .passive { #tray > .passive {
@ -273,34 +246,15 @@ label:focus {
} }
#idle_inhibitor { #idle_inhibitor {
background-color: #2d3436; border-bottom: 3px solid @base01;
} }
#idle_inhibitor.activated { #idle_inhibitor.activated {
background-color: #ecf0f1; border-bottom: 3px solid @base3;
color: #2d3436;
}
#mpd {
background-color: #66cc99;
color: #2a5c45;
}
#mpd.disconnected {
background-color: #f53c3c;
}
#mpd.stopped {
background-color: #90b1b1;
}
#mpd.paused {
background-color: #51a37a;
} }
#language { #language {
background: #00b093; border-bottom: 3px solid @cyan;
color: #740864;
padding: 0 5px; padding: 0 5px;
margin: 0 5px; margin: 0 5px;
min-width: 16px; min-width: 16px;