Bernardo Magri
ccd896c8dc
Leveraged Nano Banana to generate a 4k wallpaper. Added the new preset with glassmorphism aesthetic.
109 lines
2.3 KiB
CSS
109 lines
2.3 KiB
CSS
/* Neon Glass Waybar — Segmented floating pills with glassmorphism */
|
|
|
|
* {
|
|
font-family: "Inter", "Symbols Nerd Font", sans-serif;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
border: none;
|
|
border-radius: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
window#waybar {
|
|
/* The main bar background is transparent so the wallpaper shows through */
|
|
background: transparent;
|
|
color: @text;
|
|
}
|
|
|
|
/*
|
|
* The pill containers: left, center, right.
|
|
* Glassmorphism: semi-transparent base + blur (blur requires hyprland layerrule if waybar doesn't natively blur, but alpha base helps).
|
|
*/
|
|
.modules-left,
|
|
.modules-center,
|
|
.modules-right {
|
|
background: alpha(@base, 0.45);
|
|
border: 1px solid alpha(@accent, 0.2);
|
|
border-radius: 20px;
|
|
margin: 4px 6px;
|
|
padding: 2px 8px;
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* Add a glowing top border effect on hover or generally to accent the glass */
|
|
.modules-left {
|
|
border-top: 1px solid alpha(@accent, 0.6);
|
|
}
|
|
.modules-center {
|
|
border-top: 1px solid alpha(@text, 0.3);
|
|
}
|
|
.modules-right {
|
|
border-top: 1px solid alpha(@accentAlt, 0.6);
|
|
}
|
|
|
|
/* Remove default padding from individual modules so they fit snug in the pill */
|
|
#workspaces button,
|
|
#window,
|
|
#clock,
|
|
#tray,
|
|
#pulseaudio,
|
|
#battery,
|
|
#custom-notification,
|
|
#custom-vpn,
|
|
#custom-powerprofile,
|
|
#custom-updates,
|
|
#custom-doctor {
|
|
padding: 0 8px;
|
|
margin: 0 2px;
|
|
}
|
|
|
|
/* Workspaces */
|
|
#workspaces button {
|
|
color: @subtext;
|
|
border-radius: 12px;
|
|
transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
|
|
}
|
|
|
|
#workspaces button:hover {
|
|
background: alpha(@surface, 0.5);
|
|
color: @text;
|
|
}
|
|
|
|
#workspaces button.active {
|
|
color: @accent;
|
|
background: alpha(@accent, 0.15);
|
|
box-shadow: 0 0 8px alpha(@accent, 0.4);
|
|
}
|
|
|
|
#workspaces button.urgent {
|
|
color: @bad;
|
|
background: alpha(@bad, 0.15);
|
|
}
|
|
|
|
/* Indicators */
|
|
#battery.charging { color: @good; }
|
|
#battery.warning:not(.charging) { color: @warn; }
|
|
#battery.critical:not(.charging) {
|
|
color: @bad;
|
|
animation: blink 1s steps(2, start) infinite;
|
|
}
|
|
|
|
#pulseaudio.muted { color: @muted; }
|
|
|
|
#custom-updates { color: @accentAlt; }
|
|
#custom-doctor { color: @bad; }
|
|
#custom-vpn { color: @accent; }
|
|
|
|
@keyframes blink {
|
|
to { color: @text; }
|
|
}
|
|
|
|
tooltip {
|
|
background: alpha(@base, 0.85);
|
|
border: 1px solid alpha(@accent, 0.4);
|
|
border-radius: 12px;
|
|
}
|
|
tooltip label {
|
|
color: @text;
|
|
}
|