/* --- 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); @define-color active_fill rgba(255, 255, 255, 0.05); * { 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 4px; min-width: 80px; background-color: transparent; color: @text; border: 1px solid @inactive; border-radius: 15px; box-shadow: none; } #workspaces button:hover { background-color: rgba(255, 255, 255, 0.1); box-shadow: 0 0 10px rgba(51, 204, 255, 0.18); } #workspaces button.active { font-weight: bold; /* EXACT match: border color == background color */ background-color: @active_fill; border: 2px solid @active_fill; /* Gradient vibe without breaking radius */ box-shadow: 0 0 0 1px rgba(51, 204, 255, 0.55), 0 0 0 2px rgba(0, 255, 153, 0.4), 0 0 10px rgba(51, 204, 255, 0.18), 0 0 10px rgba(0, 255, 153, 0.14); } #workspaces button.active:hover { box-shadow: 0 0 0 1px rgba(51, 204, 255, 0.65), 0 0 0 2px rgba(0, 255, 153, 0.48), 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.overflow { padding: 0px 6px; min-width: 80px; color: @text; border-radius: 15px; font-weight: bold; /* EXACT match: border color == background color */ background-color: @active_fill; border: 2px solid @active_fill; /* Same "gradient feel" as active workspace */ box-shadow: 0 0 0 1px rgba(51, 204, 255, 0.55), 0 0 0 2px rgba(0, 255, 153, 0.4), 0 0 10px rgba(51, 204, 255, 0.18), 0 0 10px rgba(0, 255, 153, 0.14); } #custom-hyprscroll_overflow.overflow:hover { box-shadow: 0 0 0 1px rgba(51, 204, 255, 0.65), 0 0 0 2px rgba(0, 255, 153, 0.48), 0 0 12px rgba(51, 204, 255, 0.22), 0 0 12px rgba(0, 255, 153, 0.18); }