second and final part of syncing both themes with toolkit windows theme changes in...
[themes.git] / EarlyBlue / global / media / videocontrols.css
CommitLineData
dae45075
RK
1/* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
4
0282321d
RK
5@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
6@namespace url("http://www.w3.org/1999/xhtml");
7
8video > xul|videocontrols,
9audio > xul|videocontrols {
10 writing-mode: horizontal-tb;
11 width: 100%;
12 height: 100%;
13 display: inline-block;
14}
15
16.controlsContainer [hidden="true"],
17.controlBar[hidden] {
18 display: none;
19}
20
21.controlBar[size="hidden"] {
22 display: none;
23}
24
25.controlsContainer,
26.progressContainer {
27 position: relative;
28 height: 100%;
29}
30
31.stackItem {
32 position: absolute;
33 left: 0;
34 bottom: 0;
35 width: 100%;
36 height: 100%;
37}
38
39.statusOverlay {
40 display: flex;
41 flex-direction: column;
42 justify-content: center;
43 align-items: center;
44 background-color: rgb(80,80,80);
45}
46
47.controlsOverlay {
48 display: flex;
49 flex-direction: column;
50 justify-content: center;
51 position: relative;
52}
53
54.controlsSpacerStack {
55 display: flex;
56 flex-direction: column;
57 flex-grow: 1;
58 justify-content: center;
59 align-items: center;
60}
61
62.controlsSpacer {
63 background-color: rgba(255,255,255,.4);
64}
29465e59 65
6f25e2c5 66.controlBar {
0282321d
RK
67 position: relative;
68 display: flex;
69 justify-content: center;
70 align-items: center;
71 overflow: hidden;
72 height: 40px;
73 padding: 0 9px;
74 background-color: rgba(26,26,26,.8);
29465e59
RK
75}
76
a6c8d0f5
RK
77.playButton,
78.muteButton,
dae45075 79.closedCaptionButton,
a6c8d0f5 80.fullscreenButton {
0282321d
RK
81 height: 100%;
82 min-height: 30px;
83 min-width: 30px;
84 padding: 6px;
85 border: 0;
86 margin: 0;
a6c8d0f5
RK
87 background-color: transparent;
88 background-repeat: no-repeat;
89 background-position: center;
0282321d
RK
90 background-origin: content-box;
91 background-clip: content-box;
29465e59
RK
92}
93
6f25e2c5 94.playButton {
0282321d
RK
95 background-image: url(chrome://global/skin/media/pauseButton.svg#pause);
96}
97.playButton:hover {
98 background-image: url(chrome://global/skin/media/pauseButton.svg#pause-hover);
99}
100.playButton:hover:active {
101 background-image: url(chrome://global/skin/media/pauseButton.svg#pause-active);
29465e59 102}
f128e38f 103.playButton[paused] {
0282321d
RK
104 background-image: url(chrome://global/skin/media/playButton.svg#play);
105}
106.playButton[paused]:hover {
107 background-image: url(chrome://global/skin/media/playButton.svg#play-hover);
108}
109.playButton[paused]:hover:active {
110 background-image: url(chrome://global/skin/media/playButton.svg#play-active);
29465e59
RK
111}
112
6f25e2c5 113.muteButton {
0282321d
RK
114 background-image: url(chrome://global/skin/media/muteButton.svg#unmute);
115}
116.muteButton:hover {
117 background-image: url(chrome://global/skin/media/muteButton.svg#unmute-hover);
118}
119.muteButton:hover:active {
120 background-image: url(chrome://global/skin/media/muteButton.svg#unmute-active);
6f25e2c5 121}
f128e38f 122.muteButton[muted] {
0282321d 123 background-image: url(chrome://global/skin/media/muteButton.svg#mute);
b310ca09 124}
0282321d
RK
125.muteButton[muted]:hover {
126 background-image: url(chrome://global/skin/media/muteButton.svg#mute-hover);
127}
128.muteButton[muted]:hover:active {
129 background-image: url(chrome://global/skin/media/muteButton.svg#mute-active);
130}
131.muteButton[noAudio],
132.muteButton[noAudio]:hover,
133.muteButton[noAudio]:hover:active {
134 background-image: url(chrome://global/skin/media/muteButton.svg#noaudio);
46dc2718 135}
e6488357
RK
136.muteButton[noAudio] + .volumeStack {
137 display: none;
138}
139
dae45075 140.closedCaptionButton {
0282321d
RK
141 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off);
142}
143.closedCaptionButton:hover {
144 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off-hover);
145}
146.closedCaptionButton:hover:active {
147 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-off-active);
dae45075 148}
dae45075 149.closedCaptionButton[enabled] {
0282321d 150 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc);
dae45075 151}
0282321d
RK
152.closedCaptionButton[enabled]:hover {
153 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-hover);
154}
155.closedCaptionButton[enabled]:hover:active {
156 background-image: url(chrome://global/skin/media/closedCaptionButton.svg#cc-active);
dae45075
RK
157}
158
f128e38f 159.fullscreenButton {
0282321d
RK
160 background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen);
161}
162.fullscreenButton:hover {
163 background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen-hover);
164}
165.fullscreenButton:hover:active {
166 background-image: url(chrome://global/skin/media/fullscreenButton.svg#fullscreen-active);
f128e38f 167}
f128e38f 168.fullscreenButton[fullscreened] {
0282321d
RK
169 background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen);
170}
171.fullscreenButton[fullscreened]:hover {
172 background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen-hover);
173}
174.fullscreenButton[fullscreened]:hover:active {
175 background-image: url(chrome://global/skin/media/fullscreenButton.svg#unfullscreen-active);
f128e38f
RK
176}
177
0282321d
RK
178.controlBarSpacer {
179 flex-grow: 1;
ca710c53
RK
180}
181
0282321d
RK
182.volumeControl::-moz-range-thumb,
183.scrubber::-moz-range-thumb {
184 height: 13px;
185 width: 13px;
186 border: none;
187 border-radius: 50%;
188 background-color: #ffffff;
189 filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.65));
ca710c53
RK
190}
191
0282321d
RK
192.volumeControl::-moz-focus-outer,
193.scrubber::-moz-focus-outer {
194 border: 0;
ca710c53
RK
195}
196
0282321d
RK
197.progressBackgroundBar {
198 display: flex;
199 flex-direction: column;
200 justify-content: center;
201 align-items: center;
ca710c53
RK
202}
203
0282321d
RK
204.progressStack {
205 position: relative;
206 width: 100%;
207 height: 5px;
dae45075
RK
208}
209
0282321d
RK
210.scrubberStack {
211 min-width: 48px;
212 flex-basis: 48px;
213 flex-grow: 2;
214 flex-shrink: 0;
215 margin: 0 9px;
dae45075
RK
216}
217
0282321d
RK
218.volumeStack {
219 max-width: 60px;
220 min-width: 48px;
221 flex-grow: 1;
222 flex-shrink: 0;
223 margin-right: 6px;
224 margin-left: 4px;
dae45075
RK
225}
226
0282321d
RK
227.bufferBar,
228.progressBar,
229.scrubber,
230.volumeBackground,
231.volumeControl {
232 bottom: 0;
233 left: 0;
234 position: absolute;
235 width: 100%;
236 height: 100%;
237 padding: 0;
238 border: 0;
239 border-radius: 2.5px;
240 margin: 0;
241 background: none;
242 background-color: transparent;
dae45075
RK
243}
244
0282321d
RK
245.bufferBar,
246.volumeBackground {
247 background-color: rgba(0,0,0,0.7);
dae45075
RK
248}
249
0282321d
RK
250.bufferBar::-moz-progress-bar,
251.progressBar::-moz-progress-bar,
252.volumeBackground::-moz-meter-bar {
253 height: 100%;
254 padding: 0;
255 margin: 0;
256 border: 0;
257 border-radius: 2.5px;
258 background: none;
441d0294
RK
259}
260
0282321d
RK
261.scrubber:hover::-moz-range-thumb,
262.volumeControl:hover::-moz-range-thumb {
263 background-color: #48a0f7;
441d0294
RK
264}
265
0282321d
RK
266.scrubber:active::-moz-range-thumb,
267.volumeControl:active::-moz-range-thumb {
268 background-color: #2d89e6;
ca710c53
RK
269}
270
0282321d
RK
271.scrubber::-moz-range-track,
272.scrubber::-moz-range-progress {
273 background-color: transparent;
ca710c53
RK
274}
275
0282321d
RK
276.volumeControl::-moz-range-progress,
277.volumeControl::-moz-range-track {
278 height: 5px;
279 border-radius: 2.5px;
9162a092
RK
280}
281
0282321d
RK
282.volumeControl::-moz-range-progress {
283 background-color: #ffffff;
b310ca09
RK
284}
285
0282321d
RK
286.volumeControl::-moz-range-track {
287 background-color: rgba(0,0,0,0.7);
b310ca09
RK
288}
289
0282321d
RK
290
291.bufferBar::-moz-progress-bar {
292 background-color: rgba(255,255,255,0.3);
293 border-radius: 2.5px;
b310ca09
RK
294}
295
0282321d
RK
296.progressBar::-moz-progress-bar {
297 background-color: #00b6f0;
b310ca09
RK
298}
299
0282321d
RK
300.textTrackList {
301 position: absolute;
302 right: 5px;
303 bottom: 45px;
304 max-width: 80%;
305 border: 1px solid #000000;
306 border-radius: 2.5px;
307 padding: 5px 0;
308 vertical-align: middle;
309 font-size: 12px;
310 background-color: #000000;
311 opacity: 0.7;
ca710c53
RK
312}
313
0282321d
RK
314.textTrackList > .textTrackItem {
315 display: block;
316 width: 100%;
317 height: 30px;
318 padding: 2px 10px;
319 border: none;
320 margin: 0;
321 white-space: nowrap;
322 overflow: hidden;
323 text-align: left;
324 text-overflow: ellipsis;
325 color: #ffffff;
326 background-color: transparent;
b310ca09
RK
327}
328
0282321d
RK
329.textTrackList > .textTrackItem:hover {
330 background-color: #444444;
ca710c53
RK
331}
332
0282321d
RK
333.textTrackList > .textTrackItem[on] {
334 color: #48a0f7;
ca710c53
RK
335}
336
0282321d
RK
337.positionLabel,
338.durationLabel {
339 display: none;
ca710c53
RK
340}
341
0282321d
RK
342.positionDurationBox {
343 text-align: center;
344 padding-inline-start: 1px;
345 padding-inline-end: 9px;
346 white-space: nowrap;
347 font: message-box;
348 font-size: 13px;
349 font-size-adjust: 0.55;
350 color: #ffffff;
ca710c53 351}
ca710c53 352
0282321d
RK
353.duration {
354 display: inline-block;
355 white-space: pre;
356 color: #929292;
ca710c53
RK
357}
358
359.statusIcon {
0282321d
RK
360 width: 36px;
361 height: 36px;
362 margin-bottom: 20px;
ca710c53
RK
363}
364
365.statusIcon[type="throbber"] {
0282321d 366 background: url(chrome://global/skin/media/throbber.png) no-repeat center;
ca710c53 367}
0282321d 368
154ee8b3 369.statusIcon[type="throbber"][stalled] {
0282321d 370 background: url(chrome://global/skin/media/stalled.png) no-repeat center;
154ee8b3 371}
0282321d 372
ca710c53 373.statusIcon[type="error"] {
0282321d
RK
374 min-width: 70px;
375 min-height: 60px;
376 background: url(chrome://global/skin/media/error.png) no-repeat center;
377 background-size: contain;
6f25e2c5 378}
4b1ccdb4 379
044b5d49
RK
380/* Overlay Play button */
381.clickToPlay {
0282321d
RK
382 min-width: 48px;
383 min-height: 48px;
384 border-radius: 50%;
385 background-image: url(chrome://global/skin/media/playButton.svg#play);
dae45075 386 background-repeat: no-repeat;
0282321d
RK
387 background-position: 54% 50%;
388 background-size: 40% 40%;
389 background-color: #1a1a1a;
390 opacity: 0.8;
391 position: relative;
392 top: 20px;
044b5d49 393}
0282321d
RK
394
395.controlsSpacerStack:hover > .clickToPlay,
044b5d49 396.clickToPlay:hover {
0282321d 397 opacity: 0.55;
044b5d49
RK
398}
399
0282321d
RK
400.controlsSpacerStack:hover > .clickToPlay[fadeout] {
401 opacity: 0;
1e29db46 402}
0282321d
RK
403
404.controlBar[fullscreen-unavailable] .fullscreenButton {
405 display: none;
1e29db46
RK
406}
407
4b1ccdb4 408/* CSS Transitions */
044b5d49 409.clickToPlay {
0282321d 410 transition-property: transform, opacity;
71a617ff 411 transition-duration: 400ms, 400ms;
044b5d49 412}
0282321d
RK
413
414.controlsSpacer[fadeout] {
415 opacity: 0;
416}
417
044b5d49 418.clickToPlay[fadeout] {
0282321d 419 transform: scale(3);
044b5d49
RK
420 opacity: 0;
421}
0282321d 422
044b5d49 423.clickToPlay[fadeout][immediate] {
71a617ff
RK
424 transition-property: opacity, background-size;
425 transition-duration: 0s, 0s;
044b5d49 426}
4b1ccdb4 427.controlBar:not([immediate]) {
71a617ff
RK
428 transition-property: opacity;
429 transition-duration: 200ms;
4b1ccdb4
RK
430}
431.controlBar[fadeout] {
432 opacity: 0;
433}
434.volumeStack:not([immediate]) {
71a617ff
RK
435 transition-property: opacity, margin-top;
436 transition-duration: 200ms, 200ms;
4b1ccdb4 437}
4b1ccdb4 438.statusOverlay:not([immediate]) {
71a617ff
RK
439 transition-property: opacity;
440 transition-duration: 300ms;
441 transition-delay: 750ms;
4b1ccdb4
RK
442}
443.statusOverlay[fadeout] {
444 opacity: 0;
445}
f128e38f
RK
446
447/* Error description formatting */
448.errorLabel {
f128e38f
RK
449 padding: 0 10px;
450 text-align: center;
0282321d
RK
451 font: message-box;
452 font-size: 14px;
453 color: #ffffff;
f128e38f 454}
dae45075 455
0282321d
RK
456.errorLabel {
457 display: none;
458}
459
460[error="errorAborted"] > [anonid="errorAborted"],
461[error="errorNetwork"] > [anonid="errorNetwork"],
462[error="errorDecode"] > [anonid="errorDecode"],
463[error="errorSrcNotSupported"] > [anonid="errorSrcNotSupported"],
464[error="errorNoSource"] > [anonid="errorNoSource"],
465[error="errorGeneric"] > [anonid="errorGeneric"] {
466 display: inline;
467}