From f199c0402a3ed35014e02f0e98a7f76988e4cecf Mon Sep 17 00:00:00 2001 From: Henro Veijer Date: Fri, 27 Feb 2026 15:45:36 +0100 Subject: [PATCH] New colors --- .../desktop/notifications/ncsway/style.css | 65 ++++++++++++++----- .../assets/conf/desktop/waybar/style.css | 62 +++++++++++------- 2 files changed, 88 insertions(+), 39 deletions(-) diff --git a/henrovnix_ok/assets/conf/desktop/notifications/ncsway/style.css b/henrovnix_ok/assets/conf/desktop/notifications/ncsway/style.css index 4cfa0eae1..1e898b6a5 100644 --- a/henrovnix_ok/assets/conf/desktop/notifications/ncsway/style.css +++ b/henrovnix_ok/assets/conf/desktop/notifications/ncsway/style.css @@ -1,15 +1,17 @@ -/* Match Waybar palette exactly */ +/* SwayNotificationCenter (swaync) — EXACT Waybar match + * Put in: ~/.config/swaync/style.css + * + * swaync loads GTK CSS for theming. + */ + @define-color base rgba(30, 30, 46, 1.0); @define-color text rgba(255, 255, 255, 1.0); -@define-color blue rgba(51, 204, 255, 0.933); -@define-color green rgba(0, 255, 153, 0.933); @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); -/* Opaque so it visually matches Waybar */ -@define-color panel_rgba rgba(30, 30, 46, 1.0); -@define-color card_rgba rgba(30, 30, 46, 1.0); +@define-color blue rgba(51, 204, 255, 0.933); +@define-color green rgba(0, 255, 153, 0.933); +@define-color red rgba(255, 0, 0, 0.90); * { color: @text; @@ -20,20 +22,38 @@ font-size: 13px; } -/* Notification popup */ -window#notification-window { - background-color: @base; +/* Remove list selection glow */ +list, +listview, +row, +listview row, +listview row:selected, +listview row:hover, +listview row:focus, +listview row:active { + background-color: transparent; + background-image: none; + box-shadow: none; + outline: none; } -/* Control center */ +/* Popups: keep window transparent, but make the *notification surfaces* opaque base */ +window#notification-window { + background: transparent; +} + +/* Control center — EXACT same as Waybar base */ .control-center { - background-color: @panel_rgba; + background-color: @base; border-radius: 10px; padding: 12px; + + /* Keep border subtle, like Waybar (no heavy shadow) */ border: 1px solid rgba(255, 255, 255, 0.08); + box-shadow: none; } -/* Widget headers */ +/* Widget headers — use Waybar surface1 */ .widget-title { margin-bottom: 10px; padding: 6px 10px; @@ -42,12 +62,24 @@ window#notification-window { border: 1px solid rgba(255, 255, 255, 0.08); } -/* Cards */ +.widget-title > label { + font-size: 14px; + font-weight: 700; +} + +/* Cards — EXACT same as Waybar base */ +.notification-background { + margin: 10px 0; + padding: 0; + background: transparent; +} + .notification-background .notification { - background-color: @card_rgba; + background-color: @base; border-radius: 10px; padding: 12px; border: 1px solid rgba(255, 255, 255, 0.08); + box-shadow: none; } /* Accent by urgency */ @@ -81,6 +113,7 @@ window#notification-window { .notification .body { color: @subtext1; margin-top: 6px; + line-height: 1.25; } /* Buttons */ @@ -88,6 +121,8 @@ window#notification-window { 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 { diff --git a/henrovnix_ok/assets/conf/desktop/waybar/style.css b/henrovnix_ok/assets/conf/desktop/waybar/style.css index 3031135bf..c8c64d95a 100644 --- a/henrovnix_ok/assets/conf/desktop/waybar/style.css +++ b/henrovnix_ok/assets/conf/desktop/waybar/style.css @@ -11,6 +11,9 @@ @define-color yellow rgba(249, 226, 175, 1.0); @define-color overlay1 rgba(255, 255, 255, 0.55); +/* This is the exact "active" fill you requested */ +@define-color active_fill rgba(255, 255, 255, 0.05); + * { font-family: Aporetic Sans Mono, @@ -30,7 +33,7 @@ window#waybar { /* --- Workspaces --- */ #workspaces button { padding: 0px 6px; - min-width: 80px; /* fixed-ish width without max-width */ + min-width: 80px; background-color: transparent; color: @text; border: 1px solid @inactive; @@ -38,25 +41,38 @@ window#waybar { 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 */ +/* + * IMPORTANT: + * - To get *real* rounded corners, we avoid border-image (GTK often won't clip it to border-radius). + * - To keep your "gradient feel", we emulate it with a dual-glow shadow (blue + green). + * - Background and border color match exactly (your request). + */ #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); + + /* 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); } -/* Optional: make active+hover pop a hair more */ #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); } @@ -114,31 +130,29 @@ window#waybar { } /* --- 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 */ + min-width: 80px; 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); + + /* 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); }