GTK3: update popover and menu background and shadows

This commit is contained in:
Daniel Ruiz de Alegría 2020-03-05 13:11:39 +01:00
parent 50d3e45af0
commit 4590a1ff99
5 changed files with 49 additions and 16 deletions

View File

@ -1492,7 +1492,7 @@ modelbutton.flat,
outline-offset: -2px; } outline-offset: -2px; }
modelbutton.flat:hover, modelbutton.flat:hover,
.menuitem.button.flat:hover { .menuitem.button.flat:hover {
background-color: #2e313d; } background-color: #2a2e39; }
modelbutton.flat arrow { modelbutton.flat arrow {
background: none; } background: none; }
@ -2749,7 +2749,7 @@ menuitem radio {
***************/ ***************/
popover.background { popover.background {
padding: 2px; padding: 2px;
background-color: #23252e; background-color: #1f222a;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.csd popover.background, popover.background { .csd popover.background, popover.background {
border: 1px solid #0d0e11; border: 1px solid #0d0e11;
@ -5181,7 +5181,7 @@ popover.emoji-completion contents row box {
padding: 2px 10px; } padding: 2px 10px; }
popover.emoji-completion .emoji:hover { popover.emoji-completion .emoji:hover {
background: #2e313d; } background: #2a2e39; }
* { * {
outline-style: solid; outline-style: solid;
@ -5310,6 +5310,14 @@ headerbar {
margin: 0 4px; margin: 0 4px;
padding: 0; } padding: 0; }
/***************
* Popovers *
***************/
popover.background {
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }
.csd popover.background, popover.background {
border-color: rgba(13, 14, 17, 0.75); }
/************** /**************
* GtkInfoBar * * GtkInfoBar *
**************/ **************/
@ -5541,7 +5549,7 @@ decoration {
box-shadow: 0 0 0 1px rgba(13, 14, 17, 0.75); box-shadow: 0 0 0 1px rgba(13, 14, 17, 0.75);
border-width: 0; } border-width: 0; }
.csd.popup decoration { .csd.popup decoration {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(13, 14, 17, 0.65); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(13, 14, 17, 0.65);
border-width: 0; } border-width: 0; }
tooltip.csd decoration { tooltip.csd decoration {
border: 0; } border: 0; }

View File

@ -1492,7 +1492,7 @@ modelbutton.flat,
outline-offset: -2px; } outline-offset: -2px; }
modelbutton.flat:hover, modelbutton.flat:hover,
.menuitem.button.flat:hover { .menuitem.button.flat:hover {
background-color: #2e313d; } background-color: #2a2e39; }
modelbutton.flat arrow { modelbutton.flat arrow {
background: none; } background: none; }
@ -2749,7 +2749,7 @@ menuitem radio {
***************/ ***************/
popover.background { popover.background {
padding: 2px; padding: 2px;
background-color: #23252e; background-color: #1f222a;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.csd popover.background, popover.background { .csd popover.background, popover.background {
border: 1px solid #0d0e11; border: 1px solid #0d0e11;
@ -5181,7 +5181,7 @@ popover.emoji-completion contents row box {
padding: 2px 10px; } padding: 2px 10px; }
popover.emoji-completion .emoji:hover { popover.emoji-completion .emoji:hover {
background: #2e313d; } background: #2a2e39; }
* { * {
outline-style: solid; outline-style: solid;
@ -5310,6 +5310,14 @@ headerbar {
margin: 0 4px; margin: 0 4px;
padding: 0; } padding: 0; }
/***************
* Popovers *
***************/
popover.background {
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }
.csd popover.background, popover.background {
border-color: rgba(13, 14, 17, 0.75); }
/************** /**************
* GtkInfoBar * * GtkInfoBar *
**************/ **************/
@ -5541,7 +5549,7 @@ decoration {
box-shadow: 0 0 0 1px rgba(13, 14, 17, 0.75); box-shadow: 0 0 0 1px rgba(13, 14, 17, 0.75);
border-width: 0; } border-width: 0; }
.csd.popup decoration { .csd.popup decoration {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(13, 14, 17, 0.65); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(13, 14, 17, 0.65);
border-width: 0; } border-width: 0; }
tooltip.csd decoration { tooltip.csd decoration {
border: 0; } border: 0; }

View File

@ -2760,7 +2760,7 @@ menuitem radio {
***************/ ***************/
popover.background { popover.background {
padding: 2px; padding: 2px;
background-color: #ffffff; background-color: #fafafa;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.csd popover.background, popover.background { .csd popover.background, popover.background {
border: 1px solid #d1d1d1; border: 1px solid #d1d1d1;
@ -5333,6 +5333,14 @@ headerbar {
margin: 0 4px; margin: 0 4px;
padding: 0; } padding: 0; }
/***************
* Popovers *
***************/
popover.background {
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15); }
.csd popover.background, popover.background {
border-color: rgba(0, 0, 0, 0.1); }
/************** /**************
* GtkInfoBar * * GtkInfoBar *
**************/ **************/
@ -5564,7 +5572,7 @@ decoration {
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
border-width: 0; } border-width: 0; }
.csd.popup decoration { .csd.popup decoration {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0);
border-width: 0; } border-width: 0; }
tooltip.csd decoration { tooltip.csd decoration {
border: 0; } border: 0; }

View File

@ -19,8 +19,8 @@ $top_hilight: $borders_edge;
$dark_fill: mix($borders_color, $bg_color, 35%); $dark_fill: mix($borders_color, $bg_color, 35%);
$headerbar_color: if($variant == 'light', lighten($bg_color, 5%), darken($bg_color, 3%)); $headerbar_color: if($variant == 'light', lighten($bg_color, 5%), darken($bg_color, 3%));
$menu_color: if($variant == 'light', $base_color, mix($borders_color, $bg_color, 15%)); $menu_color: if($variant == 'light', $base_color, mix($borders_color, $bg_color, 15%));
$popover_bg_color: $bg_color; $popover_bg_color: $menu_color;
$popover_hover_color: lighten($bg_color, 5%); $popover_hover_color: lighten($menu_color, 5%);
$scrollbar_bg_color: if($variant == 'light', mix($bg_color, $fg_color, 80%), mix($base_color, $bg_color, 50%)); $scrollbar_bg_color: if($variant == 'light', mix($bg_color, $fg_color, 80%), mix($base_color, $bg_color, 50%));
$scrollbar_slider_color: mix($fg_color, $bg_color, 60%); $scrollbar_slider_color: mix($fg_color, $bg_color, 60%);

View File

@ -1,3 +1,6 @@
$_menu_shadow: 0 1px 6px transparentize(black, if($variant == 'light', .85, .5));
$_wm_border: if($variant=='light', transparentize(black, 0.9), transparentize($borders_color, 0.25));
* { * {
outline-style: solid; outline-style: solid;
outline-offset: -4px; outline-offset: -4px;
@ -137,6 +140,14 @@ headerbar {
} }
} }
/***************
* Popovers *
***************/
popover.background {
box-shadow: $_menu_shadow;
.csd &, & { border-color: if($variant=='light', transparentize(black, 0.9), transparentize($borders_color, 0.25)); }
}
/************** /**************
* GtkInfoBar * * GtkInfoBar *
**************/ **************/
@ -241,14 +252,12 @@ decoration {
border-radius: $window_radius+$_border_width $window_radius+$_border_width $button_radius $button_radius; border-radius: $window_radius+$_border_width $window_radius+$_border_width $button_radius $button_radius;
border: $_border_width solid $base_color; border: $_border_width solid $base_color;
$_wm_border: if($variant=='light', transparentize(black, 0.9), transparentize($borders_color, 0.25));
box-shadow: 0 2px 8px 0 transparentize(black, 0.6), box-shadow: 0 2px 8px 0 transparentize(black, 0.6),
0 0 0 1px $_wm_border; 0 0 0 1px $_wm_border;
&:backdrop { &:backdrop {
box-shadow: 0 2px 8px 0 transparent, box-shadow: 0 2px 8px 0 transparent,
0 0 0 3px if($variant == 'light', transparentize(black, .85), transparentize(black, .75)); 0 0 0 3px transparentize(black, if($variant == 'light', .85, .75));
} }
.maximized &, .maximized &,
@ -267,7 +276,7 @@ decoration {
} }
.csd.popup & { .csd.popup & {
box-shadow: 0 1px 4px transparentize(black, 0.8), box-shadow: $_menu_shadow,
0 0 0 1px transparentize($_wm_border, 0.1); 0 0 0 1px transparentize($_wm_border, 0.1);
border-width: 0; border-width: 0;
} }