Gnome-Shell: update upstream code to gnome 42

This commit is contained in:
Daniel Ruiz de Alegría
2022-02-28 21:10:37 +01:00
parent 8a0eda5a2d
commit 6463c6ddb0
38 changed files with 1412 additions and 916 deletions
@@ -11,7 +11,7 @@ stage {
} }
.toggle-switch { width: 48px; } .toggle-switch { width: 48px; }
.toggle-switch-us, .toggle-switch-intl { .toggle-switch {
background-image: url("assets/toggle-off-hc.svg"); background-image: url("assets/toggle-off-hc.svg");
&:checked { background-image: url("assets/toggle-on-hc.svg"); } &:checked { background-image: url("assets/toggle-on-hc.svg"); }
} }
@@ -22,10 +22,6 @@ stage {
&.unlock-screen, &.unlock-screen,
&:overview { &:overview {
background-color: #000; background-color: #000;
.panel-corner {
-panel-corner-opacity: 1;
}
} }
.panel-button { .panel-button {
@@ -1,34 +1,36 @@
// 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, lighten(desaturate(#241f31, 20%), 2%)); $base_color: if($variant == 'light', #fff, darken(desaturate(#241f31, 100%), 2%));
$bg_color: if($variant == 'light', #f6f5f4, darken(desaturate(#3d3846, 100%), 4%)); $bg_color: if($variant == 'light', #f6f5f4, lighten($base_color, 5%));
$fg_color: if($variant == 'light', #2e3436, #eeeeec); $fg_color: if($variant == 'light', transparentize(black, .2), white);
$selected_fg_color: #fff; $selected_fg_color: #fff;
$selected_bg_color: if($variant == 'light', #3584e4, darken(#3584e4, 10%)); $selected_bg_color: #3584e4;
$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%)); $selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 30%));
$borders_color: if($variant == 'light', darken($bg_color, 18%), darken($bg_color, 8%));
$borders_edge: if($variant == 'light', rgba(255,255,255,0.8), transparentize($fg_color, 0.93)); $borders_color: if($variant == 'light', transparentize($fg_color, .5), transparentize($fg_color, .9));
$borders_edge: if($variant == 'light', rgba(255,255,255,0.8), lighten($bg_color, 5%));
$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%));
$top_hilight: $borders_edge;
$warning_color: #f57900; $warning_color: if($variant == 'light', #e5a50a, #f5c211);;
$error_color: #ff8080; $error_color: if($variant == 'light', #e01b24, #c01c28);
$success_color: if($variant == 'light', #33d17a, darken(#33d17a, 10%)); $success_color: if($variant == 'light', #2ec27e, #26a269);
$destructive_color: if($variant == 'light', #e01b24, darken(#e01b24, 10%)); $destructive_color: if($variant == 'light', #e01b24, darken(#e01b24, 10%));
$osd_fg_color: #eeeeec; $osd_fg_color: white;
$osd_text_color: white; $osd_bg_color: transparentize(desaturate($bg_color, 100%),0.04);
$osd_bg_color: transparentize(darken(desaturate(#3d3846, 100%), 12%),0.04);
$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: mix($osd_fg_color, opacify($osd_bg_color, 1), 50%); $osd_insensitive_fg_color: if($variant == 'light', mix($osd_fg_color, $osd_bg_color, 80%), mix($osd_fg_color, $osd_bg_color, 70%));
$osd_borders_color: transparentize(black, 0.3); $osd_borders_color: transparentize(black, 0.3);
$osd_outer_borders_color: transparentize(white, 0.84); $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));
$system_bg_color: desaturate(#241f31,100%); //neutralize the HIG color
// overview background color
$system_bg_color: $base_color;
//insensitive state derived colors //insensitive state derived colors
$insensitive_fg_color: mix($fg_color, $bg_color, 50%); $insensitive_fg_color: mix($fg_color, $bg_color, 50%);
@@ -28,33 +28,32 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
// padding, margin and spacing // padding, margin and spacing
$base_padding: 6px; $base_padding: 6px;
$base_margin: 4px; $base_margin: 4px;
$base_spacing: 6px;
// border radii // border radii
$base_border_radius: 8px; $base_border_radius: 8px;
$modal_radius:$base_border_radius * 2; // radii of things that display over other things, e.g. popovers
$modal_radius: $base_border_radius*2; // 24px
// non-standard colors // derived hover colors
$bubble_borders_color: lighten($borders_color, if($variant=='light', 0%, 5%)); $hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 4%));
// $bubble_borders_color: if($variant == 'light', rgba(255,255,255,0.1), rgba(0,0,0,0.3)); $hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 4%));
// hover // derived active colors
$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 5%)); $active_bg_color: if($variant=='light', darken($bg_color, 5%), lighten($bg_color, 6%));
$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 5%)); $active_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 6%));
$hover_borders_color: lighten($borders_color,if($variant=='light', 5%, 3%));
// active // derived checked colors
$active_bg_color: if($variant == 'light', darken($bg_color, 7%), darken($bg_color, 9%)); $checked_bg_color: if($variant=='light', darken($bg_color, 7%), lighten($bg_color, 9%));
$active_fg_color: darken($fg_color,if($variant=='light', 5%, 3%)); $checked_fg_color: if($variant=='light', darken($fg_color, 7%), lighten($fg_color, 9%));
$active_borders_color: darken($borders_color,if($variant=='light', 5%, 3%));
// fonts // fonts
$base_font_size: 10; $base_font_size: 11;
$text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2)); $text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2));
// icons // icons
$base_icon_size: 1.09em; $base_icon_size: 1.09em;
$large_icon_size: $base_icon_size*2; // 32px
// $base_icon_size: 16px; // $base_icon_size: 16px;
// Stage // Stage
@@ -65,20 +64,13 @@ stage {
/* Common Stylings */ /* Common Stylings */
// Text
%status_text {
font-size: 2em;
font-weight: bold;
color: $osd_fg_color;
}
// osd panels // osd panels
%osd_panel { %osd_panel {
color: $osd_fg_color; color: $osd_fg_color;
background-color: $osd_bg_color; background-color: $osd_bg_color;
//border: 1px solid $osd_outer_borders_color; border: 1px solid $osd_outer_borders_color;
border-radius: $base_border_radius * 2 + 4px; border-radius: 999px;
padding: $base_padding * 2; padding: $base_padding*2;
} }
// Overview panels // Overview panels
@@ -89,8 +81,8 @@ stage {
} }
// icon tiles // icon tiles
%icon_tile { %tile {
border-radius: $base_border_radius + 4px; border-radius: $base_border_radius * 2; // 16px
padding: $base_padding; padding: $base_padding;
border: 2px solid transparent; border: 2px solid transparent;
transition-duration: 100ms; transition-duration: 100ms;
@@ -101,76 +93,125 @@ stage {
%bubble_panel { %bubble_panel {
color: $fg_color; color: $fg_color;
background-color: $bg_color; background-color: $bg_color;
border: 1px solid if($variant=='light', rgba(0,0,0, 0.6), $borders_color); border-radius: $base_border_radius*1.25 + 1px;
border: 1px solid $borders_edge;
} }
// button styling // normal button styling
%button { %button {
border-radius: $base_border_radius; border-radius: $base_border_radius - 2px; // 6px
border-style: solid; border-style: solid;
border-width: 1px; border-width: 1px;
min-height: 22px; font-weight: bold;
padding: $base_padding * 0.5 $base_padding * 4; padding: $base_padding*.5 $base_padding*4;
@include button(normal); @include button(normal);
&:focus { @include button(focus);} &:focus { @include button(focus);}
&:hover { @include button(hover);} &:hover { @include button(hover);}
&:insensitive { @include button(insensitive);} &:insensitive { @include button(insensitive);}
&:active { @include button(active);} &:active { @include button(active);}
&:checked { @include button(checked);}
} }
// buttons in dialogs // 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 { %bubble_button {
@include button(normal, $shadow: none);
padding: $base_padding * 2; padding: $base_padding * 2;
border-style: solid; font-weight: bold !important;
border-width: 1px; margin-right: 1px;
border-left-width: 0;
border-bottom-width: 0;
&:insensitive { @include button(insensitive, $shadow: none); } @include button(normal, $c:$bubble_buttons_color);
&:focus { @include button(focus, $shadow: none); } &:insensitive { @include button(insensitive, $c:$bubble_buttons_color);}
&:hover { @include button(hover, $shadow: none); } &:focus { @include button(focus, $c:$bubble_buttons_color);}
&:active { @include button(active, $shadow: none); } &:hover { @include button(hover, $c:$bubble_buttons_color);}
&:active { @include button(active, $c:$bubble_buttons_color);}
&:checked { @include button(checked, $c:$bubble_buttons_color);}
// radius is 2 pixel less to fit in bubble &:first-child:ltr {
&:first-child { border-radius: 0 0 0 $bubble_button_radius;
border-radius: 0 0 0 $modal_radius - 2px;
} }
&:last-child { &:last-child:ltr {
border-right-width: 0; border-radius: 0 0 $bubble_button_radius 0;
border-radius: 0 0 $modal_radius - 2px 0; margin-right: 0 !important;
}
&:first-child:rtl {
border-radius: 0 0 $bubble_button_radius 0;
}
&:last-child:rtl {
border-radius: 0 0 0 $bubble_button_radius;
margin-right: 0 !important;
} }
&:first-child:last-child { &:first-child:last-child {
border-radius: 0 0 $modal_radius - 2px $modal_radius - 2px; border-radius: 0 0 $bubble_button_radius $bubble_button_radius !important;
margin-right: 0 !important;
} }
} }
// buttons on OSD elements
// notification styling // that are undecorated by default and use OSD colors
@mixin notification_bubble($flat: false) { %osd_button {
border-width: 1px;
border-style: solid;
border-radius: $base_border_radius + 2px;
margin: $base_margin;
@if $flat {
@include button(undecorated); @include button(undecorated);
} @else { &:insensitive { @include button(undecorated, $c:$osd_bg_color);}
@include button(normal); &:focus { @include button(focus, $c:$osd_bg_color);}
} &:hover { @include button(hover, $c:$osd_bg_color);}
&:active { @include button(active, $c:$osd_bg_color);}
&:focus { &:outlined,&:checked { @include button(checked, $c:$osd_bg_color);}
@include button(focus);
}
&:hover {
@include button(hover);
}
&:active {
@include button(active);
}
} }
/* General Typography */
%large_title {
font-weight: 300;
@include fontsize(24);
}
%title_1 {
font-weight: 800;
@include fontsize(20);
}
%title_2 {
font-weight: 800;
@include fontsize(15);
}
%title_3 {
font-weight: 700;
@include fontsize(15);
}
%title_4 {
font-weight: 700;
@include fontsize(13);
}
%heading {
font-weight: 700;
@include fontsize(11);
}
%caption_heading {
font-weight: 700;
@include fontsize(9);
}
%caption {
font-weight: 400;
@include fontsize(9);
}
%smaller {
font-weight: 400;
@include fontsize(8);
}
%monospace {font-family: monospace;}
%numeric { font-feature-settings: "tnum";}
@@ -1,4 +0,0 @@
53c53
< $base_font_size: 11;
---
> $base_font_size: 10;
@@ -25,103 +25,51 @@
// entries // entries
@mixin entry($t, $fc:$selected_bg_color, $edge: $borders_edge) { @mixin entry($t, $fc:$selected_bg_color) {
// //
// Entries drawing function // Entries drawing function
// //
// $t: entry type // $t: entry type
// $fc: focus color // $fc: focus color
// $edge: set to none to not draw the bottom edge or specify a color to not use the default one
// //
// possible $t values: // possible $t values:
// normal, focus, insensitive // normal, focus, insensitive
// //
@if $t==normal { @if $t==normal {
background-color: $base_color; background-color: lighten($bg_color, 5%);
border-color: $borders_color; color: transparentize($fg_color,0.3);
border: 2px solid lighten($bg_color, 5%);
} }
@if $t==focus { @if $t==focus {
border-color: if($fc==$selected_bg_color, background-color: mix(lighten($bg_color, 5%), $selected_bg_color, 95%);
$selected_borders_color, border-color: $fc;
darken($fc,35%)); color: $fg_color;
box-shadow: inset 0 0 0 2px $fc; &:hover {}
} }
@if $t==hover { }
@if $t==hover {
background-color:lighten($hover_bg_color, 5%);
border-color:lighten($hover_bg_color, 5%);
color: transparentize($fg_color,0.3);
}
@if $t==insensitive { @if $t==insensitive {
background-color:lighten($insensitive_bg_color, 5%);
border-color: lighten($insensitive_bg_color, 5%);
color: $insensitive_fg_color; color: $insensitive_fg_color;
border-color: $insensitive_bg_color;
box-shadow: none;
} }
} }
// buttons // On-screen Keyboard
@mixin keyboard_key($t, $c:$osd_bg_color, $tc:$osd_fg_color) {
@function draw_border_color ($c) {
//
// colored buttons want the border form the base color
//
@return if($variant == 'light', darken($c, 18%), darken($c, 4%));
}
@function draw_text_shadow_color ($tc:$fg_color, $bg:$bg_color) {
// //
// calculate the color of text shadows // Keyboard key drawing function
// //
// $tc is the text color // $t: key type,
// $bg is the background color // $c: base key color for colored* types
//
$lbg: lightness($bg)/100%;
@if lightness($tc)<50% { @return rgba(255,255,255,$lbg/($lbg*1.3)); }
@else { @return rgba(0,0,0,1-$lbg*0.8); }
}
@function draw_button_hilight_color($c) {
//
// calculate the right top highlight color for buttons
//
// $c: base color;
//
@if lightness($c)>90% { @return white; }
@else if lightness($c)>80% { @return rgba(255,255,255, 0.7); }
@else if lightness($c)>50% { @return rgba(255,255,255, 0.5); }
@else if lightness($c)>40% { @return rgba(255,255,255, 0.3); }
@else { @return rgba(255,255,255, 0.1); }
}
@mixin draw_button_text_shadow ($tc:$fg_color, $bg:$bg_color) {
//
// helper function for the text emboss effect
//
// $tc is the optional text color, not the shadow color
//
// TODO: this functions needs a way to deal with special cases
//
$shadow: draw_text_shadow_color($tc, $bg);
@if lightness($tc)<50% {
text-shadow: 0 1px $shadow;
icon-shadow: 0 1px $shadow;
}
@else {
text-shadow: 0 -1px $shadow;
icon-shadow: 0 -1px $shadow;
}
}
@mixin button($t, $c:$bg_color, $tc:$fg_color, $edge: $borders_edge, $shadow: $shadow_color) {
//
// Button drawing function
//
// $t: button type,
// $c: base button color for colored* types
// $tc: optional text color for colored* types // $tc: optional text color for colored* types
// $edge: set to none to not draw the bottom edge or specify a color to not
// use the default one
// $shadow: set to none to not draw the drop shadow or specify a color to not
// use the default one
// //
// possible $t values: // possible $t values:
// normal, hover, active, insensitive, insensitive-active, // normal, hover, active, insensitive, insensitive-active,
@@ -129,104 +77,236 @@
// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated // osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
// //
$hilight_color: draw_button_hilight_color($c); // normal key
$button_edge: if($edge == none, none, draw_widget_edge($edge)); @if $t==normal {
$blank_edge: if($edge == none, none, draw_widget_edge(transparentize($edge,1))); color: $tc;
$button_shadow: if($shadow == none, none, 0 1px 1px 0 $shadow); background-color: lighten($c, 3%);
}
// focused key
@if $t==focus {
color: $tc;
background-color: mix(lighten($c, 3%), $selected_bg_color, 90%);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
&:hover {
background-color: mix(lighten($c, 8%), $selected_bg_color, 90%);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
}
&:active {
background-color: mix(lighten($c, 10%), $selected_bg_color, 90%);
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
}
}
// hover key
@else if $t==hover {
color: $tc;
background-color: lighten($c, 7%);
}
// active key
@else if $t==active {
color: $tc;
background-color: lighten($c, 10%);
}
// checked key
@else if $t==checked {
color: $tc;
background-color: lighten($c, 15%);
}
// insensitive key
@else if $t==insensitive {
color: $insensitive_fg_color;
background-color: $insensitive_bg_color;
}
// reset
@else if $t==undecorated {
background-color: transparent;
background-image: none;
}
}
// 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: mix($tc, $c, 5%);
//
// Button drawing function
//
// $t: button type,
// $c: base button colors, derived from fg_color
// $tc: base button colors, derived from fg_color
//
// possible $t values:
// normal, hover, active, insensitive, insensitive-active,
// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active,
// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
//
// normal button // normal button
@if $t==normal { @if $t==normal {
color: $tc; color: $tc;
background-color: lighten($c, 3%); background-color: $button_bg_color;
border-color: draw_border_color($c);
@include draw_shadows($button_shadow);
// box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1);
text-shadow: 0 1px $text_shadow_color;
icon-shadow: 0 1px $text_shadow_color;
} }
// focused button // focused button
@if $t==focus { @if $t==focus {
color: $tc; color: $tc;
text-shadow: 0 1px $text_shadow_color; background-color: mix($button_bg_color, $selected_bg_color, 90%);
icon-shadow: 0 1px $text_shadow_color;
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);
//border-color: $selected_bg_color; &: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);
}
&: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);
}
} }
// hover button // hover button
@else if $t==hover { @else if $t==hover {
color: $tc; color: $tc;
background-color: lighten($c, if($variant == 'light', 8%, 5%)); background-color: lighten($button_bg_color, 3%);
border-color: if($variant == 'light', draw_border_color(lighten($c, 7%)), draw_border_color($c));
@include draw_shadows($button_shadow);
text-shadow: 0 1px $text_shadow_color;
icon-shadow: 0 1px $text_shadow_color;
} }
// active button // active button
@else if $t==active { @else if $t==active {
color: $tc; color: $tc;
background-color: darken($c,3%); background-color: lighten($button_bg_color, 6%);
border-color: draw_border_color(if($variant == 'light', $c, darken($c,7%))); }
text-shadow: none;
icon-shadow: none; // checked button
box-shadow: none; @else if $t==checked {
color: $tc;
background-color: lighten($button_bg_color, 9%);
&:hover { background-color: lighten($button_bg_color, 12%);}
&:active { background-color: lighten($button_bg_color, 15%);}
} }
// insensitive button // insensitive button
@else if $t==insensitive { @else if $t==insensitive {
color: $insensitive_fg_color; color: transparentize($tc, 0.5);
border-color: $insensitive_borders_color; background-color: transparentize($tc, .95);
background-color: $insensitive_bg_color; }
box-shadow: none;
text-shadow: none; // default/suggested button
icon-shadow: none; @else if $t==default {
background-color: $selected_bg_color;
color: $selected_fg_color;
&:focus {
box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
}
&:hover, &:focus {
background-color: lighten($selected_bg_color, 5%);
color: lighten($selected_fg_color, 5%);
}
&:active {
background-color: darken($selected_bg_color, 7%);
color: darken($selected_fg_color, 7%);
}
&:insensitive {
@include button(insensitive);
background-color: transparentize($selected_bg_color, .5);
color: transparentize($selected_fg_color, .5);
}
} }
// reset // reset
@else if $t==undecorated { @else if $t==undecorated {
border-color: transparent;
background-color: transparent; background-color: transparent;
background-image: none; background-color: none;
@include draw_shadows(inset 0 1px rgba(255,255,255,0),$blank_edge); &:insensitive {
text-shadow: none; @include button(insensitive);
icon-shadow: none; background-color: transparent;
color: transparentize($selected_fg_color, .5);
}
} }
} }
// overview icons // tile
@mixin overview-icon($color) { @mixin tile_button($color, $flat: true) {
.overview-icon { @extend %tile;
@extend %icon_tile; @if $flat {
color: $color; background-color: transparent;
} @else {
background-color: transparentize($color, .84);
} }
&:hover { background-color: transparentize($color, .9);}
&:selected, &:focus {
background-color: transparentize($color, .87);
&:hover { background-color: transparentize($color, .84);}
&:active { background-color: transparentize($color, .87);}
}
&:active { background-color: transparentize($color, .84);}
&:outlined, &:checked {
background-color: transparentize($color, .81);
&:active { background-color: transparentize($color, .78);}
&:hover { background-color: transparentize($color, .75);}
}
&:drop {
border: 2px solid transparentize($selected_bg_color, .2); //already 2px transparent so no jumping
background-color: transparentize($selected_bg_color, .8);
}
}
&:hover, // overview icon, dash, app grid
&:selected { @mixin overview_icon($color, $flat: true) {
.overview-icon { .overview-icon { @extend %tile; }
background-color: transparentize($color, .9); @if $flat {
.overview-icon { background-color: transparent;}
} @else {
.overview-icon { background-color: transparentize($color, .81);}
} }
&:hover .overview-icon { background-color: transparentize($color, .9);}
&:selected .overview-icon,
&:focus .overview-icon {
background-color: transparentize($color, .87);
&:hover .overview-icon { background-color: transparentize($color, .84);}
&:active .overview-icon { background-color: transparentize($color, .87);}
}
&:active .overview-icon { background-color: transparentize($color, .84);}
&:outlined .overview-icon,
&:checked .overview-icon {
background-color: transparentize($color, .81);
&:active .overview-icon { background-color: transparentize($color, .78);}
&:hover .overview-icon { background-color: transparentize($color, .75);}
}
&:drop .overview-icon {
border: 2px solid transparentize($selected_bg_color, .2); //already 2px transparent so no jumping
background-color: transparentize($selected_bg_color, .8);
}
}
// styling for elements within popovers that look like notifications
@mixin card($flat: false) {
border-radius: $base_border_radius;
margin: $base_margin;
box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
@if $flat {
@include button(undecorated);
box-shadow: none !important;
} @else {
@include button(normal);
} }
&:focus { &:focus {
.overview-icon { @include button(focus);
background-color: transparentize($color, .7);
// border-color: $selected_bg_color;
}
} }
&:drop { &:hover {
.overview-icon { @include button(hover);
border: 2px solid $selected_bg_color; //already 2px transparent so no jumping
background-color: transparentize($selected_bg_color, .8);
}
} }
&:active, &:active {
&:checked { @include button(active);
.overview-icon {
background-color: transparentize(darken($osd_bg_color, 10%), .5);
}
} }
} }
@@ -29,6 +29,7 @@
@import 'widgets/osd'; @import 'widgets/osd';
@import 'widgets/switcher-popup'; @import 'widgets/switcher-popup';
@import 'widgets/workspace-switcher'; @import 'widgets/workspace-switcher';
@import 'widgets/screenshot';
// Panel // Panel
@import 'widgets/panel'; @import 'widgets/panel';
@import 'widgets/corner-ripple'; @import 'widgets/corner-ripple';
@@ -43,7 +44,6 @@
// A11y / misc // A11y / misc
@import 'widgets/a11y'; @import 'widgets/a11y';
@import 'widgets/misc'; @import 'widgets/misc';
@import 'widgets/tiled-previews';
@import 'widgets/keyboard'; @import 'widgets/keyboard';
@import 'widgets/looking-glass'; @import 'widgets/looking-glass';
// Lock / login screens // Lock / login screens
@@ -4,10 +4,10 @@ $app_icon_size: 96px;
// app icons // app icons
.icon-grid { .icon-grid {
row-spacing: $base_spacing * 2; row-spacing: $base_padding * 2;
column-spacing: $base_spacing * 2; column-spacing: $base_padding * 2;
max-row-spacing: $base_spacing * 12; max-row-spacing: $base_padding * 12;
max-column-spacing: $base_spacing * 12; max-column-spacing: $base_padding * 12;
page-padding-top: $base_padding * 4; page-padding-top: $base_padding * 4;
page-padding-bottom: $base_padding * 4; page-padding-bottom: $base_padding * 4;
page-padding-left: $base_padding * 2; page-padding-left: $base_padding * 2;
@@ -16,31 +16,28 @@ $app_icon_size: 96px;
/* App Icons */ /* App Icons */
$app_grid_fg_color: #fff;
// Icon tiles in the app grid // Icon tiles in the app grid
.app-well-app, .app-well-app {
%app-well-app { @include overview_icon($osd_fg_color);
@include overview-icon($app_grid_fg_color);
.overview-icon {
padding: $base_padding*2;
}
.overview-icon.overview-icon-with-label { .overview-icon.overview-icon-with-label {
padding: 10px 8px 5px 8px;
> StBoxLayout { > StBoxLayout {
spacing: $base_spacing; spacing: $base_padding;
} }
} }
} }
/* App Folders */ // app folders
.app-well-app.app-folder { .app-well-app.app-folder {
background-color: $dash_background_color; @include overview_icon($osd_fg_color, $flat: false);
border-radius: $base_border_radius + 4px; // same as %icon_tile
} }
// expanded folder // expanded folder
.app-folder-dialog { //style like the dash .app-folder-dialog {
border-radius: $modal_radius * 1.5; border-radius: $modal_radius*2;
background-color: $dash_background_color; background-color: $dash_background_color;
padding: 12px 0px 12px 0px; padding: 12px 0px 12px 0px;
@@ -50,8 +47,7 @@ $app_grid_fg_color: #fff;
& .folder-name-label, & .folder-name-label,
& .folder-name-entry { & .folder-name-entry {
font-size: 18pt; @extend %title_1;
font-weight: 800;
} }
& .folder-name-entry { width: 300px } & .folder-name-entry { width: 300px }
@@ -60,20 +56,22 @@ $app_grid_fg_color: #fff;
& .folder-name-label { padding: 5px 7px; color: $osd_fg_color; } & .folder-name-label { padding: 5px 7px; color: $osd_fg_color; }
& .edit-folder-button { & .edit-folder-button {
@extend %button; @include button(undecorated);
padding: 0;
width: 36px; width: 36px;
height: 36px; height: 36px;
border-radius: 18px; border-radius: 18px;
& > StIcon { icon-size: 16px } &:focus {@include button(focus);}
&:hover {@include button(hover);}
&:active {@include button(active);}
& > StIcon { icon-size: $base_icon_size }
} }
} }
& .icon-grid { & .icon-grid {
row-spacing: $base_spacing * 2; row-spacing: $base_padding * 2;
column-spacing: $base_spacing * 5; column-spacing: $base_padding * 5;
page-padding-top: 0; page-padding-top: 0;
page-padding-bottom: 0; page-padding-bottom: 0;
page-padding-left: 0; page-padding-left: 0;
@@ -84,8 +82,9 @@ $app_grid_fg_color: #fff;
margin-bottom: 18px; margin-bottom: 18px;
} }
} }
.app-folder-dialog-container { .app-folder-dialog-container {
padding: 12px; padding: $base_padding*2;
width: 620px; width: 620px;
height: 620px; height: 620px;
} }
@@ -95,23 +94,18 @@ $app_grid_fg_color: #fff;
height: 5px; height: 5px;
width: 5px; width: 5px;
border-radius:5px; border-radius:5px;
margin-bottom: 8px;
background-color: $osd_fg_color; background-color: $osd_fg_color;
margin-bottom: 1px;
} }
// Rename popup for app folders // Rename popup for app folders
.rename-folder-popup { .rename-folder-popup {
.rename-folder-popup-item { .rename-folder-popup-item {
spacing: $base_spacing; spacing: $base_padding;
&:ltr, &:rtl { padding: 0 $base_padding * 2; } &:ltr, &:rtl { padding: 0 $base_padding * 2; }
} }
} }
// right-click app menu
.app-menu {
max-width: 27.25em;
}
// 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;
@@ -148,7 +142,7 @@ $app_grid_fg_color: #fff;
background-gradient-start: rgba(255, 255, 255, 0.05); background-gradient-start: rgba(255, 255, 255, 0.05);
background-gradient-end: transparent; background-gradient-end: transparent;
background-gradient-direction: horizontal; background-gradient-direction: horizontal;
border-radius: 15px 0px 0px 15px; border-radius: $modal_radius*1.5 0px 0px $modal_radius*1.5;
} }
&.previous:ltr, &.previous:ltr,
@@ -156,7 +150,7 @@ $app_grid_fg_color: #fff;
background-gradient-start: transparent; background-gradient-start: transparent;
background-gradient-end: rgba(255, 255, 255, 0.05); background-gradient-end: rgba(255, 255, 255, 0.05);
background-gradient-direction: horizontal; background-gradient-direction: horizontal;
border-radius: 0px 15px 15px 0px; border-radius: 0px $modal_radius*1.5 $modal_radius*1.5 0px;
} }
} }
@@ -2,4 +2,5 @@
.button { .button {
@extend %button; // that's it @extend %button; // that's it
min-height: 22px;
} }
@@ -1,73 +1,41 @@
/* Date/Time Menu */ /* Date/Time Menu */
.clock-display-box {
spacing: 2px;
.clock {
padding-left: $base_padding * 2;
padding-right: $base_padding * 2;
}
}
// overall menu // overall menu
#calendarArea { #calendarArea {
padding:0; padding: $base_padding - 2px;
} }
// Calendar menu side column // Calendar menu side column
.datemenu-calendar-column { .datemenu-calendar-column {
spacing: $base_spacing; spacing: $base_padding;
border: 0 solid $bubble_borders_color; &:ltr {padding-left: $base_padding;}
padding: 0 $base_padding * 2; &:rtl {padding-right: $base_padding;}
.datemenu-displays-box {spacing: $base_padding;}
&:ltr {margin-right: $base_margin * 2; border-left-width: 1px; }
&:rtl {margin-left: $base_margin * 2; border-right-width: 1px; }
.datemenu-displays-section {
}
.datemenu-displays-box {
spacing: $base_spacing;
}
}
.events-section-title {
@include notification_bubble($flat: true);
color: desaturate(darken($fg_color,40%), 10%);
font-weight: bold;
padding: .4em;
} }
/* today button (the date) */ /* today button (the date) */
.datemenu-today-button { .datemenu-today-button {
@include notification_bubble($flat: true); @include card($flat: true);
padding: $base_padding * 1.5; padding: $base_padding * 1.5;
// weekday label // weekday label
.day-label { .day-label {
@include fontsize($base_font_size+1); @extend %heading;
font-weight: bold;
} }
// date label // date label
.date-label { .date-label {
@include fontsize($base_font_size+7); @extend %title_2;
font-weight: 1000;
} }
} }
/* Calendar */ /* Calendar */
.calendar { .calendar {
@include notification_bubble; @include card(flat);
padding: $base_padding; margin-top: 0;
// month // month header
.calendar-month-label { .calendar-month-header {
color: lighten($fg_color,5%);
font-weight: bold;
padding: 8px 0;
&:focus {}
}
// prev/next month icons // prev/next month icons
.calendar-change-month-back StIcon, .calendar-change-month-back StIcon,
@@ -75,217 +43,214 @@
icon-size: $base_icon_size; icon-size: $base_icon_size;
} }
// month label
.calendar-month-label {
color: lighten($fg_color,5%);
@extend %heading;
padding: 8px 0;
}
.pager-button { .pager-button {
background-color: transparent; background-color: transparent;
height: 32px; height: 32px;
width: 32px; width: 32px;
border-radius: $base_border_radius; margin: 2px;
&:hover, &:focus { background-color: lighten($hover_bg_color, 5%); } border-radius: $base_border_radius - 2px;
&:active { background-color: $active_bg_color; } &:hover, &:focus {background-color: $hover_bg_color;}
&:active {background-color: $active_bg_color;}
}
} }
$calendar_day_size: 32px; $calendar_day_size: 32px;
.calendar-day-base { .calendar-day-base {
@include fontsize($base_font_size - 3);
text-align: center; text-align: center;
width: $calendar_day_size;
height: $calendar_day_size;
padding: 0;
margin: 2px; margin: 2px;
border-radius: $calendar_day_size * 0.5 + 2px; padding: 0 !important;
border: 1px solid transparent; //avoid jumparound due to today height: $calendar_day_size !important;
font-feature-settings: "tnum"; width: $calendar_day_size !important;
&:hover, &:focus { background-color: $hover_bg_color; } border-radius: 99px;
@extend %numeric;
@extend %smaller;
&:hover {background-color: $hover_bg_color;}
&:focus {
background-color: mix($bg_color, $selected_bg_color, 80%);
color: $selected_fg_color;
box-shadow:inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
}
&:active,&:selected { &:active,&:selected {
color: lighten($fg_color,10%); color: $active_fg_color;
background-color: darken($bg_color,5%); background-color: $active_bg_color;
&:focus {
background-color: mix($active_bg_color, $selected_bg_color, 80%);
}
} }
// day of week heading // day of week heading
&.calendar-day-heading { &.calendar-day-heading {
color: lighten($fg_color,10%);
margin-top: 1em;
@include fontsize($base_font_size - 4);
}
}
.calendar-day { //border collapse hack - see calendar.js
border-width: 0;
}
.calendar-day-top {
border-top-width: 1px;
}
.calendar-day-left {
border-left-width: 1px;
}
.calendar-work-day {}
.calendar-nonwork-day {
color: $insensitive_fg_color; color: $insensitive_fg_color;
padding-top: $base_padding;
height: 16px !important; // force heading to be smaller height
font-weight: bold;
@extend %smaller;
}
}
.calendar-day {}
.calendar-work-day {}
.calendar-nonwork-day {color: $insensitive_fg_color;}
.calendar-other-month-day {
color: transparentize($fg_color, 0.5);
&.calendar-nonwork-day {
color: transparentize($insensitive_fg_color, 0.5);
}
} }
// Today // Today
.calendar-today { .calendar-today {
font-weight: bold;
border: 1px solid transparent;
background-color: $selected_bg_color; background-color: $selected_bg_color;
color: $selected_fg_color; font-weight: 800;
color: $selected_fg_color !important;
&:hover,&:focus { &:hover,&:focus {
background-color:lighten($selected_bg_color, 3%); background-color:lighten($selected_bg_color, 3%);
color: $selected_fg_color; color: inherit;
} }
&:active,&:selected { &:active,&:selected {
background-color: $selected_bg_color; background-color: $selected_bg_color;
color: $selected_fg_color; color: inherit;
&:hover,&:focus { &:hover,&:focus {
background-color:lighten($selected_bg_color, 3%); background-color:lighten($selected_bg_color, 3%);
color: $selected_fg_color; color: inherit;
} }
} }
} }
.calendar-day-with-events { .calendar-day-with-events {
background-image: url("assets/calendar-today.svg"); background-image: if($variant == 'light', url("assets/calendar-today-light.svg"),url("assets/calendar-today.svg"));
&.calendar-work-day { background-size: contain;
color: lighten($fg_color,10%);
font-weight: bold;
}
}
.calendar-other-month-day {
color: transparentize($fg_color ,0.5);
} }
.calendar-week-number { .calendar-week-number {
@include fontsize($base_font_size - 4); @include fontsize($base_font_size - 4);
font-weight: bold; font-weight: bold;
height: 1.8em; font-feature-settings: "tnum";
width: 2.3em;
border-radius: 2px;
margin: 6px; margin: 6px;
padding: 0 $base_padding;
border-radius: 3px;
background-color: darken($bg_color, 2%); background-color: darken($bg_color, 2%);
color: lighten($fg_color, 5%); color: $insensitive_fg_color
} }
} }
/* Events */ /* Events */
.events-button { .events-button {
@include notification_bubble; @include card;
padding: $base_padding * 2; padding: $base_padding * 2;
.events-box { .events-box {
spacing: $base_spacing; spacing: $base_padding;
} }
.events-list { .events-list {
spacing: 2 * $base_spacing; spacing: 2 * $base_padding;
} }
.events-title { .events-title {
color: desaturate(darken($fg_color,40%), 10%); @extend %heading;
font-weight: bold; color: $insensitive_fg_color;
margin-bottom: $base_margin; margin-bottom: $base_margin;
} }
.event-time { .event-time {
color: darken($fg_color,20%); @extend %numeric;
font-feature-settings: "tnum"; @extend %caption;
@include fontsize($base_font_size - 1); color: $insensitive_fg_color;
} }
} }
/* World clocks */ /* World clocks */
.world-clocks-button { .world-clocks-button {
@include notification_bubble; @include card;
padding: $base_padding * 2; padding: $base_padding * 2;
.world-clocks-grid { .world-clocks-grid {
spacing-rows: $base_spacing; spacing-rows: $base_padding;
spacing-columns: $base_spacing * 2; spacing-columns: $base_padding * 2;
} }
// title // title
.world-clocks-header { .world-clocks-header {
color: desaturate(darken($fg_color,40%), 10%); @extend %heading;
font-weight: bold; color: $insensitive_fg_color;
} }
// city label // city label
.world-clocks-city { .world-clocks-city {
color: $fg_color; color: $fg_color;
@include fontsize($base_font_size);
font-weight: normal;
} }
// timezone time // timezone time
.world-clocks-time { .world-clocks-time {
font-weight: bold; @extend %heading;
@extend %numeric;
color: $fg_color; color: $fg_color;
font-feature-settings: "tnum";
@include fontsize($base_font_size);
&:ltr { text-align: right; } &:ltr {text-align: right;}
&:rtl { text-align: left; } &:rtl {text-align: left;}
} }
// timezone offset label // timezone offset label
.world-clocks-timezone { .world-clocks-timezone {
color: darken($fg_color,20%); @extend %numeric;
font-feature-settings: "tnum"; @extend %caption;
@include fontsize($base_font_size - 1); color: $insensitive_fg_color;
} }
} }
/* Weather */ /* Weather */
.weather-button { .weather-button {
@include notification_bubble; @include card;
padding: $base_padding * 2; padding: $base_padding * 2;
.weather-box { .weather-box {
spacing: $base_spacing + $base_margin; spacing: $base_padding + $base_margin;
} }
.weather-header-box { .weather-header-box {
spacing: $base_spacing; spacing: $base_padding;
} }
.weather-header { .weather-header {
color: desaturate(darken($fg_color,40%), 10%); color: $insensitive_fg_color;
font-weight: bold; @extend %heading;
&.location { &.location {
font-weight: normal; font-weight: normal;
@include fontsize($base_font_size - 1);
} }
} }
.weather-grid { .weather-grid {
spacing-rows: $base_spacing; spacing-rows: $base_padding;
spacing-columns: $base_spacing * 2; spacing-columns: $base_padding * 2;
} }
.weather-forecast-time { .weather-forecast-time {
@extend %numeric;
@extend %caption;
color: darken($fg_color,30%); color: darken($fg_color,30%);
font-feature-settings: "tnum";
@include fontsize($base_font_size - 2);
font-weight: normal;
padding-top: 0.2em; padding-top: 0.2em;
padding-bottom: 0.4em; padding-bottom: 0.4em;
} }
.weather-forecast-icon { .weather-forecast-icon {
icon-size: $base_icon_size * 2; icon-size: $large_icon_size;
} }
.weather-forecast-temp { .weather-forecast-temp {
font-weight: bold; @extend %heading;
} }
} }
@@ -1,7 +1,7 @@
/* Check Boxes */ /* Check Boxes */
// these are equal to the size of the SVG assets // these are equal to the size of the SVG assets
$check_height: 22px; $check_height: 24px;
$check_width: 24px; $check_width: 24px;
@@ -10,9 +10,9 @@ $check_width: 24px;
StBin { StBin {
width: $check_width; width: $check_width;
height: $check_height; height: $check_height;
background-image: url("assets/checkbox-off.svg"); background-image: if($variant == 'light', url("assets/checkbox-off-light.svg"), url("assets/checkbox-off.svg"));
} }
&:focus StBin { background-image: url("assets/checkbox-off-focused.svg"); } &:focus StBin { background-image: if($variant == 'light', url("assets/checkbox-off-focused-light.svg"), url("assets/checkbox-off-focused.svg"));; }
&:checked StBin { background-image: url("assets/checkbox.svg"); } &:checked StBin { background-image: url("assets/checkbox.svg"); }
&:focus:checked StBin { background-image: url("assets/checkbox-focused.svg"); } &:focus:checked StBin { background-image: url("assets/checkbox-focused.svg"); }
} }
@@ -1,18 +1,14 @@
/* Dash */ /* Dash */
$dash_background_color: #3b3b3b; $dash_background_color: lighten($system_bg_color, 5%);
$dash_placeholder_size: 32px; $dash_placeholder_size: 32px;
$dash_padding: $base_padding + 4px; // 10px $dash_padding: $base_padding*2; // 12px
$dash_spacing: $base_padding / 4; $dash_border_radius: $modal_radius + $dash_padding;
$dash_bottom_margin: $base_margin * 4;
$dash_border_radius: $modal_radius * 1.5;
// container for the dash
#dash { #dash {
@include fontsize($base_font_size - 2); @extend %caption;
margin-top: $base_spacing * 3; margin: 2em;
padding: 0 $dash_padding;
.placeholder { .placeholder {
// background-image: url("assets/dash-placeholder.svg"); // background-image: url("assets/dash-placeholder.svg");
@@ -26,27 +22,36 @@ $dash_border_radius: $modal_radius * 1.5;
height: $dash_placeholder_size; height: $dash_placeholder_size;
} }
.overview-icon { // Running app indicator (also shown in app grid)
padding: $dash_padding / 2; .app-well-app-running-dot {
margin-bottom: 15px; // hardcoded
} }
} }
// background of the dash behind app icons
.dash-background { .dash-background {
background-color: $dash_background_color; background-color: $dash_background_color;
margin-bottom: $dash_bottom_margin;
padding: $dash_padding;
border-radius: $dash_border_radius; border-radius: $dash_border_radius;
padding: $dash_padding;
spacing: $base_padding;
} }
// Dash Items // items on the dash
.dash-item-container .app-well-app, .show-apps { .dash-item-container {
padding: $dash_padding $dash_spacing $dash_padding + $dash_bottom_margin; // each app item on the dash
.app-well-app .overview-icon {
margin: 0 4px;
padding: $base_padding;
}
// show apps button
.show-apps { @include overview_icon($osd_fg_color);}
} }
// separator between favourites and running apps
.dash-separator { .dash-separator {
width: 1px; width: 1px;
margin: 0 ($dash_spacing + ($dash_padding / 2)) $dash_bottom_margin; background-color: $borders_color;
background-color: transparentize($osd_fg_color,0.7);
} }
// OSD Tooltip // OSD Tooltip
@@ -56,18 +61,5 @@ $dash_border_radius: $modal_radius * 1.5;
border-radius: 99px; border-radius: 99px;
padding: $base_padding $base_padding * 2; padding: $base_padding $base_padding * 2;
text-align: center; text-align: center;
-y-offset: $base_margin * 3; // distance from the dash edge -y-offset: $base_margin * 2; // distance from the dash edge
}
// Show apps button
.show-apps {
@include overview-icon($osd_fg_color);
&:focus,
&:checked {
.overview-icon {
background-color: transparentize($osd_bg_color,0.5);
color: $fg_color;
}
}
} }
@@ -1,11 +1,10 @@
/* Modal Dialogs */ /* Modal Dialogs */
.headline { .headline {
@include fontsize($base_font_size + 1); @extend %title_4;
} }
.modal-dialog { .modal-dialog {
border-radius: $modal_radius;
@extend %bubble_panel; @extend %bubble_panel;
.modal-dialog-content-box { .modal-dialog-content-box {
@@ -35,13 +34,9 @@
.message-dialog-title { .message-dialog-title {
text-align: center; text-align: center;
font-size: 18pt; @extend %title_2;
font-weight: 800;
&.lightweight { &.lightweight { @extend %title_4;}
font-size: 13pt;
font-weight: 800;
}
} }
.message-dialog-description { text-align: center; } .message-dialog-description { text-align: center; }
} }
@@ -52,7 +47,7 @@
.dialog-list-title { .dialog-list-title {
text-align: center; text-align: center;
font-weight: bold; @extend %heading;
} }
.dialog-list-scrollview { max-height: 200px; } .dialog-list-scrollview { max-height: 200px; }
@@ -65,7 +60,7 @@
.dialog-list-item-title { font-weight: bold; } .dialog-list-item-title { font-weight: bold; }
.dialog-list-item-description { .dialog-list-item-description {
color: darken($fg_color,5%); color: darken($fg_color,5%);
@include fontsize($base_font_size - 1); @extend %caption;
} }
} }
} }
@@ -79,7 +74,7 @@
} }
.run-dialog-entry { width: 20em; } .run-dialog-entry { width: 20em; }
.run-dialog-description { .run-dialog-description {
@include fontsize($base_font_size - 1); @extend %caption;
text-align: center; text-align: center;
color: darken($fg_color, 20%); color: darken($fg_color, 20%);
} }
@@ -120,7 +115,7 @@
.prompt-dialog-info-label, .prompt-dialog-info-label,
.prompt-dialog-null-label { .prompt-dialog-null-label {
text-align: center; text-align: center;
@include fontsize($base_font_size - 1); @extend %caption;
} }
.prompt-dialog-error-label { .prompt-dialog-error-label {
@@ -145,8 +140,7 @@
} }
.audio-selection-device { .audio-selection-device {
border: 1px solid $bubble_borders_color; border-radius: $base_border_radius*2;
border-radius: 12px;
&:hover,&:focus { background-color: $hover_bg_color; } &:hover,&:focus { background-color: $hover_bg_color; }
&:active { &:active {
background-color: $selected_bg_color; background-color: $selected_bg_color;
@@ -3,23 +3,27 @@
StEntry { StEntry {
border-radius: $base_border_radius; border-radius: $base_border_radius;
padding: 8px; padding: 8px;
border-width: 0;
color: $fg_color; color: $fg_color;
@include entry(normal); @include entry(normal);
//&:hover { @include entry(hover);} &:hover { @include entry(hover);}
&:focus { @include entry(focus);} &:focus { @include entry(focus);}
&:insensitive { @include entry(insensitive);} &:insensitive { @include entry(insensitive);}
selection-background-color: $selected_bg_color; selection-background-color: $selected_bg_color;
selected-color: $selected_fg_color; selected-color: $selected_fg_color;
StIcon.capslock-warning { StIcon.capslock-warning {
icon-size: 16px; icon-size: 16px;
warning-color: $warning_color; warning-color: $warning_color;
padding: 0 4px; padding: 0 4px;
} }
StIcon.peek-password { StIcon.peek-password {
icon-size: $base_icon_size; icon-size: $base_icon_size;
padding: 0 4px; padding: 0 4px;
} }
StLabel.hint-text { StLabel.hint-text {
margin-left: 2px; margin-left: 2px;
color: transparentize($fg_color, 0.3); color: transparentize($fg_color, 0.3);
@@ -5,31 +5,32 @@
} }
.candidate-popup-content { .candidate-popup-content {
padding: 0.5em; padding: $base_padding;
spacing: 0.3em; spacing: $base_padding;
@extend .popup-menu-content;
} }
.candidate-index { .candidate-index {
padding: 0 0.5em 0 0; padding: 0;
color: darken($fg_color,10%); padding-right: $base_padding;
color: $insensitive_fg_color;
} }
.candidate-box { .candidate-box {
padding: 0.3em 0.5em 0.3em 0.5em; padding: $base_padding $base_padding*2 $base_padding $base_padding*2;
border-radius: $base_border_radius; border-radius: $base_border_radius;
&:selected,&:hover { background-color: $selected_bg_color; color: $selected_fg_color; } &:selected { background-color: $selected_bg_color; color: $selected_fg_color; }
&:hover { background-color: $hover_bg_color; color: $hover_fg_color; }
} }
.candidate-page-button-box { .candidate-page-button-box {
height: 2em; height: 2em;
.vertical & { padding-top: 0.5em; } .vertical & { padding-top: $base_padding*2; }
.horizontal & { padding-left: 0.5em; } .horizontal & { padding-left: $base_padding*2; }
} }
.candidate-page-button { .candidate-page-button { padding: $base_padding;}
padding: 4px;
}
.candidate-page-button-previous { border-radius: $base_border_radius 0px 0px $base_border_radius; border-right-width: 0; } .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; } .candidate-page-button-next { border-radius: 0px $base_border_radius $base_border_radius 0px;box-shadow: none;}
.candidate-page-button-icon { icon-size: 1em; } .candidate-page-button-icon { icon-size: $base_icon_size; }
@@ -1,15 +1,16 @@
/* On-screen Keyboard */ /* On-screen Keyboard */
$key_size: 1.2em; $key_size: 1.2em;
$key_border_radius: $base_border_radius + 3px; $key_border_radius: $base_border_radius + 4px; // 12px
$key_bg_color: $bg_color; $key_bg_color: darken($osd_fg_color, 70%);
// $default_key_bg_color: darken($key_bg_color, 4%); // $default_key_bg_color: darken($key_bg_color, 4%);
$default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten($osd_bg_color, 2%)); $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken($key_bg_color, 10%));
// draw keys using button function // draw keys using button function
#keyboard { #keyboard {
background-color: transparentize(if($variant=='light', darken($bg_color, 5%), darken($bg_color, 8%)), 0.1); // background-color: transparentize(if($variant=='light', darken($bg_color, 5%), darken($bg_color, 8%)), 0.1);
background-color: $osd_bg_color;
box-shadow: inset 0 1px 0 0 $osd_outer_borders_color; box-shadow: inset 0 1px 0 0 $osd_outer_borders_color;
.page-indicator { .page-indicator {
@@ -31,18 +32,21 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten
// the keys // the keys
.keyboard-key { .keyboard-key {
@include button(normal, $c:$key_bg_color);
&:focus { @include button(focus);}
&:hover, &:checked { @include button(hover, $c: $key_bg_color);}
&:active { @include button(active, $c: $key_bg_color); }
@include fontsize($base_font_size + 5); @include fontsize($base_font_size + 5);
font-weight: bold;
min-height: $key_size; min-height: $key_size;
min-width: $key_size; min-width: $key_size;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-radius: $key_border_radius; border-radius: $key_border_radius;
box-shadow: 0 1px 0 0 $shadow_color;
@include keyboard_key(normal, $key_bg_color, $osd_fg_color);
&:focus { @include keyboard_key(focus);}
&:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
&:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); }
&:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); }
&:grayed { //FIXMEy &:grayed { //FIXMEy
background-color: darken($bg_color, 3%); background-color: darken($bg_color, 3%);
@@ -52,42 +56,59 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten
// non-character keys // non-character keys
&.default-key { &.default-key {
@include button(normal, $c:$default_key_bg_color); @include keyboard_key(normal, $default_key_bg_color, $osd_fg_color);
&:hover, &:checked {@include button(hover, $c: $default_key_bg_color);} &:hover {@include keyboard_key(hover, $default_key_bg_color, $osd_fg_color);}
&:active { @include button(active, $c: $default_key_bg_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);}
border-radius: $key_border_radius;
} }
// enter key is suggested-action // enter key is suggested-action
&.enter-key { &.enter-key {
@include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color); @include keyboard_key(normal, $selected_bg_color, $selected_fg_color);
&:hover, &:checked { @include button(hover, $c: lighten($selected_bg_color, 3%));} &:hover { @include keyboard_key(hover, $selected_bg_color, $selected_fg_color);}
&:active {@include button(active, $c: darken($selected_bg_color, 2%));} &:active {@include keyboard_key(active, $selected_bg_color, $selected_fg_color);}
&:checked {@include keyboard_key(checked, $selected_bg_color, $selected_fg_color);}
border-radius: $key_border_radius;
color: $osd_fg_color;
} }
&.shift-key-uppercase { color: $selected_bg_color } &.shift-key-lowercase {}
StIcon { icon-size: 1.125em; } // pressed shift has different style
&.shift-key-uppercase {
background-color: lighten($key_bg_color, 20%);
color: $osd_bg_color;
&:hover {
background-color: lighten($key_bg_color, 25%);
color: lighten($osd_bg_color, 5%);
}
}
// size of icons on keys
StIcon { icon-size: 24px; }
} }
// long press on a key popup // long press on a key popup
.keyboard-subkeys { .keyboard-subkeys {
color: $osd_fg_color; -arrow-border-radius: $base_border_radius*2;
-arrow-border-radius: $modal_radius;
-arrow-background-color: $osd_bg_color; -arrow-background-color: $osd_bg_color;
-arrow-border-width: 1px; -arrow-border-width: 1px;
-arrow-border-color: lighten($osd_bg_color, 9%); -arrow-border-color: lighten($osd_bg_color, 9%);
-arrow-base: 20px; -arrow-base: 20px;
-arrow-rise: 10px; -arrow-rise: 10px;
-boxpointer-gap: $base_spacing; -boxpointer-gap: $base_padding;
padding: $base_padding;
.keyboard-key { .keyboard-key {
@include button(normal, $c:$key_bg_color); @include keyboard_key(normal, $key_bg_color, $osd_fg_color);
&:focus { @include button(focus);} &:focus { @include keyboard_key(focus);}
&:hover, &:checked { @include button(hover, $c: $key_bg_color);} &:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
&:active { @include button(active, $c: $key_bg_color); } &:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); }
&:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); }
border-radius:$base_border_radius; border-radius:$key_border_radius;
} }
} }
@@ -112,4 +133,21 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten
@include fontsize($base_font_size + 3); @include fontsize($base_font_size + 3);
spacing: 12px; spacing: 12px;
min-height: 20pt; min-height: 20pt;
padding: $base_padding*2;
color: $osd_fg_color;
// each suggestion
StButton {
margin: 0 3px;
min-width: 32px;
border-radius: $base_border_radius - 2px;
padding: $base_padding $base_padding*3;
@include keyboard_key(undecorated, $key_bg_color, $osd_fg_color);
&:focus { @include keyboard_key(focus);}
&:hover { @include keyboard_key(hover, $key_bg_color, $osd_fg_color);}
&:active { @include keyboard_key(active, $key_bg_color, $osd_fg_color); }
&:checked { @include keyboard_key(checked, $key_bg_color, $osd_fg_color); }
}
} }
@@ -13,14 +13,6 @@
$_gdm_bg: $system_bg_color; $_gdm_bg: $system_bg_color;
StEntry {
@if $variant=='dark' {
$_gdm_entry_bg: darken($system_bg_color, 3%);
background-color: $_gdm_entry_bg;
color: $fg_color;
}
}
.modal-dialog-button-box { spacing: 3px; } .modal-dialog-button-box { spacing: 3px; }
.modal-dialog-button { .modal-dialog-button {
padding: 4px 18px; padding: 4px 18px;
@@ -47,26 +39,7 @@
color: transparentize($osd_fg_color, 0.3); color: transparentize($osd_fg_color, 0.3);
} }
&:default { &:default {
@include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color); @include button(default);
border-color: $selected_bg_color;
&:hover, &:focus {
@include button(hover,$c:$selected_bg_color, $tc:$selected_fg_color);
$_def_hover_c: lighten($selected_bg_color, 5%);
background-color: $_def_hover_c;
border-color: $_def_hover_c;
}
&:active {
@include button(active,$c:$selected_bg_color, $tc:$selected_fg_color);
$_def_active_c: darken($selected_bg_color, 5%);
background-color: $_def_active_c;
border-color: $_def_active_c;
}
&:insensitive {
@include button(insensitive);
border-color: darken($selected_bg_color, 10%);
background-color: darken($selected_bg_color, 10%);
color: transparentize($selected_fg_color, 0.3);
}
} }
} }
@@ -75,8 +48,8 @@
.login-dialog-session-list-button { .login-dialog-session-list-button {
padding: 0; padding: 0;
border-radius: 99px; border-radius: 99px;
width: $base_icon_size * 2; width: $large_icon_size;
height: $base_icon_size * 2; height: $large_icon_size;
border-color: darken($system_bg_color, 3%); border-color: darken($system_bg_color, 3%);
background-color: darken($system_bg_color, 3%); background-color: darken($system_bg_color, 3%);
@@ -103,12 +76,38 @@
} }
.login-dialog-not-listed-label { .login-dialog-not-listed-label {
@include fontsize($base_font_size - 1); @extend %caption;
font-weight: bold; font-weight: bold;
color: darken($osd_fg_color,30%); color: darken($osd_fg_color,30%);
padding-top: 1em; padding-top: 1em;
} }
.login-dialog-auth-list-view { -st-vfade-offset: 1em; }
.login-dialog-auth-list {
spacing: 6px;
margin-left: 2em;
}
.login-dialog-auth-list-title {
margin-left: 2em;
}
.login-dialog-auth-list-item {
border-radius: $base_border_radius + 4px;
padding: 6px;
color: darken($osd_fg_color,30%);
&:focus, &:selected { background-color: $selected_bg_color; color: $selected_fg_color; }
}
.login-dialog-auth-list-label {
@include fontsize($base_font_size + 2);
font-weight: bold;
padding-left: 15px;
&:ltr { padding-left: 14px; text-align: left; }
&:rtl { padding-right: 14px; text-align: right; }
}
.login-dialog-user-list-view { -st-vfade-offset: 1em; } .login-dialog-user-list-view { -st-vfade-offset: 1em; }
.login-dialog-user-list { .login-dialog-user-list {
spacing: 12px; spacing: 12px;
@@ -159,7 +158,7 @@
.login-dialog-prompt-layout { .login-dialog-prompt-layout {
padding-top: 24px; padding-top: 24px;
padding-bottom: 12px; padding-bottom: 12px;
spacing: $base_spacing * 2; spacing: $base_padding * 2;
width: 23em; width: 23em;
} }
@@ -172,3 +171,34 @@
@include fontsize($base_font_size + 1); @include fontsize($base_font_size + 1);
padding-top: 1em; padding-top: 1em;
} }
.login-dialog {
StEntry {
@if $variant=='dark' {
$_gdm_entry_bg: darken($system_bg_color, 3%);
background-color: $_gdm_entry_bg;
color: $fg_color;
}
}
}
// Custom styling for unlock entry
.unlock-dialog {
StEntry {
border:none !important;
&:focus {
background-color: transparentize($fg_color, 0.9);
}
&:insensitive {
color: transparentize($fg_color, 0.5);
background-color: transparentize($fg_color, 0.95);
}
}
.cancel-button,
.switch-user-button,
.login-dialog-session-list-button {
border-color: transparent;
background-color: transparentize($fg_color, 0.9);
}
}
@@ -1,46 +1,65 @@
/* Looking Glass */ /* Looking Glass */
$text_fg_color: #ccc;
// Dialog // Dialog
#LookingGlassDialog { #LookingGlassDialog {
background-color: $osd_bg_color; background-color: $osd_bg_color;
spacing: $base_spacing; border-radius: 0 0 $modal_radius $modal_radius;
padding: 4px; border-top-width: 0;
border: 1px solid transparentize($osd_fg_color, 0.8); border: 1px solid $osd_outer_borders_color;
border-radius: $base_border_radius;
color: $osd_fg_color; color: $osd_fg_color;
padding: $base_padding;
spacing: $base_padding;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
& > #Toolbar { & > #Toolbar {
border: none; border: none;
border-radius: $base_border_radius; padding: $base_padding;
background-color: $osd_bg_color; border-radius: 0;
background-color: transparent;
spacing: $base_padding;
.lg-toolbar-button {
padding: $base_padding $base_padding*2;
@extend %button;
& > StIcon { icon-size: $base_icon_size; }
}
}
.labels {
spacing: $base_padding;
} }
.labels { spacing: $base_spacing; }
.notebook-tab { .notebook-tab {
-natural-hpadding: $base_padding * 2; -natural-hpadding: $base_padding*2;
-minimum-hpadding: 6px; -minimum-hpadding: $base_padding*2;
font-weight: bold; font-weight: bold;
padding: $base_padding $base_padding*2;
color: darken($osd_fg_color, 15%); color: darken($osd_fg_color, 15%);
transition-duration: 100ms; transition-duration: 100ms;
padding-left: .3em; box-shadow:none;
padding-right: .3em; border:none;
border-bottom-width: 2px; border-radius: $base_border_radius - 2px;
background-color: transparent;
&:hover { &:hover {
color: $osd_fg_color; color: $osd_fg_color;
background-color: transparentize($osd_fg_color, 0.95);
} }
&:selected { &:selected {
border-bottom-width: 2px;
box-shadow: inset 0 -2px 0 0 lighten($selected_bg_color, 5%);
color: $osd_fg_color; color: $osd_fg_color;
background-color: transparentize($osd_fg_color, 0.9);
} }
} }
StBoxLayout#EvalBox { padding: 4px; spacing: $base_spacing; }
StBoxLayout#ResultsArea { spacing: $base_spacing; } StBoxLayout#EvalBox { padding: 4px; spacing: $base_padding; padding: $base_padding; }
StBoxLayout#ResultsArea { spacing: $base_padding; padding: $base_padding; }
} }
.lg-dialog { .lg-dialog {
StEntry { StEntry {
background-color: transparentize(lighten($osd_bg_color, 5%), 0.4); background-color: transparentize(lighten($osd_bg_color, 5%), 0.4);
color: $osd_fg_color; color: $osd_fg_color;
@@ -49,25 +68,27 @@ $text_fg_color: #ccc;
selection-background-color: $selected_bg_color; selection-background-color: $selected_bg_color;
selected-color: $selected_fg_color; selected-color: $selected_fg_color;
} }
.shell-link { .shell-link {
color: $link_color; color: $link_color;
&:hover { color: lighten($link_color, 10%); } &:hover { color: lighten($link_color, 10%); }
&:active { color: darken($link_color, 10%); } &:active { color: darken($link_color, 10%); }
} }
.actor-link { .actor-link {
color: $text_fg_color; color: $insensitive_fg_color;
&:hover { color: lighten($text_fg_color, 20%); } &:hover { color: lighten($insensitive_fg_color, 20%); }
&:active { color: darken($text_fg_color, 20%); } &:active { color: darken($insensitive_fg_color, 20%); }
} }
} }
.lg-completions-text { .lg-completions-text {
font-size: .9em; @extend %caption;
font-style: italic; font-style: italic;
} }
.lg-obj-inspector-title { .lg-obj-inspector-title {
spacing: $base_spacing; spacing: $base_padding;
} }
.lg-obj-inspector-button { .lg-obj-inspector-button {
@@ -78,26 +99,24 @@ $text_fg_color: #ccc;
} }
// Extensions // Extensions
#lookingGlassExtensions { padding: 4px; } #lookingGlassExtensions { padding: $base_padding; }
.lg-extensions-list { .lg-extensions-list {
padding: 4px; padding: $base_padding;
spacing: 6px; spacing: $base_padding;
} }
.lg-extension { .lg-extension {
border: 1px solid lighten($osd_borders_color, 5%); padding: $base_padding*2;
background-color: lighten($osd_bg_color, 5%); @include card;
border-radius: $base_border_radius;
padding: 4px;
} }
.lg-extension-name { .lg-extension-name {
font-weight: bold; @extend %heading;
} }
.lg-extension-meta { .lg-extension-meta {
spacing: 6px; spacing: $base_padding;
} }
// Inspector // Inspector
@@ -105,5 +124,19 @@ $text_fg_color: #ccc;
background: $osd_bg_color; background: $osd_bg_color;
border: 1px solid $osd_borders_color; border: 1px solid $osd_borders_color;
border-radius: $base_border_radius; border-radius: $base_border_radius;
padding: 6px; padding: $base_padding;
}
.lg-debug-flag-button {
StLabel { padding: $base_padding, 2 * $base_padding; }
color: $fg_color;
&:hover { color: lighten($fg_color, 20%); }
&:active { color: darken($fg_color, 20%); }
}
.lg-debug-flags-header {
padding-top: 2 * $base_padding;
padding: $base_padding;
@extend %title_2;
} }
@@ -3,28 +3,47 @@
// main list // main list
.message-list { .message-list {
width: 31.5em; width: 32em;
padding: 0 $base_padding * 2; border: solid $borders_color;
.message-list-placeholder { spacing: 12px; } // padding and margins to account for scrollbar
&:ltr {margin-left: 0; margin-right: $base_margin; padding-right: $base_padding; border-right-width: 1px; }
&:rtl {margin-right: 0; margin-left: $base_margin; padding-left: $base_padding; border-left-width: 1px; }
.message-list-placeholder {
@extend %title_2;
color: transparentize($insensitive_fg_color, .5);
// icon size and color
> StIcon {
icon-size: $base_icon_size*3; // 48px
margin-bottom: $base_margin*3;
-st-icon-style: symbolic;
}
}
} }
.message-list-sections { .message-list-sections {
spacing: $base_spacing; spacing: $base_padding;
margin: 0 $base_margin * 4; // to account for scrollbar margin: 0;
padding-bottom: $base_padding;
// to account for scrollbar
&:ltr {margin-right: $base_margin * 3; }
&:rtl {margin-left: $base_margin * 3;}
} }
.message-list-section, .message-list-section,
.message-list-section-list { .message-list-section-list {
spacing: $base_spacing; spacing: $base_padding;
} }
// do-not-disturb + clear button // do-not-disturb + clear button
.message-list-controls { .message-list-controls {
margin: ($base_margin * 2) ($base_margin * 4) 0;
// NOTE: remove the padding if notification_bubble could remove margin for drop shadow // NOTE: remove the padding if notification_bubble could remove margin for drop shadow
padding: $base_margin; padding: $base_padding;
spacing: $base_spacing * 2; spacing: $base_padding;
@extend %heading;
.dnd-button { .dnd-button {
// We need this because the focus outline isn't inset like for the buttons // We need this because the focus outline isn't inset like for the buttons
@@ -32,7 +51,7 @@
// its color when focusing. // its color when focusing.
border-width: 2px; border-width: 2px;
border-color: transparent; border-color: transparent;
border-radius: 99px; border-radius: 32px;
border-style: solid; border-style: solid;
&:focus { &:focus {
@@ -43,19 +62,20 @@
// message bubbles // message bubbles
.message { .message {
@include notification_bubble; @include card;
// icon container // icon container
.message-icon-bin { .message-icon-bin {
padding: ($base_padding * 3) 0 ($base_padding * 3) ($base_padding * 2); padding: ($base_padding * 3);
padding-right:$base_padding;
&:rtl { &:rtl {
padding: ($base_padding * 3) ($base_padding * 2) ($base_padding * 3) 0; padding-right:$base_padding;
} }
// icon size and color // icon size and color
> StIcon { > StIcon {
icon-size: $base_icon_size*2; // 32px icon-size: $large_icon_size; // 32px
-st-icon-style: symbolic; -st-icon-style: symbolic;
} }
@@ -68,13 +88,16 @@
// content // content
.message-content { .message-content {
padding: $base_padding + $base_margin * 2;
spacing: 4px; spacing: 4px;
padding: ($base_padding*1.5);
margin-bottom: $base_margin*2;
} }
// title // title
.message-title { .message-title {
font-weight: bold; font-weight: bold;
/* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
padding-top: 0.57em;
} }
// secondary container in title box // secondary container in title box
@@ -95,15 +118,17 @@
// close button // close button
.message-close-button { .message-close-button {
color: lighten($fg_color, 15%); color: $fg_color;
&:hover { color: if($variant=='light', lighten($fg_color, 30%), darken($fg_color, 10%)); } background-color: transparentize($fg_color, 0.9);
&:active { color: if($variant=='light', lighten($fg_color, 40%), darken($fg_color, 20%)); } border-radius: 99px;
padding: $base_padding - 1px;
margin: 1px;
&:hover {background-color: transparentize($fg_color, 0.8);}
&:active {background-color: transparentize($fg_color, 0.9);}
} }
// body // body
.message-body { .message-body {color: darken($fg_color, 10%);}
color: darken($fg_color, 10%);
}
} }
// URLs in messages // URLs in messages
@@ -113,30 +138,32 @@
/* Media Controls */ /* Media Controls */
.message-media-control { .message-media-control {
padding: $base_padding * 2 1.64em; // $base_padding * 4 = 24px padding: 0 $base_padding*3;
color: darken($fg_color, 15%); margin: $base_padding*2 0;
border-radius: $base_border_radius;
color: $fg_color;
// uses $hover_bg_color since the media controls are in a notification_bubble // colors are lightened since the media controls are in a card
&:hover { &:hover {
background-color: lighten($hover_bg_color, 5%); background-color: lighten($hover_bg_color, 5%);
color: $fg_color; color: $fg_color;
} }
&:active { &:active {
background-color: darken($hover_bg_color, 2%); background-color: lighten($active_bg_color, 5%);
color: $fg_color; color: $fg_color;
} }
&:insensitive { color: darken($fg_color,40%); } &:insensitive { color: lighten($insensitive_fg_color, 5%); }
// fix border-radius for last button // fix margin for last button
&:last-child:ltr { border-radius: 0 $base_border_radius+2 $base_border_radius+2 0; } &:last-child:ltr { margin-right: $base_margin*3; }
&:last-child:rtl { border-radius: $base_border_radius+2 0 0 $base_border_radius+2; } &:last-child:rtl { margin-left: $base_margin*3; }
} }
// album-art // album-art
.media-message-cover-icon { .media-message-cover-icon {
icon-size: $base_icon_size*2 !important; // 48px icon-size: $base_icon_size*3 !important; // 48px
border-radius: $base_border_radius; border-radius: $base_border_radius;
// when there is no artwork // when there is no artwork
@@ -145,6 +172,7 @@
background-color: $bg_color; background-color: $bg_color;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: $base_border_radius; border-radius: $base_border_radius;
icon-size: $base_icon_size * 2 !important; icon-size: $large_icon_size !important; // 32px
padding: ($base_padding*2 + 2); // 16px
} }
} }
@@ -48,7 +48,7 @@
.caps-lock-warning-label { .caps-lock-warning-label {
text-align: center; text-align: center;
padding-bottom: 8px; padding-bottom: 8px;
@include fontsize($base_font_size - 1); @extend %caption;
color: $warning_color; color: $warning_color;
} }
@@ -57,3 +57,9 @@
.workspace-animation { .workspace-animation {
background-color: $system_bg_color; background-color: $system_bg_color;
} }
/* Tiled window previews */
.tile-preview {
background-color: transparentize($selected_bg_color,0.5);
border: 1px solid $selected_bg_color;
}
@@ -1,4 +1,4 @@
/* Network Dialogs */ /* Select Network dialogs */
.nm-dialog { .nm-dialog {
max-height: 34em; max-height: 34em;
min-height: 31em; min-height: 31em;
@@ -10,47 +10,39 @@
padding: 24px; padding: 24px;
} }
.nm-dialog-airplane-box { spacing: 12px; } .nm-dialog-header { @extend %heading; }
.nm-dialog-subheader { color: $insensitive_fg_color;}
.nm-dialog-airplane-headline { .nm-dialog-header-icon { icon-size: $large_icon_size;}
font-weight: bold;
text-align: center;
}
.nm-dialog-airplane-text { color: $fg_color; }
// header
.nm-dialog-header {
font-weight: bold;
}
.nm-dialog-header-icon {
icon-size: $base_icon_size * 2;
}
.nm-dialog-header-hbox { spacing: 10px; } .nm-dialog-header-hbox { spacing: 10px; }
// list of networks
.nm-dialog-scroll-view { .nm-dialog-scroll-view {
border: 1px solid $borders_color; padding:$base_padding;
padding:0; border-radius: $base_border_radius;
background-color: darken($bg_color, 3%); background-color: $base_color;
} }
// list item
.nm-dialog-item { .nm-dialog-item {
@include fontsize($base_font_size);
border-bottom: 1px solid $borders_color;
padding: $base_padding * 2; padding: $base_padding * 2;
spacing: 0px;
&:selected { &:selected {
background-color: $selected_bg_color; background-color: $selected_bg_color;
border-radius: $base_border_radius - 3px;
color: $selected_fg_color; color: $selected_fg_color;
} }
&:hover { background-color:$hover_bg_color;}
} }
// icons in list
.nm-dialog-icon { icon-size: $base_icon_size; } .nm-dialog-icon { icon-size: $base_icon_size; }
.nm-dialog-icons { spacing: $base_spacing * 2; } .nm-dialog-icons { spacing: $base_padding * 2; }
// no networks // no networks
.no-networks-label { color: $insensitive_fg_color; }
.no-networks-box { spacing: $base_padding; } .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;}
@@ -2,11 +2,15 @@
$notification_banner_height: 64px; $notification_banner_height: 64px;
$notification_banner_width: 34em; $notification_banner_width: 34em;
$notification_banner_radius: $base_border_radius*1.5;
// Banner notifications // Banner notifications
.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);
border-radius: $notification_banner_radius;
margin: $base_margin;
.notification-actions { .notification-actions {
spacing: 0; spacing: 0;
@@ -1,29 +1,39 @@
/* OSD */ /* OSD */
$osd_levelbar_height:8px; $osd_levelbar_height:6px;
.osd-window { .osd-window {
@extend %osd_panel; @extend %osd_panel;
@extend %heading;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
spacing: $base_spacing * 2; // 12px spacing: $base_padding * 2; // 12px
margin: $base_margin * 8; // 32px padding: $base_padding * 2 $base_padding * 3;
min-width: 64px; & > * { spacing: 8px; }
min-height: 64px; margin-bottom: 4em;
StIcon { StIcon { icon-size:$large_icon_size;}
icon-size:$base_icon_size * 6;
}
.osd-monitor-label { font-size: 3em; } .osd-monitor-label { font-size: 3em; }
StLabel {
&:ltr { margin-right: 6px; }
&:rtl { margin-left: 6px; }
}
.level { .level {
margin-bottom: 4px;
&:first-child { margin-bottom: 0px; }
height: $osd_levelbar_height; height: $osd_levelbar_height;
min-width:$base_icon_size * 10;
-barlevel-height: $osd_levelbar_height; -barlevel-height: $osd_levelbar_height;
-barlevel-background-color: transparentize($osd_fg_color, if($variant=='light', 0.7, 0.9)); -barlevel-background-color: transparentize($osd_fg_color, if($variant=='light', 0.7, 0.9));
-barlevel-active-background-color: $osd_fg_color; -barlevel-active-background-color: $osd_fg_color;
-barlevel-overdrive-color: $destructive_color; -barlevel-overdrive-color: $destructive_color;
-barlevel-overdrive-separator-width: 3px; -barlevel-overdrive-separator-width: 3px;
&:ltr { margin-right: 6px; }
&:rtl { margin-left: 6px; }
} }
} }
@@ -1,7 +1,7 @@
/* OVERVIEW */ /* OVERVIEW */
.controls-manager, .secondary-monitor-workspaces { .controls-manager, .secondary-monitor-workspaces {
spacing: $base_spacing * 2; spacing: $base_padding * 2;
} }
#overviewGroup { #overviewGroup {
@@ -1,9 +1,8 @@
/* Top Bar */ /* Top Bar */
// a.k.a. the panel // a.k.a. the panel
$panel_corner_radius: $base_border_radius+1;
$panel_bg_color: #000; $panel_bg_color: #000;
$panel_fg_color: #ddd; $panel_fg_color: if($variant == 'light', lighten($bg_color, 10%), darken($fg_color, 5%));
$panel_height: 2.2em; $panel_height: 2.2em;
$panel_transition_duration: 250ms; // same as the overview transition duration $panel_transition_duration: 250ms; // same as the overview transition duration
@@ -11,7 +10,7 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
background-color: $panel_bg_color; background-color: $panel_bg_color;
font-weight: bold; font-weight: bold;
height: $panel_height; height: $panel_height;
font-feature-settings: "tnum"; @extend %numeric;
transition-duration: $panel_transition_duration; transition-duration: $panel_transition_duration;
// transparent panel on lock & login screens // transparent panel on lock & login screens
@@ -19,20 +18,6 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
&.login-screen, &.login-screen,
&:overview { &:overview {
background-color: transparent; background-color: transparent;
.panel-corner {
-panel-corner-opacity: 0;
}
}
// the rounded outset corners
.panel-corner {
-panel-corner-radius: $panel_corner_radius;
-panel-corner-background-color: $panel_bg_color;
-panel-corner-border-width: 2px;
-panel-corner-border-color: transparent;
-panel-corner-opacity: 1;
transition-duration: $panel_transition_duration;
} }
// panel menus // panel menus
@@ -53,8 +38,20 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
} }
} }
&:hover, &:active, &:overview, &:focus, &:checked { &.screen-recording-indicator {
box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.20); box-shadow: inset 0 0 0 100px $screenshot_ui_button_red;
StBoxLayout {
spacing: $base_padding;
}
StIcon {
icon-size: $base_icon_size;
}
}
&:active, &:overview, &:focus, &:checked {
box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.8);
// The clock display needs to have the background on .clock because // The clock display needs to have the background on .clock because
// we want to exclude the do-not-disturb indicator from the background // we want to exclude the do-not-disturb indicator from the background
@@ -62,9 +59,41 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
box-shadow: none; box-shadow: none;
.clock { .clock {
box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.20); box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.8);
} }
} }
&.screen-recording-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.15);
}
}
&:hover {
box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.85);
&.clock-display {
box-shadow: none;
.clock {
box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.85);
}
}
&.screen-recording-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.1);
}
}
&:active:hover, &:overview:hover, &:focus:hover, &:checked:hover {
box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.75);
&.clock-display {
box-shadow: none;
.clock {
box-shadow: inset 0 0 0 100px transparentize($panel_fg_color, 0.75);
}
}
&.screen-recording-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.2);
}
} }
// status area icons // status area icons
@@ -94,16 +123,48 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
&.login-screen, &.login-screen,
&:overview { &:overview {
.panel-button { .panel-button {
&:hover, &:active, &:overview, &:focus, &:checked { &:active, &:overview, &:focus, &:checked {
box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15); box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.15);
&.clock-display { &.clock-display {
box-shadow: none; box-shadow: none;
.clock { .clock {
box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.15); box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.15);
} }
} }
&.screen-recording-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.15);
}
}
&:hover {
box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.10);
&.clock-display {
box-shadow: none;
.clock {
box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.10);
}
}
&.screen-recording-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.1);
}
}
&:active:hover, &:overview:hover, &:focus:hover, &:checked:hover {
box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.2);
&.clock-display {
box-shadow: none;
.clock {
box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.2);
}
}
&.screen-recording-indicator {
box-shadow: inset 0 0 0 100px transparentize($screenshot_ui_button_red, 0.2);
}
} }
} }
} }
@@ -125,11 +186,23 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
// App Menu // App Menu
#appMenu { #appMenu {
spacing: $base_spacing; spacing: $base_padding;
.label-shadow { color: transparent; } .label-shadow { color: transparent; }
} }
#appMenu .panel-status-menu-box { #appMenu .panel-status-menu-box {
padding: 0 $base_padding; padding: 0 $base_padding;
spacing: $base_spacing; spacing: $base_padding;
}
// Clock
.clock-display-box {
spacing: 2px;
.clock {
padding-left: $base_padding * 2;
padding-right: $base_padding * 2;
}
} }
@@ -1,16 +1,8 @@
/* Popovers/Menus */ /* Popovers/Menus */
$popover_arrow_height: 12px; // the popover itself
//.the popover itself
.popup-menu-boxpointer { .popup-menu-boxpointer {
-arrow-border-radius: $base_border_radius+4; margin: $base_margin; // used as distance from the screen edge
-arrow-background-color: $bg_color;
-arrow-border-width: 1px;
-arrow-border-color: $borders_color;
-arrow-base: $popover_arrow_height * 2;
-arrow-rise: $popover_arrow_height;
-arrow-box-shadow: 0 1px 3px rgba(0,0,0,0.5); // dreaming bugzilla #689995
} }
// container of the popover menu // container of the popover menu
@@ -18,84 +10,139 @@ $popover_arrow_height: 12px;
min-width: 15em; min-width: 15em;
color: $fg_color; color: $fg_color;
//.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is //.popup-status-menu-item {font-weight: normal; color: pink;} //dunno what that is
&.panel-menu { &.panel-menu {
-boxpointer-gap: $base_margin; // distance from the panel -boxpointer-gap: $base_margin+2px; // distance from the panel
margin-bottom: 1.75em; margin-bottom: 1.75em; // so it doesn't touch the bottom of the screen
} }
} }
// popover content
.popup-menu-content { .popup-menu-content {
padding: $base_padding * 2 + $base_margin 0; padding: $base_padding;
// account for margin oddities
border-radius: $modal_radius - 2px;
border: 1px solid $borders_edge;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
background-color: $bg_color;
} }
// menu items // menu items
.popup-menu-item { .popup-menu-item {
spacing: $base_padding; padding: $base_padding*1.5 $base_padding*2;
padding: $base_padding; border-radius: $base_border_radius;
transition: 0.2s all ease;
background-color: transparent;
&:ltr { padding-right:1.75em; padding-left: 0; } &:focus, &:hover {
&:rtl { padding-right: 0; padding-left:1.75em; } background-color: $hover_bg_color !important;
&:active { background-color: $active_bg_color !important;}
&:checked {
background-color: lighten($bg_color, 2%);
box-shadow: none;
} }
&.selected { &:checked {background-color: $checked_bg_color !important;}
background-color: transparentize(white, if($variant=='light', 0.2, 0.9));
color: $fg_color; &:checked {
margin-bottom: 0;
box-shadow: inset 0 -1px 0 0 darken($checked_bg_color, 5%);
border-radius: $base_border_radius $base_border_radius 0 0;
&:focus,&:hover { background-color: lighten($checked_bg_color, 3%) !important;}
&:active { background-color: lighten($checked_bg_color, 5%) !important;}
} }
&:active { &:active {
background-color: $selected_bg_color; background-color: lighten($active_bg_color, 5%);
color: $selected_fg_color; color: $active_fg_color;
} }
&:insensitive { color: transparentize($fg_color,0.5);} &:insensitive {color: transparentize($fg_color,0.5);}
} }
// all icons and other graphical elements
// all other graphical elements (sliders)
.popup-inactive-menu-item { .popup-inactive-menu-item {
color: $fg_color; color: $fg_color;
&:insensitive { color: $insensitive_fg_color; }
&:insensitive { color: transparentize($fg_color,0.5); }
} }
// symbolic icons in popover // symbolic icons in popover
.popup-menu-arrow, .popup-menu-arrow,
.popup-menu-icon { icon-size: $base_icon_size; } .popup-menu-icon {
icon-size: 16px !important; // for some reason the variable doesn't work here
}
.popup-menu-arrow {
&:ltr {margin-right: $base_margin;}
&:rtl {margin-left: $base_margin;}
}
// popover submenus // popover submenus
.popup-sub-menu { .popup-sub-menu {
background-color: darken($bg_color, 3%); background-color: $checked_bg_color;
box-shadow: none; border-radius: 0 0 $base_border_radius $base_border_radius;
border-top: 1px solid transparentize($borders_color, 0.2);
border-bottom: 1px solid transparentize($borders_color, 0.2); .popup-menu-ornament {
min-width: $base_icon_size !important;
}
// submenu specific styles
.popup-menu-item {
border-radius: 0;
margin: 0;
&:last-child {
border-radius: 0 0 $base_border_radius $base_border_radius;
}
&:focus,&:hover { background-color: lighten($hover_bg_color, 10%) !important;}
&:checked {
background-color: lighten($checked_bg_color, 10%) !important;
&:focus,&:hover { background-color: lighten($checked_bg_color, 8%) !important;}
}
&:active { background-color: lighten($active_bg_color, 10%) !important;}
}
.popup-menu-section {
.popup-menu-item:last-child {
&:hover,&:focus {border-radius: 0;}
}
&:last-child .popup-menu-item:last-child {
border-radius: 0 0 $base_border_radius $base_border_radius;
}
}
} }
// container for radio and check boxes // container for radio and check boxes
.popup-menu-ornament { .popup-menu-ornament {
@extend %heading;
width: 1.2em; width: 1.2em;
text-align: center !important;
&:ltr { text-align: right }; &:ltr {text-align: right;};
&:rtl { text-align: left }; &:rtl {text-align: left;};
} }
// separator // separator
.popup-separator-menu-item { .popup-separator-menu-item {
padding: 0; padding:0;
margin: 6px 0;
.popup-separator-menu-item-separator { .popup-separator-menu-item-separator {
//-margin-horizontal: 24px;
height: 1px; //not really the whole box height: 1px; //not really the whole box
margin: 6px 64px; background-color: $borders_color;
background-color: lighten($borders_color, 2%);
.popup-sub-menu & { //submenu separators
margin: 0 64px 0 32px;
@if $variant == 'dark' {
background-color: lighten($bg_color,10%);
} }
.popup-menu-ornament {
width: 0 !important;
}
.popup-sub-menu & {
padding: 0;
margin-right: 2.5em !important; // account for ornament
background-color: transparent;
.popup-separator-menu-item-separator {
background-color: lighten($borders_color, 7%);
} }
} }
} }
@@ -108,24 +155,44 @@ $popover_arrow_height: 12px;
// system status menu // system status menu
.aggregate-menu { .aggregate-menu {
min-width: 21em; 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 // lock screen, shutdown, etc. buttons
.popup-menu-icon { .popup-menu-icon {
padding:0;
margin: 0 $base_margin;
-st-icon-style: symbolic; -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 { .popup-sub-menu .popup-menu-item > :first-child {
// account for icons in submenus with padding // this value is hardcoded for visual effect
&:ltr { &:ltr { margin-left: $base_margin*2;}
padding-left: $base_padding + $base_margin * 2; &:rtl { margin-right: $base_margin*2;}
margin-left: $base_icon_size;
} }
&:rtl { }
padding-right: $base_padding + $base_margin * 2; ;
margin-right: $base_icon_size; // right-click (and panel) app menu
.app-menu {
max-width: 27.25em;
.popup-menu-content { margin: $base_margin;}
&.panel-menu {
.popup-menu-content { margin: 0;} // avoid doubling up margin
}
// this is unneeded at the top-level in this menu, hide it
.popup-menu-ornament { width: 0 !important; }
.popup-inactive-menu-item:first-child {
// "Open Windows" label
> StLabel {
@extend %caption_heading;
&:ltr {margin-right: $base_margin*2;}
&:rtl {margin-left: $base_margin*2;}
} }
} }
} }
@@ -11,7 +11,7 @@
.unlock-dialog-clock-time { .unlock-dialog-clock-time {
font-size: 64pt; font-size: 64pt;
padding-top: 42px; padding-top: 42px;
font-feature-settings: "tnum"; @extend %numeric;
} }
.unlock-dialog-clock-date { .unlock-dialog-clock-date {
@@ -25,10 +25,11 @@
} }
.unlock-dialog-notifications-container { .unlock-dialog-notifications-container {
margin: 12px 0; margin: 12px;
spacing: 6px; spacing: 6px;
width: 23em; width: 23em;
background-color: transparent; background-color: transparent;
.summary-notification-stack-scrollview { .summary-notification-stack-scrollview {
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
@@ -36,39 +37,36 @@
.notification, .notification,
.unlock-dialog-notification-source { .unlock-dialog-notification-source {
padding: 12px 6px; padding: 12px 16px;
border: none; border: none;
background-color: transparentize($osd_bg_color,0.7); background-color: transparentize($osd_fg_color,0.9);
color: $osd_fg_color; color: $osd_fg_color;
border-radius: $modal_radius; border-radius: $modal_radius;
&.critical { background-color: transparentize($osd_bg_color,0.1) } &.critical { background-color: transparentize($osd_fg_color,0.8) }
} }
} }
.unlock-dialog-notification-label { .unlock-dialog-notification-label {
padding: 0px 0px 0px 12px; padding: 0 0 0 12px;
} }
.unlock-dialog-notification-count-text { .unlock-dialog-notification-count-text {
weight: bold; font-weight: bold;
padding: 0 6px; padding: 0 12px;
color: $osd_bg_color; color: $osd_fg_color;
background-color: transparentize($osd_fg_color, 0.7); background-color: transparentize($osd_fg_color, 0.9);
border-radius: 99px; border-radius: 99px;
margin-right: 12px;
} }
.screen-shield-background { //just the shadow, really .screen-shield-background { //just the shadow, really
background: black; background: black;
box-shadow: 0px 2px 4px rgba(0,0,0,0.6); box-shadow: 0 2px 4px rgba(0,0,0,0.6);
} }
#lockDialogGroup { #lockDialogGroup {
background-color: $system_bg_color; background-color: $system_bg_color;
} }
#unlockDialogNotifications { #unlockDialogNotifications {
StButton#vhandle, StButton#hhandle { StButton#vhandle, StButton#hhandle {
background-color: transparentize($bg_color,0.7); background-color: transparentize($bg_color,0.7);
@@ -0,0 +1,202 @@
// Screenshot UI
.icon-label-button-container {
spacing: $base_padding;
@extend %caption;
StIcon { icon-size: 32px;}
}
$screenshot_ui_panel_padding: $base_padding*3;
$screenshot_ui_shot_cast_margin: 21px;
$screenshot_ui_panel_border_radius: $modal_radius + $screenshot_ui_shot_cast_margin;
$screenshot_ui_shot_cast_spacing: 3px;
$screenshot_ui_button_red: $error_color;
.screenshot-ui-panel {
@extend %osd_panel;
border-radius: $screenshot_ui_panel_border_radius;
padding: $screenshot_ui_panel_padding;
// Reduce the bottom padding a little to accommodate the large capture button.
padding-bottom: $screenshot_ui_panel_padding - 6px;
margin-bottom: 4em;
spacing: $base_padding * 2;
}
.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; }
}
.screenshot-ui-type-button {
@extend %osd_button;
padding: $base_padding * 2 $base_padding * 3 !important;
border-radius: $screenshot_ui_panel_border_radius - $screenshot_ui_panel_padding;
}
.screenshot-ui-capture-button {
width: 36px;
height: 36px;
border-radius: 99px;
border: 4px $osd_fg_color;
padding: 4px;
.screenshot-ui-capture-button-circle {
background-color: $osd_fg_color;
transition-duration: 200ms;
&:hover, &:focus { background-color: $hover_bg_color; }
border-radius: 99px;
}
&:hover, &:focus {
.screenshot-ui-capture-button-circle {
background-color: darken($osd_fg_color, 15%);
}
}
&:active {
.screenshot-ui-capture-button-circle {
background-color: darken($osd_fg_color, 50%);
}
}
&:cast {
.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%);
}
}
&:active {
.screenshot-ui-capture-button-circle {
background-color: darken($screenshot_ui_button_red, 30%);
}
}
}
}
.screenshot-ui-shot-cast-container {
background-color: $hover_bg_color;
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; }
}
.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; }
border-radius: $modal_radius - $screenshot_ui_shot_cast_spacing;
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; }
}
.screenshot-ui-area-indicator-shade {
background-color: rgba(0,0,0,.3);
}
.screenshot-ui-area-selector {
.screenshot-ui-area-indicator-shade {
background-color: rgba(0,0,0,.5);
}
.screenshot-ui-area-indicator-selection {
border: 2px white;
}
}
.screenshot-ui-area-selector-handle {
border-radius: 99px;
background-color: white;
box-shadow: 0 1px 3px 2px rgba(0,0,0,0.2);
width: 24px;
height: 24px;
}
.screenshot-ui-window-selector {
background-color: $system_bg_color;
.screenshot-ui-window-selector-window-container {
margin: 100px;
}
&:primary-monitor {
.screenshot-ui-window-selector-window-container {
// Make some room for the panel.
margin-bottom: 200px;
}
}
}
.screenshot-ui-window-selector-window-border {
transition-duration: 200ms;
border-radius: $modal_radius;
border: 6px transparent;
}
.screenshot-ui-window-selector-check {
transition-duration: 200ms;
color: transparent;
border-radius: 99px;
border-width: 12px;
icon-size: 24px;
}
.screenshot-ui-window-selector-window {
&:hover {
.screenshot-ui-window-selector-window-border {
border-color: darken($selected_bg_color, 15%);
}
}
&:checked {
.screenshot-ui-window-selector-window-border {
border-color: $selected_bg_color;
background-color: transparentize($selected_bg_color, 0.8);
}
.screenshot-ui-window-selector-check {
color: white;
background-color: $selected_bg_color;
}
}
}
.screenshot-ui-screen-selector {
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); }
&:checked {
background-color: transparent;
border: 2px white;
}
}
.screenshot-ui-tooltip {
color: $osd_fg_color;
background-color: $osd_bg_color;
border-radius: 99px;
padding: $base_padding $base_padding * 2;
text-align: center;
-y-offset: 24px;
}
@@ -9,8 +9,8 @@ StScrollBar {
padding: 0; padding: 0;
StScrollView & { StScrollView & {
min-width: 14px; min-width: 8px;
min-height: 14px; min-height: 8px;
} }
StBin#trough { StBin#trough {
@@ -20,10 +20,10 @@ StScrollBar {
StButton#vhandle, StButton#hhandle { StButton#vhandle, StButton#hhandle {
border-radius: 8px; border-radius: 8px;
background-color: mix($fg_color, $bg_color, 60%); background-color: mix($fg_color, $bg_color, 30%);
//border: 3px solid transparent; //would be nice to margin or at least to transparent border: 3px solid transparent; //would be nice to margin or at least to transparent
margin: 3px; transition: 500ms all ease;
&:hover { background-color: mix($fg_color, $bg_color, 80%); } &:hover {background-color: mix($fg_color, $bg_color, 50%);}
&:active { background-color: $selected_bg_color; } &:active {background-color: mix($fg_color, $bg_color, 40%);}
} }
} }
@@ -5,30 +5,22 @@ $search_entry_height: 36px;
%search_entry, %search_entry,
.search-entry { .search-entry {
width: $search_entry_width;
padding: $base_padding+1 $base_padding+3;
border-radius: $search_entry_height * 0.5; // half the height border-radius: $search_entry_height * 0.5; // half the height
color: transparentize($fg_color,0.3);
background-color: $bg_color;
margin-top: $base_spacing * 2;
margin-bottom: $base_spacing;
border-width: 2px;
border-color: transparent;
&:hover {
background-color: $hover_bg_color;
color: $hover_fg_color;
}
&:focus { margin-top: $base_padding * 2;
border-style: solid; margin-bottom: $base_padding;
border-color: $selected_bg_color; padding: $base_padding+1 $base_padding+3;
color: $fg_color; width: $search_entry_width;
box-shadow: inset 0 1px 2px 1px rgba(0,0,0,0.2);
} @include entry(normal);
&:hover { @include entry(hover);}
&:focus { @include entry(focus);}
&:insensitive { @include entry(insensitive);}
.search-entry-icon { .search-entry-icon {
icon-size: $base_icon_size;
padding: 0 4px;
color: inherit; color: inherit;
icon-size: $base_icon_size;
margin-top: 2px; // center vertically
padding: 0 4px;
} }
} }
@@ -11,84 +11,70 @@
// This should be equal to #searchResultsContent spacing // This should be equal to #searchResultsContent spacing
spacing: $base_margin * 2; spacing: $base_margin * 2;
// separator // separator (unstyled)
.search-section-separator { .search-section-separator {
// height: 1px; height: $base_margin*2; // use it as a spacer
// background-color: $osd_outer_borders_color;
height: 0;
background-color: transparent; background-color: transparent;
} }
} }
// content // content
.search-section-content { .search-section-content {
background-color: transparentize(lighten($osd_bg_color, 5%), 0.2); background-color: lighten($system_bg_color, 5%);
border-radius: $modal_radius+3; border-radius: $modal_radius*1.5;
border: 1px solid $osd_outer_borders_color; border: 1px solid $osd_outer_borders_color;
box-shadow: 0 2px 4px 0 $shadow_color; box-shadow: none;
text-shadow: 0 1px if($variant == 'light', rgba(255,255,255,0.2), rgba(0,0,0,0.2)); text-shadow: none;
color: $osd_fg_color; color: $osd_fg_color;
padding: $base_padding * 3; padding: $base_padding*2;
margin: $base_margin;
// This is the space between the provider icon and the results container // This is the space between the provider icon and the results container
spacing: $base_margin * 2;
} }
%search-section-content-item { %search_section_content_item {
@extend %icon_tile; @include tile_button($osd_fg_color);
margin: $base_margin;
&:focus, border-radius: $base_border_radius !important;
&:hover,
&:selected {
background-color: transparentize($osd_fg_color, .9);
transition-duration: 200ms;
}
&:active,
&:checked {
background-color: transparentize(darken($osd_bg_color, 10%), .1);
}
} }
// "no results" text // "no results" text
.search-statustext { .search-statustext {
@extend %status_text; @extend %large_title;
} }
.grid-search-results { .grid-search-results {
spacing: $base_spacing * 6; spacing: $base_padding * 6;
} }
// Search results with icons // Search results with icons
.grid-search-result { .grid-search-result {
@extend %app-well-app; @extend .app-well-app;
} }
// search result provider // search result provider
.search-provider-icon { .search-provider-icon {
@extend %search-section-content-item; @extend %search_section_content_item;
// content // content
.list-search-provider-content { .list-search-provider-content {
spacing: $base_spacing * 2; spacing: $base_padding * 2;
// provider labels // provider labels
.list-search-provider-details { .list-search-provider-details {
width: 120px; width: 120px;
margin-top: 0; color: $osd_fg_color;
color: darken($osd_fg_color, 8%);
// font-weight: bold;
} }
} }
} }
// search results list // search results list
.list-search-results { .list-search-results {
spacing: $base_spacing; spacing: $base_padding;
} }
// search result listitem // search result listitem
.list-search-result { .list-search-result {
@extend %search-section-content-item; @extend %search_section_content_item;
// content // content
.list-search-result-content { .list-search-result-content {
@@ -97,12 +83,12 @@
// list item title (with leading icon) // list item title (with leading icon)
.list-search-result-title { .list-search-result-title {
spacing: $base_spacing * 2; spacing: $base_padding * 2;
// font-weight: bold; // font-weight: bold;
} }
// list item description // list item description
.list-search-result-description { .list-search-result-description {
color: darken($osd_fg_color, 30%); color: $osd_insensitive_fg_color;
} }
} }
@@ -1,27 +1,22 @@
/* Slider */ /* Slider */
$slider_size: 15px; $slider_size: 16px;
.slider { .slider {
height: $slider_size;
// slider trough // slider trough
-barlevel-height: 3px; // has to be an odd number -barlevel-height: 4px;
-barlevel-background-color: $borders_color; //background of the trough -barlevel-background-color: if($variant == 'light', transparentize($fg_color, 0.6), transparentize($fg_color, 0.8)); //background of the trough
-barlevel-border-width: 1px; -barlevel-border-width: 2px;
-barlevel-border-color: $borders_color; // trough border color -barlevel-border-color: transparent; // trough border color
// fill style // fill style
-barlevel-active-background-color: $selected_bg_color; //active trough fill -barlevel-active-background-color: $selected_bg_color;
-barlevel-active-border-color: if($variant == 'light', darken($selected_bg_color, 4%), lighten($selected_bg_color, 2%)); //active trough border -barlevel-active-border-color: transparent;
// overfill style (red in this case) // overfill style (red in this case)
-barlevel-overdrive-color: $destructive_color; -barlevel-overdrive-color: $destructive_color;
-barlevel-overdrive-border-color: if($variant == 'light', darken($destructive_color, 4%), lighten($destructive_color, 2%)); //trough border when red; -barlevel-overdrive-border-color: transparent; //trough border when red;
-barlevel-overdrive-separator-width:1px; -barlevel-overdrive-separator-width:1px;
// slider handler // slider handler
-slider-handle-radius: $slider_size * 0.5; // half the size of the size -slider-handle-radius: $slider_size * 0.5; // half the size of the size
-slider-handle-border-width: 1px; -slider-handle-border-width: 0;
-slider-handle-border-color: if($variant == 'light', $borders_color, $fg_color); -slider-handle-border-color: transparent; // because 0 width
color: if($variant == 'light', lighten($bg_color, 10%), $fg_color);
&:hover { color: $hover_bg_color; }
&:active { color: $active_bg_color; }
} }
@@ -1,37 +1,32 @@
/* App Switcher */ /* App Switcher */
// same as dash
$switcher_padding: $base_padding + 4px; // 10px
$switcher_border_radius: $modal_radius + 8px;
// the full screen container of the switcher
.switcher-popup { .switcher-popup {
padding: 8px; padding: 0;
spacing: $base_spacing * 4; spacing: $base_padding * 4;
} }
// switcher onscreen panel // switcher onscreen panel
.switcher-list { .switcher-list {
@extend %osd_panel; @extend %osd_panel;
padding: $switcher_padding;
border-radius: $switcher_border_radius;
box-shadow: 0 8px 8px 0 rgba(0,0,0,0.1);
// container for items in list
.switcher-list-item-container {
spacing: $base_padding * 2;
}
// each item in the list
.item-box { .item-box {
padding: 8px;
border-radius: $base_border_radius + 1px;
border: 1px solid transparent;
&:outlined { @include tile_button($osd_fg_color);
background-color: transparentize($osd_fg_color, 0.7);
}
&:selected {
background-color: transparentize($osd_fg_color, 0.7);
color: $osd_fg_color;
}
}
// window thumbnails
.thumbnail-box {
padding: 2px;
spacing: $base_spacing;
}
.thumbnail {
width: 256px;
} }
.separator { .separator {
@@ -39,16 +34,27 @@
background: $borders_color; background: $borders_color;
} }
.switcher-list-item-container { // container of thumbnails
spacing: $base_spacing * 2; .thumbnail-box {
padding: 2px;
spacing: $base_padding;
}
// window thumbnail itself
.thumbnail {
width: 256px; // equal to THUMBNAIL_DEFAULT_SIZE in altTab.js
border-radius:$base_border_radius;
} }
} }
// arrow if app has multiple windows
.switcher-arrow { .switcher-arrow {
border-color: rgba(0,0,0,0); border-color: transparentize($osd_fg_color, 0.2);
color: transparentize($fg_color,0.2); color: transparentize($osd_fg_color, 0.2);
&:highlighted { &:highlighted {
color: $fg_color; border-color: $osd_fg_color;
color: $osd_fg_color;
} }
} }
@@ -1,16 +1,16 @@
/* Switches */ /* Switches */
// these are equal to the size of the SVG assets // these are equal to the size of the SVG assets
$switch_height: 22px; $switch_height: 26px;
$switch_width: 46px; $switch_width: 48px;
.toggle-switch { .toggle-switch {
color: $fg_color; color: $fg_color;
height: $switch_height; height: $switch_height;
width: $switch_width; width: $switch_width;
background-size: contain; background-size: contain;
background-image: if($variant == 'light', url("assets/toggle-off.svg"),url("assets/toggle-off-dark.svg")); background-image: if($variant == 'light', url("assets/toggle-off-light.svg"),url("assets/toggle-off.svg"));
&:checked { &:checked {
background-image: if($variant == 'light', url("assets/toggle-on.svg"),url("assets/toggle-on-dark.svg")); background-image: if($variant == 'light', url("assets/toggle-on-light.svg"),url("assets/toggle-on.svg"));
} }
} }
@@ -1,19 +0,0 @@
/* Tiled window previews */
$tile_corner_radius: $base_border_radius + 1px;
.tile-preview {
background-color: transparentize($selected_bg_color,0.5);
border: 1px solid $selected_bg_color;
}
.tile-preview-left.on-primary {
border-radius: $tile_corner_radius 0 0 0;
}
.tile-preview-right.on-primary {
border-radius: 0 $tile_corner_radius 0 0;
}
.tile-preview-left.tile-preview-right.on-primary {
border-radius: $tile_corner_radius $tile_corner_radius 0 0;
}
@@ -1,10 +1,11 @@
/* Window Picker */ /* Window Picker */
$window_picker_spacing: $base_spacing; // 6px $window_picker_spacing: $base_padding; // 6px
$window_picker_padding: $base_padding * 2; // 12px $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_size: 30px; $window_close_button_size: 30px;
$window_close_button_padding: 3px; $window_close_button_padding: 3px;
@@ -24,24 +25,23 @@ $window_close_button_padding: 3px;
// Close button // Close button
.window-close { .window-close {
background-color: $osd_bg_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: $window_close_button_size * 0.5 + $window_close_button_padding * 2;
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;
box-shadow: -1px 1px 5px 0px rgba(0,0,0,0.5);
transition-duration: 300ms; transition-duration: 300ms;
& StIcon { icon-size: 24px; } & StIcon { icon-size: 24px; } // uses non standard icon size
&:hover { &:hover {
background-color: lighten($osd_bg_color, 15%); background-color: mix($osd_fg_color, $window_close_button_color, 15%);
} }
&:active { &:active {
color: transparentize($osd_fg_color, 0.2); color: transparentize($osd_fg_color, 0.2);
background-color: darken($osd_bg_color, 5%); background-color: darken($window_close_button_color, 5%);
} }
} }
@@ -1,36 +1,25 @@
/* Workspace Switcher */ /* Workspace Switcher */
.workspace-switcher-group {
padding: $base_padding * 2;
}
.workspace-switcher-container { $ws_indicator_height: $large_icon_size;
@extend %osd_panel; $ws_dot_active: $ws_indicator_height / 3;
} $ws_dot_inactive: $ws_indicator_height / 6;
.workspace-switcher { .workspace-switcher {
background: transparent; @extend %osd_panel;
border: none; margin-bottom: 4em;
border-radius: 0; spacing: $base_padding * 2;
padding: 0; padding: $base_padding * 2 $base_padding * 3;
spacing: $base_spacing * 2;
} }
.ws-switcher-box { .ws-switcher-indicator {
background: transparent; background-color: transparentize($osd_fg_color,0.5);
height: 50px; padding: $ws_dot_inactive / 2;
background-size: 32px; margin: ($ws_indicator_height - $ws_dot_inactive) / 2;
border: 1px solid transparentize($osd_fg_color,0.9); border-radius: $ws_indicator_height;
border-radius: $base_border_radius + 3px;
}
// active workspace in the switcher &:active {
.ws-switcher-active-up, background-color: $osd_fg_color;
.ws-switcher-active-down, padding: $ws_dot_active / 2;
.ws-switcher-active-left, margin: ($ws_indicator_height - $ws_dot_active) / 2;
.ws-switcher-active-right { }
height: 52px;
background-color: $selected_bg_color;
border: 1px solid if($variant=='light', darken($selected_bg_color, 8%), lighten($selected_bg_color, 5%));
border-radius: $base_border_radius + 3px;
color: $selected_fg_color;
} }
@@ -3,7 +3,7 @@
// thumbnails in overview // thumbnails in overview
.workspace-thumbnails { .workspace-thumbnails {
visible-width: 32px; //amount visible before hover visible-width: 32px; //amount visible before hover
spacing: $base_spacing; spacing: $base_padding;
padding: $base_padding; padding: $base_padding;
.workspace-thumbnail { .workspace-thumbnail {
@@ -4,7 +4,7 @@ GREEN='\033[0;32m'
YELLOW='\033[0;33m' YELLOW='\033[0;33m'
RESET='\033[0m' RESET='\033[0m'
VERSION=41.0 VERSION=6b60a189fded722ae37a7d3e94d51a509a7d2df1
echo echo
printf " $YELLOW[ i ]$RESET Upstream version $VERSION\n" printf " $YELLOW[ i ]$RESET Upstream version $VERSION\n"
@@ -53,13 +53,13 @@ done <<- EOF
gnome-shell-sass/widgets/_panel.scss gnome-shell-sass/widgets/_panel.scss
gnome-shell-sass/widgets/_popovers.scss gnome-shell-sass/widgets/_popovers.scss
gnome-shell-sass/widgets/_screen-shield.scss gnome-shell-sass/widgets/_screen-shield.scss
gnome-shell-sass/widgets/_screenshot.scss
gnome-shell-sass/widgets/_scrollbars.scss gnome-shell-sass/widgets/_scrollbars.scss
gnome-shell-sass/widgets/_search-entry.scss gnome-shell-sass/widgets/_search-entry.scss
gnome-shell-sass/widgets/_search-results.scss gnome-shell-sass/widgets/_search-results.scss
gnome-shell-sass/widgets/_slider.scss gnome-shell-sass/widgets/_slider.scss
gnome-shell-sass/widgets/_switcher-popup.scss gnome-shell-sass/widgets/_switcher-popup.scss
gnome-shell-sass/widgets/_switches.scss gnome-shell-sass/widgets/_switches.scss
gnome-shell-sass/widgets/_tiled-previews.scss
gnome-shell-sass/widgets/_window-picker.scss gnome-shell-sass/widgets/_window-picker.scss
gnome-shell-sass/widgets/_workspace-switcher.scss gnome-shell-sass/widgets/_workspace-switcher.scss
gnome-shell-sass/widgets/_workspace-thumbnails.scss gnome-shell-sass/widgets/_workspace-thumbnails.scss