brl/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: Fix oversights in screenshot UI css for high contrast

Browse Source 
- 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
data/theme/gnome-shell-sass/_drawing.scss
View File

@ -166,56 +166,67 @@
// focused button // focused button
@if $t==focus { @if $t==focus {
$focus_bg_color: mix($button_bg_color, $selected_bg_color, 90%);
color: $tc; 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; box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4) !important;
&:hover { &: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; box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important;
} }
&:active { &: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; box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important;
} }
} }
// hover button // hover button
@else if $t==hover { @else if $t==hover {
$hover_bg_color: if($variant == 'light', darken($button_bg_color, 3%), lighten($button_bg_color, 3%));
color: $tc; 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" { @if $is_highcontrast {
box-shadow: inset 0 0 0 1px lighten($button_inset_color, 3%); background-color: mix($hover_bg_color, $hc_inset_color, 10%);
background-color: mix(lighten($button_bg_color, 3%), $button_inset_color, 10%);
} }
} }
// active button // active button
@else if $t==active { @else if $t==active {
$active_bg_color: if($variant == 'light', darken($button_bg_color, 6%), lighten($button_bg_color, 6%));
color: $tc; color: $tc;
background-color: if($variant == 'light', darken($button_bg_color, 6%), lighten($button_bg_color, 6%)); background-color: $active_bg_color;
@if $is_highcontrast == "true" {
box-shadow: inset 0 0 0 1px lighten($button_inset_color, 6%); @if $is_highcontrast {
background-color: mix(lighten($button_bg_color, 6%), $button_inset_color, 10%); background-color: mix($active_bg_color, $hc_inset_color, 10%);
} }
} }
// checked button // checked button
@else if $t==checked { @else if $t==checked {
$checked_bg_color:if($variant == 'light', darken($button_bg_color, 9%), lighten($button_bg_color, 9%));
color: $tc; color: $tc;
background-color: if($variant == 'light', darken($button_bg_color, 9%), lighten($button_bg_color, 9%)); background-color: $checked_bg_color;
@if $is_highcontrast == "true" {
box-shadow: inset 0 0 0 1px lighten($button_inset_color, 9%); &:hover { background-color: lighten($checked_bg_color, 12%);}
background-color: mix(lighten($button_bg_color, 9%), $button_inset_color, 10%); &: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 // insensitive button
@else if $t==insensitive { @else if $t==insensitive {
color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5)); color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5));
background-color: if($variant == 'light', transparentize($tc, .9), transparentize($tc, .95)); 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 // default/suggested button
@ -245,7 +256,6 @@
@else if $t==undecorated { @else if $t==undecorated {
background-color: transparent; background-color: transparent;
background-color: none; background-color: none;
box-shadow: none;
&:insensitive { &:insensitive {
@include button(insensitive); @include button(insensitive);
background-color: transparent; background-color: transparent;

18
data/theme/gnome-shell-sass/widgets/_screenshot.scss
View File

@ -55,7 +55,7 @@ $screenshot_ui_button_red: $error_color;
&:hover, &:focus { &:hover, &:focus {
.screenshot-ui-capture-button-circle { .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; padding: $screenshot_ui_shot_cast_spacing;
spacing: $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;} &:ltr { margin-left: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding;}
&:rtl { margin-right: $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 { .screenshot-ui-shot-cast-button {
padding: $base_padding $base_padding*2; padding: $base_padding $base_padding*2;
background-color: transparent; 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);} &:hover, &:focus { background-color: transparentize($osd_fg_color, 0.8);}
&:active { background-color: transparentize($osd_fg_color, .5);} &:active { background-color: transparentize($osd_fg_color, .5);}
&:checked { background-color: $osd_fg_color; color: $osd_bg_color;} &:checked { background-color: $osd_fg_color; color: $osd_bg_color;}
&:insensitive { color: transparentize($osd_fg_color, 0.5);} &: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 { .screenshot-ui-show-pointer-button {