1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/metro/theme/platform.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,926 @@
1.4 +/* This Source Code Form is subject to the terms of the Mozilla Public
1.5 + * License, v. 2.0. If a copy of the MPL was not distributed with this
1.6 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
1.7 +
1.8 +/* Global Skin ------------------------------------------------------------- */
1.9 +
1.10 +@import url(chrome://global/skin/);
1.11 +
1.12 +%filter substitution
1.13 +%include defines.inc
1.14 +
1.15 +/* Typography & General Styling -------------------------------------------- */
1.16 +
1.17 +::-moz-selection {
1.18 + color: white;
1.19 + background-color: @metro_orange@;
1.20 +}
1.21 +
1.22 +:root {
1.23 + font-family: "Segoe UI", sans-serif !important;
1.24 + font-size: @font_normal@;
1.25 +}
1.26 +
1.27 +.text-link {
1.28 + color: @metro_orange@;
1.29 + text-decoration: none;
1.30 +}
1.31 +
1.32 +textbox,
1.33 +menulist {
1.34 + -moz-appearance: none;
1.35 + min-width: @field_sizing@; /* button size */
1.36 + min-height: @field_sizing@; /* button size */
1.37 + margin: @metro_spacing_small@;
1.38 + padding: @metro_spacing_xsmall@ @metro_spacing_small@;
1.39 +
1.40 + font-size: @metro_font_normal@;
1.41 + font-weight: normal !important;
1.42 +
1.43 + color: @field_foreground_color@;
1.44 + background: @field_background_color@;
1.45 + border: @metro_border_thick@ solid @field_foreground_color@ !important;
1.46 + border-radius: 0;
1.47 +}
1.48 +
1.49 +textbox[disabled],
1.50 +menulist[disabled] {
1.51 + border-color: @field_disabled_foreground_color@ !important;
1.52 + color: @field_disabled_foreground_color@;
1.53 +}
1.54 +
1.55 +menulist:not([disabled]):hover:active {
1.56 + color: @field_background_color@;
1.57 + background: @field_foreground_color@;
1.58 +}
1.59 +
1.60 +/* Button ------------------------------------------------------------------ */
1.61 +
1.62 +button {
1.63 + -moz-appearance: none;
1.64 + border: 1px solid;
1.65 + font-size: @metro_font_normal@;
1.66 + font-weight: normal;
1.67 + margin: @metro_spacing_small@;
1.68 + min-width: @field_sizing@;
1.69 + min-height: 32px;
1.70 + padding: 3px 16px;
1.71 +}
1.72 +
1.73 +/* Non-default button colors */
1.74 +
1.75 +button {
1.76 + background: linear-gradient(to bottom, hsl(210, 5%, 89%), hsl(210, 5%, 87%));
1.77 + border-color: hsl(220, 5%, 86%);
1.78 + color: hsl(0, 0%, 10%);
1.79 +}
1.80 +
1.81 +button:not([disabled]):hover {
1.82 + background: linear-gradient(to bottom, hsl(210, 5%, 75%), hsl(210, 5%, 73%));
1.83 + border-color: hsl(210, 5%, 71%);
1.84 + color: hsl(0, 0%, 10%);
1.85 +}
1.86 +
1.87 +/* Default button colors */
1.88 +
1.89 +button[default],
1.90 +.notification-button-default {
1.91 + background: linear-gradient(to bottom, hsl(35, 100%, 50%), hsl(30, 100%, 50%));
1.92 + border-color: hsl(30, 100%, 48%);
1.93 + color: white;
1.94 +}
1.95 +
1.96 +button[default]:not([disabled]):hover,
1.97 +.notification-button-default:not([disabled]):hover {
1.98 + background: linear-gradient(to bottom, hsl(25, 100%, 47%), hsl(25, 100%, 45%));
1.99 + border-color: hsl(25, 100%, 43%);
1.100 + color: white;
1.101 +}
1.102 +
1.103 +/* Pushed button colors (both default and non-default */
1.104 +
1.105 +/* Note: these need enough specificity to override all the :hover rules above. */
1.106 +button:not([disabled]):hover:active,
1.107 +button:not([disabled])[checked="true"],
1.108 +button[default]:not([disabled])[checked="true"],
1.109 +.notification-button-default:not([disabled])[checked="true"] {
1.110 + background: linear-gradient(to bottom, hsl(210, 5%, 28%), hsl(210, 5%, 25%));
1.111 + border-color: hsl(216, 4%, 27%);
1.112 + color: white;
1.113 +}
1.114 +
1.115 +/* Disabled button colors (both default and non-default */
1.116 +
1.117 +button[disabled] {
1.118 + background: linear-gradient(to bottom, hsl(210, 3%, 93%), hsl(210, 3%, 92%));
1.119 + border-color: hsl(210, 3%, 91%);
1.120 + color: hsl(0, 0%, 60%);
1.121 +}
1.122 +
1.123 +/* Textbox ----------------------------------------------------------------- */
1.124 +
1.125 +textbox[isempty="true"] {
1.126 + color: @field_mid_foreground_color@;
1.127 +}
1.128 +
1.129 +spinbuttons {
1.130 + border: none;
1.131 +}
1.132 +
1.133 +.spinbuttons-box {
1.134 + border: none;
1.135 + -moz-box-orient: horizontal;
1.136 + -moz-box-direction: reverse;
1.137 +}
1.138 +
1.139 +.spinbuttons-down,
1.140 +.spinbuttons-up {
1.141 + border: none !important;
1.142 +}
1.143 +
1.144 +.spinbuttons-down {
1.145 + list-style-image: url("chrome://browser/skin/images/arrowdown-16.png");
1.146 +}
1.147 +
1.148 +.spinbuttons-up {
1.149 + list-style-image: url("chrome://browser/skin/images/arrowup-16.png");
1.150 +}
1.151 +
1.152 +/* Menu List --------------------------------------------------------------- */
1.153 +
1.154 +menulist {
1.155 + -moz-user-focus: ignore;
1.156 + padding: @metro_spacing_xsmall@ 0;
1.157 + -moz-padding-start: @metro_spacing_small@;
1.158 + border-color: @field_disabled_foreground_color@ !important;
1.159 +}
1.160 +
1.161 +/* Popup Menus ------------------------------------------------------------- */
1.162 +
1.163 +.menu-container {
1.164 + position: absolute;
1.165 + opacity: 0;
1.166 +}
1.167 +
1.168 +.menu-container[showingfrom="below"] {
1.169 + transform: translateY(@metro_spacing_normal@);
1.170 +}
1.171 +
1.172 +.menu-container[showingfrom="above"] {
1.173 + transform: translateY(-@metro_spacing_normal@);
1.174 +}
1.175 +
1.176 +.menu-container[hiding],
1.177 +.menu-container[showing] {
1.178 + transition: opacity ease-out 0.2s,
1.179 + transform ease-out 0.2s;
1.180 +}
1.181 +
1.182 +.menu-container[showing] {
1.183 + opacity: 1;
1.184 + transform: none;
1.185 +}
1.186 +
1.187 +.menu-popup > richlistbox {
1.188 + padding: 3px 0;
1.189 + border: #000 solid @metro_border_thick@;
1.190 + -moz-appearance: none;
1.191 + display: -moz-box;
1.192 +}
1.193 +
1.194 +.menu-popup > richlistbox > scrollbox {
1.195 + width: 100%;
1.196 + overflow-x: hidden !important;
1.197 +}
1.198 +
1.199 +.menu-popup richlistitem {
1.200 + width: 100%;
1.201 + min-height: @touch_button_small@;
1.202 + min-width: @touch_action_minwidth@; /* keep the button from being too narrow */
1.203 + border: 0 none;
1.204 + -moz-box-align: center;
1.205 + font-weight: 600;
1.206 +}
1.207 +.menu-popup > richlistbox > richlistitem {
1.208 + -moz-padding-end: 50px;
1.209 +}
1.210 +/* Additional styles applied to popups for form <select> elements. */
1.211 +#select-container {
1.212 + padding: 0;
1.213 + position: absolute;
1.214 + background-color: transparent;
1.215 +}
1.216 +
1.217 +#select-commands {
1.218 + -moz-appearance: none;
1.219 + background-color: white;
1.220 + border: #000 solid @metro_border_thick@;
1.221 + display: -moz-box;
1.222 + -moz-user-focus: ignore;
1.223 + -moz-box-align: stretch;
1.224 + width: 100%;
1.225 +}
1.226 +
1.227 +/* ensure click events are dispatched targetting the select option not the label */
1.228 +#select-commands > .option-command > label {
1.229 + pointer-events: none;
1.230 +}
1.231 +
1.232 +/* listcell element doesn't have flex="1" so we need to force it */
1.233 +.option-command > listcell {
1.234 + -moz-box-flex: 1 !important;
1.235 +}
1.236 +
1.237 +.option-command {
1.238 + min-height: @touch_button_small@;
1.239 + min-width: @touch_action_minwidth@; /* keep the button from being too narrow */
1.240 + border: 0 none;
1.241 +}
1.242 +
1.243 +.option-command.optgroup {
1.244 + font-weight: bold;
1.245 + font-style: italic;
1.246 + pointer-events: none;
1.247 +}
1.248 +
1.249 +.select-popup > richlistbox > scrollbox {
1.250 + width: 100%;
1.251 + overflow-x: hidden !important;
1.252 +}
1.253 +
1.254 +/* Toolbar Button --------------------------------------------------------- */
1.255 +
1.256 +toolbarbutton {
1.257 + min-width: @metro_spacing_large@; /* primary button size */
1.258 + min-height: @metro_spacing_large@; /* primary button size */
1.259 + -moz-appearance: none;
1.260 + margin: 0;
1.261 + padding: @metro_spacing_xsmall@;
1.262 +}
1.263 +
1.264 +toolbarbutton:not(.show-text) .toolbarbutton-text {
1.265 + display: none;
1.266 +}
1.267 +
1.268 +.toolbarbutton-icon[label]:not([label=""]),
1.269 +.toolbarbutton-icon[type="menu"] {
1.270 + -moz-margin-end: @metro_spacing_xsmall@;
1.271 +}
1.272 +
1.273 +toolbarbutton:not(.show-text) .toolbarbutton-icon,
1.274 +toolbarbutton:not([image]) .toolbarbutton-icon,
1.275 +toolbarbutton[image=''] .toolbarbutton-icon {
1.276 + -moz-margin-end: 0;
1.277 +}
1.278 +
1.279 +toolbarbutton:hover,
1.280 +toolbarbutton:hover:active,
1.281 +toolbarbutton[open="true"] {
1.282 + border-color: transparent;
1.283 +}
1.284 +
1.285 +/* Toggleswitch ------------------------------------------------------------ */
1.286 +
1.287 +checkbox.toggleswitch {
1.288 + margin: @metro_spacing_small@;
1.289 + min-height: @metro_spacing_normal@;
1.290 + font-weight: bold;
1.291 +}
1.292 +
1.293 +checkbox.toggleswitch hbox {
1.294 + -moz-box-align: center;
1.295 +}
1.296 +
1.297 +checkbox.toggleswitch:not([checked]) .onlabel,
1.298 +checkbox.toggleswitch[checked] .offlabel {
1.299 + display: none;
1.300 +}
1.301 +
1.302 +checkbox.toggleswitch radiogroup {
1.303 + border: @metro_border_thick@ solid @field_disabled_foreground_color@;
1.304 + -moz-box-orient: horizontal;
1.305 +}
1.306 +
1.307 +checkbox.toggleswitch radio {
1.308 + -moz-appearance: none;
1.309 + margin: 0;
1.310 + border: 0 none;
1.311 + border-radius: 0;
1.312 + background: 0 none;
1.313 + padding: 0;
1.314 + min-height: @metro_spacing_normal@;
1.315 + height: @metro_spacing_normal@;
1.316 +}
1.317 +
1.318 +checkbox.toggleswitch[checked] radio.checkbox-radio-on,
1.319 +checkbox.toggleswitch:not([checked]) radio.checkbox-radio-off {
1.320 + width: @metro_spacing_normal@;
1.321 + min-width: @metro_spacing_normal@;
1.322 + background: #000;
1.323 + margin: -@metro_border_thick@;
1.324 +}
1.325 +
1.326 +checkbox.toggleswitch[checked] radio.checkbox-radio-off,
1.327 +checkbox.toggleswitch:not([checked]) radio.checkbox-radio-on {
1.328 + width: @metro_spacing_xxxnormal@;
1.329 + min-width: @metro_spacing_xxxnormal@;
1.330 + margin: @metro_border_thin@;
1.331 +}
1.332 +
1.333 +checkbox.toggleswitch:not([checked]) radio.checkbox-radio-on {
1.334 + background: @field_disabled_foreground_color@;
1.335 +}
1.336 +
1.337 +checkbox.toggleswitch[checked] radio.checkbox-radio-off {
1.338 + background: @selected_color@;
1.339 +}
1.340 +
1.341 +checkbox.toggleswitch[checked] radio:last-child {
1.342 + -moz-margin-start: 0;
1.343 +}
1.344 +
1.345 +checkbox.toggleswitch[checked] radio:first-child {
1.346 + -moz-margin-end: 0;
1.347 +}
1.348 +
1.349 +/* Color Picker ------------------------------------------------------------ */
1.350 +
1.351 +colorpicker > panel {
1.352 + background-color: #767973;
1.353 +}
1.354 +
1.355 +colorpicker > vbox {
1.356 + background-color: #767973;
1.357 +}
1.358 +
1.359 +/* Rich List Box ---------------------------------------------------------- */
1.360 +
1.361 +richlistbox {
1.362 + -moz-user-focus: ignore;
1.363 + margin: 0;
1.364 +}
1.365 +
1.366 +richlistitem {
1.367 + -moz-user-focus: ignore;
1.368 + min-height: @metro_spacing_normal@; /* row size */
1.369 + padding: @metro_spacing_small@;
1.370 +}
1.371 +
1.372 +richlistitem label.normal,
1.373 +richlistitem description.normal,
1.374 +richlistitem label.normal-black,
1.375 +richlistitem description.normal-black,
1.376 +richlistitem label.normal-bold,
1.377 +richlistitem description.normal-bold{
1.378 + white-space: pre-wrap;
1.379 + word-wrap: break-word;
1.380 +}
1.381 +
1.382 +richlistitem label.normal,
1.383 +richlistitem description.normal {
1.384 + color: gray;
1.385 +}
1.386 +
1.387 +richlistitem label.normal-bold,
1.388 +richlistitem description.normal-bold {
1.389 + font-weight: bold;
1.390 +}
1.391 +
1.392 +richlistitem[selected],
1.393 +richlistitem:not([disabled]):not([selected]):active {
1.394 + background-color: @metro_orange@;
1.395 + color: #fff;
1.396 +}
1.397 +
1.398 +richlistitem:not([disabled]):not([selected]):hover {
1.399 + background-color: #ccc;
1.400 +}
1.401 +
1.402 +richlistitem.section-header,
1.403 +richlistitem[selected].section-header {
1.404 + font-weight: bold;
1.405 + color: #000;
1.406 + background-color: lightgray;
1.407 +}
1.408 +
1.409 +richlistitem[selected] .hide-on-select,
1.410 +richlistitem .show-on-select {
1.411 + visibility: collapse;
1.412 +}
1.413 +
1.414 +richlistitem[selected] .show-on-select,
1.415 +richlistitem .hide-on-select {
1.416 + visibility: visible;
1.417 +}
1.418 +
1.419 +richlistitem[typeName="message"] {
1.420 + border-bottom: 0;
1.421 +}
1.422 +
1.423 +/* Notification box ("info app bar") ---------------------------------------- */
1.424 +
1.425 +notification {
1.426 + background: hsl(0, 0%, 98%);
1.427 + border-bottom: 1px solid hsla(0, 0%, 0%, .07);
1.428 + box-shadow: 0 0 10px hsla(0, 0%, 0%, .1);
1.429 + min-height: 64px;
1.430 +}
1.431 +
1.432 +notificationbox[count="0"] .notification-layer,
1.433 +notificationbox[count="1"] .notification-layer,
1.434 +notificationbox[count="2"] .notification-layer[anonid="layer2"] {
1.435 + visibility: collapse;
1.436 +}
1.437 +
1.438 +notificationbox[count="2"] .notification-layer[anonid="layer1"],
1.439 +notificationbox[count="3"] .notification-layer[anonid="layer1"],
1.440 +notificationbox[count="3"] .notification-layer[anonid="layer2"] {
1.441 + visibility: visible;
1.442 +}
1.443 +
1.444 +.notification-layer {
1.445 + border: @metro_border_thin@ solid @field_disabled_foreground_color@;
1.446 + border-bottom: none;
1.447 + height:5px
1.448 +}
1.449 +
1.450 +.notification-inner {
1.451 + border-style: none;
1.452 + border: @metro_border_thin@ solid @field_disabled_foreground_color@;
1.453 +}
1.454 +
1.455 +.notification-button {
1.456 + -moz-margin-start: 0;
1.457 + -moz-margin-end: 20px;
1.458 +}
1.459 +
1.460 +.messageImage {
1.461 + width: 32px;
1.462 + height: 32px;
1.463 + -moz-margin-start: 40px;
1.464 + -moz-margin-end: 16px;
1.465 +}
1.466 +
1.467 +/* If there is no image set, collapse the image but keep the starting margin */
1.468 +.messageImage:not([src]) {
1.469 + width: 0;
1.470 + -moz-margin-end: 0;
1.471 +}
1.472 +
1.473 +.messageText {
1.474 + margin: 0;
1.475 +}
1.476 +
1.477 +.messageCloseButton {
1.478 + list-style-image: url("chrome://browser/skin/images/infobar-close.png");
1.479 + padding: 0;
1.480 + -moz-margin-start: 0;
1.481 + -moz-margin-end: 40px;
1.482 + -moz-image-region: rect(0, 40px, 40px, 0);
1.483 +}
1.484 +
1.485 +.messageCloseButton > .toolbarbutton-icon {
1.486 + margin: 0;
1.487 +}
1.488 +
1.489 +.messageCloseButton:hover {
1.490 + -moz-image-region: rect(0, 80px, 40px, 40px);
1.491 +}
1.492 +
1.493 +.messageCloseButton:hover:active {
1.494 + -moz-image-region: rect(0, 120px, 40px, 80px);
1.495 +}
1.496 +
1.497 +.notification-link {
1.498 + /* Make the link take up all the space before the buttons. */
1.499 + -moz-box-flex: 9999;
1.500 +}
1.501 +
1.502 +/* ensure the notification children pick up snapped-view box property overrides */
1.503 +.notification-button.box-inherit {
1.504 + -moz-margin-start: inherit;
1.505 + -moz-margin-end: inherit;
1.506 + width: inherit;
1.507 + display: inherit;
1.508 + overflow: inherit;
1.509 +}
1.510 +
1.511 +@media (max-width: 330px) {
1.512 + /* notifications need layout tweaks in narrow viewport
1.513 + */
1.514 + .notification-button {
1.515 + display: block;
1.516 + width: calc(100% - 40px);
1.517 + overflow: visible;
1.518 + -moz-margin-start: 40px;
1.519 + -moz-margin-end: 0;
1.520 + }
1.521 +
1.522 + .notification-inner {
1.523 + display: block;
1.524 + padding: @metro_spacing_xnormal@;
1.525 + }
1.526 + .notification-inner > [anonid="details"] {
1.527 + display: inline-block;
1.528 + width: calc(100% - 48px);
1.529 + }
1.530 +
1.531 + .notification-inner > .messageCloseButton {
1.532 + display: inline-block;
1.533 + vertical-align: top;
1.534 + -moz-margin-start: 8px;
1.535 + -moz-margin-end: 0;
1.536 + }
1.537 + .notification-inner > [anonid="details"] > .messageImage {
1.538 + display: inline;
1.539 + vertical-align: top;
1.540 + -moz-margin-start: 0;
1.541 + -moz-margin-end: 8px;
1.542 + }
1.543 + .notification-inner > [anonid="details"] > .messageText {
1.544 + display: inline-block;
1.545 + width: calc(100% - 40px);
1.546 + overflow: visible;
1.547 + }
1.548 +
1.549 +}
1.550 +
1.551 +/* Prompts ----------------------------------------------------------------- */
1.552 +
1.553 +.mainContainer {
1.554 + padding: 5vh 10vw;
1.555 +}
1.556 +
1.557 +.info\.title {
1.558 + font-size: @metro_font_large@;
1.559 + border-bottom: 1px solid #C7C7C7;
1.560 + padding-bottom: @metro_spacing_normal@;
1.561 + width: 100%;
1.562 + margin-left: 0;
1.563 + margin-right: 0;
1.564 +}
1.565 +
1.566 +.info\.body {
1.567 + font-size: @metro_font_normal@;
1.568 + padding-bottom: @metro_spacing_normal@;
1.569 + height: 100%;
1.570 + max-height: 30vh;
1.571 + max-width: 55vw;
1.572 +}
1.573 +
1.574 +.buttonContainer {
1.575 + background-color: transparent;
1.576 + border: none;
1.577 +}
1.578 +
1.579 +.buttonContainer > button {
1.580 + min-width: @touch_action_minwidth@;
1.581 + margin: 5px 0 5px @metro_spacing_xnormal@;
1.582 +}
1.583 +
1.584 +/* set all the things to display block to allow body to grow with content and
1.585 + obey overflow auto. Except on authentication prompts because a grid is used to
1.586 + align labels and textboxes. */
1.587 +tabmodalprompt:not([promptType="promptUserAndPass"]) .info\.body,
1.588 +tabmodalprompt:not([promptType="promptUserAndPass"]) .infoContainer,
1.589 +tabmodalprompt:not([promptType="promptUserAndPass"]) .topContainer,
1.590 +tabmodalprompt:not([promptType="promptUserAndPass"]) .topContainer > rows > row:not([hidden]),
1.591 +tabmodalprompt:not([promptType="promptUserAndPass"]) .topContainer > rows {
1.592 + display: block;
1.593 +}
1.594 +
1.595 +tabmodalprompt:not([promptType="promptUserAndPass"]) .infoContainer {
1.596 + overflow: auto;
1.597 +}
1.598 +
1.599 +.topContainer > rows > row > label {
1.600 + margin-left: 0;
1.601 +}
1.602 +
1.603 +.topContainer > rows > row > checkbox {
1.604 + -moz-margin-start: 0;
1.605 + -moz-padding-start: 0;
1.606 +}
1.607 +
1.608 +.topContainer > rows > row > textbox {
1.609 + font-size: @metro_font_normal@;
1.610 + height: 40px;
1.611 + margin: 5px 0;
1.612 + width: 100%;
1.613 +}
1.614 +
1.615 +.topContainer > rows > row > textbox[focused] {
1.616 + border-color: @metro_orange@ !important;
1.617 +}
1.618 +
1.619 +#stack[keyboardVisible] tabmodalprompt > spacer {
1.620 + min-height: 20px;
1.621 + max-height: 20px;
1.622 +}
1.623 +
1.624 +#stack[keyboardVisible] tabmodalprompt .info\.body {
1.625 + max-height: 15vh;
1.626 +}
1.627 +
1.628 +@media (max-width: 600px) {
1.629 + .mainContainer {
1.630 + padding: 5vh 5vw;
1.631 + width: 90vw;
1.632 + }
1.633 +
1.634 + .buttonContainer > button {
1.635 + min-width: @touch_action_snapped_minwidth@;
1.636 + }
1.637 +}
1.638 +
1.639 +/*.meta -------------------------------------------------------------------- */
1.640 +
1.641 +.meta {
1.642 + background-color: @panel_light_color@;
1.643 +}
1.644 +
1.645 +/* needs to observe the viewstate */
1.646 +.meta-section-container {
1.647 + padding: 45px 75px 0;
1.648 + -moz-box-orient: horizontal;
1.649 +}
1.650 +
1.651 +.meta-section-container[viewstate="snapped"],
1.652 +.meta-section-container[viewstate="portrait"] {
1.653 + -moz-box-orient: vertical;
1.654 + -moz-box-flex: 1;
1.655 +}
1.656 +
1.657 +.meta-section-container[viewstate="snapped"] {
1.658 + padding: 0;
1.659 +}
1.660 +
1.661 +.meta-section {
1.662 + margin: 0 @metro_spacing_large@;
1.663 +}
1.664 +
1.665 +.meta-section-container[viewstate="snapped"] > .meta-section {
1.666 + margin: 0 @metro_spacing_xnormal@;
1.667 +}
1.668 +
1.669 +.meta-section-title {
1.670 + margin: @metro_spacing_normal@ @tile_side_margin@;
1.671 + font-size: @metro_font_large@;
1.672 + font-weight: 100;
1.673 + cursor: default;
1.674 +}
1.675 +
1.676 +.meta-section-title.wide-title {
1.677 + font-size: @metro_font_xlarge@;
1.678 + margin-bottom: calc(40px - @tile_side_margin@);
1.679 +}
1.680 +
1.681 +.meta-section:not([expanded]) > .meta-section-title.narrow-title:after {
1.682 + content: ">";
1.683 +}
1.684 +
1.685 +.meta-section-container:not([viewstate="snapped"]) .meta-section-title.narrow-title,
1.686 +.meta-section-container[viewstate="snapped"] .meta-section-title.wide-title {
1.687 + display: none;
1.688 +}
1.689 +
1.690 +.meta-section-container[viewstate="snapped"] .meta-section-title,
1.691 +.meta-section-container[viewstate="snapped"] richgrid {
1.692 + margin-top: @metro_spacing_xnormal@;
1.693 + padding: 0;
1.694 +}
1.695 +
1.696 +.meta-section > richgrid {
1.697 + opacity: 1;
1.698 + transform: translateX(0) translateY(0);
1.699 + transition-duration: 367ms;
1.700 + transition-delay: 500ms;
1.701 + transition-timing-function: @metro_animation_easing@;
1.702 +}
1.703 +
1.704 +.meta-section:nth-child(2) > richgrid {
1.705 + transition-delay: 600ms;
1.706 +}
1.707 +.meta-section:nth-child(3) > richgrid {
1.708 + transition-delay: 700ms;
1.709 +}
1.710 +.meta-section:nth-child(4) > richgrid {
1.711 + transition-delay: 800ms;
1.712 +}
1.713 +
1.714 +.meta-section > richgrid[fade] {
1.715 + opacity: 0;
1.716 + transform: translateX(150px) translateY(25px);
1.717 +}
1.718 +
1.719 +#start-container[viewstate="snapped"] .meta-section > richgrid {
1.720 + transition-property: none;
1.721 +}
1.722 +
1.723 +/* Autocomplete ----------------------------------------------------------------- */
1.724 +
1.725 +#urlbar-autocomplete-scroll:not([autocomplete]) {
1.726 + transform: translateY(calc(3 * @grid_row_height@ + 64px));
1.727 + visibility: collapse;
1.728 +}
1.729 +
1.730 +#urlbar-autocomplete-scroll[autocomplete] {
1.731 + height: calc(3 * @grid_row_height@ + 64px);
1.732 + max-height: calc(3 * @grid_row_height@ + 64px);
1.733 + transform: translateY(0);
1.734 + transition-timing-function: @metro_animation_easing@;
1.735 + transition-property: transform;
1.736 + transition-duration: @metro_animation_duration@;
1.737 + transition-delay: 0s;
1.738 + visibility: visible;
1.739 +}
1.740 +
1.741 +#urlbar-autocomplete-scroll:not([autocomplete]) > .meta-section-container > .meta-section {
1.742 + opacity: 0;
1.743 +}
1.744 +
1.745 +#urlbar-autocomplete > .meta-section {
1.746 + opacity: 1;
1.747 + transition-property: opacity;
1.748 + transition-timing-function: @metro_animation_easing@;
1.749 + transition-duration: @metro_animation_duration@;
1.750 + transition-delay: 0s;
1.751 + visibility: visible;
1.752 +}
1.753 +
1.754 +#urlbar-autocomplete[nomatch] > .meta-section[anonid="results-container"] {
1.755 + opacity: 0;
1.756 + visibility: collapse;
1.757 +}
1.758 +
1.759 +#urlbar-autocomplete richgriditem:not([value]) {
1.760 + visibility: collapse;
1.761 +}
1.762 +
1.763 +/* App bars ----------------------------------------------------------------- */
1.764 +
1.765 +appbar {
1.766 + display: block;
1.767 + position: fixed;
1.768 + bottom: 0;
1.769 + width: 100%;
1.770 + transform: translateY(100%);
1.771 + transition: transform @metro_animation_duration@ @metro_animation_easing@;
1.772 + font-size: 0;
1.773 + visibility: hidden;
1.774 +}
1.775 +
1.776 +appbar[hiding],
1.777 +appbar[visible] {
1.778 + visibility: visible;
1.779 +}
1.780 +
1.781 +appbar[visible] {
1.782 + transform: none;
1.783 +}
1.784 +
1.785 +#stack[keyboardVisible] > appbar {
1.786 + /* Slow the bottom up transition since it's impossible to match the system's
1.787 + soft keyboard movement. */
1.788 + transition: transform @metro_animation_duration@ @metro_animation_easing@,
1.789 + bottom @appbar_keyboard_slideup_duration@ @appbar_keyboard_slideup_easing@ @appbar_keyboard_slideup_delay@;
1.790 +}
1.791 +
1.792 +
1.793 +appbar toolbar {
1.794 + -moz-appearance: none;
1.795 + -moz-box-align: center;
1.796 + border: 0;
1.797 + width: 100%;
1.798 + min-height: @toolbar_height@;
1.799 + font-size: 1rem;
1.800 +}
1.801 +
1.802 +appbar toolbar toolbarbutton {
1.803 + border: 0;
1.804 + margin: 0 @toolbar_horizontal_spacing@;
1.805 + padding: 0;
1.806 + /* Don't inherit background-color from toolbarbutton[checked="true"] */
1.807 + background-color: transparent;
1.808 +}
1.809 +
1.810 +appbar toolbar toolbarbutton[disabled] {
1.811 + visibility: collapse;
1.812 +}
1.813 +
1.814 +appbar toolbar[labelled] {
1.815 + min-height: @labelled_toolbar_height@;
1.816 +}
1.817 +
1.818 +appbar toolbar[labelled] toolbarbutton {
1.819 + -moz-box-orient: vertical;
1.820 +}
1.821 +
1.822 +appbar toolbar[labelled] toolbarbutton > .toolbarbutton-text {
1.823 + display: block;
1.824 + padding-top: @metro_spacing_small@;
1.825 + font-size: 0.75rem;
1.826 +}
1.827 +
1.828 +/* Sprites */
1.829 +
1.830 +.appbar-primary .toolbarbutton-icon,
1.831 +.appbar-secondary .toolbarbutton-icon {
1.832 + width: 40px;
1.833 + height: 40px;
1.834 +}
1.835 +
1.836 +/* Primary sprite format: one button per sprite.
1.837 +
1.838 + States from left to right:
1.839 + normal, hover, active/toggled, toggled+hover, toggled+active. */
1.840 +
1.841 +.appbar-primary {
1.842 + -moz-image-region: rect(0 40px 40px 0);
1.843 +}
1.844 +
1.845 +.appbar-primary:not([checked]):hover:not(:active):not([disabled]) {
1.846 + -moz-image-region: rect(0 80px 40px 40px);
1.847 +}
1.848 +
1.849 +.appbar-primary:not([checked]):active:not([disabled]),
1.850 +.appbar-primary[checked] {
1.851 + -moz-image-region: rect(0 120px 40px 80px);
1.852 +}
1.853 +
1.854 +.appbar-primary[checked]:hover:not(:active):not([disabled]) {
1.855 + -moz-image-region: rect(0 160px 40px 120px);
1.856 +}
1.857 +
1.858 +.appbar-primary[checked]:active:not([disabled]) {
1.859 + -moz-image-region: rect(0 200px 40px 160px);
1.860 +}
1.861 +
1.862 +@media (min-resolution: @min_res_140pc@) {
1.863 + .appbar-primary {
1.864 + -moz-image-region: rect(0 56px 56px 0);
1.865 + }
1.866 +
1.867 + .appbar-primary:not([checked]):hover:not(:active):not([disabled]) {
1.868 + -moz-image-region: rect(0 112px 56px 56px);
1.869 + }
1.870 +
1.871 + .appbar-primary:not([checked]):active:not([disabled]),
1.872 + .appbar-primary[checked] {
1.873 + -moz-image-region: rect(0 168px 56px 112px);
1.874 + }
1.875 +
1.876 + .appbar-primary[checked]:hover:not(:active):not([disabled]) {
1.877 + -moz-image-region: rect(0 224px 56px 168px);
1.878 + }
1.879 +
1.880 + .appbar-primary[checked]:active:not([disabled]) {
1.881 + -moz-image-region: rect(0 280px 56px 224px);
1.882 + }
1.883 +}
1.884 +
1.885 +@media (min-resolution: @min_res_180pc@) {
1.886 + .appbar-primary {
1.887 + -moz-image-region: rect(0 72px 72px 0);
1.888 + }
1.889 +
1.890 + .appbar-primary:not([checked]):hover:not(:active):not([disabled]) {
1.891 + -moz-image-region: rect(0 144px 72px 72px);
1.892 + }
1.893 +
1.894 + .appbar-primary:not([checked]):active:not([disabled]),
1.895 + .appbar-primary[checked] {
1.896 + -moz-image-region: rect(0 216px 72px 144px);
1.897 + }
1.898 +
1.899 + .appbar-primary[checked]:hover:not(:active):not([disabled]) {
1.900 + -moz-image-region: rect(0 288px 72px 216px);
1.901 + }
1.902 +
1.903 + .appbar-primary[checked]:active:not([disabled]) {
1.904 + -moz-image-region: rect(0 360px 72px 288px);
1.905 + }
1.906 +}
1.907 +
1.908 +/* Secondary sprite format: one sprite for everything */
1.909 +
1.910 +.appbar-secondary {
1.911 + list-style-image: url(chrome://browser/skin/images/appbar-icons.png);
1.912 +}
1.913 +
1.914 +/* Flyout panels (sidebars) ------------------------------------------------- */
1.915 +
1.916 +.flyout-narrow {
1.917 + width: 346px;
1.918 +}
1.919 +
1.920 +/* Some elements don't resize to fit their container properly for some reason.
1.921 + * Setting max-width on the element or a child fixes it. */
1.922 +.flyout-narrow .flyoutpanel-hack {
1.923 + max-width: calc(346px - 2 * 40px);
1.924 +}
1.925 +
1.926 +.console-row-code {
1.927 + padding-top: 2px;
1.928 + font-size: small;
1.929 +}
1.930 \ No newline at end of file
