Styling bar

This commit is contained in:
2026-02-12 21:51:22 +01:00
parent 9f28ed91fe
commit d9f5bb91ca
2 changed files with 45 additions and 51 deletions

View File

@@ -24,7 +24,6 @@
"battery", "battery",
"clock", "clock",
"tray", "tray",
"custom/power"
], ],
"keyboard-state": { "keyboard-state": {
"numlock": true, "numlock": true,

View File

@@ -1,12 +1,10 @@
* { * {
/* `otf-font-awesome` is required to be installed for icons */
font-family: "JetBrainsMono Nerd Font", FontAwesome, Roboto, Helvetica, Arial, sans-serif; font-family: "JetBrainsMono Nerd Font", FontAwesome, Roboto, Helvetica, Arial, sans-serif;
font-size: 16px; font-size: 16px;
} }
window#waybar { window#waybar {
background-color: rgba(43, 48, 59, 0.5); background-color: #1e1e2e;
border-bottom: 3px solid rgba(100, 114, 125, 0.5);
color: #ffffff; color: #ffffff;
transition-property: background-color; transition-property: background-color;
transition-duration: .5s; transition-duration: .5s;
@@ -16,24 +14,6 @@ window#waybar.hidden {
opacity: 0.2; 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 { button {
/* Use box-shadow instead of border so the text isn't offset */ /* Use box-shadow instead of border so the text isn't offset */
box-shadow: inset 0 -3px transparent; box-shadow: inset 0 -3px transparent;
@@ -54,9 +34,9 @@ button:hover {
} }
#workspaces button { #workspaces button {
padding: 0 5px; padding: 0 8px;
background-color: transparent; background-color: transparent;
color: #ffffff; color: #cdd6f1;
} }
#workspaces button:hover { #workspaces button:hover {
@@ -65,17 +45,21 @@ button:hover {
#workspaces button.focused, #workspaces button.focused,
#workspaces button.active { #workspaces button.active {
background-color: #64727D; background-color: #a6e3a1;
box-shadow: inset 0 -3px #ffffff; color: #1e1e2e;
/* box-shadow: inset 0 -3px #ffffff; */
} }
#workspaces button.urgent { #workspaces button.urgent {
background-color: #eb4d4b; background-color: #f38ba8;
color: #1e1e2e;
} }
#mode { #mode {
background-color: #64727D; background-color: #f38ba8;
box-shadow: inset 0 -3px #ffffff; color: #1e1e2e;
padding: 0 10px;
font-weight: 800;
} }
#clock, #clock,
@@ -90,13 +74,16 @@ button:hover {
#wireplumber, #wireplumber,
#custom-media, #custom-media,
#tray, #tray,
#mode,
#idle_inhibitor, #idle_inhibitor,
#scratchpad, #scratchpad,
#power-profiles-daemon, #power-profiles-daemon,
#mpd { #mpd {
padding: 0 10px; padding: 0 10px;
color: #ffffff; color: #1e1e2e;
}
#power {
color: hotpink;
} }
#window, #window,
@@ -115,18 +102,20 @@ button:hover {
} }
#clock { #clock {
background-color: #64727D; background-color: #eba0ac;
color: #1e1e2e;
} }
#battery { #battery {
background-color: #ffffff; background-color: #89b4fa;
color: #000000; color: #1e1e2e;
padding-right: 14px;
} }
#battery.charging, #battery.charging,
#battery.plugged { #battery.plugged {
color: #ffffff; color: #1e1e2e;
background-color: #26A65B; background-color: #f9e2af;
} }
@keyframes blink { @keyframes blink {
@@ -171,12 +160,13 @@ label:focus {
} }
#cpu { #cpu {
background-color: #2ecc71; padding-right: 14px;
color: #000000; background-color: #f2cdcd;
} }
#memory { #memory {
background-color: #9b59b6; padding-right: 14px;
background-color: #89dceb;
} }
#disk { #disk {
@@ -184,11 +174,13 @@ label:focus {
} }
#backlight { #backlight {
background-color: #90b1b1; background-color: #a6e3a1;
padding-right: 14px;
} }
#network { #network {
background-color: #2980b9; padding-right: 18px;
background-color: #89b4fa;
} }
#network.disconnected { #network.disconnected {
@@ -196,13 +188,12 @@ label:focus {
} }
#pulseaudio { #pulseaudio {
background-color: #f1c40f; padding-right: 14px;
color: #000000; background-color: #a6e3a1;
} }
#pulseaudio.muted { #pulseaudio.muted {
background-color: #90b1b1; background-color: #f38ba8;
color: #2a5c45;
} }
#wireplumber { #wireplumber {
@@ -229,15 +220,17 @@ label:focus {
} }
#temperature { #temperature {
background-color: #f0932b; padding-right: 14px;
background-color: #fab387;
} }
#temperature.critical { #temperature.critical {
background-color: #eb4d4b; background-color: #f38ba8;
} }
#tray { #tray {
background-color: #2980b9; background-color: transparent;
border: 1px solid #f9e2af;
} }
#tray>.passive { #tray>.passive {
@@ -250,12 +243,14 @@ label:focus {
} }
#idle_inhibitor { #idle_inhibitor {
background-color: #2d3436; background-color: #181825;
padding: 3px 14px 3px 6px;
color: #cdd6f4;
} }
#idle_inhibitor.activated { #idle_inhibitor.activated {
background-color: #ecf0f1; background-color: #181825;
color: #2d3436; color: #f38ba8;
} }
#mpd { #mpd {