From aafa011f2b5de997bd37542a1c933e01d3f9d5cc Mon Sep 17 00:00:00 2001 From: Sam Hewitt Date: Thu, 3 Nov 2022 12:58:24 -0230 Subject: [PATCH] style: High Contrast improvments - rework the entry style to work in both hc and normal - rework drawing functions to accommodate hc - buttons all get borders under hc now - window picker titles are more legible - alt+tab switcher tiles are visible - dash is made more visible under hc - popover menus are all more visible under hc - search results borders are improved - calendar days have a different look under hc - overview bg is completely black in hc Part-of: --- data/theme/gnome-shell-sass/_colors.scss | 27 ++-- data/theme/gnome-shell-sass/_common.scss | 71 ++++++--- data/theme/gnome-shell-sass/_drawing.scss | 150 ++++++++++-------- .../_high-contrast-colors.scss | 32 ++-- .../gnome-shell-sass/widgets/_app-grid.scss | 46 ++++-- .../gnome-shell-sass/widgets/_calendar.scss | 20 ++- .../theme/gnome-shell-sass/widgets/_dash.scss | 20 ++- .../gnome-shell-sass/widgets/_dialogs.scss | 4 +- .../gnome-shell-sass/widgets/_entries.scss | 14 +- .../widgets/_looking-glass.scss | 46 ++---- .../widgets/_message-list.scss | 12 +- .../gnome-shell-sass/widgets/_panel.scss | 5 +- .../gnome-shell-sass/widgets/_popovers.scss | 78 ++++----- .../widgets/_quick-settings.scss | 8 +- .../gnome-shell-sass/widgets/_screenshot.scss | 2 +- .../widgets/_search-entry.scss | 19 +-- .../widgets/_search-results.scss | 4 +- .../widgets/_switcher-popup.scss | 10 +- .../widgets/_window-picker.scss | 9 +- .../widgets/_workspace-thumbnails.scss | 14 +- data/theme/toggle-off-hc.svg | 2 +- 21 files changed, 308 insertions(+), 285 deletions(-) diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss index b83b1edf1..8ce34ff19 100644 --- a/data/theme/gnome-shell-sass/_colors.scss +++ b/data/theme/gnome-shell-sass/_colors.scss @@ -3,20 +3,20 @@ @import '_palette.scss'; -$is_highcontrast: "false"; +$is_highcontrast:false; -$_dark_base_color: darken(desaturate(#241f31, 100%), 2%); +$_dark_base_color: desaturate($dark_4, 100%); -$base_color: if($variant == 'light', #fff, $_dark_base_color); -$bg_color: if($variant == 'light', #f6f5f4, lighten($base_color, 5%)); +$base_color: if($variant == 'light', $light_1, $_dark_base_color); +$bg_color: if($variant == 'light', $light_2, lighten($base_color, 5%)); $fg_color: if($variant == 'light', transparentize(black, .2), white); -$selected_fg_color: #fff; -$selected_bg_color: #3584e4; +$selected_fg_color: $light_1; +$selected_bg_color: $blue_3; $selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%)); $borders_color: if($variant == 'light', transparentize($fg_color, .5), transparentize($fg_color, .9)); -$borders_edge: if($variant == 'light', rgba(255,255,255,0.8), lighten($bg_color, 5%)); +$outer_borders_color: if($variant == 'light', rgba(255,255,255,0.8), lighten($bg_color, 5%)); $link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%)); $link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%)); @@ -26,24 +26,20 @@ $error_color: if($variant == 'light', $red_3, $red_4); $success_color: if($variant == 'light', $green_4, $green_5); $destructive_color: $error_color; -$osd_fg_color: white; +$osd_fg_color: $light_1; $osd_bg_color: $_dark_base_color; //hardcoded for both light & dark $osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5); $osd_insensitive_fg_color: if($variant == 'light', mix($osd_fg_color, $osd_bg_color, 80%), mix($osd_fg_color, $osd_bg_color, 70%)); $osd_borders_color: transparentize(black, 0.3); -$osd_outer_borders_color: transparentize($osd_fg_color, 0.98); +$osd_outer_borders_color: transparentize($osd_fg_color, 0.9); $shadow_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(0,0,0,0.2)); // button -$button_mix_factor: 5%; - -// cards -$card_bg_color: if($variant == 'light', darken($bg_color, 5%), lighten($bg_color, 2%)); -$card_outer_borders_color: transparentize($fg_color, 0.98); +$button_mix_factor: 9%; // notifications -$bubble_buttons_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 10%)); +$bubble_buttons_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%)); // overview background color $system_bg_color: $base_color; @@ -61,7 +57,6 @@ $backdrop_insensitive_color: if($variant =='light', darken($backdrop_bg_color,15 $backdrop_borders_color: mix($borders_color, $bg_color, 90%); $backdrop_dark_fill: mix($backdrop_borders_color,$backdrop_bg_color, 35%); - // derived checked colors $checked_bg_color: if($variant=='light', darken($bg_color, 7%), lighten($bg_color, 7%)); $checked_fg_color: if($variant=='light', darken($fg_color, 7%), lighten($fg_color, 7%)); diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss index 9ca89d182..0587b1579 100644 --- a/data/theme/gnome-shell-sass/_common.scss +++ b/data/theme/gnome-shell-sass/_common.scss @@ -64,13 +64,9 @@ stage { border: 1px solid $osd_outer_borders_color; border-radius: 999px; padding: $base_padding*2; -} - -// Overview panels -// for the dash and workspace switcher -%overview_panel { - color: $osd_fg_color; - background-color: transparentize($osd_fg_color, 0.9); + @if $is_highcontrast { + border: 2px solid $hc_inset_color; + } } // icon tiles @@ -81,19 +77,14 @@ stage { border: 2px solid transparent; transition-duration: 200ms; text-align: center; -} - -// dialogs -%bubble_panel { - color: $fg_color; - background-color: $bg_color; - border-radius: $base_border_radius*1.25 + 1px; - border: 1px solid $borders_edge; + @if $is_highcontrast { + border-color: $hc_inset_color; + } } // normal button styling %button { - border-radius: $base_border_radius - 2px; // 6px + border-radius: $base_border_radius; border-style: solid; border-width: 1px; font-weight: bold; @@ -103,6 +94,7 @@ stage { &:focus { @include button(focus);} &:hover { @include button(hover);} &:insensitive { @include button(insensitive);} + &:selected, &:active { @include button(active);} &:checked { @include button(checked);} @@ -111,16 +103,30 @@ stage { &:focus { @include button(focus, $flat:true);} &:hover { @include button(hover, $flat:true);} &:insensitive { @include button(insensitive, $flat:true);} + &:selected, &:active { @include button(active, $flat:true);} &:checked { @include button(checked, $flat:true);} } } + +// normal entry style +%entry { + border-radius: $base_border_radius; + padding: $base_padding*1.5 $base_padding*1.5; + color: $fg_color; + selection-background-color: $selected_bg_color; + selected-color: $selected_fg_color; + + @include entry(normal); + &:hover { @include entry(hover);} + &:focus { @include entry(focus);} + &:insensitive { @include entry(insensitive);} +} + + // buttons in dialogs/notifications // lighter in color and have a greater radius - -$bubble_button_radius:$base_border_radius*1.25; - %bubble_button { padding: $base_padding * 2; font-weight: bold !important; @@ -136,25 +142,25 @@ $bubble_button_radius:$base_border_radius*1.25; &:checked { @include button(checked, $c:$bubble_buttons_color);} &:first-child:ltr { - border-radius: 0 0 0 $bubble_button_radius; + border-radius: 0 0 0 $modal_radius; } &:last-child:ltr { - border-radius: 0 0 $bubble_button_radius 0; + border-radius: 0 0 $modal_radius; margin-right: 0 !important; } &:first-child:rtl { - border-radius: 0 0 $bubble_button_radius 0; + border-radius: 0 0 $modal_radius; } &:last-child:rtl { - border-radius: 0 0 0 $bubble_button_radius; + border-radius: 0 0 0 $modal_radius; margin-left: 0 !important; } &:first-child:last-child { - border-radius: 0 0 $bubble_button_radius $bubble_button_radius !important; + border-radius: 0 0 $modal_radius; margin-left: 0 !important; margin-right: 0 !important; } @@ -171,6 +177,23 @@ $bubble_button_radius:$base_border_radius*1.25; &:outlined,&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color);} } + +// tooltip +%tooltip { + background-color: $osd_bg_color; + color: $osd_fg_color; + border:1px solid $osd_outer_borders_color; + border-radius: 99px; + padding: $base_padding $base_padding * 2; + text-align: center; + + @if $is_highcontrast { + background-color: $osd_bg_color; + color: $osd_fg_color; + border: 1px solid $hc_inset_color; + } +} + /* General Typography */ %large_title { diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss index 7c8959e2c..2ec84f243 100644 --- a/data/theme/gnome-shell-sass/_drawing.scss +++ b/data/theme/gnome-shell-sass/_drawing.scss @@ -2,7 +2,7 @@ // generic drawing of more complex things -@function draw_widget_edge($c:$borders_edge) { +@function draw_widget_edge($c:$outer_borders_color) { // outer highlight "used" on most widgets @return 0 1px $c; } @@ -35,29 +35,31 @@ // possible $t values: // normal, focus, insensitive // + transition-duration: 100ms; @if $t==normal { - background-color: lighten($bg_color, 5%); + background-color: transparentize($fg_color, 0.9); color: transparentize($fg_color,0.3); - border: 2px solid lighten($bg_color, 5%); + + @if $is_highcontrast { + box-shadow: inset 0 0 0 1px $hc_inset_color; + } } @if $t==focus { - background-color: mix(lighten($bg_color, 5%), $selected_bg_color, 95%); - border-color: $fc; + background-color: mix(transparentize($fg_color, 0.8), $selected_bg_color, 95%); + box-shadow: inset 0 0 0 2px $fc; color: $fg_color; &:hover {} } @if $t==hover { - background-color:lighten($hover_bg_color, 5%); - border-color:lighten($hover_bg_color, 5%); - color: transparentize($fg_color,0.3); + background-color:transparentize($fg_color, 0.8); + color: inherit; } @if $t==insensitive { - background-color:lighten($insensitive_bg_color, 5%); - border-color: lighten($insensitive_bg_color, 5%); + background-color:transparentize($insensitive_fg_color, 0.8); color: $insensitive_fg_color; } } @@ -155,11 +157,34 @@ @if $flat { background-color: transparent; } - @if $is_highcontrast == "true" { - box-shadow: inset 0 0 0 1px $button_inset_color; + @if $is_highcontrast { + box-shadow: inset 0 0 0 1px $hc_inset_color; } } + // hover button + @else if $t==hover { + color: $tc; + background-color: lighten($button_bg_color, 3%); + @if $is_highcontrast { + box-shadow: inset 0 0 0 1px $hc_inset_color !important; + } + } + + // active button + @else if $t==active { + color: $tc; + background-color: lighten($button_bg_color, 9%); + } + + // checked button + @else if $t==checked { + color: $tc; + background-color: lighten($button_bg_color, 9%); + &:hover { background-color: lighten($button_bg_color, 12%);} + &:active { background-color: lighten($button_bg_color, 15%);} + } + // focused button @if $t==focus { color: $tc; @@ -175,57 +200,21 @@ } } - // hover button - @else if $t==hover { - color: $tc; - background-color: lighten($button_bg_color, 3%); - - @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%); - } - } - - // active button - @else if $t==active { - color: $tc; - background-color: 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%); - } - } - - // checked button - @else if $t==checked { - color: $tc; - background-color: 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%); - } - &:hover { background-color: lighten($button_bg_color, 12%);} - &:active { background-color: lighten($button_bg_color, 15%);} - } - // insensitive button @else if $t==insensitive { color: transparentize($tc, 0.5); background-color: transparentize($tc, .95); - @if $is_highcontrast == "true" { - box-shadow: inset 0 0 0 1px transparentize($button_inset_color, 0.5); - } } // default/suggested button @else if $t==default { background-color: $selected_bg_color; color: $selected_fg_color; - box-shadow: none; + &:focus { - box-shadow: inset 0 0 0 2px lighten($selected_bg_color, 10%); + box-shadow: inset 0 0 0 2px transparentize($selected_fg_color, .4) !important; } - &:hover, &:focus { + &:hover, &:focus { background-color: lighten($selected_bg_color, 5%); color: lighten($selected_fg_color, 5%); } @@ -260,6 +249,9 @@ background-color: transparent; } @else { background-color: transparentize($color, .84); + @if $is_highcontrast { + box-shadow: inset 999px 0 0 0 transparentize($color, .2); // bit of a hack + } } &:hover { background-color: transparentize($color, .9);} &:selected, &:focus { @@ -282,11 +274,15 @@ // overview icon, dash, app grid @mixin overview_icon($color, $flat: true) { transition-duration: 400ms; - .overview-icon { @extend %tile; } + .overview-icon { + @extend %tile; + } @if $flat { .overview-icon { background-color: transparent;} } @else { - .overview-icon { background-color: transparentize($color, .81);} + .overview-icon { + background-color: transparentize($color, .93); + } } &:hover .overview-icon { background-color: transparentize($color, .9);} @@ -311,26 +307,44 @@ // styling for elements within popovers that look like notifications @mixin card($flat: false) { - border-radius: $base_border_radius; + border-radius: $base_border_radius*1.5; margin: $base_margin; - box-shadow: inset 0 0 0 1px $card_outer_borders_color; @if $flat { @include button(undecorated); box-shadow: none !important; } @else { - @include button(normal, $c:$card_bg_color); - } - - &:focus { - @include button(focus, $c:$card_bg_color); - } - - &:hover { - @include button(hover, $c:$card_bg_color); - } - - &:active { - @include button(active, $c:$card_bg_color); + @include button(normal); } + &:hover {@include button(hover);} + &:active {@include button(active);} + &:focus {@include button(focus);} +} + +// styling for elements within popovers that look like notifications +@mixin menuitem($bg, $flat: true) { + + // lighten the background color always + $bg: lighten($bg,5%); + + font-weight: normal; + spacing: $base_padding; + transition-duration: 100ms; + padding: $base_padding*1.5 $base_padding*2; + + &:ltr {padding-left: $base_padding;} + &:rtl {padding-right: $base_padding;} + + @if $flat { + @include button(undecorated); + box-shadow: none !important; + } @else { + @include button(normal, $c:$bg); + } + &:focus, + &:hover { + @include button(hover, $c:$bg); + } + &:active {@include button(active, $c:$bg);} + &:checked {@include button(checked, $c:$bg);} } diff --git a/data/theme/gnome-shell-sass/_high-contrast-colors.scss b/data/theme/gnome-shell-sass/_high-contrast-colors.scss index 15fdec3ec..4d9aafdd7 100644 --- a/data/theme/gnome-shell-sass/_high-contrast-colors.scss +++ b/data/theme/gnome-shell-sass/_high-contrast-colors.scss @@ -3,18 +3,18 @@ @import '_palette.scss'; -$is_highcontrast: 'true'; +$is_highcontrast:true; -$base_color: if($variant == 'light', #fff, #000); -$bg_color: $base_color; +$base_color: if($variant == 'light', white, black); +$bg_color: if($variant == 'light', darken($base_color, 10%), lighten($base_color, 10%)); $fg_color: if($variant == 'light', transparentize(black, .2), white); -$selected_fg_color: #ffffff; +$selected_fg_color: white; $selected_bg_color: $blue_3; $selected_borders_color: darken($selected_bg_color, 20%); -$borders_color: lighten($bg_color,17%); -$borders_edge: $borders_color; +$borders_color: if($variant == 'light', transparentize($fg_color, .5), transparentize($fg_color, .7)); +$outer_borders_color: $borders_color; $link_color: lighten($selected_bg_color,20%); $link_visited_color: lighten($selected_bg_color,10%); @@ -27,24 +27,22 @@ $osd_fg_color: white; $osd_bg_color: $base_color; $osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5); $osd_insensitive_fg_color: if($variant == 'light', mix($osd_fg_color, $osd_bg_color, 80%), mix($osd_fg_color, $osd_bg_color, 70%)); -$osd_borders_color: $osd_bg_color; -$osd_outer_borders_color: $osd_bg_color; +$osd_borders_color: transparentize($osd_fg_color, 0.8); +$osd_outer_borders_color: $osd_borders_color; -$shadow_color: transparent; +$shadow_color: rgba(0,0,0,0); + +// hc +$hc_inset_color: transparentize($fg_color, 0.7); // button -$button_inset_color: transparentize($fg_color, 0.8); -$button_mix_factor: 10%; - -// cards -$card_bg_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 12%)); -$card_outer_borders_color: $card_bg_color; +$button_mix_factor: 20%; // notifications -$bubble_buttons_color: if($variant == 'light', darken($bg_color, 22%), lighten($bg_color, 31%)); +$bubble_buttons_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%)); // overview background color -$system_bg_color: lighten($base_color, 17%); +$system_bg_color: black; //insensitive state derived colors $insensitive_fg_color: mix($fg_color, $bg_color, 50%); diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss b/data/theme/gnome-shell-sass/widgets/_app-grid.scss index 9da650cf9..31d43829e 100644 --- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss +++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss @@ -20,7 +20,10 @@ $app_icon_size: 96px; .app-well-app { @include overview_icon($osd_fg_color); - .overview-icon { padding: $base_padding*2;} + .overview-icon { + padding: $base_padding*2; + border-radius: $base_border_radius*3; + } .overview-icon.overview-icon-with-label { > StBoxLayout { spacing: $base_padding; @@ -30,13 +33,19 @@ $app_icon_size: 96px; // app folders .app-well-app.app-folder { - @include overview_icon($osd_fg_color, $flat: false); + @include overview_icon($fg_color, $flat: false); } // expanded folder .app-folder-dialog { - border-radius: $modal_radius*2; - background-color: $dash_background_color; + border-radius: $modal_radius*4; + background-color: $bg_color; + padding: $base_padding*2; + box-shadow:inset 0 0 0 1px $outer_borders_color; + + @if $is_highcontrast { + box-shadow:inset 0 0 0 2px $hc_inset_color; + } & .folder-name-container { padding: 24px 36px 0; @@ -47,7 +56,10 @@ $app_icon_size: 96px; @extend %title_1; } - & .folder-name-entry { width: 300px } + & .folder-name-entry { + width: 12em; + border-radius: $base_border_radius*2; + } /* FIXME: this is to keep the label in sync with the entry */ & .folder-name-label { padding: 5px 7px; color: $osd_fg_color; } @@ -119,9 +131,12 @@ $app_icon_size: 96px; // shutdown and other actions in the grid .system-action-icon { background-color: rgba(0,0,0,0.8); - color: #fff; + color: white; border-radius: 99px; icon-size: $app_icon_size * 0.5; + @if $is_highcontrast { + box-shadow: inset 0 0 0 2px $hc_inset_color; + } } .page-navigation-hint { @@ -147,15 +162,16 @@ $app_icon_size: 96px; } .page-navigation-arrow { - & > StIcon { - margin: 6px; - padding: 18px; - width: 24px; - height: 24px; - border-radius: 99px; + margin: 6px; + padding: 18px; + width: 24px; + height: 24px; + border-radius: 99px; + @if $is_highcontrast { + @include button(normal, $osd_fg_color, transparentize($osd_bg_color, 0.5)); } - &:insensitive > StIcon { @include button(undecorated, $osd_fg_color, transparentize($osd_bg_color, 0.5));} - &:hover > StIcon { @include button(hover, $osd_fg_color, transparentize($osd_bg_color, 0.5));} - &:active > StIcon { @include button(active, $osd_fg_color, transparentize($osd_bg_color, 0.5));} + &:insensitive { @include button(undecorated, $osd_fg_color, transparentize($osd_bg_color, 0.5));} + &:hover { @include button(hover, $osd_fg_color, transparentize($osd_bg_color, 0.5));} + &:active { @include button(active, $osd_fg_color, transparentize($osd_bg_color, 0.5));} } diff --git a/data/theme/gnome-shell-sass/widgets/_calendar.scss b/data/theme/gnome-shell-sass/widgets/_calendar.scss index fa7080b44..df91dce5f 100644 --- a/data/theme/gnome-shell-sass/widgets/_calendar.scss +++ b/data/theme/gnome-shell-sass/widgets/_calendar.scss @@ -45,7 +45,6 @@ // month label .calendar-month-label { - color: lighten($fg_color,5%); @extend %heading; padding: 8px 0; } @@ -54,9 +53,12 @@ height: 32px; width: 32px; margin: 2px; - border-radius: $base_border_radius - 2px; + border-radius: $base_border_radius; &:hover, &:focus {background-color: $hover_bg_color;} &:active {background-color: $active_bg_color;} + @if $is_highcontrast { + border:1px solid $hc_inset_color; + } } } @@ -72,7 +74,7 @@ transition-duration: 100ms; @extend %numeric; @extend %smaller; - + &:hover {background-color: $hover_bg_color;} &:focus { background-color: mix($bg_color, $selected_bg_color, 80%); @@ -93,12 +95,18 @@ color: $insensitive_fg_color; padding-top: $base_padding; height: 16px !important; // force heading to be smaller height - font-weight: bold; + font-weight: 600; @extend %smaller; } } - .calendar-day {} + .calendar-day { + font-weight: 600; + @if $is_highcontrast { + border:1px solid $hc_inset_color; + border-radius: 9px; + } + } .calendar-work-day {} .calendar-nonwork-day {color: $insensitive_fg_color;} .calendar-other-month-day { @@ -142,7 +150,7 @@ margin: 6px; padding: 0 $base_padding; border-radius: 3px; - background-color: darken($bg_color, 2%); + background-color: transparentize($fg_color, 0.9); color: $insensitive_fg_color } } diff --git a/data/theme/gnome-shell-sass/widgets/_dash.scss b/data/theme/gnome-shell-sass/widgets/_dash.scss index 8f5d5f939..350e4126f 100644 --- a/data/theme/gnome-shell-sass/widgets/_dash.scss +++ b/data/theme/gnome-shell-sass/widgets/_dash.scss @@ -35,17 +35,24 @@ $dash_border_radius: $modal_radius + $dash_padding; padding: $dash_padding; spacing: $base_padding; margin-bottom: $dash_padding; + box-shadow: inset 0 0 0 1px $outer_borders_color; + + @if $is_highcontrast { + border: 2px solid $hc_inset_color; + box-shadow:none; + } } // items on the dash .dash-item-container { > * {margin: 0 2px;} - &:ltr:first-child {margin-left: 0;} - &:rtl:first-child {margin-right: 0;} + &:ltr{&:first-child {margin-left: 0;}} + &:rtl{&:first-child {margin-right: 0;}} // each app item on the dash .app-well-app .overview-icon { padding: $base_padding; + border-radius: $base_border_radius*2; } // show apps button @@ -62,14 +69,13 @@ $dash_border_radius: $modal_radius + $dash_padding; margin: 0 $base_margin; background-color: $borders_color; margin-bottom: $dash_padding; + @if $is_highcontrast { + width: 2px; + } } // OSD Tooltip .dash-label { - color: $osd_fg_color; - background-color: $osd_bg_color; - border-radius: 99px; - padding: $base_padding $base_padding * 2; - text-align: center; + @extend %tooltip; -y-offset: $base_margin * 2; // distance from the dash edge } diff --git a/data/theme/gnome-shell-sass/widgets/_dialogs.scss b/data/theme/gnome-shell-sass/widgets/_dialogs.scss index defa20b38..98b3b8ce5 100644 --- a/data/theme/gnome-shell-sass/widgets/_dialogs.scss +++ b/data/theme/gnome-shell-sass/widgets/_dialogs.scss @@ -5,7 +5,9 @@ } .modal-dialog { - @extend %bubble_panel; + background-color: $bg_color; + border-radius: $modal_radius; + box-shadow: inset 0 0 0 1px $outer_borders_color; .modal-dialog-content-box { margin: 32px 40px; diff --git a/data/theme/gnome-shell-sass/widgets/_entries.scss b/data/theme/gnome-shell-sass/widgets/_entries.scss index 6be67609e..ed65b7876 100644 --- a/data/theme/gnome-shell-sass/widgets/_entries.scss +++ b/data/theme/gnome-shell-sass/widgets/_entries.scss @@ -1,20 +1,10 @@ /* Entries */ StEntry { - border-radius: $base_border_radius; - padding: 8px; - color: $fg_color; - - @include entry(normal); - &:hover { @include entry(hover);} - &:focus { @include entry(focus);} - &:insensitive { @include entry(insensitive);} - - selection-background-color: $selected_bg_color; - selected-color: $selected_fg_color; + @extend %entry; StIcon.capslock-warning { - icon-size: 16px; + icon-size: $base_icon_size; warning-color: $warning_color; padding: 0 4px; } diff --git a/data/theme/gnome-shell-sass/widgets/_looking-glass.scss b/data/theme/gnome-shell-sass/widgets/_looking-glass.scss index 00630c332..adcc372d6 100644 --- a/data/theme/gnome-shell-sass/widgets/_looking-glass.scss +++ b/data/theme/gnome-shell-sass/widgets/_looking-glass.scss @@ -2,15 +2,22 @@ // Dialog #LookingGlassDialog { - background-color: $osd_bg_color; + background-color: transparentize($bg_color,0.05); border-radius: 0 0 $modal_radius $modal_radius; + border: 1px solid $outer_borders_color; border-top-width: 0; - border: 1px solid $osd_outer_borders_color; - color: $osd_fg_color; + color: $fg_color; padding: $base_padding; spacing: $base_padding; box-shadow: 0 2px 4px 0 $shadow_color; + @if $is_highcontrast { + border: 2px solid $hc_inset_color; + background-color: $bg_color; + border-top-width: 0; + box-shadow:none; + } + & > #Toolbar { border: none; padding: $base_padding; @@ -33,25 +40,8 @@ .notebook-tab { -natural-hpadding: $base_padding*2; -minimum-hpadding: $base_padding*2; - - font-weight: bold; + @extend %button; padding: $base_padding $base_padding*2; - color: darken($osd_fg_color, 15%); - transition-duration: 100ms; - box-shadow:none; - border:none; - border-radius: $base_border_radius - 2px; - background-color: transparent; - - &:hover { - color: $osd_fg_color; - background-color: transparentize($osd_fg_color, 0.95); - } - - &:selected { - color: $osd_fg_color; - background-color: transparentize($osd_fg_color, 0.9); - } } StBoxLayout#EvalBox { padding: 4px; spacing: $base_padding; padding: $base_padding; } @@ -61,12 +51,8 @@ .lg-dialog { StEntry { - background-color: transparentize(lighten($osd_bg_color, 5%), 0.4); - color: $osd_fg_color; - border-color: transparentize($osd_fg_color, 0.8); min-height: 22px; - selection-background-color: $selected_bg_color; - selected-color: $selected_fg_color; + @extend %entry; } .shell-link { @@ -94,10 +80,10 @@ } .lg-obj-inspector-button { - border: 1px solid $osd_borders_color; + border: 1px solid $borders_color; padding: 4px; border-radius: $base_border_radius; - &:hover { border: 1px solid #ffffff; } + &:hover { border: 1px solid $fg_color; } } // Extensions @@ -123,8 +109,8 @@ // Inspector #LookingGlassPropertyInspector { - background: $osd_bg_color; - border: 1px solid $osd_borders_color; + background: $bg_color; + border: 1px solid $borders_color; border-radius: $base_border_radius; padding: $base_padding; } diff --git a/data/theme/gnome-shell-sass/widgets/_message-list.scss b/data/theme/gnome-shell-sass/widgets/_message-list.scss index 5196661c1..d0e5d8551 100644 --- a/data/theme/gnome-shell-sass/widgets/_message-list.scss +++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss @@ -143,6 +143,11 @@ border-radius: $base_border_radius; color: $fg_color; + @if $is_highcontrast { + border: 1px solid $hc_inset_color; + margin: $base_padding*2 2px; + } + // colors are lightened since the media controls are in a card &:hover { background-color: lighten($hover_bg_color, 5%); @@ -154,7 +159,12 @@ color: $fg_color; } - &:insensitive { color: lighten($insensitive_fg_color, 5%); } + &:insensitive { + color: lighten($insensitive_fg_color, 5%); + @if $is_highcontrast { + border-color: transparent; + } + } // fix margin for last button &:last-child:ltr { margin-right: $base_margin*3; } diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss index fd3e7d2da..487eb0f5b 100644 --- a/data/theme/gnome-shell-sass/widgets/_panel.scss +++ b/data/theme/gnome-shell-sass/widgets/_panel.scss @@ -41,6 +41,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration &.screen-recording-indicator { box-shadow: inset 0 0 0 100px $screenshot_ui_button_red; } + &.screen-sharing-indicator { box-shadow: inset 0 0 0 100px $warning_color; StBoxLayout { margin: 0 $base_padding; } @@ -94,7 +95,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.1); } } - + &:active:hover, &:overview:hover, &:focus:hover, &:checked:hover { box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.75); &.clock-display { @@ -174,7 +175,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.1); } } - + &:active:hover, &:overview:hover, &:focus:hover, &:checked:hover { box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.2); &.clock-display { diff --git a/data/theme/gnome-shell-sass/widgets/_popovers.scss b/data/theme/gnome-shell-sass/widgets/_popovers.scss index 138a4fc0f..6ab20c21b 100644 --- a/data/theme/gnome-shell-sass/widgets/_popovers.scss +++ b/data/theme/gnome-shell-sass/widgets/_popovers.scss @@ -1,5 +1,11 @@ /* Popovers/Menus */ +$menu_bg_color: $bg_color; +$menuitem_bg_color: lighten($menu_bg_color, 4%); +$menuitem_border_radius: $base_border_radius*1.5; + +$submenu_bg_color: lighten($menu_bg_color, 7%); + // the popover itself .popup-menu-boxpointer { -arrow-rise: $base_margin+2px; // distance from the panel & screen edge @@ -19,45 +25,27 @@ // popover content .popup-menu-content { padding: $base_padding; - border-radius: $modal_radius*1.25; - border: 1px solid $borders_edge; - box-shadow: 0 2px 4px 0 $shadow_color; background-color: $bg_color; + border-radius: $modal_radius*1.25; + border: 1px solid $outer_borders_color; + box-shadow: 0 2px 4px 0 $shadow_color; } // menu items .popup-menu-item { - padding: $base_padding*1.5 $base_padding*2; - border-radius: $base_border_radius*1.5; - spacing: $base_padding; - transition-duration: 100ms; - background-color: transparent; + @include menuitem($bg:$menu_bg_color); - &:ltr {padding-left: $base_padding;} - &:rtl {padding-right: $base_padding;} - - &:focus, &:hover { - background-color: $hover_bg_color !important; - &:active { background-color: $active_bg_color !important;} - } - - &:checked {background-color: $checked_bg_color !important;} + border-radius: $menuitem_border_radius; &:checked { - margin-bottom: 0; - box-shadow: inset 0 -1px 0 0 darken($checked_bg_color, 5%); - border-radius: $base_border_radius $base_border_radius 0 0; - &:focus,&:hover { background-color: lighten($checked_bg_color, 3%) !important;} - &:active { background-color: lighten($checked_bg_color, 5%) !important;} - } + border-radius: $menuitem_border_radius $menuitem_border_radius 0 0 !important; - &:active { - background-color: lighten($active_bg_color, 5%); - color: $active_fg_color; + @if $is_highcontrast { + border: 1px solid $hc_inset_color; + border-bottom-width:0; + } } - &:insensitive {color: transparentize($fg_color,0.5);} - // add margin to switches in menu items .toggle-switch { &:ltr { margin-left: $base_margin;} @@ -78,14 +66,14 @@ icon-size: 16px !important; // for some reason the variable doesn't work here } -.popup-menu-arrow { -} - - // popover submenus .popup-sub-menu { - background-color: $checked_bg_color; - border-radius: 0 0 $base_border_radius $base_border_radius; + border-radius: 0 0 $menuitem_border_radius+1px $menuitem_border_radius+1px; + margin-bottom: $base_padding; + + @if $is_highcontrast { + border: 1px solid $hc_inset_color; + } .popup-menu-ornament { min-width: $base_icon_size !important; @@ -94,18 +82,13 @@ // submenu specific styles .popup-menu-item { border-radius: 0; - margin: 0; + @include menuitem($bg:$submenu_bg_color, $flat:false); + border-top-width:0; &:last-child { - border-radius: 0 0 $base_border_radius $base_border_radius; + border-radius: 0 0 $menuitem_border_radius $menuitem_border_radius; + border-bottom-width:0; } - - &:focus,&:hover { background-color: $hover_bg_color !important;} - &:checked { - background-color: $checked_bg_color !important; - &:focus,&:hover { background-color: lighten($checked_bg_color, 8%) !important;} - } - &:active { background-color: $active_bg_color !important;} } .popup-menu-section { @@ -113,7 +96,7 @@ &:hover,&:focus { border-radius: 0;} } &:last-child .popup-menu-item:last-child { - border-radius: 0 0 $base_border_radius $base_border_radius; + border-radius: 0 0 $menuitem_border_radius $menuitem_border_radius; } } } @@ -130,10 +113,7 @@ // separator .popup-separator-menu-item { - margin: 6px 0; - padding:0 !important; - &:ltr { margin-right: $base_margin;} - &:rtl { margin-left: $base_margin;} + border:none !important; .popup-separator-menu-item-separator { height: 1px; //not really the whole box @@ -153,7 +133,7 @@ &:rtl { margin-left: 2.5em;} .popup-separator-menu-item-separator { - background-color: lighten($borders_color, 7%); + background-color: $borders_color; } } } diff --git a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss index b429a2dc5..00bd69adc 100644 --- a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss +++ b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss @@ -19,7 +19,7 @@ min-height: 40px; border:none; - &:checked { @include button(default); } + &:checked { @include button(default, $c:$selected_bg_color); } & > StBoxLayout { spacing: $base_padding; } @@ -65,7 +65,7 @@ } .quick-toggle-menu { - background-color: $card_bg_color; + @include card; border-radius: $base_border_radius*3; padding: $base_padding*2; margin: $base_padding*2 $base_padding*3 0; @@ -81,9 +81,9 @@ icon-size: $base_icon_size*1.5; // a non-standard symbolic size but ok border-radius: 999px; padding: 1.5 * $base_padding; - background-color: lighten($bg_color, 10%); + background-color: transparentize($fg_color, 0.8); - &.active { background-color: $selected_bg_color; } + &.active { background-color: $selected_bg_color;} } & .title { diff --git a/data/theme/gnome-shell-sass/widgets/_screenshot.scss b/data/theme/gnome-shell-sass/widgets/_screenshot.scss index 150f273b4..a5d0b6a51 100644 --- a/data/theme/gnome-shell-sass/widgets/_screenshot.scss +++ b/data/theme/gnome-shell-sass/widgets/_screenshot.scss @@ -135,7 +135,7 @@ $screenshot_ui_button_red: $error_color; } .screenshot-ui-window-selector { - background-color: $system_bg_color; + @extend %osd_panel; .screenshot-ui-window-selector-window-container { margin: 100px; diff --git a/data/theme/gnome-shell-sass/widgets/_search-entry.scss b/data/theme/gnome-shell-sass/widgets/_search-entry.scss index faca50e4a..4ae86187f 100644 --- a/data/theme/gnome-shell-sass/widgets/_search-entry.scss +++ b/data/theme/gnome-shell-sass/widgets/_search-entry.scss @@ -1,24 +1,11 @@ // Search entry - -$search_entry_width: 320px; -$search_entry_height: 36px; - -%search_entry, .search-entry { - border-radius: $search_entry_height * 0.5; // half the height - - margin-top: $base_padding * 2; + border-radius: 99px; + margin-top: $base_padding*2; margin-bottom: $base_padding; - padding: $base_padding+1 $base_padding+3; - width: $search_entry_width; - - @include entry(normal); - &:hover { @include entry(hover);} - &:focus { @include entry(focus);} - &:insensitive { @include entry(insensitive);} + width: 24em; .search-entry-icon { - color: inherit; icon-size: $base_icon_size; margin-top: 2px; // center vertically padding: 0 4px; diff --git a/data/theme/gnome-shell-sass/widgets/_search-results.scss b/data/theme/gnome-shell-sass/widgets/_search-results.scss index 644c53db5..b7d72c9b6 100644 --- a/data/theme/gnome-shell-sass/widgets/_search-results.scss +++ b/data/theme/gnome-shell-sass/widgets/_search-results.scss @@ -15,7 +15,7 @@ spacing: $base_padding*3; // separator (unstyled) - .search-section-separator { + .search-section-separator { height: $base_margin*2; // use it as a spacer background-color: transparent; } @@ -25,7 +25,7 @@ .search-section-content { background-color: lighten($system_bg_color, 5%); border-radius: $modal_radius*1.5; - border: 1px solid $osd_outer_borders_color; + box-shadow:inset 0 0 0 1px solid $outer_borders_color; color: $osd_fg_color; padding: $base_padding*2; margin:0 $base_margin*3; diff --git a/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss b/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss index cec6c9aab..5136c3cfe 100644 --- a/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss +++ b/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss @@ -1,8 +1,7 @@ /* App Switcher */ // same as dash -$switcher_padding: $base_padding + 4px; // 10px -$switcher_border_radius: $modal_radius + 8px; +$switcher_padding: $base_padding*2; // the full screen container of the switcher @@ -15,8 +14,8 @@ $switcher_border_radius: $modal_radius + 8px; .switcher-list { @extend %osd_panel; padding: $switcher_padding; - border-radius: $switcher_border_radius; - box-shadow: 0 8px 8px 0 rgba(0,0,0,0.1); + border-radius: $modal_radius+$switcher_padding; + box-shadow: 0 8px 8px 0 $shadow_color; // container for items in list .switcher-list-item-container { @@ -28,6 +27,9 @@ $switcher_border_radius: $modal_radius + 8px; @include tile_button($osd_fg_color); // override over style so mouse doesn't steal focus &:hover {background: none;} + @if $is_highcontrast { + box-shadow: inset 0 0 0 999px transparentize($hc_inset_color,0.2); + } } .separator { diff --git a/data/theme/gnome-shell-sass/widgets/_window-picker.scss b/data/theme/gnome-shell-sass/widgets/_window-picker.scss index 9067a6d4e..1847250b8 100644 --- a/data/theme/gnome-shell-sass/widgets/_window-picker.scss +++ b/data/theme/gnome-shell-sass/widgets/_window-picker.scss @@ -17,10 +17,7 @@ $window_close_button_padding: 3px; // Window titles .window-caption { - color: $osd_fg_color; - background-color: lighten($osd_bg_color, 5%); - border-radius: 99px; - padding: $base_padding $base_padding * 2; + @extend %tooltip; } // Close button @@ -43,6 +40,10 @@ $window_close_button_padding: 3px; &:active { background-color: lighten($window_close_button_color, 13%); } + + @if $is_highcontrast { + border:2px solid $outer_borders_color; + } } .workspace-background { diff --git a/data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss b/data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss index 0a1867cc8..ecbbc4113 100644 --- a/data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss +++ b/data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss @@ -7,8 +7,14 @@ padding: $base_padding; .workspace-thumbnail { - @extend %overview_panel; - border-radius: 3px; + color: $osd_fg_color; + background-color: lighten($system_bg_color, 10%); + border-radius: $base_border_radius*0.5; + border: 1px solid transparent; + + @if $is_highcontrast { + border-color: $hc_inset_color; + } } // drag and drop indicator @@ -22,7 +28,5 @@ // selected indicator .workspace-thumbnail-indicator { border: 3px solid $selected_bg_color; - border-radius: 3px; - padding: 0px; - // background-color: transparentize($selected_bg_color, 0.9); + border-radius: $base_border_radius; } diff --git a/data/theme/toggle-off-hc.svg b/data/theme/toggle-off-hc.svg index 036794f51..26528005f 100644 --- a/data/theme/toggle-off-hc.svg +++ b/data/theme/toggle-off-hc.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file