Improvement: GTK3&4 - rounded borders

thekomer · Feb 5, 2022 · 7f25138 · 7f25138
1 parent b128bc4
commit 7f25138
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 22 deletions.
diff --git a/gtk-3.0/gtk-dark.css b/gtk-3.0/gtk-dark.css
@@ -4737,12 +4737,20 @@ treeview.view header button, treeview.view header button:hover, treeview.view he
       border-color: #0E111D;
       background-image: none; }
 
+/* * * * * *
+ * Windows *
+ * * * * * */
+window.background {
+  border-radius: 0 0 0.5em 0.5em; }
+
+headerbar.titlebar {
+  border-radius: 0.5em 0.5em 0 0; }
+
 /**********************
  * Window Decorations *
  *********************/
 decoration {
-  border-radius: 4px 4px 4px 4px;
-  border-width: 0px;
+  border-radius: 0.5em 0.5em 0.5em 0.5em;
   border-width: 0px;
   box-shadow: 0 4px 10px 2px rgba(255, 255, 255, 0);
   margin: 10px;
@@ -4751,14 +4759,16 @@ decoration {
   decoration:backdrop {
     box-shadow: 0 4px 10px 2px rgba(255, 255, 255, 0);
     transition: 200ms ease-out;
-    border: 2px solid #15161b; }
+    border: 2px solid #15161b;
+    background: #15161b; }
   .maximized decoration,
   .fullscreen decoration,
   .tiled decoration {
     border-radius: 0; }
   .popup decoration {
     box-shadow: none;
-    border: 0px solid #15161b; }
+    border: 0px solid #15161b;
+    background: #15161b; }
   .ssd decoration {
     box-shadow: none; }
   .csd.popup decoration {

diff --git a/gtk-3.0/gtk.css b/gtk-3.0/gtk.css
@@ -4737,12 +4737,20 @@ treeview.view header button, treeview.view header button:hover, treeview.view he
       border-color: #0E111D;
       background-image: none; }
 
+/* * * * * *
+ * Windows *
+ * * * * * */
+window.background {
+  border-radius: 0 0 0.5em 0.5em; }
+
+headerbar.titlebar {
+  border-radius: 0.5em 0.5em 0 0; }
+
 /**********************
  * Window Decorations *
  *********************/
 decoration {
-  border-radius: 4px 4px 4px 4px;
-  border-width: 0px;
+  border-radius: 0.5em 0.5em 0.5em 0.5em;
   border-width: 0px;
   box-shadow: 0 4px 10px 2px rgba(255, 255, 255, 0);
   margin: 10px;
@@ -4751,14 +4759,16 @@ decoration {
   decoration:backdrop {
     box-shadow: 0 4px 10px 2px rgba(255, 255, 255, 0);
     transition: 200ms ease-out;
-    border: 2px solid #15161b; }
+    border: 2px solid #15161b;
+    background: #15161b; }
   .maximized decoration,
   .fullscreen decoration,
   .tiled decoration {
     border-radius: 0; }
   .popup decoration {
     box-shadow: none;
-    border: 0px solid #15161b; }
+    border: 0px solid #15161b;
+    background: #15161b; }
   .ssd decoration {
     box-shadow: none; }
   .csd.popup decoration {

diff --git a/gtk-3.0/widgets/_windows.scss b/gtk-3.0/widgets/_windows.scss
@@ -1,8 +1,26 @@
+/* * * * * *
+ * Windows *
+ * * * * * */
+
+// this is added for rounded borders. I still don't know what I'm doing :P
+
+window.background {
+	border-radius: 0 0 0.5em 0.5em;
+}
+
+//decoration {
+	//border-radius: 0.5em 0.5em 0.5em 0.5em;
+//}
+
+headerbar.titlebar {
+	border-radius: 0.5em 0.5em 0 0;
+}
+
 /**********************
  * Window Decorations *
  *********************/
 decoration {
-  border-radius: 4px 4px 4px 4px;
+  border-radius: 0.5em 0.5em 0.5em 0.5em;
 
 
   // lamefun trick to get rounded borders regardless of CSD use
@@ -13,9 +31,6 @@ decoration {
   $_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1));
   $_wm_border_backdrop: if($variant=='light', transparentize(black, 0.82), transparentize($borders_color, 0.1));
 
-  // lamefun trick to get rounded borders regardless of CSD use
-  border-width: 0px;
-
   box-shadow: 0 4px 10px 2px transparentize($borders_color, 0.2);
   // FIXME rationalize shadows
 
@@ -35,7 +50,7 @@ decoration {
     transition: $backdrop_transition;
     // added for accessibility (window borders)
     border: 2px solid $window_border_backdrop_color;
-		//background: $window_border_backdrop_color;
+		background: $window_border_backdrop_color;
   }
 
   .maximized &,
@@ -45,7 +60,7 @@ decoration {
   .popup & {
 		box-shadow: none;
 		border: 0px solid $window_border_backdrop_color;
-		//background: $window_border_backdrop_color;
+		background: $window_border_backdrop_color;
   }
 
   // server-side decorations as used by mutter

diff --git a/gtk-4.0/gtk-dark.css b/gtk-4.0/gtk-dark.css
@@ -4711,16 +4711,16 @@ window {
   window.csd {
     box-shadow: 0 4px 9px 1px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0);
     margin: 0px;
-    border-radius: 4px 4px 0 0; }
+    border-radius: 0.5em 0.5em 0 0; }
     window.csd:backdrop {
       box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0);
       transition: 200ms ease-out;
       border: 2px solid #15161b; }
     window.csd.popup {
-      border-radius: 7px;
+      border-radius: 0.5em;
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0); }
     window.csd.dialog.message {
-      border-radius: 4px;
+      border-radius: 0.5em;
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0); }
   window.solid-csd {
     margin: 0;

diff --git a/gtk-4.0/gtk.css b/gtk-4.0/gtk.css
@@ -4711,16 +4711,16 @@ window {
   window.csd {
     box-shadow: 0 4px 9px 1px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0);
     margin: 0px;
-    border-radius: 4px 4px 0 0; }
+    border-radius: 0.5em 0.5em 0 0; }
     window.csd:backdrop {
       box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0);
       transition: 200ms ease-out;
       border: 2px solid #15161b; }
     window.csd.popup {
-      border-radius: 7px;
+      border-radius: 0.5em;
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0); }
     window.csd.dialog.message {
-      border-radius: 4px;
+      border-radius: 0.5em;
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0); }
   window.solid-csd {
     margin: 0;

diff --git a/gtk-4.0/widgets/_windows.scss b/gtk-4.0/widgets/_windows.scss
@@ -9,8 +9,8 @@ window {
   // see bug #722563
   $_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize($borders_color, 0.1));
   $_wm_border_backdrop: if($variant=='light', transparentize(black, 0.82), transparentize($borders_color, 0.1));
-  $_window_radius: 4px;
-  $_menu_radius: 7px;
+  $_window_radius: 0.5em;
+  $_menu_radius: 0.5em;
 
 	// added for accessibility (window borders)
 	border: 2px solid $window_border_color;