From 1c67c7d0a8a9729a163df2760c5203d178fc577c Mon Sep 17 00:00:00 2001 From: Henro Veijer Date: Fri, 27 Feb 2026 16:46:37 +0100 Subject: [PATCH] Restored CSS from this morning --- .../assets/conf/desktop/waybar/style.css | 205 +++++++++--------- 1 file changed, 103 insertions(+), 102 deletions(-) diff --git a/henrovnix_ok/assets/conf/desktop/waybar/style.css b/henrovnix_ok/assets/conf/desktop/waybar/style.css index fbe8e131e..8dcf7262f 100644 --- a/henrovnix_ok/assets/conf/desktop/waybar/style.css +++ b/henrovnix_ok/assets/conf/desktop/waybar/style.css @@ -1,15 +1,14 @@ -/* --- 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.15); +/* --- Hyprland palette (ported) --- */ +@define-color base rgba(30, 30, 46, 1.0); /* 1e1e2eff */ +@define-color inactive rgba(89, 89, 89, 0.667); /* 595959aa */ +@define-color blue rgba(51, 204, 255, 0.933); /* 33ccffee */ +@define-color green rgba(0, 255, 153, 0.933); /* 00ff99ee */ + +/* extra colors you referenced but didn’t define */ +@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); * { font-family: @@ -23,75 +22,117 @@ } window#waybar { - background: transparent; - background-color: transparent; + background-color: @base; color: @text; - /* Helps prevent right-edge clipping of last module */ - padding-right: 6px; - padding-left: 6px; + transition-property: background-color; + border-bottom: 0px solid rgba(0, 0, 0, 0); + transition-duration: 0.5s; } -/* ========================================================= - * Workspaces (reduced height) - * ========================================================= */ #workspaces button { - /* Reduce height: keep vertical padding at 0 */ - padding: 0px 4px; - /* Your fixed width */ + padding: 0px 1px; min-width: 80px; - /* Reduce height further: smaller vertical margin */ - margin: 0px 4px; background-color: transparent; color: @text; - /* Keep border thin to reduce vertical footprint */ border: 1px solid @inactive; - /* Smaller radius reduces “cut off” risk at top/bottom */ border-radius: 10px; - box-shadow: none; } -/* Hover: keep it subtle to avoid clipping */ +#custom-notifications.empty { + color: @overlay1; +} + +#custom-notifications.unread { + color: @yellow; +} + #workspaces button:hover { - background-color: rgba(255, 255, 255, 0.1); -} - -/* ========================================================= - * Active style (and overflow style) — identical visuals - * - * NOTE: Big glows get clipped by the bar height. - * We keep the “gradient vibe” but reduce the blur radius. - * ========================================================= */ -#workspaces button.active, -#custom-hyprscroll_overflow.overflow { - font-weight: bold; - padding: 0px 4px; - min-width: 80px; - margin: 0px 4px; + background-color: @surface1; + color: @text; +} + +#workspaces button.active { + padding: 0px 1px; + min-width: 80px; color: @text; - background-color: @active_fill; - border: 1px dashed @active_fill; border-radius: 10px; - /* Reduced glow to minimize top/bottom clipping */ - box-shadow: - 0 0 0 1px rgba(51, 204, 255, 0.55), - 0 0 0 2px rgba(0, 255, 153, 0.4), - 0 0 4px rgba(51, 204, 255, 0.18), - 0 0 4px rgba(0, 255, 153, 0.14); + font-weight: bold; + border: 1px solid transparent; + background: + linear-gradient(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15)) + padding-box, + linear-gradient(45deg, @blue, @green) border-box; } -#workspaces button.active:hover, -#custom-hyprscroll_overflow.overflow:hover { - /* Keep hover glow but still small */ - box-shadow: - 0 0 0 1px rgba(51, 204, 255, 0.65), - 0 0 0 2px rgba(0, 255, 153, 0.48), - 0 0 6px rgba(51, 204, 255, 0.22), - 0 0 6px rgba(0, 255, 153, 0.18); +#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-name: blink; + animation-duration: 0.5s; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-direction: alternate; +} + +#window, +#workspaces { + margin: 0 4px; +} + +.modules-left > widget:first-child > #workspaces { + margin-left: 0; +} + +.modules-right > widget:last-child > #workspaces { + margin-right: 0; +} + +#network.disconnected { + background-color: @red; +} + +#temperature.critical { + background-color: @red; } -/* Overflow: add permanent right padding (don’t do it only on hover, it clips) */ #custom-hyprscroll_overflow.overflow { - padding-right: 10px; + padding: 0px 1px; + min-width: 80px; + color: @text; + border-radius: 10px; + font-weight: bold; + border: 1px solid transparent; + background: + linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)) + padding-box, + linear-gradient(45deg, @blue, @green) border-box; } /* ========================================================= @@ -109,43 +150,3 @@ window#waybar { #custom-notifications.unread { color: @yellow; } - -/* ========================================================= - * Other 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; -}