vidstack/styles/ui/captions.css

Build awesome media experiences on the web.

:where(media-captions) {
  --overlay-padding: var(--media-captions-padding, 1%);
  --cue-color: var(--media-cue-color, white);
  --cue-bg-color: var(--media-cue-bg, rgba(0, 0, 0, 0.7));
  --cue-font-size: var(--media-cue-font-size, calc(var(--overlay-height) / 100 * 5));
  --cue-line-height: var(--media-cue-line-height, calc(var(--cue-font-size) * 1.2));
  --cue-padding-x: var(--media-cue-padding-x, calc(var(--cue-font-size) * 0.6));
  --cue-padding-y: var(--media-cue-padding-x, calc(var(--cue-font-size) * 0.4));
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  contain: layout style size;
  margin: var(--overlay-padding);
  font-size: var(--cue-font-size);
  font-family: sans-serif;
  box-sizing: border-box;
  pointer-events: none;
  user-select: none;
  word-spacing: normal;
  word-break: break-word;
}

:where(media-player[data-fullscreen][data-bp-x='lg'] media-captions) {
  --cue-font-size: var(
    --media-large-fullscreen-cue-font-size,
    calc(var(--overlay-height) / 100 * 3)
  );
}

@media (orientation: portrait) {
  :where(media-player[data-bp-x='sm'][data-fullscreen] media-captions) {
    --cue-font-size: 18px;
  }
}

:where(media-player[data-view-type='audio'] media-captions) {
  position: relative;
  margin: 0;
}

:where(media-captions[aria-hidden='true']) {
  opacity: 0;
  visibility: hidden;
}

:where(media-captions [part='cue-display']) {
  position: absolute;
  direction: ltr;
  overflow: visible;
  contain: content;
  top: var(--cue-top);
  left: var(--cue-left);
  right: var(--cue-right);
  bottom: var(--cue-bottom);
  width: var(--cue-width, auto);
  height: var(--cue-height, auto);
  box-sizing: border-box;
  transform: var(--cue-transform);
  text-align: var(--cue-text-align);
  writing-mode: var(--cue-writing-mode, unset);
  white-space: pre-line;
  unicode-bidi: plaintext;
  min-width: min-content;
  min-height: min-content;
  padding: var(--media-cue-display-padding);
  background-color: var(--media-cue-display-bg);
  border-radius: var(--media-cue-display-border-radius);
}

:where(media-captions[data-dir='rtl'] [part='cue-display']) {
  direction: rtl;
}

:where(media-captions [part='cue']) {
  display: inline-block;
  contain: content;
  border: var(--media-cue-border, unset);
  border-radius: var(--media-cue-border-radius, 2px);
  backdrop-filter: var(--media-cue-backdrop, blur(8px));
  padding: var(--cue-padding-y) var(--cue-padding-x);
  line-height: var(--cue-line-height);
  background-color: var(--cue-bg-color);
  box-sizing: border-box;
  color: var(--cue-color);
  box-shadow: var(--media-cue-box-shadow, var(--cue-box-shadow));
  white-space: var(--cue-white-space, pre-wrap);
  outline: var(--cue-outline);
  text-shadow: var(--cue-text-shadow);
}

:where(media-captions [part='cue-display'][data-vertical] [part='cue']) {
  padding: var(--cue-padding-x) var(--cue-padding-y);
}

:where(media-captions [part='region']) {
  position: absolute;
  display: inline-flex;
  flex-flow: column;
  justify-content: flex-start;
  width: var(--region-width);
  height: var(--region-height);
  min-height: 0px;
  max-height: var(--region-height);
  writing-mode: horizontal-tb;
  top: calc(
    var(
      --region-top,
      var(--overlay-height) * var(--region-viewport-anchor-y) / 100 - var(--region-height) *
        var(--region-anchor-y) / 100
    )
  );
  left: var(
    --region-left,
    calc(
      calc(var(--region-viewport-anchor-x) * 1%) -
        calc(var(--region-width) * var(--region-anchor-x) / 100)
    )
  );
  right: var(--region-right);
  bottom: var(--region-bottom);
  overflow: hidden;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

:where(media-captions [part='region'][data-active]) {
}

:where(media-captions [part='region'][data-scroll='up']) {
  justify-content: end;
}

:where(media-captions [part='region'][data-active][data-scroll='up']) {
  transition: top 0.433s;
}

:where(media-captions [part='region'] > [part='cue-display']) {
  position: relative;
  width: auto;
  left: var(--cue-offset);
  height: var(--cue-height, auto);
  text-align: var(--cue-text-align);
  unicode-bidi: plaintext;
  margin-top: 2px;
}

:where(media-captions [part='region'] [part='cue']) {
  position: relative;
  border-radius: 0px;
}