v10/packages/skins/src/default/css/components/captions.css at 795650193910f3b827e23722d4c58b8137b4bf14 · videojs/v10 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* ==========================================================================
   Native Caption Track
   ========================================================================== */

.media-default-skin {
  --media-caption-track-duration: var(--media-controls-transition-duration);
  --media-caption-track-delay: calc(var(--media-controls-transition-delay) + 25ms);
  --media-caption-track-y: -0.5rem;

  &:has(.media-controls[data-visible]) {
    --media-caption-track-y: -3.5rem;
  }
}

.media-default-skin video::-webkit-media-text-track-container {
  transition: translate var(--media-caption-track-duration) ease-out;
  transition-delay: var(--media-caption-track-delay);
  translate: 0 var(--media-caption-track-y);
  scale: 0.98;
  z-index: 1;
  font-family: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .media-default-skin video::-webkit-media-text-track-container {
    transition-duration: 50ms;
  }
}