style: Fix HighContrast issues with notifications
- define a new hc_mix_color for mixing functions that was making bg color transparent - fix missing HC outline on banner notifications - fix notification timestamp not changing in HC due to color - closes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/7283 Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3075>
This commit is contained in:
parent
15e0440a8b
commit
d3c3e02d52
@ -197,7 +197,7 @@
|
||||
background-color: $hover_bg_color;
|
||||
|
||||
@if $is_highcontrast {
|
||||
background-color: mix($hover_bg_color, $hc_inset_color, 10%);
|
||||
background-color: mix($hover_bg_color, $hc_mix_color, 90%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -208,7 +208,7 @@
|
||||
background-color: $active_bg_color;
|
||||
|
||||
@if $is_highcontrast {
|
||||
background-color: mix($active_bg_color, $hc_inset_color, 10%);
|
||||
background-color: mix($active_bg_color, $hc_mix_color, 90%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -222,9 +222,9 @@
|
||||
&: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%);}
|
||||
background-color: mix($checked_bg_color, $hc_mix_color, 90%);
|
||||
&:hover { background-color: mix(lighten($checked_bg_color, 12%), $hc_mix_color, 90%);}
|
||||
&:active { background-color: mix(lighten($checked_bg_color, 15%), $hc_mix_color, 90%);}
|
||||
}
|
||||
}
|
||||
|
||||
@ -355,6 +355,7 @@
|
||||
} @else {
|
||||
@include button(normal);
|
||||
}
|
||||
|
||||
&:hover {@include button(hover);}
|
||||
&:active {@include button(active);}
|
||||
&:focus {@include button(focus);}
|
||||
|
@ -56,7 +56,7 @@ $system_overlay_bg_color: mix($system_bg_color, $system_fg_color, 90%);
|
||||
|
||||
// derived global colors
|
||||
// insensitive state
|
||||
$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
|
||||
$insensitive_fg_color: $fg_color;
|
||||
$insensitive_bg_color: mix($bg_color, $base_color, 60%);
|
||||
$insensitive_borders_color: $borders_color;
|
||||
|
||||
@ -74,3 +74,4 @@ $active_fg_color: if($variant=='light', darken($fg_color, 10%), lighten($fg_colo
|
||||
|
||||
// inset colour for high contrast
|
||||
$hc_inset_color: transparentize($fg_color, 0.6);
|
||||
$hc_mix_color: $light_1;
|
||||
|
@ -105,7 +105,7 @@
|
||||
// notification time stamp
|
||||
> .event-time {
|
||||
@extend %caption;
|
||||
color: transparentize($fg_color, 0.5);
|
||||
color: $insensitive_fg_color;
|
||||
padding-bottom: to_em(1px);
|
||||
|
||||
&:ltr { text-align: right };
|
||||
|
@ -11,6 +11,10 @@ $notification_banner_width: 34em;
|
||||
border-radius: $modal_radius;
|
||||
margin: $base_margin;
|
||||
|
||||
@if $is_highcontrast {
|
||||
border: 1px solid $hc_inset_color;
|
||||
}
|
||||
|
||||
.notification-actions {
|
||||
spacing: 0;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user