toolkit/themes/osx/global/media/videocontrols.css@6474c204b198
toolkit/themes/osx/global/media/videocontrols.css
Wed, 31 Dec 2014 06:09:35 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:09:35 +0100
- changeset 0
- 6474c204b198
- permissions
- -rw-r--r--
Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.
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/. */
5 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
6 @namespace html url("http://www.w3.org/1999/xhtml");
8 .controlBar {
9 height: 28px;
10 background-color: rgba(35,31,32,.74);
11 }
13 .playButton,
14 .muteButton,
15 .fullscreenButton {
16 background-color: transparent;
17 background-repeat: no-repeat;
18 background-position: center;
19 -moz-appearance: none; /* Remove the native button appearance and styling */
20 margin: 0;
21 padding: 0;
22 min-height: 28px;
23 min-width: 28px;
24 border: none;
25 opacity: 0.7;
26 }
28 .playButton:hover,
29 .muteButton:hover,
30 .fullscreenButton:hover {
31 opacity: 1;
32 }
34 .playButton:hover:active,
35 .muteButton:hover:active,
36 .fullscreenButton:hover:active {
37 opacity: 0.4;
38 }
40 .playButton {
41 background-image: url(chrome://global/skin/media/pauseButton.png);
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. */
44 }
46 .playButton[paused] {
47 background-image: url(chrome://global/skin/media/playButton.png);
48 }
50 .muteButton {
51 background-image: url(chrome://global/skin/media/muteButton.png);
52 min-width: 33px;
53 }
54 .muteButton[muted] {
55 background-image: url(chrome://global/skin/media/unmuteButton.png);
56 }
58 .muteButton[noAudio] {
59 background-image: url(chrome://global/skin/media/noAudio.png);
60 }
62 .muteButton[noAudio] + .volumeStack {
63 display: none;
64 }
66 .fullscreenButton {
67 background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 16, 16, 0);
68 }
70 .fullscreenButton[fullscreened] {
71 background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 32, 16, 16);
72 }
74 .volumeControl {
75 width: 32px;
76 opacity: 0;
77 }
79 .volumeBackground,
80 .volumeForeground {
81 background-repeat: no-repeat;
82 background-position: center;
83 width: 32px;
84 }
86 .volumeBackground {
87 background-image: url(chrome://global/skin/media/volume-empty.png);
88 }
90 .volumeForeground {
91 background-image: url(chrome://global/skin/media/volume-full.png);
92 background-clip: content-box;
93 }
95 .controlBar[audio-only] > .volumeStack {
96 /* This value is duplicated in the videocontrols.xml adjustControlSize function. */
97 -moz-margin-end: 8px;
98 }
100 .volumeControl .scale-thumb {
101 min-width: 0;
102 opacity: 0;
103 }
105 .durationBox {
106 -moz-box-pack: center;
107 }
109 .durationLabel {
110 margin-left: -22px; /* 1/2 of scrubber thumb width, for overhang. */
111 padding-left: 8px; /* don't bump into the scrubber bar */
112 padding-top: 2px; /* center vertically with scrubber bar */
113 color: rgba(255,255,255,.75);
114 font-size: 11px;
115 font-family: Helvetica, sans-serif;
116 }
118 .positionLabel {
119 display: none;
120 }
122 .backgroundBar {
123 /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */
124 /* margin left/right: 1/2 of scrubber thumb width, for overhang. */
125 margin: 10px 22px;
126 background-color: rgba(255,255,255,.5);
127 border-radius: 2.5px;
128 }
130 .bufferBar,
131 .progressBar {
132 /* margin top/bottom: make bar 8px tall (control height = 28, minus 2 * 10 margin) */
133 /* margin left/right: 1/2 of scrubber thumb width, for overhang. */
134 margin: 10px 22px;
135 -moz-appearance: none;
136 min-width: 0;
137 }
139 /* .progress-bar is an element inside the <progressmeter> implementation. */
140 .bufferBar .progress-bar {
141 /*
142 * Note that this is drawn on top of the .backgroundBar. So although this
143 * has the same background-color specified, the semitransparent
144 * compositing gives it a different visual appearance.
145 */
146 background-color: rgba(255,255,255,.5);
147 border-radius: 2.5px;
148 }
150 .progressBar .progress-bar {
151 background-color: white;
152 border-radius: 2.5px;
153 }
155 /* .scale-slider is an element inside the <scale> implementation. */
156 .scrubber .scale-slider,
157 .volumeControl .scale-slider {
158 /* Hide the default horizontal bar. */
159 -moz-appearance: none;
160 background: none;
161 margin: 0;
162 }
164 .scrubber .scale-slider {
165 /* abs(margin-top) + margin-bottom + bar height == timeThumb height */
166 margin-top: -10px;
167 margin-bottom: 10px;
168 }
169 /* .scale-thumb is an element inside the <scale> implementation. */
170 .scrubber .scale-thumb {
171 /* Override the default thumb appearance with a custom image. */
172 -moz-appearance: none;
173 background: transparent;
174 border: none;
175 }
177 .timeThumb {
178 background: url(chrome://global/skin/media/scrubberThumb.png) no-repeat center;
179 min-width: 45px;
180 min-height: 28px;
181 -moz-box-pack: center;
182 }
184 .timeThumb[showhours="true"] {
185 background-image: url(chrome://global/skin/media/scrubberThumbWide.png);
186 }
188 .timeLabel {
189 color: rgba(255,255,255,.75);
190 font-size: 10px;
191 font-family: Helvetica, sans-serif;
192 text-shadow: rgba(0,0,0,.3) 0 1px;
193 padding-top: 7px;
194 }
196 .statusOverlay {
197 -moz-box-align: center;
198 -moz-box-pack: center;
199 background-color: rgba(0,0,0,.55);
200 }
202 .statusIcon {
203 margin-bottom: 28px; /* same height as .controlBar, to keep icon centered above it */
204 width: 36px;
205 height: 36px;
206 }
208 .statusIcon[type="throbber"] {
209 background: url(chrome://global/skin/media/throbber.png) no-repeat center;
210 }
212 .statusIcon[type="throbber"][stalled] {
213 background: url(chrome://global/skin/media/stalled.png) no-repeat center;
214 }
216 .statusIcon[type="error"] {
217 background: url(chrome://global/skin/media/error.png) no-repeat center;
218 }
220 /* Overlay Play button */
221 .clickToPlay {
222 width: 64px;
223 height: 64px;
224 -moz-box-pack: center;
225 -moz-box-align: center;
226 opacity: 0.7;
227 background-image: url(chrome://global/skin/media/clicktoplay-bgtexture.png),
228 url(chrome://global/skin/media/videoClickToPlayButton.svg);
229 background-repeat: repeat, no-repeat;
230 background-position: center, center;
231 background-size: auto, 64px 64px;
232 background-color: hsla(0,0%,10%,.5);
233 }
234 .clickToPlay:hover {
235 opacity: 1;
236 }
238 /* Statistics formatting */
239 html|*.statsDiv {
240 position: relative;
241 }
242 html|td {
243 height: 1em;
244 max-height: 1em;
245 padding: 0 2px;
246 }
247 html|table {
248 font-family: Helvetica, Arial, sans-serif;
249 font-size: 11px;
250 color: white;
251 text-shadow:
252 -1px -1px 0 #000,
253 1px -1px 0 #000,
254 -1px 1px 0 #000,
255 1px 1px 0 #000;
256 min-width: 100%;
257 background: rgba(68,68,68,.7);
258 table-layout: fixed;
259 border-collapse: collapse;
260 position: absolute;
261 }
263 /* CSS Transitions */
264 .clickToPlay {
265 transition-property: opacity, background-size;
266 transition-duration: 400ms, 400ms;
267 }
268 .clickToPlay[fadeout] {
269 background-size: auto, 192px 192px;
270 opacity: 0;
271 }
272 .clickToPlay[fadeout][immediate] {
273 transition-property: opacity, background-size;
274 transition-duration: 0s, 0s;
275 }
276 .controlBar:not([immediate]) {
277 transition-property: opacity;
278 transition-duration: 200ms;
279 }
280 .controlBar[fadeout] {
281 opacity: 0;
282 }
283 .volumeStack:not([immediate]) {
284 transition-property: opacity, margin-top;
285 transition-duration: 200ms, 200ms;
286 }
287 .volumeStack[fadeout] {
288 opacity: 0;
289 margin-top: 0;
290 }
291 .statusOverlay:not([immediate]) {
292 transition-property: opacity;
293 transition-duration: 300ms;
294 transition-delay: 750ms;
295 }
296 .statusOverlay[fadeout] {
297 opacity: 0;
298 }
300 /* Error description formatting */
301 .errorLabel {
302 font-family: Helvetica, Arial, sans-serif;
303 font-size: 11px;
304 color: #bbb;
305 text-shadow:
306 -1px -1px 0 #000,
307 1px -1px 0 #000,
308 -1px 1px 0 #000,
309 1px 1px 0 #000;
310 padding: 0 10px;
311 text-align: center;
312 }
314 @media (min-resolution: 2dppx) {
315 .playButton {
316 background-image: url(chrome://global/skin/media/pauseButton@2x.png);
317 background-size: 28px 28px;
318 }
319 .playButton[paused] {
320 background-image: url(chrome://global/skin/media/playButton@2x.png);
321 background-size: 28px 28px;
322 }
323 .volumeBackground {
324 background-image: url(chrome://global/skin/media/volume-empty@2x.png);
325 background-size: 32px 16px;
326 }
327 .volumeForeground {
328 background-image: url(chrome://global/skin/media/volume-full@2x.png);
329 background-size: 32px 16px;
330 }
331 .muteButton {
332 background-image: url(chrome://global/skin/media/muteButton@2x.png);
333 background-size: 33px 28px;
334 }
335 .muteButton[muted] {
336 background-image: url(chrome://global/skin/media/unmuteButton@2x.png);
337 background-size: 33px 28px;
338 }
339 .muteButton[noAudio] {
340 background-image: url(chrome://global/skin/media/noAudio@2x.png);
341 background-size: 33px 28px;
342 }
343 .fullscreenButton {
344 background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton@2x.png"), 0, 32, 32, 0);
345 background-size: 16px 16px;
346 }
347 .fullscreenButton[fullscreened] {
348 background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton@2x.png"), 0, 64, 32, 32);
349 background-size: 16px 16px;
350 }
351 .timeThumb {
352 background-image: url(chrome://global/skin/media/scrubberThumb@2x.png);
353 background-size: 33px 28px;
354 }
355 .timeThumb[showhours="true"] {
356 background-image: url(chrome://global/skin/media/scrubberThumbWide@2x.png);
357 background-size: 45px 28px;
358 }
359 }
