1/*
2 * Copyright (C) 2009, 2010, 2011 Apple Inc.  All rights reserved.
3 *
4 * Redistribution and use in source and binary forms, with or without
5 * modification, are permitted provided that the following conditions
6 * are met:
7 * 1. Redistributions of source code must retain the above copyright
8 *    notice, this list of conditions and the following disclaimer.
9 * 2. Redistributions in binary form must reproduce the above copyright
10 *    notice, this list of conditions and the following disclaimer in the
11 *    documentation and/or other materials provided with the distribution.
12 *
13 * THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY
14 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
15 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
16 * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE COMPUTER, INC. OR
17 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
18 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
19 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
20 * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
21 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
22 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
23 */
24
25/* media controls */
26
27body:-webkit-full-page-media {
28    background-color: rgb(38, 38, 38);
29}
30
31audio {
32    width: 200px;
33    height: 16px;
34}
35
36::-webkit-media-controls {
37    width: inherit;
38    height: inherit;
39    position: relative;
40    display: -webkit-flex;
41    -webkit-align-items: flex-start;
42    -webkit-justify-content: flex-end;
43    -webkit-flex-direction: column;
44}
45
46audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
47    display: -webkit-flex;
48    direction: ltr;
49    -webkit-flex-direction: row;
50    -webkit-align-items: center;
51    -webkit-user-select: none;
52    position: relative;
53    bottom: 0;
54    width: 100%;
55    z-index: 0;
56    overflow: hidden;
57    height: 16px;
58    text-align: right;
59}
60
61video:-webkit-full-page-media {
62    margin: auto;
63    position: absolute;
64    top: 0;
65    right: 0;
66    bottom: 0;
67    left: 0;
68}
69
70video:-webkit-full-page-media::-webkit-media-controls-panel {
71    bottom: 0px;
72}
73
74audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
75    -webkit-appearance: media-mute-button;
76    display: -webkit-flex;
77    width: 16px;
78    height: 16px;
79    background-color: initial;
80    border: initial;
81    color: inherit;
82}
83
84audio::-webkit-media-controls-overlay-play-button, video::-webkit-media-controls-overlay-play-button {
85    display: none;
86}
87
88audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
89    -webkit-appearance: media-play-button;
90    display: -webkit-flex;
91    width: 16px;
92    height: 16px;
93    background-color: initial;
94    border: initial;
95    color: inherit;
96}
97
98audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container {
99    -webkit-appearance: media-controls-background;
100    display: -webkit-flex;
101    -webkit-flex-direction: row;
102    -webkit-align-items: center;
103    -webkit-justify-content: flex-end;
104    -webkit-flex: 1 1;
105    -webkit-user-select: none;
106    height: 16px;
107    min-width: 0;
108}
109
110audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display {
111    display: none;
112}
113
114audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display {
115    display: none;
116}
117
118audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
119    -webkit-appearance: media-slider;
120    display: -webkit-flex;
121    -webkit-flex: 1 1;
122    height: 16px;
123    padding: 0px 2px;
124    background-color: initial;
125    border: initial;
126    color: inherit;
127    margin: initial;
128    min-width: 0;
129}
130
131audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
132    background-color: initial;
133    border: initial;
134    color: inherit;
135    margin: initial;
136}
137
138audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button {
139    -webkit-appearance: media-seek-back-button;
140    display: -webkit-flex;
141    width: 16px;
142    height: 16px;
143    background-color: initial;
144    border: initial;
145    color: inherit;
146}
147
148audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button {
149    -webkit-appearance: media-seek-forward-button;
150    display: -webkit-flex;
151    width: 16px;
152    height: 16px;
153    background-color: initial;
154    border: initial;
155    color: inherit;
156}
157
158audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button {
159    -webkit-appearance: media-enter-fullscreen-button;
160    display: -webkit-flex;
161    width: 16px;
162    height: 16px;
163    background-color: initial;
164    border: initial;
165    color: inherit;
166}
167
168audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewind-button {
169    display: none;
170    background-color: initial;
171    border: initial;
172    color: inherit;
173}
174
175audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-controls-return-to-realtime-button {
176    display: none;
177    background-color: initial;
178    border: initial;
179    color: inherit;
180}
181
182audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button {
183    -webkit-appearance: media-toggle-closed-captions-button;
184    display: -webkit-flex;
185    width: 16px;
186    height: 16px;
187    background-color: initial;
188    border: initial;
189    color: inherit;
190}
191
192audio::-webkit-media-controls-closed-captions-container, video::-webkit-media-controls-closed-captions-container {
193    display: none;
194}
195
196audio::-webkit-media-controls-closed-captions-track-list, video::-webkit-media-controls-closed-captions-track-list {
197    display: none;
198}
199
200audio::-webkit-media-controls-volume-slider-mute-button, video::-webkit-media-controls-volume-slider-mute-button {
201    -webkit-appearance: media-volume-slider-mute-button;
202    display: none;
203    background-color: initial;
204    border: initial;
205    color: inherit;
206}
207
208audio::-webkit-media-controls-fullscreen-volume-slider, video::-webkit-media-controls-fullscreen-volume-slider {
209    display: none;
210}
211
212audio::-webkit-media-controls-fullscreen-volume-min-button, video::-webkit-media-controls-fullscreen-volume-min-button {
213    display: none;
214}
215
216audio::-webkit-media-controls-fullscreen-volume-max-button, video::-webkit-media-controls-fullscreen-volume-max-button {
217    display: none;
218}
219
220video::-webkit-media-text-track-container {
221    position: relative;
222    width: 100%;
223    overflow: hidden;
224    padding-bottom: 5px;
225
226    text-align: center;
227    color: rgba(255, 255, 255, 1);
228
229    letter-spacing: normal;
230    word-spacing: normal;
231    text-transform: none;
232    text-indent: 0;
233    text-decoration: none;
234    pointer-events: none;
235    -webkit-user-select: none;
236    word-break: break-word;
237
238    -webkit-flex: 1 1;
239
240    -webkit-line-box-contain: block inline-box replaced;
241}
242
243video::cue {
244    background-color: rgba(0, 0, 0, 0.8);
245}
246
247video::-webkit-media-text-track-display {
248    position: absolute;
249    overflow: hidden;
250    white-space: pre-wrap;
251    -webkit-box-sizing: border-box;
252    font: 22px sans-serif;
253}
254
255video::cue(:future) {
256    color: gray;
257}
258
259video::-webkit-media-text-track-container b {
260    font-weight: bold;
261}
262
263video::-webkit-media-text-track-container u {
264    text-decoration: underline;
265}
266
267video::-webkit-media-text-track-container i {
268    font-style: italic;
269}
270