nixcfg/modules/nixos/desktop/addons/waybar/style.css
2024-01-11 10:31:04 +00:00

315 lines
5 KiB
CSS

/*
********************************************
*░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░*
*░░█▀█░█░░░█░█░█▀▀░░░█░█░█░░░▀█▀░█▀▄░█▀█░░*
*░░█▀▀░█░░░█░█░▀▀█░░░█░█░█░░░░█░░█▀▄░█▀█░░*
*░░▀░░░▀▀▀░▀▀▀░▀▀▀░░░▀▀▀░▀▀▀░░▀░░▀░▀░▀░▀░░*
*░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░*
********************************************
*/
* {
border: none;
border-radius: 0;
font-family: Nerd Font Hack;
font-size: 14px;
}
window#waybar {
background: transparent;
}
window#waybar.hidden {
opacity: 0.2;
}
#window {
margin-top: 8px;
padding-left: 20px;
padding-right: 20px;
border-radius: 8px;
transition: none;
color: transparent;
background: transparent;
}
window#waybar.termite #window,
window#waybar.Firefox #window,
window#waybar.Navigator #window,
window#waybar.PCSX2 #window {
color: #4d4d4d;
background: #e6e6e6;
}
tooltip {
border-radius: 12px;
background: #eceff4;
}
tooltip label {
color: #2e3440;
text-shadow: none;
padding: 0 4px;
}
#workspaces button,
#mode,
#mpd,
#custom-media,
#network,
#pulseaudio,
#temperature,
#cpu,
#memory,
#tray,
#clock,
#battery {
color: #2e3440;
background: #eceff4;
}
#workspaces {
margin-top: 8px;
margin-left: 12px;
margin-bottom: 0;
border-radius: 8px;
transition: none;
background: #d8dee9;
}
#workspaces button {
transition: none;
font-size: 16px;
border-radius: 8px;
padding: 4px 8px;
font-weight: bold;
background: #d8dee9;
}
#workspaces button.visible {
color: #88c0d0;
background: #eceff4;
}
#workspaces button.visible:hover {
color: #88c0d0;
background: #eceff4;
}
#workspaces button:hover {
transition: none;
box-shadow: inherit;
text-shadow: inherit;
color: #81a1c1;
}
#custom-media {
margin-top: 8px;
margin-left: 8px;
padding-left: 16px;
padding-right: 16px;
margin-bottom: 0;
border-radius: 8px;
transition: none;
font-weight: bold;
}
#custom-media.Paused {
color: #4c566a;
background: #d8dee9;
}
#custom-media.Playing {
color: #eceff4;
background: #8fbcbb;
}
#network {
margin-top: 8px;
margin-left: 8px;
padding-left: 16px;
padding-right: 10px;
margin-bottom: 0;
border-radius: 8px;
transition: none;
font-size: 24px;
}
#network.disconnected,
#network.disabled {
color: #2e3440;
background: #eceff4;
}
#network.wifi {
color: #d8dee9;
background: #8fbcbb;
}
#pulseaudio {
margin-top: 8px;
margin-left: 8px;
padding-left: 16px;
padding-right: 16px;
margin-bottom: 0;
border-radius: 8px;
transition: none;
font-size: 18px;
}
#pulseaudio.bluetooth {
color: #d8dee9;
background: #81a1c1;
}
#pulseaudio.muted {
color: #d8dee9;
background: #bf616a;
}
#battery {
margin-top: 8px;
margin-left: 8px;
padding-left: 16px;
padding-right: 16px;
margin-bottom: 0;
border-radius: 8px;
transition: none;
font-size: 18px;
}
#battery.warning {
color: #eceff4;
background: #d08770;
}
#battery.critical {
color: #eceff4;
background: #bf616a;
}
#temperature {
margin-top: 8px;
margin-left: 8px;
padding-left: 16px;
padding-right: 16px;
margin-bottom: 0;
border-radius: 8px;
transition: none;
font-size: 20px;
}
#temperature.critical {
color: #d8dee9;
background: #bf616a;
animation: red-flash 1s linear infinite;
}
@keyframes red-flash {
0% {
background: #bf616a;
}
50% {
background: #d37f87;
}
100% {
background: #bf616a;
}
}
#cpu {
margin-top: 8px;
margin-left: 8px;
padding-left: 16px;
padding-right: 16px;
margin-bottom: 0;
border-radius: 8px;
transition: none;
font-size: 20px;
}
#cpu.heavy {
color: #d8dee9;
background: #d08770;
}
#cpu.full {
color: #d8dee9;
background: #bf616a;
}
#memory {
margin-top: 8px;
margin-left: 8px;
padding-left: 16px;
padding-right: 16px;
margin-bottom: 0;
border-radius: 8px;
transition: none;
font-size: 20px;
}
#memory.heavy {
color: #d8dee9;
background: #d08770;
}
#memory.full {
color: #d8dee9;
background: #bf616a;
}
#tray {
margin-top: 8px;
margin-left: 8px;
padding-left: 16px;
padding-right: 16px;
margin-bottom: 0;
border-radius: 8px;
transition: none;
font-size: 20px;
}
#mode {
margin-top: 8px;
margin-left: 8px;
padding-left: 16px;
padding-right: 16px;
margin-bottom: 0;
border-radius: 8px;
transition: none;
/* font-size: 20px; */
color: #eceff4;
background: #d08770;
font-weight: bold;
}
#clock {
margin-top: 8px;
margin-bottom: 0;
transition: none;
font-weight: bold;
}
#clock.date {
margin-left: 8px;
border-radius: 8px;
padding-left: 16px;
padding-right: 10px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
background: #e5e9f0;
}
#clock.time {
padding-left: 10px;
padding-right: 16px;
border-radius: 8px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
margin-right: 12px;
background: #d8dee9;
}