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