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: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3030>
This commit is contained in:
Sam Hewitt 2023-11-24 11:05:28 -03:30
parent ac7ef665a1
commit ad5cffbce4
2 changed files with 41 additions and 23 deletions

View File

@ -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;

View File

@ -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 {