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

style: High Contrast improvments

Browse Source 
- 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: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2527>
This commit is contained in:
Sam Hewitt 2022-11-03 12:58:24 -02:30 committed by Marge Bot
parent c998e4a123
commit aafa011f2b
21 changed files with 308 additions and 285 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
data/theme/gnome-shell-sass/_colors.scss
View File

@ -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%));

71
data/theme/gnome-shell-sass/_common.scss
View File

@ -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 {

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

@ -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);}
}

32
data/theme/gnome-shell-sass/_high-contrast-colors.scss
View File

@ -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%);

46
data/theme/gnome-shell-sass/widgets/_app-grid.scss
View File

@ -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));}
}

20
data/theme/gnome-shell-sass/widgets/_calendar.scss
View File

@ -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
}
}

20
data/theme/gnome-shell-sass/widgets/_dash.scss
View File

@ -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
}

4
data/theme/gnome-shell-sass/widgets/_dialogs.scss
View File

@ -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;

14
data/theme/gnome-shell-sass/widgets/_entries.scss
View File

@ -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;
}

46
data/theme/gnome-shell-sass/widgets/_looking-glass.scss
View File

@ -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;
}

12
data/theme/gnome-shell-sass/widgets/_message-list.scss
View File

@ -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; }

5
data/theme/gnome-shell-sass/widgets/_panel.scss
View File

@ -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 {

78
data/theme/gnome-shell-sass/widgets/_popovers.scss
View File

@ -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;
}
}
}

8
data/theme/gnome-shell-sass/widgets/_quick-settings.scss
View File

@ -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 {

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

@ -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;

19
data/theme/gnome-shell-sass/widgets/_search-entry.scss
View File

@ -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;

4
data/theme/gnome-shell-sass/widgets/_search-results.scss
View File

@ -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;

10
data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
View File

@ -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 {

9
data/theme/gnome-shell-sass/widgets/_window-picker.scss
View File

@ -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 {

14
data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss
View File

@ -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;
}

2
data/theme/toggle-off-hc.svg
View File

@ -1 +1 @@
<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -291.18)"><rect ry="11" rx="11" y="299.18" x="30" height="10" width="10" style="fill:none;fill-opacity:1;stroke:#f8f7f7;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker:none" fill="#f8f7f7" stroke-linecap="round" stroke-linejoin="round"/><rect style="fill:#fff;stroke:none;stroke-width:1;marker:none;fill-opacity:.15000001" width="48" height="26" x="-48" y="291.18" ry="13" fill="#3081e3" rx="13" transform="scale(-1 1)"/><rect ry="11" rx="11" y="293.18" x="-24" height="22" width="22" style="stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7" transform="scale(-1 1)"/></g></svg>
<svg width="48" height="26" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -291.18)"><rect ry="11" rx="11" y="299.18" x="30" height="10" width="10" style="fill:none;fill-opacity:1;stroke:#f8f7f7;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker:none" fill="#f8f7f7" stroke-linecap="round" stroke-linejoin="round"/><rect style="fill:#fff;stroke:none;stroke-width:1;marker:none;fill-opacity:.4" width="48" height="26" x="-48" y="291.18" ry="13" fill="#3081e3" rx="13" transform="scale(-1 1)"/><rect ry="11" rx="11" y="293.18" x="-24" height="22" width="22" style="stroke:none;stroke-width:.999999;marker:none" fill="#f8f7f7" transform="scale(-1 1)"/></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 710 B

After

Width:  |  Height:  |  Size: 703 B