Commit | Line | Data |
---|---|---|
29465e59 | 1 | @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); |
1e29db46 | 2 | @namespace html url("http://www.w3.org/1999/xhtml"); |
29465e59 | 3 | |
6f25e2c5 | 4 | .controlBar { |
b310ca09 | 5 | height: 28px; |
6f25e2c5 | 6 | background-color: rgba(156,156,255,0.75); |
29465e59 RK |
7 | } |
8 | ||
a6c8d0f5 RK |
9 | .playButton, |
10 | .muteButton, | |
11 | .fullscreenButton { | |
12 | background-color: transparent; | |
13 | background-repeat: no-repeat; | |
14 | background-position: center; | |
6f25e2c5 RK |
15 | margin: 0px; |
16 | padding: 0px; | |
17 | border: none; | |
b310ca09 | 18 | min-height: 28px; |
b310ca09 RK |
19 | min-width: 28px; |
20 | } | |
a6c8d0f5 RK |
21 | |
22 | .playButton:hover, | |
23 | .muteButton:hover, | |
24 | .fullscreenButton:hover { | |
1880ed93 RK |
25 | background-color: rgba(255,207,0,0.75); |
26 | } | |
a6c8d0f5 RK |
27 | |
28 | .playButton:hover:active, | |
29 | .muteButton:hover:active, | |
30 | .fullscreenButton:hover:active { | |
31 | background-color: rgba(255,159,0,0.75); | |
32 | } | |
33 | ||
024ec655 | 34 | .playButton:-moz-focusring > .button-box, |
a6c8d0f5 RK |
35 | .muteButton:-moz-focusring > .button-box, |
36 | .fullscreenButton:-moz-focusring > .button-box { | |
1880ed93 | 37 | border: 1px dotted rgba(0,0,0,0.75); |
29465e59 RK |
38 | } |
39 | ||
6f25e2c5 | 40 | .playButton { |
1880ed93 | 41 | background-image: url("chrome://global/skin/media/pauseButton.png"); |
a6c8d0f5 RK |
42 | margin-right: -22px; /* 1/2 of scrubber thumb width, for overhang. */ |
43 | position: relative; /* Trick to work around negative margin interfering with clicking on the button. */ | |
6f25e2c5 | 44 | } |
a6c8d0f5 | 45 | |
6f25e2c5 | 46 | .playButton:hover { |
1880ed93 | 47 | background-image: url("chrome://global/skin/media/pauseButton-hover.png"); |
29465e59 | 48 | } |
a6c8d0f5 | 49 | |
f128e38f | 50 | .playButton[paused] { |
1880ed93 | 51 | background-image: url("chrome://global/skin/media/playButton.png"); |
6f25e2c5 | 52 | } |
a6c8d0f5 | 53 | |
f128e38f | 54 | .playButton[paused]:hover { |
1880ed93 | 55 | background-image: url("chrome://global/skin/media/playButton-hover.png"); |
29465e59 RK |
56 | } |
57 | ||
6f25e2c5 | 58 | .muteButton { |
1880ed93 | 59 | background-image: url("chrome://global/skin/media/muteButton.png"); |
a6c8d0f5 | 60 | min-width: 33px; |
6f25e2c5 | 61 | } |
a6c8d0f5 | 62 | |
6f25e2c5 | 63 | .muteButton:hover { |
1880ed93 | 64 | background-image: url("chrome://global/skin/media/muteButton-hover.png"); |
6f25e2c5 | 65 | } |
a6c8d0f5 | 66 | |
f128e38f | 67 | .muteButton[muted] { |
1880ed93 | 68 | background-image: url("chrome://global/skin/media/unmuteButton.png"); |
6f25e2c5 | 69 | } |
a6c8d0f5 | 70 | |
f128e38f | 71 | .muteButton[muted]:hover { |
1880ed93 | 72 | background-image: url("chrome://global/skin/media/unmuteButton-hover.png"); |
6f25e2c5 | 73 | } |
b310ca09 | 74 | |
46dc2718 RK |
75 | .muteButton[noAudio] { |
76 | background-image: url("chrome://global/skin/media/noAudio.png"); | |
77 | } | |
78 | ||
e6488357 RK |
79 | .muteButton[noAudio] + .volumeStack { |
80 | display: none; | |
81 | } | |
82 | ||
f128e38f | 83 | .fullscreenButton { |
a6c8d0f5 | 84 | background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 16, 16, 0); |
f128e38f RK |
85 | } |
86 | ||
87 | .fullscreenButton:hover { | |
f777a4f1 | 88 | background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 16, 16, 32, 0); |
f128e38f RK |
89 | } |
90 | ||
91 | .fullscreenButton[fullscreened] { | |
f777a4f1 | 92 | background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 32, 16, 16); |
f128e38f RK |
93 | } |
94 | ||
95 | .fullscreenButton[fullscreened]:hover { | |
f777a4f1 | 96 | background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 16, 32, 32, 16); |
f128e38f RK |
97 | } |
98 | ||
ca710c53 | 99 | .volumeControl { |
e6488357 RK |
100 | width: 32px; |
101 | opacity: 0; | |
ca710c53 RK |
102 | } |
103 | ||
e6488357 RK |
104 | .volumeBackground, |
105 | .volumeForeground { | |
106 | background-repeat: no-repeat; | |
107 | background-position: center; | |
108 | width: 32px; | |
ca710c53 | 109 | } |
e6488357 RK |
110 | |
111 | .volumeBackground { | |
112 | background-image: url("chrome://global/skin/media/volume-empty.png"); | |
ca710c53 RK |
113 | } |
114 | ||
e6488357 RK |
115 | .volumeForeground { |
116 | background-image: url("chrome://global/skin/media/volume-full.png"); | |
117 | background-clip: content-box; | |
ca710c53 RK |
118 | } |
119 | ||
441d0294 RK |
120 | .controlBar[fullscreen-unavailable] > .volumeStack { |
121 | /* This value is duplicated in the videocontrols.xml adjustControlSize function. */ | |
122 | -moz-margin-end: 8px; | |
123 | } | |
124 | ||
125 | .volumeControl .scale-thumb { | |
126 | min-width: 0; | |
127 | opacity: 0; | |
128 | } | |
129 | ||
ca710c53 RK |
130 | .durationBox { |
131 | -moz-box-pack: center; | |
132 | } | |
133 | ||
134 | .durationLabel { | |
135 | margin-left: -22px; /* 1/2 of scrubber thumb width, for overhang. */ | |
136 | padding-left: 8px; /* don't bump into the scrubber bar */ | |
137 | padding-top: 0px; /* center vertically with scrubber bar */ | |
138 | color: rgba(0,0,0,0.75); | |
1e140ad9 | 139 | font-size: 11px; |
3327253e | 140 | font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; |
ca710c53 RK |
141 | } |
142 | ||
9162a092 RK |
143 | .positionLabel { |
144 | display: none; | |
145 | } | |
146 | ||
b310ca09 | 147 | .backgroundBar { |
ca710c53 RK |
148 | /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */ |
149 | /* margin left/right: 1/2 of scrubber thumb width, for overhang. */ | |
150 | margin: 10px 22px; | |
b310ca09 | 151 | background-color: rgba(0,0,0,0.75); |
a62af8a9 | 152 | border-radius: 2.5px; |
b310ca09 RK |
153 | } |
154 | ||
155 | .bufferBar, .progressBar { | |
ca710c53 RK |
156 | /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */ |
157 | /* margin left/right: 1/2 of scrubber thumb width, for overhang. */ | |
158 | margin: 10px 22px; | |
b310ca09 RK |
159 | border: none; |
160 | background-color: transparent; | |
161 | min-width: 0px; | |
162 | min-height: 0px; | |
163 | } | |
164 | ||
165 | /* .progress-bar is an element inside the <progressmeter> implementation. */ | |
166 | .bufferBar .progress-bar { | |
167 | /* | |
168 | * Note that this is drawn on top of the .backgroundBar. So although this | |
169 | * has the same background-color specified, the semitransparent | |
170 | * compositing gives it a different visual appearance. | |
171 | */ | |
172 | background-color: rgba(255,159,0,0.75); | |
a62af8a9 | 173 | border-radius: 2.5px; |
b310ca09 RK |
174 | -moz-appearance: none; |
175 | } | |
176 | ||
177 | .progressBar .progress-bar { | |
178 | background-color: #008484; | |
a62af8a9 | 179 | border-radius: 2.5px; |
b310ca09 RK |
180 | -moz-appearance: none; |
181 | } | |
182 | ||
183 | /* .scale-slider is an element inside the <scale> implementation. */ | |
ca710c53 | 184 | .scrubber .scale-slider, .volumeControl .scale-slider { |
b310ca09 RK |
185 | /* Hide the default horizontal bar. */ |
186 | background: none; | |
ca710c53 RK |
187 | margin: 0; |
188 | } | |
189 | ||
190 | .scrubber .scale-slider { | |
3327253e RK |
191 | /* abs(margin-top) + margin-bottom + bar height == timeThumb height */ |
192 | margin-top: -10px; | |
193 | margin-bottom: 10px; | |
b310ca09 RK |
194 | } |
195 | ||
196 | /* .scale-thumb is an element inside the <scale> implementation. */ | |
e6488357 RK |
197 | .scrubber .scale-thumb, |
198 | .volumeControl .scale-thumb { | |
b310ca09 | 199 | /* Override the default thumb appearance with a custom image. */ |
ca710c53 | 200 | background: transparent; |
b310ca09 | 201 | border: none !important; |
b310ca09 RK |
202 | } |
203 | ||
ca710c53 RK |
204 | .timeThumb { |
205 | background: url("chrome://global/skin/media/scrubberThumb.png") no-repeat center; | |
206 | min-width: 45px; | |
1e140ad9 | 207 | min-height: 28px; |
ca710c53 RK |
208 | -moz-box-pack: center; |
209 | } | |
210 | ||
211 | .timeThumb[showhours="true"] { | |
a6c8d0f5 | 212 | background-image: url("chrome://global/skin/media/scrubberThumbWide.png"); |
ca710c53 RK |
213 | } |
214 | ||
215 | /* | |
216 | .timeThumb:hover, .timeThumb:active { | |
b310ca09 RK |
217 | background-image: url("chrome://global/skin/media/scrubberThumb-hover.png"); |
218 | } | |
ca710c53 RK |
219 | */ |
220 | ||
221 | .timeLabel { | |
3327253e RK |
222 | color: rgba(0,0,0,0.75); |
223 | font-size: 10px; | |
224 | font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; | |
225 | text-shadow: rgba(255,259,0, 0.3) 0 1px; | |
f777a4f1 | 226 | padding-top: 5px; |
ca710c53 RK |
227 | } |
228 | ||
ca710c53 | 229 | .statusOverlay { |
3327253e RK |
230 | -moz-box-align: center; |
231 | -moz-box-pack: center; | |
232 | background-color: rgba(0,0,0,0.55); | |
ca710c53 RK |
233 | } |
234 | ||
235 | .statusIcon { | |
3327253e RK |
236 | margin-bottom: 28px; /* same height as .controlBar, to keep icon centered above it */ |
237 | width: 36px; | |
238 | height: 36px; | |
ca710c53 RK |
239 | } |
240 | ||
241 | .statusIcon[type="throbber"] { | |
95f333af | 242 | background: url("chrome://communicator/skin/brand/throbber-anim.png") no-repeat center; |
ca710c53 | 243 | } |
154ee8b3 RK |
244 | /* |
245 | .statusIcon[type="throbber"][stalled] { | |
246 | background: url("chrome://global/skin/media/stalled.png") no-repeat center; | |
247 | } | |
248 | */ | |
ca710c53 | 249 | .statusIcon[type="error"] { |
3327253e | 250 | background: url("chrome://global/skin/icons/alert-error.gif") no-repeat center; |
ca710c53 | 251 | } |
4b1ccdb4 | 252 | |
044b5d49 RK |
253 | /* Overlay Play button */ |
254 | .clickToPlay { | |
255 | width: 64px; | |
256 | height: 64px; | |
257 | -moz-box-pack: center; | |
258 | -moz-box-align: center; | |
259 | opacity: 0.7; | |
260 | background-image: url("chrome://global/skin/media/clicktoplay-bgtexture.png"), | |
261 | url("chrome://global/skin/media/videoClickToPlayButton.svg"); | |
262 | background-repeat: repeat, no-repeat; | |
263 | background-position: center, center; | |
264 | background-size: auto, 64px 64px; | |
265 | background-color: hsla(0,0%,10%,.5); | |
266 | } | |
267 | .clickToPlay:hover { | |
268 | opacity: 1; | |
269 | } | |
270 | ||
1e29db46 RK |
271 | /* Statistics formatting */ |
272 | html|*.statsDiv { | |
273 | position: relative; | |
274 | } | |
275 | html|td { | |
276 | height: 1em; | |
277 | max-height: 1em; | |
278 | padding: 0 2px; | |
279 | } | |
280 | html|table { | |
281 | font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; | |
282 | font-size: 11px; | |
283 | color: white; | |
284 | text-shadow: | |
285 | -1px -1px 0 #000, | |
286 | 1px -1px 0 #000, | |
287 | -1px 1px 0 #000, | |
288 | 1px 1px 0 #000; | |
289 | min-width: 100%; | |
290 | background: rgba(68,68,111,.7); | |
291 | table-layout: fixed; | |
292 | border-collapse: collapse; | |
293 | position: absolute; | |
294 | } | |
295 | ||
4b1ccdb4 | 296 | /* CSS Transitions */ |
044b5d49 | 297 | .clickToPlay { |
71a617ff RK |
298 | transition-property: opacity, background-size; |
299 | transition-duration: 400ms, 400ms; | |
044b5d49 RK |
300 | } |
301 | .clickToPlay[fadeout] { | |
302 | background-size: auto, 192px 192px; | |
303 | opacity: 0; | |
304 | } | |
305 | .clickToPlay[fadeout][immediate] { | |
71a617ff RK |
306 | transition-property: opacity, background-size; |
307 | transition-duration: 0s, 0s; | |
044b5d49 | 308 | } |
4b1ccdb4 | 309 | .controlBar:not([immediate]) { |
71a617ff RK |
310 | transition-property: opacity; |
311 | transition-duration: 200ms; | |
4b1ccdb4 RK |
312 | } |
313 | .controlBar[fadeout] { | |
314 | opacity: 0; | |
315 | } | |
316 | .volumeStack:not([immediate]) { | |
71a617ff RK |
317 | transition-property: opacity, margin-top; |
318 | transition-duration: 200ms, 200ms; | |
4b1ccdb4 RK |
319 | } |
320 | .volumeStack[fadeout] { | |
321 | opacity: 0; | |
322 | margin-top: 0; | |
323 | } | |
324 | .statusOverlay:not([immediate]) { | |
71a617ff RK |
325 | transition-property: opacity; |
326 | transition-duration: 300ms; | |
327 | transition-delay: 750ms; | |
4b1ccdb4 RK |
328 | } |
329 | .statusOverlay[fadeout] { | |
330 | opacity: 0; | |
331 | } | |
f128e38f RK |
332 | |
333 | /* Error description formatting */ | |
334 | .errorLabel { | |
335 | font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; | |
336 | font-size: 11px; | |
337 | color: #E7ADE7; | |
338 | text-shadow: | |
339 | -1px -1px 0 #000, | |
340 | 1px -1px 0 #000, | |
341 | -1px 1px 0 #000, | |
342 | 1px 1px 0 #000; | |
343 | padding: 0 10px; | |
344 | text-align: center; | |
345 | } |