|
1 /* |
|
2 * Copyright (C) 2009, 2010 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 /* alternate media controls - Extend mediaControls.css */ |
|
26 |
|
27 audio { |
|
28 width: 200px; |
|
29 height: 25px; |
|
30 } |
|
31 |
|
32 audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel { |
|
33 /* In mediaControls.css */ |
|
34 -webkit-appearance: media-controls-background; |
|
35 overflow: visible; |
|
36 height: 25px; |
|
37 } |
|
38 |
|
39 video:-webkit-full-page-media::-webkit-media-controls-panel { |
|
40 bottom: -25px; |
|
41 } |
|
42 |
|
43 audio::-webkit-media-controls-mute-button, video::-webkit-media-controls-mute-button { |
|
44 -webkit-box-ordinal-group: 2; /* Before the fullscreen button */ |
|
45 |
|
46 width: 14px; |
|
47 height: 12px; |
|
48 margin-left: 2px; |
|
49 margin-right: 9px; |
|
50 } |
|
51 |
|
52 audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button { |
|
53 width: 16px; |
|
54 height: 16px; |
|
55 margin-left: 6px; |
|
56 margin-right: 1px; |
|
57 } |
|
58 |
|
59 audio::-webkit-media-controls-timeline-container, video::-webkit-media-controls-timeline-container { |
|
60 -webkit-appearance: none; |
|
61 -webkit-box-orient: horizontal; |
|
62 -webkit-box-align: center; |
|
63 -webkit-box-pack: center; |
|
64 -webkit-box-flex: 1; |
|
65 text-align: right; |
|
66 height: auto; |
|
67 } |
|
68 |
|
69 audio::-webkit-media-controls-current-time-display, video::-webkit-media-controls-current-time-display { |
|
70 -webkit-user-select: none; |
|
71 display: -webkit-box; |
|
72 -webkit-box-flex: 0; |
|
73 -webkit-box-pack: center; |
|
74 -webkit-box-align: center; |
|
75 cursor: default; |
|
76 font: -webkit-small-control; |
|
77 font-size: 9px; |
|
78 overflow: hidden; |
|
79 width: 45px; |
|
80 color: white; |
|
81 text-shadow: black 0px 1px 1px; |
|
82 |
|
83 letter-spacing: normal; |
|
84 word-spacing: normal; |
|
85 line-height: normal; |
|
86 text-transform: none; |
|
87 text-indent: 0; |
|
88 text-decoration: none; |
|
89 } |
|
90 |
|
91 audio::-webkit-media-controls-time-remaining-display, video::-webkit-media-controls-time-remaining-display { |
|
92 -webkit-user-select: none; |
|
93 display: -webkit-box; |
|
94 -webkit-box-flex: 0; |
|
95 -webkit-box-pack: center; |
|
96 -webkit-box-align: center; |
|
97 cursor: default; |
|
98 font: -webkit-small-control; |
|
99 font-size: 9px; |
|
100 overflow: hidden; |
|
101 width: 45px; |
|
102 color: white; |
|
103 text-shadow: black 0px 1px 1px; |
|
104 |
|
105 letter-spacing: normal; |
|
106 word-spacing: normal; |
|
107 line-height: normal; |
|
108 text-transform: none; |
|
109 text-indent: 0; |
|
110 text-decoration: none; |
|
111 } |
|
112 |
|
113 audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline { |
|
114 display: -webkit-box; |
|
115 -webkit-box-flex: 1; |
|
116 height: 13px; |
|
117 padding: 0px; |
|
118 margin: 0px; |
|
119 margin-top: 2px; |
|
120 } |
|
121 |
|
122 audio::-webkit-media-controls-seek-back-button, video::-webkit-media-controls-seek-back-button { |
|
123 display: none; |
|
124 width: 0px; |
|
125 } |
|
126 |
|
127 audio::-webkit-media-controls-seek-forward-button, video::-webkit-media-controls-seek-forward-button { |
|
128 display: none; |
|
129 width: 0px; |
|
130 } |
|
131 |
|
132 audio::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-fullscreen-button { |
|
133 width: 16px; |
|
134 height: 16px; |
|
135 margin-left: 7px; |
|
136 margin-right: 7px; |
|
137 -webkit-box-ordinal-group: 4; /* At the very end */ |
|
138 } |
|
139 |
|
140 audio::-webkit-media-controls-rewind-button, video::-webkit-media-controls-rewind-button { |
|
141 display: -webkit-box; |
|
142 -webkit-appearance: media-rewind-button; |
|
143 width: 18px; |
|
144 height: 18px; |
|
145 margin-bottom: 1px; |
|
146 margin-left: 6px; |
|
147 margin-right: 2px; |
|
148 } |
|
149 |
|
150 audio::-webkit-media-controls-return-to-realtime-button, video::-webkit-media-controls-return-to-realtime-button { |
|
151 display: none; |
|
152 -webkit-appearance: media-return-to-realtime-button; |
|
153 width: 16px; |
|
154 height: 11px; |
|
155 margin-left: 6px; |
|
156 margin-right: 2px; |
|
157 } |
|
158 |
|
159 audio::-webkit-media-controls-status-display, video::-webkit-media-controls-status-display { |
|
160 -webkit-user-select: none; |
|
161 cursor: default; |
|
162 display: -webkit-box; |
|
163 -webkit-box-flex: 1; |
|
164 font: -webkit-small-control; |
|
165 color: white; |
|
166 font-size: 10px; |
|
167 line-height: 13px; |
|
168 overflow: hidden; |
|
169 text-shadow: black 0px 1px 1px; |
|
170 margin-left: 10px; |
|
171 margin-right: 10px; |
|
172 |
|
173 letter-spacing: normal; |
|
174 word-spacing: normal; |
|
175 line-height: normal; |
|
176 text-transform: none; |
|
177 text-indent: 0; |
|
178 text-decoration: none; |
|
179 } |
|
180 |
|
181 audio::-webkit-media-controls-toggle-closed-captions-button, video::-webkit-media-controls-toggle-closed-captions-button { |
|
182 -webkit-appearance: media-toggle-closed-captions-button; |
|
183 display: -webkit-box; |
|
184 width: 16px; |
|
185 height: 16px; |
|
186 margin-left: 7px; |
|
187 margin-right: 7px; |
|
188 -webkit-box-ordinal-group: 3; /* between mute and fullscreen */ |
|
189 } |
|
190 |
|
191 audio::-webkit-media-controls-volume-slider-container, video::-webkit-media-controls-volume-slider-container { |
|
192 -webkit-appearance: media-volume-slider-container; |
|
193 position: absolute; |
|
194 |
|
195 top: 0; |
|
196 left: 0; |
|
197 |
|
198 width: 22px; |
|
199 height: 114px; |
|
200 } |
|
201 |
|
202 audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider { |
|
203 -webkit-appearance: media-volume-slider; |
|
204 display: inline; |
|
205 position: absolute; |
|
206 |
|
207 top: 7px; |
|
208 left: 6px; |
|
209 |
|
210 width: 10px; |
|
211 height: 80px; |
|
212 } |
|
213 |
|
214 audio::-webkit-media-controls-volume-slider-mute-button, video::-webkit-media-controls-volume-slider-mute-button { |
|
215 -webkit-appearance: media-volume-slider-mute-button; |
|
216 display: inline; |
|
217 position: absolute; |
|
218 |
|
219 bottom: 5px; |
|
220 left: 4px; |
|
221 |
|
222 width: 14px; |
|
223 height: 12px; |
|
224 } |