From 5aa1f2a52f0be3642439d8bfbb04e6ace0a05983 Mon Sep 17 00:00:00 2001 From: Henro Veijer Date: Fri, 27 Feb 2026 15:26:14 +0100 Subject: [PATCH] Waybar style.css (fixed: no linear-gradient(...) padding-box that breaks GTK CSS, and defines the missing colors referenced) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit SwayNC style.css (uses the same @define-color values and the same @base background; also fixes card_rgba typo) Note: Blur is not a CSS thing here — SwayNC is GTK-based, so backdrop-filter is not reliably supported. Do blur via Hyprland layerrule. SwayNC is explicitly a GTK notification center. --- .../desktop/notifications/ncsway/style.css | 120 ++++++++---------- .../assets/conf/desktop/waybar/style.css | 70 +++++----- 2 files changed, 79 insertions(+), 111 deletions(-) diff --git a/henrovnix_ok/assets/conf/desktop/notifications/ncsway/style.css b/henrovnix_ok/assets/conf/desktop/notifications/ncsway/style.css index a3154f980..a53b25095 100644 --- a/henrovnix_ok/assets/conf/desktop/notifications/ncsway/style.css +++ b/henrovnix_ok/assets/conf/desktop/notifications/ncsway/style.css @@ -1,33 +1,26 @@ -/* ------------------------------------------------- - * SwayNotificationCenter (swaync) – Catppuccin Mocha-ish +/* SwayNotificationCenter (swaync) – aligned to Waybar palette * Put in: ~/.config/swaync/style.css * - * Tip: GTK_DEBUG=interactive swaync (inspect CSS classes) - * ------------------------------------------------- */ - -/* --- Catppuccin Mocha core (commonly used values) --- */ -@define-color crust #11111b; -@define-color mantle #181825; -@define-color base rgba(30, 30, 46, 1.0); - -@define-color surface0 #313244; -@define-color surface1 rgba(255, 255, 255, 0.08); -@define-color surface2 #585b70; - -@define-color text rgba(255, 255, 255, 1.0); -@define-color subtext1 rgba(255, 255, 255, 0.35); -@define-color subtext0 #a6adc8; + * swaync is GTK-based and supports loading a custom CSS file. :contentReference[oaicite:1]{index=1} + */ +/* Match Waybar palette exactly */ +@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 yellow #f9e2af; + +@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); -/* If you want even more blur-through effect, increase transparency a bit */ -@define-color panel_rgba rgba(30, 30, 46, 0.15); -@define-color card_rgba rgba(30, 30, 46, 0.15)); +/* Use the SAME "base" look as Waybar, but slightly transparent if you want glass */ +@define-color panel_rgba rgba(30, 30, 46, 0.92); /* set to 1.0 if you want fully identical */ +@define-color card_rgba rgba(30, 30, 46, 0.92); /* FIXED: removed extra ')' */ -/* ---- Kill GTK list row selection glow (common tweak) ---- */ +/* Kill list selection glow */ list, listview, row, @@ -42,10 +35,12 @@ listview row:active { outline: none; } -/* ---- Global defaults ---- */ * { color: @text; - font-family: "Aporetic Sans Mono", "Iosevka Nerd Font", "Sans"; + font-family: + Aporetic Sans Mono, + Iosevka Nerd Font, + Sans; font-size: 13px; } @@ -54,27 +49,26 @@ listview row:active { padding: 0; } -/* Notification popup window */ window#notification-window { background: transparent; } -/* Control center window */ +/* Control center panel — match Waybar base */ .control-center { background-color: @panel_rgba; - border-radius: 18px; - padding: 14px; + border-radius: 10px; /* matches your Waybar rounded vibe */ + padding: 12px; + border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); - border: 1px solid rgba(186, 194, 222, 0.1); } -/* Widgets */ +/* Widget headers — use Waybar surface1 */ .widget-title { margin: 0 0 10px 0; padding: 6px 10px; - border-radius: 14px; - background-color: rgba(24, 24, 37, 0.7); - border: 1px solid rgba(186, 194, 222, 0.08); + border-radius: 10px; + background-color: @surface1; + border: 1px solid rgba(255, 255, 255, 0.08); } .widget-title > label { @@ -83,23 +77,23 @@ window#notification-window { } .widget-title button { - border-radius: 12px; + border-radius: 10px; padding: 6px 10px; - background-color: rgba(69, 71, 90, 0.55); - border: 1px solid rgba(186, 194, 222, 0.1); + background-color: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: none; } .widget-title button:hover { - background-color: rgba(88, 91, 112, 0.55); + background-color: rgba(255, 255, 255, 0.14); } .widget-dnd { margin: 0 0 12px 0; padding: 10px 12px; - border-radius: 16px; - background-color: rgba(24, 24, 37, 0.65); - border: 1px solid rgba(186, 194, 222, 0.08); + border-radius: 10px; + background-color: @surface1; + border: 1px solid rgba(255, 255, 255, 0.08); } .widget-dnd .switch { @@ -111,7 +105,7 @@ window#notification-window { padding: 0; } -/* ---- Notification cards (both popup + center list) ---- */ +/* Notification cards */ .notification-background { margin: 10px 0; padding: 0; @@ -120,33 +114,30 @@ window#notification-window { .notification-background .notification { background-color: @card_rgba; - border-radius: 16px; + border-radius: 10px; padding: 12px 12px; - border: 1px solid rgba(186, 194, 222, 0.1); + border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); } -/* Left colored accent bar using urgency */ +/* Left accent (same blue/green/red) */ .notification.critical { border-left: 4px solid @red; } - .notification.low { border-left: 4px solid @blue; } - .notification.normal { border-left: 4px solid @green; } -/* Header/meta */ +/* Meta */ .notification .app-name { color: @subtext1; font-weight: 700; } - .notification .time { - color: @subtext0; + color: @subtext1; font-size: 12px; } @@ -164,44 +155,33 @@ window#notification-window { line-height: 1.25; } -/* Icons */ -.notification .image { - border-radius: 12px; -} - -.notification .app-icon { - border-radius: 10px; -} - /* Buttons */ .notification button { - border-radius: 12px; - background-color: rgba(69, 71, 90, 0.55); - border: 1px solid rgba(186, 194, 222, 0.1); + border-radius: 10px; + background-color: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: none; padding: 6px 10px; } .notification button:hover { - background-color: rgba(88, 91, 112, 0.55); + background-color: rgba(255, 255, 255, 0.14); } .notification .close-button { - border-radius: 12px; - background-color: rgba(243, 139, 168, 0.12); - border: 1px solid rgba(243, 139, 168, 0.18); + border-radius: 10px; + background-color: rgba(255, 0, 0, 0.12); + border: 1px solid rgba(255, 0, 0, 0.18); } .notification .close-button:hover { - background-color: rgba(243, 139, 168, 0.2); + background-color: rgba(255, 0, 0, 0.2); } -/* Empty state */ .control-center .placeholder { - color: @subtext0; + color: @subtext1; } -/* Optional: nicer separators if you use them in your build */ separator { - background: rgba(186, 194, 222, 0.08); + background: rgba(255, 255, 255, 0.08); } diff --git a/henrovnix_ok/assets/conf/desktop/waybar/style.css b/henrovnix_ok/assets/conf/desktop/waybar/style.css index 68bd1a0cd..5ad5510f7 100644 --- a/henrovnix_ok/assets/conf/desktop/waybar/style.css +++ b/henrovnix_ok/assets/conf/desktop/waybar/style.css @@ -1,15 +1,19 @@ /* --- Hyprland palette (ported) --- */ -@define-color base rgba(30, 30, 46, 1.0); /* 1e1e2eff */ +@define-color base rgba(30, 30, 46, 1.0); /* 1e1e2e */ @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 */ +/* extras (make sure all referenced colors exist) */ @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); +/* you referenced these but didn't define them */ +@define-color overlay1 rgba(255, 255, 255, 0.55); +@define-color yellow rgba(249, 226, 175, 1.0); + * { font-family: Aporetic Sans Mono, @@ -24,20 +28,34 @@ window#waybar { background-color: @base; color: @text; - transition-property: background-color; border-bottom: 0px solid rgba(0, 0, 0, 0); + transition-property: background-color; transition-duration: 0.5s; } +/* Workspaces */ #workspaces button { - padding: 0px 1px; - min-width: 80px; + padding: 0px 6px; + min-width: 0px; /* prevents modules-right clipping */ background-color: transparent; color: @text; border: 1px solid @inactive; border-radius: 10px; } +#workspaces button:hover { + background-color: @surface1; + color: @text; +} + +/* GTK-safe "active" styling (no gradients that break Waybar CSS parsing) */ +#workspaces button.active { + font-weight: bold; + background-color: rgba(255, 255, 255, 0.12); + border: 1px solid @blue; +} + +/* Notifications module */ #custom-notifications { margin: 0 4px; padding: 0 4px; @@ -47,29 +65,11 @@ window#waybar { #custom-notifications.empty { color: @overlay1; } - #custom-notifications.unread { color: @yellow; } -#workspaces button:hover { - background-color: @surface1; - color: @text; -} - -#workspaces button.active { - 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.15), rgba(255, 255, 255, 0.15)) - padding-box, - linear-gradient(45deg, @blue, @green) border-box; -} - +/* Standard modules */ #clock, #idle_inhibitor, #battery, @@ -86,7 +86,6 @@ window#waybar { #idle_inhibitor.activated { background-color: @green; } - #battery.charging { color: @green; } @@ -112,31 +111,20 @@ window#waybar { 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; } +/* Your overflow indicator, GTK-safe */ #custom-hyprscroll_overflow.overflow { - padding: 0px 1px; - min-width: 80px; + padding: 0px 6px; + min-width: 0px; 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; + background-color: rgba(255, 255, 255, 0.08); + border: 1px solid @green; }