Gnome-Shell: Update theme for gnome 43

This commit is contained in:
Daniel Ruiz de Alegría
2022-09-15 14:22:21 +02:00
parent 90e74929c7
commit 2d7e99683a
32 changed files with 1470 additions and 1488 deletions
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
+23
View File
@@ -3,6 +3,8 @@
$_dark_base_color: #272a34;
$is_highcontrast: "false";
$base_color: if($variant == 'light', darken(#ffffff, 2%), $_dark_base_color);
$text_color: if($variant == 'light', black, white);
$bg_color: if($variant == 'light', #ffffff, darken($_dark_base_color, 2%));
@@ -53,6 +55,15 @@ $tooltip_borders_color: $osd_outer_borders_color;
$shadow_color: transparentize(black, if($variant == 'light', 0.9, 0.7));
$system_bg_color: $_dark_base_color;
// button
$button_mix_factor: 5%;
// cards
$card_bg_color: if($variant == 'light', darken($bg_color, 5%), lighten($bg_color, 2%));
// notifications
$bubble_buttons_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 10%));
$drop_target_color: #19a187;
//insensitive state derived colors
@@ -76,6 +87,18 @@ $backdrop_scrollbar_slider_color: mix($backdrop_fg_color, $backdrop_bg_color, 40
$backdrop_menu_color: if($variant == 'light', $backdrop_base_color, mix($backdrop_bg_color, $backdrop_base_color, 20%));
// derived checked colors
$checked_bg_color: if($variant=='light', darken($base_color, 7%), lighten($base_color, 9%));
$checked_fg_color: if($variant=='light', darken($fg_color, 7%), lighten($fg_color, 7%));
// derived hover colors
$hover_bg_color: if($variant=='light', darken($base_color, 3%), lighten($base_color, 4%));
$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 10%));
// derived active colors
$active_bg_color: if($variant=='light', darken($base_color, 5%), lighten($base_color, 6%));
$active_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 12%));
//special cased widget colors
$suggested_bg_color: $selected_bg_color;
$suggested_border_color: $selected_borders_color;
@@ -6,85 +6,7 @@ $dialog_box_shadow: 0 2px 6px -2px transparentize(black, .8);
icon-shadow: 0 1px 5px $shadow_color;
}
/* OSD */
%osd_panel {
background-color: transparentize($osd_bg_color, 0.04);
box-shadow: $dialog_box_shadow;
}
// buttons on OSD elements
// that are undecorated by default and use OSD colors
%osd_button {
@include button(undecorated);
border: 0!important;
&: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); }
}
/* Switches */
.toggle-switch {
height: 22px;
width: 44px;
}
/* Slider */
.slider {
-barlevel-background-color: $borders_color;
-barlevel-border-width: 0;
-slider-handle-radius: 0;
}
/* Popovers/Menus */
.popup-menu-boxpointer {
-arrow-rise: 6px;
}
.popup-menu-content {
padding: 4px;
box-shadow: $dialog_box_shadow;
background-color: $base_color;
}
.popup-menu-item {
border: 1px solid transparent;
border-bottom: 0;
margin-top: 0;
margin-bottom: 0;
padding-top: 8px;
padding-bottom: 8px;
&:checked {
border-color: $borders_color;
background-color: $bg_color!important;
}
}
.popup-sub-menu {
background-color: $bg_color;
border: 1px solid $borders_color;
border-top: 0;
.popup-menu-item {
padding-top: 7px;
padding-bottom: 7px;
&:focus, &:hover { background-color: $hover_bg_color!important; }
&:checked { background-color: $checked_bg_color!important; }
&:active { background-color: $active_bg_color!important; }
}
}
.popup-separator-menu-item { margin: 6px 0; }
/* Message List */
.message-list .message-list-placeholder,
.message-list-controls {
font-weight: normal;
}
.message-list-controls {
spacing: $base_padding * 2;
@include fontsize(10);
@@ -145,18 +67,6 @@ $dialog_box_shadow: 0 2px 6px -2px transparentize(black, .8);
}
}
/* Screenshot UI */
.screenshot-ui-shot-cast-container {
background-color: lighten($osd_bg_color, 4%);
}
.screenshot-ui-shot-cast-button {
background-color: transparent;
&:hover, &:focus { background-color: lighten($osd_bg_color, 10%); }
&:active { background-color: lighten($osd_bg_color, 15%); }
&:checked { background-color: white; color: black; }
}
/* Top Bar */
#panel {
$_panel_bg: transparentize($bg_color, .2);
@@ -217,10 +127,6 @@ $dialog_box_shadow: 0 2px 6px -2px transparentize(black, .8);
/* Date/Time Menu */
.datemenu-today-button {
&:insensitive { color: inherit; }
.day-label { font-weight: normal; }
.date-label { font-weight: lighter; }
}
/* Search */
@@ -1,7 +1,13 @@
// When color definition differs for dark and light variant,
// it gets @if-ed depending on $variant
$base_color: if($variant == 'light', #fff, darken(desaturate(#241f31, 100%), 2%));
@import '_palette.scss';
$is_highcontrast: "false";
$_dark_base_color: darken(desaturate(#241f31, 100%), 2%);
$base_color: if($variant == 'light', #fff, $_dark_base_color);
$bg_color: if($variant == 'light', #f6f5f4, lighten($base_color, 5%));
$fg_color: if($variant == 'light', transparentize(black, .2), white);
@@ -15,13 +21,13 @@ $borders_edge: if($variant == 'light', rgba(255,255,255,0.8), lighten($bg_color,
$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', #e5a50a, #f5c211);;
$error_color: if($variant == 'light', #e01b24, #c01c28);
$success_color: if($variant == 'light', #2ec27e, #26a269);
$destructive_color: if($variant == 'light', #e01b24, darken(#e01b24, 10%));
$warning_color: if($variant == 'light', $yellow_5, #cd9309);
$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_bg_color: transparentize(desaturate($bg_color, 100%),0.04);
$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);
@@ -29,6 +35,15 @@ $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));
// button
$button_mix_factor: 5%;
// cards
$card_bg_color: if($variant == 'light', darken($bg_color, 5%), lighten($bg_color, 2%));
// notifications
$bubble_buttons_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 10%));
// overview background color
$system_bg_color: $base_color;
@@ -44,3 +59,16 @@ $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_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%));
// 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%));
@@ -35,17 +35,10 @@ $base_border_radius: 8px;
// radii of things that display over other things, e.g. popovers
$modal_radius: $base_border_radius*2; // 24px
// derived hover colors
$hover_bg_color: if($variant=='light', darken($base_color, 3%), lighten($base_color, 4%));
$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 4%));
// derived active colors
$active_bg_color: if($variant=='light', darken($base_color, 5%), lighten($base_color, 6%));
$active_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 6%));
// derived checked colors
$checked_bg_color: if($variant=='light', darken($base_color, 7%), lighten($base_color, 9%));
$checked_fg_color: if($variant=='light', darken($fg_color, 7%), lighten($fg_color, 9%));
// Chroma key to flag when a background-color is always occluded, not visible.
// This allows any box-shadow behind it to be rendered more efficiently by
// omitting the middle rectangle.
$invisible_occluded_bg_color: rgba(3,2,1,0);
// fonts
$base_font_size: 10;
@@ -86,7 +79,7 @@ stage {
padding: $base_padding;
spacing: $base_padding;
border: 2px solid transparent;
transition-duration: 100ms;
transition-duration: 200ms;
text-align: center;
}
@@ -114,11 +107,28 @@ stage {
&: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);}
&:checked { @include button(checked);}
& > StIcon { icon-size: $base_icon_size; }
}
// buttons in dialogs/notifications
// lighter in color and have a greater radius
$bubble_button_radius:$base_border_radius*1.25;
$bubble_buttons_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 7%));
%bubble_button {
padding: $base_padding * 2;
@@ -163,11 +173,11 @@ $bubble_buttons_color: if($variant == 'light', darken($bg_color, 12%), lighten($
// that are undecorated by default and use OSD colors
%osd_button {
@include button(undecorated);
&:insensitive { @include button(undecorated, $c:$osd_bg_color);}
&:focus { @include button(focus, $c:$osd_bg_color);}
&:hover { @include button(hover, $c:$osd_bg_color);}
&:active { @include button(active, $c:$osd_bg_color);}
&:outlined,&:checked { @include button(checked, $c:$osd_bg_color);}
&: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);}
}
/* General Typography */
@@ -1,16 +1,4 @@
39c39
< $hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 4%));
---
> $hover_bg_color: if($variant=='light', darken($base_color, 3%), lighten($base_color, 4%));
43c43
< $active_bg_color: if($variant=='light', darken($bg_color, 5%), lighten($bg_color, 6%));
---
> $active_bg_color: if($variant=='light', darken($base_color, 5%), lighten($base_color, 6%));
47c47
< $checked_bg_color: if($variant=='light', darken($bg_color, 7%), lighten($bg_color, 9%));
---
> $checked_bg_color: if($variant=='light', darken($base_color, 7%), lighten($base_color, 9%));
51c51
44c44
< $base_font_size: 11;
---
> $base_font_size: 10;
@@ -129,20 +129,6 @@
}
}
@function draw_border_color ($c) {
//
// colored buttons want the border form the base color
//
@return if($variant == 'light', darken($c, 18%), darken($c, 4%));
}
// buttons
// since buttons are all flat an borderless now the mixin is simpler
@mixin button($t, $tc:$fg_color, $c:$bg_color) {
$button_bg_color: lighten($c, 5%);
//
// Button drawing function
//
@@ -155,49 +141,66 @@ $button_bg_color: lighten($c, 5%);
// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
//
// since buttons are all flat an borderless now the mixin is simpler
border: 1px solid transparent;
@mixin button($t, $tc:$fg_color, $c:$bg_color) {
$button_bg_color: mix($tc, $c, $button_mix_factor);
transition-duration: 100ms;
// normal button
@if $t==normal {
color: $tc;
background-color: $button_bg_color;
border-color: draw_border_color($c);
@if $is_highcontrast == "true" {
box-shadow: inset 0 0 0 1px $button_inset_color;
}
}
// focused button
@if $t==focus {
color: $tc;
background-color: mix($button_bg_color, $selected_bg_color, 90%);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4) !important;
&:hover {
background-color: mix(lighten($button_bg_color, 3%), $selected_bg_color, 90%);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important;
}
&:active {
background-color: mix(lighten($button_bg_color, 6%), $selected_bg_color, 90%);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important;
}
}
// hover button
@else if $t==hover {
color: $tc;
background-color: mix($tc, $button_bg_color, 3%);
border-color: if($variant == 'light', draw_border_color(lighten($c, 7%)), draw_border_color($c));
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: mix($tc, $button_bg_color, 6%);
border-color: draw_border_color(if($variant == 'light', $c, darken($c,7%)));
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: mix($tc, $button_bg_color, 9%);
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%);}
}
@@ -206,18 +209,21 @@ $button_bg_color: lighten($c, 5%);
@else if $t==insensitive {
color: transparentize($tc, 0.5);
background-color: transparentize($tc, .95);
border-color: $insensitive_borders_color;
@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 transparentize($selected_bg_color, 0.4);
box-shadow: inset 0 0 0 2px lighten($selected_bg_color, 10%);
}
&:hover, &:focus {
background-color: mix($tc, $selected_bg_color, 5%);
background-color: lighten($selected_bg_color, 5%);
color: lighten($selected_fg_color, 5%);
}
&:active {
@@ -235,11 +241,11 @@ $button_bg_color: lighten($c, 5%);
@else if $t==undecorated {
background-color: transparent;
background-color: none;
border-color: transparent;
box-shadow: none;
&:insensitive {
@include button(insensitive);
background-color: transparent;
//color: transparentize($selected_fg_color, .5);
color: transparentize($selected_fg_color, .5);
}
}
}
@@ -272,6 +278,7 @@ $button_bg_color: lighten($c, 5%);
// overview icon, dash, app grid
@mixin overview_icon($color, $flat: true) {
transition-duration: 400ms;
.overview-icon { @extend %tile; }
@if $flat {
.overview-icon { background-color: transparent;}
@@ -303,25 +310,24 @@ $button_bg_color: lighten($c, 5%);
@mixin card($flat: false) {
border-radius: $base_border_radius;
margin: $base_margin;
box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
box-shadow: 0 1px 1px 0 $shadow_color;
@if $flat {
@include button(undecorated);
box-shadow: none !important;
&:insensitive { border-color: transparent; }
} @else {
@include button(normal);
@include button(normal, $c:$card_bg_color);
}
&:focus {
@include button(focus);
@include button(focus, $c:$card_bg_color);
}
&:hover {
@include button(hover);
@include button(hover, $c:$card_bg_color);
}
&:active {
@include button(active);
@include button(active, $c:$card_bg_color);
}
}
@@ -1,45 +0,0 @@
132a133,139
> @function draw_border_color ($c) {
> //
> // colored buttons want the border form the base color
> //
> @return if($variant == 'light', darken($c, 18%), darken($c, 4%));
> }
>
138c145
< $button_bg_color: mix($tc, $c, 5%);
---
> $button_bg_color: lighten($c, 5%);
151a159,160
> border: 1px solid transparent;
>
155a165
> border-color: draw_border_color($c);
176c186,187
< background-color: lighten($button_bg_color, 3%);
---
> background-color: mix($tc, $button_bg_color, 3%);
> border-color: if($variant == 'light', draw_border_color(lighten($c, 7%)), draw_border_color($c));
182c193,194
< background-color: lighten($button_bg_color, 6%);
---
> background-color: mix($tc, $button_bg_color, 6%);
> border-color: draw_border_color(if($variant == 'light', $c, darken($c,7%)));
188c200
< background-color: lighten($button_bg_color, 9%);
---
> background-color: mix($tc, $button_bg_color, 9%);
196a209
> border-color: $insensitive_borders_color;
207c220
< background-color: lighten($selected_bg_color, 5%);
---
> background-color: mix($tc, $selected_bg_color, 5%);
224a238
> border-color: transparent;
228c228
< color: transparentize($selected_fg_color, .5);
---
> //color: transparentize($selected_fg_color, .5);
296a311
> &:insensitive { border-color: transparent; }
@@ -1,41 +0,0 @@
// When color definition differs for dark and light variant,
// it gets @if ed depending on $variant
$base_color: #222;
$bg_color: #000;
$fg_color: #fff;
$selected_fg_color: #ffffff;
$selected_bg_color: darken(#4a90d9,20%);
$selected_borders_color: darken($selected_bg_color, 20%);
$borders_color: darken($bg_color,12%);
$borders_edge: transparentize($fg_color, 0.9);
$link_color: lighten($selected_bg_color,20%);
$link_visited_color: lighten($selected_bg_color,10%);
$top_hilight: $borders_edge;
$warning_color: #f57900;
$error_color: #cc0000;
$success_color: darken(#73d216,10%);
$destructive_color: darken(#ef2929,10%);
$osd_fg_color: #eeeeec;
$osd_bg_color: #2e3436;
$osd_borders_color: rgba(0,0,0, 0.7);
$osd_outer_borders_color: rgba(255,255,255, 0.1);
$shadow_color: rgba(0,0,0, 0.1);
//insensitive state derived colors
$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%);
@@ -24,7 +24,6 @@
@import 'widgets/hotplug';
// Dialogs
@import 'widgets/dialogs';
@import 'widgets/network-dialog';
// OSDs
@import 'widgets/osd';
@import 'widgets/switcher-popup';
@@ -33,6 +32,7 @@
// Panel
@import 'widgets/panel';
@import 'widgets/corner-ripple';
@import 'widgets/quick-settings';
// Overview
@import 'widgets/overview';
@import 'widgets/window-picker';
@@ -78,8 +78,8 @@ $app_icon_size: 96px;
.app-folder-dialog-container {
padding: $base_padding*2;
width: 640px;
height: 640px;
width: 720px;
height: 720px;
}
// Running app indicator (also shown in dash)
@@ -102,6 +102,7 @@ $app_icon_size: 96px;
// App Grid pagination indicators
.page-indicator {
padding: $base_padding $base_padding * 2 0;
transition-duration:400ms;
.page-indicator-icon {
width: 10px;
@@ -124,8 +125,6 @@ $app_icon_size: 96px;
}
.page-navigation-hint {
width: 300px;
&.dnd {
background: rgba(255, 255, 255, 0.1);
}
@@ -148,7 +147,15 @@ $app_icon_size: 96px;
}
.page-navigation-arrow {
& > StIcon {
margin: 6px;
padding: 18px;
width: 24px;
height: 24px;
border-radius: 99px;
}
&: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));}
}
@@ -4,3 +4,7 @@
@extend %button; // that's it
min-height: 22px;
}
.icon-button {
@extend %icon_button; // that's it
}
@@ -60,7 +60,7 @@
}
}
$calendar_day_size: 32px;
$calendar_day_size: 3em;
.calendar-day-base {
text-align: center;
@@ -69,6 +69,7 @@
height: $calendar_day_size !important;
width: $calendar_day_size !important;
border-radius: 99px;
transition-duration: 100ms;
@extend %numeric;
@extend %smaller;
@@ -3,8 +3,8 @@
$ripple_size: 50px;
.ripple-box {
background-color: lighten(transparentize($selected_bg_color, 0.7), 40%);
box-shadow: 0 0 2px 2px lighten($selected_bg_color, 20%);
background-color: rgba(255,255,255,0.2);
box-shadow: 0 0 2px 2px rgba(255,255,255,0.2);
// plus + 2px for the border (box-shadow)
width: $ripple_size + 2px;
height: $ripple_size + 2px;
@@ -165,3 +165,8 @@
height: 300px;
width: 300px;
}
/* Access portal dialog */
.access-dialog {
text-align: center;
}
@@ -29,8 +29,11 @@
.horizontal & { padding-left: $base_padding*2; }
}
.candidate-page-button { padding: $base_padding;}
.candidate-page-button {
padding: $base_padding;
& StIcon { icon-size: $base_icon_size; }
}
.candidate-page-button-previous { border-radius: $base_border_radius 0px 0px $base_border_radius; border-right-width: 0;box-shadow: none;}
.candidate-page-button-next { border-radius: 0px $base_border_radius $base_border_radius 0px;box-shadow: none;}
.candidate-page-button-icon { icon-size: $base_icon_size; }
@@ -61,6 +61,12 @@ $default_key_bg_color: lighten($osd_bg_color, 10%);
&:active { @include keyboard_key(active, $default_key_bg_color, $osd_fg_color);}
&:checked { @include keyboard_key(checked, $default_key_bg_color, $osd_fg_color);}
border-radius: $key_border_radius;
// keys that may be latched: ctrl/alt/shift
&:latched {
border-color: lighten($selected_bg_color, 5%);
background-color: $selected_bg_color;
}
}
// enter key is suggested-action
@@ -130,9 +136,9 @@ $default_key_bg_color: lighten($osd_bg_color, 10%);
// suggestions
.word-suggestions {
@include fontsize($base_font_size + 3);
@include fontsize($base_font_size + 1);
spacing: 12px;
min-height: 20pt;
min-height: 17pt;
padding: $base_padding*2;
color: $osd_fg_color;
@@ -141,7 +147,7 @@ $default_key_bg_color: lighten($osd_bg_color, 10%);
margin: 0 3px;
min-width: 32px;
border-radius: $base_border_radius - 2px;
padding: $base_padding $base_padding*3;
padding: 0px $base_padding*3;
@include keyboard_key(undecorated, $key_bg_color, $osd_fg_color);
@@ -16,7 +16,6 @@
.modal-dialog-button-box { spacing: 3px; }
.modal-dialog-button {
padding: 4px 18px;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
background-color: darken($system_bg_color, 3%);
border-color: darken($system_bg_color, 3%);
color: $osd_fg_color;
@@ -28,7 +27,6 @@
}
&:active {
$_active_c: darken($_gdm_bg, 5%);
box-shadow: none;
background-color: $_active_c;
border-color: $_active_c;
}
@@ -103,7 +101,6 @@
@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; }
}
@@ -9,7 +9,7 @@
color: $osd_fg_color;
padding: $base_padding;
spacing: $base_padding;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
box-shadow: 0 2px 4px 0 $shadow_color;
& > #Toolbar {
border: none;
@@ -79,6 +79,8 @@
color: $insensitive_fg_color;
&:hover { color: lighten($insensitive_fg_color, 20%); }
&:active { color: darken($insensitive_fg_color, 20%); }
& StIcon { icon-size: 12px; }
}
}
@@ -123,6 +123,8 @@
margin: 1px;
&:hover {background-color: transparentize($fg_color, 0.8);}
&:active {background-color: transparentize($fg_color, 0.9);}
& StIcon { icon-size: $base_icon_size; }
}
// body
@@ -157,6 +159,8 @@
// fix margin for last button
&:last-child:ltr { margin-right: $base_margin*3; }
&:last-child:rtl { margin-left: $base_margin*3; }
& StIcon { icon-size: $base_icon_size; }
}
// album-art
@@ -1,48 +0,0 @@
/* Select Network dialogs */
.nm-dialog {
max-height: 34em;
min-height: 31em;
min-width: 32em;
}
.nm-dialog-content {
spacing: 20px;
padding: 24px;
}
.nm-dialog-header { @extend %heading; }
.nm-dialog-subheader { color: $insensitive_fg_color;}
.nm-dialog-header-icon { icon-size: $large_icon_size;}
.nm-dialog-header-hbox { spacing: 10px; }
.nm-dialog-scroll-view {
padding:$base_padding;
border-radius: $base_border_radius;
background-color: $base_color;
}
.nm-dialog-item {
padding: $base_padding * 2;
&:selected {
background-color: $selected_bg_color;
border-radius: $base_border_radius - 3px;
color: $selected_fg_color;
}
&:hover { background-color:$hover_bg_color;}
}
.nm-dialog-icon { icon-size: $base_icon_size; }
.nm-dialog-icons { spacing: $base_padding * 2; }
// no networks
.no-networks-box { spacing: $base_padding; }
.no-networks-label { color: $insensitive_fg_color; }
// airplane mode
.nm-dialog-airplane-box {
text-align: center;
spacing: 12px;
}
.nm-dialog-airplane-headline { @extend %title_3;}
.nm-dialog-airplane-text { color: $insensitive_fg_color;}
@@ -8,7 +8,7 @@ $notification_banner_radius: $base_border_radius*1.5;
.notification-banner {
min-height: $notification_banner_height;
width: $notification_banner_width;
box-shadow: 0 2px 4px 2px rgba(0,0,0,0.1);
box-shadow: 0 2px 4px 2px $shadow_color;
border-radius: $notification_banner_radius;
margin: $base_margin;
@@ -14,8 +14,6 @@ $osd_levelbar_height:6px;
StIcon { icon-size:$large_icon_size;}
.osd-monitor-label { font-size: 3em; }
StLabel {
&:ltr { margin-right: 6px; }
&:rtl { margin-left: 6px; }
@@ -37,6 +35,17 @@ $osd_levelbar_height:6px;
}
}
// Monitor number label
.osd-monitor-label {
@extend %osd_panel;
border-radius: $modal_radius;
font-size: 3em;
font-weight: bold;
margin: $base_margin * 3;
text-align: center;
min-width: 1.3em;
}
/* Pad OSD */
.pad-osd-window {
padding: 32px;
@@ -40,7 +40,14 @@ $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; }
}
&.screen-recording-indicator,
&.screen-sharing-indicator {
StBoxLayout {
spacing: $base_padding;
}
@@ -66,6 +73,9 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
&.screen-recording-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.15);
}
&.screen-sharing-indicator {
box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.15);
}
}
&:hover {
@@ -80,6 +90,9 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
&.screen-recording-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.1);
}
&.screen-sharing-indicator {
box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.1);
}
}
&:active:hover, &:overview:hover, &:focus:hover, &:checked:hover {
@@ -94,6 +107,9 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
&.screen-recording-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.2);
}
&.screen-sharing-indicator {
box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.2);
}
}
// status area icons
@@ -137,6 +153,9 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
&.screen-recording-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.15);
}
&.screen-sharing-indicator {
box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.15);
}
}
&:hover {
@@ -151,6 +170,9 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
&.screen-recording-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.1);
}
&.screen-sharing-indicator {
box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.1);
}
}
&:active:hover, &:overview:hover, &:focus:hover, &:checked:hover {
@@ -165,6 +187,9 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
&.screen-recording-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.2);
}
&.screen-sharing-indicator {
box-shadow: inset 0 0 0 100px transparentize($warning_color, 0.2);
}
}
}
}
@@ -19,18 +19,18 @@
// popover content
.popup-menu-content {
padding: $base_padding;
border-radius: $modal_radius - 2px;
border-radius: $modal_radius*1.25;
border: 1px solid $borders_edge;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
box-shadow: 0 2px 4px 0 $shadow_color;
background-color: $bg_color;
}
// menu items
.popup-menu-item {
padding: $base_padding*1.5 $base_padding*2;
border-radius: $base_border_radius;
border-radius: $base_border_radius*1.5;
spacing: $base_padding;
transition: 0.2s all ease;
transition-duration: 100ms;
background-color: transparent;
&:ltr {padding-left: $base_padding;}
@@ -100,12 +100,12 @@
border-radius: 0 0 $base_border_radius $base_border_radius;
}
&:focus,&:hover { background-color: lighten($hover_bg_color, 10%) !important;}
&:focus,&:hover { background-color: $hover_bg_color !important;}
&:checked {
background-color: lighten($checked_bg_color, 10%) !important;
background-color: $checked_bg_color !important;
&:focus,&:hover { background-color: lighten($checked_bg_color, 8%) !important;}
}
&:active { background-color: lighten($active_bg_color, 10%) !important;}
&:active { background-color: $active_bg_color !important;}
}
.popup-menu-section {
@@ -164,28 +164,6 @@
-arrow-rise: 0px; // hide the beak on the menu
}
// system status menu
.aggregate-menu {
min-width: 22em;
// this is unneeded at the top-level in this menu, hide it
.popup-menu-ornament { width: 0 !important; }
// lock screen, shutdown, etc. buttons
.popup-menu-icon {
-st-icon-style: symbolic;
&:ltr {margin-right: $base_margin*2;}
&:rtl {margin-left: $base_margin*2;}
}
// account for ornaments in submenus with padding
.popup-sub-menu .popup-menu-item > :first-child {
// this value is hardcoded for visual effect
&:ltr { margin-left: 1em;}
&:rtl { margin-right: 1em;}
}
}
// right-click (and panel) app menu
.app-menu {
max-width: 27.25em;
@@ -0,0 +1,118 @@
.quick-settings {
padding: $base_padding*3;
border-radius: $modal_radius*2.25;
.icon-button, .button {
padding: $base_padding*1.75;
}
}
.quick-settings-grid {
spacing-rows: $base_padding*2;
spacing-columns: $base_padding*2;
}
.quick-toggle {
border-radius: 99px;
min-width: 12em;
max-width: 12em;
min-height: 40px;
border:none;
&:checked { @include button(default); }
& > StBoxLayout { spacing: $base_padding; }
/* Move padding into the box; this is to allow menu arrows
to extend to the border */
&.button { padding: 0; }
& > StBoxLayout { padding: 0 $base_padding*2; }
&:ltr > StBoxLayout { padding-left: $base_padding*2.5; }
&:rtl > StBoxLayout { padding-right: $base_padding*2.5; }
.quick-toggle-label { font-weight: bold; }
.quick-toggle-icon, .quick-toggle-arrow { icon-size: $base_icon_size; }
}
.quick-menu-toggle {
&:ltr > StBoxLayout { padding-right: 0; }
&:rtl > StBoxLayout { padding-left: 0; }
& .quick-toggle-arrow {
background-color: transparentize($fg_color, 0.9);
padding: $base_padding $base_padding*1.75;
&:ltr { border-radius: 0 99px 99px 0; }
&:rtl { border-radius: 99px 0 0 99px; }
}
}
.quick-slider {
padding: 0 $base_padding;
& > StBoxLayout { spacing: $base_padding; }
.slider-bin {
&:focus {@include button(focus);}
min-height: 16px; // slider size
padding: $base_padding;
border-radius: 99px;
}
.quick-toggle-icon { icon-size: $base_icon_size; }
.icon-button { background-color: transparent; }
}
.quick-toggle-menu {
background-color: $card_bg_color;
border-radius: $base_border_radius*3;
padding: $base_padding*2;
margin: $base_padding*2 $base_padding*3 0;
.popup-menu-item > StIcon { -st-icon-style: symbolic; }
& .header {
spacing-rows: 0.5 * $base_padding;
spacing-columns: $base_padding*2;
padding-bottom: 2 * $base_padding;
& .icon {
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%);
&.active { background-color: $selected_bg_color; }
}
& .title {
@extend %title_3;
}
& .subtitle {
@extend %caption_heading;
}
}
}
.quick-toggle-menu-container {
}
.quick-settings-system-item {
& > StBoxLayout { spacing: 2 * $base_padding; }
.icon-button > StIcon { -st-icon-style: symbolic; }
& .power-item {
min-height: 0;
min-width: 0;
&:insensitive {
@include button(normal);
background-color: transparent;
}
}
}
.nm-network-item {
.wireless-secure-icon { icon-size: 0.5 * $base_icon_size; }
}
@@ -48,7 +48,9 @@
}
.unlock-dialog-notification-label {
padding: 0 0 0 12px;
padding-left: 12px;
padding-right: 0;
&:rtl { padding-right: 12px; padding-left: 0; }
}
.unlock-dialog-notification-count-text {
@@ -25,13 +25,16 @@ $screenshot_ui_button_red: $error_color;
.screenshot-ui-close-button {
@extend .window-close; // copy window close button
padding: $base_padding; // but with more padding
&.left { margin-left: 8px; }
&.right { margin-right: 8px; }
padding: $base_padding !important; // but with more padding
margin-top: 12px;
box-shadow: 0 2px 4px 0 $shadow_color;
&.left { margin-left: 12px;}
&.right { margin-right: 12px;}
}
.screenshot-ui-type-button {
@extend %osd_button;
min-width: 48px;
padding: $base_padding * 2 $base_padding * 3 !important;
border-radius: $screenshot_ui_panel_border_radius - $screenshot_ui_panel_padding;
}
@@ -46,7 +49,7 @@ $screenshot_ui_button_red: $error_color;
.screenshot-ui-capture-button-circle {
background-color: $osd_fg_color;
transition-duration: 200ms;
&:hover, &:focus { background-color: $hover_bg_color; }
&:hover, &:focus { background-color: $hover_bg_color;}
border-radius: 99px;
}
@@ -66,48 +69,47 @@ $screenshot_ui_button_red: $error_color;
.screenshot-ui-capture-button-circle {
background-color: $screenshot_ui_button_red;
}
&:hover, &:focus {
.screenshot-ui-capture-button-circle {
background-color: darken($screenshot_ui_button_red, 15%);
background-color: lighten($screenshot_ui_button_red, 5%);
}
}
&:active {
.screenshot-ui-capture-button-circle {
background-color: darken($screenshot_ui_button_red, 30%);
background-color: darken($screenshot_ui_button_red, 7%);
}
}
}
}
.screenshot-ui-shot-cast-container {
background-color: $hover_bg_color;
background-color: lighten($osd_bg_color,5%);
border-radius: $modal_radius;
padding: $screenshot_ui_shot_cast_spacing;
spacing: $screenshot_ui_shot_cast_spacing;
&:ltr { margin-left: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding; }
&:rtl { margin-right: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding; }
&:ltr { margin-left: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding;}
&:rtl { margin-right: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding;}
}
.screenshot-ui-shot-cast-button {
padding: $base_padding $base_padding*2;
background-color: transparent;
&:hover, &:focus { background-color: lighten($hover_bg_color, 5%); }
&:active { background-color: lighten($active_bg_color,5%); }
&:checked { background-color: white; color: black; }
&:hover, &:focus { background-color: lighten($osd_bg_color, 10%);}
&:active { background-color: lighten($active_bg_color,5%);}
&:checked { background-color: white;color: black;}
&:insensitive { color: transparentize($osd_fg_color, 0.5);}
border-radius: $modal_radius - $screenshot_ui_shot_cast_spacing;
StIcon { icon-size: $base_icon_size; }
StIcon { icon-size: $base_icon_size;}
}
.screenshot-ui-show-pointer-button {
@extend %osd_button;
border-radius: 99px;
padding: $base_padding * 2 !important;
StIcon { icon-size: $base_icon_size; }
StIcon { icon-size: $base_icon_size;}
}
.screenshot-ui-area-indicator-shade {
@@ -174,7 +176,7 @@ $screenshot_ui_button_red: $error_color;
}
.screenshot-ui-window-selector-check {
color: white;
color: $selected_fg_color;
background-color: $selected_bg_color;
}
}
@@ -184,8 +186,8 @@ $screenshot_ui_button_red: $error_color;
transition-duration: 200ms;
background-color: rgba(0,0,0,.5);
&:hover { background-color: rgba(0,0,0,.3); }
&:active { background-color: rgba(0,0,0,.7); }
&:hover { background-color: rgba(0,0,0,.3);}
&:active { background-color: rgba(0,0,0,.7);}
&:checked {
background-color: transparent;
border: 2px white;
@@ -5,7 +5,7 @@ $window_picker_padding: $base_padding * 2; // 12px
$window_thumbnail_label_color: transparentize($osd_bg_color, 0.4);
$window_close_button_color: darken(transparentize($osd_bg_color, .05), 3%);
$window_close_button_color: transparentize(lighten($osd_bg_color, 7%), .02);
$window_close_button_size: 30px;
$window_close_button_padding: 3px;
@@ -18,7 +18,7 @@ $window_close_button_padding: 3px;
// Window titles
.window-caption {
color: $osd_fg_color;
background-color: $osd_bg_color;
background-color: lighten($osd_bg_color, 5%);
border-radius: 99px;
padding: $base_padding $base_padding * 2;
}
@@ -27,26 +27,27 @@ $window_close_button_padding: 3px;
.window-close {
background-color: $window_close_button_color;
color: $osd_fg_color;
border-radius: $window_close_button_size * 0.5 + $window_close_button_padding * 2;
border-radius: 99px;
box-shadow: 0 2px 4px 0 $shadow_color;
padding: $window_close_button_padding;
height: $window_close_button_size;
width: $window_close_button_size;
transition-duration: 300ms;
transition-duration: 100ms;
& StIcon { icon-size: 24px; } // uses non standard icon size
&:hover {
background-color: mix($osd_fg_color, $window_close_button_color, 15%);
background-color: lighten($window_close_button_color, 7%);
}
&:active {
color: transparentize($osd_fg_color, 0.2);
background-color: darken($window_close_button_color, 5%);
background-color: lighten($window_close_button_color, 13%);
}
}
.workspace-background {
// 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);
}
@@ -19,7 +19,6 @@
.Label {
stroke: none !important;
stroke-width: .1 !important;
font-size: .1 !important;
fill: transparent !important;
}
@@ -4,7 +4,7 @@ GREEN='\033[0;32m'
YELLOW='\033[0;33m'
RESET='\033[0m'
VERSION=42.0
VERSION=43.rc
echo
printf " $YELLOW[ i ]$RESET Upstream version $VERSION\n"
@@ -46,12 +46,12 @@ done <<- EOF
gnome-shell-sass/widgets/_looking-glass.scss
gnome-shell-sass/widgets/_message-list.scss
gnome-shell-sass/widgets/_misc.scss
gnome-shell-sass/widgets/_network-dialog.scss
gnome-shell-sass/widgets/_notifications.scss
gnome-shell-sass/widgets/_osd.scss
gnome-shell-sass/widgets/_overview.scss
gnome-shell-sass/widgets/_panel.scss
gnome-shell-sass/widgets/_popovers.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/_scrollbars.scss