BUGfix: GTK3&4: cut text in Gnome header-bar buttons

thekomer · Feb 13, 2022 · b7f00fe · b7f00fe
1 parent 5621ec4
commit b7f00fe
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 1 deletion.
diff --git a/gtk-3.0/gtk-dark.css b/gtk-3.0/gtk-dark.css
@@ -2783,6 +2783,15 @@ headerbar switch {
 headerbar separator {
   background: transparent; }
 
+headerbar viewswitcher > box.horizontal > button.radio, headerbar switcher > box.horizontal > button.radio {
+  margin: 0;
+  padding: 0;
+  border-radius: 0; }
+  headerbar viewswitcher > box.horizontal > button.radio image, headerbar switcher > box.horizontal > button.radio image {
+    margin-left: 7px; }
+  headerbar viewswitcher > box.horizontal > button.radio label, headerbar switcher > box.horizontal > button.radio label {
+    margin-right: 7px; }
+
 .background:not(.tiled):not(.maximized) .titlebar {
   box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 -1px rgba(0, 0, 0, 0.1); }
   .background:not(.tiled):not(.maximized) .titlebar:backdrop, .background:not(.tiled):not(.maximized) .titlebar {

diff --git a/gtk-3.0/gtk.css b/gtk-3.0/gtk.css
@@ -2783,6 +2783,15 @@ headerbar switch {
 headerbar separator {
   background: transparent; }
 
+headerbar viewswitcher > box.horizontal > button.radio, headerbar switcher > box.horizontal > button.radio {
+  margin: 0;
+  padding: 0;
+  border-radius: 0; }
+  headerbar viewswitcher > box.horizontal > button.radio image, headerbar switcher > box.horizontal > button.radio image {
+    margin-left: 7px; }
+  headerbar viewswitcher > box.horizontal > button.radio label, headerbar switcher > box.horizontal > button.radio label {
+    margin-right: 7px; }
+
 .background:not(.tiled):not(.maximized) .titlebar {
   box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 -1px rgba(0, 0, 0, 0.1); }
   .background:not(.tiled):not(.maximized) .titlebar:backdrop, .background:not(.tiled):not(.maximized) .titlebar {

diff --git a/gtk-3.0/widgets/_header-bars.scss b/gtk-3.0/widgets/_header-bars.scss
@@ -182,7 +182,8 @@ headerbar {
       }
     }
   }
-  .linked > button:hover, .linked > button:backdrop {
+  .linked > button:hover,
+  .linked > button:backdrop {
     @extend %linked-header;
   }
   // End reset style
@@ -241,6 +242,18 @@ headerbar {
     margin-bottom: 10px;
   }
   separator { background: transparent; }
+
+  viewswitcher, switcher {
+    > box.horizontal {
+      > button.radio {
+        image { margin-left: 7px; }
+        label { margin-right: 7px; }
+        margin: 0;
+        padding: 0;
+        border-radius: 0;
+      }
+    }
+  }
 }
 
 .background:not(.tiled):not(.maximized) .titlebar {

diff --git a/gtk-4.0/gtk-dark.css b/gtk-4.0/gtk-dark.css
@@ -2721,6 +2721,15 @@ headerbar switch {
 headerbar separator {
   background: transparent; }
 
+headerbar viewswitcher > box.horizontal > button.radio, headerbar switcher > box.horizontal > button.radio {
+  margin: 0;
+  padding: 0;
+  border-radius: 0; }
+  headerbar viewswitcher > box.horizontal > button.radio image, headerbar switcher > box.horizontal > button.radio image {
+    margin-left: 7px; }
+  headerbar viewswitcher > box.horizontal > button.radio label, headerbar switcher > box.horizontal > button.radio label {
+    margin-right: 7px; }
+
 .background:not(.tiled):not(.maximized) .titlebar {
   box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 -1px rgba(0, 0, 0, 0.1); }
   .background:not(.tiled):not(.maximized) .titlebar:backdrop, .background:not(.tiled):not(.maximized) .titlebar {

diff --git a/gtk-4.0/gtk.css b/gtk-4.0/gtk.css
@@ -2721,6 +2721,15 @@ headerbar switch {
 headerbar separator {
   background: transparent; }
 
+headerbar viewswitcher > box.horizontal > button.radio, headerbar switcher > box.horizontal > button.radio {
+  margin: 0;
+  padding: 0;
+  border-radius: 0; }
+  headerbar viewswitcher > box.horizontal > button.radio image, headerbar switcher > box.horizontal > button.radio image {
+    margin-left: 7px; }
+  headerbar viewswitcher > box.horizontal > button.radio label, headerbar switcher > box.horizontal > button.radio label {
+    margin-right: 7px; }
+
 .background:not(.tiled):not(.maximized) .titlebar {
   box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 -1px rgba(0, 0, 0, 0.1); }
   .background:not(.tiled):not(.maximized) .titlebar:backdrop, .background:not(.tiled):not(.maximized) .titlebar {

diff --git a/gtk-4.0/widgets/_header-bars.scss b/gtk-4.0/widgets/_header-bars.scss
@@ -3,6 +3,7 @@
  ***************/
 %titlebar,
 headerbar {
+	// margin-top: 2px; // FIXIT: added to get rounded borders. What's that light line on top of titlebar/header
   padding: 0px 13px;
   min-height: 34px;
   background: $headerbar_color;
@@ -138,6 +139,7 @@ headerbar {
       }
     }
   }
+
   %linked-header {
     border-radius: 1em; // 23px;
     border-right-style: none;
@@ -240,6 +242,18 @@ headerbar {
     margin-bottom: 10px;
   }
   separator { background: transparent; }
+
+  viewswitcher, switcher {
+    > box.horizontal {
+      > button.radio {
+        image { margin-left: 7px; }
+        label { margin-right: 7px; }
+        margin: 0;
+        padding: 0;
+        border-radius: 0;
+      }
+    }
+  }
 }
 
 .background:not(.tiled):not(.maximized) .titlebar {