81b0e16b905fc454cba06821eed60c45d123a2be
[WebKit-https.git] / Source / WebCore / css / mediaControls.css
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
27 body:-webkit-full-page-media {
28     background-color: rgb(38, 38, 38);
29 }
30
31 audio {
32     width: 200px;
33     height: 16px;
34 }
35
36 ::-webkit-media-controls {
37     width: inherit;
38     height: inherit;
39     position: relative;
40     display: -webkit-box;
41     direction: ltr;
42     -webkit-box-align: start;
43     -webkit-box-pack: end;
44     -webkit-box-orient: vertical;
45 }
46
47 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
48     display: -webkit-box;
49     -webkit-box-orient: horizontal;
50     -webkit-box-align: 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
61 video:-webkit-full-page-media {
62     margin: auto;
63     position: absolute;
64     top: 0;
65     right: 0;
66     bottom: 0;
67     left: 0;
68 }
69
70 video:-webkit-full-page-media::-webkit-media-controls-panel {
71     bottom: 0px;
72 }
73
74 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button {
75     -webkit-appearance: media-mute-button;
76     display: -webkit-box;
77     width: 16px;
78     height: 16px;
79     background-color: initial;
80     border: initial;
81     color: inherit;
82 }
83
84 audio::-webkit-media-controls-overlay-play-button, video::-webkit-media-controls-overlay-play-button {
85     display: none;
86 }
87
88 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
89     -webkit-appearance: media-play-button;
90     display: -webkit-box;
91     width: 16px;
92     height: 16px;
93     background-color: initial;
94     border: initial;
95     color: inherit;
96 }
97
98 audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container {
99     -webkit-appearance: media-controls-background;
100     display: -webkit-box;
101     -webkit-box-orient: horizontal;
102     -webkit-box-align: center;
103     -webkit-box-pack: end;
104     -webkit-box-flex: 1;
105     -webkit-user-select: none;
106     height: 16px;
107 }
108
109 audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display {
110     display: none;
111 }
112
113 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display {
114     display: none;
115 }
116
117 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
118     -webkit-appearance: media-slider;
119     display: -webkit-box;
120     -webkit-box-flex: 1;
121     height: 16px;
122     padding: 0px 2px;
123     background-color: initial;
124     border: initial;
125     color: inherit;
126     margin: initial;
127 }
128
129 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider {
130     background-color: initial;
131     border: initial;
132     color: inherit;
133     margin: initial;
134 }
135
136 audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button {
137     -webkit-appearance: media-seek-back-button;
138     display: -webkit-box;
139     width: 16px;
140     height: 16px;
141     background-color: initial;
142     border: initial;
143     color: inherit;
144 }
145
146 audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button {
147     -webkit-appearance: media-seek-forward-button;
148     display: -webkit-box;
149     width: 16px;
150     height: 16px;
151     background-color: initial;
152     border: initial;
153     color: inherit;
154 }
155
156 audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button {
157     -webkit-appearance: media-enter-fullscreen-button;
158     display: -webkit-box;
159     width: 16px;
160     height: 16px;
161     background-color: initial;
162     border: initial;
163     color: inherit;
164 }
165
166 audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewind-button {
167     display: none;
168     background-color: initial;
169     border: initial;
170     color: inherit;
171 }
172
173 audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-controls-return-to-realtime-button {
174     display: none;
175     background-color: initial;
176     border: initial;
177     color: inherit;
178 }
179
180 audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button {
181     -webkit-appearance: media-toggle-closed-captions-button;
182     display: -webkit-box;
183     width: 16px;
184     height: 16px;
185     background-color: initial;
186     border: initial;
187     color: inherit;
188 }
189
190 audio::-webkit-media-controls-volume-slider-mute-button, video::-webkit-media-controls-volume-slider-mute-button {
191     -webkit-appearance: media-volume-slider-mute-button;
192     display: none;
193     background-color: initial;
194     border: initial;
195     color: inherit;
196 }
197
198 audio::-webkit-media-controls-fullscreen-volume-slider, video::-webkit-media-controls-fullscreen-volume-slider {
199     display: none;
200 }
201
202 audio::-webkit-media-controls-fullscreen-volume-min-button, video::-webkit-media-controls-fullscreen-volume-min-button {
203     display: none;
204 }
205
206 audio::-webkit-media-controls-fullscreen-volume-max-button, video::-webkit-media-controls-fullscreen-volume-max-button {
207     display: none;
208 }
209
210 video::-webkit-media-text-track-container {
211     position: relative;
212     width: 100%;
213     overflow: hidden;
214     padding-bottom: 5px;
215
216     font-size: 22px;
217     font-family: sans-serif;
218     text-align: center;
219     color: rgba(255, 255, 255, 0);
220
221     letter-spacing: normal;
222     word-spacing: normal;
223     text-transform: none;
224     text-indent: 0;
225     text-decoration: none;
226     pointer-events: none;
227     -webkit-user-select: none;
228
229     -webkit-box-flex: 1;
230 }
231
232 video::-webkit-media-text-track-past-nodes {
233     display: inline;
234
235     background-color: rgba(0, 0, 0, 0.8);
236     padding: 2px 2px;
237
238     white-space: pre-wrap;
239 }
240
241 video::-webkit-media-text-track-future-nodes {
242     visibility: hidden;
243     display: inline;
244
245     background-color: rgba(0, 0, 0, 0.8);
246
247     margin-left: -2px;
248     padding: 2px 2px 2px 0px;
249
250     white-space: pre-wrap;
251 }
252
253 video::-webkit-media-text-track-display {
254     position: absolute;
255     color: rgba(255, 255, 255, 1);
256 }