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