Use transparent borders for popovers

lassekongo83 · Dec 4, 2019 · 84fd9df · 84fd9df
1 parent bc6555a
commit 84fd9df
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 0 deletions.
diff --git a/gtk/src/Zukitre/gtk-3.0/_common.scss b/gtk/src/Zukitre/gtk-3.0/_common.scss
@@ -2001,6 +2001,13 @@ popover.background {
 
   .csd &, & { border: 1px solid transparentize(black, 0.7); }
 
+  .csd & {
+    $_popover_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1));
+
+    background-clip: padding-box;
+    border-color: $_popover_border;
+  }
+
   box-shadow: 0 1px 2px transparentize(black, 0.7);
 
   & modelbutton.flat:hover,

diff --git a/gtk/src/Zukitre/gtk-3.0/gtk-dark.css b/gtk/src/Zukitre/gtk-3.0/gtk-dark.css
@@ -719,6 +719,8 @@ popover.background { padding: 2px; border-radius: 3px; background-color: #323537
 
 .csd popover.background, popover.background { border: 1px solid rgba(0, 0, 0, 0.3); }
 
+.csd popover.background { background-clip: padding-box; border-color: rgba(18, 21, 23, 0.9); }
+
 popover.background modelbutton.flat:hover, popover.background checkbutton:hover, popover.background radiobutton:hover, popover.background.menuitem.button.flat:hover { background-color: #4a79c7; color: #ffffff; border-radius: 0; }
 
 popover.background > list, popover.background > .view, popover.background > iconview, popover.background > toolbar { border-style: none; background-color: transparent; }

diff --git a/gtk/src/Zukitre/gtk-3.0/gtk.css b/gtk/src/Zukitre/gtk-3.0/gtk.css
@@ -727,6 +727,8 @@ popover.background { padding: 2px; border-radius: 3px; background-color: #e7e7e7
 
 .csd popover.background, popover.background { border: 1px solid rgba(0, 0, 0, 0.3); }
 
+.csd popover.background { background-clip: padding-box; border-color: rgba(0, 0, 0, 0.23); }
+
 popover.background modelbutton.flat:hover, popover.background checkbutton:hover, popover.background radiobutton:hover, popover.background.menuitem.button.flat:hover { background-color: #4a79c7; color: #ffffff; border-radius: 0; }
 
 popover.background > list, popover.background > .view, popover.background > iconview, popover.background > toolbar { border-style: none; background-color: transparent; }

diff --git a/gtk/src/Zukitwo/gtk-3.0/_common.scss b/gtk/src/Zukitwo/gtk-3.0/_common.scss
@@ -2005,6 +2005,13 @@ popover.background {
 
   .csd &, & { border: 1px solid transparentize(black, 0.7); }
 
+  .csd & {
+    $_popover_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1));
+
+    background-clip: padding-box;
+    border-color: $_popover_border;
+  }
+
   box-shadow: 0 1px 2px transparentize(black, 0.7);
 
   & modelbutton.flat:hover,

diff --git a/gtk/src/Zukitwo/gtk-3.0/gtk-dark.css b/gtk/src/Zukitwo/gtk-3.0/gtk-dark.css
@@ -727,6 +727,8 @@ popover.background { padding: 2px; border-radius: 7px; background-color: #323537
 
 .csd popover.background, popover.background { border: 1px solid rgba(0, 0, 0, 0.3); }
 
+.csd popover.background { background-clip: padding-box; border-color: rgba(18, 21, 23, 0.9); }
+
 popover.background modelbutton.flat:hover, popover.background checkbutton:hover, popover.background radiobutton:hover, popover.background.menuitem.button.flat:hover { background-color: #4a79c7; color: #ffffff; border-radius: 0; }
 
 popover.background > list, popover.background > .view, popover.background > iconview, popover.background > toolbar { border-style: none; background-color: transparent; }

diff --git a/gtk/src/Zukitwo/gtk-3.0/gtk.css b/gtk/src/Zukitwo/gtk-3.0/gtk.css
@@ -735,6 +735,8 @@ popover.background { padding: 2px; border-radius: 7px; background-color: #e7e7e7
 
 .csd popover.background, popover.background { border: 1px solid rgba(0, 0, 0, 0.3); }
 
+.csd popover.background { background-clip: padding-box; border-color: rgba(0, 0, 0, 0.23); }
+
 popover.background modelbutton.flat:hover, popover.background checkbutton:hover, popover.background radiobutton:hover, popover.background.menuitem.button.flat:hover { background-color: #4a79c7; color: #ffffff; border-radius: 0; }
 
 popover.background > list, popover.background > .view, popover.background > iconview, popover.background > toolbar { border-style: none; background-color: transparent; }