From c2c555603c042918eb3a2e4abdda3e44dd825fde Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= <daniel@drasite.com>
Date: Wed, 30 Dec 2020 13:30:31 +0100
Subject: [PATCH] GTK3: match titlebutton placement with xfwm4 theme

---
 share/themes/Kali-Dark/gtk-3.0/gtk.css        | 42 +++++++++++-------
 share/themes/Kali-Light/gtk-3.0/gtk-dark.css  | 42 +++++++++++-------
 share/themes/Kali-Light/gtk-3.0/gtk.css       | 42 +++++++++++-------
 .../Kali/sass/gtk-sass/_common-tweaks.scss    | 44 ++++++++++++++-----
 4 files changed, 115 insertions(+), 55 deletions(-)

diff --git a/share/themes/Kali-Dark/gtk-3.0/gtk.css b/share/themes/Kali-Dark/gtk-3.0/gtk.css
index fd7c8bf3..d8bf8aef 100644
--- a/share/themes/Kali-Dark/gtk-3.0/gtk.css
+++ b/share/themes/Kali-Dark/gtk-3.0/gtk.css
@@ -5189,17 +5189,12 @@ headerbar {
   .titlebar.default-decoration,
   headerbar.default-decoration {
     min-height: 0;
-    padding: 3px;
-    border-color: #0d0e11; }
-    .titlebar.default-decoration:backdrop,
-    headerbar.default-decoration:backdrop {
-      background-color: #272a34; }
+    padding: 6px; }
     .titlebar.default-decoration button.titlebutton,
     headerbar.default-decoration button.titlebutton {
-      min-height: 20px;
-      min-width: 20px;
-      margin: 0 4px;
-      padding: 0; }
+      min-height: 0;
+      min-width: 0;
+      margin: 0; }
   dialog .titlebar, dialog .titlebar:backdrop, dialog headerbar, dialog headerbar:backdrop {
     background: #23252e;
     border: 0; }
@@ -5647,12 +5642,29 @@ decoration {
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }
 
 button.titlebutton:not(.appmenu) {
-  margin: 0; }
-
-button.titlebutton:backdrop {
-  background: transparent; }
-  button.titlebutton:backdrop:not(:hover) {
-    border-color: transparent; }
+  margin: 0;
+  margin-left: 6px;
+  padding: 0;
+  min-width: 0;
+  min-height: 0;
+  border: 0;
+  -gtk-icon-shadow: none; }
+  button.titlebutton:not(.appmenu) + button.titlebutton:not(.appmenu) {
+    margin-left: 0; }
+  button.titlebutton:not(.appmenu):last-child {
+    margin-right: 6px; }
+  button.titlebutton:not(.appmenu):hover {
+    transition: 0;
+    background: rgba(255, 255, 255, 0.2);
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px #0d0e11; }
+  .maximized button.titlebutton:not(.appmenu):last-child, .fullscreen button.titlebutton:not(.appmenu):last-child, .tiled button.titlebutton:not(.appmenu):last-child, .tiled-top button.titlebutton:not(.appmenu):last-child, .tiled-right button.titlebutton:not(.appmenu):last-child, .tiled-bottom button.titlebutton:not(.appmenu):last-child, .tiled-left button.titlebutton:not(.appmenu):last-child {
+    margin-right: 0; }
+  .maximized button.titlebutton:not(.appmenu):first-child, .fullscreen button.titlebutton:not(.appmenu):first-child, .tiled button.titlebutton:not(.appmenu):first-child, .tiled-top button.titlebutton:not(.appmenu):first-child, .tiled-right button.titlebutton:not(.appmenu):first-child, .tiled-bottom button.titlebutton:not(.appmenu):first-child, .tiled-left button.titlebutton:not(.appmenu):first-child {
+    margin-left: 0; }
+  button.titlebutton:not(.appmenu):backdrop {
+    background: transparent; }
+    button.titlebutton:not(.appmenu):backdrop:not(:hover) {
+      border-color: transparent; }
 
 /* Nautilus */
 @define-color disk_space_unknown #383c4a;
diff --git a/share/themes/Kali-Light/gtk-3.0/gtk-dark.css b/share/themes/Kali-Light/gtk-3.0/gtk-dark.css
index fd7c8bf3..d8bf8aef 100644
--- a/share/themes/Kali-Light/gtk-3.0/gtk-dark.css
+++ b/share/themes/Kali-Light/gtk-3.0/gtk-dark.css
@@ -5189,17 +5189,12 @@ headerbar {
   .titlebar.default-decoration,
   headerbar.default-decoration {
     min-height: 0;
-    padding: 3px;
-    border-color: #0d0e11; }
-    .titlebar.default-decoration:backdrop,
-    headerbar.default-decoration:backdrop {
-      background-color: #272a34; }
+    padding: 6px; }
     .titlebar.default-decoration button.titlebutton,
     headerbar.default-decoration button.titlebutton {
-      min-height: 20px;
-      min-width: 20px;
-      margin: 0 4px;
-      padding: 0; }
+      min-height: 0;
+      min-width: 0;
+      margin: 0; }
   dialog .titlebar, dialog .titlebar:backdrop, dialog headerbar, dialog headerbar:backdrop {
     background: #23252e;
     border: 0; }
@@ -5647,12 +5642,29 @@ decoration {
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }
 
 button.titlebutton:not(.appmenu) {
-  margin: 0; }
-
-button.titlebutton:backdrop {
-  background: transparent; }
-  button.titlebutton:backdrop:not(:hover) {
-    border-color: transparent; }
+  margin: 0;
+  margin-left: 6px;
+  padding: 0;
+  min-width: 0;
+  min-height: 0;
+  border: 0;
+  -gtk-icon-shadow: none; }
+  button.titlebutton:not(.appmenu) + button.titlebutton:not(.appmenu) {
+    margin-left: 0; }
+  button.titlebutton:not(.appmenu):last-child {
+    margin-right: 6px; }
+  button.titlebutton:not(.appmenu):hover {
+    transition: 0;
+    background: rgba(255, 255, 255, 0.2);
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0 0 1px #0d0e11; }
+  .maximized button.titlebutton:not(.appmenu):last-child, .fullscreen button.titlebutton:not(.appmenu):last-child, .tiled button.titlebutton:not(.appmenu):last-child, .tiled-top button.titlebutton:not(.appmenu):last-child, .tiled-right button.titlebutton:not(.appmenu):last-child, .tiled-bottom button.titlebutton:not(.appmenu):last-child, .tiled-left button.titlebutton:not(.appmenu):last-child {
+    margin-right: 0; }
+  .maximized button.titlebutton:not(.appmenu):first-child, .fullscreen button.titlebutton:not(.appmenu):first-child, .tiled button.titlebutton:not(.appmenu):first-child, .tiled-top button.titlebutton:not(.appmenu):first-child, .tiled-right button.titlebutton:not(.appmenu):first-child, .tiled-bottom button.titlebutton:not(.appmenu):first-child, .tiled-left button.titlebutton:not(.appmenu):first-child {
+    margin-left: 0; }
+  button.titlebutton:not(.appmenu):backdrop {
+    background: transparent; }
+    button.titlebutton:not(.appmenu):backdrop:not(:hover) {
+      border-color: transparent; }
 
 /* Nautilus */
 @define-color disk_space_unknown #383c4a;
diff --git a/share/themes/Kali-Light/gtk-3.0/gtk.css b/share/themes/Kali-Light/gtk-3.0/gtk.css
index 9b91aa5d..4b20ace6 100644
--- a/share/themes/Kali-Light/gtk-3.0/gtk.css
+++ b/share/themes/Kali-Light/gtk-3.0/gtk.css
@@ -5210,17 +5210,12 @@ headerbar {
   .titlebar.default-decoration,
   headerbar.default-decoration {
     min-height: 0;
-    padding: 3px;
-    border-color: #d9d9d9; }
-    .titlebar.default-decoration:backdrop,
-    headerbar.default-decoration:backdrop {
-      background-color: #fafafa; }
+    padding: 6px; }
     .titlebar.default-decoration button.titlebutton,
     headerbar.default-decoration button.titlebutton {
-      min-height: 20px;
-      min-width: 20px;
-      margin: 0 4px;
-      padding: 0; }
+      min-height: 0;
+      min-width: 0;
+      margin: 0; }
   dialog .titlebar, dialog .titlebar:backdrop, dialog headerbar, dialog headerbar:backdrop {
     background: #ffffff;
     border: 0; }
@@ -5668,12 +5663,29 @@ decoration {
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }
 
 button.titlebutton:not(.appmenu) {
-  margin: 0; }
-
-button.titlebutton:backdrop {
-  background: transparent; }
-  button.titlebutton:backdrop:not(:hover) {
-    border-color: transparent; }
+  margin: 0;
+  margin-left: 6px;
+  padding: 0;
+  min-width: 0;
+  min-height: 0;
+  border: 0;
+  -gtk-icon-shadow: none; }
+  button.titlebutton:not(.appmenu) + button.titlebutton:not(.appmenu) {
+    margin-left: 0; }
+  button.titlebutton:not(.appmenu):last-child {
+    margin-right: 6px; }
+  button.titlebutton:not(.appmenu):hover {
+    transition: 0;
+    background: rgba(255, 255, 255, 0.2);
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 0 0 1px #d9d9d9; }
+  .maximized button.titlebutton:not(.appmenu):last-child, .fullscreen button.titlebutton:not(.appmenu):last-child, .tiled button.titlebutton:not(.appmenu):last-child, .tiled-top button.titlebutton:not(.appmenu):last-child, .tiled-right button.titlebutton:not(.appmenu):last-child, .tiled-bottom button.titlebutton:not(.appmenu):last-child, .tiled-left button.titlebutton:not(.appmenu):last-child {
+    margin-right: 0; }
+  .maximized button.titlebutton:not(.appmenu):first-child, .fullscreen button.titlebutton:not(.appmenu):first-child, .tiled button.titlebutton:not(.appmenu):first-child, .tiled-top button.titlebutton:not(.appmenu):first-child, .tiled-right button.titlebutton:not(.appmenu):first-child, .tiled-bottom button.titlebutton:not(.appmenu):first-child, .tiled-left button.titlebutton:not(.appmenu):first-child {
+    margin-left: 0; }
+  button.titlebutton:not(.appmenu):backdrop {
+    background: transparent; }
+    button.titlebutton:not(.appmenu):backdrop:not(:hover) {
+      border-color: transparent; }
 
 /* Nautilus */
 @define-color disk_space_unknown #383c4a;
diff --git a/src/themes/Kali/sass/gtk-sass/_common-tweaks.scss b/src/themes/Kali/sass/gtk-sass/_common-tweaks.scss
index 2a3214bc..e50625d3 100644
--- a/src/themes/Kali/sass/gtk-sass/_common-tweaks.scss
+++ b/src/themes/Kali/sass/gtk-sass/_common-tweaks.scss
@@ -177,16 +177,12 @@ headerbar {
 
   &.default-decoration {
     min-height: 0;
-    padding: 3px;
-    border-color: $borders_color;
-
-    &:backdrop { background-color: $base_color; }
+    padding: 6px;
 
     button.titlebutton {
-      min-height: 20px;
-      min-width: 20px;
-      margin: 0 4px;
-      padding: 0;
+      min-height: 0;
+      min-width: 0;
+      margin: 0;
     }
   }
 
@@ -469,8 +465,36 @@ decoration {
 }
 
 // Window Close button
-button.titlebutton {
-  &:not(.appmenu) { margin: 0; }
+button.titlebutton:not(.appmenu) {
+  margin: 0;
+  margin-left: 6px;
+  padding: 0;
+  min-width: 0;
+  min-height: 0;
+  border: 0;
+  -gtk-icon-shadow: none;
+
+  & + & { margin-left: 0; }
+  &:last-child { margin-right: 6px; }
+
+  &:hover {
+    transition: 0;
+    background: transparentize(white, .8);
+    box-shadow: 0 1px 1px $shadow_color, inset 0 0 0 1px $borders_color;
+  }
+
+  @at-root
+  .maximized &,
+  .fullscreen &,
+  .tiled &,
+  .tiled-top &,
+  .tiled-right &,
+  .tiled-bottom &,
+  .tiled-left & {
+      &:last-child { margin-right: 0; }
+      &:first-child { margin-left: 0; }
+  }
+
   &:backdrop {
     background: transparent;
     &:not(:hover) { border-color: transparent; }