113 lines
1.9 KiB
CSS
113 lines
1.9 KiB
CSS
.backdrop {
|
|
pointer-events: none;
|
|
animation: focus-backdrop-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.surface {
|
|
position: fixed;
|
|
z-index: 1;
|
|
pointer-events: auto;
|
|
overflow: hidden;
|
|
background: var(--mantine-color-body);
|
|
box-shadow: var(--mantine-shadow-md);
|
|
overscroll-behavior: contain;
|
|
animation: focus-surface-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
transform-origin: top left;
|
|
}
|
|
|
|
.backdropClosing {
|
|
animation: focus-backdrop-out 180ms ease-in forwards;
|
|
}
|
|
|
|
.surfaceClosing {
|
|
animation: focus-surface-out 180ms ease-in forwards;
|
|
}
|
|
|
|
.sourcePlaceholder {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.surfaceHost {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.surfaceHostAdvanced {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: calc(var(--mantine-z-index-popover) - 1);
|
|
width: auto;
|
|
height: auto;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.surfaceControls {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.closeButton {
|
|
position: fixed;
|
|
z-index: 2;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.touchButton {
|
|
position: absolute;
|
|
right: 8px;
|
|
bottom: 8px;
|
|
z-index: 2;
|
|
display: none;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
@media (any-pointer: coarse) {
|
|
.touchButton {
|
|
display: inline-flex;
|
|
}
|
|
}
|
|
|
|
@keyframes focus-backdrop-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes focus-surface-in {
|
|
from {
|
|
transform: translate(var(--focus-translate-x), var(--focus-translate-y))
|
|
scale(var(--focus-scale-x), var(--focus-scale-y));
|
|
opacity: 0.72;
|
|
}
|
|
}
|
|
|
|
@keyframes focus-backdrop-out {
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes focus-surface-out {
|
|
to {
|
|
transform: translate(var(--focus-translate-x), var(--focus-translate-y))
|
|
scale(var(--focus-scale-x), var(--focus-scale-y));
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.backdrop,
|
|
.surface {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
.backdrop {
|
|
background: Canvas;
|
|
opacity: 0.4;
|
|
}
|
|
}
|