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; $_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;
@@ -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 */
@@ -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%));
@@ -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 */
@@ -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;
@@ -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);
} }
} }
@@ -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'; @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';
@@ -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));}
} }
@@ -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
}
@@ -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;
@@ -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;
@@ -165,3 +165,8 @@
height: 300px; height: 300px;
width: 300px; width: 300px;
} }
/* Access portal dialog */
.access-dialog {
text-align: center;
}
@@ -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; }
@@ -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);
@@ -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; }
} }
@@ -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; }
} }
} }
@@ -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
@@ -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 { .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;
@@ -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;
@@ -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);
}
} }
} }
} }
@@ -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;
@@ -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 { .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 {
@@ -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;
@@ -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);
} }
@@ -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;
} }
@@ -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