Gnome-Shell: sync upstream

This commit is contained in:
Daniel Ruiz de Alegría 2023-03-17 11:25:24 +01:00
parent 14f09400cf
commit 2e9f1dcb06
No known key found for this signature in database
GPG Key ID: 59667A77E8BFCB6C
26 changed files with 682 additions and 609 deletions

View File

@ -5,11 +5,6 @@ $variant: 'dark';
@import "gnome-shell-sass/_common"; @import "gnome-shell-sass/_common";
@import "gnome-shell-sass/_widgets"; @import "gnome-shell-sass/_widgets";
//force symbolic icons
stage {
-st-icon-style: symbolic;
}
.toggle-switch { width: 48px; } .toggle-switch { width: 48px; }
.toggle-switch { .toggle-switch {
background-image: url("assets/toggle-off-hc.svg"); background-image: url("assets/toggle-off-hc.svg");

View File

@ -3,20 +3,20 @@
@import '_palette.scss'; @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); $base_color: if($variant == 'light', $light_1, $_dark_base_color);
$bg_color: if($variant == 'light', #f6f5f4, lighten($base_color, 5%)); $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', transparentize(black, .2), white);
$selected_fg_color: #fff; $selected_fg_color: $light_1;
$selected_bg_color: #3584e4; $selected_bg_color: $blue_3;
$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%)); $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)); $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_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%)); $link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%));
@ -26,23 +26,20 @@ $error_color: if($variant == 'light', $red_3, $red_4);
$success_color: if($variant == 'light', $green_4, $green_5); $success_color: if($variant == 'light', $green_4, $green_5);
$destructive_color: $error_color; $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_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_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: 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_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)); $shadow_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(0,0,0,0.2));
// button // button
$button_mix_factor: 5%; $button_mix_factor: 9%;
// cards
$card_bg_color: if($variant == 'light', darken($bg_color, 5%), lighten($bg_color, 2%));
// notifications // 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 // overview background color
$system_bg_color: $base_color; $system_bg_color: $base_color;
@ -60,7 +57,6 @@ $backdrop_insensitive_color: if($variant =='light', darken($backdrop_bg_color,15
$backdrop_borders_color: mix($borders_color, $bg_color, 90%); $backdrop_borders_color: mix($borders_color, $bg_color, 90%);
$backdrop_dark_fill: mix($backdrop_borders_color,$backdrop_bg_color, 35%); $backdrop_dark_fill: mix($backdrop_borders_color,$backdrop_bg_color, 35%);
// derived checked colors // derived checked colors
$checked_bg_color: if($variant=='light', darken($bg_color, 7%), lighten($bg_color, 7%)); $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%)); $checked_fg_color: if($variant=='light', darken($fg_color, 7%), lighten($fg_color, 7%));

View File

@ -64,13 +64,9 @@ stage {
border: 1px solid $osd_outer_borders_color; border: 1px solid $osd_outer_borders_color;
border-radius: 999px; border-radius: 999px;
padding: $base_padding*2; padding: $base_padding*2;
@if $is_highcontrast {
border: 2px solid $hc_inset_color;
} }
// Overview panels
// for the dash and workspace switcher
%overview_panel {
color: $osd_fg_color;
background-color: transparentize($osd_fg_color, 0.9);
} }
// icon tiles // icon tiles
@ -81,19 +77,14 @@ stage {
border: 2px solid transparent; border: 2px solid transparent;
transition-duration: 200ms; transition-duration: 200ms;
text-align: center; text-align: center;
@if $is_highcontrast {
border-color: $hc_inset_color;
} }
// dialogs
%bubble_panel {
color: $fg_color;
background-color: $bg_color;
border-radius: $base_border_radius*1.25 + 1px;
border: 1px solid $borders_edge;
} }
// normal button styling // normal button styling
%button { %button {
border-radius: $base_border_radius - 2px; // 6px border-radius: $base_border_radius;
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
font-weight: bold; font-weight: bold;
@ -103,33 +94,39 @@ stage {
&:focus { @include button(focus);} &:focus { @include button(focus);}
&:hover { @include button(hover);} &:hover { @include button(hover);}
&:insensitive { @include button(insensitive);} &:insensitive { @include button(insensitive);}
&:active { @include button(active);} &:selected,
&:checked { @include button(checked);}
}
// normal icon-only button
%icon_button {
border-radius: 99px;
border-style: solid;
border-width: 1px;
font-weight: bold;
padding: $base_padding*2;
@include button(normal);
&:focus { @include button(focus);}
&:hover { @include button(hover);}
&:insensitive { @include button(insensitive);}
&:active { @include button(active);} &:active { @include button(active);}
&:checked { @include button(checked);} &:checked { @include button(checked);}
& > StIcon { icon-size: $base_icon_size; } &.flat {
@include button(normal, $flat:true);
&: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 // buttons in dialogs/notifications
// lighter in color and have a greater radius // lighter in color and have a greater radius
$bubble_button_radius:$base_border_radius*1.25;
%bubble_button { %bubble_button {
padding: $base_padding * 2; padding: $base_padding * 2;
font-weight: bold !important; font-weight: bold !important;
@ -145,25 +142,25 @@ $bubble_button_radius:$base_border_radius*1.25;
&:checked { @include button(checked, $c:$bubble_buttons_color);} &:checked { @include button(checked, $c:$bubble_buttons_color);}
&:first-child:ltr { &:first-child:ltr {
border-radius: 0 0 0 $bubble_button_radius; border-radius: 0 0 0 $modal_radius;
} }
&:last-child:ltr { &:last-child:ltr {
border-radius: 0 0 $bubble_button_radius 0; border-radius: 0 0 $modal_radius;
margin-right: 0 !important; margin-right: 0 !important;
} }
&:first-child:rtl { &:first-child:rtl {
border-radius: 0 0 $bubble_button_radius 0; border-radius: 0 0 $modal_radius;
} }
&:last-child:rtl { &:last-child:rtl {
border-radius: 0 0 0 $bubble_button_radius; border-radius: 0 0 0 $modal_radius;
margin-left: 0 !important; margin-left: 0 !important;
} }
&:first-child:last-child { &:first-child:last-child {
border-radius: 0 0 $bubble_button_radius $bubble_button_radius !important; border-radius: 0 0 $modal_radius $modal_radius;
margin-left: 0 !important; margin-left: 0 !important;
margin-right: 0 !important; margin-right: 0 !important;
} }
@ -180,6 +177,23 @@ $bubble_button_radius:$base_border_radius*1.25;
&:outlined,&:checked { @include button(checked, $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;
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 */ /* General Typography */
%large_title { %large_title {

View File

@ -2,7 +2,7 @@
// generic drawing of more complex things // 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 // outer highlight "used" on most widgets
@return 0 1px $c; @return 0 1px $c;
} }
@ -35,29 +35,31 @@
// possible $t values: // possible $t values:
// normal, focus, insensitive // normal, focus, insensitive
// //
transition-duration: 100ms;
@if $t==normal { @if $t==normal {
background-color: lighten($bg_color, 5%); background-color: transparentize($fg_color, 0.9);
color: transparentize($fg_color,0.3); 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 { @if $t==focus {
background-color: mix(lighten($bg_color, 5%), $selected_bg_color, 95%); background-color: mix(transparentize($fg_color, 0.8), $selected_bg_color, 95%);
border-color: $fc; box-shadow: inset 0 0 0 2px $fc;
color: $fg_color; color: $fg_color;
&:hover {} &:hover {}
} }
@if $t==hover { @if $t==hover {
background-color:lighten($hover_bg_color, 5%); background-color:transparentize($fg_color, 0.8);
border-color:lighten($hover_bg_color, 5%); color: inherit;
color: transparentize($fg_color,0.3);
} }
@if $t==insensitive { @if $t==insensitive {
background-color:lighten($insensitive_bg_color, 5%); background-color:transparentize($insensitive_fg_color, 0.8);
border-color: lighten($insensitive_bg_color, 5%);
color: $insensitive_fg_color; color: $insensitive_fg_color;
} }
} }
@ -143,7 +145,7 @@
// //
// since buttons are all flat an borderless now the mixin is simpler // since buttons are all flat an borderless now the mixin is simpler
@mixin button($t, $tc:$fg_color, $c:$bg_color) { @mixin button($t, $tc:$fg_color, $c:$bg_color, $flat: false) {
$button_bg_color: mix($tc, $c, $button_mix_factor); $button_bg_color: mix($tc, $c, $button_mix_factor);
transition-duration: 100ms; transition-duration: 100ms;
@ -152,9 +154,35 @@
@if $t==normal { @if $t==normal {
color: $tc; color: $tc;
background-color: $button_bg_color; background-color: $button_bg_color;
@if $is_highcontrast == "true" { @if $flat {
box-shadow: inset 0 0 0 1px $button_inset_color; background-color: transparent;
} }
@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 // focused button
@ -172,55 +200,19 @@
} }
} }
// 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 // insensitive button
@else if $t==insensitive { @else if $t==insensitive {
color: transparentize($tc, 0.5); color: transparentize($tc, 0.5);
background-color: transparentize($tc, .95); 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 // default/suggested button
@else if $t==default { @else if $t==default {
background-color: $selected_bg_color; background-color: $selected_bg_color;
color: $selected_fg_color; color: $selected_fg_color;
box-shadow: none;
&:focus { &: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%); background-color: lighten($selected_bg_color, 5%);
@ -257,6 +249,9 @@
background-color: transparent; background-color: transparent;
} @else { } @else {
background-color: transparentize($color, .84); 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);} &:hover { background-color: transparentize($color, .9);}
&:selected, &:focus { &:selected, &:focus {
@ -279,11 +274,15 @@
// overview icon, dash, app grid // overview icon, dash, app grid
@mixin overview_icon($color, $flat: true) { @mixin overview_icon($color, $flat: true) {
transition-duration: 400ms; transition-duration: 400ms;
.overview-icon { @extend %tile; } .overview-icon {
@extend %tile;
}
@if $flat { @if $flat {
.overview-icon { background-color: transparent;} .overview-icon { background-color: transparent;}
} @else { } @else {
.overview-icon { background-color: transparentize($color, .81);} .overview-icon {
background-color: transparentize($color, .93);
}
} }
&:hover .overview-icon { background-color: transparentize($color, .9);} &:hover .overview-icon { background-color: transparentize($color, .9);}
@ -308,26 +307,44 @@
// styling for elements within popovers that look like notifications // styling for elements within popovers that look like notifications
@mixin card($flat: false) { @mixin card($flat: false) {
border-radius: $base_border_radius; border-radius: $base_border_radius*1.5;
margin: $base_margin; margin: $base_margin;
box-shadow: 0 1px 1px 0 $shadow_color;
@if $flat { @if $flat {
@include button(undecorated); @include button(undecorated);
box-shadow: none !important; box-shadow: none !important;
} @else { } @else {
@include button(normal, $c:$card_bg_color); @include button(normal);
}
&:hover {@include button(hover);}
&:active {@include button(active);}
&:focus {@include button(focus);}
} }
&:focus { // styling for all menuitems in popovers
@include button(focus, $c:$card_bg_color); @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 { &:hover {
@include button(hover, $c:$card_bg_color); @include button(hover, $c:$bg);
}
&:active {
@include button(active, $c:$card_bg_color);
} }
&:active {@include button(active, $c:$bg);}
&:checked {@include button(checked, $c:$bg);}
} }

View File

@ -46,6 +46,5 @@
@import 'widgets/misc'; @import 'widgets/misc';
@import 'widgets/keyboard'; @import 'widgets/keyboard';
@import 'widgets/looking-glass'; @import 'widgets/looking-glass';
// Lock / login screens // Lock / login screen
@import 'widgets/login-dialog'; @import 'widgets/login-lock';
@import 'widgets/screen-shield';

View File

@ -20,7 +20,10 @@ $app_icon_size: 96px;
.app-well-app { .app-well-app {
@include overview_icon($osd_fg_color); @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 { .overview-icon.overview-icon-with-label {
> StBoxLayout { > StBoxLayout {
spacing: $base_padding; spacing: $base_padding;
@ -30,13 +33,19 @@ $app_icon_size: 96px;
// app folders // app folders
.app-well-app.app-folder { .app-well-app.app-folder {
@include overview_icon($osd_fg_color, $flat: false); @include overview_icon($fg_color, $flat: false);
} }
// expanded folder // expanded folder
.app-folder-dialog { .app-folder-dialog {
border-radius: $modal_radius*2; border-radius: $modal_radius*4;
background-color: $dash_background_color; 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 { & .folder-name-container {
padding: 24px 36px 0; padding: 24px 36px 0;
@ -47,7 +56,10 @@ $app_icon_size: 96px;
@extend %title_1; @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 */ /* 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: $osd_fg_color; }
@ -119,9 +131,12 @@ $app_icon_size: 96px;
// shutdown and other actions in the grid // shutdown and other actions in the grid
.system-action-icon { .system-action-icon {
background-color: rgba(0,0,0,0.8); background-color: rgba(0,0,0,0.8);
color: #fff; color: white;
border-radius: 99px; border-radius: 99px;
icon-size: $app_icon_size * 0.5; icon-size: $app_icon_size * 0.5;
@if $is_highcontrast {
box-shadow: inset 0 0 0 2px $hc_inset_color;
}
} }
.page-navigation-hint { .page-navigation-hint {
@ -147,15 +162,16 @@ $app_icon_size: 96px;
} }
.page-navigation-arrow { .page-navigation-arrow {
& > StIcon {
margin: 6px; margin: 6px;
padding: 18px; padding: 18px;
width: 24px; width: 24px;
height: 24px; height: 24px;
border-radius: 99px; 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));} &:insensitive { @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));} &:hover { @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));} &:active { @include button(active, $osd_fg_color, transparentize($osd_bg_color, 0.5));}
} }

View File

@ -6,5 +6,14 @@
} }
.icon-button { .icon-button {
@extend %icon_button; // that's it @extend .button; // same style as buttons
border-radius: 99px;
padding: $base_padding*2;
min-height: 16px;
StIcon {
icon-size: $base_icon_size;
-st-icon-style: symbolic;
}
} }

View File

@ -15,7 +15,7 @@
/* today button (the date) */ /* today button (the date) */
.datemenu-today-button { .datemenu-today-button {
@include card($flat: true); @include card(flat);
padding: $base_padding * 1.5; padding: $base_padding * 1.5;
// weekday label // weekday label
@ -45,7 +45,6 @@
// month label // month label
.calendar-month-label { .calendar-month-label {
color: lighten($fg_color,5%);
@extend %heading; @extend %heading;
padding: 8px 0; padding: 8px 0;
} }
@ -54,9 +53,12 @@
height: 32px; height: 32px;
width: 32px; width: 32px;
margin: 2px; margin: 2px;
border-radius: $base_border_radius - 2px; border-radius: $base_border_radius;
&:hover, &:focus {background-color: $hover_bg_color;} &:hover, &:focus {background-color: $hover_bg_color;}
&:active {background-color: $active_bg_color;} &:active {background-color: $active_bg_color;}
@if $is_highcontrast {
border:1px solid $hc_inset_color;
}
} }
} }
@ -93,12 +95,18 @@
color: $insensitive_fg_color; color: $insensitive_fg_color;
padding-top: $base_padding; padding-top: $base_padding;
height: 16px !important; // force heading to be smaller height height: 16px !important; // force heading to be smaller height
font-weight: bold; font-weight: 600;
@extend %smaller; @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-work-day {}
.calendar-nonwork-day {color: $insensitive_fg_color;} .calendar-nonwork-day {color: $insensitive_fg_color;}
.calendar-other-month-day { .calendar-other-month-day {
@ -142,7 +150,7 @@
margin: 6px; margin: 6px;
padding: 0 $base_padding; padding: 0 $base_padding;
border-radius: 3px; border-radius: 3px;
background-color: darken($bg_color, 2%); background-color: transparentize($fg_color, 0.9);
color: $insensitive_fg_color color: $insensitive_fg_color
} }
} }

View File

@ -35,17 +35,23 @@ $dash_border_radius: $modal_radius + $dash_padding;
padding: $dash_padding; padding: $dash_padding;
spacing: $base_padding; spacing: $base_padding;
margin-bottom: $dash_padding; margin-bottom: $dash_padding;
@if $is_highcontrast {
border: 2px solid $hc_inset_color;
box-shadow:none;
}
} }
// items on the dash // items on the dash
.dash-item-container { .dash-item-container {
> * {margin: 0 2px;} > * {margin: 0 2px;}
&:ltr:first-child {margin-left: 0;} &:ltr{&:first-child {margin-left: 0;}}
&:rtl:first-child {margin-right: 0;} &:rtl{&:first-child {margin-right: 0;}}
// each app item on the dash // each app item on the dash
.app-well-app .overview-icon { .app-well-app .overview-icon {
padding: $base_padding; padding: $base_padding;
border-radius: $base_border_radius*2;
} }
// show apps button // show apps button
@ -62,14 +68,13 @@ $dash_border_radius: $modal_radius + $dash_padding;
margin: 0 $base_margin; margin: 0 $base_margin;
background-color: $borders_color; background-color: $borders_color;
margin-bottom: $dash_padding; margin-bottom: $dash_padding;
@if $is_highcontrast {
width: 2px;
}
} }
// OSD Tooltip // OSD Tooltip
.dash-label { .dash-label {
color: $osd_fg_color; @extend %tooltip;
background-color: $osd_bg_color;
border-radius: 99px;
padding: $base_padding $base_padding * 2;
text-align: center;
-y-offset: $base_margin * 2; // distance from the dash edge -y-offset: $base_margin * 2; // distance from the dash edge
} }

View File

@ -5,7 +5,9 @@
} }
.modal-dialog { .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 { .modal-dialog-content-box {
margin: 32px 40px; margin: 32px 40px;

View File

@ -1,20 +1,10 @@
/* Entries */ /* Entries */
StEntry { StEntry {
border-radius: $base_border_radius; @extend %entry;
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;
StIcon.capslock-warning { StIcon.capslock-warning {
icon-size: 16px; icon-size: $base_icon_size;
warning-color: $warning_color; warning-color: $warning_color;
padding: 0 4px; padding: 0 4px;
} }

View File

@ -1,201 +0,0 @@
/* Login Dialog */
.login-dialog-banner-view {
padding-top: 24px;
max-width: 23em;
}
.login-dialog,
.unlock-dialog {
//reset
border: none;
background-color: transparent;
$_gdm_bg: $system_bg_color;
.modal-dialog-button-box { spacing: 3px; }
.modal-dialog-button {
padding: 4px 18px;
background-color: darken($system_bg_color, 3%);
border-color: darken($system_bg_color, 3%);
color: $osd_fg_color;
$_hover_c: lighten($_gdm_bg, 5%);
&:hover, &:focus {
background-color: $_hover_c;
border-color: $_hover_c;
}
&:active {
$_active_c: darken($_gdm_bg, 5%);
background-color: $_active_c;
border-color: $_active_c;
}
&:insensitive {
@include button(insensitive);
border-color: darken($_gdm_bg, 5%);
background-color: darken($_gdm_bg, 5%);
color: transparentize($osd_fg_color, 0.3);
}
&:default {
@include button(default);
}
}
.cancel-button,
.switch-user-button,
.login-dialog-session-list-button {
padding: 0;
border-radius: 99px;
width: $large_icon_size;
height: $large_icon_size;
border-color: darken($system_bg_color, 3%);
background-color: darken($system_bg_color, 3%);
StIcon { icon-size: $base_icon_size; }
}
.caps-lock-warning-label,
.login-dialog-message-warning {
color: $osd_fg_color;
}
}
.login-dialog-logo-bin { padding: 24px 0px; }
.login-dialog-banner { color: darken($osd_fg_color,10%); }
.login-dialog-button-box { width: 23em; spacing: 5px; }
.login-dialog-message { text-align: center; }
.login-dialog-user-selection-box { padding: 100px 0px; }
.login-dialog-not-listed-label {
padding-left: 2px;
.login-dialog-not-listed-button:focus &,
.login-dialog-not-listed-button:hover & {
color: $osd_fg_color;
}
}
.login-dialog-not-listed-label {
@extend %caption;
font-weight: bold;
color: darken($osd_fg_color,30%);
padding-top: 1em;
}
.login-dialog-auth-list-view { -st-vfade-offset: 1em; }
.login-dialog-auth-list {
spacing: 6px;
margin-left: 2em;
}
.login-dialog-auth-list-title {
margin-left: 2em;
}
.login-dialog-auth-list-item {
border-radius: $base_border_radius + 4px;
padding: 6px;
color: darken($osd_fg_color,30%);
&:focus, &:selected { background-color: $selected_bg_color; color: $selected_fg_color; }
}
.login-dialog-auth-list-label {
@include fontsize($base_font_size + 2);
font-weight: bold;
padding-left: 15px;
&:ltr { padding-left: 14px; text-align: left; }
&:rtl { padding-right: 14px; text-align: right; }
}
.login-dialog-user-list-view { -st-vfade-offset: 1em; }
.login-dialog-user-list {
spacing: 12px;
width: 23em;
&:expanded .login-dialog-user-list-item:selected { background-color: $selected_bg_color; color: $selected_fg_color; }
&:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid $selected_bg_color; }
}
.login-dialog-user-list-item {
border-radius: $base_border_radius + 4px;
padding: 6px;
color: darken($osd_fg_color,30%);
&:ltr .user-widget { padding-right: 1em; }
&:rtl .user-widget { padding-left: 1em; }
.login-dialog-timed-login-indicator {
height: 2px;
margin-top: 6px;
background-color: $osd_fg_color;
}
&:focus .login-dialog-timed-login-indicator { background-color: $selected_fg_color; }
}
.user-widget-label {
color: $osd_fg_color;
}
.user-widget.horizontal .user-widget-label {
@include fontsize($base_font_size + 2);
font-weight: bold;
padding-left: 15px;
&:ltr { padding-left: 14px; text-align: left; }
&:rtl { padding-right: 14px; text-align: right; }
}
.user-widget.vertical .user-widget-label {
@include fontsize($base_font_size + 5);
text-align: center;
font-weight: normal;
padding-top: 16px;
}
.login-dialog-timed-login-indicator {
height: 2px;
background-color: darken($fg_color,40%);
}
.login-dialog-prompt-layout {
padding-top: 24px;
padding-bottom: 12px;
spacing: $base_padding * 2;
width: 23em;
}
.login-dialog-prompt-entry {
height: 1.5em;
}
.login-dialog-prompt-label {
color: darken($osd_fg_color, 20%);
@include fontsize($base_font_size + 1);
padding-top: 1em;
}
.login-dialog {
StEntry {
@if $variant=='dark' {
$_gdm_entry_bg: darken($system_bg_color, 3%);
background-color: $_gdm_entry_bg;
color: $fg_color;
}
}
}
// Custom styling for unlock entry
.unlock-dialog {
StEntry {
border:none !important;
&:focus {
background-color: transparentize($fg_color, 0.9);
}
&:insensitive {
color: transparentize($fg_color, 0.5);
background-color: transparentize($fg_color, 0.95);
}
}
.cancel-button,
.switch-user-button,
.login-dialog-session-list-button {
border-color: transparent;
background-color: transparentize($fg_color, 0.9);
}
}

View File

@ -0,0 +1,283 @@
$_gdm_bg: $system_bg_color;
$_gdm_fg: white;
$_gdm_dialog_width: 23em;
// common style for gdm and lockscreen
.login-dialog,
.unlock-dialog {
.caps-lock-warning-label,
.login-dialog-message-warning {
color: $_gdm_fg;
}
}
/* Login Dialog */
.login-dialog {
background-color: $_gdm_bg;
}
// buttons
.login-dialog-button {
@extend .button;
&.cancel-button,
&.switch-user-button,
&.login-dialog-session-list-button {
@extend .icon-button;
}
&.cancel-button {
padding: $base_padding*1.5;
}
}
.login-dialog-button-box {
width: $_gdm_dialog_width;
spacing: $base_padding*2;
}
.login-dialog-logo-bin {
margin:3em 0;
}
.login-dialog-banner { color: darken($_gdm_fg,10%); }
.login-dialog-banner-view { max-width: $_gdm_dialog_width; }
.login-dialog-message { text-align: center; }
.login-dialog-user-selection-box { padding: 100px 0px; }
.login-dialog-not-listed-label {
@include fontsize($base_font_size);
font-weight: bold;
color: darken($_gdm_fg,30%);
padding: $base_padding*2;
.login-dialog-not-listed-button:focus &,
.login-dialog-not-listed-button:hover & {
color: $_gdm_fg;
}
.login-dialog-not-listed-button:focus & {
text-decoration: underline;
}
}
.login-dialog-auth-list-view { -st-vfade-offset: 1em; }
.login-dialog-auth-list {
spacing: 6px;
margin-left: 2em;
}
.login-dialog-auth-list-title {
margin-left: 2em;
}
.login-dialog-auth-list-item {
border-radius: $base_border_radius*2;
padding: 4px;
color: darken($_gdm_fg,30%);
&:focus, &:selected {
background-color: $selected_bg_color;
color: $selected_fg_color;
}
}
.login-dialog-auth-list-label {
@include fontsize($base_font_size + 2);
font-weight: bold;
padding-left: 15px;
&:ltr { padding-left: 14px; text-align: left; }
&:rtl { padding-right: 14px; text-align: right; }
}
.login-dialog-user-list-view { -st-vfade-offset: 1em; }
.login-dialog-user-list {
spacing: 12px;
width: $_gdm_dialog_width;
.login-dialog-user-list-item {
border-radius: $base_border_radius + 4px;
padding: $base_padding;
background-color: transparentize($_gdm_fg, .95);
color: $_gdm_fg;
@if $is_highcontrast {
box-shadow:inset 0 0 0 1px $hc_inset_color;;
}
.user-widget .user-icon {
border: 4px solid transparent;
}
.login-dialog-timed-login-indicator {
height: 2px;
margin-top: 6px;
background-color: darken($_gdm_fg, 30%);
}
&:focus .login-dialog-timed-login-indicator { background-color: $selected_fg_color; }
}
&:expanded .login-dialog-user-list-item {
transition-duration: 300ms;
transition-timing-function: ease;
&:hover {
background-color: transparentize($_gdm_fg, .9);
color: $_gdm_fg;
}
&:selected {
background-color: $selected_bg_color;
color: $selected_fg_color;
&:hover { background-color: lighten($selected_bg_color,5%); }
}
&:logged-in {
.user-widget .user-icon {
border-color: $selected_bg_color;
}
}
}
}
.login-dialog-prompt-layout {
spacing: $base_padding*2;
width: 26em;
}
.login-dialog-prompt-entry {}
/* Screen Shield */
// a.k.a. the lockscreen
.unlock-dialog {
background-color: transparent;
}
.screen-shield-background { // just the shadow, really
background: black;
box-shadow: 0 2px 4px rgba(0,0,0,0.6);
}
#lockDialogGroup {
background-color: $_gdm_bg;
}
// Clock
.unlock-dialog-clock {
color: $_gdm_fg;
spacing: 2em;
.unlock-dialog-clock-time {
@extend %numeric;
@include fontsize(72);
font-weight: 200;
}
.unlock-dialog-clock-date {
@extend %title_1;
font-weight: 400;
}
.unlock-dialog-clock-hint {
margin-top: 2em;
padding: $base_padding $base_padding*3;
border-radius: $base_border_radius*2;
font-weight: bold;
}
}
// Notifications
#unlockDialogNotifications {
StButton#vhandle, StButton#hhandle {
background-color: transparentize($bg_color,0.7);
&:hover, &:focus { background-color: transparentize($bg_color,0.5); }
&:active { background-color: transparentize($selected_bg_color,0.5); }
}
}
.unlock-dialog-notifications-container {
margin: 12px;
spacing: 6px;
width: $_gdm_dialog_width;
background-color: transparent;
.summary-notification-stack-scrollview {
padding-top: 0;
padding-bottom: 0;
}
.notification,
.unlock-dialog-notification-source {
padding: 12px 16px;
border: none;
background-color: transparentize($_gdm_fg,0.9);
color: $_gdm_fg;
border-radius: $modal_radius;
&.critical { background-color: transparentize($_gdm_fg,0.8) }
}
}
.unlock-dialog-notification-label {
padding-left: 12px;
padding-right: 0;
&:rtl { padding-right: 12px; padding-left: 0; }
}
.unlock-dialog-notification-count-text {
font-weight: bold;
padding: 0 12px;
color: $_gdm_fg;
background-color: transparentize($_gdm_fg, 0.9);
border-radius: 99px;
}
// User Widget
.user-widget {
.user-widget-label {
color: $_gdm_fg;
}
// layout of the user list
&.horizontal {
spacing: $base_padding*3;
.user-widget-label {
@extend %title_3;
}
.user-icon {
& StIcon {
padding: 12px;
icon-size: $base_icon_size*2;
width: $base_icon_size*3;
height: $base_icon_size*3;
background-color: transparentize($_gdm_fg, 0.9);
}
}
}
// layout of the login prompt
&.vertical {
spacing: $base_padding*4;
.user-widget-label {
@extend %title_1;
text-align: center;
margin-bottom: .75em;
}
.user-icon {
icon-size: $base_icon_size*10;
& StIcon {
padding: 32px;
icon-size: $base_icon_size*4;
background-color: transparentize($_gdm_fg, 0.9);
}
}
}
}

View File

@ -2,15 +2,22 @@
// Dialog // Dialog
#LookingGlassDialog { #LookingGlassDialog {
background-color: $osd_bg_color; background-color: transparentize($bg_color,0.05);
border-radius: 0 0 $modal_radius $modal_radius; border-radius: 0 0 $modal_radius $modal_radius;
border: 1px solid $outer_borders_color;
border-top-width: 0; border-top-width: 0;
border: 1px solid $osd_outer_borders_color; color: $fg_color;
color: $osd_fg_color;
padding: $base_padding; padding: $base_padding;
spacing: $base_padding; spacing: $base_padding;
box-shadow: 0 2px 4px 0 $shadow_color; 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 { & > #Toolbar {
border: none; border: none;
padding: $base_padding; padding: $base_padding;
@ -33,25 +40,8 @@
.notebook-tab { .notebook-tab {
-natural-hpadding: $base_padding*2; -natural-hpadding: $base_padding*2;
-minimum-hpadding: $base_padding*2; -minimum-hpadding: $base_padding*2;
@extend %button;
font-weight: bold;
padding: $base_padding $base_padding*2; 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; } StBoxLayout#EvalBox { padding: 4px; spacing: $base_padding; padding: $base_padding; }
@ -61,12 +51,8 @@
.lg-dialog { .lg-dialog {
StEntry { 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; min-height: 22px;
selection-background-color: $selected_bg_color; @extend %entry;
selected-color: $selected_fg_color;
} }
.shell-link { .shell-link {
@ -94,10 +80,10 @@
} }
.lg-obj-inspector-button { .lg-obj-inspector-button {
border: 1px solid $osd_borders_color; border: 1px solid $borders_color;
padding: 4px; padding: 4px;
border-radius: $base_border_radius; border-radius: $base_border_radius;
&:hover { border: 1px solid #ffffff; } &:hover { border: 1px solid $fg_color; }
} }
// Extensions // Extensions
@ -123,8 +109,8 @@
// Inspector // Inspector
#LookingGlassPropertyInspector { #LookingGlassPropertyInspector {
background: $osd_bg_color; background: $bg_color;
border: 1px solid $osd_borders_color; border: 1px solid $borders_color;
border-radius: $base_border_radius; border-radius: $base_border_radius;
padding: $base_padding; padding: $base_padding;
} }

View File

@ -143,6 +143,11 @@
border-radius: $base_border_radius; border-radius: $base_border_radius;
color: $fg_color; 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 // colors are lightened since the media controls are in a card
&:hover { &:hover {
background-color: lighten($hover_bg_color, 5%); background-color: lighten($hover_bg_color, 5%);
@ -154,7 +159,12 @@
color: $fg_color; 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 // fix margin for last button
&:last-child:ltr { margin-right: $base_margin*3; } &:last-child:ltr { margin-right: $base_margin*3; }

View File

@ -10,9 +10,6 @@
color: $osd_fg_color; color: $osd_fg_color;
border-radius: 99px; border-radius: 99px;
icon-size: $base_icon_size * 4; // 64px icon-size: $base_icon_size * 4; // 64px
&:hover {
color: lighten($osd_fg_color,30%);
}
& StIcon { & StIcon {
background-color: transparentize($osd_fg_color,0.95); background-color: transparentize($osd_fg_color,0.95);
@ -22,25 +19,16 @@
} }
&.user-avatar { &.user-avatar {
border: 2px $osd_fg_color; box-shadow:inset 0 0 0 1px transparentize($osd_fg_color, 0.9);
@if $is_highcontrast {
box-shadow:inset 0 0 0 1px $hc_inset_color;
} }
} }
.user-widget.vertical .user-icon {
icon-size: $base_icon_size * 6; // 128px
& StIcon {
padding: $base_padding * 3 + 2px; // 20px
padding-top: $base_padding * 3; // 18 px
padding-bottom: $base_padding * 3 + 4px; // 22px
width: $base_icon_size * 5.5; height: $base_icon_size * 5.5; // 88px;
}
} }
.lightbox { background-color: black; } .lightbox { background-color: black; }
.flashspot { background-color: white; } .flashspot { background-color: white; }
// Hidden // Hidden
.hidden { color: rgba(0,0,0,0);} .hidden { color: rgba(0,0,0,0);}

View File

@ -41,6 +41,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
&.screen-recording-indicator { &.screen-recording-indicator {
box-shadow: inset 0 0 0 100px $screenshot_ui_button_red; box-shadow: inset 0 0 0 100px $screenshot_ui_button_red;
} }
&.screen-sharing-indicator { &.screen-sharing-indicator {
box-shadow: inset 0 0 0 100px $warning_color; box-shadow: inset 0 0 0 100px $warning_color;
StBoxLayout { margin: 0 $base_padding; } StBoxLayout { margin: 0 $base_padding; }

View File

@ -1,5 +1,11 @@
/* Popovers/Menus */ /* 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 // the popover itself
.popup-menu-boxpointer { .popup-menu-boxpointer {
-arrow-rise: $base_margin+2px; // distance from the panel & screen edge -arrow-rise: $base_margin+2px; // distance from the panel & screen edge
@ -19,44 +25,26 @@
// popover content // popover content
.popup-menu-content { .popup-menu-content {
padding: $base_padding; 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; 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 // menu items
.popup-menu-item { .popup-menu-item {
padding: $base_padding*1.5 $base_padding*2; @include menuitem($bg:$menu_bg_color);
border-radius: $base_border_radius*1.5;
spacing: $base_padding;
transition-duration: 100ms;
background-color: transparent;
&:ltr {padding-left: $base_padding;} border-radius: $menuitem_border_radius;
&: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;}
&:checked { &:checked {
margin-bottom: 0; border-radius: $menuitem_border_radius $menuitem_border_radius 0 0 !important;
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;}
}
&:active { @if $is_highcontrast {
background-color: lighten($active_bg_color, 5%); border: 1px solid $hc_inset_color;
color: $active_fg_color; border-bottom-width:0;
}
} }
&:insensitive {color: transparentize($fg_color,0.5);}
// add margin to switches in menu items // add margin to switches in menu items
.toggle-switch { .toggle-switch {
@ -78,14 +66,14 @@
icon-size: 16px !important; // for some reason the variable doesn't work here icon-size: 16px !important; // for some reason the variable doesn't work here
} }
.popup-menu-arrow {
}
// popover submenus // popover submenus
.popup-sub-menu { .popup-sub-menu {
background-color: $checked_bg_color; border-radius: 0 0 $menuitem_border_radius+1px $menuitem_border_radius+1px;
border-radius: 0 0 $base_border_radius $base_border_radius; margin-bottom: $base_padding;
@if $is_highcontrast {
border: 1px solid $hc_inset_color;
}
.popup-menu-ornament { .popup-menu-ornament {
min-width: $base_icon_size !important; min-width: $base_icon_size !important;
@ -94,18 +82,13 @@
// submenu specific styles // submenu specific styles
.popup-menu-item { .popup-menu-item {
border-radius: 0; border-radius: 0;
margin: 0; @include menuitem($bg:$submenu_bg_color, $flat:false);
border-top-width:0;
&:last-child { &: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 { .popup-menu-section {
@ -113,7 +96,7 @@
&:hover,&:focus { border-radius: 0;} &:hover,&:focus { border-radius: 0;}
} }
&:last-child .popup-menu-item:last-child { &: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 // separator
.popup-separator-menu-item { .popup-separator-menu-item {
margin: 6px 0; border:none !important;
padding:0 !important;
&:ltr { margin-right: $base_margin;}
&:rtl { margin-left: $base_margin;}
.popup-separator-menu-item-separator { .popup-separator-menu-item-separator {
height: 1px; //not really the whole box height: 1px; //not really the whole box
@ -153,7 +133,7 @@
&:rtl { margin-left: 2.5em;} &:rtl { margin-left: 2.5em;}
.popup-separator-menu-item-separator { .popup-separator-menu-item-separator {
background-color: lighten($borders_color, 7%); background-color: $borders_color;
} }
} }
} }

View File

@ -12,16 +12,18 @@
spacing-columns: $base_padding*2; spacing-columns: $base_padding*2;
} }
.quick-toggle { .quick-toggle, .quick-menu-toggle {
border-radius: 99px; border-radius: 99px;
min-width: 12em; min-width: 12em;
max-width: 12em; max-width: 12em;
min-height: 40px; min-height: 48px;
border:none; border:none;
}
&:checked { @include button(default); } .quick-toggle {
&:checked { @include button(default, $c:$selected_bg_color); }
& > StBoxLayout { spacing: $base_padding; } & > StBoxLayout { spacing: $base_padding*1.5; }
/* Move padding into the box; this is to allow menu arrows /* Move padding into the box; this is to allow menu arrows
to extend to the border */ to extend to the border */
@ -30,40 +32,63 @@
&:ltr > StBoxLayout { padding-left: $base_padding*2.5; } &:ltr > StBoxLayout { padding-left: $base_padding*2.5; }
&:rtl > StBoxLayout { padding-right: $base_padding*2.5; } &:rtl > StBoxLayout { padding-right: $base_padding*2.5; }
.quick-toggle-label { font-weight: bold; } .quick-toggle-title { font-weight: bold; }
.quick-toggle-icon, .quick-toggle-arrow { icon-size: $base_icon_size; }
& StBoxLayout > .quick-toggle-subtitle {
font-weight: normal;
font-size: 12px;
}
.quick-toggle-icon { icon-size: $base_icon_size; }
} }
.quick-menu-toggle { .quick-menu-toggle {
&:ltr > StBoxLayout { padding-right: 0; } & .quick-toggle {
&:rtl > StBoxLayout { padding-left: 0; } min-width: auto;
max-width: auto;
&:ltr { border-radius: 99px 0 0 99px; }
&:rtl { border-radius: 0 99px 99px 0; }
&:ltr:last-child { border-radius: 99px; }
&:rtl:last-child { border-radius: 99px; }
}
& .quick-toggle-arrow { & .quick-toggle-arrow {
background-color: transparentize($fg_color, 0.9);
padding: $base_padding $base_padding*1.75; padding: $base_padding $base_padding*1.75;
border-width: 0;
&:ltr { border-radius: 0 99px 99px 0; } &:checked {
&:rtl { border-radius: 99px 0 0 99px; } @include button(default, $c:$selected_bg_color);
border-color: $selected_borders_color;
}
&:ltr {
border-radius: 0 99px 99px 0;
border-left-width: 1px;
}
&:rtl {
border-radius: 99px 0 0 99px;
border-right-width: 1px;
}
} }
} }
.quick-slider { .quick-slider {
padding: 0 $base_padding;
& > StBoxLayout { spacing: $base_padding; } & > StBoxLayout { spacing: $base_padding; }
.icon-button { padding: $base_padding; }
.slider-bin { .slider-bin {
&:focus {@include button(focus);} &:focus {@include button(focus);}
min-height: 16px; // slider size min-height: 16px; // slider size
padding: $base_padding; padding: $base_padding;
border-radius: 99px; border-radius: 99px;
} }
.quick-toggle-icon { icon-size: $base_icon_size; }
.icon-button { background-color: transparent; }
} }
.quick-toggle-menu { .quick-toggle-menu {
background-color: $card_bg_color; @include card;
border-radius: $base_border_radius*3; border-radius: $base_border_radius*3;
padding: $base_padding*2; padding: $base_padding*2;
margin: $base_padding*2 $base_padding*3 0; margin: $base_padding*2 $base_padding*3 0;
@ -79,7 +104,7 @@
icon-size: $base_icon_size*1.5; // a non-standard symbolic size but ok icon-size: $base_icon_size*1.5; // a non-standard symbolic size but ok
border-radius: 999px; border-radius: 999px;
padding: 1.5 * $base_padding; 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;}
} }
@ -100,8 +125,6 @@
.quick-settings-system-item { .quick-settings-system-item {
& > StBoxLayout { spacing: 2 * $base_padding; } & > StBoxLayout { spacing: 2 * $base_padding; }
.icon-button > StIcon { -st-icon-style: symbolic; }
& .power-item { & .power-item {
min-height: 0; min-height: 0;
min-width: 0; min-width: 0;
@ -116,3 +139,40 @@
.nm-network-item { .nm-network-item {
.wireless-secure-icon { icon-size: 0.5 * $base_icon_size; } .wireless-secure-icon { icon-size: 0.5 * $base_icon_size; }
} }
.bt-device-item {
.popup-menu-icon { -st-icon-style: symbolic; }
}
.bt-menu-placeholder {
@extend %title_4;
text-align: center;
padding: 2em 4em;
}
.device-subtitle { color: transparentize($fg_color, 0.5); }
// background apps
.background-apps-quick-toggle {
min-height: 40px;
background-color: transparent;
& StIcon { icon-size: $base_icon_size !important; }
}
.background-app-item {
& .title { @extend %heading; }
& .subtitle { @extend %caption; }
& .popup-menu-icon {
icon-size: $large_icon_size !important;
-st-icon-style: regular !important;
}
& .close-button {
@extend .icon-button;
padding: $base_padding;
}
&.popup-inactive-menu-item { color: $fg_color; }
}

View File

@ -1,78 +0,0 @@
/* Screen Shield */
.unlock-dialog-clock {
color: white;
font-weight: 300;
text-align: center;
spacing: 24px;
padding-bottom: 2.5em;
}
.unlock-dialog-clock-time {
font-size: 64pt;
padding-top: 42px;
@extend %numeric;
}
.unlock-dialog-clock-date {
font-size: 16pt;
font-weight: normal;
}
.unlock-dialog-clock-hint {
font-weight: normal;
padding-top: 48px;
}
.unlock-dialog-notifications-container {
margin: 12px;
spacing: 6px;
width: 23em;
background-color: transparent;
.summary-notification-stack-scrollview {
padding-top: 0;
padding-bottom: 0;
}
.notification,
.unlock-dialog-notification-source {
padding: 12px 16px;
border: none;
background-color: transparentize($osd_fg_color,0.9);
color: $osd_fg_color;
border-radius: $modal_radius;
&.critical { background-color: transparentize($osd_fg_color,0.8) }
}
}
.unlock-dialog-notification-label {
padding-left: 12px;
padding-right: 0;
&:rtl { padding-right: 12px; padding-left: 0; }
}
.unlock-dialog-notification-count-text {
font-weight: bold;
padding: 0 12px;
color: $osd_fg_color;
background-color: transparentize($osd_fg_color, 0.9);
border-radius: 99px;
}
.screen-shield-background { //just the shadow, really
background: black;
box-shadow: 0 2px 4px rgba(0,0,0,0.6);
}
#lockDialogGroup {
background-color: $system_bg_color;
}
#unlockDialogNotifications {
StButton#vhandle, StButton#hhandle {
background-color: transparentize($bg_color,0.7);
&:hover, &:focus { background-color: transparentize($bg_color,0.5); }
&:active { background-color: transparentize($selected_bg_color,0.5); }
}
}

View File

@ -1,24 +1,11 @@
// Search entry // Search entry
$search_entry_width: 320px;
$search_entry_height: 36px;
%search_entry,
.search-entry { .search-entry {
border-radius: $search_entry_height * 0.5; // half the height border-radius: 99px;
margin-top: $base_padding*2; margin-top: $base_padding*2;
margin-bottom: $base_padding; margin-bottom: $base_padding;
padding: $base_padding+1 $base_padding+3; width: 24em;
width: $search_entry_width;
@include entry(normal);
&:hover { @include entry(hover);}
&:focus { @include entry(focus);}
&:insensitive { @include entry(insensitive);}
.search-entry-icon { .search-entry-icon {
color: inherit;
icon-size: $base_icon_size; icon-size: $base_icon_size;
margin-top: 2px; // center vertically margin-top: 2px; // center vertically
padding: 0 4px; padding: 0 4px;

View File

@ -25,7 +25,7 @@
.search-section-content { .search-section-content {
background-color: lighten($system_bg_color, 5%); background-color: lighten($system_bg_color, 5%);
border-radius: $modal_radius*1.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; color: $osd_fg_color;
padding: $base_padding*2; padding: $base_padding*2;
margin:0 $base_margin*3; margin:0 $base_margin*3;

View File

@ -1,8 +1,7 @@
/* App Switcher */ /* App Switcher */
// same as dash // same as dash
$switcher_padding: $base_padding + 4px; // 10px $switcher_padding: $base_padding*2;
$switcher_border_radius: $modal_radius + 8px;
// the full screen container of the switcher // the full screen container of the switcher
@ -15,8 +14,8 @@ $switcher_border_radius: $modal_radius + 8px;
.switcher-list { .switcher-list {
@extend %osd_panel; @extend %osd_panel;
padding: $switcher_padding; padding: $switcher_padding;
border-radius: $switcher_border_radius; border-radius: $modal_radius+$switcher_padding;
box-shadow: 0 8px 8px 0 rgba(0,0,0,0.1); box-shadow: 0 8px 8px 0 $shadow_color;
// container for items in list // container for items in list
.switcher-list-item-container { .switcher-list-item-container {
@ -28,6 +27,9 @@ $switcher_border_radius: $modal_radius + 8px;
@include tile_button($osd_fg_color); @include tile_button($osd_fg_color);
// override over style so mouse doesn't steal focus // override over style so mouse doesn't steal focus
&:hover {background: none;} &:hover {background: none;}
@if $is_highcontrast {
box-shadow: inset 0 0 0 999px transparentize($hc_inset_color,0.2);
}
} }
.separator { .separator {

View File

@ -17,10 +17,7 @@ $window_close_button_padding: 3px;
// Window titles // Window titles
.window-caption { .window-caption {
color: $osd_fg_color; @extend %tooltip;
background-color: lighten($osd_bg_color, 5%);
border-radius: 99px;
padding: $base_padding $base_padding * 2;
} }
// Close button // Close button
@ -43,6 +40,10 @@ $window_close_button_padding: 3px;
&:active { &:active {
background-color: lighten($window_close_button_color, 13%); background-color: lighten($window_close_button_color, 13%);
} }
@if $is_highcontrast {
border:2px solid $outer_borders_color;
}
} }
.workspace-background { .workspace-background {

View File

@ -7,8 +7,14 @@
padding: $base_padding; padding: $base_padding;
.workspace-thumbnail { .workspace-thumbnail {
@extend %overview_panel; color: $osd_fg_color;
border-radius: 3px; 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 // drag and drop indicator
@ -22,7 +28,5 @@
// selected indicator // selected indicator
.workspace-thumbnail-indicator { .workspace-thumbnail-indicator {
border: 3px solid $selected_bg_color; border: 3px solid $selected_bg_color;
border-radius: 3px; border-radius: $base_border_radius;
padding: 0px;
// background-color: transparentize($selected_bg_color, 0.9);
} }

View File

@ -4,7 +4,7 @@ GREEN='\033[0;32m'
YELLOW='\033[0;33m' YELLOW='\033[0;33m'
RESET='\033[0m' RESET='\033[0m'
VERSION=43.rc VERSION=44.rc
echo echo
printf " $YELLOW[ i ]$RESET Upstream version $VERSION\n" printf " $YELLOW[ i ]$RESET Upstream version $VERSION\n"
@ -42,7 +42,7 @@ done <<- EOF
gnome-shell-sass/widgets/_hotplug.scss gnome-shell-sass/widgets/_hotplug.scss
gnome-shell-sass/widgets/_ibus-popup.scss gnome-shell-sass/widgets/_ibus-popup.scss
gnome-shell-sass/widgets/_keyboard.scss gnome-shell-sass/widgets/_keyboard.scss
gnome-shell-sass/widgets/_login-dialog.scss gnome-shell-sass/widgets/_login-lock.scss
gnome-shell-sass/widgets/_looking-glass.scss gnome-shell-sass/widgets/_looking-glass.scss
gnome-shell-sass/widgets/_message-list.scss gnome-shell-sass/widgets/_message-list.scss
gnome-shell-sass/widgets/_misc.scss gnome-shell-sass/widgets/_misc.scss
@ -52,7 +52,6 @@ done <<- EOF
gnome-shell-sass/widgets/_panel.scss gnome-shell-sass/widgets/_panel.scss
gnome-shell-sass/widgets/_popovers.scss gnome-shell-sass/widgets/_popovers.scss
gnome-shell-sass/widgets/_quick-settings.scss gnome-shell-sass/widgets/_quick-settings.scss
gnome-shell-sass/widgets/_screen-shield.scss
gnome-shell-sass/widgets/_screenshot.scss gnome-shell-sass/widgets/_screenshot.scss
gnome-shell-sass/widgets/_scrollbars.scss gnome-shell-sass/widgets/_scrollbars.scss
gnome-shell-sass/widgets/_search-entry.scss gnome-shell-sass/widgets/_search-entry.scss