dotfiles/home/modules/waybar.css

124 lines
1.9 KiB
CSS
Raw Permalink Normal View History

@define-color bg rgba(36, 16, 26, .75); /*#24101ac0;*/
2023-01-27 04:05:30 +07:00
@define-color blue #87e5cf;
@define-color green #8cbf73;
@define-color yellow #ebbe5f;
@define-color red #e64040;
@define-color pink #ffa8a8;
@define-color fg #ebdadd;
@define-color dimmed rgba(235, 218, 221, .15);
* {
border: none;
border-radius: 0;
font-family: Noto Sans Mono, "Symbols Nerd Font Mono", monospace;
2023-12-24 14:27:43 +07:00
font-size: 19px;
2023-01-27 04:05:30 +07:00
min-height: 0;
}
2023-12-24 14:27:43 +07:00
#custom-a { font-size: 40px; }
#custom-b { font-size: 40px; }
#custom-c { font-size: 40px; }
#custom-d { font-size: 40px; }
#custom-e { font-size: 40px; }
#custom-f { font-size: 40px; }
#custom-g { font-size: 40px; }
2023-02-21 03:54:31 +07:00
#mpris {
2023-02-21 05:20:19 +07:00
padding-left: 3px;
2023-02-21 03:54:31 +07:00
font-family: "Noto Sans Mono CJK JP", "Noto Sans Mono", "Symbols Nerd Font Mono", monospace;
}
2023-01-27 04:05:30 +07:00
window#waybar {
background-color: @bg;
transition-property: background-color;
transition-duration: .5s;
}
window#waybar.hidden {
opacity: .2;
}
#workspaces button {
padding: 0 11px;
background: transparent;
border-bottom: 3px solid transparent;
}
#workspaces button.hover {
background-color: @background;
box-shadow: inherit;
border-bottom: 3px solid @dimmed;
}
#workspaces button.focused {
background-color: @dimmed;
border-bottom: 3px solid @fg;
}
#workspaces button.urgent {
background-color: @background;
border-bottom: 3px solid @red;
}
#mode {
background-color: transparent;
border: 2px solid @fg;
border-radius: 2px;
padding: 0 5px;
}
#clock,
#battery,
#tray {
padding: 0 8px;
}
#memory,
#cpu,
#wireplumber,
#language {
padding: 0 3px;
}
2023-01-27 04:05:30 +07:00
#mode,
#workspaces,
#workspaces button
{
color: @fg;
}
#cpu {
color: @fg;
}
#window {
padding: 0 0;
margin: 3px 0;
2023-01-27 04:05:30 +07:00
background-color: transparent;
color: @fg;
}
.charging,
#clock,
#language,
#wireplumber,
#memory
{
color: @fg;
}
#battery.full {
color: @green;
}
.discharging,
.warning {
color: @yellow;
}
.critical {
color: #ffffff;
background: @red;
}