From 3165f4318769d43d379a66eae24419bff3f41176 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Ruiz=20de=20Alegr=C3=ADa?= <daniruiz@kali.org>
Date: Fri, 24 Sep 2021 13:17:48 +0200
Subject: [PATCH] GTK3: theme titlebuttons only inside headerbars

---
 share/themes/Kali-Dark/gtk-3.0/gtk.css        |  84 +++++++-----
 share/themes/Kali-Light/gtk-3.0/gtk-dark.css  |  84 +++++++-----
 share/themes/Kali-Light/gtk-3.0/gtk.css       |  84 +++++++-----
 src/themes/Kali/sass/gtk3/_common-tweaks.scss | 120 +++++++++++-------
 4 files changed, 228 insertions(+), 144 deletions(-)

diff --git a/share/themes/Kali-Dark/gtk-3.0/gtk.css b/share/themes/Kali-Dark/gtk-3.0/gtk.css
index 2da8efe2..0a96bfbc 100644
--- a/share/themes/Kali-Dark/gtk-3.0/gtk.css
+++ b/share/themes/Kali-Dark/gtk-3.0/gtk.css
@@ -5453,13 +5453,12 @@ scale slider {
  ***************/
 headerbar {
   border-color: black;
-  background: #0d0e11 -gtk-scaled(url("assets/kali-headerbar-logo-dark.png"), url("assets/kali-headerbar-logo-dark@2.png")), linear-gradient(to top, #16171d, #1a1c23);
+  background: #0d0e11 linear-gradient(to top, #16171d, #1a1c23);
   box-shadow: inset 0 1px rgba(238, 238, 236, 0.07);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
   background-repeat: no-repeat;
   background-position: left; }
   headerbar:backdrop {
-    background-image: -gtk-scaled(url("assets/kali-headerbar-logo-dark.png"), url("assets/kali-headerbar-logo-dark@2.png"));
     background-repeat: no-repeat;
     background-position: left;
     box-shadow: none; }
@@ -5476,6 +5475,57 @@ headerbar viewswitcher button > stack > box.wide,
 headerbar hdyviewswitcher > button box.wide {
   margin: -8px 0; }
 
+dialog .titlebar:not(headerbar), dialog headerbar, dialog headerbar:backdrop {
+  background: #23252e;
+  border: 0;
+  box-shadow: none; }
+
+.titlebar:not(headerbar) button.titlebutton:not(.appmenu),
+headerbar button.titlebutton:not(.appmenu) {
+  color: transparent;
+  background: #383d4b;
+  margin: 0;
+  margin-left: 5px;
+  padding: 0;
+  min-width: 0;
+  min-height: 0;
+  border: 1px solid black;
+  box-shadow: inset 0 3px 5px -4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.05);
+  -gtk-icon-shadow: none;
+  transition: all .2s; }
+  .titlebar:not(headerbar) button.titlebutton:not(.appmenu) + button.titlebutton,
+  headerbar button.titlebutton:not(.appmenu) + button.titlebutton {
+    margin-left: 0; }
+  .titlebar:not(headerbar) button.titlebutton:not(.appmenu):last-child,
+  headerbar button.titlebutton:not(.appmenu):last-child {
+    margin-right: 5px; }
+  .titlebar:not(headerbar) button.titlebutton:not(.appmenu):hover,
+  headerbar button.titlebutton:not(.appmenu):hover {
+    color: #eeeeec;
+    background: #383d4b;
+    border-color: transparent;
+    box-shadow: 0 0 0 1px #0d0e11; }
+  .titlebar:not(headerbar) button.titlebutton:not(.appmenu).close,
+  headerbar button.titlebutton:not(.appmenu).close {
+    color: black;
+    background: #2777ff;
+    border-color: transparent; }
+    .titlebar:not(headerbar) button.titlebutton:not(.appmenu).close:hover,
+    headerbar button.titlebutton:not(.appmenu).close:hover {
+      color: white;
+      background: #3d85ff; }
+  .maximized .titlebar:not(headerbar) button.titlebutton:not(.appmenu):last-child, .fullscreen .titlebar:not(headerbar) button.titlebutton:not(.appmenu):last-child, .tiled .titlebar:not(headerbar) button.titlebutton:not(.appmenu):last-child, .tiled-top .titlebar:not(headerbar) button.titlebutton:not(.appmenu):last-child, .tiled-right .titlebar:not(headerbar) button.titlebutton:not(.appmenu):last-child, .tiled-bottom .titlebar:not(headerbar) button.titlebutton:not(.appmenu):last-child, .tiled-left .titlebar:not(headerbar) button.titlebutton:not(.appmenu):last-child, .maximized headerbar button.titlebutton:not(.appmenu):last-child, .fullscreen headerbar button.titlebutton:not(.appmenu):last-child, .tiled headerbar button.titlebutton:not(.appmenu):last-child, .tiled-top headerbar button.titlebutton:not(.appmenu):last-child, .tiled-right headerbar button.titlebutton:not(.appmenu):last-child, .tiled-bottom headerbar button.titlebutton:not(.appmenu):last-child, .tiled-left headerbar button.titlebutton:not(.appmenu):last-child {
+    margin-right: 0; }
+  .maximized .titlebar:not(headerbar) button.titlebutton:not(.appmenu):first-child, .fullscreen .titlebar:not(headerbar) button.titlebutton:not(.appmenu):first-child, .tiled .titlebar:not(headerbar) button.titlebutton:not(.appmenu):first-child, .tiled-top .titlebar:not(headerbar) button.titlebutton:not(.appmenu):first-child, .tiled-right .titlebar:not(headerbar) button.titlebutton:not(.appmenu):first-child, .tiled-bottom .titlebar:not(headerbar) button.titlebutton:not(.appmenu):first-child, .tiled-left .titlebar:not(headerbar) button.titlebutton:not(.appmenu):first-child, .maximized headerbar button.titlebutton:not(.appmenu):first-child, .fullscreen headerbar button.titlebutton:not(.appmenu):first-child, .tiled headerbar button.titlebutton:not(.appmenu):first-child, .tiled-top headerbar button.titlebutton:not(.appmenu):first-child, .tiled-right headerbar button.titlebutton:not(.appmenu):first-child, .tiled-bottom headerbar button.titlebutton:not(.appmenu):first-child, .tiled-left headerbar button.titlebutton:not(.appmenu):first-child {
+    margin-left: 0; }
+  .titlebar:not(headerbar) button.titlebutton:not(.appmenu):backdrop,
+  headerbar button.titlebutton:not(.appmenu):backdrop {
+    color: transparent;
+    background: transparent;
+    box-shadow: none;
+    border-color: #0d0e11;
+    background: rgba(0, 0, 0, 0.3); }
+
 .default-decoration.titlebar:not(headerbar),
 headerbar.default-decoration {
   min-height: 0;
@@ -5486,11 +5536,6 @@ headerbar.default-decoration {
     min-width: 0;
     margin: 0; }
 
-dialog .titlebar:not(headerbar), dialog headerbar, dialog headerbar:backdrop {
-  background: #23252e;
-  border: 0;
-  box-shadow: none; }
-
 paned headerbar:first-child,
 hdyleaflet headerbar:first-child,
 headerbar.titlebar headerbar:first-child,
@@ -5960,31 +6005,6 @@ decoration {
     border-width: 0;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }
 
-button.titlebutton:not(.appmenu) {
-  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:not(:backdrop) {
-    transition: 0;
-    background: rgba(255, 255, 255, 0.2);
-    box-shadow: 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;
 @define-color disk_space_used #2777ff;
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 2da8efe2..0a96bfbc 100644
--- a/share/themes/Kali-Light/gtk-3.0/gtk-dark.css
+++ b/share/themes/Kali-Light/gtk-3.0/gtk-dark.css
@@ -5453,13 +5453,12 @@ scale slider {
  ***************/
 headerbar {
   border-color: black;
-  background: #0d0e11 -gtk-scaled(url("assets/kali-headerbar-logo-dark.png"), url("assets/kali-headerbar-logo-dark@2.png")), linear-gradient(to top, #16171d, #1a1c23);
+  background: #0d0e11 linear-gradient(to top, #16171d, #1a1c23);
   box-shadow: inset 0 1px rgba(238, 238, 236, 0.07);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
   background-repeat: no-repeat;
   background-position: left; }
   headerbar:backdrop {
-    background-image: -gtk-scaled(url("assets/kali-headerbar-logo-dark.png"), url("assets/kali-headerbar-logo-dark@2.png"));
     background-repeat: no-repeat;
     background-position: left;
     box-shadow: none; }
@@ -5476,6 +5475,57 @@ headerbar viewswitcher button > stack > box.wide,
 headerbar hdyviewswitcher > button box.wide {
   margin: -8px 0; }
 
+dialog .titlebar:not(headerbar), dialog headerbar, dialog headerbar:backdrop {
+  background: #23252e;
+  border: 0;
+  box-shadow: none; }
+
+.titlebar:not(headerbar) button.titlebutton:not(.appmenu),
+headerbar button.titlebutton:not(.appmenu) {
+  color: transparent;
+  background: #383d4b;
+  margin: 0;
+  margin-left: 5px;
+  padding: 0;
+  min-width: 0;
+  min-height: 0;
+  border: 1px solid black;
+  box-shadow: inset 0 3px 5px -4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.05);
+  -gtk-icon-shadow: none;
+  transition: all .2s; }
+  .titlebar:not(headerbar) button.titlebutton:not(.appmenu) + button.titlebutton,
+  headerbar button.titlebutton:not(.appmenu) + button.titlebutton {
+    margin-left: 0; }
+  .titlebar:not(headerbar) button.titlebutton:not(.appmenu):last-child,
+  headerbar button.titlebutton:not(.appmenu):last-child {
+    margin-right: 5px; }
+  .titlebar:not(headerbar) button.titlebutton:not(.appmenu):hover,
+  headerbar button.titlebutton:not(.appmenu):hover {
+    color: #eeeeec;
+    background: #383d4b;
+    border-color: transparent;
+    box-shadow: 0 0 0 1px #0d0e11; }
+  .titlebar:not(headerbar) button.titlebutton:not(.appmenu).close,
+  headerbar button.titlebutton:not(.appmenu).close {
+    color: black;
+    background: #2777ff;
+    border-color: transparent; }
+    .titlebar:not(headerbar) button.titlebutton:not(.appmenu).close:hover,
+    headerbar button.titlebutton:not(.appmenu).close:hover {
+      color: white;
+      background: #3d85ff; }
+  .maximized .titlebar:not(headerbar) button.titlebutton:not(.appmenu):last-child, .fullscreen .titlebar:not(headerbar) button.titlebutton:not(.appmenu):last-child, .tiled .titlebar:not(headerbar) button.titlebutton:not(.appmenu):last-child, .tiled-top .titlebar:not(headerbar) button.titlebutton:not(.appmenu):last-child, .tiled-right .titlebar:not(headerbar) button.titlebutton:not(.appmenu):last-child, .tiled-bottom .titlebar:not(headerbar) button.titlebutton:not(.appmenu):last-child, .tiled-left .titlebar:not(headerbar) button.titlebutton:not(.appmenu):last-child, .maximized headerbar button.titlebutton:not(.appmenu):last-child, .fullscreen headerbar button.titlebutton:not(.appmenu):last-child, .tiled headerbar button.titlebutton:not(.appmenu):last-child, .tiled-top headerbar button.titlebutton:not(.appmenu):last-child, .tiled-right headerbar button.titlebutton:not(.appmenu):last-child, .tiled-bottom headerbar button.titlebutton:not(.appmenu):last-child, .tiled-left headerbar button.titlebutton:not(.appmenu):last-child {
+    margin-right: 0; }
+  .maximized .titlebar:not(headerbar) button.titlebutton:not(.appmenu):first-child, .fullscreen .titlebar:not(headerbar) button.titlebutton:not(.appmenu):first-child, .tiled .titlebar:not(headerbar) button.titlebutton:not(.appmenu):first-child, .tiled-top .titlebar:not(headerbar) button.titlebutton:not(.appmenu):first-child, .tiled-right .titlebar:not(headerbar) button.titlebutton:not(.appmenu):first-child, .tiled-bottom .titlebar:not(headerbar) button.titlebutton:not(.appmenu):first-child, .tiled-left .titlebar:not(headerbar) button.titlebutton:not(.appmenu):first-child, .maximized headerbar button.titlebutton:not(.appmenu):first-child, .fullscreen headerbar button.titlebutton:not(.appmenu):first-child, .tiled headerbar button.titlebutton:not(.appmenu):first-child, .tiled-top headerbar button.titlebutton:not(.appmenu):first-child, .tiled-right headerbar button.titlebutton:not(.appmenu):first-child, .tiled-bottom headerbar button.titlebutton:not(.appmenu):first-child, .tiled-left headerbar button.titlebutton:not(.appmenu):first-child {
+    margin-left: 0; }
+  .titlebar:not(headerbar) button.titlebutton:not(.appmenu):backdrop,
+  headerbar button.titlebutton:not(.appmenu):backdrop {
+    color: transparent;
+    background: transparent;
+    box-shadow: none;
+    border-color: #0d0e11;
+    background: rgba(0, 0, 0, 0.3); }
+
 .default-decoration.titlebar:not(headerbar),
 headerbar.default-decoration {
   min-height: 0;
@@ -5486,11 +5536,6 @@ headerbar.default-decoration {
     min-width: 0;
     margin: 0; }
 
-dialog .titlebar:not(headerbar), dialog headerbar, dialog headerbar:backdrop {
-  background: #23252e;
-  border: 0;
-  box-shadow: none; }
-
 paned headerbar:first-child,
 hdyleaflet headerbar:first-child,
 headerbar.titlebar headerbar:first-child,
@@ -5960,31 +6005,6 @@ decoration {
     border-width: 0;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }
 
-button.titlebutton:not(.appmenu) {
-  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:not(:backdrop) {
-    transition: 0;
-    background: rgba(255, 255, 255, 0.2);
-    box-shadow: 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;
 @define-color disk_space_used #2777ff;
diff --git a/share/themes/Kali-Light/gtk-3.0/gtk.css b/share/themes/Kali-Light/gtk-3.0/gtk.css
index 96fa9959..ac689e40 100644
--- a/share/themes/Kali-Light/gtk-3.0/gtk.css
+++ b/share/themes/Kali-Light/gtk-3.0/gtk.css
@@ -5474,13 +5474,12 @@ scale slider {
  ***************/
 headerbar {
   border-color: #cccccc;
-  background: #f2f2f2 -gtk-scaled(url("assets/kali-headerbar-logo.png"), url("assets/kali-headerbar-logo@2.png")), linear-gradient(to top, #ededed, whitesmoke);
+  background: #ededed linear-gradient(to top, #e8e8e8, #f0f0f0);
   box-shadow: inset 0 1px rgba(255, 255, 255, 0.8);
   box-shadow: 0 1px 4px rgba(204, 204, 204, 0.75);
   background-repeat: no-repeat;
   background-position: left; }
   headerbar:backdrop {
-    background-image: -gtk-scaled(url("assets/kali-headerbar-logo.png"), url("assets/kali-headerbar-logo@2.png"));
     background-repeat: no-repeat;
     background-position: left;
     box-shadow: none; }
@@ -5497,6 +5496,57 @@ headerbar viewswitcher button > stack > box.wide,
 headerbar hdyviewswitcher > button box.wide {
   margin: -8px 0; }
 
+dialog .titlebar:not(headerbar), dialog headerbar, dialog headerbar:backdrop {
+  background: #ffffff;
+  border: 0;
+  box-shadow: none; }
+
+.titlebar:not(headerbar) button.titlebutton:not(.appmenu),
+headerbar button.titlebutton:not(.appmenu) {
+  color: transparent;
+  background: white;
+  margin: 0;
+  margin-left: 5px;
+  padding: 0;
+  min-width: 0;
+  min-height: 0;
+  border: 1px solid #c2c2c2;
+  box-shadow: inset 0 3px 5px -4px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.05);
+  -gtk-icon-shadow: none;
+  transition: all .2s; }
+  .titlebar:not(headerbar) button.titlebutton:not(.appmenu) + button.titlebutton,
+  headerbar button.titlebutton:not(.appmenu) + button.titlebutton {
+    margin-left: 0; }
+  .titlebar:not(headerbar) button.titlebutton:not(.appmenu):last-child,
+  headerbar button.titlebutton:not(.appmenu):last-child {
+    margin-right: 5px; }
+  .titlebar:not(headerbar) button.titlebutton:not(.appmenu):hover,
+  headerbar button.titlebutton:not(.appmenu):hover {
+    color: #5c616c;
+    background: white;
+    border-color: transparent;
+    box-shadow: 0 0 0 1px #d9d9d9; }
+  .titlebar:not(headerbar) button.titlebutton:not(.appmenu).close,
+  headerbar button.titlebutton:not(.appmenu).close {
+    color: white;
+    background: #2777ff;
+    border-color: transparent; }
+    .titlebar:not(headerbar) button.titlebutton:not(.appmenu).close:hover,
+    headerbar button.titlebutton:not(.appmenu).close:hover {
+      color: black;
+      background: #3d85ff; }
+  .maximized .titlebar:not(headerbar) button.titlebutton:not(.appmenu):last-child, .fullscreen .titlebar:not(headerbar) button.titlebutton:not(.appmenu):last-child, .tiled .titlebar:not(headerbar) button.titlebutton:not(.appmenu):last-child, .tiled-top .titlebar:not(headerbar) button.titlebutton:not(.appmenu):last-child, .tiled-right .titlebar:not(headerbar) button.titlebutton:not(.appmenu):last-child, .tiled-bottom .titlebar:not(headerbar) button.titlebutton:not(.appmenu):last-child, .tiled-left .titlebar:not(headerbar) button.titlebutton:not(.appmenu):last-child, .maximized headerbar button.titlebutton:not(.appmenu):last-child, .fullscreen headerbar button.titlebutton:not(.appmenu):last-child, .tiled headerbar button.titlebutton:not(.appmenu):last-child, .tiled-top headerbar button.titlebutton:not(.appmenu):last-child, .tiled-right headerbar button.titlebutton:not(.appmenu):last-child, .tiled-bottom headerbar button.titlebutton:not(.appmenu):last-child, .tiled-left headerbar button.titlebutton:not(.appmenu):last-child {
+    margin-right: 0; }
+  .maximized .titlebar:not(headerbar) button.titlebutton:not(.appmenu):first-child, .fullscreen .titlebar:not(headerbar) button.titlebutton:not(.appmenu):first-child, .tiled .titlebar:not(headerbar) button.titlebutton:not(.appmenu):first-child, .tiled-top .titlebar:not(headerbar) button.titlebutton:not(.appmenu):first-child, .tiled-right .titlebar:not(headerbar) button.titlebutton:not(.appmenu):first-child, .tiled-bottom .titlebar:not(headerbar) button.titlebutton:not(.appmenu):first-child, .tiled-left .titlebar:not(headerbar) button.titlebutton:not(.appmenu):first-child, .maximized headerbar button.titlebutton:not(.appmenu):first-child, .fullscreen headerbar button.titlebutton:not(.appmenu):first-child, .tiled headerbar button.titlebutton:not(.appmenu):first-child, .tiled-top headerbar button.titlebutton:not(.appmenu):first-child, .tiled-right headerbar button.titlebutton:not(.appmenu):first-child, .tiled-bottom headerbar button.titlebutton:not(.appmenu):first-child, .tiled-left headerbar button.titlebutton:not(.appmenu):first-child {
+    margin-left: 0; }
+  .titlebar:not(headerbar) button.titlebutton:not(.appmenu):backdrop,
+  headerbar button.titlebutton:not(.appmenu):backdrop {
+    color: transparent;
+    background: transparent;
+    box-shadow: none;
+    border-color: #d9d9d9;
+    background: rgba(0, 0, 0, 0.1); }
+
 .default-decoration.titlebar:not(headerbar),
 headerbar.default-decoration {
   min-height: 0;
@@ -5507,11 +5557,6 @@ headerbar.default-decoration {
     min-width: 0;
     margin: 0; }
 
-dialog .titlebar:not(headerbar), dialog headerbar, dialog headerbar:backdrop {
-  background: #ffffff;
-  border: 0;
-  box-shadow: none; }
-
 paned headerbar:first-child,
 hdyleaflet headerbar:first-child,
 headerbar.titlebar headerbar:first-child,
@@ -5981,31 +6026,6 @@ decoration {
     border-width: 0;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }
 
-button.titlebutton:not(.appmenu) {
-  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:not(:backdrop) {
-    transition: 0;
-    background: rgba(255, 255, 255, 0.2);
-    box-shadow: 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;
 @define-color disk_space_used #2777ff;
diff --git a/src/themes/Kali/sass/gtk3/_common-tweaks.scss b/src/themes/Kali/sass/gtk3/_common-tweaks.scss
index a27f868c..b6975ddb 100644
--- a/src/themes/Kali/sass/gtk3/_common-tweaks.scss
+++ b/src/themes/Kali/sass/gtk3/_common-tweaks.scss
@@ -1,3 +1,4 @@
+$_header_bg: darken($bg_color, if($variant == 'light', 7%, 10%));
 $_menu_shadow: 0 1px 6px transparentize(black, if($variant == 'light', .85, .5));
 $_widget_inset_shadow: inset 0 3px 5px -4px $shadow_color, 0 1px rgba(255, 255, 255, .05);
 $_wm_border: if($variant=='light', transparentize(black, 0.9), transparentize($borders_color, 0.25));
@@ -182,15 +183,12 @@ headerbar {
   $_border_color: darken($bg_color, 20%);
   border-color: $_border_color;
 
-  $_scale_asset: 'assets/kali-headerbar-logo#{$asset_suffix}';
-  @include headerbar_fill(darken($bg_color, if($variant == 'light', 5%, 10%)),
-                          $ov: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png')));
+  @include headerbar_fill($_header_bg);
   box-shadow: 0 1px 4px transparentize($_border_color, .25);
   background-repeat: no-repeat;
   background-position: left;
 
   &:backdrop {
-    background-image: -gtk-scaled(url('#{$_scale_asset}.png'), url('#{$_scale_asset}@2.png'));
     background-repeat: no-repeat;
     background-position: left;
     box-shadow: none;
@@ -210,6 +208,76 @@ headerbar {
     &.wide { margin: -8px 0; }
   }
 
+  dialog &,
+  dialog &:backdrop {
+    background: $bg_color;
+    border: 0;
+    box-shadow: none;
+  }
+
+  // Window Close button
+  button.titlebutton:not(.appmenu) {
+    $_titlebutton_bg: lighten($bg_color, 10%);
+    color: transparent;
+    background: $_titlebutton_bg;
+    margin: 0;
+    margin-left: 5px;
+    padding: 0;
+    min-width: 0;
+    min-height: 0;
+    border: 1px solid $alt_borders_color;
+    box-shadow: $_widget_inset_shadow;
+    -gtk-icon-shadow: none;
+    transition: all .2s;
+
+    & + button.titlebutton { margin-left: 0; }
+    &:last-child { margin-right: 5px; }
+
+    @at-root %titlebutton_hover,
+    &:hover {
+      color: $fg_color;
+      background: $_titlebutton_bg;
+      border-color: transparent;
+      box-shadow: 0 0 0 1px $borders_color;
+    }
+
+    &.close {
+      color: if($variant=='light', white, black);
+      background: $selected_bg_color;
+      border-color: transparent;
+
+      &:hover {
+        color: if($variant=='light', black, white);
+        background: mix(white, $selected_bg_color, 10%);
+      }
+
+      @if lightness($selected_bg_color) > 60%
+       or lightness($selected_bg_color) < 20% {
+        &, &:hover { color: $selected_fg_color; }
+      }
+    }
+
+    .maximized &,
+    .fullscreen &,
+    .tiled &,
+    .tiled-top &,
+    .tiled-right &,
+    .tiled-bottom &,
+    .tiled-left & {
+        &:last-child { margin-right: 0; }
+        &:first-child { margin-left: 0; }
+    }
+
+    &:backdrop,
+    &:backdrop:hover {
+      color: transparent;
+      background: transparent;
+      box-shadow: none;
+      border-color: $backdrop_borders_color;
+      background: $shadow_color;
+    }
+  }
+
   &.default-decoration {
     min-height: 0;
     padding: 6px;
@@ -220,13 +288,6 @@ headerbar {
       margin: 0;
     }
   }
-
-  dialog &,
-  dialog &:backdrop {
-    background: $bg_color;
-    border: 0;
-    box-shadow: none;
-  }
 }
 
 paned headerbar:first-child,
@@ -527,40 +588,3 @@ decoration {
     box-shadow: 0 1px 4px transparentize(black, 0.8);
   }
 }
-
-// Window Close button
-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:not(:backdrop) {
-    transition: 0;
-    background: transparentize(white, .8);
-    box-shadow: 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; }
-  }
-}