mediaControlsQuickTime.css [plain text]
/*
* Copyright (C) 2009, 2010, 2011 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 COMPUTER, 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 COMPUTER, 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.
*/
/* alternate media controls - Extend mediaControls.css */
audio {
width: 200px;
height: 25px;
}
audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
/* In mediaControls.css */
-webkit-appearance: media-controls-background;
overflow: visible;
height: 25px;
-webkit-flex-shrink: 0;
}
video:-webkit-full-page-media::-webkit-media-controls-panel {
bottom: 0px;
}
audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
-webkit-order: 2; /* Before the fullscreen button */
width: 14px;
height: 12px;
margin-left: 2px;
margin-right: 9px;
border: none !important;
position: relative;
z-index: 1;
}
audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
width: 16px;
height: 16px;
margin-left: 6px;
margin-right: 1px;
border: none !important;
}
audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container {
-webkit-appearance: none;
-webkit-flex-direction: row;
-webkit-align-items: center;
-webkit-justify-content: flex-start;
-webkit-flex: 1 1;
text-align: right;
height: auto;
}
audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display {
-webkit-user-select: none;
display: -webkit-flex;
-webkit-flex: 0 0;
-webkit-justify-content: center;
-webkit-align-items: center;
cursor: default;
font: -webkit-small-control;
font-size: 9px;
overflow: hidden;
width: 45px;
min-width: 45px;
color: white;
text-shadow: black 0px 1px 1px;
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
text-transform: none;
text-indent: 0;
text-decoration: none;
}
audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display {
-webkit-user-select: none;
display: -webkit-flex;
-webkit-flex: 0 0;
-webkit-justify-content: center;
-webkit-align-items: center;
cursor: default;
font: -webkit-small-control;
font-size: 9px;
overflow: hidden;
width: 45px;
min-width: 45px;
color: white;
text-shadow: black 0px 1px 1px;
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
text-transform: none;
text-indent: 0;
text-decoration: none;
}
audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
display: -webkit-flex;
-webkit-flex: 1 1;
height: 13px;
padding: 0px;
margin: 0px;
margin-top: 2px;
}
audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button {
display: none;
width: 0px;
border: none !important;
}
audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button {
display: none;
width: 0px;
border: none !important;
}
audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button {
width: 16px;
height: 16px;
margin-left: 7px;
margin-right: 7px;
-webkit-order: 4; /* At the very end */
border: none !important;
}
audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewind-button {
display: -webkit-flex;
-webkit-appearance: media-rewind-button;
width: 18px;
height: 18px;
margin-bottom: 1px;
margin-left: 6px;
margin-right: 2px;
border: none !important;
}
audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-controls-return-to-realtime-button {
display: none;
-webkit-appearance: media-return-to-realtime-button;
width: 16px;
height: 11px;
margin-left: 6px;
margin-right: 2px;
border: none !important;
}
audio::-webkit-media-controls-status-display, video::-webkit-media-controls-status-display {
-webkit-user-select: none;
cursor: default;
display: -webkit-flex;
-webkit-flex: 1 1;
font: -webkit-small-control;
color: white;
font-size: 10px;
line-height: 13px;
overflow: hidden;
text-shadow: black 0px 1px 1px;
margin-left: 10px;
margin-right: 10px;
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
text-transform: none;
text-indent: 0;
text-decoration: none;
}
audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container {
-webkit-appearance: media-volume-slider-container;
position: absolute;
bottom: 0px;
z-index: 2;
width: 22px;
height: 114px;
}
audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
-webkit-appearance: media-volume-slider;
display: inline;
position: absolute;
top: 7px;
left: 6px;
width: 10px;
height: 80px;
}
audio::-webkit-media-controls-volume-slider-mute-button, video::-webkit-media-controls-volume-slider-mute-button {
-webkit-appearance: media-volume-slider-mute-button;
display: inline;
position: absolute;
bottom: 7px;
left: 0px;
width: 14px;
height: 12px;
margin-left: 2px;
margin-right: 9px;
border: none !important;
}
video::-webkit-media-controls-toggle-closed-captions-button {
-webkit-appearance: media-toggle-closed-captions-button;
display: -webkit-flex;
width: 16px;
height: 16px;
margin-left: 7px;
margin-right: 7px;
-webkit-order: 3; /* between mute and fullscreen */
border: none !important;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 102 105"><path fill="rgb(224,224,224)" d="M98.766,43.224c0-23.163-21.775-41.94-48.637-41.94c-26.859,0-48.635,18.777-48.635,41.94c0,18.266,13.546,33.796,32.444,39.549c1.131,8.356,26.037,24.255,22.864,19.921c-4.462-6.096-5.159-13.183-5.07-17.566C77.85,84.397,98.766,65.923,98.766,43.224z"/></svg>');
background-repeat: no-repeat;
background-size: 16px 16px;
}
video::-webkit-media-controls-closed-captions-container {
-webkit-appearance: media-closed-captions-container;
position: absolute;
display: block;
right: 38px;
bottom: 29px;
max-width: -webkit-calc(100% - 48px); /* right + 10px */
max-height: -webkit-calc(100% - 39px); /* bottom + 10px */
overflow-x: hidden;
overflow-y: scroll;
background-color: rgba(0, 0, 0, 0.85);
border: 3px solid rgba(128, 128, 128, 0.75);
border-radius: 10px;
cursor: default;
z-index: 2;
}
video::-webkit-media-controls-closed-captions-track-list {
display: block;
font-family: "Helvetica Bold", Helvetica;
font-size: 10pt;
-webkit-user-select: none;
}
video::-webkit-media-controls-closed-captions-track-list h3 {
margin: 0;
color: #757575;
text-shadow: 0 1px 0 black;
-webkit-margin-start: 23px;
padding-top: 4px;
font-weight: bold;
font-size: 10pt;
}
video::-webkit-media-controls-closed-captions-track-list ul {
list-style-type: none;
margin: 0 0 4px 0;
padding: 0;
font-weight: bold;
}
video::-webkit-media-controls-closed-captions-track-list li {
position: relative;
color: white;
background-image: none;
text-shadow: 0 1px 0 black;
margin: 0;
padding-left: 37px;
padding-right: 35px;
padding-top: 0.15em;
padding-bottom: 0.2em;
box-sizing: border-box;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border-top: 1px solid rgba(0, 0, 0, 0);
border-bottom: 1px solid rgba(0, 0, 0, 0);
}
video::-webkit-media-controls-closed-captions-track-list li:hover {
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4f70f6), color-stop(1, #1a44f3));
border-top: 1px solid #4667ea;
border-bottom: 1px solid #0336e5;
}
video::-webkit-media-controls-closed-captions-track-list li.selected::before {
display: block;
content: "";
position: absolute;
top: 0.25em;
width: 1.1em;
height: 1.1em;
-webkit-margin-start: -20px;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><polygon fill="#a3a3a3" points="252.301,4.477 126.667,194.104 43.358,108.3 6.868,161.408 132.515,290.814 297.732,49.926"/></svg>');
background-repeat: no-repeat;
}
video::-webkit-media-controls-closed-captions-track-list li.selected:hover::before {
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><polygon fill="white" points="252.301,4.477 126.667,194.104 43.358,108.3 6.868,161.408 132.515,290.814 297.732,49.926"/></svg>');
}