michael@0: /* This Source Code Form is subject to the terms of the Mozilla Public
michael@0:  * License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0:  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0: 
michael@0: /* Global Skin ------------------------------------------------------------- */
michael@0: 
michael@0: @import url(chrome://global/skin/);
michael@0: 
michael@0: %filter substitution
michael@0: %include defines.inc
michael@0: 
michael@0: /* Typography & General Styling -------------------------------------------- */
michael@0: 
michael@0: ::-moz-selection {
michael@0:   color: white;
michael@0:   background-color: @metro_orange@;
michael@0: }
michael@0: 
michael@0: :root {
michael@0:   font-family: "Segoe UI", sans-serif !important;
michael@0:   font-size: @font_normal@;
michael@0: }
michael@0: 
michael@0: .text-link {
michael@0:   color: @metro_orange@;
michael@0:   text-decoration: none;
michael@0: }
michael@0: 
michael@0: textbox,
michael@0: menulist {
michael@0:   -moz-appearance: none;
michael@0:   min-width: @field_sizing@; /* button size */
michael@0:   min-height: @field_sizing@; /* button size */
michael@0:   margin: @metro_spacing_small@;
michael@0:   padding: @metro_spacing_xsmall@ @metro_spacing_small@;
michael@0: 
michael@0:   font-size: @metro_font_normal@;
michael@0:   font-weight: normal !important;
michael@0: 
michael@0:   color: @field_foreground_color@;
michael@0:   background: @field_background_color@;
michael@0:   border: @metro_border_thick@ solid @field_foreground_color@ !important;
michael@0:   border-radius: 0;
michael@0: }
michael@0: 
michael@0: textbox[disabled],
michael@0: menulist[disabled] {
michael@0:   border-color: @field_disabled_foreground_color@ !important;
michael@0:   color: @field_disabled_foreground_color@;
michael@0: }
michael@0: 
michael@0: menulist:not([disabled]):hover:active {
michael@0:   color: @field_background_color@;
michael@0:   background: @field_foreground_color@;
michael@0: }
michael@0: 
michael@0: /* Button ------------------------------------------------------------------ */
michael@0: 
michael@0: button {
michael@0:   -moz-appearance: none;
michael@0:   border: 1px solid;
michael@0:   font-size: @metro_font_normal@;
michael@0:   font-weight: normal;
michael@0:   margin: @metro_spacing_small@;
michael@0:   min-width: @field_sizing@;
michael@0:   min-height: 32px;
michael@0:   padding: 3px 16px;
michael@0: }
michael@0: 
michael@0: /* Non-default button colors */
michael@0: 
michael@0: button {
michael@0:   background: linear-gradient(to bottom, hsl(210, 5%, 89%), hsl(210, 5%, 87%));
michael@0:   border-color: hsl(220, 5%, 86%);
michael@0:   color: hsl(0, 0%, 10%);
michael@0: }
michael@0: 
michael@0: button:not([disabled]):hover {
michael@0:   background: linear-gradient(to bottom, hsl(210, 5%, 75%), hsl(210, 5%, 73%));
michael@0:   border-color: hsl(210, 5%, 71%);
michael@0:   color: hsl(0, 0%, 10%);
michael@0: }
michael@0: 
michael@0: /* Default button colors */
michael@0: 
michael@0: button[default],
michael@0: .notification-button-default {
michael@0:   background: linear-gradient(to bottom, hsl(35, 100%, 50%), hsl(30, 100%, 50%));
michael@0:   border-color: hsl(30, 100%, 48%);
michael@0:   color: white;
michael@0: }
michael@0: 
michael@0: button[default]:not([disabled]):hover,
michael@0: .notification-button-default:not([disabled]):hover {
michael@0:   background: linear-gradient(to bottom, hsl(25, 100%, 47%), hsl(25, 100%, 45%));
michael@0:   border-color: hsl(25, 100%, 43%);
michael@0:   color: white;
michael@0: }
michael@0: 
michael@0: /* Pushed button colors (both default and non-default */
michael@0: 
michael@0: /* Note: these need enough specificity to override all the :hover rules above. */
michael@0: button:not([disabled]):hover:active,
michael@0: button:not([disabled])[checked="true"],
michael@0: button[default]:not([disabled])[checked="true"],
michael@0: .notification-button-default:not([disabled])[checked="true"] {
michael@0:   background: linear-gradient(to bottom, hsl(210, 5%, 28%), hsl(210, 5%, 25%));
michael@0:   border-color: hsl(216, 4%, 27%);
michael@0:   color: white;
michael@0: }
michael@0: 
michael@0: /* Disabled button colors (both default and non-default */
michael@0: 
michael@0: button[disabled] {
michael@0:   background: linear-gradient(to bottom, hsl(210, 3%, 93%), hsl(210, 3%, 92%));
michael@0:   border-color: hsl(210, 3%, 91%);
michael@0:   color: hsl(0, 0%, 60%);
michael@0: }
michael@0: 
michael@0: /* Textbox ----------------------------------------------------------------- */
michael@0: 
michael@0: textbox[isempty="true"] {
michael@0:   color: @field_mid_foreground_color@;
michael@0: }
michael@0: 
michael@0: spinbuttons {
michael@0:   border: none;
michael@0: }
michael@0: 
michael@0: .spinbuttons-box {
michael@0:   border: none;
michael@0:   -moz-box-orient: horizontal;
michael@0:   -moz-box-direction: reverse;
michael@0: }
michael@0: 
michael@0: .spinbuttons-down,
michael@0: .spinbuttons-up {
michael@0:   border: none !important;
michael@0: }
michael@0: 
michael@0: .spinbuttons-down {
michael@0:   list-style-image: url("chrome://browser/skin/images/arrowdown-16.png");
michael@0: }
michael@0: 
michael@0: .spinbuttons-up {
michael@0:   list-style-image: url("chrome://browser/skin/images/arrowup-16.png");
michael@0: }
michael@0: 
michael@0: /* Menu List --------------------------------------------------------------- */
michael@0: 
michael@0: menulist {
michael@0:   -moz-user-focus: ignore;
michael@0:   padding: @metro_spacing_xsmall@ 0;
michael@0:   -moz-padding-start: @metro_spacing_small@;
michael@0:   border-color: @field_disabled_foreground_color@ !important;
michael@0: }
michael@0: 
michael@0: /* Popup Menus ------------------------------------------------------------- */
michael@0: 
michael@0: .menu-container {
michael@0:   position: absolute;
michael@0:   opacity: 0;
michael@0: }
michael@0: 
michael@0: .menu-container[showingfrom="below"] {
michael@0:   transform: translateY(@metro_spacing_normal@);
michael@0: }
michael@0: 
michael@0: .menu-container[showingfrom="above"] {
michael@0:   transform: translateY(-@metro_spacing_normal@);
michael@0: }
michael@0: 
michael@0: .menu-container[hiding],
michael@0: .menu-container[showing] {
michael@0:   transition: opacity ease-out 0.2s,
michael@0:               transform ease-out 0.2s;
michael@0: }
michael@0: 
michael@0: .menu-container[showing] {
michael@0:   opacity: 1;
michael@0:   transform: none;
michael@0: }
michael@0: 
michael@0: .menu-popup > richlistbox {
michael@0:   padding: 3px 0;
michael@0:   border: #000 solid @metro_border_thick@;
michael@0:   -moz-appearance: none;
michael@0:   display: -moz-box;
michael@0: }
michael@0: 
michael@0: .menu-popup > richlistbox > scrollbox {
michael@0:   width: 100%;
michael@0:   overflow-x: hidden !important;
michael@0: }
michael@0: 
michael@0: .menu-popup richlistitem {
michael@0:   width: 100%;
michael@0:   min-height: @touch_button_small@;
michael@0:   min-width: @touch_action_minwidth@; /* keep the button from being too narrow */
michael@0:   border: 0 none;
michael@0:   -moz-box-align: center;
michael@0:   font-weight: 600;
michael@0: }
michael@0: .menu-popup > richlistbox > richlistitem {
michael@0:   -moz-padding-end: 50px;
michael@0: }
michael@0: /* Additional styles applied to popups for form <select> elements. */
michael@0: #select-container {
michael@0:   padding: 0;
michael@0:   position: absolute;
michael@0:   background-color: transparent;
michael@0: }
michael@0: 
michael@0: #select-commands {
michael@0:   -moz-appearance: none;
michael@0:   background-color: white;
michael@0:   border: #000 solid @metro_border_thick@;
michael@0:   display: -moz-box;
michael@0:   -moz-user-focus: ignore;
michael@0:   -moz-box-align: stretch;
michael@0:   width: 100%;
michael@0: }
michael@0: 
michael@0: /* ensure click events are dispatched targetting the select option not the label */
michael@0: #select-commands > .option-command > label {
michael@0:   pointer-events: none;
michael@0: }
michael@0: 
michael@0: /* listcell element doesn't have flex="1" so we need to force it */
michael@0: .option-command > listcell {
michael@0:   -moz-box-flex: 1 !important;
michael@0: }
michael@0: 
michael@0: .option-command {
michael@0:   min-height: @touch_button_small@;
michael@0:   min-width: @touch_action_minwidth@; /* keep the button from being too narrow */
michael@0:   border: 0 none;
michael@0: }
michael@0: 
michael@0: .option-command.optgroup {
michael@0:   font-weight: bold;
michael@0:   font-style: italic;
michael@0:   pointer-events: none;
michael@0: }
michael@0: 
michael@0: .select-popup > richlistbox > scrollbox {
michael@0:   width: 100%;
michael@0:   overflow-x: hidden !important;
michael@0: }
michael@0: 
michael@0: /* Toolbar Button --------------------------------------------------------- */
michael@0: 
michael@0: toolbarbutton {
michael@0:   min-width: @metro_spacing_large@; /* primary button size */
michael@0:   min-height: @metro_spacing_large@; /* primary button size */
michael@0:   -moz-appearance: none;
michael@0:   margin: 0;
michael@0:   padding: @metro_spacing_xsmall@;
michael@0: }
michael@0: 
michael@0: toolbarbutton:not(.show-text) .toolbarbutton-text {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: .toolbarbutton-icon[label]:not([label=""]),
michael@0: .toolbarbutton-icon[type="menu"] {
michael@0:   -moz-margin-end: @metro_spacing_xsmall@;
michael@0: }
michael@0: 
michael@0: toolbarbutton:not(.show-text) .toolbarbutton-icon,
michael@0: toolbarbutton:not([image]) .toolbarbutton-icon,
michael@0: toolbarbutton[image=''] .toolbarbutton-icon {
michael@0:   -moz-margin-end: 0;
michael@0: }
michael@0: 
michael@0: toolbarbutton:hover,
michael@0: toolbarbutton:hover:active,
michael@0: toolbarbutton[open="true"] {
michael@0:   border-color: transparent;
michael@0: }
michael@0: 
michael@0: /* Toggleswitch ------------------------------------------------------------ */
michael@0: 
michael@0: checkbox.toggleswitch {
michael@0:   margin: @metro_spacing_small@;
michael@0:   min-height: @metro_spacing_normal@;
michael@0:   font-weight: bold;
michael@0: }
michael@0: 
michael@0: checkbox.toggleswitch hbox {
michael@0:   -moz-box-align: center;
michael@0: }
michael@0: 
michael@0: checkbox.toggleswitch:not([checked]) .onlabel,
michael@0: checkbox.toggleswitch[checked] .offlabel {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: checkbox.toggleswitch radiogroup {
michael@0:   border: @metro_border_thick@ solid @field_disabled_foreground_color@;
michael@0:   -moz-box-orient: horizontal;
michael@0: }
michael@0: 
michael@0: checkbox.toggleswitch radio {
michael@0:   -moz-appearance: none;
michael@0:   margin: 0;
michael@0:   border: 0 none;
michael@0:   border-radius: 0;
michael@0:   background: 0 none;
michael@0:   padding: 0;
michael@0:   min-height: @metro_spacing_normal@;
michael@0:   height: @metro_spacing_normal@;
michael@0: }
michael@0: 
michael@0: checkbox.toggleswitch[checked] radio.checkbox-radio-on,
michael@0: checkbox.toggleswitch:not([checked]) radio.checkbox-radio-off {
michael@0:   width: @metro_spacing_normal@;
michael@0:   min-width: @metro_spacing_normal@;
michael@0:   background: #000;
michael@0:   margin: -@metro_border_thick@;
michael@0: }
michael@0: 
michael@0: checkbox.toggleswitch[checked] radio.checkbox-radio-off,
michael@0: checkbox.toggleswitch:not([checked]) radio.checkbox-radio-on {
michael@0:   width: @metro_spacing_xxxnormal@;
michael@0:   min-width: @metro_spacing_xxxnormal@;
michael@0:   margin: @metro_border_thin@;
michael@0: }
michael@0: 
michael@0: checkbox.toggleswitch:not([checked]) radio.checkbox-radio-on {
michael@0:   background: @field_disabled_foreground_color@;
michael@0: }
michael@0: 
michael@0: checkbox.toggleswitch[checked] radio.checkbox-radio-off {
michael@0:   background: @selected_color@;
michael@0: }
michael@0: 
michael@0: checkbox.toggleswitch[checked] radio:last-child {
michael@0:   -moz-margin-start: 0;
michael@0: }
michael@0: 
michael@0: checkbox.toggleswitch[checked] radio:first-child {
michael@0:   -moz-margin-end: 0;
michael@0: }
michael@0: 
michael@0: /* Color Picker ------------------------------------------------------------ */
michael@0: 
michael@0: colorpicker > panel {
michael@0:   background-color: #767973;
michael@0: }
michael@0: 
michael@0: colorpicker > vbox {
michael@0:   background-color: #767973;
michael@0: }
michael@0: 
michael@0: /* Rich List Box ---------------------------------------------------------- */
michael@0: 
michael@0: richlistbox {
michael@0:   -moz-user-focus: ignore;
michael@0:   margin: 0;
michael@0: }
michael@0: 
michael@0: richlistitem {
michael@0:   -moz-user-focus: ignore;
michael@0:   min-height: @metro_spacing_normal@; /* row size */
michael@0:   padding: @metro_spacing_small@;
michael@0: }
michael@0: 
michael@0: richlistitem label.normal,
michael@0: richlistitem description.normal,
michael@0: richlistitem label.normal-black,
michael@0: richlistitem description.normal-black,
michael@0: richlistitem label.normal-bold,
michael@0: richlistitem description.normal-bold{
michael@0:   white-space: pre-wrap;
michael@0:   word-wrap: break-word;
michael@0: }
michael@0: 
michael@0: richlistitem label.normal,
michael@0: richlistitem description.normal {
michael@0:   color: gray;
michael@0: }
michael@0: 
michael@0: richlistitem label.normal-bold,
michael@0: richlistitem description.normal-bold {
michael@0:   font-weight: bold;
michael@0: }
michael@0: 
michael@0: richlistitem[selected],
michael@0: richlistitem:not([disabled]):not([selected]):active {
michael@0:   background-color: @metro_orange@;
michael@0:   color: #fff;
michael@0: }
michael@0: 
michael@0: richlistitem:not([disabled]):not([selected]):hover {
michael@0:   background-color: #ccc;
michael@0: }
michael@0: 
michael@0: richlistitem.section-header,
michael@0: richlistitem[selected].section-header {
michael@0:   font-weight: bold;
michael@0:   color: #000;
michael@0:   background-color: lightgray;
michael@0: }
michael@0: 
michael@0: richlistitem[selected] .hide-on-select,
michael@0: richlistitem .show-on-select {
michael@0:   visibility: collapse;
michael@0: }
michael@0: 
michael@0: richlistitem[selected] .show-on-select,
michael@0: richlistitem .hide-on-select {
michael@0:   visibility: visible;
michael@0: }
michael@0: 
michael@0: richlistitem[typeName="message"] {
michael@0:   border-bottom: 0;
michael@0: }
michael@0: 
michael@0: /* Notification box ("info app bar") ---------------------------------------- */
michael@0: 
michael@0: notification {
michael@0:   background: hsl(0, 0%, 98%);
michael@0:   border-bottom: 1px solid hsla(0, 0%, 0%, .07);
michael@0:   box-shadow: 0 0 10px hsla(0, 0%, 0%, .1);
michael@0:   min-height: 64px;
michael@0: }
michael@0: 
michael@0: notificationbox[count="0"] .notification-layer,
michael@0: notificationbox[count="1"] .notification-layer,
michael@0: notificationbox[count="2"] .notification-layer[anonid="layer2"] {
michael@0:   visibility: collapse;
michael@0: }
michael@0: 
michael@0: notificationbox[count="2"] .notification-layer[anonid="layer1"],
michael@0: notificationbox[count="3"] .notification-layer[anonid="layer1"],
michael@0: notificationbox[count="3"] .notification-layer[anonid="layer2"] {
michael@0:   visibility: visible;
michael@0: }
michael@0: 
michael@0: .notification-layer {
michael@0:   border: @metro_border_thin@ solid @field_disabled_foreground_color@;
michael@0:   border-bottom: none;
michael@0:   height:5px
michael@0: }
michael@0: 
michael@0: .notification-inner {
michael@0:   border-style: none;
michael@0:   border: @metro_border_thin@ solid @field_disabled_foreground_color@;
michael@0: }
michael@0: 
michael@0: .notification-button {
michael@0:   -moz-margin-start: 0;
michael@0:   -moz-margin-end: 20px;
michael@0: }
michael@0: 
michael@0: .messageImage {
michael@0:   width: 32px;
michael@0:   height: 32px;
michael@0:   -moz-margin-start: 40px;
michael@0:   -moz-margin-end: 16px;
michael@0: }
michael@0: 
michael@0: /* If there is no image set, collapse the image but keep the starting margin */
michael@0: .messageImage:not([src]) {
michael@0:   width: 0;
michael@0:   -moz-margin-end: 0;
michael@0: }
michael@0: 
michael@0: .messageText {
michael@0:   margin: 0;
michael@0: }
michael@0: 
michael@0: .messageCloseButton {
michael@0:   list-style-image: url("chrome://browser/skin/images/infobar-close.png");
michael@0:   padding: 0;
michael@0:   -moz-margin-start: 0;
michael@0:   -moz-margin-end: 40px;
michael@0:   -moz-image-region: rect(0, 40px, 40px, 0);
michael@0: }
michael@0: 
michael@0: .messageCloseButton > .toolbarbutton-icon {
michael@0:   margin: 0;
michael@0: }
michael@0: 
michael@0: .messageCloseButton:hover {
michael@0:   -moz-image-region: rect(0, 80px, 40px, 40px);
michael@0: }
michael@0: 
michael@0: .messageCloseButton:hover:active {
michael@0:   -moz-image-region: rect(0, 120px, 40px, 80px);
michael@0: }
michael@0: 
michael@0: .notification-link {
michael@0:   /* Make the link take up all the space before the buttons. */
michael@0:   -moz-box-flex: 9999;
michael@0: }
michael@0: 
michael@0: /* ensure the notification children pick up snapped-view box property overrides */
michael@0: .notification-button.box-inherit {
michael@0:   -moz-margin-start: inherit;
michael@0:   -moz-margin-end: inherit;
michael@0:   width: inherit;
michael@0:   display: inherit;
michael@0:   overflow: inherit;
michael@0: }
michael@0: 
michael@0: @media (max-width: 330px) {
michael@0:   /* notifications need layout tweaks in narrow viewport
michael@0:    */
michael@0:   .notification-button {
michael@0:       display: block;
michael@0:       width: calc(100% - 40px);
michael@0:       overflow: visible;
michael@0:       -moz-margin-start: 40px;
michael@0:       -moz-margin-end: 0;
michael@0:   }
michael@0: 
michael@0:   .notification-inner {
michael@0:     display: block;
michael@0:     padding: @metro_spacing_xnormal@;
michael@0:   }
michael@0:   .notification-inner > [anonid="details"] {
michael@0:     display: inline-block;
michael@0:     width: calc(100% - 48px);
michael@0:   }
michael@0: 
michael@0:   .notification-inner > .messageCloseButton {
michael@0:     display: inline-block;
michael@0:     vertical-align: top;
michael@0:     -moz-margin-start: 8px;
michael@0:     -moz-margin-end: 0;
michael@0:   }
michael@0:   .notification-inner > [anonid="details"] > .messageImage {
michael@0:     display: inline;
michael@0:     vertical-align: top;
michael@0:     -moz-margin-start: 0;
michael@0:     -moz-margin-end: 8px;
michael@0:   }
michael@0:   .notification-inner > [anonid="details"] > .messageText {
michael@0:     display: inline-block;
michael@0:     width: calc(100% - 40px);
michael@0:     overflow: visible;
michael@0:   }
michael@0: 
michael@0: }
michael@0: 
michael@0: /* Prompts ----------------------------------------------------------------- */
michael@0: 
michael@0: .mainContainer {
michael@0:   padding: 5vh 10vw;
michael@0: }
michael@0: 
michael@0: .info\.title {
michael@0:   font-size: @metro_font_large@;
michael@0:   border-bottom: 1px solid #C7C7C7;
michael@0:   padding-bottom: @metro_spacing_normal@;
michael@0:   width: 100%;
michael@0:   margin-left: 0;
michael@0:   margin-right: 0;
michael@0: }
michael@0: 
michael@0: .info\.body {
michael@0:   font-size: @metro_font_normal@;
michael@0:   padding-bottom: @metro_spacing_normal@;
michael@0:   height: 100%;
michael@0:   max-height: 30vh;
michael@0:   max-width: 55vw;
michael@0: }
michael@0: 
michael@0: .buttonContainer {
michael@0:   background-color: transparent;
michael@0:   border: none;
michael@0: }
michael@0: 
michael@0: .buttonContainer > button {
michael@0:   min-width: @touch_action_minwidth@;
michael@0:   margin: 5px 0 5px @metro_spacing_xnormal@;
michael@0: }
michael@0: 
michael@0: /* set all the things to display block to allow body to grow with content and
michael@0:   obey overflow auto. Except on authentication prompts because a grid is used to
michael@0:   align labels and textboxes. */
michael@0: tabmodalprompt:not([promptType="promptUserAndPass"]) .info\.body,
michael@0: tabmodalprompt:not([promptType="promptUserAndPass"]) .infoContainer,
michael@0: tabmodalprompt:not([promptType="promptUserAndPass"]) .topContainer,
michael@0: tabmodalprompt:not([promptType="promptUserAndPass"]) .topContainer > rows > row:not([hidden]),
michael@0: tabmodalprompt:not([promptType="promptUserAndPass"]) .topContainer > rows {
michael@0:   display: block;
michael@0: }
michael@0: 
michael@0: tabmodalprompt:not([promptType="promptUserAndPass"]) .infoContainer {
michael@0:   overflow: auto;
michael@0: }
michael@0: 
michael@0: .topContainer > rows > row > label {
michael@0:   margin-left: 0;
michael@0: }
michael@0: 
michael@0: .topContainer > rows > row > checkbox {
michael@0:   -moz-margin-start: 0;
michael@0:   -moz-padding-start: 0;
michael@0: }
michael@0: 
michael@0: .topContainer > rows > row > textbox {
michael@0:   font-size: @metro_font_normal@;
michael@0:   height: 40px;
michael@0:   margin: 5px 0;
michael@0:   width: 100%;
michael@0: }
michael@0: 
michael@0: .topContainer > rows > row > textbox[focused] {
michael@0:   border-color: @metro_orange@ !important;
michael@0: }
michael@0: 
michael@0: #stack[keyboardVisible] tabmodalprompt > spacer {
michael@0:   min-height: 20px;
michael@0:   max-height: 20px;
michael@0: }
michael@0: 
michael@0: #stack[keyboardVisible] tabmodalprompt .info\.body {
michael@0:   max-height: 15vh;
michael@0: }
michael@0: 
michael@0: @media (max-width: 600px) {
michael@0:   .mainContainer {
michael@0:     padding: 5vh 5vw;
michael@0:     width: 90vw;
michael@0:   }
michael@0: 
michael@0:   .buttonContainer > button {
michael@0:     min-width: @touch_action_snapped_minwidth@;
michael@0:   }
michael@0: }
michael@0: 
michael@0: /*.meta -------------------------------------------------------------------- */
michael@0: 
michael@0: .meta {
michael@0:   background-color: @panel_light_color@;
michael@0: }
michael@0: 
michael@0: /* needs to observe the viewstate */
michael@0: .meta-section-container {
michael@0:   padding: 45px 75px 0;
michael@0:   -moz-box-orient: horizontal;
michael@0: }
michael@0: 
michael@0: .meta-section-container[viewstate="snapped"],
michael@0: .meta-section-container[viewstate="portrait"] {
michael@0:   -moz-box-orient: vertical;
michael@0:   -moz-box-flex: 1;
michael@0: }
michael@0: 
michael@0: .meta-section-container[viewstate="snapped"] {
michael@0:   padding: 0;
michael@0: }
michael@0: 
michael@0: .meta-section {
michael@0:   margin: 0 @metro_spacing_large@;
michael@0: }
michael@0: 
michael@0: .meta-section-container[viewstate="snapped"] > .meta-section {
michael@0:   margin: 0 @metro_spacing_xnormal@;
michael@0: }
michael@0: 
michael@0: .meta-section-title {
michael@0:   margin: @metro_spacing_normal@ @tile_side_margin@;
michael@0:   font-size: @metro_font_large@;
michael@0:   font-weight: 100;
michael@0:   cursor: default;
michael@0: }
michael@0: 
michael@0: .meta-section-title.wide-title {
michael@0:   font-size: @metro_font_xlarge@;
michael@0:   margin-bottom: calc(40px - @tile_side_margin@);
michael@0: }
michael@0: 
michael@0: .meta-section:not([expanded]) > .meta-section-title.narrow-title:after {
michael@0:   content: ">";
michael@0: }
michael@0: 
michael@0: .meta-section-container:not([viewstate="snapped"]) .meta-section-title.narrow-title,
michael@0: .meta-section-container[viewstate="snapped"] .meta-section-title.wide-title {
michael@0:   display: none;
michael@0: }
michael@0: 
michael@0: .meta-section-container[viewstate="snapped"] .meta-section-title,
michael@0: .meta-section-container[viewstate="snapped"] richgrid {
michael@0:   margin-top: @metro_spacing_xnormal@;
michael@0:   padding: 0;
michael@0: }
michael@0: 
michael@0: .meta-section > richgrid {
michael@0:   opacity: 1;
michael@0:   transform: translateX(0) translateY(0);
michael@0:   transition-duration: 367ms;
michael@0:   transition-delay: 500ms;
michael@0:   transition-timing-function: @metro_animation_easing@;
michael@0: }
michael@0: 
michael@0: .meta-section:nth-child(2) > richgrid {
michael@0:   transition-delay: 600ms;
michael@0: }
michael@0: .meta-section:nth-child(3) > richgrid {
michael@0:   transition-delay: 700ms;
michael@0: }
michael@0: .meta-section:nth-child(4) > richgrid {
michael@0:   transition-delay: 800ms;
michael@0: }
michael@0: 
michael@0: .meta-section > richgrid[fade] {
michael@0:   opacity: 0;
michael@0:   transform: translateX(150px) translateY(25px);
michael@0: }
michael@0: 
michael@0: #start-container[viewstate="snapped"] .meta-section > richgrid {
michael@0:   transition-property: none;
michael@0: }
michael@0: 
michael@0: /* Autocomplete ----------------------------------------------------------------- */
michael@0: 
michael@0: #urlbar-autocomplete-scroll:not([autocomplete]) {
michael@0:   transform: translateY(calc(3 * @grid_row_height@ + 64px));
michael@0:   visibility: collapse;
michael@0: }
michael@0: 
michael@0: #urlbar-autocomplete-scroll[autocomplete] {
michael@0:   height: calc(3 * @grid_row_height@ + 64px);
michael@0:   max-height: calc(3 * @grid_row_height@ + 64px);
michael@0:   transform: translateY(0);
michael@0:   transition-timing-function: @metro_animation_easing@;
michael@0:   transition-property: transform;
michael@0:   transition-duration: @metro_animation_duration@;
michael@0:   transition-delay: 0s;
michael@0:   visibility: visible;
michael@0: }
michael@0: 
michael@0: #urlbar-autocomplete-scroll:not([autocomplete]) > .meta-section-container > .meta-section {
michael@0:   opacity: 0;
michael@0: }
michael@0: 
michael@0: #urlbar-autocomplete > .meta-section {
michael@0:   opacity: 1;
michael@0:   transition-property: opacity;
michael@0:   transition-timing-function: @metro_animation_easing@;
michael@0:   transition-duration: @metro_animation_duration@;
michael@0:   transition-delay: 0s;
michael@0:   visibility: visible;
michael@0: }
michael@0: 
michael@0: #urlbar-autocomplete[nomatch] > .meta-section[anonid="results-container"] {
michael@0:   opacity: 0;
michael@0:   visibility: collapse;
michael@0: }
michael@0: 
michael@0: #urlbar-autocomplete richgriditem:not([value]) {
michael@0:   visibility: collapse;
michael@0: }
michael@0: 
michael@0: /* App bars ----------------------------------------------------------------- */
michael@0: 
michael@0: appbar {
michael@0:   display: block;
michael@0:   position: fixed;
michael@0:   bottom: 0;
michael@0:   width: 100%;
michael@0:   transform: translateY(100%);
michael@0:   transition: transform @metro_animation_duration@ @metro_animation_easing@;
michael@0:   font-size: 0;
michael@0:   visibility: hidden;
michael@0: }
michael@0: 
michael@0: appbar[hiding],
michael@0: appbar[visible] {
michael@0:   visibility: visible;
michael@0: }
michael@0: 
michael@0: appbar[visible] {
michael@0:   transform: none;
michael@0: }
michael@0: 
michael@0: #stack[keyboardVisible] > appbar {
michael@0:   /* Slow the bottom up transition since it's impossible to match the system's
michael@0:      soft keyboard movement. */
michael@0:   transition: transform @metro_animation_duration@ @metro_animation_easing@,
michael@0:               bottom @appbar_keyboard_slideup_duration@ @appbar_keyboard_slideup_easing@ @appbar_keyboard_slideup_delay@;
michael@0: }
michael@0: 
michael@0: 
michael@0: appbar toolbar {
michael@0:   -moz-appearance: none;
michael@0:   -moz-box-align: center;
michael@0:   border: 0;
michael@0:   width: 100%;
michael@0:   min-height: @toolbar_height@;
michael@0:   font-size: 1rem;
michael@0: }
michael@0: 
michael@0: appbar toolbar toolbarbutton {
michael@0:   border: 0;
michael@0:   margin: 0 @toolbar_horizontal_spacing@;
michael@0:   padding: 0;
michael@0:   /* Don't inherit background-color from toolbarbutton[checked="true"] */
michael@0:   background-color: transparent;
michael@0: }
michael@0: 
michael@0: appbar toolbar toolbarbutton[disabled] {
michael@0:   visibility: collapse;
michael@0: }
michael@0: 
michael@0: appbar toolbar[labelled] {
michael@0:   min-height: @labelled_toolbar_height@;
michael@0: }
michael@0: 
michael@0: appbar toolbar[labelled] toolbarbutton {
michael@0:   -moz-box-orient: vertical;
michael@0: }
michael@0: 
michael@0: appbar toolbar[labelled] toolbarbutton > .toolbarbutton-text {
michael@0:   display: block;
michael@0:   padding-top: @metro_spacing_small@;
michael@0:   font-size: 0.75rem;
michael@0: }
michael@0: 
michael@0: /* Sprites */
michael@0: 
michael@0: .appbar-primary .toolbarbutton-icon,
michael@0: .appbar-secondary .toolbarbutton-icon {
michael@0:   width: 40px;
michael@0:   height: 40px;
michael@0: }
michael@0: 
michael@0: /* Primary sprite format: one button per sprite.
michael@0: 
michael@0:    States from left to right:
michael@0:    normal, hover, active/toggled, toggled+hover, toggled+active. */
michael@0: 
michael@0: .appbar-primary {
michael@0:   -moz-image-region: rect(0 40px 40px 0);
michael@0: }
michael@0: 
michael@0: .appbar-primary:not([checked]):hover:not(:active):not([disabled]) {
michael@0:   -moz-image-region: rect(0 80px 40px 40px);
michael@0: }
michael@0: 
michael@0: .appbar-primary:not([checked]):active:not([disabled]),
michael@0: .appbar-primary[checked] {
michael@0:   -moz-image-region: rect(0 120px 40px 80px);
michael@0: }
michael@0: 
michael@0: .appbar-primary[checked]:hover:not(:active):not([disabled]) {
michael@0:   -moz-image-region: rect(0 160px 40px 120px);
michael@0: }
michael@0: 
michael@0: .appbar-primary[checked]:active:not([disabled]) {
michael@0:   -moz-image-region: rect(0 200px 40px 160px);
michael@0: }
michael@0: 
michael@0: @media (min-resolution: @min_res_140pc@) {
michael@0:   .appbar-primary {
michael@0:     -moz-image-region: rect(0 56px 56px 0);
michael@0:   }
michael@0: 
michael@0:   .appbar-primary:not([checked]):hover:not(:active):not([disabled]) {
michael@0:     -moz-image-region: rect(0 112px 56px 56px);
michael@0:   }
michael@0: 
michael@0:   .appbar-primary:not([checked]):active:not([disabled]),
michael@0:   .appbar-primary[checked] {
michael@0:     -moz-image-region: rect(0 168px 56px 112px);
michael@0:   }
michael@0: 
michael@0:   .appbar-primary[checked]:hover:not(:active):not([disabled]) {
michael@0:     -moz-image-region: rect(0 224px 56px 168px);
michael@0:   }
michael@0: 
michael@0:   .appbar-primary[checked]:active:not([disabled]) {
michael@0:     -moz-image-region: rect(0 280px 56px 224px);
michael@0:   }
michael@0: }
michael@0: 
michael@0: @media (min-resolution: @min_res_180pc@) {
michael@0:   .appbar-primary {
michael@0:     -moz-image-region: rect(0 72px 72px 0);
michael@0:   }
michael@0: 
michael@0:   .appbar-primary:not([checked]):hover:not(:active):not([disabled]) {
michael@0:     -moz-image-region: rect(0 144px 72px 72px);
michael@0:   }
michael@0: 
michael@0:   .appbar-primary:not([checked]):active:not([disabled]),
michael@0:   .appbar-primary[checked] {
michael@0:     -moz-image-region: rect(0 216px 72px 144px);
michael@0:   }
michael@0: 
michael@0:   .appbar-primary[checked]:hover:not(:active):not([disabled]) {
michael@0:     -moz-image-region: rect(0 288px 72px 216px);
michael@0:   }
michael@0: 
michael@0:   .appbar-primary[checked]:active:not([disabled]) {
michael@0:     -moz-image-region: rect(0 360px 72px 288px);
michael@0:   }
michael@0: }
michael@0: 
michael@0: /* Secondary sprite format: one sprite for everything */
michael@0: 
michael@0: .appbar-secondary {
michael@0:   list-style-image: url(chrome://browser/skin/images/appbar-icons.png);
michael@0: }
michael@0: 
michael@0: /* Flyout panels (sidebars) ------------------------------------------------- */
michael@0: 
michael@0: .flyout-narrow {
michael@0:   width: 346px;
michael@0: }
michael@0: 
michael@0: /* Some elements don't resize to fit their container properly for some reason.
michael@0:  * Setting max-width on the element or a child fixes it. */
michael@0: .flyout-narrow .flyoutpanel-hack {
michael@0:   max-width: calc(346px - 2 * 40px);
michael@0: }
michael@0: 
michael@0: .console-row-code {
michael@0:    padding-top: 2px;
michael@0:    font-size: small;
michael@0: }