/*
* Copyright (C) 2013, 2014, 2015 Apple Inc. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions
* are met:
* 1. Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* 2. Redistributions in binary form must reproduce the above copyright
* notice, this list of conditions and the following disclaimer in the
* documentation and/or other materials provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
* IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
* PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR
* CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
* PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
* OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
video:-webkit-full-page-media {
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
video:-webkit-full-page-media::-webkit-media-controls-panel {
bottom: 0px;
}
video:-webkit-full-page-media::-webkit-media-controls-panel.no-video {
opacity: 1;
}
::-webkit-media-controls {
width: inherit;
height: inherit;
position: relative;
display: -webkit-flex !important;
-webkit-align-items: stretch;
-webkit-justify-content: flex-end;
-webkit-flex-direction: column;
font: -webkit-small-control;
white-space: nowrap;
-webkit-font-smoothing: subpixel-antialiased;
}
::-webkit-media-controls.placeholder-showing {
overflow: hidden;
}
video::-webkit-media-text-track-container,
audio::-webkit-media-text-track-container {
position: relative;
-webkit-flex: 1 1 auto;
}
video::-webkit-media-controls-panel,
audio::-webkit-media-controls-panel {
box-sizing: border-box;
position: relative;
bottom: 0;
width: 100%;
min-height: 25px;
height: 25px;
line-height: 25px;
-webkit-user-select: none;
-webkit-user-drag: element;
background-color: transparent;
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-align-items: center;
-webkit-user-select: none;
direction: ltr;
transition: opacity 0.25s linear;
-webkit-text-zoom: reset
}
video::-webkit-media-controls-panel {
opacity: 0;
padding-top: 20px;
min-height: 45px;
height: 45px;
}
video::-webkit-media-controls-panel.show,
video::-webkit-media-controls-panel.paused,
video::-webkit-media-controls-panel:hover {
cursor: inherit;
opacity: 1;
}
video::-webkit-media-controls-panel.picture-in-picture {
pointer-events: none;
}
audio::-webkit-media-show-controls {
display: none !important;
}
video::-webkit-media-show-controls {
position: absolute;
left: 0;
bottom: 0;
display: block;
margin: 0;
padding: 0;
width: 100%;
height: 10px;
opacity: 0;
border: 0;
background: none;
-webkit-appearance: none;
}
video::-webkit-media-controls-panel-background-container,
audio::-webkit-media-controls-panel-background-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
video::-webkit-media-controls-panel-background-container {
z-index: 0;
}
video::-webkit-media-controls-panel-background-container {
min-height: 45px;
height: 45px;
-webkit-clip-path: inset(20px 0px 0px 0px);
}
video::-webkit-media-controls-panel-tint,
audio::-webkit-media-controls-panel-tint {
position: absolute;
left: 0;
top: 0;
width: 100%;
background-color: transparent;
}
video::-webkit-media-controls-panel-tint {
min-height: 45px;
height: 45px;
background-color: rgb(41, 41, 41);
mix-blend-mode: lighten;
}
video::-webkit-media-controls-panel-background,
audio::-webkit-media-controls-panel-background {
position: absolute;
left: 0;
top: 0;
width: 100%;
min-height: 25px;
height: 25px;
background-color: rgb(41, 41, 41);
}
video::-webkit-media-controls-panel-background {
min-height: 45px;
height: 45px;
background-color: rgba(30, 30, 30, 0.45);
-webkit-backdrop-filter: saturate(180%) blur(20px);
}
video::-webkit-media-controls-panel button,
audio::-webkit-media-controls-panel button {
-webkit-appearance: none;
display: block;
padding: 0;
border: 0;
height: 15px;
background-color: transparent;
color: white;
background-origin: content-box;
background-repeat: no-repeat;
background-position: center;
}
audio::-webkit-media-controls-panel button {
z-index: 0;
}
video::-webkit-media-controls-panel button {
mix-blend-mode: plus-lighter;
-webkit-transform: translateZ(0);
}
video::-webkit-media-controls-panel button:focus,
audio::-webkit-media-controls-panel button:focus {
outline: 0;
}
video::-webkit-media-controls-rewind-button,
audio::-webkit-media-controls-rewind-button {
background-image: url('data:image/svg+xml,');
width: 16px;
min-width: 16px;
height: 18px;
margin-bottom: 1px;
margin-left: 8px;
margin-right: 8px;
}
video::-webkit-media-controls-play-button,
audio::-webkit-media-controls-play-button {
background-image: url('data:image/svg+xml,');
margin-left: 8px;
margin-right: 8px;
width: 12px;
min-width: 12px;
}
video::-webkit-media-controls-play-button.paused,
audio::-webkit-media-controls-play-button.paused {
background-image: url('data:image/svg+xml,');
width: 12px;
}
video::-webkit-media-controls-panel .mute-box,
audio::-webkit-media-controls-panel .mute-box {
width: 14px;
min-width: 14px;
height: 25px;
margin-right: 8px;
margin-left: 8px;
position: relative;
display: -webkit-flex;
-webkit-flex-direction: column;
-webkit-justify-content: center;
-webkit-align-items: center;
}
video::-webkit-media-controls-mute-button,
audio::-webkit-media-controls-mute-button,
video::-webkit-media-controls-volume-max-button {
width: 14px;
min-width: 14px;
background-image: url('data:image/svg+xml,');
}
video::-webkit-media-controls-panel .volume-box,
audio::-webkit-media-controls-panel .volume-box {
position: absolute;
box-sizing: border-box;
width: 63px;
bottom: 5px;
left: -25px;
-webkit-clip-path: inset(20px 20px 20px 20px round 4px 4px 0px 0px);
background-color: transparent;
overflow: hidden;
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-align-items: center;
-webkit-justify-content: flex-end;
opacity: 0;
/* make zero height (rather than display:none) for AX and FKA */
height: 0px; /* will become 116px when shown */
}
audio::-webkit-media-controls-panel .volume-box {
background-color: black;
}
video::-webkit-media-controls-volume-slider-container-background,
audio::-webkit-media-controls-volume-slider-container-background {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
background-color: rgba(30, 30, 30, 0.45);
}
video::-webkit-media-controls-volume-slider-container-background {
background-color: rgba(30, 30, 30, 0.45);
-webkit-backdrop-filter: saturate(180%) blur(20px);
}
video::-webkit-media-controls-volume-slider-container-tint,
audio::-webkit-media-controls-volume-slider-container-tint {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
background-color: rgb(41, 41, 41);
}
video::-webkit-media-controls-volume-slider-container-tint {
mix-blend-mode: lighten;
}
/* FIXME: needs CSS4 !subject selector to show when slider inside .volume-box is focused */
video::-webkit-media-controls-panel .mute-box:hover .volume-box,
video::-webkit-media-controls-panel .volume-box:hover,
video::-webkit-media-controls-panel .volume-box:active,
audio::-webkit-media-controls-panel .mute-box:hover .volume-box,
audio::-webkit-media-controls-panel .volume-box:hover,
audio::-webkit-media-controls-panel .volume-box:active {
opacity: 1;
/* resize to usable amount (rather than display:none) for AX and FKA */
height: 116px;
}
audio::-webkit-media-controls-volume-slider,
video::-webkit-media-controls-volume-slider {
-webkit-appearance: none !important;
box-sizing: border-box !important;
height: 9px !important;
min-width: 64px !important;
width: 64px !important;
padding: 0 !important;
margin: 0 !important;
background-color: transparent !important;
background-size: 100% 100%;
background-repeat: no-repeat;
-webkit-transform-origin: 0 0;
-webkit-transform: rotate(-90deg) translateY(28px) translateX(-40px);
}
video::-webkit-media-controls-volume-slider {
mix-blend-mode: plus-lighter;
}
video::-webkit-media-controls-volume-slider::-webkit-slider-thumb,
audio::-webkit-media-controls-volume-slider::-webkit-slider-thumb {
-webkit-appearance: none !important;
width: 7px !important;
height: 7px !important;
visibility: hidden;
}
video::-webkit-media-controls-mute-button.muted,
audio::-webkit-media-controls-mute-button.muted,
video::-webkit-media-controls-volume-min-button {
background-image: url('data:image/svg+xml,');
}
video::-webkit-media-controls-wireless-playback-picker-button,
audio::-webkit-media-controls-wireless-playback-picker-button {
margin-right: 8px;
margin-left: 8px;
width: 16px;
min-width: 16px;
}
video::-webkit-media-controls-wireless-playback-picker-button.playing,
audio::-webkit-media-controls-wireless-playback-picker-button.playing {
mix-blend-mode: normal;
}
video::-webkit-media-controls-toggle-closed-captions-button,
audio::-webkit-media-controls-toggle-closed-captions-button {
width: 16px;
min-width: 16px;
margin-right: 8px;
margin-left: 8px;
background-image: url('data:image/svg+xml,');
outline: 0;
}
video::-webkit-media-controls-closed-captions-container,
audio::-webkit-media-controls-closed-captions-container {
-webkit-appearance: media-closed-captions-container;
position: absolute;
display: block;
right: 38px;
bottom: 29px;
max-width: calc(100% - 48px); /* right + 10px */
max-height: calc(100% - 39px); /* bottom + 10px */
overflow-x: hidden;
overflow-y: scroll;
background-color: rgba(0, 0, 0, 0.8);
border: 1px solid rgba(128, 128, 128, 0.75);
border-radius: 6px;
cursor: default;
z-index: 2;
text-align: initial;
}
video::-webkit-media-controls-closed-captions-container .list,
audio::-webkit-media-controls-closed-captions-container .list {
display: block;
-webkit-user-select: none;
}
video::-webkit-media-controls-closed-captions-container h3,
audio::-webkit-media-controls-closed-captions-container h3 {
margin: 0;
color: rgb(140, 140, 140);
text-shadow: 0 1px 0 black;
-webkit-margin-start: 16px;
padding-top: 4px;
font-size: 11px;
}
video::-webkit-media-controls-closed-captions-container ul,
audio::-webkit-media-controls-closed-captions-container ul {
list-style-type: none;
margin: 0 0 8px 0;
padding: 0;
}
video::-webkit-media-controls-closed-captions-container li,
audio::-webkit-media-controls-closed-captions-container li {
position: relative;
color: white;
background-image: none;
text-shadow: 0 1px 0 black;
margin: 0;
padding-left: 28px;
padding-right: 28px;
padding-top: 0.15em;
padding-bottom: 0.2em;
box-sizing: border-box;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
}
video::-webkit-media-controls-closed-captions-container li:focus,
audio::-webkit-media-controls-closed-captions-container li:focus {
outline: 0;
background-color: rgba(140, 140, 140, 0.5);
}
video::-webkit-media-controls-closed-captions-container li:hover,
audio::-webkit-media-controls-closed-captions-container li:hover {
background-color: rgba(26, 68, 243, 0.6);
}
video::-webkit-media-controls-closed-captions-container li .checkmark-container,
audio::-webkit-media-controls-closed-captions-container li .checkmark-container {
display: none;
position: absolute;
top: 0.25em;
left: 1em;
width: 1.1em;
height: 1.1em;
}
video::-webkit-media-controls-closed-captions-container li.selected .checkmark-container,
audio::-webkit-media-controls-closed-captions-container li.selected .checkmark-container {
display: inline-block;
content: url('data:image/svg+xml,');
}
video::-webkit-media-controls-closed-captions-container li.selected:hover .checkmark-container,
audio::-webkit-media-controls-closed-captions-container li.selected:hover .checkmark-container {
content: url('data:image/svg+xml,');
}
video::-webkit-media-controls-panel .picture-in-picture-button {
margin-right: 7px;
margin-left: 8px;
margin-top: 1px;
width: 16px;
min-width: 18px;
height: 12px;
background-image: url('data:image/svg+xml,');
}
video::-webkit-media-controls-panel .picture-in-picture-button.return-from-picture-in-picture {
background-image: url('data:image/svg+xml,');
}
video::-webkit-media-controls-fullscreen-button,
audio::-webkit-media-controls-fullscreen-button {
background-image: url('data:image/svg+xml,');
margin-right: 7px;
margin-left: 8px;
width: 14px;
min-width: 14px;
}
video::-webkit-media-controls-fullscreen-button.exit,
audio::-webkit-media-controls-fullscreen-button.exit {
background-image: url('data:image/svg+xml,');
margin-right: 11px;
margin-left: 0px;
margin-top: 6px;
}
video::-webkit-media-controls-status-display,
audio::-webkit-media-controls-status-display {
cursor: default;
overflow: hidden;
color: rgb(156, 156, 156);
opacity: 0.99;
letter-spacing: normal;
word-spacing: normal;
line-height: 25px;
text-transform: none;
text-indent: 0;
text-decoration: none;
text-align: left;
padding: 0 12px;
-webkit-flex: 1 1 0;
}
video::-webkit-media-controls-status-display {
color: white;
opacity: .45;
mix-blend-mode: plus-lighter;
}
video::-webkit-media-controls-timeline,
audio::-webkit-media-controls-timeline {
-webkit-appearance: none !important;
-webkit-flex: 1 1 0 !important;
height: 17px !important;
margin: 0 !important;
background-size: 100% 100% !important;
background-repeat: no-repeat;
background-color: transparent;
}
video::-webkit-media-controls-timeline {
mix-blend-mode: plus-lighter;
}
video::-webkit-media-controls-timeline::-webkit-slider-thumb,
audio::-webkit-media-controls-timeline::-webkit-slider-thumb {
-webkit-appearance: none !important;
width: 3px !important;
height: 15px !important;
}
video::-webkit-media-controls-current-time-display,
video::-webkit-media-controls-time-remaining-display,
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
-webkit-user-select: none;
-webkit-flex: 0 0 0;
display: -webkit-flex;
cursor: default;
overflow: hidden;
color: rgb(156, 156, 156);
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
text-transform: none;
text-indent: 0px;
text-decoration: none;
position: relative;
bottom: 0.5px;
font-family: -apple-system-monospaced-numbers;
font-size: 11px !important;
font-style: normal !important;
font-weight: normal !important;
-webkit-text-size-adjust: none;
}
video::-webkit-media-controls-current-time-display,
video::-webkit-media-controls-time-remaining-display {
color: white;
opacity: .45;
mix-blend-mode: plus-lighter;
}
video::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-current-time-display {
margin-left: 8px;
margin-right: 8px;
width: 32px;
min-width: 32px;
-webkit-justify-content: flex-end;
}
video::-webkit-media-controls-time-remaining-display,
audio::-webkit-media-controls-time-remaining-display {
margin-left: 8px;
margin-right: 8px;
width: 37px;
min-width: 37px;
-webkit-justify-content: flex-start;
}
video::-webkit-media-controls-time-remaining-display.five-digit-time,
audio::-webkit-media-controls-time-remaining-display.five-digit-time {
min-width: 47px;
}
video::-webkit-media-controls-current-time-display.five-digit-time,
audio::-webkit-media-controls-current-time-display.five-digit-time {
min-width: 42px;
}
video::-webkit-media-controls-time-remaining-display.six-digit-time,
audio::-webkit-media-controls-time-remaining-display.six-digit-time {
min-width: 54px;
}
video::-webkit-media-controls-current-time-display.six-digit-time,
audio::-webkit-media-controls-current-time-display.six-digit-time {
min-width: 49px;
}
video::-webkit-media-controls-timeline-container,
audio::-webkit-media-controls-timeline-container {
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-align-items: center;
-webkit-user-select: none;
-webkit-flex: 1 1 0;
min-width: 0;
position: relative;
padding: 0;
}
video::-webkit-media-controls-panel .thumbnail-track,
audio::-webkit-media-controls-panel .thumbnail-track {
position: relative;
-webkit-flex: 1 1 0;
min-width: 0;
height: 17px;
margin: 0 2px;
display: -webkit-flex;
-webkit-align-items: stretch;
-webkit-flex-direction: column;
}
video::-webkit-media-controls-panel .thumbnail,
audio::-webkit-media-controls-panel .thumbnail {
position: absolute;
opacity: 0;
transition: opacity 0.25s linear;
bottom: 15px;
width: 100px;
height: 58px;
margin-left: -50px;
border: 5px solid black;
box-shadow: 0 0 3px white;
border-radius: 3px;
}
video::-webkit-media-controls-panel .thumbnail-image,
audio::-webkit-media-controls-panel .thumbnail-image {
width: 100%;
height: 100%;
}
video::-webkit-media-controls-panel .thumbnail.show,
audio::-webkit-media-controls-panel .thumbnail.show {
opacity: 1;
}
video::-webkit-media-controls-panel.hidden,
audio::-webkit-media-controls-panel.hidden {
display: none;
}
video::-webkit-media-controls-panel .hidden,
audio::-webkit-media-controls-panel .hidden,
video::-webkit-media-controls-panel .dropped,
audio::-webkit-media-controls-panel .dropped {
display: none;
}
/* Full Screen */
/*
Page stylesheets are not allowed to override the style of media
controls while in full screen mode, so many if not all the rules
defined in this section will be marked as !important to enforce
this restriction
*/
video:-webkit-full-screen::-webkit-media-controls-panel {
-webkit-align-items: flex-start !important;
-webkit-justify-content: flex-end !important;
-webkit-clip-path: inset(20px round 6px);
width: 480px !important;
height: 104px !important;
margin: 0 auto 12px auto !important;
padding: 20px;
padding-top: 30px !important;
background-color: transparent;
border-radius: 6px !important;
transition: opacity 0.3s linear !important;
}
video:-webkit-full-screen::-webkit-media-controls-panel-tint,
audio:-webkit-full-screen::-webkit-media-controls-panel-tint {
position: absolute;
left: 0;
top: 0;
width: 480px !important;
height: 104px !important;
border-radius: 6px !important;
background-color: rgb(41, 41, 41);
mix-blend-mode: lighten;
}
video:-webkit-full-screen::-webkit-media-controls-panel-background,
audio:-webkit-full-screen::-webkit-media-controls-panel-background {
position: absolute;
left: 0;
top: 0;
width: 480px !important;
height: 104px !important;
border-radius: 6px !important;
background-color: rgba(30, 30, 30, 0.45);
-webkit-backdrop-filter: saturate(180%) blur(20px);
}
video:-webkit-animating-full-screen-transition::-webkit-media-controls-panel {
opacity: 0 ! important;
transition: opacity 0 ! important;
}
video:-webkit-full-screen::-webkit-media-controls-panel .volume-box {
-webkit-transform: none;
-webkit-clip-path: none;
opacity: 1;
left: 32px;
top: 35px;
width: 96px;
height: 17px;
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-align-items: center;
background-color: transparent;
border: none;
}
video:-webkit-full-screen::-webkit-media-controls-panel .volume-box:not(.uses-ltr-user-interface-layout-direction) {
transform: translateX(23px) scaleX(-1);
}
video:-webkit-full-screen::-webkit-media-controls-volume-slider {
-webkit-transform: none;
background-color: transparent;
min-width: 60px !important;
width: 60px !important;
height: 9px !important;
margin: 0 !important;
}
video:-webkit-full-screen::-webkit-media-controls-mute-button,
audio:-webkit-full-screen::-webkit-media-controls-mute-button,
video:-webkit-full-screen::-webkit-media-controls-volume-max-button {
width: 14px !important;
margin-left: 6px !important;
margin-bottom: 2px !important;
background-image: url('data:image/svg+xml,');
}
video:-webkit-full-screen::-webkit-media-controls-mute-button,
audio:-webkit-full-screen::-webkit-media-controls-mute-button,
video:-webkit-full-screen::-webkit-media-controls-volume-min-button {
width: 14px !important;
margin-right: 2px !important;
margin-bottom: 2px !important;
background-image: url('data:image/svg+xml,');
}
video:-webkit-full-screen::-webkit-media-controls-play-button {
position: absolute;
background-image: url('data:image/svg+xml,');
width: 21px;
height: 23px;
left: 230px;
top: 32px;
margin: 0;
padding: 0;
}
video:-webkit-full-screen::-webkit-media-controls-play-button.paused {
background-image: url('data:image/svg+xml,');
}
video:-webkit-full-screen::-webkit-media-controls-seek-back-button {
position: absolute;
background-image: url('data:image/svg+xml,');
width: 24px;
height: 15px;
left: 176px;
top: 36px;
}
video:-webkit-full-screen::-webkit-media-controls-return-to-realtime-button {
position: absolute;
display: -webkit-flex;
width: 29px;
height: 16px;
left: 262px;
top: 13px;
}
video:-webkit-full-screen::-webkit-media-controls-seek-forward-button {
position: absolute;
background-image: url('data:image/svg+xml,');
width: 24px;
height: 15px;
left: 275px;
top: 36px;
}
video:-webkit-full-screen::-webkit-media-controls-timeline-container {
height: auto;
width: 440px;
position: absolute;
bottom: 28px;
left: 20px;
}
video:-webkit-full-screen::-webkit-media-controls-current-time-display {
margin-left: 12px;
}
video:-webkit-full-screen::-webkit-media-controls-time-remaining-display {
margin-right: 12px;
}
video:-webkit-full-screen::-webkit-media-controls-status-display {
width: 440px;
position: absolute;
bottom: 25px;
text-align: center;
padding: 0;
left: 20px;
}
video:-webkit-full-screen::-webkit-media-controls-toggle-closed-captions-button,
audio:-webkit-full-screen::-webkit-media-controls-toggle-closed-captions-button {
margin-top: 6px;
margin-right:24px;
margin-left: 0px;
}
video:-webkit-full-screen::-webkit-media-controls-wireless-playback-picker-button,
audio:-webkit-full-screen::-webkit-media-controls-wireless-playback-picker-button {
margin-top: 6px;
margin-right:24px;
margin-left: 0px;
}
video:-webkit-full-screen::-webkit-media-controls-closed-captions-container {
bottom: 100px;
right: calc(50% - 183px); /* 183px is 221px (half the media controller's width) minus 38px (the right position of the captions icon). */
max-width: calc(50% + 173px); /* right + 10px */
max-height: calc(100% - 124px); /* bottom + 10px */
}
video::-webkit-media-text-track-container {
position: relative;
width: 100%;
overflow: hidden;
padding-bottom: 5px;
z-index: 0;
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;
-webkit-flex: 1 1;
-webkit-line-box-contain: block inline-box replaced;
}
video::cue {
background-color: rgba(0, 0, 0, 0.8);
}
video::-webkit-media-text-track-display {
position: absolute;
overflow: hidden;
white-space: pre-wrap;
-webkit-box-sizing: border-box;
font: 22px sans-serif;
}
video::-webkit-media-text-track-display-backdrop {
display: inline-block;
}
video::cue(:future) {
color: gray;
}
video::-webkit-media-text-track-container b {
font-weight: bold;
}
video::-webkit-media-text-track-container u {
text-decoration: underline;
}
video::-webkit-media-text-track-container i {
font-style: italic;
}
video::-webkit-media-text-track-container .hidden,
audio::-webkit-media-text-track-container .hidden {
display: none;
}
/* ============ ACTIVE VERSIONS OF ALL BUTTONS ============= */
video::-webkit-media-controls-mute-button:active,
audio::-webkit-media-controls-mute-button:active,
video::-webkit-media-controls-volume-max-button:active {
background-image: url('data:image/svg+xml,');
}
video::-webkit-media-controls-panel button.muted:active,
audio::-webkit-media-controls-panel button.muted:active,
video::-webkit-media-controls-volume-min-button:active {
background-image: url('data:image/svg+xml,');
}
video::-webkit-media-controls-toggle-closed-captions-button:active,
audio::-webkit-media-controls-toggle-closed-captions-button:active {
background-image: url('data:image/svg+xml,');
}
video::-webkit-media-controls-rewind-button:active,
audio::-webkit-media-controls-rewind-button:active {
background-image: url('data:image/svg+xml,');
}
video::-webkit-media-controls-panel button.paused:active,
audio::-webkit-media-controls-panel button.paused:active {
background-image: url('data:image/svg+xml,');
}
video::-webkit-media-controls-play-button:active,
audio::-webkit-media-controls-play-button:active {
background-image: url('data:image/svg+xml,');
}
video:-webkit-full-screen::-webkit-media-controls-mute-button:active,
audio:-webkit-full-screen::-webkit-media-controls-mute-button:active,
video:-webkit-full-screen::-webkit-media-controls-volume-max-button:active {
background-image: url('data:image/svg+xml,');
}
video:-webkit-full-screen::-webkit-media-controls-mute-button:active,
audio:-webkit-full-screen::-webkit-media-controls-mute-button:active,
video:-webkit-full-screen::-webkit-media-controls-volume-min-button:active {
background-image: url('data:image/svg+xml,');
}
video:-webkit-full-screen::-webkit-media-controls-play-button:active{
background-image: url('data:image/svg+xml,');
}
video:-webkit-full-screen::-webkit-media-controls-panel button.paused:active {
background-image: url('data:image/svg+xml,');
}
video:-webkit-full-screen::-webkit-media-controls-seek-back-button:active {
background-image: url('data:image/svg+xml,');
}
video:-webkit-full-screen::-webkit-media-controls-seek-forward-button:active {
background-image: url('data:image/svg+xml,');
}
video::-webkit-media-controls-fullscreen-button:active,
audio::-webkit-media-controls-fullscreen-button:active {
background-image: url('data:image/svg+xml,');
}
video::-webkit-media-controls-panel button.exit:active,
audio::-webkit-media-controls-panel button.exit:active {
background-image: url('data:image/svg+xml,');
}
video::-webkit-media-controls-wireless-playback-picker-button:active,
audio::-webkit-media-controls-wireless-playback-picker-button:active {
background-image: url('data:image/svg+xml,');
}
video::-webkit-media-controls-panel .picture-in-picture-button:active {
background-image: url('data:image/svg+xml,');
}
video::-webkit-media-controls-panel .picture-in-picture-button.return-from-picture-in-picture:active {
background-image: url('data:image/svg+xml,');
}
/* ==================== AIRPLAY PLACARD ==================== */
video::-webkit-media-controls-wireless-playback-status,
audio::-webkit-media-controls-wireless-playback-status {
display: block;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;utf8,');
background-color: rgb(51, 51, 53);
background-repeat: no-repeat;
background-position: 50% calc(.5 * (100% - 25px) - 21pt);
background-size: 131px auto;
color: -apple-system-gray;
font-family: -apple-system;
vertical-align: text-bottom;
}
video::-webkit-media-controls-wireless-playback-text,
audio::-webkit-media-controls-wireless-playback-text {
cursor: default;
position: absolute;
width: 100%;
top: calc(.5 * (100% - 25px) + (.5 * (90px + 42pt) - 42pt));
-webkit-user-select: none;
margin: 0px;
height: 42pt;
}
video::-webkit-media-controls-wireless-playback-text-top,
audio::-webkit-media-controls-wireless-playback-text-top {
position: absolute;
top: 15pt;
width: 100%;
line-height: 12pt;
height: 13pt;
font-size: 12pt;
text-align: center;
margin: 0px;
}
video::-webkit-media-controls-wireless-playback-text-bottom,
audio::-webkit-media-controls-wireless-playback-text-bottom {
position: absolute;
bottom: 0;
left: 5%;
width: 90%;
line-height: 10pt;
height: 11pt;
font-size: 10pt;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0px;
}
video::-webkit-media-controls-wireless-playback-status.small,
audio::-webkit-media-controls-wireless-playback-status.small {
background-image: url('data:image/svg+xml;utf8,');
background-position: 50% calc(.5 * (100% - 25px) - 5pt);
background-size: 62px auto;
}
video::-webkit-media-controls-wireless-playback-text-top.small,
audio::-webkit-media-controls-wireless-playback-text-top.small {
top: 4pt;
}
video::-webkit-media-controls-wireless-playback-text-bottom.small,
audio::-webkit-media-controls-wireless-playback-text-bottom.small {
display: none;
}
video::-webkit-media-controls-wireless-playback-status.picture-in-picture,
audio::-webkit-media-controls-wireless-playback-status.picture-in-picture
{
background-size: 304px auto;
background-position: 50% calc(.5 * (100% - 25px));
background-image: url('data:image/svg+xml;utf8,');
}
video::-webkit-media-controls-wireless-playback-text-top.picture-in-picture,
audio::-webkit-media-controls-wireless-playback-text-top.picture-in-picture {
top: initial;
bottom: 0;
}
video::-webkit-media-controls-wireless-playback-text-bottom.picture-in-picture,
audio::-webkit-media-controls-wireless-playback-text-bottom.picture-in-picture {
display: none;
}
video::-webkit-media-controls-wireless-playback-status.hidden,
audio::-webkit-media-controls-wireless-playback-status.hidden {
display: none;
}
video::-webkit-media-controls-panel.picture-in-picture {
opacity: 0;
pointer-events: none;
}
video:-webkit-full-screen::-webkit-media-controls-panel .picture-in-picture-button {
margin-top: 7px;
margin-right: 24px;
margin-left: 0px;
}
/* Time display clones that we use in updateLayoutForDisplayedWidth(). */
::-webkit-media-controls-current-time-display.clone,
::-webkit-media-controls-time-remaining-display.clone {
position: absolute;
display: inline;
top: 100%;
mix-blend-mode: normal;
}