From 5f9a6260611cf407bfda86bb09fac97897fda988 Mon Sep 17 00:00:00 2001 From: Sam Hewitt Date: Fri, 22 Dec 2023 17:54:49 -0330 Subject: [PATCH] style: Update panel_button mixin to have HighContrast support Part-of: --- data/theme/gnome-shell-sass/_drawing.scss | 45 +++++++++++++------ .../gnome-shell-sass/widgets/_panel.scss | 2 +- 2 files changed, 32 insertions(+), 15 deletions(-) diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss index cbd53c23e..c852fc38f 100644 --- a/data/theme/gnome-shell-sass/_drawing.scss +++ b/data/theme/gnome-shell-sass/_drawing.scss @@ -406,7 +406,8 @@ @mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $flat: true, $highlighted_child: false, $child_class:"") { transition-duration: 150ms; - border: 3px solid transparent; + margin: 3px; + border: 1px solid transparent; border-radius: $forced_circular_radius; font-weight: bold; @@ -417,49 +418,65 @@ box-shadow: none; &:active, &:focus, &:checked { - box-shadow: inset 0 0 0 100px transparentize($fg, 0.75); + background-color: transparentize($fg, 0.75); &:hover { - box-shadow: inset 0 0 0 100px transparentize($fg, 0.65); + background-color: transparentize($fg, 0.65); } } &:hover { - box-shadow: inset 0 0 0 100px transparentize($fg, 0.8); + background-color: transparentize($fg, 0.8); } } @else { - box-shadow: inset 0 0 0 100px transparentize($bg, 0.2); + background-color: transparentize($bg, 0.2); + + @if $is_highcontrast { + border-color: $hc_inset_color; + } &:active, &:focus, &:checked { - box-shadow: inset 0 0 0 100px $bg; + background-color: $bg; &:hover { - box-shadow: inset 0 0 0 100px transparentize($bg, 0.05); + background-color: transparentize($bg, 0.05); } } &:hover { - box-shadow: inset 0 0 0 100px transparentize($bg, 0.1); + background-color: transparentize($bg, 0.1); + } + } + + @if $is_highcontrast { + &:hover, &:active, &:focus, &:checked { + border-color: $hc_inset_color; } } // some overrides to style a child element @if $highlighted_child { - box-shadow: none !important; + background: none !important; + border: none !important; #{$child_class} { transition-duration: 150ms; - border: 3px solid transparent; border-radius: $forced_circular_radius; + + // use box-shadow instead of border + @if $is_highcontrast { + box-shadow: inset 0 0 0 1px $hc_inset_color; + } } - &:active, &:focus, &:checked { + &:active, &:focus { + background: none; box-shadow: none !important; #{$child_class} { - box-shadow: inset 0 0 0 100px transparentize($fg, 0.75); + background-color: transparentize($fg, 0.75); &:hover { - box-shadow: inset 0 0 0 100px transparentize($fg, 0.65) !important; + background-color: transparentize($fg, 0.65) !important; } } } @@ -467,7 +484,7 @@ &:hover { box-shadow: none !important; #{$child_class} { - box-shadow: inset 0 0 0 100px transparentize($fg, 0.8); + background-color: transparentize($fg, 0.8); } } } diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss index eb6715e98..6a5fdc8be 100644 --- a/data/theme/gnome-shell-sass/widgets/_panel.scss +++ b/data/theme/gnome-shell-sass/widgets/_panel.scss @@ -30,7 +30,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration // status area icons .system-status-icon { icon-size: $scalable_icon_size; - padding: $base_padding; + padding: 0 $base_padding; margin: 0 $base_margin; }