dotfiles/.config/waybar/style.css

160 lines
2.5 KiB
CSS

/*
use gtk theme variables to define color variables
ex. `@define-color variable_name color_code;`
use as `@variable_name`
shade, mix, and alpha modifiers are available
*/
@define-color primary_bg_color #041e23;
@define-color primary_fg_color #ecf0c1;
@define-color accent_color_1 #06afc7; /* used for tooltip border and active states */
@define-color accent_color_2 #5cab96; /* used for battery charging background */
@define-color accent_color_3 #e3cd7b; /* used for battery low background */
@define-color accent_color_4 #684c31; /* used for batter low foreground */
* {
border: none;
border-radius: 0;
font-family: Roboto, "Symbols NFM";
font-size: 14px;
min-height: 25px;
}
window#waybar {
background-color: @primary_bg_color;
color: @primary_fg_color;
border-bottom: 1px solid @primary_fg_color;
}
#window {
padding: 0 10px;
}
tooltip
{
background: rgba(4, 30, 35, 0.85);
border: 2px solid @accent_color_1;
border-radius: 10px;
}
tooltip label
{
color: white;
}
#workspaces button
{
padding: 0 5px;
background: transparent;
color: @primary_fg_color;
}
#workspaces button.focused
{
border-bottom: 3px solid @primary_fg_color;
}
#custom-bg
{
padding: 0 10px;
border-right: 1px solid @primary_fg_color;
}
#custom-pacman
{
padding: 0 10px;
border-right: 1px solid @primary_fg_color;
}
#scratchpad
{
color: @primary_bg_color;
background-color: @primary_fg_color;
padding: 0 10px;
}
#custom-notification
{
padding: 0 10px;
border-right: 1px solid @primary_fg_color;
}
#mode, #clock, #battery
{
padding: 0px 10px;
}
#pulseaudio
{
padding: 0 10px;
border-right: 1px solid @primary_fg_color;
}
#battery
{
background-color: @primary_fg_color;
color: @primary_bg_color;
font-weight: bold;
}
#battery.charging
{
background-color: @accent_color_2;
color: @primary_fg_color;
}
#battery.warning:not(.charging)
{
background-color: @accent_color_3;
color: @accent_color_4;
}
#idle_inhibitor
{
padding: 0 10px;
}
#network
{
padding: 0 10px;
border-right: 1px solid @primary_fg_color;
}
#idle_inhibitor.activated
{
color: @accent_color_1;
}
#backlight
{
padding: 0 10px;
border-right: 1px solid @primary_fg_color;
}
@keyframes blink-update
{
to
{
background-color: dodgerblue;
}
}
#custom-pacman
{
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#custom-pacman.pending-updates
{
animation-name: blink-update;
animation-duration: 3s;
}
#tray
{
padding: 0 10px;
background-color: @primary_fg_color;
margin: 0 5px;
}