From f579bdea59715d4df1594264443ef4d7517d0413 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Danielle=20For=C3=A9?= <danielle@elementary.io>
Date: Fri, 28 Aug 2026 13:20:22 -0700
Subject: [PATCH] Styles: use OSD style for close button

---
 data/NotificationEntry.css         | 43 +++++++++++++++++-------------
 src/Widgets/NotificationEntry.vala |  7 ++---
 2 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/data/NotificationEntry.css b/data/NotificationEntry.css
index 2e1135c8..ab9ae459 100644
--- a/data/NotificationEntry.css
+++ b/data/NotificationEntry.css
@@ -32,27 +32,32 @@ delete-affordance label {
     font-weight: 600;
 }
 
-notification .close {
-    padding: 3px;
-    border: none;
-    border-radius: 100%;
+notification .osd {
+    backdrop-filter: blur(6px);
+    background-color: alpha(@bg_color, 0.2);
+    color: @text_color;
+    margin: 0.25rem;
+    -gtk-icon-shadow: 0 1px 1px alpha(@bg_color, 0.6);
+}
+
+notification .osd.circular {
     background-image:
         linear-gradient(
-            to bottom,
-            @BLACK_300,
-            @BLACK_500
+            to top,
+                alpha(@highlight_color, 0.3),
+                transparent calc(100% - 0.5rem),
+        ),
+        radial-gradient(
+            ellipse 65% 50%,
+            transparent calc(100% - 0.5rem),
+            alpha(@highlight_color, 0.25)
         );
+    border-radius: 100%;
     box-shadow:
-        inset 0 0 0 1px alpha(#fff, 0.02),
-        inset 0 1px 0 0 alpha(#fff, 0.07),
-        inset 0 -1px 0 0 alpha(#fff, 0.01),
-        0 0 0 1px alpha(#000, 0.7),
-        0 1px 2px alpha(#000, 0.16),
-        0 2px 3px alpha(#000, 0.23);
-    margin: 3px;
-}
-
-notification .close image {
-    color: #fff;
-    -gtk-icon-shadow: 0 1px 1px alpha(#000, 0.6);
+        inset 0 1px 0 0 alpha(@highlight_color, 0.6),
+        inset 1px 0 0 0 alpha(@highlight_color, 0.07),
+        inset -1px 0 0 0 alpha(@highlight_color, 0.07),
+        inset 0 -1px 0 0 alpha(@highlight_color, 0.8),
+        0 2px 4px alpha(black, 0.1),
+        0 1px 2px alpha(black, 0.1);
 }
diff --git a/src/Widgets/NotificationEntry.vala b/src/Widgets/NotificationEntry.vala
index 58af9ed7..594be298 100644
--- a/src/Widgets/NotificationEntry.vala
+++ b/src/Widgets/NotificationEntry.vala
@@ -129,12 +129,12 @@ public class Notifications.NotificationEntry : Gtk.ListBoxRow {
         };
         grid.add_css_class (Granite.CssClass.CARD);
 
-
         var delete_button = new Gtk.Button.from_icon_name ("window-close-symbolic") {
             halign = START,
             valign = START
         };
-        delete_button.add_css_class ("close");
+        delete_button.add_css_class (Granite.STYLE_CLASS_OSD);
+        delete_button.add_css_class (Granite.CssClass.CIRCULAR);
 
         var delete_revealer = new Gtk.Revealer () {
             child = delete_button,
@@ -225,7 +225,8 @@ public class Notifications.NotificationEntry : Gtk.ListBoxRow {
             child = carousel,
             reveal_child = true,
             transition_duration = 200,
-            transition_type = SLIDE_UP
+            transition_type = SLIDE_UP,
+            overflow = VISIBLE
         };
 
         child = revealer;