The Tor Browser / file comparison
comparison: b2g/chrome/content/touchcontrols.css
b2g/chrome/content/touchcontrols.css
- branch
- TOR_BUG_3246
- changeset 7
- 129ffea94266
equal
deleted
inserted
replaced
| -1:000000000000 | 0:c877ff9854e1 |
|---|---|
| 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 | |
| 7 /* video controls */ | |
| 8 .controlsOverlay { | |
| 9 -moz-box-pack: center; | |
| 10 -moz-box-align: end; | |
| 11 padding: 20px; | |
| 12 -moz-box-flex: 1; | |
| 13 -moz-box-orient: horizontal; | |
| 14 } | |
| 15 | |
| 16 .controlBar { | |
| 17 -moz-box-flex: 1; | |
| 18 font-size: 16pt; | |
| 19 padding: 10px; | |
| 20 background-color: rgba(50,50,50,0.8); | |
| 21 border-radius: 8px; | |
| 22 width: 100%; | |
| 23 } | |
| 24 | |
| 25 .controlsSpacer { | |
| 26 display: none; | |
| 27 -moz-box-flex: 0; | |
| 28 } | |
| 29 | |
| 30 .fullscreenButton, | |
| 31 .playButton, | |
| 32 .castingButton, | |
| 33 .muteButton { | |
| 34 -moz-appearance: none; | |
| 35 min-height: 42px; | |
| 36 min-width: 42px; | |
| 37 border: none !important; | |
| 38 } | |
| 39 | |
| 40 .fullscreenButton { | |
| 41 background: url("chrome://b2g/content/images/fullscreen-hdpi.png") no-repeat center; | |
| 42 } | |
| 43 | |
| 44 .fullscreenButton[fullscreened="true"] { | |
| 45 background: url("chrome://b2g/content/images/exitfullscreen-hdpi.png") no-repeat center; | |
| 46 } | |
| 47 | |
| 48 .playButton { | |
| 49 background: url("chrome://b2g/content/images/pause-hdpi.png") no-repeat center; | |
| 50 } | |
| 51 | |
| 52 /* | |
| 53 * Normally the button bar has fullscreen spacer play spacer mute, but if | |
| 54 * this is an audio control rather than a video control, the fullscreen button | |
| 55 * is hidden by videocontrols.xml, and that alters the position of the | |
| 56 * play button. This workaround moves it back to center. | |
| 57 */ | |
| 58 .controlBar.audio-only .playButton { | |
| 59 transform: translateX(28px); | |
| 60 } | |
| 61 | |
| 62 .playButton[paused="true"] { | |
| 63 background: url("chrome://b2g/content/images/play-hdpi.png") no-repeat center; | |
| 64 } | |
| 65 | |
| 66 .castingButton { | |
| 67 display: none; | |
| 68 } | |
| 69 | |
| 70 .muteButton { | |
| 71 background: url("chrome://b2g/content/images/mute-hdpi.png") no-repeat center; | |
| 72 } | |
| 73 | |
| 74 .muteButton[muted="true"] { | |
| 75 background: url("chrome://b2g/content/images/unmute-hdpi.png") no-repeat center; | |
| 76 } | |
| 77 | |
| 78 /* bars */ | |
| 79 .scrubberStack { | |
| 80 width: 100%; | |
| 81 min-height: 32px; | |
| 82 max-height: 32px; | |
| 83 padding: 0px 8px; | |
| 84 margin: 0px; | |
| 85 } | |
| 86 | |
| 87 .bufferBar, | |
| 88 .bufferBar .progress-bar, | |
| 89 .progressBar, | |
| 90 .progressBar .progress-bar, | |
| 91 .scrubber, | |
| 92 .scrubber .scale-slider, | |
| 93 .scrubber .scale-thumb { | |
| 94 -moz-appearance: none; | |
| 95 border: none; | |
| 96 padding: 0px; | |
| 97 margin: 0px; | |
| 98 background-color: transparent; | |
| 99 border-radius: 3px; | |
| 100 } | |
| 101 | |
| 102 .bufferBar { | |
| 103 border: 1px solid #5e6166; | |
| 104 } | |
| 105 | |
| 106 .bufferBar, | |
| 107 .progressBar { | |
| 108 margin: 11px 0px 9px 0px; | |
| 109 height: 8px | |
| 110 } | |
| 111 | |
| 112 .bufferBar .progress-bar { | |
| 113 background-color: #5e6166; | |
| 114 } | |
| 115 | |
| 116 .progressBar .progress-bar { | |
| 117 background-color: white; | |
| 118 } | |
| 119 | |
| 120 .scrubber { | |
| 121 margin-left: -16px; | |
| 122 margin-right: -16px; | |
| 123 } | |
| 124 | |
| 125 .scrubber .scale-thumb { | |
| 126 display: -moz-box; | |
| 127 margin: 0px !important; | |
| 128 padding: 0px !important; | |
| 129 background: url("chrome://b2g/content/images/scrubber-hdpi.png") no-repeat; | |
| 130 background-size: 32px 32px; | |
| 131 height: 32px; | |
| 132 width: 32px; | |
| 133 } | |
| 134 | |
| 135 .durationBox { | |
| 136 -moz-box-orient: horizontal; | |
| 137 -moz-box-pack: start; | |
| 138 -moz-box-align: center; | |
| 139 color: white; | |
| 140 font-weight: bold; | |
| 141 padding: 0px 8px; | |
| 142 margin-top: -6px; | |
| 143 } | |
| 144 | |
| 145 .positionLabel { | |
| 146 -moz-box-flex: 1; | |
| 147 } | |
| 148 | |
| 149 .statusOverlay { | |
| 150 -moz-box-align: center; | |
| 151 -moz-box-pack: center; | |
| 152 background-color: rgb(50,50,50); | |
| 153 } | |
| 154 | |
| 155 .statusIcon { | |
| 156 margin-bottom: 28px; | |
| 157 width: 36px; | |
| 158 height: 36px; | |
| 159 } | |
| 160 | |
| 161 .statusIcon[type="throbber"] { | |
| 162 background: url("chrome://b2g/content/images/throbber.png") no-repeat center; | |
| 163 } | |
| 164 | |
| 165 .statusIcon[type="error"] { | |
| 166 background: url("chrome://b2g/content/images/error.png") no-repeat center; | |
| 167 } | |
| 168 | |
| 169 /* CSS Transitions */ | |
| 170 .controlBar:not([immediate]) { | |
| 171 transition-property: opacity; | |
| 172 transition-duration: 200ms; | |
| 173 } | |
| 174 | |
| 175 .controlBar[fadeout] { | |
| 176 opacity: 0; | |
| 177 } | |
| 178 | |
| 179 .statusOverlay:not([immediate]) { | |
| 180 transition-property: opacity; | |
| 181 transition-duration: 300ms; | |
| 182 transition-delay: 750ms; | |
| 183 } | |
| 184 | |
| 185 .statusOverlay[fadeout] { | |
| 186 opacity: 0; | |
| 187 } | |
| 188 | |
| 189 .volumeStack, | |
| 190 .controlBar[firstshow="true"] .fullscreenButton, | |
| 191 .controlBar[firstshow="true"] .muteButton, | |
| 192 .controlBar[firstshow="true"] .scrubberStack, | |
| 193 .controlBar[firstshow="true"] .durationBox, | |
| 194 .timeLabel { | |
| 195 display: none; | |
| 196 } | |
| 197 | |
| 198 /* Error description formatting */ | |
| 199 .errorLabel { | |
| 200 font-family: Helvetica, Arial, sans-serif; | |
| 201 font-size: 11px; | |
| 202 color: #bbb; | |
| 203 text-shadow: | |
| 204 -1px -1px 0 #000, | |
| 205 1px -1px 0 #000, | |
| 206 -1px 1px 0 #000, | |
| 207 1px 1px 0 #000; | |
| 208 padding: 0 10px; | |
| 209 text-align: center; | |
| 210 } |
