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

style: Light variant fixes and accommodations

Browse Source 
- Fixing things where the wrong colors bleed through or the colors are inconsistent.
- expand colors definitions for system colours
- add overrides to styles for overview and lockscreen
- update drawing functions to better use new colours
- rework entry drawing css

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2515>
This commit is contained in:
Sam Hewitt 2022-10-13 14:21:17 -02:30 committed by Sam Hewitt
parent d7d26e8c59
commit beb77f5824
22 changed files with 299 additions and 203 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,66 +5,70 @@
$is_highcontrast:false;
// base color for light theme
$_dark_base_color: desaturate($dark_4, 100%);
$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);
$fg_color: if($variant == 'light', $_dark_base_color, white);
$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, 20%));
$borders_color: if($variant == 'light', transparentize($fg_color, .5), transparentize($fg_color, .9));
$outer_borders_color: if($variant == 'light', rgba(255,255,255,0.8), lighten($bg_color, 5%));
$borders_color: if($variant == 'light', transparentize($fg_color, .85), transparentize($fg_color, .9));
$outer_borders_color: if($variant == 'light', darken($bg_color, 7%), 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%));
$warning_color: if($variant == 'light', $yellow_5, #cd9309);
$warning_color: if($variant == 'light', $yellow_5, $yellow_3);
$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: $light_1;
$osd_bg_color: $_dark_base_color; //hardcoded for both light & dark
// color definitions for OSD elements
$osd_fg_color: if($variant == 'light', $_dark_base_color, $light_1);
$osd_bg_color: if($variant == 'light', $light_3, lighten($_dark_base_color, 5%));
// derived osd colors
$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.9);
$osd_insensitive_fg_color: mix($osd_fg_color, $osd_bg_color, 70%);
$osd_borders_color: transparentize($osd_fg_color, 0.9);
$osd_outer_borders_color: transparentize($osd_fg_color, 0.98);
$shadow_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(0,0,0,0.2));
$shadow_color: if($variant == 'light', rgba(0,0,0,.05), rgba(0,0,0,0.2));
// button
$button_mix_factor: 9%;
// buttons
$button_mix_factor: if($variant == 'light', 12%, 9%);
// notifications
$bubble_buttons_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%));
// overview background color
$system_bg_color: $base_color;
// color definitions for system elements (e.g. the overview)
$system_base_color: $_dark_base_color; // always dark
$system_fg_color: $light_2;
//insensitive state derived colors
$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
// derived system colors
$system_bg_color: lighten($system_base_color, 5%);
$system_borders_color: transparentize($system_fg_color, .9);
$system_insensitive_fg_color: mix($system_fg_color, $system_bg_color, 50%);
$system_overlay_bg_color: mix($system_base_color, $system_fg_color, 90%); // for non-transparent items, e.g. dash
// derived global colors
// insensitive state
$insensitive_fg_color: if($variant == 'light', mix($fg_color, $bg_color, 60%), mix($fg_color, $bg_color, 50%));
$insensitive_bg_color: mix($bg_color, $base_color, 60%);
$insensitive_borders_color: mix($borders_color, $base_color, 60%);
//colors for the backdrop state, derived from the main colors.
$backdrop_base_color: if($variant =='light', darken($base_color,1%), lighten($base_color,1%));
$backdrop_bg_color: $bg_color;
$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 80%);
$backdrop_insensitive_color: if($variant =='light', darken($backdrop_bg_color,15%), lighten($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 state
$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%));
// derived hover colors
$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 10%));
$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 10%));
// hover state
$hover_bg_color: if($variant=='light', darken($bg_color,9%), lighten($bg_color, 10%));
$hover_fg_color: if($variant=='light', darken($fg_color,9%), lighten($fg_color, 10%));
// derived active colors
$active_bg_color: if($variant=='light', darken($bg_color, 5%), lighten($bg_color, 12%));
$active_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 12%));
// active state
$active_bg_color: if($variant=='light', darken($bg_color, 11%), lighten($bg_color, 12%));
$active_fg_color: if($variant=='light', darken($fg_color, 11%), lighten($fg_color, 12%));

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

@ -57,18 +57,6 @@ stage {
/* Common Stylings */
// osd panels
%osd_panel {
color: $osd_fg_color;
background-color: $osd_bg_color;
border: 1px solid $osd_outer_borders_color;
border-radius: 999px;
padding: $base_padding*2;
@if $is_highcontrast {
border: 2px solid $hc_inset_color;
}
}
// icon tiles
%tile {
border-radius: $base_border_radius * 2; // 16px
@ -77,19 +65,24 @@ stage {
border: 2px solid transparent;
transition-duration: 200ms;
text-align: center;
color: inherit;
@if $is_highcontrast {
border-color: $hc_inset_color;
}
}
// normal button styling
%button {
%button_common {
border-radius: $base_border_radius;
border-style: solid;
border-width: 1px;
font-weight: bold;
padding: $base_padding*.5 $base_padding*4;
}
%button {
@extend %button_common;
@include button(normal);
&:focus { @include button(focus);}
&:hover { @include button(hover);}
@ -111,19 +104,24 @@ stage {
// normal entry style
%entry {
%entry_common {
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);}
}
%entry {
@extend %entry_common;
@include entry(normal, $c:$fg_color);
&:hover { @include entry(hover, $c:$fg_color);}
&:focus { @include entry(focus, $c:$fg_color);}
&:insensitive { @include entry(insensitive, $c:$fg_color);}
StLabel.hint-text {
color: transparentize($fg_color, 0.3);
}
}
// buttons in dialogs/notifications
// lighter in color and have a greater radius
@ -166,36 +164,21 @@ stage {
}
}
// buttons on OSD elements
// that are undecorated by default and use OSD colors
%osd_button {
@include button(undecorated);
&:insensitive { @include button(undecorated, $tc:$osd_fg_color, $c:$osd_bg_color);}
&:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color);}
&:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color);}
&:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color);}
&: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;
background-color: transparentize(black, 0.1);
color: $light_1;
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;
border-color: $hc_inset_color;
}
}
/* General Typography */
%large_title {
font-weight: 300;
@include fontsize(24);
@ -243,3 +226,68 @@ stage {
%monospace {font-family: monospace;}
%numeric { font-feature-settings: "tnum";}
/* OSD Elements */
%osd_panel {
color: $osd_fg_color;
background-color: $osd_bg_color;
border: 1px solid $osd_outer_borders_color;
border-radius: 999px;
padding: $base_padding*2;
@if $is_highcontrast {
border: 2px solid $hc_inset_color;
}
}
// entries
%osd_entry {
@extend %entry_common;
@include entry(normal, $c:$osd_fg_color,);
&:hover { @include entry(hover, $c:$osd_fg_color,);}
&:focus { @include entry(focus, $c:$osd_fg_color,);}
&:insensitive { @include entry(insensitive, $c:$osd_fg_color,);}
StLabel.hint-text {color: transparentize($osd_fg_color, 0.3); }
}
// buttons on OSD elements
%osd_button {
@extend %button_common;
@include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color);
&:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color);}
&:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color);}
&:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color);}
&:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color);}
&:outlined,&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color);}
}
%osd_button_flat {
@extend %osd_button;
@include button(undecorated);
&:insensitive { @include button(undecorated, $tc:$osd_fg_color, $c:$osd_bg_color);}
}
/* System Elements */
// entries
%system_entry {
@extend %entry_common;
@include entry(normal, $c:$system_fg_color,);
&:hover { @include entry(hover, $c:$system_fg_color,);}
&:focus { @include entry(focus, $c:$system_fg_color,);}
&:insensitive { @include entry(insensitive, $c:$system_fg_color,);}
StLabel.hint-text { color: transparentize($system_fg_color, 0.3);}
}
// buttons
%system_button {
@include button(normal, $tc:$system_fg_color, $c:$system_bg_color);
&:insensitive { @include button(insensitive, $tc:$system_fg_color, $c:$system_bg_color);}
&:focus { @include button(focus, $tc:$system_fg_color, $c:$system_bg_color);}
&:hover { @include button(hover, $tc:$system_fg_color, $c:$system_bg_color);}
&:active { @include button(active, $tc:$system_fg_color, $c:$system_bg_color);}
&:outlined,&:checked { @include button(checked, $tc:$system_fg_color, $c:$system_bg_color);}
}

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

@ -23,23 +23,22 @@
@else { box-shadow: $shadow1; }
}
// entries
@mixin entry($t, $fc:$selected_bg_color) {
// Text entries
@mixin entry($t, $c) {
//
// Entries drawing function
//
// $t: entry type
// $fc: focus color
// $c: text color, used to derive background color of entries
//
// possible $t values:
// normal, focus, insensitive
// possible $t values: normal, focus, insensitive
//
transition-duration: 100ms;
@if $t==normal {
background-color: transparentize($fg_color, 0.9);
color: transparentize($fg_color,0.3);
background-color: transparentize($c, 0.85);
color: transparentize($c,0.3);
@if $is_highcontrast {
box-shadow: inset 0 0 0 1px $hc_inset_color;
@ -47,20 +46,19 @@
}
@if $t==focus {
background-color: mix(transparentize($fg_color, 0.8), $selected_bg_color, 95%);
box-shadow: inset 0 0 0 2px $fc;
color: $fg_color;
background-color: mix(transparentize($c, 0.75), $selected_bg_color, 95%);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
color: $c;
&:hover {}
}
@if $t==hover {
background-color:transparentize($fg_color, 0.8);
color: inherit;
background-color: transparentize($c, 0.75);
}
@if $t==insensitive {
background-color:transparentize($insensitive_fg_color, 0.8);
color: $insensitive_fg_color;
background-color:transparentize($c, 0.75);
color: transparentize($c, 0.5);
}
}
@ -162,29 +160,6 @@
}
}
// 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;
@ -200,6 +175,39 @@
}
}
// hover button
@else if $t==hover {
color: $tc;
background-color: if($variant == 'light', darken($button_bg_color, 3%), 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: if($variant == 'light', darken($button_bg_color, 6%), 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: if($variant == 'light', darken($button_bg_color, 9%), 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);
@ -280,11 +288,9 @@
@if $flat {
.overview-icon { background-color: transparent;}
} @else {
.overview-icon {
background-color: transparentize($color, .93);
}
.overview-icon { background-color: transparentize($color, .93); }
}
&:hover .overview-icon { background-color: transparentize($color, .9);}
&:hover .overview-icon { background-color: transparentize($color, .87);}
&:selected .overview-icon,
&:focus .overview-icon {
@ -319,6 +325,12 @@
&:hover {@include button(hover);}
&:active {@include button(active);}
&:focus {@include button(focus);}
&:insensitive {
@include button(insensitive);
@if $flat {
background-color: transparent;
}
}
}
// styling for all menuitems in popovers

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

@ -5,66 +5,70 @@
$is_highcontrast:true;
$base_color: if($variant == 'light', white, black);
$base_color: if($variant == 'light', $light_1, $dark_5);
$bg_color: if($variant == 'light', darken($base_color, 10%), lighten($base_color, 10%));
$fg_color: if($variant == 'light', transparentize(black, .2), white);
$fg_color: if($variant == 'light', transparentize($dark_5, .2), $light_1);
$selected_fg_color: white;
$selected_fg_color: $light_1;
$selected_bg_color: $blue_3;
$selected_borders_color: darken($selected_bg_color, 20%);
$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%);
$warning_color: if($variant == 'light', $yellow_5, #cd9309);
$warning_color: if($variant == 'light', $yellow_5, $yellow_3);
$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;
// color definitions for OSD elements
$osd_fg_color: $light_1;
$osd_bg_color: $base_color;
// derived osd colors
$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_insensitive_fg_color: mix($osd_fg_color, $osd_bg_color, 70%);
$osd_borders_color: transparentize($osd_fg_color, 0.8);
$osd_outer_borders_color: $osd_borders_color;
$shadow_color: rgba(0,0,0,0);
// hc
$hc_inset_color: transparentize($fg_color, 0.7);
// button
$button_mix_factor: 20%;
// notifications
$bubble_buttons_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%));
// overview background color
$system_bg_color: black;
// color definitions for system elements
$system_base_color: $dark_5;
$system_fg_color: $light_1;
//insensitive state derived colors
// derived system colors
$system_bg_color: lighten($system_base_color, 5%);
$system_borders_color: transparentize($system_fg_color, .9);
$system_insensitive_fg_color: mix($system_fg_color, $system_bg_color, 50%);
$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_bg_color: mix($bg_color, $base_color, 60%);
$insensitive_borders_color: $borders_color;
//colors for the backdrop state, derived from the main colors.
$backdrop_base_color: lighten($base_color,1%);
$backdrop_bg_color: $bg_color;
$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 80%);
$backdrop_insensitive_color: lighten($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 state
$checked_bg_color: if($variant=='light', darken($bg_color, 12%), lighten($bg_color, 18%));
$checked_fg_color: if($variant=='light', darken($fg_color, 12%), lighten($fg_color, 18%));
// derived hover colors
// hover state
$hover_bg_color: if($variant=='light', darken($bg_color, 8%), lighten($bg_color, 20%));
$hover_fg_color: if($variant=='light', darken($fg_color, 10%), lighten($fg_color, 20%));
// derived active colors
// active state
$active_bg_color: if($variant=='light', darken($bg_color, 10%), lighten($bg_color, 22%));
$active_fg_color: if($variant=='light', darken($fg_color, 10%), lighten($fg_color, 22%));
// inset colour for high contrast
$hc_inset_color: transparentize($fg_color, 0.7);

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

@ -18,11 +18,12 @@ $app_icon_size: 96px;
// Icon tiles in the app grid
.app-well-app {
@include overview_icon($osd_fg_color);
@include overview_icon($system_fg_color);
.overview-icon {
padding: $base_padding*2;
border-radius: $base_border_radius*3;
color: $system_fg_color;
}
.overview-icon.overview-icon-with-label {
> StBoxLayout {
@ -33,7 +34,7 @@ $app_icon_size: 96px;
// app folders
.app-well-app.app-folder {
@include overview_icon($fg_color, $flat: false);
@include overview_icon($system_fg_color, $flat: false);
}
// expanded folder
@ -62,7 +63,7 @@ $app_icon_size: 96px;
}
/* FIXME: this is to keep the label in sync with the entry */
& .folder-name-label { padding: 5px 7px; color: $osd_fg_color; }
& .folder-name-label { padding: 5px 7px; color: $system_fg_color; }
& .edit-folder-button {
@extend %button;
@ -100,7 +101,7 @@ $app_icon_size: 96px;
width: 5px;
border-radius:5px;
margin-bottom: 8px;
background-color: $osd_fg_color;
background-color: $system_fg_color;
}
// Rename popup for app folders
@ -130,8 +131,8 @@ $app_icon_size: 96px;
// shutdown and other actions in the grid
.system-action-icon {
background-color: rgba(0,0,0,0.8);
color: white;
background-color: transparentize($system_fg_color,.9);
color: $system_fg_color;
border-radius: 99px;
icon-size: $app_icon_size * 0.5;
@if $is_highcontrast {
@ -167,11 +168,14 @@ $app_icon_size: 96px;
width: 24px;
height: 24px;
border-radius: 99px;
> StIcon { color: $system_fg_color;}
@if $is_highcontrast {
@include button(normal, $osd_fg_color, transparentize($osd_bg_color, 0.5));
@include button(normal, $system_fg_color, transparentize($system_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));}
&:insensitive { @include button(undecorated, $system_fg_color, transparentize($system_bg_color, 0.5));}
&:hover { @include button(hover, $system_fg_color, transparentize($system_bg_color, 0.5));}
&:active { @include button(active, $system_fg_color, transparentize($system_bg_color, 0.5));}
}

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

@ -78,7 +78,7 @@
&:hover {background-color: $hover_bg_color;}
&:focus {
background-color: mix($bg_color, $selected_bg_color, 80%);
color: $selected_fg_color;
color: inherit;
box-shadow:inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
}
@ -166,11 +166,11 @@
.events-list {
spacing: 2 * $base_padding;
color: $fg_color;
}
.events-title {
@extend %heading;
color: $insensitive_fg_color;
margin-bottom: $base_margin;
}

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

@ -1,6 +1,8 @@
/* Dash */
$dash_background_color: lighten($system_bg_color, 5%);
// uses system colors
$dash_background_color: $system_overlay_bg_color;
$dash_placeholder_size: 32px;
$dash_padding: $base_padding*2; // 12px
$dash_border_radius: $modal_radius + $dash_padding;
@ -55,10 +57,11 @@ $dash_border_radius: $modal_radius + $dash_padding;
}
// show apps button
.show-apps { @include overview_icon($osd_fg_color);}
.show-apps { @include overview_icon($system_fg_color);}
.show-apps, .app-well-app {
padding-bottom: $dash_padding;
color: $system_fg_color;
}
}
@ -66,7 +69,7 @@ $dash_border_radius: $modal_radius + $dash_padding;
.dash-separator {
width: 1px;
margin: 0 $base_margin;
background-color: $borders_color;
background-color: $system_borders_color;
margin-bottom: $dash_padding;
@if $is_highcontrast {
width: 2px;

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

@ -16,6 +16,5 @@ StEntry {
StLabel.hint-text {
margin-left: 2px;
color: transparentize($fg_color, 0.3);
}
}

8
data/theme/gnome-shell-sass/widgets/_login-lock.scss
View File

@ -1,5 +1,5 @@
$_gdm_bg: $system_bg_color;
$_gdm_fg: white;
$_gdm_fg: $system_fg_color;
$_gdm_dialog_width: 23em;
// common style for gdm and lockscreen
@ -19,12 +19,12 @@ $_gdm_dialog_width: 23em;
// buttons
.login-dialog-button {
@extend .button;
&.cancel-button,
&.switch-user-button,
&.login-dialog-session-list-button {
@extend .icon-button;
@extend %system_button;
}
&.cancel-button {
@ -145,7 +145,9 @@ $_gdm_dialog_width: 23em;
width: 26em;
}
.login-dialog-prompt-entry {}
.login-dialog-prompt-entry {
@extend %system_entry;
}
/* Screen Shield */

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

@ -2,19 +2,21 @@
// Dialog
#LookingGlassDialog {
background-color: transparentize($bg_color,0.05);
@extend %osd_panel;
background-color: transparentize($osd_bg_color,0.02);
color: $osd_fg_color;
border-radius: 0 0 $modal_radius $modal_radius;
border: 1px solid $outer_borders_color;
border-top-width: 0;
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;
background-color: $osd_bg_color;
box-shadow:none;
}
@ -26,8 +28,8 @@
spacing: $base_padding;
.lg-toolbar-button {
@extend %osd_button;
padding: $base_padding $base_padding*2;
@extend %button;
& > StIcon { icon-size: $base_icon_size; }
}
@ -38,9 +40,9 @@
}
.notebook-tab {
@extend %osd_button;
-natural-hpadding: $base_padding*2;
-minimum-hpadding: $base_padding*2;
@extend %button;
padding: $base_padding $base_padding*2;
}
@ -51,8 +53,8 @@
.lg-dialog {
StEntry {
@extend %osd_entry;
min-height: 22px;
@extend %entry;
}
.shell-link {
@ -118,9 +120,9 @@
.lg-debug-flag-button {
StLabel { padding: $base_padding, 2 * $base_padding; }
color: $fg_color;
&:hover { color: lighten($fg_color, 20%); }
&:active { color: darken($fg_color, 20%); }
color: $osd_fg_color;
&:hover { color: lighten($osd_fg_color, 20%); }
&:active { color: darken($osd_fg_color, 20%); }
}
.lg-debug-flags-header {

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

@ -12,7 +12,7 @@
.message-list-placeholder {
@extend %title_2;
color: transparentize($insensitive_fg_color, .5);
color: $insensitive_fg_color;
// icon size and color
> StIcon {
@ -117,14 +117,14 @@
// close button
.message-close-button {
color: $fg_color;
background-color: transparentize($fg_color, 0.9);
background-color: transparentize($fg_color, 0.8);
border-radius: 99px;
padding: $base_padding - 1px;
margin: 1px;
&:hover {background-color: transparentize($fg_color, 0.8);}
&:active {background-color: transparentize($fg_color, 0.9);}
&:hover {background-color: transparentize($fg_color, 0.7);}
&:active {background-color: transparentize($fg_color, 0.8);}
& StIcon { icon-size: $base_icon_size; }
> StIcon { icon-size: $base_icon_size; }
}
// body

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

@ -30,7 +30,7 @@
.flashspot { background-color: white; }
// Hidden
.hidden { color: rgba(0,0,0,0);}
.hidden { color: transparent;}
// Caps-lock warning
.caps-lock-warning-label {

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

@ -5,7 +5,7 @@
}
#overviewGroup {
background-color: $system_bg_color;
background-color: $system_base_color;
}
.overview-controls {

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

@ -1,8 +1,11 @@
/* Top Bar */
// a.k.a. the panel
$panel_bg_color: #000;
$panel_fg_color: if($variant == 'light', lighten($bg_color, 10%), darken($fg_color, 5%));
$panel_bg_color: if($variant == 'light', $light_3, $dark_5);
$panel_fg_color: if($variant == 'light', $fg_color, darken($fg_color, 5%));
$panel_border_color: if($variant == 'light', darken($panel_bg_color, 2%), $panel_bg_color);
$panel_system_fg_color: $system_fg_color; // always light for lockscreen, overview and other transparent panels
$panel_height: 2.2em;
$panel_transition_duration: 250ms; // same as the overview transition duration
@ -12,12 +15,17 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
height: $panel_height;
@extend %numeric;
transition-duration: $panel_transition_duration;
box-shadow: inset 0 -1px 0 0 $panel_border_color;
// transparent panel on lock & login screens
&.unlock-screen,
&.login-screen,
&:overview {
background-color: transparent;
box-shadow: none;
.panel-button {
color: $panel_system_fg_color !important;
}
}
// panel menus
@ -141,13 +149,13 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
&:overview {
.panel-button {
&:active, &:overview, &:focus, &:checked {
box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.15);
box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.85);
&.clock-display {
box-shadow: none;
.clock {
box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.15);
box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.85);
}
}
@ -160,11 +168,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
}
&:hover {
box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.10);
box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.90);
&.clock-display {
box-shadow: none;
.clock {
box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.10);
box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.90);
}
}
@ -177,11 +185,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
}
&:active:hover, &:overview:hover, &:focus:hover, &:checked:hover {
box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.2);
box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.8);
&.clock-display {
box-shadow: none;
.clock {
box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.2);
box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.8);
}
}

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

@ -91,6 +91,11 @@
.quick-toggle-menu {
@include card;
// override some card styles
background-color: $bg_color !important;
color: $fg_color !important;
border-radius: $base_border_radius*3;
padding: $base_padding*2;
margin: $base_padding*2 $base_padding*3 0;
@ -108,7 +113,10 @@
padding: 1.5 * $base_padding;
background-color: transparentize($fg_color, 0.8);
&.active { background-color: $selected_bg_color;}
&.active {
background-color: $selected_bg_color;
color: $selected_fg_color;
}
}
& .title {

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

@ -33,7 +33,7 @@ $screenshot_ui_button_red: $error_color;
}
.screenshot-ui-type-button {
@extend %osd_button;
@extend %osd_button_flat;
min-width: 48px;
padding: $base_padding * 2 $base_padding * 3 !important;
border-radius: $screenshot_ui_panel_border_radius - $screenshot_ui_panel_padding;
@ -106,7 +106,7 @@ $screenshot_ui_button_red: $error_color;
}
.screenshot-ui-show-pointer-button {
@extend %osd_button;
@extend %osd_button_flat;
border-radius: 99px;
padding: $base_padding * 2 !important;
StIcon { icon-size: $base_icon_size;}
@ -129,7 +129,7 @@ $screenshot_ui_button_red: $error_color;
.screenshot-ui-area-selector-handle {
border-radius: 99px;
background-color: white;
box-shadow: 0 1px 3px 2px rgba(0,0,0,0.2);
box-shadow: 0 1px 3px 2px $shadow_color;
width: 24px;
height: 24px;
}

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

@ -5,6 +5,8 @@
margin-bottom: $base_padding;
width: 24em;
@extend %system_entry;
.search-entry-icon {
icon-size: $base_icon_size;
margin-top: 2px; // center vertically

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

@ -23,22 +23,22 @@
// content
.search-section-content {
background-color: lighten($system_bg_color, 5%);
background-color: $system_overlay_bg_color;
color: $system_fg_color;
border-radius: $modal_radius*1.5;
box-shadow:inset 0 0 0 1px solid $outer_borders_color;
color: $osd_fg_color;
padding: $base_padding*2;
margin:0 $base_margin*3;
}
%search_section_content_item {
@include tile_button($osd_fg_color);
@include tile_button($system_fg_color);
border-radius: $base_border_radius+3px;
}
// "no results" text
.search-statustext {
@extend %title_1;
color: transparentize($system_fg_color, .2);
}
.grid-search-results {
@ -64,7 +64,7 @@
// provider labels
.list-search-provider-details {
width: 120px;
color: $osd_fg_color;
color: $system_fg_color;
}
}
}
@ -91,6 +91,6 @@
// list item description
.list-search-result-description {
color: $osd_insensitive_fg_color;
color: $system_insensitive_fg_color;
}
}

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

@ -5,7 +5,7 @@ $slider_size: 16px;
.slider {
// slider trough
-barlevel-height: 4px;
-barlevel-background-color: if($variant == 'light', transparentize($fg_color, 0.6), transparentize($fg_color, 0.8)); //background of the trough
-barlevel-background-color: transparentize($fg_color, 0.8); //background of the trough
-barlevel-border-width: 2px;
-barlevel-border-color: transparent; // trough border color
// fill style

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

@ -24,7 +24,7 @@ $switcher_padding: $base_padding*2;
// each item in the list
.item-box {
@include tile_button($osd_fg_color);
@include tile_button($fg_color);
// override over style so mouse doesn't steal focus
&:hover {background: none;}
@if $is_highcontrast {

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

@ -3,9 +3,9 @@
$window_picker_spacing: $base_padding; // 6px
$window_picker_padding: $base_padding * 2; // 12px
$window_thumbnail_label_color: transparentize($osd_bg_color, 0.4);
$window_thumbnail_label_color: transparentize($system_bg_color, 0.4);
$window_close_button_color: transparentize(lighten($osd_bg_color, 7%), .02);
$window_close_button_color: transparentize(lighten($system_bg_color, 7%), .02);
$window_close_button_size: 30px;
$window_close_button_padding: 3px;
@ -23,7 +23,7 @@ $window_close_button_padding: 3px;
// Close button
.window-close {
background-color: $window_close_button_color;
color: $osd_fg_color;
color: $system_fg_color;
border-radius: 99px;
box-shadow: 0 2px 4px 0 $shadow_color;
padding: $window_close_button_padding;
@ -50,5 +50,5 @@ $window_close_button_padding: 3px;
// keep in sync with BACKGROUND_CORNER_RADIUS_PIXELS in workspace.js
border-radius: 30px;
background-color: $invisible_occluded_bg_color;
box-shadow: 0 4px 16px 4px transparentize(darken($osd_bg_color, 30%), 0.7);
box-shadow: 0 4px 16px 4px $shadow_color;
}

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

@ -7,7 +7,7 @@
padding: $base_padding;
.workspace-thumbnail {
color: $osd_fg_color;
color: $system_fg_color;
background-color: lighten($system_bg_color, 10%);
border-radius: $base_border_radius*0.5;
border: 1px solid transparent;