Wed, 31 Dec 2014 06:55:50 +0100
Added tag UPSTREAM_283F7C6 for changeset ca08bd8f51b2
michael@0 | 1 | /* This Source Code Form is subject to the terms of the Mozilla Public |
michael@0 | 2 | * License, v. 2.0. If a copy of the MPL was not distributed with this |
michael@0 | 3 | * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ |
michael@0 | 4 | |
michael@0 | 5 | html, |
michael@0 | 6 | body { |
michael@0 | 7 | margin: 0; |
michael@0 | 8 | padding: 0; |
michael@0 | 9 | background-color: #ced7de; |
michael@0 | 10 | -moz-user-select: none; |
michael@0 | 11 | font-family: "Segoe UI", sans-serif; |
michael@0 | 12 | -moz-text-size-adjust: none; |
michael@0 | 13 | } |
michael@0 | 14 | |
michael@0 | 15 | .toolbar { |
michael@0 | 16 | width: 100%; |
michael@0 | 17 | height: 3em; |
michael@0 | 18 | position: fixed; |
michael@0 | 19 | top: 0; |
michael@0 | 20 | left: 0; |
michael@0 | 21 | z-index: 10; |
michael@0 | 22 | box-shadow: 0 0 3px #444; |
michael@0 | 23 | background-color: #ced7de; |
michael@0 | 24 | color: #000000; |
michael@0 | 25 | font-weight: bold; |
michael@0 | 26 | border-bottom: 2px solid; |
michael@0 | 27 | -moz-border-bottom-colors: #ff9100 #f27900; |
michael@0 | 28 | } |
michael@0 | 29 | |
michael@0 | 30 | .toolbar-container { |
michael@0 | 31 | max-width: 40em; |
michael@0 | 32 | margin-left: auto; |
michael@0 | 33 | margin-right: auto; |
michael@0 | 34 | } |
michael@0 | 35 | |
michael@0 | 36 | #filter-container { |
michael@0 | 37 | margin-top: 0.5em; |
michael@0 | 38 | margin-bottom: 0.5em; |
michael@0 | 39 | margin-right: 0.5em; |
michael@0 | 40 | height: 2em; |
michael@0 | 41 | border: 1px solid transparent; |
michael@0 | 42 | border-image-source: url("chrome://browser/skin/images/textfield.png"); |
michael@0 | 43 | border-image-slice: 1 1 3 1; |
michael@0 | 44 | border-image-width: 1px 1px 3px 1px; |
michael@0 | 45 | overflow: hidden; |
michael@0 | 46 | display: flex; |
michael@0 | 47 | flex-direction: row; |
michael@0 | 48 | } |
michael@0 | 49 | |
michael@0 | 50 | #filter-input { |
michael@0 | 51 | -moz-appearance: none; |
michael@0 | 52 | border: none; |
michael@0 | 53 | background-image: none; |
michael@0 | 54 | background-color: transparent; |
michael@0 | 55 | display: inline-block; |
michael@0 | 56 | width: 12em; |
michael@0 | 57 | min-width: 0; |
michael@0 | 58 | color: #000000; |
michael@0 | 59 | opacity: 1; |
michael@0 | 60 | flex: 1 1 auto; |
michael@0 | 61 | } |
michael@0 | 62 | |
michael@0 | 63 | #filter-input:-moz-placeholder { |
michael@0 | 64 | color: rgba(255,255,255,0.5); |
michael@0 | 65 | } |
michael@0 | 66 | |
michael@0 | 67 | .toolbar input { |
michael@0 | 68 | display: inline-block; |
michael@0 | 69 | height: 100%; |
michael@0 | 70 | min-width: 3em; |
michael@0 | 71 | box-sizing: border-box; |
michael@0 | 72 | opacity: 0.75; |
michael@0 | 73 | } |
michael@0 | 74 | |
michael@0 | 75 | #new-pref-toggle-button { |
michael@0 | 76 | background-position: center center; |
michael@0 | 77 | background-image: url("chrome://browser/skin/images/reader-plus-icon-xhdpi.png"); |
michael@0 | 78 | background-size: 48px 48px; |
michael@0 | 79 | height: 48px; |
michael@0 | 80 | width: 48px; |
michael@0 | 81 | display: inline-block; |
michael@0 | 82 | outline-style: none; |
michael@0 | 83 | } |
michael@0 | 84 | |
michael@0 | 85 | #filter-search-button { |
michael@0 | 86 | background-image: url("chrome://browser/skin/images/search.png"); |
michael@0 | 87 | background-size: 32px 32px; |
michael@0 | 88 | height: 32px; |
michael@0 | 89 | width: 32px; |
michael@0 | 90 | display: inline-block; |
michael@0 | 91 | outline-style: none; |
michael@0 | 92 | } |
michael@0 | 93 | |
michael@0 | 94 | #filter-input-clear-button { |
michael@0 | 95 | background-image: url("chrome://browser/skin/images/search-clear-30.png"); |
michael@0 | 96 | background-size: 32px 32px; |
michael@0 | 97 | height: 32px; |
michael@0 | 98 | width: 32px; |
michael@0 | 99 | display: inline-block; |
michael@0 | 100 | outline-style: none; |
michael@0 | 101 | } |
michael@0 | 102 | |
michael@0 | 103 | #filter-input[value=""] + #filter-input-clear-button { |
michael@0 | 104 | display: none; |
michael@0 | 105 | } |
michael@0 | 106 | |
michael@0 | 107 | .toolbar-item { |
michael@0 | 108 | display: inline-block; |
michael@0 | 109 | height: 3em; |
michael@0 | 110 | min-width: 3em; |
michael@0 | 111 | float: right; |
michael@0 | 112 | } |
michael@0 | 113 | |
michael@0 | 114 | #content { |
michael@0 | 115 | position: relative; |
michael@0 | 116 | margin: 0; |
michael@0 | 117 | margin-left: auto; |
michael@0 | 118 | margin-right: auto; |
michael@0 | 119 | padding-top: 3em; |
michael@0 | 120 | padding-left: 0; |
michael@0 | 121 | padding-right: 0; |
michael@0 | 122 | min-height: 100%; |
michael@0 | 123 | max-width: 40em; |
michael@0 | 124 | } |
michael@0 | 125 | |
michael@0 | 126 | ul { |
michael@0 | 127 | list-style-position: inside; |
michael@0 | 128 | border: 1px solid #808080; |
michael@0 | 129 | background-color: #ffffff; |
michael@0 | 130 | min-height: 100%; |
michael@0 | 131 | width: 100%; |
michael@0 | 132 | padding-top: 0; |
michael@0 | 133 | margin: 0; |
michael@0 | 134 | padding-left: 0; |
michael@0 | 135 | box-sizing: border-box; |
michael@0 | 136 | box-shadow: 0 0 5px #000000; |
michael@0 | 137 | overflow-x: hidden; |
michael@0 | 138 | } |
michael@0 | 139 | |
michael@0 | 140 | #new-pref-container { |
michael@0 | 141 | width: 100%; |
michael@0 | 142 | margin: 0; |
michael@0 | 143 | background-color: #ffffff; |
michael@0 | 144 | box-sizing: border-box; |
michael@0 | 145 | box-shadow: 0 0 5px #000000; |
michael@0 | 146 | overflow-x: hidden; |
michael@0 | 147 | max-width: 40em; |
michael@0 | 148 | max-height: 100%; |
michael@0 | 149 | position: fixed; |
michael@0 | 150 | top: 3em; |
michael@0 | 151 | left: auto; |
michael@0 | 152 | display: none; |
michael@0 | 153 | z-index: 5; |
michael@0 | 154 | } |
michael@0 | 155 | |
michael@0 | 156 | #new-pref-container input, |
michael@0 | 157 | #new-pref-container select { |
michael@0 | 158 | border: none; |
michael@0 | 159 | background-image: none; |
michael@0 | 160 | } |
michael@0 | 161 | |
michael@0 | 162 | #new-pref-container.show { |
michael@0 | 163 | display: block; |
michael@0 | 164 | } |
michael@0 | 165 | |
michael@0 | 166 | li { |
michael@0 | 167 | list-style-type: none; |
michael@0 | 168 | border-bottom: 1px solid #d3d3d3; |
michael@0 | 169 | opacity: 1; |
michael@0 | 170 | background-color: #ffffff; |
michael@0 | 171 | cursor: pointer; |
michael@0 | 172 | } |
michael@0 | 173 | |
michael@0 | 174 | #new-pref-line-boolean, |
michael@0 | 175 | #new-pref-value-string, |
michael@0 | 176 | #new-pref-value-int { |
michael@0 | 177 | display: none; |
michael@0 | 178 | } |
michael@0 | 179 | #new-pref-item[typestyle="boolean"] #new-pref-line-boolean, |
michael@0 | 180 | #new-pref-item[typestyle="string"] #new-pref-value-string, |
michael@0 | 181 | #new-pref-item[typestyle="int"] #new-pref-value-int { |
michael@0 | 182 | display: block; |
michael@0 | 183 | } |
michael@0 | 184 | |
michael@0 | 185 | .pref-name, |
michael@0 | 186 | .pref-value { |
michael@0 | 187 | padding: 15px 10px; |
michael@0 | 188 | text-align: left; |
michael@0 | 189 | text-overflow: ellipsis; |
michael@0 | 190 | overflow: hidden; |
michael@0 | 191 | background-image: none; |
michael@0 | 192 | } |
michael@0 | 193 | |
michael@0 | 194 | .pref-value { |
michael@0 | 195 | color: rgba(0,0,0,0.5); |
michael@0 | 196 | flex: 1 1 auto; |
michael@0 | 197 | border: none; |
michael@0 | 198 | -moz-appearance: none; |
michael@0 | 199 | background-image: none; |
michael@0 | 200 | background-color: transparent; |
michael@0 | 201 | } |
michael@0 | 202 | |
michael@0 | 203 | .pref-name[locked] { |
michael@0 | 204 | padding-right: 20px; |
michael@0 | 205 | background-image: url("chrome://browser/skin/images/lock.png"); |
michael@0 | 206 | background-repeat: no-repeat; |
michael@0 | 207 | background-position: right 50%; |
michael@0 | 208 | background-size: auto 60%; |
michael@0 | 209 | } |
michael@0 | 210 | |
michael@0 | 211 | #new-pref-name { |
michael@0 | 212 | width: 30em; |
michael@0 | 213 | } |
michael@0 | 214 | |
michael@0 | 215 | #new-pref-type { |
michael@0 | 216 | display: inline-block !important; |
michael@0 | 217 | border-left: 1px solid #d3d3d3; |
michael@0 | 218 | width: 10em; |
michael@0 | 219 | text-align: right; |
michael@0 | 220 | } |
michael@0 | 221 | |
michael@0 | 222 | .pref-item-line { |
michael@0 | 223 | border-top: 1px solid rgba(0,0,0,0.05); |
michael@0 | 224 | color: rgba(0,0,0,0.5); |
michael@0 | 225 | display: flex; |
michael@0 | 226 | flex-direction: row; |
michael@0 | 227 | } |
michael@0 | 228 | |
michael@0 | 229 | #new-pref-value-boolean { |
michael@0 | 230 | flex: 1 1 auto; |
michael@0 | 231 | } |
michael@0 | 232 | |
michael@0 | 233 | /* Disable newPref dialog spinbuttons, use custom version from Android */ |
michael@0 | 234 | /* Filed Bug 962359 to enhance the default spinbutton style to be touch-friendly */ |
michael@0 | 235 | #new-pref-value-int { |
michael@0 | 236 | -moz-appearance: textfield; |
michael@0 | 237 | } |
michael@0 | 238 | |
michael@0 | 239 | #new-pref-container .pref-button.toggle { |
michael@0 | 240 | display: inline-block; |
michael@0 | 241 | opacity: 1; |
michael@0 | 242 | flex: 0 1 auto; |
michael@0 | 243 | float: right; |
michael@0 | 244 | } |
michael@0 | 245 | |
michael@0 | 246 | #new-pref-container .pref-button.cancel, |
michael@0 | 247 | #new-pref-container .pref-button.create { |
michael@0 | 248 | display: inline-block; |
michael@0 | 249 | opacity: 1; |
michael@0 | 250 | flex: 1 1 auto; |
michael@0 | 251 | } |
michael@0 | 252 | |
michael@0 | 253 | .pref-item-line { |
michael@0 | 254 | pointer-events: none; |
michael@0 | 255 | } |
michael@0 | 256 | |
michael@0 | 257 | #new-pref-container .pref-item-line, |
michael@0 | 258 | .pref-item.selected .pref-item-line, |
michael@0 | 259 | .pref-item:not(.selected) .pref-button.reset { |
michael@0 | 260 | pointer-events: auto; |
michael@0 | 261 | } |
michael@0 | 262 | |
michael@0 | 263 | #new-pref-container .pref-button.create[disabled] { |
michael@0 | 264 | color: #d3d3d3; |
michael@0 | 265 | } |
michael@0 | 266 | |
michael@0 | 267 | .pref-item.selected { |
michael@0 | 268 | background-color: rgba(0,0,255,0.05); |
michael@0 | 269 | } |
michael@0 | 270 | |
michael@0 | 271 | .pref-button { |
michael@0 | 272 | display: inline-block; |
michael@0 | 273 | box-sizing: border-box; |
michael@0 | 274 | text-align: center; |
michael@0 | 275 | padding: 10px 1em; |
michael@0 | 276 | border-left: 1px solid rgba(0,0,0,0.1); |
michael@0 | 277 | opacity: 0; |
michael@0 | 278 | transition-property: opacity; |
michael@0 | 279 | transition-duration: 500ms; |
michael@0 | 280 | } |
michael@0 | 281 | |
michael@0 | 282 | .pref-item.selected .pref-item-line .pref-button { |
michael@0 | 283 | opacity: 1; |
michael@0 | 284 | } |
michael@0 | 285 | |
michael@0 | 286 | .pref-item:not(.selected) .pref-item-line .pref-button:not(.reset) { |
michael@0 | 287 | display: none; |
michael@0 | 288 | } |
michael@0 | 289 | |
michael@0 | 290 | .pref-item:not(.selected) .pref-button.reset { |
michael@0 | 291 | opacity: 1; |
michael@0 | 292 | } |
michael@0 | 293 | |
michael@0 | 294 | /* Disable detail list item spinbuttons, use custom version from Android */ |
michael@0 | 295 | /* Filed Bug 962359 to enhance the default spinbutton style to be touch-friendly */ |
michael@0 | 296 | .pref-item input[type="number"] { |
michael@0 | 297 | -moz-appearance: textfield; |
michael@0 | 298 | } |
michael@0 | 299 | |
michael@0 | 300 | .pref-button:active { |
michael@0 | 301 | background-color: rgba(0,0,255,0.2); |
michael@0 | 302 | } |
michael@0 | 303 | |
michael@0 | 304 | .pref-button[disabled] { |
michael@0 | 305 | display: none; |
michael@0 | 306 | } |
michael@0 | 307 | |
michael@0 | 308 | .pref-button.up { |
michael@0 | 309 | background-image: url("chrome://browser/skin/images/arrowup-16.png"); |
michael@0 | 310 | background-position: center center; |
michael@0 | 311 | background-repeat: no-repeat; |
michael@0 | 312 | } |
michael@0 | 313 | |
michael@0 | 314 | .pref-button.down { |
michael@0 | 315 | background-image: url("chrome://browser/skin/images/arrowdown-16.png"); |
michael@0 | 316 | background-position: center center; |
michael@0 | 317 | background-repeat: no-repeat; |
michael@0 | 318 | } |
michael@0 | 319 | |
michael@0 | 320 | #prefs-shield { |
michael@0 | 321 | width: 100%; |
michael@0 | 322 | height: 100%; |
michael@0 | 323 | background-color: rgba(0,0,0,0.5); |
michael@0 | 324 | position: fixed; |
michael@0 | 325 | top: 0; |
michael@0 | 326 | left: 0; |
michael@0 | 327 | opacity: 0; |
michael@0 | 328 | transition-property: opacity; |
michael@0 | 329 | transition-duration: 500ms; |
michael@0 | 330 | display: none; |
michael@0 | 331 | } |
michael@0 | 332 | |
michael@0 | 333 | #prefs-shield[shown] { |
michael@0 | 334 | display: block; |
michael@0 | 335 | opacity: 1; |
michael@0 | 336 | } |
michael@0 | 337 | |
michael@0 | 338 | #loading-container > li { |
michael@0 | 339 | background-image: url(chrome://global/skin/media/throbber.png); |
michael@0 | 340 | background-position: center center; |
michael@0 | 341 | background-repeat: no-repeat; |
michael@0 | 342 | padding-left: 40px; |
michael@0 | 343 | height: 3em; |
michael@0 | 344 | width: 100%; |
michael@0 | 345 | } |