mirror of
https://github.com/horst3180/arc-theme.git
synced 2024-10-27 19:04:02 +00:00
add some backdrop transitions
This commit is contained in:
parent
f4e661f717
commit
f42f5a31e9
@ -896,6 +896,7 @@ headerbar,
|
||||
border-color: rgba(38, 42, 51, 0.97); }
|
||||
headerbar:backdrop,
|
||||
.titlebar:backdrop:not(headerbar) {
|
||||
transition: 200ms ease-out;
|
||||
color: rgba(207, 218, 231, 0.5);
|
||||
background-color: #323843; }
|
||||
.csd headerbar:backdrop,
|
||||
@ -2858,7 +2859,8 @@ decoration {
|
||||
box-shadow: 0 0 0 1px rgba(32, 35, 43, 0.97), 0 8px 8px 0 rgba(0, 0, 0, 0.35);
|
||||
margin: 10px; }
|
||||
decoration:backdrop {
|
||||
box-shadow: 0 0 0 1px rgba(32, 35, 43, 0.87), 0 8px 8px 0 transparent, 0 5px 5px 0 rgba(0, 0, 0, 0.35); }
|
||||
box-shadow: 0 0 0 1px rgba(32, 35, 43, 0.87), 0 8px 8px 0 transparent, 0 5px 5px 0 rgba(0, 0, 0, 0.35);
|
||||
transition: 200ms ease-out; }
|
||||
.fullscreen decoration,
|
||||
.tiled decoration {
|
||||
border-radius: 0; }
|
||||
|
@ -895,6 +895,7 @@ headerbar,
|
||||
border-color: rgba(38, 42, 51, 0.97); }
|
||||
headerbar:backdrop,
|
||||
.titlebar:backdrop:not(headerbar) {
|
||||
transition: 200ms ease-out;
|
||||
color: rgba(207, 218, 231, 0.5);
|
||||
background-color: #323843; }
|
||||
.csd headerbar:backdrop,
|
||||
@ -2857,7 +2858,8 @@ decoration {
|
||||
box-shadow: 0 0 0 1px rgba(32, 35, 43, 0.97), 0 8px 8px 0 rgba(0, 0, 0, 0.2);
|
||||
margin: 10px; }
|
||||
decoration:backdrop {
|
||||
box-shadow: 0 0 0 1px rgba(32, 35, 43, 0.87), 0 8px 8px 0 transparent, 0 5px 5px 0 rgba(0, 0, 0, 0.2); }
|
||||
box-shadow: 0 0 0 1px rgba(32, 35, 43, 0.87), 0 8px 8px 0 transparent, 0 5px 5px 0 rgba(0, 0, 0, 0.2);
|
||||
transition: 200ms ease-out; }
|
||||
.fullscreen decoration,
|
||||
.tiled decoration {
|
||||
border-radius: 0; }
|
||||
|
@ -896,6 +896,7 @@ headerbar,
|
||||
border-color: #262a33; }
|
||||
headerbar:backdrop,
|
||||
.titlebar:backdrop:not(headerbar) {
|
||||
transition: 200ms ease-out;
|
||||
color: rgba(207, 218, 231, 0.5);
|
||||
background-color: #323843; }
|
||||
.csd headerbar:backdrop,
|
||||
@ -2858,7 +2859,8 @@ decoration {
|
||||
box-shadow: 0 0 0 1px #20232b, 0 8px 8px 0 rgba(0, 0, 0, 0.35);
|
||||
margin: 10px; }
|
||||
decoration:backdrop {
|
||||
box-shadow: 0 0 0 1px rgba(32, 35, 43, 0.9), 0 8px 8px 0 transparent, 0 5px 5px 0 rgba(0, 0, 0, 0.35); }
|
||||
box-shadow: 0 0 0 1px rgba(32, 35, 43, 0.9), 0 8px 8px 0 transparent, 0 5px 5px 0 rgba(0, 0, 0, 0.35);
|
||||
transition: 200ms ease-out; }
|
||||
.fullscreen decoration,
|
||||
.tiled decoration {
|
||||
border-radius: 0; }
|
||||
|
@ -895,6 +895,7 @@ headerbar,
|
||||
border-color: #262a33; }
|
||||
headerbar:backdrop,
|
||||
.titlebar:backdrop:not(headerbar) {
|
||||
transition: 200ms ease-out;
|
||||
color: rgba(207, 218, 231, 0.5);
|
||||
background-color: #323843; }
|
||||
.csd headerbar:backdrop,
|
||||
@ -2857,7 +2858,8 @@ decoration {
|
||||
box-shadow: 0 0 0 1px #20232b, 0 8px 8px 0 rgba(0, 0, 0, 0.2);
|
||||
margin: 10px; }
|
||||
decoration:backdrop {
|
||||
box-shadow: 0 0 0 1px rgba(32, 35, 43, 0.9), 0 8px 8px 0 transparent, 0 5px 5px 0 rgba(0, 0, 0, 0.2); }
|
||||
box-shadow: 0 0 0 1px rgba(32, 35, 43, 0.9), 0 8px 8px 0 transparent, 0 5px 5px 0 rgba(0, 0, 0, 0.2);
|
||||
transition: 200ms ease-out; }
|
||||
.fullscreen decoration,
|
||||
.tiled decoration {
|
||||
border-radius: 0; }
|
||||
|
@ -895,6 +895,7 @@ headerbar,
|
||||
border-color: #d4d5db; }
|
||||
headerbar:backdrop,
|
||||
.titlebar:backdrop:not(headerbar) {
|
||||
transition: 200ms ease-out;
|
||||
color: rgba(82, 93, 118, 0.5);
|
||||
background-color: #eff0f2; }
|
||||
.csd headerbar:backdrop,
|
||||
@ -2861,7 +2862,8 @@ decoration {
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 8px 8px 0 rgba(0, 0, 0, 0.2);
|
||||
margin: 10px; }
|
||||
decoration:backdrop {
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 8px 8px 0 transparent, 0 5px 5px 0 rgba(0, 0, 0, 0.2); }
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 8px 8px 0 transparent, 0 5px 5px 0 rgba(0, 0, 0, 0.2);
|
||||
transition: 200ms ease-out; }
|
||||
.fullscreen decoration,
|
||||
.tiled decoration {
|
||||
border-radius: 0; }
|
||||
|
@ -895,6 +895,7 @@ headerbar,
|
||||
border-color: rgba(212, 213, 219, 0.95); }
|
||||
headerbar:backdrop,
|
||||
.titlebar:backdrop:not(headerbar) {
|
||||
transition: 200ms ease-out;
|
||||
color: rgba(82, 93, 118, 0.5);
|
||||
background-color: #eff0f2; }
|
||||
.csd headerbar:backdrop,
|
||||
@ -2861,7 +2862,8 @@ decoration {
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 8px 8px 0 rgba(0, 0, 0, 0.2);
|
||||
margin: 10px; }
|
||||
decoration:backdrop {
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 8px 8px 0 transparent, 0 5px 5px 0 rgba(0, 0, 0, 0.2); }
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 8px 8px 0 transparent, 0 5px 5px 0 rgba(0, 0, 0, 0.2);
|
||||
transition: 200ms ease-out; }
|
||||
.fullscreen decoration,
|
||||
.tiled decoration {
|
||||
border-radius: 0; }
|
||||
|
@ -3,6 +3,7 @@
|
||||
}
|
||||
|
||||
$ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
$backdrop_transition: 200ms ease-out;
|
||||
$asset_suffix: if($variant=='dark', '-dark', ''); // use dark assets in dark variant
|
||||
$darker_asset_suffix: if($darker=='true', '-dark', $asset_suffix);
|
||||
|
||||
@ -962,6 +963,8 @@ headerbar,
|
||||
}
|
||||
|
||||
&:backdrop {
|
||||
transition: $backdrop_transition;
|
||||
|
||||
color: transparentize($header_fg, 0.3);
|
||||
background-color: opacify($header_bg_backdrop, 1);
|
||||
|
||||
@ -3007,6 +3010,8 @@ decoration {
|
||||
box-shadow: 0 0 0 1px if($darker=='true' or $variant == 'dark', transparentize(darken($header_bg, 7%), 0.1), $_wm_border),
|
||||
0 8px 8px 0 transparent,
|
||||
0 5px 5px 0 if($variant == 'light', opacify($_wm_border, 0.1), transparentize($_wm_border, 0.2));
|
||||
|
||||
transition: $backdrop_transition;
|
||||
}
|
||||
.fullscreen &,
|
||||
.tiled & {
|
||||
|
Loading…
Reference in New Issue
Block a user