browser/metro/theme/config.css

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