133 lines
2.3 KiB
CSS
133 lines
2.3 KiB
CSS
.backdrop {
|
|
pointer-events: none;
|
|
animation: focus-backdrop-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
.manualBackdrop {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.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);
|
|
animation-fill-mode: backwards;
|
|
animation-play-state: paused;
|
|
transform-origin: top left;
|
|
}
|
|
|
|
.surfaceReady {
|
|
animation-play-state: running;
|
|
}
|
|
|
|
.manualSurface {
|
|
position: fixed;
|
|
max-width: none;
|
|
max-height: none;
|
|
overflow: visible;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
overscroll-behavior: contain;
|
|
animation: focus-surface-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
|
|
transform-origin: top left;
|
|
}
|
|
|
|
.manualSurface > div {
|
|
width: 100%;
|
|
height: 100%;
|
|
max-height: none !important;
|
|
overflow: visible;
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
|
|
.surfacePortalTarget,
|
|
.manualSurfaceMount {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
.manualSurfaceMount {
|
|
overflow: hidden;
|
|
border-radius: inherit;
|
|
}
|
|
|
|
.surfaceHostAdvanced {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: var(--homarr-z-index-widget-focus);
|
|
width: auto;
|
|
height: auto;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.closeButton {
|
|
position: absolute;
|
|
z-index: 2;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
@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,
|
|
.manualSurface {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
.backdrop {
|
|
background: Canvas;
|
|
opacity: 0.4;
|
|
}
|
|
}
|