45 lines
776 B
SCSS
45 lines
776 B
SCSS
.root {
|
|
--_y-shift: 50%;
|
|
--_bg-light: transparent;
|
|
--_bg-dark: transparent;
|
|
|
|
overflow: hidden;
|
|
border-radius: inherit;
|
|
|
|
&::before {
|
|
pointer-events: none;
|
|
content: '';
|
|
|
|
position: absolute;
|
|
inset: 0;
|
|
|
|
background-image: radial-gradient(closest-side at 50% var(--_y-shift), var(--_bg-light) 25%, var(--_bg-dark) 125%);
|
|
}
|
|
|
|
&.withLinearGradient {
|
|
&::before {
|
|
background-image:
|
|
radial-gradient(circle at 50% var(--_y-shift), #ffffff44, #ffffff00 9.5rem),
|
|
linear-gradient(var(--_bg-light), var(--_bg-dark));
|
|
}
|
|
}
|
|
}
|
|
|
|
.canvas {
|
|
pointer-events: none;
|
|
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
opacity: 0;
|
|
object-fit: cover;
|
|
|
|
transition: opacity 0.15s ease-out;
|
|
|
|
&.showing {
|
|
opacity: 1;
|
|
}
|
|
}
|