/* --- Hyprland palette --- */ @define-color base rgba(30, 30, 46, 1.0); @define-color inactive rgba(89, 89, 89, 0.667); @define-color blue rgba(51, 204, 255, 0.933); @define-color green rgba(0, 255, 153, 0.933); @define-color text rgba(255, 255, 255, 1.0); @define-color surface1 rgba(255, 255, 255, 0.08); @define-color subtext1 rgba(255, 255, 255, 0.35); @define-color red rgba(255, 0, 0, 0.90); @define-color yellow rgba(249, 226, 175, 1.0); @define-color overlay1 rgba(255, 255, 255, 0.55); * { font-family: Aporetic Sans Mono, Iosevka Nerd Font, Roboto, Helvetica, Arial, sans-serif; font-size: 13px; } window#waybar { background-color: @base; color: @text; } /* --- Workspaces --- */ #workspaces button { padding: 0px 6px; min-width: 80px; /* fixed-ish width without max-width */ background-color: transparent; color: @text; border: 1px solid @inactive; border-radius: 10px; box-shadow: none; } /* Subtle hover glow (GTK-safe): slight tint + soft shadow */ #workspaces button:hover { background-color: rgba(255, 255, 255, 0.1); box-shadow: 0 0 10px rgba(51, 204, 255, 0.18); } /* Active workspace with GTK-safe gradient border */ #workspaces button.active { font-weight: bold; border-radius: 10px; border: 2px solid transparent; background-color: rgba(255, 255, 255, 0.15); border-image: linear-gradient(45deg, @blue, @green) 1; box-shadow: 0 0 12px rgba(0, 255, 153, 0.18); } /* Optional: make active+hover pop a hair more */ #workspaces button.active:hover { box-shadow: 0 0 12px rgba(51, 204, 255, 0.22), 0 0 12px rgba(0, 255, 153, 0.18); } /* --- Notifications icon --- */ #custom-notifications { margin: 0 4px; padding: 0 4px; min-width: 0; } #custom-notifications.empty { color: @overlay1; } #custom-notifications.unread { color: @yellow; } /* --- Modules spacing --- */ #clock, #idle_inhibitor, #battery, #cpu, #memory, #temperature, #network, #pulseaudio, #tray { margin: 0 5px; padding: 0 2px; } #idle_inhibitor.activated { background-color: @green; } #battery.charging { color: @green; } @keyframes blink { to { background-color: #ffffff; color: black; } } #battery.warning:not(.charging) { color: white; animation: blink 0.5s linear infinite alternate; } #network.disconnected, #temperature.critical { background-color: @red; } /* --- Hyprscroll overflow indicator --- */ #custom-hyprscroll_overflow { border-radius: 10px; box-shadow: none; } /* Subtle hover glow when not overflow (if it still renders as a widget) */ #custom-hyprscroll_overflow:hover { background-color: rgba(255, 255, 255, 0.06); box-shadow: 0 0 10px rgba(0, 255, 153, 0.16); } #custom-hyprscroll_overflow.overflow { padding: 0px 6px; min-width: 80px; /* match workspace button width */ color: @text; border-radius: 10px; font-weight: bold; border: 2px solid transparent; background-color: rgba(255, 255, 255, 0.05); border-image: linear-gradient(45deg, @blue, @green) 1; box-shadow: 0 0 12px rgba(51, 204, 255, 0.18); } #custom-hyprscroll_overflow.overflow:hover { box-shadow: 0 0 12px rgba(51, 204, 255, 0.22), 0 0 12px rgba(0, 255, 153, 0.18); }