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

@import "../../shared/css/video/icon-state.css";
@import "../../shared/css/video/tooltip-state.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";

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

.media-default-skin--video {
  background: oklch(0 0 0);
  --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 (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: 100ms;
    }
  }

  /* 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;
  }
}

/* ==========================================================================
   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-timing-function: ease-out;
  transition-duration: var(--media-controls-transition-duration);
  transition-delay: var(--media-controls-transition-delay);
  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) {
      filter: blur(8px);

      @media (prefers-reduced-motion: reduce) {
        filter: blur(0);
      }
    }

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

/* 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 .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 .media-slider[data-pointing] .media-slider__preview:has([role="img"]:not([data-hidden])) {
  opacity: 1;
  scale: 1;
  filter: blur(0);
}