[gnome-shell/wip/snwh/stylesheet-minor-fixes: 12/12] style: Fix margin and color problems in the close buttons

[Marge Bot <marge-bot src gnome org>]

commit 98ff66ddbaa685fbcc3b996eafad5b74798daf5a
Author: Sam Hewitt <sam snwh org>
Date:   Tue May 31 10:03:58 2022 -0230

    style: Fix margin and color problems in the close buttons
    
    - align the screenshot close button better
    - use color changes consistent with other elements
    
    Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2309>

 data/theme/gnome-shell-sass/widgets/_screenshot.scss    |  6 ++++--
 data/theme/gnome-shell-sass/widgets/_window-picker.scss | 11 +++++------
 2 files changed, 9 insertions(+), 8 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_screenshot.scss 
b/data/theme/gnome-shell-sass/widgets/_screenshot.scss
index 7b6747c8b8..f7fa3da2be 100644
--- a/data/theme/gnome-shell-sass/widgets/_screenshot.scss
+++ b/data/theme/gnome-shell-sass/widgets/_screenshot.scss
@@ -26,8 +26,10 @@ $screenshot_ui_button_red: $error_color;
 .screenshot-ui-close-button {
   @extend .window-close; // copy window close button
   padding: $base_padding !important; // but with more padding
-  &.left { margin-left: 8px;}
-  &.right { margin-right: 8px;}
+  margin-top: 12px;
+  box-shadow: 0 2px 4px 0 $shadow_color;
+  &.left { margin-left: 12px;}
+  &.right { margin-right: 12px;}
 }
 
 .screenshot-ui-type-button {
diff --git a/data/theme/gnome-shell-sass/widgets/_window-picker.scss 
b/data/theme/gnome-shell-sass/widgets/_window-picker.scss
index 1d30e0fb76..c71adad54f 100644
--- a/data/theme/gnome-shell-sass/widgets/_window-picker.scss
+++ b/data/theme/gnome-shell-sass/widgets/_window-picker.scss
@@ -5,7 +5,7 @@ $window_picker_padding: $base_padding * 2; // 12px
 
 $window_thumbnail_label_color: transparentize($osd_bg_color, 0.4);
 
-$window_close_button_color: lighten(transparentize($osd_bg_color, .05), 7%);
+$window_close_button_color: transparentize(lighten($osd_bg_color, 7%), .02);
 $window_close_button_size: 30px;
 $window_close_button_padding: 3px;
 
@@ -18,7 +18,7 @@ $window_close_button_padding: 3px;
 // Window titles
 .window-caption {
   color: $osd_fg_color;
-  background-color: $osd_bg_color;
+  background-color: lighten($osd_bg_color, 5%);
   border-radius: 99px;
   padding: $base_padding $base_padding * 2;
 }
@@ -32,17 +32,16 @@ $window_close_button_padding: 3px;
   padding: $window_close_button_padding;
   height: $window_close_button_size;
   width: $window_close_button_size;
-  transition-duration: 300ms;
+  transition-duration: 100ms;
 
   & StIcon { icon-size: 24px; } // uses non standard icon size
 
   &:hover {
-    background-color: mix($osd_fg_color, $window_close_button_color, 15%);
+    background-color: lighten($window_close_button_color, 7%);
   }
 
   &:active {
-    color: transparentize($osd_fg_color, 0.2);
-    background-color: darken($window_close_button_color, 5%);
+    background-color: lighten($window_close_button_color, 13%);
   }
 }