From c7192a91fbf93197864e8f005b217ab91b7677df Mon Sep 17 00:00:00 2001 From: Henro Veijer Date: Fri, 27 Feb 2026 15:32:33 +0100 Subject: [PATCH] Aliging css a bit more --- .../desktop/notifications/ncsway/style.css | 118 ++---------------- .../assets/conf/desktop/waybar/style.css | 61 ++++----- 2 files changed, 37 insertions(+), 142 deletions(-) diff --git a/henrovnix_ok/assets/conf/desktop/notifications/ncsway/style.css b/henrovnix_ok/assets/conf/desktop/notifications/ncsway/style.css index a53b25095..4cfa0eae1 100644 --- a/henrovnix_ok/assets/conf/desktop/notifications/ncsway/style.css +++ b/henrovnix_ok/assets/conf/desktop/notifications/ncsway/style.css @@ -1,39 +1,15 @@ -/* SwayNotificationCenter (swaync) – aligned to Waybar palette - * Put in: ~/.config/swaync/style.css - * - * 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 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 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); -/* 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 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; -} +/* 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); * { color: @text; @@ -44,83 +20,37 @@ listview row:active { font-size: 13px; } -.notification-row { - margin: 0; - padding: 0; -} - +/* Notification popup */ window#notification-window { - background: transparent; + background-color: @base; } -/* Control center panel — match Waybar base */ +/* Control center */ .control-center { background-color: @panel_rgba; - border-radius: 10px; /* matches your Waybar rounded vibe */ + border-radius: 10px; padding: 12px; border: 1px solid rgba(255, 255, 255, 0.08); - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); } -/* Widget headers — use Waybar surface1 */ +/* Widget headers */ .widget-title { - margin: 0 0 10px 0; + margin-bottom: 10px; padding: 6px 10px; border-radius: 10px; background-color: @surface1; border: 1px solid rgba(255, 255, 255, 0.08); } -.widget-title > label { - font-size: 14px; - font-weight: 700; -} - -.widget-title button { - border-radius: 10px; - padding: 6px 10px; - 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(255, 255, 255, 0.14); -} - -.widget-dnd { - margin: 0 0 12px 0; - padding: 10px 12px; - border-radius: 10px; - background-color: @surface1; - border: 1px solid rgba(255, 255, 255, 0.08); -} - -.widget-dnd .switch { - border-radius: 999px; -} - -.widget-notifications { - margin: 0; - padding: 0; -} - -/* Notification cards */ -.notification-background { - margin: 10px 0; - padding: 0; - background: transparent; -} - +/* Cards */ .notification-background .notification { background-color: @card_rgba; border-radius: 10px; - padding: 12px 12px; + padding: 12px; border: 1px solid rgba(255, 255, 255, 0.08); - box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); } -/* Left accent (same blue/green/red) */ +/* Accent by urgency */ .notification.critical { border-left: 4px solid @red; } @@ -146,13 +76,11 @@ window#notification-window { color: @text; font-weight: 800; font-size: 14px; - margin-top: 2px; } .notification .body { color: @subtext1; margin-top: 6px; - line-height: 1.25; } /* Buttons */ @@ -160,28 +88,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 { background-color: rgba(255, 255, 255, 0.14); } - -.notification .close-button { - 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(255, 0, 0, 0.2); -} - -.control-center .placeholder { - color: @subtext1; -} - -separator { - 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 5ad5510f7..0e16a3a67 100644 --- a/henrovnix_ok/assets/conf/desktop/waybar/style.css +++ b/henrovnix_ok/assets/conf/desktop/waybar/style.css @@ -1,18 +1,15 @@ -/* --- Hyprland palette (ported) --- */ -@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 */ +/* --- 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); -/* 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); +@define-color overlay1 rgba(255, 255, 255, 0.55); * { font-family: @@ -28,15 +25,13 @@ window#waybar { background-color: @base; color: @text; - border-bottom: 0px solid rgba(0, 0, 0, 0); - transition-property: background-color; - transition-duration: 0.5s; } -/* Workspaces */ +/* --- Workspaces --- */ #workspaces button { padding: 0px 6px; - min-width: 0px; /* prevents modules-right clipping */ + min-width: 80px; + max-width: 80px; background-color: transparent; color: @text; border: 1px solid @inactive; @@ -45,17 +40,18 @@ window#waybar { #workspaces button:hover { background-color: @surface1; - color: @text; } -/* GTK-safe "active" styling (no gradients that break Waybar CSS parsing) */ +/* Active workspace with GTK-safe gradient */ #workspaces button.active { font-weight: bold; - background-color: rgba(255, 255, 255, 0.12); - border: 1px solid @blue; + border-radius: 10px; + border: 2px solid transparent; + background-color: rgba(255, 255, 255, 0.15); + border-image: linear-gradient(45deg, @blue, @green) 1; } -/* Notifications module */ +/* --- Notifications icon --- */ #custom-notifications { margin: 0 4px; padding: 0 4px; @@ -69,7 +65,7 @@ window#waybar { color: @yellow; } -/* Standard modules */ +/* --- Modules spacing --- */ #clock, #idle_inhibitor, #battery, @@ -99,32 +95,23 @@ window#waybar { #battery.warning:not(.charging) { color: white; - animation-name: blink; - animation-duration: 0.5s; - animation-timing-function: linear; - animation-iteration-count: infinite; - animation-direction: alternate; + animation: blink 0.5s linear infinite alternate; } -#window, -#workspaces { - margin: 0 4px; -} - -#network.disconnected { - background-color: @red; -} +#network.disconnected, #temperature.critical { background-color: @red; } -/* Your overflow indicator, GTK-safe */ +/* --- Hyprscroll overflow indicator --- */ #custom-hyprscroll_overflow.overflow { padding: 0px 6px; - min-width: 0px; + min-width: 80px; + max-width: 80px; color: @text; border-radius: 10px; font-weight: bold; - background-color: rgba(255, 255, 255, 0.08); - border: 1px solid @green; + border: 2px solid transparent; + background-color: rgba(255, 255, 255, 0.05); + border-image: linear-gradient(45deg, @blue, @green) 1; }