GTK3: theme titlebuttons only inside headerbars

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; }
-  }
-}