forked from 77media/video-flow
42 lines
1.2 KiB
CSS
42 lines
1.2 KiB
CSS
.backdrop_backdrop {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 58;
|
|
display: grid;
|
|
height: 4rem;
|
|
pointer-events: none;
|
|
}
|
|
.backdrop_backdrop:after {
|
|
content: "";
|
|
background: linear-gradient(180deg, rgba(0, 0, 0, .2) 60%, transparent);
|
|
}
|
|
.backdrop_backdrop:after, .backdrop_backdrop .backdrop_blur {
|
|
grid-area: 1 / 1;
|
|
transition: opacity .2s linear;
|
|
}
|
|
.backdrop_backdrop>.backdrop_blur:first-child {
|
|
backdrop-filter: blur(1px);
|
|
mask: linear-gradient(0deg, transparent, #000 8%);
|
|
}
|
|
.backdrop_backdrop>.backdrop_blur:nth-child(2) {
|
|
backdrop-filter: blur(4px);
|
|
mask: linear-gradient(0deg, transparent 8%, #000 16%);
|
|
}
|
|
.backdrop_backdrop>.backdrop_blur:nth-child(3) {
|
|
backdrop-filter: blur(8px);
|
|
mask: linear-gradient(0deg, transparent 16%, #000 24%);
|
|
}
|
|
.backdrop_backdrop>.backdrop_blur:nth-child(4) {
|
|
backdrop-filter: blur(16px);
|
|
mask: linear-gradient(0deg, transparent 24%, #000 36%);
|
|
}
|
|
.backdrop_backdrop>.backdrop_blur:nth-child(5) {
|
|
backdrop-filter: blur(24px);
|
|
mask: linear-gradient(0deg, transparent 36%, #000 48%);
|
|
}
|
|
.backdrop_backdrop>.backdrop_blur:nth-child(6) {
|
|
backdrop-filter: blur(32px);
|
|
mask: linear-gradient(0deg, transparent 48%, #000 60%);
|
|
} |