* Redesign windows csd decoration.
parent
5b69b56e69
commit
6532bce86f
|
@ -31,6 +31,9 @@ $white: #fff;
|
||||||
$button_border: shade($base_color, .9);
|
$button_border: shade($base_color, .9);
|
||||||
$entry_border: alpha($dark_shadow, .06);
|
$entry_border: alpha($dark_shadow, .06);
|
||||||
|
|
||||||
|
$top_hilight: $borders_edge;
|
||||||
|
$headerbar_color: if($variant == 'light', lighten($bg_color, 5%), darken($bg_color, 3%));
|
||||||
|
|
||||||
$scrollbar_bg_color: if($variant == 'light', darken($bg_color, 5%), mix($base_color, $bg_color, .4));
|
$scrollbar_bg_color: if($variant == 'light', darken($bg_color, 5%), mix($base_color, $bg_color, .4));
|
||||||
$scrollbar_slider_color: shade($bg_color, .5);
|
$scrollbar_slider_color: shade($bg_color, .5);
|
||||||
$scrollbar_slider_hover_color: shade($bg_color, .3);
|
$scrollbar_slider_hover_color: shade($bg_color, .3);
|
||||||
|
@ -81,8 +84,8 @@ $lightdm_bg_color: $dark_bg_color;
|
||||||
$lightdm_fg_color: $dark_fg_color;
|
$lightdm_fg_color: $dark_fg_color;
|
||||||
|
|
||||||
$wm_bg: $titlebar_bg_color;
|
$wm_bg: $titlebar_bg_color;
|
||||||
$wm_border_focused: transparent;
|
$wm_border_focused: if($variant=='light', transparentize($black, .5), transparentize($borders_color, .1));
|
||||||
$wm_border_unfocused: transparent;
|
$wm_border_unfocused: if($variant=='light', transparentize($black, .55), transparentize($borders_color, .1));
|
||||||
$wm_title_focused: mix($titlebar_fg_color, $titlebar_bg_color, .1);
|
$wm_title_focused: mix($titlebar_fg_color, $titlebar_bg_color, .1);
|
||||||
$wm_title_unfocused: mix($titlebar_fg_color, $titlebar_bg_color, .4);
|
$wm_title_unfocused: mix($titlebar_fg_color, $titlebar_bg_color, .4);
|
||||||
$wm_icons_focused: mix($titlebar_fg_color, $titlebar_bg_color, .1);
|
$wm_icons_focused: mix($titlebar_fg_color, $titlebar_bg_color, .1);
|
||||||
|
|
|
@ -3,44 +3,44 @@
|
||||||
***************/
|
***************/
|
||||||
|
|
||||||
@include exports("window") {
|
@include exports("window") {
|
||||||
%window {
|
|
||||||
box-shadow: 0 19px 38px rgba(0, 0, 0, .2), 0 15px 12px rgba(0, 0, 0, .1), 0 0 0 1px $wm_border_focused;
|
|
||||||
|
|
||||||
&:backdrop {
|
|
||||||
box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23), 0 0 0 1px $wm_border_unfocused;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
decoration {
|
decoration {
|
||||||
@extend %window;
|
|
||||||
|
|
||||||
border-radius: $roundness $roundness 0 0;
|
border-radius: $roundness $roundness 0 0;
|
||||||
// lamefun trick to get rounded borders regardless of CSD use
|
// lamefun trick to get rounded borders regardless of CSD use
|
||||||
border-width: 0px;
|
border-width: 0;
|
||||||
|
|
||||||
|
box-shadow: 0 3px 9px 1px transparentize($black, .5), 0 0 0 1px $wm_border_focused; //doing borders with box-shadow
|
||||||
|
|
||||||
/* this is used for the resize cursor area */
|
/* this is used for the resize cursor area */
|
||||||
margin: $spacing * 3;
|
margin: $spacing * 3;
|
||||||
|
|
||||||
.fullscreen &, .tiled & { border-radius: 0; }
|
&:backdrop {
|
||||||
|
box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px transparentize($black, .8), 0 0 0 1px $wm_border_unfocused;
|
||||||
|
transition: 200ms ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.maximized &, .fullscreen &, .tiled & { border-radius: 0; }
|
||||||
|
|
||||||
.popup & { box-shadow: none; }
|
.popup & { box-shadow: none; }
|
||||||
|
|
||||||
// this needs to be transparent
|
// this needs to be transparent
|
||||||
// see bug #722563
|
// see bug #722563
|
||||||
// server-side decorations as used by mutter
|
// server-side decorations as used by mutter
|
||||||
.ssd & { box-shadow: 0 0 0 1px if($variant=='light', transparentize(black, .77), transparentize($borders_color, .1)); } //just doing borders, wm draws actual shadows
|
.ssd & { box-shadow: 0 0 0 1px $wm_border_focused; } //just doing borders, wm draws actual shadows
|
||||||
|
|
||||||
.solid-csd & {
|
.solid-csd & {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
margin: 1px;
|
margin: 1px;
|
||||||
background-color: $bg_color;
|
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
background-color: $bg_color;
|
||||||
|
//border: solid 1px $dark_bg_color;
|
||||||
|
box-shadow: inset 0 0 0 3px $headerbar_color, inset 0 1px $top_hilight;
|
||||||
|
|
||||||
|
&:backdrop { box-shadow: inset 0 0 0 3px $backdrop_bg_color, inset 0 1px $top_hilight; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.csd.popup & {
|
.csd.popup & {
|
||||||
@extend %window;
|
|
||||||
|
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
box-shadow: 0 1px 2px transparentize($black, .8), 0 0 0 1px transparentize($wm_border_focused, .1);
|
||||||
}
|
}
|
||||||
|
|
||||||
tooltip.csd & {
|
tooltip.csd & {
|
||||||
|
@ -49,9 +49,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
messagedialog.csd & {
|
messagedialog.csd & {
|
||||||
@extend %window;
|
|
||||||
|
|
||||||
border-radius: $roundness;
|
border-radius: $roundness;
|
||||||
|
box-shadow: 0 1px 2px transparentize($black, .8), 0 0 0 1px transparentize($wm_border_focused, .1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue