From ad5cffbce48e3ab8e3c12ae569d29b7f3812ade6 Mon Sep 17 00:00:00 2001 From: Sam Hewitt Date: Fri, 24 Nov 2023 11:05:28 -0330 Subject: [PATCH] style: Fix oversights in screenshot UI css for high contrast - fix non-working is_highcontrast if statements in drawing - add missing hc bits for screenshot UI elements Part-of: --- data/theme/gnome-shell-sass/_drawing.scss | 46 +++++++++++-------- .../gnome-shell-sass/widgets/_screenshot.scss | 18 ++++++-- 2 files changed, 41 insertions(+), 23 deletions(-) diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss index 85f16fb3c..404c4dc81 100644 --- a/data/theme/gnome-shell-sass/_drawing.scss +++ b/data/theme/gnome-shell-sass/_drawing.scss @@ -166,56 +166,67 @@ // focused button @if $t==focus { + $focus_bg_color: mix($button_bg_color, $selected_bg_color, 90%); color: $tc; - background-color: mix($button_bg_color, $selected_bg_color, 90%); + background-color: $focus_bg_color; box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4) !important; &:hover { - background-color: mix(lighten($button_bg_color, 3%), $selected_bg_color, 90%); + background-color: lighten($focus_bg_color, 3%); box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important; } &:active { - background-color: mix(lighten($button_bg_color, 6%), $selected_bg_color, 90%); + background-color: lighten($focus_bg_color, 6%); box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important; } } // hover button @else if $t==hover { + $hover_bg_color: if($variant == 'light', darken($button_bg_color, 3%), lighten($button_bg_color, 3%)); color: $tc; - background-color: if($variant == 'light', darken($button_bg_color, 3%), lighten($button_bg_color, 3%)); + background-color: $hover_bg_color; - @if $is_highcontrast == "true" { - box-shadow: inset 0 0 0 1px lighten($button_inset_color, 3%); - background-color: mix(lighten($button_bg_color, 3%), $button_inset_color, 10%); + @if $is_highcontrast { + background-color: mix($hover_bg_color, $hc_inset_color, 10%); } } // active button @else if $t==active { + $active_bg_color: if($variant == 'light', darken($button_bg_color, 6%), lighten($button_bg_color, 6%)); color: $tc; - background-color: if($variant == 'light', darken($button_bg_color, 6%), lighten($button_bg_color, 6%)); - @if $is_highcontrast == "true" { - box-shadow: inset 0 0 0 1px lighten($button_inset_color, 6%); - background-color: mix(lighten($button_bg_color, 6%), $button_inset_color, 10%); + background-color: $active_bg_color; + + @if $is_highcontrast { + background-color: mix($active_bg_color, $hc_inset_color, 10%); } } // checked button @else if $t==checked { + $checked_bg_color:if($variant == 'light', darken($button_bg_color, 9%), lighten($button_bg_color, 9%)); color: $tc; - background-color: if($variant == 'light', darken($button_bg_color, 9%), lighten($button_bg_color, 9%)); - @if $is_highcontrast == "true" { - box-shadow: inset 0 0 0 1px lighten($button_inset_color, 9%); - background-color: mix(lighten($button_bg_color, 9%), $button_inset_color, 10%); + background-color: $checked_bg_color; + + &:hover { background-color: lighten($checked_bg_color, 12%);} + &:active { background-color: lighten($checked_bg_color, 15%);} + + @if $is_highcontrast { + background-color: mix($checked_bg_color, $hc_inset_color, 10%); + &:hover { background-color: mix(lighten($checked_bg_color, 12%), $hc_inset_color, 10%);} + &:active { background-color: mix(lighten($checked_bg_color, 15%), $hc_inset_color, 10%);} } - &:hover { background-color: lighten($button_bg_color, 12%);} - &:active { background-color: lighten($button_bg_color, 15%);} } // insensitive button @else if $t==insensitive { color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5)); background-color: if($variant == 'light', transparentize($tc, .9), transparentize($tc, .95)); + + @if $is_highcontrast { + // no border since it isn't sensitive + box-shadow: none; + } } // default/suggested button @@ -245,7 +256,6 @@ @else if $t==undecorated { background-color: transparent; background-color: none; - box-shadow: none; &:insensitive { @include button(insensitive); background-color: transparent; diff --git a/data/theme/gnome-shell-sass/widgets/_screenshot.scss b/data/theme/gnome-shell-sass/widgets/_screenshot.scss index 69edb053b..16274ab3c 100644 --- a/data/theme/gnome-shell-sass/widgets/_screenshot.scss +++ b/data/theme/gnome-shell-sass/widgets/_screenshot.scss @@ -55,7 +55,7 @@ $screenshot_ui_button_red: $error_color; &:hover, &:focus { .screenshot-ui-capture-button-circle { - background-color: darken($osd_fg_color, 15%); + background-color: darken($osd_fg_color, 20%); } } @@ -88,6 +88,11 @@ $screenshot_ui_button_red: $error_color; padding: $screenshot_ui_shot_cast_spacing; spacing: $screenshot_ui_shot_cast_spacing; + + @if $is_highcontrast { + box-shadow: inset 0 0 0 1px $hc_inset_color; + } + &:ltr { margin-left: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding;} &:rtl { margin-right: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding;} } @@ -95,14 +100,17 @@ $screenshot_ui_button_red: $error_color; .screenshot-ui-shot-cast-button { padding: $base_padding $base_padding*2; background-color: transparent; + border-radius: $modal_radius - $screenshot_ui_shot_cast_spacing; + StIcon { icon-size: $base_icon_size;} + + @if $is_highcontrast { + box-shadow: inset 0 0 0 1px $hc_inset_color; + } + &:hover, &:focus { background-color: transparentize($osd_fg_color, 0.8);} &:active { background-color: transparentize($osd_fg_color, .5);} &:checked { background-color: $osd_fg_color; color: $osd_bg_color;} &:insensitive { color: transparentize($osd_fg_color, 0.5);} - - border-radius: $modal_radius - $screenshot_ui_shot_cast_spacing; - - StIcon { icon-size: $base_icon_size;} } .screenshot-ui-show-pointer-button {