mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
123 lines
4.3 KiB
CSS
123 lines
4.3 KiB
CSS
@import "./components/reset.css";
|
|
@import "./components/root.css";
|
|
@import "./components/buffering.css";
|
|
@import "./components/error.css";
|
|
@import "./components/controls.css";
|
|
@import "./components/time.css";
|
|
@import "./components/button.css";
|
|
@import "./components/button-group.css";
|
|
@import "./components/badge.css";
|
|
@import "./components/icons.css";
|
|
@import "./components/slider.css";
|
|
@import "./components/popup.css";
|
|
@import "./components/menus.css";
|
|
@import "../../shared/css/audio/icon-state.css";
|
|
|
|
/* ==========================================================================
|
|
Root
|
|
========================================================================== */
|
|
|
|
.media-minimal-skin--audio {
|
|
--media-controls-background-color: oklch(1 0 0);
|
|
--media-controls-backdrop-filter: blur(16px) saturate(1.5);
|
|
--media-controls-border-color: oklch(0 0 0 / 0.05);
|
|
--media-controls-text-color: var(--media-color-primary, oklch(0 0 0));
|
|
--media-error-dialog-transition-duration: 250ms;
|
|
--media-error-dialog-transition-delay: 100ms;
|
|
--media-popup-transition-duration: 100ms;
|
|
--media-popup-transition-timing-function: ease-out;
|
|
--media-tooltip-background-color: oklch(1 0 0 / 0.1);
|
|
--media-tooltip-border-color: oklch(0 0 0 / 0.05);
|
|
--media-tooltip-backdrop-filter: blur(16px) saturate(1.5);
|
|
--media-tooltip-text-color: currentColor;
|
|
--media-tooltip-side-offset: 0.75rem;
|
|
--media-tooltip-boundary-offset: 0.75rem;
|
|
--media-popover-background-color: oklch(1 0 0 / 0.1);
|
|
--media-popover-border-color: oklch(0 0 0 / 0.05);
|
|
--media-popover-backdrop-filter: blur(16px) saturate(1.5);
|
|
--media-popover-side-offset: 0.75rem;
|
|
--media-popover-boundary-offset: 0.75rem;
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
--media-error-dialog-transition-duration: 50ms;
|
|
--media-error-dialog-transition-delay: 0ms;
|
|
--media-popup-transition-duration: 0ms;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
--media-controls-background-color: oklch(0 0 0);
|
|
--media-controls-border-color: oklch(1 0 0 / 0.1);
|
|
--media-controls-text-color: var(--media-color-primary, oklch(1 0 0));
|
|
}
|
|
|
|
@media (prefers-reduced-transparency: reduce) or (prefers-contrast: more) {
|
|
--media-tooltip-background-color: oklch(1 0 0);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) and ((prefers-reduced-transparency: reduce) or (prefers-contrast: more)) {
|
|
--media-tooltip-background-color: oklch(0 0 0);
|
|
}
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Error Dialog
|
|
========================================================================== */
|
|
|
|
.media-minimal-skin--audio .media-error__dialog {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 20;
|
|
display: flex;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
padding-inline: 1.25rem 0.5rem;
|
|
background-color: oklch(from var(--media-controls-background-color) l c h / 1);
|
|
border-radius: calc(infinity * 1px);
|
|
transition-delay: var(--media-error-dialog-transition-delay);
|
|
transition-timing-function: ease-out;
|
|
transition-duration: var(--media-error-dialog-transition-duration);
|
|
transition-property: opacity, filter, scale;
|
|
}
|
|
|
|
.media-minimal-skin--audio .media-error[data-starting-style] .media-error__dialog,
|
|
.media-minimal-skin--audio .media-error[data-ending-style] .media-error__dialog {
|
|
opacity: 0;
|
|
filter: blur(4px);
|
|
scale: 0.95;
|
|
}
|
|
.media-minimal-skin--audio .media-error[data-ending-style] .media-error__dialog {
|
|
transition-delay: 0ms;
|
|
}
|
|
|
|
.media-minimal-skin--audio .media-error__content {
|
|
display: flex;
|
|
flex: 1;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Controls
|
|
========================================================================== */
|
|
|
|
.media-minimal-skin--audio .media-controls {
|
|
gap: 0.5rem;
|
|
padding: 0.375rem;
|
|
color: var(--media-controls-text-color);
|
|
border-radius: var(--media-border-radius, 1rem);
|
|
box-shadow: 0 0 0 1px var(--media-controls-border-color);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Popups & Animations
|
|
========================================================================== */
|
|
|
|
.media-minimal-skin--audio .media-popover--volume {
|
|
padding: 0 0 0 4rem;
|
|
background: linear-gradient(to left, var(--media-controls-background-color) 80%, transparent 100%);
|
|
}
|
|
|
|
.media-minimal-skin--audio .media-slider__preview .media-slider__value {
|
|
bottom: 2.5rem;
|
|
}
|