From b3d3fb79aebbb48a439d424293f5b8e9c7a6e8ba Mon Sep 17 00:00:00 2001 From: Sam Hewitt Date: Thu, 11 Jan 2024 19:42:08 -0330 Subject: [PATCH] style: Fix panel and dash to account for mouse travel - rework overview-icon styles for the dash so they extend to the edge of the screen once again - revert changes to panel_button mixin - rework panel_button mixin to be more flexible - fixes #7318 Part-of: --- data/theme/gnome-shell-sass/_common.scss | 8 ++ data/theme/gnome-shell-sass/_drawing.scss | 109 ++++++++---------- .../theme/gnome-shell-sass/widgets/_dash.scss | 42 +++++-- .../gnome-shell-sass/widgets/_panel.scss | 22 ++-- 4 files changed, 98 insertions(+), 83 deletions(-) diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss index 05fe154dc..951fec081 100644 --- a/data/theme/gnome-shell-sass/_common.scss +++ b/data/theme/gnome-shell-sass/_common.scss @@ -68,6 +68,14 @@ stage { } /* Common Stylings */ +%reset { + background: none; + box-shadow: none; + border: none; + border-radius: 0; + padding: 0; + margin: 0; +} // icon tiles %tile { diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss index efb5f953f..ae9c02ff8 100644 --- a/data/theme/gnome-shell-sass/_drawing.scss +++ b/data/theme/gnome-shell-sass/_drawing.scss @@ -55,6 +55,13 @@ // font-size: round($size) + pt; } +// Function to fill the background of a panel button +@mixin panel_button_fill($bg) { + // use a box-shadow to fill the background + // this is done because panel buttons use a transparent border to fake padding + box-shadow: inset 0 0 0 100px $bg; +} + // Text entries drawing function @mixin entry($type, $c:$fg_color, $bc:$bg_color, $always_dark: false) { // @@ -216,8 +223,8 @@ @else if $type == 'checked' { color: $tc; background-color: $checked_button_bg_color; - &:hover { background-color: if($variant == 'light', darken($checked_button_bg_color, $hover_factor), lighten($active_button_bg_color, $hover_factor));} - &:active { background-color: if($variant == 'light', darken($checked_button_bg_color, $active_factor), lighten($active_button_bg_color, $active_factor));} + &:hover {background-color: if($variant == 'light', darken($checked_button_bg_color, $hover_factor), lighten($checked_button_bg_color, $hover_factor));} + &:active { background-color: if($variant == 'light', darken($checked_button_bg_color, $active_factor), lighten($checked_button_bg_color, $active_factor));} } // insensitive button @@ -276,7 +283,6 @@ // $system: uses system styles, true or false // - @extend %tile; @if $raised { @@ -336,100 +342,81 @@ } // Panel menu/button drawing function -@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $style: flat, $highlighted_child: false, $child_class:"") { +@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $style: null, $highlighted_child: false, $child_class:"") { // - // $bg: background color, derived from $panel_fg_color - // $fg: foreground color, also derived from $panel_fg_color + // $bg: background color, derived from $panel_fg_color + // $fg: foreground color, also derived from $panel_fg_color + // $style: can be set to 'filled' if button uses a colored background // - // $flat: if true, the button is filled instead of transparent // $highlighted_child: if true, applies some special overrides for to a // child element, see _panel.scss for details // $child_class: class name of the child element // - // common styles transition-duration: 150ms; - margin: 3px; - border: 1px solid transparent; + border: 3px solid transparent; + background-color: transparent; border-radius: $forced_circular_radius; font-weight: bold; - background-color: transparent; - color: $fg; - @if $style == 'flat' { - box-shadow: none; + // background fill defines + $fill: transparent; + $hover_fill: transparentize($fg, .83); + $active_fill: transparentize($fg, .72); + $active_hover_fill: transparentize($fg, .68); - &:active, &:focus, &:checked { - background-color: transparentize($fg, 0.75); - &:hover { - background-color: transparentize($fg, 0.65); - } - } - - &:hover { - background-color: transparentize($fg, 0.8); - } - - } @else { - background-color: transparentize($bg, 0.2); - - @if $contrast == 'high' { - border-color: $hc_inset_color; - } - - &:active, &:focus, &:checked { - background-color: $bg; - &:hover { - background-color: transparentize($bg, 0.05); - } - } - - &:hover { - background-color: transparentize($bg, 0.1); - } + @if $style == 'filled' { + $fill: $bg; + $hover_fill: if($variant == 'light', darken($bg, 5%), lighten($bg, 5%)); + $active_fill: if($variant == 'light', darken($bg, 9%), lighten($bg, 9%)); + $active_hover_fill: if($variant == 'light', darken($bg, 11%), lighten($bg, 11%)); } - @if $contrast == 'high' { - &:hover, &:active, &:focus, &:checked { - border-color: $hc_inset_color; + @include panel_button_fill($fill); + + &:focus, &:hover { + @include panel_button_fill($hover_fill); + } + + &:active, &:checked { + @include panel_button_fill($active_fill); + + &:hover{ + @include panel_button_fill($active_hover_fill); } } // some overrides to style a child element @if $highlighted_child { + + // remove the common styles from the parent background: none !important; + box-shadow: none !important; border: none !important; + // add them to the child #{$child_class} { transition-duration: 150ms; + border: 3px solid transparent; border-radius: $forced_circular_radius; + } - // use box-shadow instead of border - @if $contrast == 'high' { - @include draw_hc_inset(); + &:focus, &:hover { + #{$child_class} { + @include panel_button_fill($hover_fill); } } - &:active, &:focus { - background: none; - box-shadow: none !important; - + &:active, &:checked { #{$child_class} { - background-color: transparentize($fg, 0.75); + @include panel_button_fill($active_fill); &:hover { - background-color: transparentize($fg, 0.65) !important; + @include panel_button_fill($active_hover_fill); } } } - - &:hover { - box-shadow: none !important; - #{$child_class} { - background-color: transparentize($fg, 0.8); - } - } } } diff --git a/data/theme/gnome-shell-sass/widgets/_dash.scss b/data/theme/gnome-shell-sass/widgets/_dash.scss index 255f3abef..6c6c8cd3e 100644 --- a/data/theme/gnome-shell-sass/widgets/_dash.scss +++ b/data/theme/gnome-shell-sass/widgets/_dash.scss @@ -4,7 +4,7 @@ $dash_background_color: $system_overlay_bg_color; $dash_placeholder_size: 32px; -$dash_padding: $base_padding * 1.5; +$dash_padding: $base_padding * 2; $dash_edge_offset: $base_margin * 3; $dash_border_radius: $modal_radius + $dash_padding; @@ -16,10 +16,10 @@ $dash_border_radius: $modal_radius + $dash_padding; .dash-background { background-color: $dash_background_color; border-radius: $dash_border_radius; - padding-top: $dash_padding * 2; - padding-bottom: $dash_padding * 2; - padding-left: $dash_padding + 2px; // padding is uneven and needs hardcoded values - padding-right: $dash_padding + 2px; + padding-top: $dash_padding; + padding-bottom: $dash_padding; + padding-left: $dash_padding - $base_margin; // subtract the margins added to .overview-tile below as padding + padding-right: $dash_padding - $base_margin; @if $contrast == 'high' { @include draw_hc_inset($width: 2px); @@ -41,12 +41,33 @@ $dash_border_radius: $modal_radius + $dash_padding; height: $dash_placeholder_size; } + // IMPORTANT: items on the dash need to extend to the edge to be adequate click targets + // as such the %tile style is overriden and button styles are applied to the child class .overview-icon .show-apps, .overview-tile { - @include tile_button($bg:$dash_background_color); - margin: $base_margin * 0.5; - padding: $base_padding; - border-radius: $base_border_radius * 2;} + // remove styles + @extend %reset; + + padding: $dash_padding $base_margin; + padding-bottom: $dash_padding + $dash_edge_offset; + + $fg:$system_fg_color; + $bg:$dash_background_color; + + .overview-icon { + @extend %tile; + @include button(normal, $tc:$fg, $c:$bg, $style: flat, $always_dark: true); + + @if $contrast == 'high' { + @include draw_hc_inset(); + } + } + + &:focus .overview-icon { @include button(focus, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);} + &:hover .overview-icon { @include button(hover, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);} + &:active .overview-icon { @include button(active, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);} + &:checked .overview-icon { @include button(checked, $tc:$fg, $c:$bg, $style: flat, $always_dark: true);} + } } // separator between pinned and running apps @@ -64,8 +85,7 @@ $dash_border_radius: $modal_radius + $dash_padding; // make sure all dash components have same margin from screen edge .dash-separator, - .dash-background, - .dash-item-container { + .dash-background { margin-bottom: $dash_edge_offset; } } diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss index d854ed01d..2a29eee9d 100644 --- a/data/theme/gnome-shell-sass/widgets/_panel.scss +++ b/data/theme/gnome-shell-sass/widgets/_panel.scss @@ -2,6 +2,7 @@ // a.k.a. the panel $privacy_indicator_color: if($variant == 'light', $orange_4, $orange_3); +$recording_indicator_color: $red_4; $transparent_panel_fg_color: $light_1; // always white for transparent lock screens $system_panel_fg_color: $system_fg_color; // always light for lockscreen, overview @@ -18,7 +19,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration // panel menus .panel-button { - @include panel_button($panel_fg_color); + @include panel_button(); -natural-hpadding: $base_padding * 2; -minimum-hpadding: $base_padding; @@ -72,11 +73,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration } &.screen-recording-indicator { - @include panel_button($screenshot_ui_button_red, $fg:$_base_color_light, $style: null); + @include panel_button($bg:$recording_indicator_color, $fg:$_base_color_light, $style: filled); } &.screen-sharing-indicator { - @include panel_button($privacy_indicator_color, $fg:$_base_color_light, $style: null); + @include panel_button($bg:$privacy_indicator_color, $fg:$_base_color_light, $style: filled); } // clock @@ -84,7 +85,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration // The clock display needs to have the background on .clock because // we want to exclude the do-not-disturb indicator from the background // see _drawing.scss for override details - @include panel_button($highlighted_child: true, $child_class:".clock"); + @include panel_button($highlighted_child: true, $child_class: '.clock'); .clock { // the highlighted child @@ -101,16 +102,15 @@ $panel_transition_duration: 250ms; // same as the overview transition duration &.unlock-screen, &.login-screen { background-color: transparent; - box-shadow: none; // unfortunate duplication to keep indicator style in these states .panel-button { &.screen-recording-indicator { - @include panel_button($screenshot_ui_button_red, $fg:$_base_color_light, $style: null); + @include panel_button($bg:$recording_indicator_color, $fg:$_base_color_light, $style: filled); } &.screen-sharing-indicator { - @include panel_button($privacy_indicator_color, $fg:$_base_color_light, $style: null); + @include panel_button($bg:$privacy_indicator_color, $fg:$_base_color_light, $style: filled); } } } @@ -119,11 +119,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration &.unlock-screen, &.login-screen { .panel-button { - @include panel_button($transparent_panel_fg_color, $fg:$transparent_panel_fg_color); + @include panel_button($fg:$transparent_panel_fg_color); // clock &.clock-display { - @include panel_button($transparent_panel_fg_color, $fg:$transparent_panel_fg_color, $highlighted_child: true, $child_class:".clock"); + @include panel_button($fg:$transparent_panel_fg_color, $highlighted_child: true, $child_class: '.clock'); } } } @@ -131,7 +131,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration // use system text styles for overview panel &:overview { .panel-button { - @include panel_button($system_panel_fg_color, $fg:$system_panel_fg_color); + @include panel_button($fg:$system_panel_fg_color); &#panelActivities .workspace-dot { background-color: $system_panel_fg_color; @@ -139,7 +139,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration // clock &.clock-display { - @include panel_button($system_panel_fg_color, $fg:$system_panel_fg_color, $highlighted_child: true, $child_class:".clock"); + @include panel_button($fg:$system_panel_fg_color, $highlighted_child: true, $child_class: '.clock'); } } }