dotfiles/.config/waybar/style.css

195 lines
2.9 KiB
CSS

* {
/* `otf-font-awesome` is required to be installed for icons */
font-family: FontAwesome, JetBrainsMono, sans-serif;
font-size: 13px;
}
@import "./colors.css";
window#waybar {
background-color: rgba(43, 48, 59, 0.0);
color: @fg;
transition-property: background-color;
transition-duration: .5s;
padding: 0;
margin: 0;
}
.modules-left > widget:first-child > #workspaces {
margin-left: 0;
}
.modules-right > widget:last-child > #workspaces {
margin-right: 0;
}
button {
margin: 0;
padding: 10px;
background-color: @bg;
color: #d8dee8;
border-radius: 8px;
}
button:hover {
margin: 0;
padding: 10px;
background-color: @bg;
color: #d8dee8;
border-radius: 8px;
}
button:focus {
margin: 0;
padding: 10px;
background-color: @bg;
color: #d8dee8;
border-radius: 8px;
}
#workspaces {
padding: 0 15px 0 15px;
margin: 5px 0 5px 0;
background-color: @bg;
color: @fg;
border-radius: 14px;
/* margin: 0; */
}
#workspaces button {
padding: 0 5px;
margin: 5px;
/* background-color: ; */
color: #444b6a;
}
#workspaces button:hover {
color: @bg;
}
#workspaces button.active {
background-color: @bg;
color: @white;
}
#workspaces button.urgent {
background-color: #eb4d4b;
}
#tray {
padding: 7px;
margin: 5px 0 5px 0;
background-color: @bg;
color: #d8dee8;
border-radius: 10px;
}
#tray > .passive {
-gtk-icon-effect: dim;
}
#tray > .needs-attention {
-gtk-icon-effect: highlight;
}
#custom-cmus {
padding: 0 15px 0 15px;
margin: 5px 0 5px 0;
background-color: @bg;
color: #b9f27c;
border-radius: 8px;
}
#window {
padding: 0 15px 0 15px;
margin: 5px 0 5px 0;
background-color: @bg;
color: @fg;
border-radius: 8px;
}
#clock {
padding: 0 15px 0 15px;
margin: 5px 0 5px 0;
background-color: @bg;
color: @fg;
border-radius: 8px;
}
#mode,
#custom-weather {
padding: 0 15px 0 15px;
margin: 5px 0 5px 0;
background-color: @bg;
color: @fg;
border-radius: 8px;
}
@keyframes blink {
to {
background-color: #ffffff;
color: #000000;
}
}
label:focus {
background-color: #ffffff;
}
#custom-language {
background-color: @bg;
padding: 0 15px 0 15px;
margin: 5px 0 5px 0;
border-radius: 8px;
}
#pulseaudio {
background-color: @bg;
padding: 0 15px 0 15px;
margin: 5px 0 5px 0;
border-radius: 8px;
}
#bluetooth {
background-color: @bg;
padding: 0 15px 0 15px;
margin: 5px 0 5px 0;
border-radius: 8px;
}
#battery {
padding: 0 15px 0 15px;
margin: 5px 0 5px 0;
border-radius: 8px;
color: @green;
background: @bg;
}
#battery.charging, #battery.plugged {
color: @green;
background-color: @bg;
}
#battery.warning:not(.charging) {
background-color: @bg;
color: @orange;
}
#battery.critical:not(.charging) {
background-color: @barkground;
color: @red;
animation-name: blink;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}