Files
bar/resources/bar.css
2026-01-05 12:32:07 +01:00

229 lines
3.5 KiB
CSS

/** biome-ignore-all lint/correctness/noUnknownTypeSelector: gtk css has more valid identifiers */
* {
all: unset;
}
window {
background-color: #191919c6;
color: #ffffff;
padding-left: 4px;
padding-right: 4px;
padding-top: 2px;
padding-bottom: 2px;
font-size: 14px;
font-family:
"Hack Nerd Font Mono", "Font Awesome 7 Brands", "Font Awesome 7 Free",
sans-serif;
}
popover {
margin-top: 4px;
font-family:
"Hack Nerd Font Mono", "Material Icons", "Font Awesome 7 Free", sans-serif;
padding: 6px;
border-radius: 8px;
background: rgba(25, 25, 25, 0.8);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(57, 57, 57, 0.71);
font-size: 14px;
}
tooltip {
background-color: #222222;
color: #ffffff;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
}
button {
font-family: "Material Icons", sans-serif;
font-size: 20px;
}
#spacer {
font-weight: 900;
padding: 0 5px;
text-shadow: 0 0 5px #ffffffaa;
}
.button {
padding: 4px 8px;
border-radius: 4px;
font-family: "Material Icons", sans-serif;
}
.button:hover {
background-color: #111111;
}
.workspace-pill {
padding: 2px 5px;
margin-right: 6px;
border-radius: 5px;
text-shadow: 0 0 2px #646464;
transition:
background-color 0.2s,
color 0.2s,
box-shadow 0.2s;
}
.workspace-pill:hover {
background-color: rgba(255, 255, 255, 0.1);
color: #ffffff;
}
.workspace-pill-active {
background-color: #666666;
}
.workspace-pill-focused {
background-color: #ffffff;
color: #1e1e1e;
box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}
.workspace-pill-focused:hover {
box-shadow: none;
}
.workspace-pill-urgent {
background-color: #ff5555;
color: #fff;
animation: workspace-blink 1s linear infinite;
}
.workspace-pill-six {
animation: workspace-updown 1.2s ease-in-out infinite;
margin-left: -4px;
margin-top: 4px;
font-size: 12px;
}
.workspace-pill-seven {
animation: workspace-updown 1.2s ease-in-out infinite;
animation-delay: 0.6s;
margin-right: -4px;
margin-top: 4px;
font-size: 12px;
}
@keyframes workspace-updown {
0% {
transform: translateY(4px);
}
50% {
transform: translateY(0px);
}
100% {
transform: translateY(4px);
}
}
@keyframes workspace-blink {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
.battery-widget {
padding: 2px 6px;
border-radius: 6px;
background-color: rgba(255, 255, 255, 0.04);
}
.battery-widget-icon {
min-width: 7ch;
text-align: center;
font-weight: 700;
letter-spacing: 0.08ch;
}
.battery-widget-text {
font-weight: 500;
}
.battery-widget-normal {
background-color: rgba(120, 120, 120, 0.18);
}
.battery-widget-full {
background-color: rgba(76, 129, 76, 0.24);
}
.battery-widget-full .battery-widget-icon {
color: #bdf5bd;
}
.battery-widget-charging {
background-color: rgba(76, 129, 76, 0.28);
}
.battery-widget-charging .battery-widget-icon {
color: #9df19d;
animation: battery-charge-glow 1.4s ease-in-out infinite;
}
.battery-widget-low {
background-color: rgba(148, 61, 61, 0.28);
}
.battery-widget-low .battery-widget-icon {
color: #ff8585;
animation: battery-low-blink 1s steps(2, start) infinite;
}
.battery-widget-external {
background-color: rgba(100, 100, 100, 0.18);
}
.battery-widget-external .battery-widget-icon {
color: #d7d7d7;
}
@keyframes battery-charge-glow {
0% {
opacity: 0.7;
transform: translateX(0);
}
50% {
opacity: 1;
transform: translateX(1px);
}
100% {
opacity: 0.7;
transform: translateX(0);
}
}
@keyframes battery-low-blink {
0% {
opacity: 1;
}
49% {
opacity: 1;
}
50% {
opacity: 0.4;
}
100% {
opacity: 0.4;
}
}