133 lines
2.1 KiB
CSS
133 lines
2.1 KiB
CSS
.focusScope {
|
|
height: 100%;
|
|
}
|
|
|
|
.backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 198;
|
|
background: rgba(0, 0, 0, 0.64);
|
|
backdrop-filter: blur(6px) saturate(0.75);
|
|
touch-action: none;
|
|
animation: focus-backdrop-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.surface {
|
|
position: fixed;
|
|
z-index: 199;
|
|
pointer-events: auto;
|
|
overflow: hidden;
|
|
background: var(--mantine-color-body);
|
|
box-shadow: var(--mantine-shadow-lg);
|
|
overscroll-behavior: contain;
|
|
animation: focus-surface-in 220ms 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: 199;
|
|
width: auto;
|
|
height: auto;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.surfaceControls {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.closeButton {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
z-index: 2;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.pinButton {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 52px;
|
|
z-index: 2;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.touchButton {
|
|
position: absolute;
|
|
right: 8px;
|
|
bottom: 8px;
|
|
z-index: 2;
|
|
display: none;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
@media (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-duration: 1ms;
|
|
}
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
.backdrop {
|
|
backdrop-filter: none;
|
|
background: Canvas;
|
|
opacity: 0.8;
|
|
}
|
|
}
|