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>
This commit is contained in:
Sam Hewitt 2022-05-31 10:03:58 -02:30 committed by Marge Bot
parent ec571eb86f
commit 98ff66ddba
2 changed files with 9 additions and 8 deletions

View File

@ -26,8 +26,10 @@ $screenshot_ui_button_red: $error_color;
.screenshot-ui-close-button { .screenshot-ui-close-button {
@extend .window-close; // copy window close button @extend .window-close; // copy window close button
padding: $base_padding !important; // but with more padding padding: $base_padding !important; // but with more padding
&.left { margin-left: 8px;} margin-top: 12px;
&.right { margin-right: 8px;} box-shadow: 0 2px 4px 0 $shadow_color;
&.left { margin-left: 12px;}
&.right { margin-right: 12px;}
} }
.screenshot-ui-type-button { .screenshot-ui-type-button {

View File

@ -5,7 +5,7 @@ $window_picker_padding: $base_padding * 2; // 12px
$window_thumbnail_label_color: transparentize($osd_bg_color, 0.4); $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_size: 30px;
$window_close_button_padding: 3px; $window_close_button_padding: 3px;
@ -18,7 +18,7 @@ $window_close_button_padding: 3px;
// Window titles // Window titles
.window-caption { .window-caption {
color: $osd_fg_color; color: $osd_fg_color;
background-color: $osd_bg_color; background-color: lighten($osd_bg_color, 5%);
border-radius: 99px; border-radius: 99px;
padding: $base_padding $base_padding * 2; padding: $base_padding $base_padding * 2;
} }
@ -32,17 +32,16 @@ $window_close_button_padding: 3px;
padding: $window_close_button_padding; padding: $window_close_button_padding;
height: $window_close_button_size; height: $window_close_button_size;
width: $window_close_button_size; width: $window_close_button_size;
transition-duration: 300ms; transition-duration: 100ms;
& StIcon { icon-size: 24px; } // uses non standard icon size & StIcon { icon-size: 24px; } // uses non standard icon size
&:hover { &:hover {
background-color: mix($osd_fg_color, $window_close_button_color, 15%); background-color: lighten($window_close_button_color, 7%);
} }
&:active { &:active {
color: transparentize($osd_fg_color, 0.2); background-color: lighten($window_close_button_color, 13%);
background-color: darken($window_close_button_color, 5%);
} }
} }