[epiphany/wip/exalm/tabs: 6/7] css: Tweak close buttons

[Alexander Mikhaylenko <alexm src gnome org>]

commit 8d3687d34d58a3f0e0a90260d031c520d2b82cb0
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Thu Jan 28 03:01:15 2021 +0500

    css: Tweak close buttons
    
    Match HdyTabBar style.

 src/resources/themes/_Adwaita-base.scss | 37 +++++++++++++++------------------
 1 file changed, 17 insertions(+), 20 deletions(-)
---
diff --git a/src/resources/themes/_Adwaita-base.scss b/src/resources/themes/_Adwaita-base.scss
index 66c62989e..2c3476aad 100644
--- a/src/resources/themes/_Adwaita-base.scss
+++ b/src/resources/themes/_Adwaita-base.scss
@@ -13,27 +13,24 @@
 
 @import 'drawing';
 
-$close_button_fg_color: if($variant == 'light', lighten($fg_color, 10%), darken($fg_color, 10%));
-@mixin close_button($bg:$bg_color, $fg:$close_button_fg_color) {
+@mixin close_button($fg:$fg_color) {
   background: none;
   border: none;
   box-shadow: none;
-
-  &:last-child {
-    image {
-      color: $fg;
-      border: 1px solid transparent;
-      border-radius: 5px;
-    }
-
-    &:hover image {
-      @include button(normal, $bg, $fg);
-      @include button(hover, $bg, $fg);
-    }
-
-    &:active image {
-      @include button(normal, $bg, $fg);
-      @include button(active, $bg, $fg);
+  -gtk-icon-shadow: none;
+  text-shadow: none;
+  min-width: 24px;
+  min-height: 24px;
+  border-radius: 99px;
+  color: inherit;
+  padding: 0;
+  margin: 2px;
+
+  &:hover {
+    background: gtkalpha($fg, .15);
+
+    &:active {
+      background: gtkalpha(black, .2);
     }
   }
 }
@@ -53,14 +50,14 @@ $close_button_fg_color: if($variant == 'light', lighten($fg_color, 10%), darken(
 }
 
 .bookmark-tag-widget-selected button {
-  @include close_button($selected_bg_color, $selected_fg_color);
+  @include close_button($selected_fg_color);
 }
 
 .page-row-close-button {
   @include close_button();
 
   row:selected & {
-    @include close_button($selected_bg_color, $selected_fg_color);
+    @include close_button($selected_fg_color);
   }
 
   row.narrow & image {