The Tor Browser / file comparison
comparison: toolkit/themes/windows/global/media/videocontrols.css
toolkit/themes/windows/global/media/videocontrols.css
- branch
- TOR_BUG_9701
- changeset 15
- b8a032363ba2
equal
deleted
inserted
replaced
| -1:000000000000 | 0:26e7ed1d09ef |
|---|---|
| 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: 0; /* center vertically with scrubber bar */ | |
| 113 color: rgba(255,255,255,.75); | |
| 114 font-size: 11px; | |
| 115 font-family: Arial, 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 border: none; | |
| 137 background-color: transparent; | |
| 138 min-width: 0; | |
| 139 min-height: 0; | |
| 140 } | |
| 141 | |
| 142 /* .progress-bar is an element inside the <progressmeter> implementation. */ | |
| 143 .bufferBar .progress-bar { | |
| 144 /* | |
| 145 * Note that this is drawn on top of the .backgroundBar. So although this | |
| 146 * has the same background-color specified, the semitransparent | |
| 147 * compositing gives it a different visual appearance. | |
| 148 */ | |
| 149 background-color: rgba(255,255,255,.5); | |
| 150 border-radius: 2.5px; | |
| 151 -moz-appearance: none; | |
| 152 } | |
| 153 | |
| 154 .progressBar .progress-bar { | |
| 155 background-color: white; | |
| 156 border-radius: 2.5px; | |
| 157 -moz-appearance: none; | |
| 158 } | |
| 159 | |
| 160 /* .scale-slider is an element inside the <scale> implementation. */ | |
| 161 .scrubber .scale-slider, | |
| 162 .volumeControl .scale-slider { | |
| 163 /* Hide the default horizontal bar. */ | |
| 164 -moz-appearance: none; | |
| 165 background: none; | |
| 166 margin: 0; | |
| 167 } | |
| 168 | |
| 169 .scrubber .scale-slider { | |
| 170 /* abs(margin-top) + margin-bottom + bar height == timeThumb height */ | |
| 171 margin-top: -10px; | |
| 172 margin-bottom: 10px; | |
| 173 } | |
| 174 | |
| 175 /* .scale-thumb is an element inside the <scale> implementation. */ | |
| 176 .scrubber .scale-thumb, | |
| 177 .volumeControl .scale-thumb { | |
| 178 /* Override the default thumb appearance with a custom image. */ | |
| 179 -moz-appearance: none; | |
| 180 background: transparent; | |
| 181 border: none; | |
| 182 } | |
| 183 | |
| 184 .timeThumb { | |
| 185 background: url(chrome://global/skin/media/scrubberThumb.png) no-repeat center; | |
| 186 min-width: 45px; | |
| 187 min-height: 28px; | |
| 188 -moz-box-pack: center; | |
| 189 } | |
| 190 | |
| 191 .timeThumb[showhours="true"] { | |
| 192 background-image: url(chrome://global/skin/media/scrubberThumbWide.png); | |
| 193 } | |
| 194 | |
| 195 .timeLabel { | |
| 196 color: rgba(255,255,255,.75); | |
| 197 font-size: 10px; | |
| 198 font-family: Arial, sans-serif; | |
| 199 text-shadow: rgba(0,0,0,.3) 0 1px; | |
| 200 padding-top: 5px; | |
| 201 } | |
| 202 | |
| 203 .statusOverlay { | |
| 204 -moz-box-align: center; | |
| 205 -moz-box-pack: center; | |
| 206 background-color: rgba(0,0,0,.55); | |
| 207 } | |
| 208 | |
| 209 .statusIcon { | |
| 210 margin-bottom: 28px; /* same height as .controlBar, to keep icon centered above it */ | |
| 211 width: 36px; | |
| 212 height: 36px; | |
| 213 } | |
| 214 | |
| 215 .statusIcon[type="throbber"] { | |
| 216 background: url(chrome://global/skin/media/throbber.png) no-repeat center; | |
| 217 } | |
| 218 | |
| 219 .statusIcon[type="throbber"][stalled] { | |
| 220 background: url(chrome://global/skin/media/stalled.png) no-repeat center; | |
| 221 } | |
| 222 | |
| 223 .statusIcon[type="error"] { | |
| 224 background: url(chrome://global/skin/media/error.png) no-repeat center; | |
| 225 } | |
| 226 | |
| 227 /* Overlay Play button */ | |
| 228 .clickToPlay { | |
| 229 width: 64px; | |
| 230 height: 64px; | |
| 231 -moz-box-pack: center; | |
| 232 -moz-box-align: center; | |
| 233 opacity: 0.7; | |
| 234 background-image: url(chrome://global/skin/media/clicktoplay-bgtexture.png), | |
| 235 url(chrome://global/skin/media/videoClickToPlayButton.svg); | |
| 236 background-repeat: repeat, no-repeat; | |
| 237 background-position: center, center; | |
| 238 background-size: auto, 64px 64px; | |
| 239 background-color: hsla(0,0%,10%,.5); | |
| 240 } | |
| 241 .clickToPlay:hover { | |
| 242 opacity: 1; | |
| 243 } | |
| 244 | |
| 245 /* Statistics formatting */ | |
| 246 html|*.statsDiv { | |
| 247 position: relative; | |
| 248 } | |
| 249 html|td { | |
| 250 height: 1em; | |
| 251 max-height: 1em; | |
| 252 padding: 0 2px; | |
| 253 } | |
| 254 html|table { | |
| 255 font-family: Helvetica, Arial, sans-serif; | |
| 256 font-size: 11px; | |
| 257 color: white; | |
| 258 text-shadow: | |
| 259 -1px -1px 0 #000, | |
| 260 1px -1px 0 #000, | |
| 261 -1px 1px 0 #000, | |
| 262 1px 1px 0 #000; | |
| 263 min-width: 100%; | |
| 264 background: rgba(68,68,68,.7); | |
| 265 table-layout: fixed; | |
| 266 border-collapse: collapse; | |
| 267 position: absolute; | |
| 268 } | |
| 269 | |
| 270 /* CSS Transitions */ | |
| 271 .clickToPlay { | |
| 272 transition-property: opacity, background-size; | |
| 273 transition-duration: 400ms, 400ms; | |
| 274 } | |
| 275 .clickToPlay[fadeout] { | |
| 276 background-size: auto, 192px 192px; | |
| 277 opacity: 0; | |
| 278 } | |
| 279 .clickToPlay[fadeout][immediate] { | |
| 280 transition-property: opacity, background-size; | |
| 281 transition-duration: 0s, 0s; | |
| 282 } | |
| 283 .controlBar:not([immediate]) { | |
| 284 transition-property: opacity; | |
| 285 transition-duration: 200ms; | |
| 286 } | |
| 287 .controlBar[fadeout] { | |
| 288 opacity: 0; | |
| 289 } | |
| 290 .volumeStack:not([immediate]) { | |
| 291 transition-property: opacity, margin-top; | |
| 292 transition-duration: 200ms, 200ms; | |
| 293 } | |
| 294 .volumeStack[fadeout] { | |
| 295 opacity: 0; | |
| 296 margin-top: 0; | |
| 297 } | |
| 298 .statusOverlay:not([immediate]) { | |
| 299 transition-property: opacity; | |
| 300 transition-duration: 300ms; | |
| 301 transition-delay: 750ms; | |
| 302 } | |
| 303 .statusOverlay[fadeout] { | |
| 304 opacity: 0; | |
| 305 } | |
| 306 | |
| 307 /* Error description formatting */ | |
| 308 .errorLabel { | |
| 309 font-family: Helvetica, Arial, sans-serif; | |
| 310 font-size: 11px; | |
| 311 color: #bbb; | |
| 312 text-shadow: | |
| 313 -1px -1px 0 #000, | |
| 314 1px -1px 0 #000, | |
| 315 -1px 1px 0 #000, | |
| 316 1px 1px 0 #000; | |
| 317 padding: 0 10px; | |
| 318 text-align: center; | |
| 319 } |
