mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
115 lines
2.6 KiB
CSS
115 lines
2.6 KiB
CSS
/* ==========================================================================
|
|
Popups & Animations
|
|
========================================================================== */
|
|
|
|
.media-minimal-skin .media-popover,
|
|
.media-minimal-skin .media-tooltip {
|
|
margin: 0;
|
|
border: 0;
|
|
color: inherit;
|
|
overflow: visible;
|
|
transition-property: scale, opacity, filter;
|
|
transition-duration: var(--media-popup-transition-duration);
|
|
transition-timing-function: var(--media-popup-transition-timing-function);
|
|
|
|
&[data-starting-style],
|
|
&[data-ending-style] {
|
|
opacity: 0;
|
|
scale: 0.5;
|
|
filter: blur(8px);
|
|
}
|
|
|
|
&[data-instant] {
|
|
transition-duration: 0ms;
|
|
}
|
|
|
|
&[data-side="top"] {
|
|
transform-origin: bottom;
|
|
}
|
|
&[data-side="bottom"] {
|
|
transform-origin: top;
|
|
}
|
|
&[data-side="left"] {
|
|
transform-origin: right;
|
|
}
|
|
&[data-side="right"] {
|
|
transform-origin: left;
|
|
}
|
|
|
|
/* Safe area between trigger and popup */
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
pointer-events: inherit;
|
|
}
|
|
|
|
&[data-side="top"]::before,
|
|
&[data-side="bottom"]::before {
|
|
width: 100%;
|
|
inset-inline: 0;
|
|
}
|
|
&[data-side="top"]::before {
|
|
top: 100%;
|
|
}
|
|
&[data-side="bottom"]::before {
|
|
bottom: 100%;
|
|
}
|
|
|
|
&[data-side="left"]::before,
|
|
&[data-side="right"]::before {
|
|
height: 100%;
|
|
inset-block: 0;
|
|
}
|
|
&[data-side="left"]::before {
|
|
left: 100%;
|
|
}
|
|
&[data-side="right"]::before {
|
|
right: 100%;
|
|
}
|
|
}
|
|
|
|
.media-minimal-skin .media-popover {
|
|
&[data-side="top"]::before,
|
|
&[data-side="bottom"]::before {
|
|
height: var(--media-popover-side-offset);
|
|
}
|
|
&[data-side="left"]::before,
|
|
&[data-side="right"]::before {
|
|
width: var(--media-popover-side-offset);
|
|
}
|
|
}
|
|
|
|
.media-minimal-skin .media-tooltip {
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 0.25rem;
|
|
background-color: oklch(1 0 0 / 0.1);
|
|
backdrop-filter: blur(16px) saturate(1.5);
|
|
box-shadow:
|
|
0 4px 6px -1px oklch(0 0 0 / 0.1),
|
|
0 2px 4px -2px oklch(0 0 0 / 0.1);
|
|
font-size: 0.75rem;
|
|
white-space: nowrap;
|
|
--media-tooltip-side-offset: 0.75rem;
|
|
|
|
&[data-side="top"]::before,
|
|
&[data-side="bottom"]::before {
|
|
height: var(--media-tooltip-side-offset);
|
|
}
|
|
&[data-side="left"]::before,
|
|
&[data-side="right"]::before {
|
|
width: var(--media-tooltip-side-offset);
|
|
}
|
|
|
|
@media (prefers-reduced-transparency: reduce) {
|
|
background-color: oklch(0 0 0 / 0.7);
|
|
}
|
|
|
|
@media (prefers-contrast: more) {
|
|
background-color: oklch(0 0 0 / 0.9);
|
|
}
|
|
}
|
|
|
|
.media-minimal-skin .media-popover--volume:has(media-volume-slider[data-availability="unsupported"]) {
|
|
display: none;
|
|
}
|