From 4697a3f0c66e4bfa0b4ca8dce95bf477456ddd8e Mon Sep 17 00:00:00 2001 From: Sam Hewitt Date: Tue, 31 May 2022 10:03:58 -0230 Subject: 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: --- widgets/_screenshot.scss | 6 ++++-- widgets/_window-picker.scss | 11 +++++------ 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/widgets/_screenshot.scss b/widgets/_screenshot.scss index 7b6747c..f7fa3da 100644 --- a/widgets/_screenshot.scss +++ b/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/widgets/_window-picker.scss b/widgets/_window-picker.scss index 1d30e0f..c71adad 100644 --- a/widgets/_window-picker.scss +++ b/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%); } } -- cgit v1.2.1