third_party/blink/renderer/modules/media_controls/touchless/resources/mediaControlsTouchless.css

/* Copyright 2019 The Chromium Authors. All rights reserved.
   Use of this source code is governed by a BSD-style license that can be
   found in the LICENSE file. */

audio {
  width: 300px;
  height: 180px;
}

audio::-webkit-media-controls-touchless,
video::-webkit-media-controls-touchless {
  width: inherit;
  height: inherit;

  position: relative;
  direction: ltr;
  display: flex;
  flex-direction: column;
  opacity: 1;

  margin-top: env(safe-area-inset-top);
  margin-left: env(safe-area-inset-left);
  margin-right: env(safe-area-inset-right);
  margin-bottom: env(safe-area-inset-bottom);
}

audio::-webkit-media-controls-touchless,
video::-webkit-media-controls-touchless.use-default-poster {
  background: #333;
}

audio::-internal-media-controls-touchless-info,
video::-internal-media-controls-touchless-info {
  display: none;
  height: 72px;
  width: 72px;
  border-radius: 50%;
  opacity: 0.3;
  background-color: rgba(255, 255, 255, 0.9);
  background-size: 50%;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

audio::-internal-media-controls-touchless-info {
  background-image: -webkit-image-set(url(ic_music_note.svg) 1x);
  display: block;
}

audio::-webkit-media-controls-touchless.state-no-source [pseudo="-internal-media-controls-touchless-info"],
video::-webkit-media-controls-touchless.state-no-source [pseudo="-internal-media-controls-touchless-info"] {
  background-image: -webkit-image-set(url(ic_no_source.svg) 1x);
  display: block;
}

audio::-internal-media-controls-touchless-overlay,
video::-internal-media-controls-touchless-overlay {
  width: 104px;
  height: 104px;
  background-image: -webkit-image-set(url(ic_mid_background.svg) 1x);
  background-size: 104px;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  opacity: 1;
  z-index: 1;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

audio::-webkit-media-controls-touchless.state-no-source [pseudo="-internal-media-controls-touchless-overlay"],
video::-webkit-media-controls-touchless.state-no-source [pseudo="-internal-media-controls-touchless-overlay"] {
  display: none;
}

audio::-internal-media-controls-touchless-overlay.transparent,
video::-internal-media-controls-touchless-overlay.transparent {
  opacity: 0;
  transition: opacity .5s;
}

audio::-internal-media-controls-touchless-overlay.transparent-immediate,
video::-internal-media-controls-touchless-overlay.transparent-immediate {
  opacity: 0;
}

audio::-internal-media-controls-touchless-volume-up-button,
video::-internal-media-controls-touchless-volume-up-button {
  width: 30px;
  height: 30px;
  margin-left: 37px /* (overlay width -width) / 2 */;
  background-image: -webkit-image-set(url(ic_volume_up.svg) 1x);
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
}

audio::-internal-media-controls-touchless-seek-backward-button,
video::-internal-media-controls-touchless-seek-backward-button {
  width: 30px;
  height: 30px;
  margin-top: 7px /* (play button height - height) / 2 */;
  float: left;
  background-image: -webkit-image-set(url(ic_fast_rewind.svg) 1x);
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
}

audio::-internal-media-controls-touchless-play-button,
video::-internal-media-controls-touchless-play-button {
  width: 44px;
  height: 44px;
  background-position: center;
  background-size: 24px;
  background-repeat: no-repeat;
  float: left;
}

audio::-internal-media-controls-touchless-play-button.playing,
video::-internal-media-controls-touchless-play-button.playing {
  background-image: -webkit-image-set(url(ic_pause.svg) 1x);
}

audio::-internal-media-controls-touchless-play-button.paused,
video::-internal-media-controls-touchless-play-button.paused {
  background-image: -webkit-image-set(url(ic_play_arrow.svg) 1x);
}

audio::-internal-media-controls-touchless-seek-forward-button,
video::-internal-media-controls-touchless-seek-forward-button {
  width: 30px;
  height: 30px;
  margin-top: 7px /* (play button height - height) / 2 */;
  float: left;
  background-image: -webkit-image-set(url(ic_fast_forward.svg) 1x);
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
}

audio::-internal-media-controls-touchless-volume-down-button,
video::-internal-media-controls-touchless-volume-down-button {
  width: 30px;
  height: 30px;
  margin-left: 37px /* (overlay width -width) / 2 */;
  position: absolute;
  bottom: 0;
  background-image: -webkit-image-set(url(ic_volume_down.svg) 1x);
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
}

audio::-internal-media-controls-touchless-bottom-container,
video::-internal-media-controls-touchless-bottom-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  width: 100%;
  z-index: 0;

  background:
    -webkit-image-set(url('gradient_bg.png') 1x)
    repeat-x bottom left;
  background-size: auto 48px;
}

audio::-internal-media-controls-touchless-bottom-container.transparent,
video::-internal-media-controls-touchless-bottom-container.transparent {
  opacity: 0;
  transition: opacity .5s;
}

audio::-internal-media-controls-touchless-time-display,
video::-internal-media-controls-touchless-time-display {
  color: #ffffff;
  font-family: Roboto-Regular, Roboto, sans-serif;
  font-size: 14px;
  width: 100%;
  bottom: auto;
  padding-left: 8px;
  padding-bottom: 8px;
}

audio::-internal-media-controls-touchless-timeline,
video::-internal-media-controls-touchless-timeline {
  width: 100%;
  bottom: auto;
  height: 4px;
  background-color: rgba(0, 0, 0, 0.2);
}

audio::-internal-media-controls-touchless-timeline-loaded,
video::-internal-media-controls-touchless-timeline-loaded {
  height: 100%;
  width: 0; /* We are using style attribute to override this. */
  border-radius: 0 2px 2px 0;
  background-color: rgba(255, 255, 255, 0.54);
}

audio::-internal-media-controls-touchless-timeline-progress,
video::-internal-media-controls-touchless-timeline-progress {
  height: 100%;
  width: 0; /* We are using style attribute to override this. */
  border-radius: 0 2px 2px 0;
  background-color: rgba(255, 255, 255, 1.0);
}

audio::-internal-media-controls-touchless-volume-container,
video::-internal-media-controls-touchless-volume-container {
  width: 44px;
  max-height: 152px;
  height: 90%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: rgba(60,64,67,0.9);
  border-radius: 22px;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

audio::-internal-media-controls-touchless-volume-container.transparent,
video::-internal-media-controls-touchless-volume-container.transparent {
  opacity: 0;
  transition: opacity .5s;
}

audio::-internal-media-controls-touchless-volume-container.transparent-immediate,
video::-internal-media-controls-touchless-volume-container.transparent-immediate {
  opacity: 0;
}

audio::-internal-media-controls-touchless-volume-bar-background,
video::-internal-media-controls-touchless-volume-bar-background {
  width: 4px;
  margin-left: 20px;
  margin-top: 12px;
  margin-bottom: 8px;
  background-color: rgba(255,255,255,0.54);
  flex: 1 1 auto;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

audio::-webkit-media-controls-touchless.inline [pseudo="-internal-media-controls-touchless-volume-bar-background"],
video::-webkit-media-controls-touchless.inline [pseudo="-internal-media-controls-touchless-volume-bar-background"] {
  margin-bottom: 12px;
}

audio::-internal-media-controls-touchless-volume-bar,
video::-internal-media-controls-touchless-volume-bar {
  background-color: #FFFFFF;
  border-radius: 2px;
}

audio::-internal-media-controls-touchless-volume-icon,
video::-internal-media-controls-touchless-volume-icon {
  width: 24px;
  height: 24px;
  margin-left: 10px;
  margin-bottom: 10px;
  flex: 0 1 auto;
  background-image: -webkit-image-set(url(ic_volume_on.svg) 1x);
}

audio::-internal-media-controls-touchless-volume-icon.muted,
video::-internal-media-controls-touchless-volume-icon.muted {
  background-image: -webkit-image-set(url(ic_volume_off.svg) 1x);
}

audio::-webkit-media-controls-touchless.inline div[pseudo="-internal-media-controls-touchless-volume-icon" i],
video::-webkit-media-controls-touchless.inline div[pseudo="-internal-media-controls-touchless-volume-icon" i] {
  display: none;
}

/**
 * Text Tracks
 */
video::-webkit-media-text-track-container {
    position: relative;
    width: inherit;
    height: inherit;
    overflow: hidden;

    font: 22px sans-serif;
    text-align: center;
    color: rgba(255, 255, 255, 1);

    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0;
    text-decoration: none;
    pointer-events: none;
    -webkit-user-select: none;
    word-break: break-word;
}

video::cue {
    display: inline;

    background-color: rgba(0, 0, 0, 0.8);
}

video::-webkit-media-text-track-region {
    position: absolute;
    line-height: 5.33vh;
    writing-mode: horizontal-tb;
    background: rgba(0, 0, 0, 0.8);
    color: rgba(255, 255, 255, 1);
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow: hidden;
}

video::-webkit-media-text-track-region-container {
    position: relative;

    display: flex;
    flex-flow: column;
    flex-direction: column;
}

video::-webkit-media-text-track-region-container.scrolling {
    transition: top 433ms linear;
}

video::-webkit-media-text-track-display {
    position: absolute;
    overflow: hidden;
    white-space: pre-wrap;
    -webkit-box-sizing: border-box;
    flex: 0 0 auto;
}

video::cue(:future) {
    color: gray;
}

video::cue(b) {
    font-weight: bold;
}

video::cue(u) {
    text-decoration: underline;
}

video::cue(i) {
    font-style: italic;
}