browser/metro/theme/config.css

Wed, 31 Dec 2014 06:55:50 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Wed, 31 Dec 2014 06:55:50 +0100
changeset 2
7e26c7da4463
permissions
-rw-r--r--

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 }

mercurial