The Tor Browser / file comparison
comparison: toolkit/themes/osx/global/media/videocontrols.css
toolkit/themes/osx/global/media/videocontrols.css
- changeset 0
- 6474c204b198
equal
deleted
inserted
replaced
| -1:000000000000 | 0:d610e7a04410 |
|---|---|
| 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 url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); | |
| 6 @namespace html url("http://www.w3.org/1999/xhtml"); | |
| 7 | |
| 8 .controlBar { | |
| 9 height: 28px; | |
| 10 background-color: rgba(35,31,32,.74); | |
| 11 } | |
| 12 | |
| 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 } | |
| 27 | |
| 28 .playButton:hover, | |
| 29 .muteButton:hover, | |
| 30 .fullscreenButton:hover { | |
| 31 opacity: 1; | |
| 32 } | |
| 33 | |
| 34 .playButton:hover:active, | |
| 35 .muteButton:hover:active, | |
| 36 .fullscreenButton:hover:active { | |
| 37 opacity: 0.4; | |
| 38 } | |
| 39 | |
| 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 } | |
| 45 | |
| 46 .playButton[paused] { | |
| 47 background-image: url(chrome://global/skin/media/playButton.png); | |
| 48 } | |
| 49 | |
| 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 } | |
| 57 | |
| 58 .muteButton[noAudio] { | |
| 59 background-image: url(chrome://global/skin/media/noAudio.png); | |
| 60 } | |
| 61 | |
| 62 .muteButton[noAudio] + .volumeStack { | |
| 63 display: none; | |
| 64 } | |
| 65 | |
| 66 .fullscreenButton { | |
| 67 background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 16, 16, 0); | |
| 68 } | |
| 69 | |
| 70 .fullscreenButton[fullscreened] { | |
| 71 background-image: -moz-image-rect(url("chrome://global/skin/media/fullscreenButton.png"), 0, 32, 16, 16); | |
| 72 } | |
| 73 | |
| 74 .volumeControl { | |
| 75 width: 32px; | |
| 76 opacity: 0; | |
| 77 } | |
| 78 | |
| 79 .volumeBackground, | |
| 80 .volumeForeground { | |
| 81 background-repeat: no-repeat; | |
| 82 background-position: center; | |
| 83 width: 32px; | |
| 84 } | |
| 85 | |
| 86 .volumeBackground { | |
| 87 background-image: url(chrome://global/skin/media/volume-empty.png); | |
| 88 } | |
| 89 | |
| 90 .volumeForeground { | |
| 91 background-image: url(chrome://global/skin/media/volume-full.png); | |
| 92 background-clip: content-box; | |
| 93 } | |
| 94 | |
| 95 .controlBar[audio-only] > .volumeStack { | |
| 96 /* This value is duplicated in the videocontrols.xml adjustControlSize function. */ | |
| 97 -moz-margin-end: 8px; | |
| 98 } | |
| 99 | |
| 100 .volumeControl .scale-thumb { | |
| 101 min-width: 0; | |
| 102 opacity: 0; | |
| 103 } | |
| 104 | |
| 105 .durationBox { | |
| 106 -moz-box-pack: center; | |
| 107 } | |
| 108 | |
| 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 } | |
| 117 | |
| 118 .positionLabel { | |
| 119 display: none; | |
| 120 } | |
| 121 | |
| 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 } | |
| 129 | |
| 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 } | |
| 138 | |
| 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 } | |
| 149 | |
| 150 .progressBar .progress-bar { | |
| 151 background-color: white; | |
| 152 border-radius: 2.5px; | |
| 153 } | |
| 154 | |
| 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 } | |
| 163 | |
| 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 } | |
| 176 | |
| 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 } | |
| 183 | |
| 184 .timeThumb[showhours="true"] { | |
| 185 background-image: url(chrome://global/skin/media/scrubberThumbWide.png); | |
| 186 } | |
| 187 | |
| 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 } | |
| 195 | |
| 196 .statusOverlay { | |
| 197 -moz-box-align: center; | |
| 198 -moz-box-pack: center; | |
| 199 background-color: rgba(0,0,0,.55); | |
| 200 } | |
| 201 | |
| 202 .statusIcon { | |
| 203 margin-bottom: 28px; /* same height as .controlBar, to keep icon centered above it */ | |
| 204 width: 36px; | |
| 205 height: 36px; | |
| 206 } | |
| 207 | |
| 208 .statusIcon[type="throbber"] { | |
| 209 background: url(chrome://global/skin/media/throbber.png) no-repeat center; | |
| 210 } | |
| 211 | |
| 212 .statusIcon[type="throbber"][stalled] { | |
| 213 background: url(chrome://global/skin/media/stalled.png) no-repeat center; | |
| 214 } | |
| 215 | |
| 216 .statusIcon[type="error"] { | |
| 217 background: url(chrome://global/skin/media/error.png) no-repeat center; | |
| 218 } | |
| 219 | |
| 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 } | |
| 237 | |
| 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 } | |
| 262 | |
| 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 } | |
| 299 | |
| 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 } | |
| 313 | |
| 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 } |
