Improvement: GTK3&4 - notification corners and border

thekomer · Feb 5, 2022 · 08b2a6d · 08b2a6d
1 parent 49d3ef3
commit 08b2a6d
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 19 deletions.
diff --git a/gtk-3.0/apps/_xfce.scss b/gtk-3.0/apps/_xfce.scss
@@ -116,7 +116,8 @@ wnck-pager {
 #whiskermenu-window {
 	color: $fg_color;
 	background-color: $bg_color;
-	border-radius: 0.5em;
+	border-radius: 1em;
+	border: 1px solid $borders_color;
 	box-shadow: 5px 10px 8px 10px $borders_color;
 }
 

diff --git a/gtk-3.0/gtk-dark.css b/gtk-3.0/gtk-dark.css
@@ -192,11 +192,12 @@ read if you used those and something break with a version upgrade you're on your
  *********************/
 .app-notification,
 .app-notification.frame {
-  padding: 10px;
-  border-radius: 0 0 5px 5px;
+  padding: 1.5em;
+  border-radius: .5em;
   background-color: rgba(20, 23, 26, 0.8);
   background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px);
-  background-clip: padding-box; }
+  background-clip: padding-box;
+  border: 1px solid rgba(255, 255, 255, 0.05); }
   .app-notification:backdrop,
   .app-notification.frame:backdrop {
     background-image: none;
@@ -5984,7 +5985,8 @@ wnck-pager {
 #whiskermenu-window {
   color: #BFC3CD;
   background-color: #0E111D;
-  border-radius: 0.5em;
+  border-radius: 1em;
+  border: 1px solid rgba(255, 255, 255, 0.05);
   box-shadow: 5px 10px 8px 10px rgba(255, 255, 255, 0.05); }
 
 #whiskermenu-window box widget {

diff --git a/gtk-3.0/gtk.css b/gtk-3.0/gtk.css
@@ -192,11 +192,12 @@ read if you used those and something break with a version upgrade you're on your
  *********************/
 .app-notification,
 .app-notification.frame {
-  padding: 10px;
-  border-radius: 0 0 5px 5px;
+  padding: 1.5em;
+  border-radius: .5em;
   background-color: rgba(20, 23, 26, 0.8);
   background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px);
-  background-clip: padding-box; }
+  background-clip: padding-box;
+  border: 1px solid rgba(255, 255, 255, 0.05); }
   .app-notification:backdrop,
   .app-notification.frame:backdrop {
     background-image: none;
@@ -5984,7 +5985,8 @@ wnck-pager {
 #whiskermenu-window {
   color: #BFC3CD;
   background-color: #0E111D;
-  border-radius: 0.5em;
+  border-radius: 1em;
+  border: 1px solid rgba(255, 255, 255, 0.05);
   box-shadow: 5px 10px 8px 10px rgba(255, 255, 255, 0.05); }
 
 #whiskermenu-window box widget {

diff --git a/gtk-3.0/widgets/_app-notifications.scss b/gtk-3.0/widgets/_app-notifications.scss
@@ -5,12 +5,13 @@
 .app-notification.frame {
   @extend %osd;
 
-  padding: 10px;
-  border-radius: 0 0 5px 5px;
+  padding: 1.5em;//10px;
+  border-radius: .5em;
   background-color: $osd_bg_color;
   background-image: linear-gradient(to bottom, transparentize(black, 0.8),
                                                transparent 2px);
   background-clip: padding-box;
+	border: 1px solid $borders_color;
 
   &:backdrop {
     background-image: none;

diff --git a/gtk-4.0/gtk-dark.css b/gtk-4.0/gtk-dark.css
@@ -182,11 +182,12 @@ read if you used those and something break with a version upgrade you're on your
  *********************/
 .app-notification,
 .app-notification.frame {
-  padding: 10px;
-  border-radius: 0 0 5px 5px;
+  padding: 1.5em;
+  border-radius: .5em;
   background-color: rgba(20, 23, 26, 0.8);
   background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px);
-  background-clip: padding-box; }
+  background-clip: padding-box;
+  border: 1px solid rgba(255, 255, 255, 0.05); }
   .app-notification:backdrop,
   .app-notification.frame:backdrop {
     background-image: none;

diff --git a/gtk-4.0/gtk.css b/gtk-4.0/gtk.css
@@ -182,11 +182,12 @@ read if you used those and something break with a version upgrade you're on your
  *********************/
 .app-notification,
 .app-notification.frame {
-  padding: 10px;
-  border-radius: 0 0 5px 5px;
+  padding: 1.5em;
+  border-radius: .5em;
   background-color: rgba(20, 23, 26, 0.8);
   background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px);
-  background-clip: padding-box; }
+  background-clip: padding-box;
+  border: 1px solid rgba(255, 255, 255, 0.05); }
   .app-notification:backdrop,
   .app-notification.frame:backdrop {
     background-image: none;

diff --git a/gtk-4.0/widgets/_app-notifications.scss b/gtk-4.0/widgets/_app-notifications.scss
@@ -5,12 +5,13 @@
 .app-notification.frame {
   @extend %osd;
 
-  padding: 10px;
-  border-radius: 0 0 5px 5px;
+  padding: 1.5em;//10px;
+  border-radius: .5em;
   background-color: $osd_bg_color;
   background-image: linear-gradient(to bottom, transparentize(black, 0.8),
                                                transparent 2px);
   background-clip: padding-box;
+	border: 1px solid $borders_color;
 
   &:backdrop {
     background-image: none;