103 lines
1.8 KiB
CSS
103 lines
1.8 KiB
CSS
@keyframes fade-in {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.teleprompter {
|
|
position: relative;
|
|
overflow: visible;
|
|
}
|
|
.teleprompter-inner {
|
|
flex-wrap: wrap;
|
|
align-content: flex-start;
|
|
display: flex;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
.teleprompter-word {
|
|
opacity: 0;
|
|
white-space: pre;
|
|
animation: fade-in var(--fade, 0.5s) cubic-bezier(0.37, 0.55, 0.86, 0.88) forwards;
|
|
}
|
|
@keyframes dot-fade {
|
|
0%,
|
|
to {
|
|
opacity: 0.5;
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.animate-dot-fade {
|
|
animation: 1s ease-in-out infinite dot-fade;
|
|
}
|
|
.gxcrJW_frostedContainer {
|
|
width: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.gxcrJW_blurStack {
|
|
pointer-events: none;
|
|
z-index: 5;
|
|
height: 5rem;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
.gxcrJW_blur {
|
|
--frost: color-mix(in srgb, var(--bg-tertiary) 60%, transparent);
|
|
background: linear-gradient(to bottom, var(--frost) 0%, transparent var(--gradient-end, 60%));
|
|
height: 100%;
|
|
-webkit-backdrop-filter: blur(var(--blur, 0px));
|
|
opacity: var(--alpha, 0.4);
|
|
will-change: backdrop-filter, opacity;
|
|
border-top-left-radius: 8px;
|
|
border-top-right-radius: 8px;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: auto;
|
|
left: 0;
|
|
right: 0;
|
|
transform: translateZ(0);
|
|
-webkit-mask-image: linear-gradient(#000 60%, #0000 100%);
|
|
mask-image: linear-gradient(#000 60%, #0000 100%);
|
|
}
|
|
.gxcrJW_layer0 {
|
|
--blur: 0.5px;
|
|
--alpha: 0.65;
|
|
--gradient-end: 25%;
|
|
}
|
|
.gxcrJW_layer1 {
|
|
--blur: 2px;
|
|
--alpha: 0.5;
|
|
--gradient-end: 35%;
|
|
}
|
|
.gxcrJW_layer2 {
|
|
--blur: 6px;
|
|
--alpha: 0.38;
|
|
--gradient-end: 50%;
|
|
}
|
|
.gxcrJW_layer3 {
|
|
--blur: 16px;
|
|
--alpha: 0.28;
|
|
--gradient-end: 65%;
|
|
}
|
|
.gxcrJW_layer4 {
|
|
--blur: 32px;
|
|
--alpha: 0.18;
|
|
--gradient-end: 80%;
|
|
}
|
|
.gxcrJW_layer5 {
|
|
--blur: 64px;
|
|
--alpha: 0.1;
|
|
--gradient-end: 95%;
|
|
}
|