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
No known key found for this signature in database
GPG Key ID: 59667A77E8BFCB6C
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

View File

@ -3,6 +3,8 @@
$_dark_base_color: #272a34; $_dark_base_color: #272a34;
$is_highcontrast: "false";
$base_color: if($variant == 'light', darken(#ffffff, 2%), $_dark_base_color); $base_color: if($variant == 'light', darken(#ffffff, 2%), $_dark_base_color);
$text_color: if($variant == 'light', black, white); $text_color: if($variant == 'light', black, white);
$bg_color: if($variant == 'light', #ffffff, darken($_dark_base_color, 2%)); $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)); $shadow_color: transparentize(black, if($variant == 'light', 0.9, 0.7));
$system_bg_color: $_dark_base_color; $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; $drop_target_color: #19a187;
//insensitive state derived colors //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%)); $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 //special cased widget colors
$suggested_bg_color: $selected_bg_color; $suggested_bg_color: $selected_bg_color;
$suggested_border_color: $selected_borders_color; $suggested_border_color: $selected_borders_color;

View File

@ -6,85 +6,7 @@ $dialog_box_shadow: 0 2px 6px -2px transparentize(black, .8);
icon-shadow: 0 1px 5px $shadow_color; 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 .message-list-placeholder,
.message-list-controls {
font-weight: normal;
}
.message-list-controls { .message-list-controls {
spacing: $base_padding * 2; spacing: $base_padding * 2;
@include fontsize(10); @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 */ /* Top Bar */
#panel { #panel {
$_panel_bg: transparentize($bg_color, .2); $_panel_bg: transparentize($bg_color, .2);
@ -217,10 +127,6 @@ $dialog_box_shadow: 0 2px 6px -2px transparentize(black, .8);
/* Date/Time Menu */ /* Date/Time Menu */
.datemenu-today-button { .datemenu-today-button {
&:insensitive { color: inherit; } &:insensitive { color: inherit; }
.day-label { font-weight: normal; }
.date-label { font-weight: lighter; }
} }
/* Search */ /* Search */

View File

@ -1,7 +1,13 @@
// When color definition differs for dark and light variant, // When color definition differs for dark and light variant,
// it gets @if-ed depending on $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%)); $bg_color: if($variant == 'light', #f6f5f4, lighten($base_color, 5%));
$fg_color: if($variant == 'light', transparentize(black, .2), white); $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_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%));
$warning_color: if($variant == 'light', #e5a50a, #f5c211);; $warning_color: if($variant == 'light', $yellow_5, #cd9309);
$error_color: if($variant == 'light', #e01b24, #c01c28); $error_color: if($variant == 'light', $red_3, $red_4);
$success_color: if($variant == 'light', #2ec27e, #26a269); $success_color: if($variant == 'light', $green_4, $green_5);
$destructive_color: if($variant == 'light', #e01b24, darken(#e01b24, 10%)); $destructive_color: $error_color;
$osd_fg_color: white; $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_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);
@ -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)); $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 // overview background color
$system_bg_color: $base_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_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_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
$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%));

View File

@ -35,17 +35,10 @@ $base_border_radius: 8px;
// radii of things that display over other things, e.g. popovers // radii of things that display over other things, e.g. popovers
$modal_radius: $base_border_radius*2; // 24px $modal_radius: $base_border_radius*2; // 24px
// derived hover colors // Chroma key to flag when a background-color is always occluded, not visible.
$hover_bg_color: if($variant=='light', darken($base_color, 3%), lighten($base_color, 4%)); // This allows any box-shadow behind it to be rendered more efficiently by
$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 4%)); // omitting the middle rectangle.
$invisible_occluded_bg_color: rgba(3,2,1,0);
// 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%));
// fonts // fonts
$base_font_size: 10; $base_font_size: 10;
@ -86,7 +79,7 @@ stage {
padding: $base_padding; padding: $base_padding;
spacing: $base_padding; spacing: $base_padding;
border: 2px solid transparent; border: 2px solid transparent;
transition-duration: 100ms; transition-duration: 200ms;
text-align: center; text-align: center;
} }
@ -114,11 +107,28 @@ stage {
&:checked { @include button(checked);} &: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 // 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_radius:$base_border_radius*1.25;
$bubble_buttons_color: if($variant == 'light', darken($bg_color, 12%), lighten($bg_color, 7%));
%bubble_button { %bubble_button {
padding: $base_padding * 2; 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 // that are undecorated by default and use OSD colors
%osd_button { %osd_button {
@include button(undecorated); @include button(undecorated);
&:insensitive { @include button(undecorated, $c:$osd_bg_color);} &:insensitive { @include button(undecorated, $tc:$osd_fg_color, $c:$osd_bg_color);}
&:focus { @include button(focus, $c:$osd_bg_color);} &:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color);}
&:hover { @include button(hover, $c:$osd_bg_color);} &:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color);}
&:active { @include button(active, $c:$osd_bg_color);} &:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color);}
&:outlined,&:checked { @include button(checked, $c:$osd_bg_color);} &:outlined,&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color);}
} }
/* General Typography */ /* General Typography */

View File

@ -1,16 +1,4 @@
39c39 44c44
< $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
< $base_font_size: 11; < $base_font_size: 11;
--- ---
> $base_font_size: 10; > $base_font_size: 10;

View File

@ -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 // Button drawing function
// //
@ -155,49 +141,66 @@ $button_bg_color: lighten($c, 5%);
// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active, // backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated // 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 // normal button
@if $t==normal { @if $t==normal {
color: $tc; color: $tc;
background-color: $button_bg_color; 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 // focused button
@if $t==focus { @if $t==focus {
color: $tc; color: $tc;
background-color: mix($button_bg_color, $selected_bg_color, 90%); 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 { &:hover {
background-color: mix(lighten($button_bg_color, 3%), $selected_bg_color, 90%); 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 { &:active {
background-color: mix(lighten($button_bg_color, 6%), $selected_bg_color, 90%); 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 // hover button
@else if $t==hover { @else if $t==hover {
color: $tc; color: $tc;
background-color: mix($tc, $button_bg_color, 3%); background-color: lighten($button_bg_color, 3%);
border-color: if($variant == 'light', draw_border_color(lighten($c, 7%)), draw_border_color($c));
@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 // active button
@else if $t==active { @else if $t==active {
color: $tc; color: $tc;
background-color: mix($tc, $button_bg_color, 6%); background-color: lighten($button_bg_color, 6%);
border-color: draw_border_color(if($variant == 'light', $c, darken($c,7%))); @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 // checked button
@else if $t==checked { @else if $t==checked {
color: $tc; 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%);} &:hover { background-color: lighten($button_bg_color, 12%);}
&:active { background-color: lighten($button_bg_color, 15%);} &:active { background-color: lighten($button_bg_color, 15%);}
} }
@ -206,18 +209,21 @@ $button_bg_color: lighten($c, 5%);
@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);
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 // 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 transparentize($selected_bg_color, 0.4); box-shadow: inset 0 0 0 2px lighten($selected_bg_color, 10%);
} }
&:hover, &:focus { &:hover, &:focus {
background-color: mix($tc, $selected_bg_color, 5%); background-color: lighten($selected_bg_color, 5%);
color: lighten($selected_fg_color, 5%); color: lighten($selected_fg_color, 5%);
} }
&:active { &:active {
@ -235,11 +241,11 @@ $button_bg_color: lighten($c, 5%);
@else if $t==undecorated { @else if $t==undecorated {
background-color: transparent; background-color: transparent;
background-color: none; background-color: none;
border-color: transparent; box-shadow: none;
&:insensitive { &:insensitive {
@include button(insensitive); @include button(insensitive);
background-color: transparent; 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 // overview icon, dash, app grid
@mixin overview_icon($color, $flat: true) { @mixin overview_icon($color, $flat: true) {
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;}
@ -303,25 +310,24 @@ $button_bg_color: lighten($c, 5%);
@mixin card($flat: false) { @mixin card($flat: false) {
border-radius: $base_border_radius; border-radius: $base_border_radius;
margin: $base_margin; margin: $base_margin;
box-shadow: 0 1px 1px 0 rgba(0,0,0,.1); 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;
&:insensitive { border-color: transparent; }
} @else { } @else {
@include button(normal); @include button(normal, $c:$card_bg_color);
} }
&:focus { &:focus {
@include button(focus); @include button(focus, $c:$card_bg_color);
} }
&:hover { &:hover {
@include button(hover); @include button(hover, $c:$card_bg_color);
} }
&:active { &:active {
@include button(active); @include button(active, $c:$card_bg_color);
} }
} }

View File

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

View File

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

View File

@ -24,7 +24,6 @@
@import 'widgets/hotplug'; @import 'widgets/hotplug';
// Dialogs // Dialogs
@import 'widgets/dialogs'; @import 'widgets/dialogs';
@import 'widgets/network-dialog';
// OSDs // OSDs
@import 'widgets/osd'; @import 'widgets/osd';
@import 'widgets/switcher-popup'; @import 'widgets/switcher-popup';
@ -33,6 +32,7 @@
// Panel // Panel
@import 'widgets/panel'; @import 'widgets/panel';
@import 'widgets/corner-ripple'; @import 'widgets/corner-ripple';
@import 'widgets/quick-settings';
// Overview // Overview
@import 'widgets/overview'; @import 'widgets/overview';
@import 'widgets/window-picker'; @import 'widgets/window-picker';

View File

@ -78,8 +78,8 @@ $app_icon_size: 96px;
.app-folder-dialog-container { .app-folder-dialog-container {
padding: $base_padding*2; padding: $base_padding*2;
width: 640px; width: 720px;
height: 640px; height: 720px;
} }
// Running app indicator (also shown in dash) // Running app indicator (also shown in dash)
@ -102,6 +102,7 @@ $app_icon_size: 96px;
// App Grid pagination indicators // App Grid pagination indicators
.page-indicator { .page-indicator {
padding: $base_padding $base_padding * 2 0; padding: $base_padding $base_padding * 2 0;
transition-duration:400ms;
.page-indicator-icon { .page-indicator-icon {
width: 10px; width: 10px;
@ -124,8 +125,6 @@ $app_icon_size: 96px;
} }
.page-navigation-hint { .page-navigation-hint {
width: 300px;
&.dnd { &.dnd {
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
} }
@ -148,7 +147,15 @@ $app_icon_size: 96px;
} }
.page-navigation-arrow { .page-navigation-arrow {
& > StIcon {
margin: 6px; margin: 6px;
padding: 18px;
width: 24px; width: 24px;
height: 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));}
} }

View File

@ -4,3 +4,7 @@
@extend %button; // that's it @extend %button; // that's it
min-height: 22px; min-height: 22px;
} }
.icon-button {
@extend %icon_button; // that's it
}

View File

@ -60,7 +60,7 @@
} }
} }
$calendar_day_size: 32px; $calendar_day_size: 3em;
.calendar-day-base { .calendar-day-base {
text-align: center; text-align: center;
@ -69,6 +69,7 @@
height: $calendar_day_size !important; height: $calendar_day_size !important;
width: $calendar_day_size !important; width: $calendar_day_size !important;
border-radius: 99px; border-radius: 99px;
transition-duration: 100ms;
@extend %numeric; @extend %numeric;
@extend %smaller; @extend %smaller;

View File

@ -3,8 +3,8 @@
$ripple_size: 50px; $ripple_size: 50px;
.ripple-box { .ripple-box {
background-color: lighten(transparentize($selected_bg_color, 0.7), 40%); background-color: rgba(255,255,255,0.2);
box-shadow: 0 0 2px 2px lighten($selected_bg_color, 20%); box-shadow: 0 0 2px 2px rgba(255,255,255,0.2);
// plus + 2px for the border (box-shadow) // plus + 2px for the border (box-shadow)
width: $ripple_size + 2px; width: $ripple_size + 2px;
height: $ripple_size + 2px; height: $ripple_size + 2px;

View File

@ -165,3 +165,8 @@
height: 300px; height: 300px;
width: 300px; width: 300px;
} }
/* Access portal dialog */
.access-dialog {
text-align: center;
}

View File

@ -29,8 +29,11 @@
.horizontal & { padding-left: $base_padding*2; } .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-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-next { border-radius: 0px $base_border_radius $base_border_radius 0px;box-shadow: none;}
.candidate-page-button-icon { icon-size: $base_icon_size; }

View File

@ -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);} &:active { @include keyboard_key(active, $default_key_bg_color, $osd_fg_color);}
&:checked { @include keyboard_key(checked, $default_key_bg_color, $osd_fg_color);} &:checked { @include keyboard_key(checked, $default_key_bg_color, $osd_fg_color);}
border-radius: $key_border_radius; 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 // enter key is suggested-action
@ -130,9 +136,9 @@ $default_key_bg_color: lighten($osd_bg_color, 10%);
// suggestions // suggestions
.word-suggestions { .word-suggestions {
@include fontsize($base_font_size + 3); @include fontsize($base_font_size + 1);
spacing: 12px; spacing: 12px;
min-height: 20pt; min-height: 17pt;
padding: $base_padding*2; padding: $base_padding*2;
color: $osd_fg_color; color: $osd_fg_color;
@ -141,7 +147,7 @@ $default_key_bg_color: lighten($osd_bg_color, 10%);
margin: 0 3px; margin: 0 3px;
min-width: 32px; min-width: 32px;
border-radius: $base_border_radius - 2px; 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); @include keyboard_key(undecorated, $key_bg_color, $osd_fg_color);

View File

@ -16,7 +16,6 @@
.modal-dialog-button-box { spacing: 3px; } .modal-dialog-button-box { spacing: 3px; }
.modal-dialog-button { .modal-dialog-button {
padding: 4px 18px; padding: 4px 18px;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
background-color: darken($system_bg_color, 3%); background-color: darken($system_bg_color, 3%);
border-color: darken($system_bg_color, 3%); border-color: darken($system_bg_color, 3%);
color: $osd_fg_color; color: $osd_fg_color;
@ -28,7 +27,6 @@
} }
&:active { &:active {
$_active_c: darken($_gdm_bg, 5%); $_active_c: darken($_gdm_bg, 5%);
box-shadow: none;
background-color: $_active_c; background-color: $_active_c;
border-color: $_active_c; border-color: $_active_c;
} }
@ -103,7 +101,6 @@
@include fontsize($base_font_size + 2); @include fontsize($base_font_size + 2);
font-weight: bold; font-weight: bold;
padding-left: 15px; padding-left: 15px;
&:ltr { padding-left: 14px; text-align: left; } &:ltr { padding-left: 14px; text-align: left; }
&:rtl { padding-right: 14px; text-align: right; } &:rtl { padding-right: 14px; text-align: right; }
} }

View File

@ -9,7 +9,7 @@
color: $osd_fg_color; color: $osd_fg_color;
padding: $base_padding; padding: $base_padding;
spacing: $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 { & > #Toolbar {
border: none; border: none;
@ -79,6 +79,8 @@
color: $insensitive_fg_color; color: $insensitive_fg_color;
&:hover { color: lighten($insensitive_fg_color, 20%); } &:hover { color: lighten($insensitive_fg_color, 20%); }
&:active { color: darken($insensitive_fg_color, 20%); } &:active { color: darken($insensitive_fg_color, 20%); }
& StIcon { icon-size: 12px; }
} }
} }

View File

@ -123,6 +123,8 @@
margin: 1px; margin: 1px;
&:hover {background-color: transparentize($fg_color, 0.8);} &:hover {background-color: transparentize($fg_color, 0.8);}
&:active {background-color: transparentize($fg_color, 0.9);} &:active {background-color: transparentize($fg_color, 0.9);}
& StIcon { icon-size: $base_icon_size; }
} }
// body // body
@ -157,6 +159,8 @@
// 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; }
&:last-child:rtl { margin-left: $base_margin*3; } &:last-child:rtl { margin-left: $base_margin*3; }
& StIcon { icon-size: $base_icon_size; }
} }
// album-art // album-art

View File

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

View File

@ -8,7 +8,7 @@ $notification_banner_radius: $base_border_radius*1.5;
.notification-banner { .notification-banner {
min-height: $notification_banner_height; min-height: $notification_banner_height;
width: $notification_banner_width; 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; border-radius: $notification_banner_radius;
margin: $base_margin; margin: $base_margin;

View File

@ -14,8 +14,6 @@ $osd_levelbar_height:6px;
StIcon { icon-size:$large_icon_size;} StIcon { icon-size:$large_icon_size;}
.osd-monitor-label { font-size: 3em; }
StLabel { StLabel {
&:ltr { margin-right: 6px; } &:ltr { margin-right: 6px; }
&:rtl { margin-left: 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 */
.pad-osd-window { .pad-osd-window {
padding: 32px; padding: 32px;

View File

@ -40,7 +40,14 @@ $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 {
box-shadow: inset 0 0 0 100px $warning_color;
StBoxLayout { margin: 0 $base_padding; }
}
&.screen-recording-indicator,
&.screen-sharing-indicator {
StBoxLayout { StBoxLayout {
spacing: $base_padding; spacing: $base_padding;
} }
@ -66,6 +73,9 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
&.screen-recording-indicator { &.screen-recording-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.15); 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 { &:hover {
@ -80,6 +90,9 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
&.screen-recording-indicator { &.screen-recording-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.1); 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 { &: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 { &.screen-recording-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.2); 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 // status area icons
@ -137,6 +153,9 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
&.screen-recording-indicator { &.screen-recording-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.15); 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 { &:hover {
@ -151,6 +170,9 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
&.screen-recording-indicator { &.screen-recording-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.1); 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 { &: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 { &.screen-recording-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.2); 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);
}
} }
} }
} }

View File

@ -19,18 +19,18 @@
// popover content // popover content
.popup-menu-content { .popup-menu-content {
padding: $base_padding; padding: $base_padding;
border-radius: $modal_radius - 2px; border-radius: $modal_radius*1.25;
border: 1px solid $borders_edge; 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; background-color: $bg_color;
} }
// menu items // menu items
.popup-menu-item { .popup-menu-item {
padding: $base_padding*1.5 $base_padding*2; padding: $base_padding*1.5 $base_padding*2;
border-radius: $base_border_radius; border-radius: $base_border_radius*1.5;
spacing: $base_padding; spacing: $base_padding;
transition: 0.2s all ease; transition-duration: 100ms;
background-color: transparent; background-color: transparent;
&:ltr {padding-left: $base_padding;} &:ltr {padding-left: $base_padding;}
@ -100,12 +100,12 @@
border-radius: 0 0 $base_border_radius $base_border_radius; 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 { &: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;} &: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 { .popup-menu-section {
@ -164,28 +164,6 @@
-arrow-rise: 0px; // hide the beak on the menu -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 // right-click (and panel) app menu
.app-menu { .app-menu {
max-width: 27.25em; max-width: 27.25em;

View File

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

View File

@ -48,7 +48,9 @@
} }
.unlock-dialog-notification-label { .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 { .unlock-dialog-notification-count-text {

View File

@ -25,13 +25,16 @@ $screenshot_ui_button_red: $error_color;
.screenshot-ui-close-button { .screenshot-ui-close-button {
@extend .window-close; // copy window close button @extend .window-close; // copy window close button
padding: $base_padding; // but with more padding padding: $base_padding !important; // but with more padding
&.left { margin-left: 8px; } margin-top: 12px;
&.right { margin-right: 8px; } box-shadow: 0 2px 4px 0 $shadow_color;
&.left { margin-left: 12px;}
&.right { margin-right: 12px;}
} }
.screenshot-ui-type-button { .screenshot-ui-type-button {
@extend %osd_button; @extend %osd_button;
min-width: 48px;
padding: $base_padding * 2 $base_padding * 3 !important; padding: $base_padding * 2 $base_padding * 3 !important;
border-radius: $screenshot_ui_panel_border_radius - $screenshot_ui_panel_padding; 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 { .screenshot-ui-capture-button-circle {
background-color: $osd_fg_color; background-color: $osd_fg_color;
transition-duration: 200ms; transition-duration: 200ms;
&:hover, &:focus { background-color: $hover_bg_color; } &:hover, &:focus { background-color: $hover_bg_color;}
border-radius: 99px; border-radius: 99px;
} }
@ -66,48 +69,47 @@ $screenshot_ui_button_red: $error_color;
.screenshot-ui-capture-button-circle { .screenshot-ui-capture-button-circle {
background-color: $screenshot_ui_button_red; background-color: $screenshot_ui_button_red;
} }
&:hover, &:focus { &:hover, &:focus {
.screenshot-ui-capture-button-circle { .screenshot-ui-capture-button-circle {
background-color: darken($screenshot_ui_button_red, 15%); background-color: lighten($screenshot_ui_button_red, 5%);
} }
} }
&:active { &:active {
.screenshot-ui-capture-button-circle { .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 { .screenshot-ui-shot-cast-container {
background-color: $hover_bg_color; background-color: lighten($osd_bg_color,5%);
border-radius: $modal_radius; border-radius: $modal_radius;
padding: $screenshot_ui_shot_cast_spacing; padding: $screenshot_ui_shot_cast_spacing;
spacing: $screenshot_ui_shot_cast_spacing; spacing: $screenshot_ui_shot_cast_spacing;
&:ltr { margin-left: $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; } &:rtl { margin-right: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding;}
} }
.screenshot-ui-shot-cast-button { .screenshot-ui-shot-cast-button {
padding: $base_padding $base_padding*2; padding: $base_padding $base_padding*2;
background-color: transparent; background-color: transparent;
&:hover, &:focus { background-color: lighten($hover_bg_color, 5%); } &:hover, &:focus { background-color: lighten($osd_bg_color, 10%);}
&:active { background-color: lighten($active_bg_color,5%); } &:active { background-color: lighten($active_bg_color,5%);}
&:checked { background-color: white; color: black; } &:checked { background-color: white;color: black;}
&:insensitive { color: transparentize($osd_fg_color, 0.5);}
border-radius: $modal_radius - $screenshot_ui_shot_cast_spacing; 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 { .screenshot-ui-show-pointer-button {
@extend %osd_button; @extend %osd_button;
border-radius: 99px; border-radius: 99px;
padding: $base_padding * 2 !important; padding: $base_padding * 2 !important;
StIcon { icon-size: $base_icon_size; } StIcon { icon-size: $base_icon_size;}
} }
.screenshot-ui-area-indicator-shade { .screenshot-ui-area-indicator-shade {
@ -174,7 +176,7 @@ $screenshot_ui_button_red: $error_color;
} }
.screenshot-ui-window-selector-check { .screenshot-ui-window-selector-check {
color: white; color: $selected_fg_color;
background-color: $selected_bg_color; background-color: $selected_bg_color;
} }
} }
@ -184,8 +186,8 @@ $screenshot_ui_button_red: $error_color;
transition-duration: 200ms; transition-duration: 200ms;
background-color: rgba(0,0,0,.5); background-color: rgba(0,0,0,.5);
&:hover { background-color: rgba(0,0,0,.3); } &:hover { background-color: rgba(0,0,0,.3);}
&:active { background-color: rgba(0,0,0,.7); } &:active { background-color: rgba(0,0,0,.7);}
&:checked { &:checked {
background-color: transparent; background-color: transparent;
border: 2px white; border: 2px white;

View File

@ -5,7 +5,7 @@ $window_picker_padding: $base_padding * 2; // 12px
$window_thumbnail_label_color: transparentize($osd_bg_color, 0.4); $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_size: 30px;
$window_close_button_padding: 3px; $window_close_button_padding: 3px;
@ -18,7 +18,7 @@ $window_close_button_padding: 3px;
// Window titles // Window titles
.window-caption { .window-caption {
color: $osd_fg_color; color: $osd_fg_color;
background-color: $osd_bg_color; background-color: lighten($osd_bg_color, 5%);
border-radius: 99px; border-radius: 99px;
padding: $base_padding $base_padding * 2; padding: $base_padding $base_padding * 2;
} }
@ -27,26 +27,27 @@ $window_close_button_padding: 3px;
.window-close { .window-close {
background-color: $window_close_button_color; background-color: $window_close_button_color;
color: $osd_fg_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; padding: $window_close_button_padding;
height: $window_close_button_size; height: $window_close_button_size;
width: $window_close_button_size; width: $window_close_button_size;
transition-duration: 300ms; transition-duration: 100ms;
& StIcon { icon-size: 24px; } // uses non standard icon size & StIcon { icon-size: 24px; } // uses non standard icon size
&:hover { &:hover {
background-color: mix($osd_fg_color, $window_close_button_color, 15%); background-color: lighten($window_close_button_color, 7%);
} }
&:active { &:active {
color: transparentize($osd_fg_color, 0.2); background-color: lighten($window_close_button_color, 13%);
background-color: darken($window_close_button_color, 5%);
} }
} }
.workspace-background { .workspace-background {
// keep in sync with BACKGROUND_CORNER_RADIUS_PIXELS in workspace.js // keep in sync with BACKGROUND_CORNER_RADIUS_PIXELS in workspace.js
border-radius: 30px; border-radius: 30px;
background-color: $invisible_occluded_bg_color;
box-shadow: 0 4px 16px 4px transparentize(darken($osd_bg_color, 30%), 0.7); box-shadow: 0 4px 16px 4px transparentize(darken($osd_bg_color, 30%), 0.7);
} }

View File

@ -19,7 +19,6 @@
.Label { .Label {
stroke: none !important; stroke: none !important;
stroke-width: .1 !important; stroke-width: .1 !important;
font-size: .1 !important;
fill: transparent !important; fill: transparent !important;
} }

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=42.0 VERSION=43.rc
echo echo
printf " $YELLOW[ i ]$RESET Upstream version $VERSION\n" 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/_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
gnome-shell-sass/widgets/_network-dialog.scss
gnome-shell-sass/widgets/_notifications.scss gnome-shell-sass/widgets/_notifications.scss
gnome-shell-sass/widgets/_osd.scss gnome-shell-sass/widgets/_osd.scss
gnome-shell-sass/widgets/_overview.scss gnome-shell-sass/widgets/_overview.scss
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/_screen-shield.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