v10/packages/skins/src/default/css/video.css

@import "./components/reset.css";
@import "./components/root.css";
@import "./components/surface.css";
@import "./components/media.css";
@import "./components/overlay.css";
@import "./components/buffering.css";
@import "./components/error.css";
@import "./components/controls.css";
@import "./components/time.css";
@import "./components/buttons.css";
@import "./components/icons.css";
@import "./components/poster.css";
@import "./components/preview.css";
@import "./components/slider.css";
@import "./components/popup.css";
@import "./components/captions.css";
@import "../../shared/css/video/icon-state.css";
@import "../../shared/css/video/tooltip-state.css";

/* ==========================================================================
   Root
   ========================================================================== */

.media-default-skin--video {
  background: oklch(0 0 0);
  --media-spring-transition: linear(
    0,
    0.034 1.5%,
    0.763 9.7%,
    1.066 13.9%,
    1.198 19.9%,
    1.184 21.8%,
    0.963 37.5%,
    0.997 50.9%,
    1
  );
  --media-border-color: oklch(0 0 0 / 0.1);
  --media-surface-background-color: oklch(1 0 0 / 0.1);
  --media-surface-inner-border-color: oklch(1 0 0 / 0.05);
  --media-surface-outer-border-color: oklch(0 0 0 / 0.1);
  --media-surface-shadow-color: oklch(0 0 0 / 0.15);
  --media-surface-backdrop-filter: blur(16px) saturate(1.5);
  --media-video-border-radius: var(--media-border-radius, 2rem);
  --media-controls-transition-duration: 100ms;
  --media-controls-transition-delay: 0ms;
  --media-controls-transition-timing-function: ease-out;
  --media-error-dialog-transition-duration: 350ms;
  --media-error-dialog-transition-delay: 100ms;
  --media-error-dialog-transition-timing-function: var(--media-spring-transition);
  --media-popup-transition-duration: 100ms;
  --media-popup-transition-timing-function: ease-out;

  @media (prefers-reduced-motion: reduce) {
    --media-error-dialog-transition-duration: 50ms;
    --media-error-dialog-transition-delay: 0ms;
    --media-error-dialog-transition-timing-function: ease-out;
    --media-popup-transition-duration: 0ms;
  }

  @media (prefers-color-scheme: dark) {
    --media-border-color: oklch(1 0 0 / 0.15);
  }

  &:has(.media-controls:not([data-visible])) {
    /* Slight delay to hide controls on non-touch devices after interaction */
    @media (pointer: fine) {
      --media-controls-transition-delay: 500ms;
      --media-controls-transition-duration: 300ms;
    }
    @media (pointer: coarse) {
      --media-controls-transition-duration: 150ms;
    }
    @media (prefers-reduced-motion: reduce) {
      --media-controls-transition-duration: 50ms;
    }
  }

  /* Inner border ring */
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px var(--media-border-color);
    pointer-events: none;
  }

  &:fullscreen {
    --media-border-radius: 0;
  }
}

/* ==========================================================================
   Error Dialog
   ========================================================================== */

.media-default-skin--video .media-error {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-default-skin--video .media-error__dialog {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 18rem;
  padding: 0.75rem;
  border-radius: 1.75rem;
  color: oklch(1 0 0);
  text-shadow: 0 1px 0 oklch(0 0 0 / 0.25);
  transition-property: opacity, scale;
  transition-duration: var(--media-error-dialog-transition-duration);
  transition-delay: var(--media-error-dialog-transition-delay);
  transition-timing-function: var(--media-error-dialog-transition-timing-function);
}

.media-default-skin--video .media-error[data-starting-style] .media-error__dialog,
.media-default-skin--video .media-error[data-ending-style] .media-error__dialog {
  opacity: 0;
  scale: 0.5;
}
.media-default-skin--video .media-error[data-ending-style] .media-error__dialog {
  transition-delay: 0ms;
}

.media-default-skin--video .media-error__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0.375rem;
  text-shadow: inherit;
}

.media-default-skin--video .media-error__title {
  font-size: 1rem;
}

/* ==========================================================================
   Controls (hide/show behavior)
   ========================================================================== */

.media-default-skin--video .media-controls {
  position: absolute;
  bottom: 0.75rem;
  inset-inline: 0.75rem;
  z-index: 10;
  color: var(--media-color-primary, oklch(1 0 0));
  transition-duration: var(--media-controls-transition-duration);
  transition-delay: var(--media-controls-transition-delay);
  transition-timing-function: var(--media-controls-transition-timing-function);
  transform-origin: bottom;

  @media (pointer: fine) {
    will-change: scale, filter, opacity;
    transition-property: scale, filter, opacity;
  }

  @media (pointer: coarse) {
    will-change: scale, opacity;
    transition-property: scale, opacity;
  }

  &:not([data-visible]) {
    opacity: 0;
    pointer-events: none;
    scale: 0.9;

    @media (pointer: fine) and (prefers-reduced-motion: no-preference) {
      filter: blur(8px);
    }

    @media (prefers-reduced-motion: reduce) {
      scale: 1;
    }
  }
}

.media-default-skin--video .media-error[data-open] ~ .media-controls {
  display: none;
}

/* Hide cursor when controls are hidden in fullscreen */
@media (pointer: fine) {
  .media-default-skin--video:fullscreen:has(.media-controls:not([data-visible])) {
    cursor: none;
  }
}

/* ==========================================================================
   Sliders
   ========================================================================== */

.media-default-skin--video .media-slider__track {
  background-color: oklch(1 0 0 / 0.2);
  box-shadow: 0 0 0 1px oklch(0 0 0 / 0.05);
}

.media-default-skin--video .media-slider__preview {
  position: absolute;
  left: var(--media-slider-pointer);
  bottom: calc(100% + 1.2rem);
  translate: -50%;
  opacity: 0;
  scale: 0.8;
  filter: blur(8px);
  transition-property: scale, opacity, filter;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
  transform-origin: bottom;
  pointer-events: none;

  & .media-preview__thumbnail {
    max-width: 11rem;
  }

  &:has(.media-preview__thumbnail[data-loading]) {
    max-height: 6rem;
  }
}
.media-default-skin--video .media-slider[data-pointing] .media-slider__preview:has([role="img"]:not([data-hidden])) {
  opacity: 1;
  scale: 1;
  filter: blur(0);
}