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 | ||
ca710c53 RK |
120 | .durationBox { |
121 | -moz-box-pack: center; | |
122 | } | |
123 | ||
124 | .durationLabel { | |
125 | margin-left: -22px; /* 1/2 of scrubber thumb width, for overhang. */ | |
126 | padding-left: 8px; /* don't bump into the scrubber bar */ | |
127 | padding-top: 0px; /* center vertically with scrubber bar */ | |
128 | color: rgba(0,0,0,0.75); | |
1e140ad9 | 129 | font-size: 11px; |
3327253e | 130 | font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; |
ca710c53 RK |
131 | } |
132 | ||
9162a092 RK |
133 | .positionLabel { |
134 | display: none; | |
135 | } | |
136 | ||
b310ca09 | 137 | .backgroundBar { |
ca710c53 RK |
138 | /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */ |
139 | /* margin left/right: 1/2 of scrubber thumb width, for overhang. */ | |
140 | margin: 10px 22px; | |
b310ca09 | 141 | background-color: rgba(0,0,0,0.75); |
a62af8a9 | 142 | border-radius: 2.5px; |
b310ca09 RK |
143 | } |
144 | ||
145 | .bufferBar, .progressBar { | |
ca710c53 RK |
146 | /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */ |
147 | /* margin left/right: 1/2 of scrubber thumb width, for overhang. */ | |
148 | margin: 10px 22px; | |
b310ca09 RK |
149 | border: none; |
150 | background-color: transparent; | |
151 | min-width: 0px; | |
152 | min-height: 0px; | |
153 | } | |
154 | ||
155 | /* .progress-bar is an element inside the <progressmeter> implementation. */ | |
156 | .bufferBar .progress-bar { | |
157 | /* | |
158 | * Note that this is drawn on top of the .backgroundBar. So although this | |
159 | * has the same background-color specified, the semitransparent | |
160 | * compositing gives it a different visual appearance. | |
161 | */ | |
162 | background-color: rgba(255,159,0,0.75); | |
a62af8a9 | 163 | border-radius: 2.5px; |
b310ca09 RK |
164 | -moz-appearance: none; |
165 | } | |
166 | ||
167 | .progressBar .progress-bar { | |
168 | background-color: #008484; | |
a62af8a9 | 169 | border-radius: 2.5px; |
b310ca09 RK |
170 | -moz-appearance: none; |
171 | } | |
172 | ||
173 | /* .scale-slider is an element inside the <scale> implementation. */ | |
ca710c53 | 174 | .scrubber .scale-slider, .volumeControl .scale-slider { |
b310ca09 RK |
175 | /* Hide the default horizontal bar. */ |
176 | background: none; | |
ca710c53 RK |
177 | margin: 0; |
178 | } | |
179 | ||
180 | .scrubber .scale-slider { | |
3327253e RK |
181 | /* abs(margin-top) + margin-bottom + bar height == timeThumb height */ |
182 | margin-top: -10px; | |
183 | margin-bottom: 10px; | |
b310ca09 RK |
184 | } |
185 | ||
186 | /* .scale-thumb is an element inside the <scale> implementation. */ | |
e6488357 RK |
187 | .scrubber .scale-thumb, |
188 | .volumeControl .scale-thumb { | |
b310ca09 | 189 | /* Override the default thumb appearance with a custom image. */ |
ca710c53 | 190 | background: transparent; |
b310ca09 | 191 | border: none !important; |
b310ca09 RK |
192 | } |
193 | ||
ca710c53 RK |
194 | .timeThumb { |
195 | background: url("chrome://global/skin/media/scrubberThumb.png") no-repeat center; | |
196 | min-width: 45px; | |
1e140ad9 | 197 | min-height: 28px; |
ca710c53 RK |
198 | -moz-box-pack: center; |
199 | } | |
200 | ||
201 | .timeThumb[showhours="true"] { | |
a6c8d0f5 | 202 | background-image: url("chrome://global/skin/media/scrubberThumbWide.png"); |
ca710c53 RK |
203 | } |
204 | ||
205 | /* | |
206 | .timeThumb:hover, .timeThumb:active { | |
b310ca09 RK |
207 | background-image: url("chrome://global/skin/media/scrubberThumb-hover.png"); |
208 | } | |
ca710c53 RK |
209 | */ |
210 | ||
211 | .timeLabel { | |
3327253e RK |
212 | color: rgba(0,0,0,0.75); |
213 | font-size: 10px; | |
214 | font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; | |
215 | text-shadow: rgba(255,259,0, 0.3) 0 1px; | |
f777a4f1 | 216 | padding-top: 5px; |
ca710c53 RK |
217 | } |
218 | ||
ca710c53 | 219 | .statusOverlay { |
3327253e RK |
220 | -moz-box-align: center; |
221 | -moz-box-pack: center; | |
222 | background-color: rgba(0,0,0,0.55); | |
ca710c53 RK |
223 | } |
224 | ||
225 | .statusIcon { | |
3327253e RK |
226 | margin-bottom: 28px; /* same height as .controlBar, to keep icon centered above it */ |
227 | width: 36px; | |
228 | height: 36px; | |
ca710c53 RK |
229 | } |
230 | ||
231 | .statusIcon[type="throbber"] { | |
95f333af | 232 | background: url("chrome://communicator/skin/brand/throbber-anim.png") no-repeat center; |
ca710c53 | 233 | } |
154ee8b3 RK |
234 | /* |
235 | .statusIcon[type="throbber"][stalled] { | |
236 | background: url("chrome://global/skin/media/stalled.png") no-repeat center; | |
237 | } | |
238 | */ | |
ca710c53 | 239 | .statusIcon[type="error"] { |
3327253e | 240 | background: url("chrome://global/skin/icons/alert-error.gif") no-repeat center; |
ca710c53 | 241 | } |
4b1ccdb4 | 242 | |
044b5d49 RK |
243 | /* Overlay Play button */ |
244 | .clickToPlay { | |
245 | width: 64px; | |
246 | height: 64px; | |
247 | -moz-box-pack: center; | |
248 | -moz-box-align: center; | |
249 | opacity: 0.7; | |
250 | background-image: url("chrome://global/skin/media/clicktoplay-bgtexture.png"), | |
251 | url("chrome://global/skin/media/videoClickToPlayButton.svg"); | |
252 | background-repeat: repeat, no-repeat; | |
253 | background-position: center, center; | |
254 | background-size: auto, 64px 64px; | |
255 | background-color: hsla(0,0%,10%,.5); | |
256 | } | |
257 | .clickToPlay:hover { | |
258 | opacity: 1; | |
259 | } | |
260 | ||
1e29db46 RK |
261 | /* Statistics formatting */ |
262 | html|*.statsDiv { | |
263 | position: relative; | |
264 | } | |
265 | html|td { | |
266 | height: 1em; | |
267 | max-height: 1em; | |
268 | padding: 0 2px; | |
269 | } | |
270 | html|table { | |
271 | font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; | |
272 | font-size: 11px; | |
273 | color: white; | |
274 | text-shadow: | |
275 | -1px -1px 0 #000, | |
276 | 1px -1px 0 #000, | |
277 | -1px 1px 0 #000, | |
278 | 1px 1px 0 #000; | |
279 | min-width: 100%; | |
280 | background: rgba(68,68,111,.7); | |
281 | table-layout: fixed; | |
282 | border-collapse: collapse; | |
283 | position: absolute; | |
284 | } | |
285 | ||
4b1ccdb4 | 286 | /* CSS Transitions */ |
044b5d49 | 287 | .clickToPlay { |
71a617ff RK |
288 | transition-property: opacity, background-size; |
289 | transition-duration: 400ms, 400ms; | |
044b5d49 RK |
290 | } |
291 | .clickToPlay[fadeout] { | |
292 | background-size: auto, 192px 192px; | |
293 | opacity: 0; | |
294 | } | |
295 | .clickToPlay[fadeout][immediate] { | |
71a617ff RK |
296 | transition-property: opacity, background-size; |
297 | transition-duration: 0s, 0s; | |
044b5d49 | 298 | } |
4b1ccdb4 | 299 | .controlBar:not([immediate]) { |
71a617ff RK |
300 | transition-property: opacity; |
301 | transition-duration: 200ms; | |
4b1ccdb4 RK |
302 | } |
303 | .controlBar[fadeout] { | |
304 | opacity: 0; | |
305 | } | |
306 | .volumeStack:not([immediate]) { | |
71a617ff RK |
307 | transition-property: opacity, margin-top; |
308 | transition-duration: 200ms, 200ms; | |
4b1ccdb4 RK |
309 | } |
310 | .volumeStack[fadeout] { | |
311 | opacity: 0; | |
312 | margin-top: 0; | |
313 | } | |
314 | .statusOverlay:not([immediate]) { | |
71a617ff RK |
315 | transition-property: opacity; |
316 | transition-duration: 300ms; | |
317 | transition-delay: 750ms; | |
4b1ccdb4 RK |
318 | } |
319 | .statusOverlay[fadeout] { | |
320 | opacity: 0; | |
321 | } | |
f128e38f RK |
322 | |
323 | /* Error description formatting */ | |
324 | .errorLabel { | |
325 | font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif; | |
326 | font-size: 11px; | |
327 | color: #E7ADE7; | |
328 | text-shadow: | |
329 | -1px -1px 0 #000, | |
330 | 1px -1px 0 #000, | |
331 | -1px 1px 0 #000, | |
332 | 1px 1px 0 #000; | |
333 | padding: 0 10px; | |
334 | text-align: center; | |
335 | } |