gecko/browser/metro/theme/platform.css

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/* Global Skin ------------------------------------------------------------- */

@import url(chrome://global/skin/);

%filter substitution
%include defines.inc

/* Typography & General Styling -------------------------------------------- */

:root {
  font-family: "Segoe UI", sans-serif !important;
  font-size: @font_normal@;
}

.text-link {
  color: @metro_orange@;
  text-decoration: none;
}

textbox,
menulist {
  -moz-appearance: none;
  min-width: @field_sizing@; /* button size */
  min-height: @field_sizing@; /* button size */
  margin: @metro_spacing_small@;
  padding: @metro_spacing_xsmall@ @metro_spacing_small@;

  font-size: @metro_font_normal@;
  font-weight: normal !important;

  color: @field_foreground_color@;
  background: @field_background_color@;
  border: @metro_border_thick@ solid @field_foreground_color@ !important;
  border-radius: 0;
}

textbox[disabled],
menulist[disabled] {
  border-color: @field_disabled_foreground_color@ !important;
  color: @field_disabled_foreground_color@;
}

menulist:not([disabled]):hover:active {
  color: @field_background_color@;
  background: @field_foreground_color@;
}

/* Button ------------------------------------------------------------------ */

button {
  -moz-appearance: none;
  border: 1px solid;
  font-size: @metro_font_normal@;
  font-weight: normal;
  margin: @metro_spacing_small@;
  min-width: @field_sizing@;
  min-height: 32px;
  padding: 3px 16px;
}

/* Non-default button colors */

button {
  background: linear-gradient(to bottom, hsl(210, 5%, 89%), hsl(210, 5%, 87%));
  border-color: hsl(220, 5%, 86%);
  color: hsl(0, 0%, 10%);
}

button:not([disabled]):hover {
  background: linear-gradient(to bottom, hsl(210, 5%, 75%), hsl(210, 5%, 73%));
  border-color: hsl(210, 5%, 71%);
  color: hsl(0, 0%, 10%);
}

/* Default button colors */

button[default],
.notification-button-default {
  background: linear-gradient(to bottom, hsl(35, 100%, 50%), hsl(30, 100%, 50%));
  border-color: hsl(30, 100%, 48%);
  color: white;
}

button[default]:not([disabled]):hover,
.notification-button-default:not([disabled]):hover {
  background: linear-gradient(to bottom, hsl(25, 100%, 47%), hsl(25, 100%, 45%));
  border-color: hsl(25, 100%, 43%);
  color: white;
}

/* Pushed button colors (both default and non-default */

/* Note: these need enough specificity to override all the :hover rules above. */
button:not([disabled]):hover:active,
button:not([disabled])[checked="true"],
button[default]:not([disabled])[checked="true"],
.notification-button-default:not([disabled])[checked="true"] {
  background: linear-gradient(to bottom, hsl(210, 5%, 28%), hsl(210, 5%, 25%));
  border-color: hsl(216, 4%, 27%);
  color: white;
}

/* Disabled button colors (both default and non-default */

button[disabled] {
  background: linear-gradient(to bottom, hsl(210, 3%, 93%), hsl(210, 3%, 92%));
  border-color: hsl(210, 3%, 91%);
  color: hsl(0, 0%, 60%);
}

/* Textbox ----------------------------------------------------------------- */

textbox[isempty="true"] {
  color: @field_mid_foreground_color@;
}

spinbuttons {
  border: none;
}

.spinbuttons-box {
  border: none;
  -moz-box-orient: horizontal;
  -moz-box-direction: reverse;
}

.spinbuttons-down,
.spinbuttons-up {
  border: none !important;
}

.spinbuttons-down {
  list-style-image: url("chrome://browser/skin/images/arrowdown-16.png");
}

.spinbuttons-up {
  list-style-image: url("chrome://browser/skin/images/arrowup-16.png");
}

/* Menu List --------------------------------------------------------------- */

menulist {
  -moz-user-focus: ignore;
  padding: @metro_spacing_xsmall@ 0;
  -moz-padding-start: @metro_spacing_small@;
  border-color: @field_disabled_foreground_color@ !important;
}

/* Popup Menus ------------------------------------------------------------- */

.menu-container {
  position: absolute;
  opacity: 0;
}

.menu-container[showingfrom="below"] {
  transform: translateY(@metro_spacing_normal@);
}

.menu-container[showingfrom="above"] {
  transform: translateY(-@metro_spacing_normal@);
}

.menu-container[hiding],
.menu-container[showing] {
  transition: opacity ease-out 0.2s,
              transform ease-out 0.2s;
}

.menu-container[showing] {
  opacity: 1;
  transform: none;
}

.menu-popup > richlistbox {
  padding: 3px 0;
  border: #000 solid @metro_border_thick@;
  -moz-appearance: none;
  display: -moz-box;
}

.menu-popup > richlistbox > scrollbox {
  width: 100%;
  overflow-x: hidden !important;
}

.menu-popup richlistitem {
  width: 100%;
  min-height: @touch_button_small@;
  min-width: @touch_action_minwidth@; /* keep the button from being too narrow */
  border: 0 none;
  -moz-box-align: center;
  font-weight: 600;
}

.menu-popup > richlistbox > richlistitem {
  padding-right: 50px;
}

/* Additional styles applied to popups for form <select> elements. */

#select-container {
  padding: 0;
  position: absolute;
  background-color: transparent;
}

#select-commands {
  -moz-appearance: none;
  background-color: white;
  border: #000 solid @metro_border_thick@;
  display: -moz-box;
  -moz-user-focus: ignore;
  -moz-box-align: stretch;
  width: 100%;
}

/* ensure click events are dispatched targetting the select option not the label */
#select-commands > .option-command > label {
  pointer-events: none;
}

/* listcell element doesn't have flex="1" so we need to force it */
.option-command > listcell {
  -moz-box-flex: 1 !important;
}

.option-command {
  min-height: @touch_button_small@;
  min-width: @touch_action_minwidth@; /* keep the button from being too narrow */
  border: 0 none;
}

.option-command.selected {
  background-color: #ff8000;
  color: white;
}

.option-command.optgroup {
  font-weight: bold;
  font-style: italic;
  pointer-events: none;
}

.select-popup > richlistbox > scrollbox {
  width: 100%;
  overflow-x: hidden !important;
}

/* Toolbar Button --------------------------------------------------------- */

toolbarbutton {
  min-width: @metro_spacing_large@; /* primary button size */
  min-height: @metro_spacing_large@; /* primary button size */
  -moz-appearance: none;
  margin: 0;
  padding: @metro_spacing_xsmall@;
}

toolbarbutton:not(.show-text) .toolbarbutton-text {
  display: none;
}

.toolbarbutton-icon[label]:not([label=""]),
.toolbarbutton-icon[type="menu"] {
  -moz-margin-end: @metro_spacing_xsmall@;
}

toolbarbutton:not(.show-text) .toolbarbutton-icon,
toolbarbutton:not([image]) .toolbarbutton-icon,
toolbarbutton[image=''] .toolbarbutton-icon {
  -moz-margin-end: 0;
}

toolbarbutton:hover,
toolbarbutton:hover:active,
toolbarbutton[open="true"] {
  border-color: transparent;
}

/* Toggleswitch ------------------------------------------------------------ */

checkbox.toggleswitch {
  margin: @metro_spacing_small@;
  min-height: @metro_spacing_normal@;
  font-weight: bold;
}

checkbox.toggleswitch hbox {
  -moz-box-align: center;
}

checkbox.toggleswitch:not([checked]) .onlabel,
checkbox.toggleswitch[checked] .offlabel {
  display: none;
}

checkbox.toggleswitch radiogroup {
  border: @metro_border_thick@ solid @field_disabled_foreground_color@;
  -moz-box-orient: horizontal;
}

checkbox.toggleswitch radio {
  -moz-appearance: none;
  margin: 0;
  border: 0 none;
  border-radius: 0;
  background: 0 none;
  padding: 0;
  min-height: @metro_spacing_normal@;
  height: @metro_spacing_normal@;
}

checkbox.toggleswitch[checked] radio.checkbox-radio-on,
checkbox.toggleswitch:not([checked]) radio.checkbox-radio-off {
  width: @metro_spacing_normal@;
  min-width: @metro_spacing_normal@;
  background: #000;
  margin: -@metro_border_thick@;
}

checkbox.toggleswitch[checked] radio.checkbox-radio-off,
checkbox.toggleswitch:not([checked]) radio.checkbox-radio-on {
  width: @metro_spacing_xxxnormal@;
  min-width: @metro_spacing_xxxnormal@;
  margin: @metro_border_thin@;
}

checkbox.toggleswitch:not([checked]) radio.checkbox-radio-on {
  background: @field_disabled_foreground_color@;
}

checkbox.toggleswitch[checked] radio.checkbox-radio-off {
  background: @selected_color@;
}

checkbox.toggleswitch[checked] radio:last-child {
  -moz-margin-start: 0;
}

checkbox.toggleswitch[checked] radio:first-child {
  -moz-margin-end: 0;
}

/* Color Picker ------------------------------------------------------------ */

colorpicker > panel {
  background-color: #767973;
}

colorpicker > vbox {
  background-color: #767973;
}

/* Rich List Box ---------------------------------------------------------- */

richlistbox {
  -moz-user-focus: ignore;
  margin: 0;
}

richlistitem {
  -moz-user-focus: ignore;
  min-height: @metro_spacing_normal@; /* row size */
  padding: @metro_spacing_small@;
}

richlistitem label.normal,
richlistitem description.normal,
richlistitem label.normal-black,
richlistitem description.normal-black,
richlistitem label.normal-bold,
richlistitem description.normal-bold{
  white-space: pre-wrap;
  word-wrap: break-word;
}

richlistitem label.normal,
richlistitem description.normal {
  color: gray;
}

richlistitem label.normal-bold,
richlistitem description.normal-bold {
  font-weight: bold;
}

richlistitem[selected],
richlistitem:not([disabled]):not([selected]):active {
  background-color: @metro_orange@;
  color: #fff;
}

richlistitem:not([disabled]):not([selected]):hover {
  background-color: #ccc;
}

richlistitem.section-header,
richlistitem[selected].section-header {
  font-weight: bold;
  color: #000;
  background-color: lightgray;
}

richlistitem[selected] .hide-on-select,
richlistitem .show-on-select {
  visibility: collapse;
}

richlistitem[selected] .show-on-select,
richlistitem .hide-on-select {
  visibility: visible;
}

richlistitem[typeName="message"] {
  border-bottom: 0;
}

/* Notification box ("info app bar") ---------------------------------------- */

notification {
  background: hsl(0, 0%, 98%);
  border-bottom: 1px solid hsla(0, 0%, 0%, .07);
  box-shadow: 0 0 10px hsla(0, 0%, 0%, .1);
  min-height: 64px;
}

notificationbox[count="0"] .notification-layer,
notificationbox[count="1"] .notification-layer,
notificationbox[count="2"] .notification-layer[anonid="layer2"] {
  visibility: collapse;
}

notificationbox[count="2"] .notification-layer[anonid="layer1"],
notificationbox[count="3"] .notification-layer[anonid="layer1"],
notificationbox[count="3"] .notification-layer[anonid="layer2"] {
  visibility: visible;
}

.notification-layer {
  border: @metro_border_thin@ solid @field_disabled_foreground_color@;
  border-bottom: none;
  height:5px
}

.notification-inner {
  border-style: none;
  border: @metro_border_thin@ solid @field_disabled_foreground_color@;
}

.notification-button {
  -moz-margin-start: 0;
  -moz-margin-end: 20px;
}

.messageImage {
  width: 32px;
  height: 32px;
  -moz-margin-start: 40px;
  -moz-margin-end: 16px;
}

/* If there is no image set, collapse the image but keep the starting margin */
.messageImage:not([src]) {
  width: 0;
  -moz-margin-end: 0;
}

.messageText {
  margin: 0;
}

.messageCloseButton {
  list-style-image: url("chrome://browser/skin/images/infobar-close.png");
  padding: 0;
  -moz-margin-start: 0;
  -moz-margin-end: 40px;
  -moz-image-region: rect(0, 40px, 40px, 0);
}

.messageCloseButton > .toolbarbutton-icon {
  margin: 0;
}

.messageCloseButton:hover {
  -moz-image-region: rect(0, 80px, 40px, 40px);
}

.messageCloseButton:hover:active {
  -moz-image-region: rect(0, 120px, 40px, 80px);
}

.notification-link {
  /* Make the link take up all the space before the buttons. */
  -moz-box-flex: 9999;
}

/* ensure the notification children pick up snapped-view box property overrides */
.notification-button.box-inherit {
  -moz-margin-start: inherit;
  -moz-margin-end: inherit;
  width: inherit;
  display: inherit;
  overflow: inherit;
}

@media (max-width: 330px) {
  /* notifications need layout tweaks in narrow viewport
   */
  .notification-button {
      display: block;
      width: calc(100% - 40px);
      overflow: visible;
      -moz-margin-start: 40px;
      -moz-margin-end: 0;
  }

  .notification-inner {
    display: block;
    padding: @metro_spacing_xnormal@;
  }
  .notification-inner > [anonid="details"] {
    display: inline-block;
    width: calc(100% - 48px);
  }

  .notification-inner > .messageCloseButton {
    display: inline-block;
    vertical-align: top;
    -moz-margin-start: 8px;
    -moz-margin-end: 0;
  }
  .notification-inner > [anonid="details"] > .messageImage {
    display: inline;
    vertical-align: top;
    -moz-margin-start: 0;
    -moz-margin-end: 8px;
  }
  .notification-inner > [anonid="details"] > .messageText {
    display: inline-block;
    width: calc(100% - 40px);
    overflow: visible;
  }

}

/* Prompts ----------------------------------------------------------------- */

.mainContainer {
  padding: 5vh 10vw;
}

.info\.title {
  font-size: @metro_font_large@;
  border-bottom: 1px solid #C7C7C7;
  padding-bottom: @metro_spacing_normal@;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.info\.body {
  font-size: @metro_font_normal@;
  padding-bottom: @metro_spacing_normal@;
  height: 100%;
  max-height: 30vh;
  max-width: 55vw;
}

.buttonContainer {
  background-color: transparent;
  border: none;
}

.buttonContainer > button {
  min-width: @touch_action_minwidth@;
  margin: 5px 0 5px @metro_spacing_xnormal@;
}

/* set all the things to display block to allow body to grow with content and
  obey overflow auto. Except on authentication prompts because a grid is used to
  align labels and textboxes. */
tabmodalprompt:not([promptType="promptUserAndPass"]) .info\.body,
tabmodalprompt:not([promptType="promptUserAndPass"]) .infoContainer,
tabmodalprompt:not([promptType="promptUserAndPass"]) .topContainer,
tabmodalprompt:not([promptType="promptUserAndPass"]) .topContainer > rows > row:not([hidden]),
tabmodalprompt:not([promptType="promptUserAndPass"]) .topContainer > rows {
  display: block;
}

tabmodalprompt:not([promptType="promptUserAndPass"]) .infoContainer {
  overflow: auto;
}

.topContainer > rows > row > label {
  margin-left: 0;
}

.topContainer > rows > row > checkbox {
  -moz-margin-start: 0;
  -moz-padding-start: 0;
}

.topContainer > rows > row > textbox {
  font-size: @metro_font_normal@;
  height: 40px;
  margin: 5px 0;
  width: 100%;
}

.topContainer > rows > row > textbox[focused] {
  border-color: @metro_orange@ !important;
}

@media (max-width: 600px) {
  .mainContainer {
    padding: 5vh 5vw;
    width: 90vw;
  }

  .buttonContainer > button {
    min-width: @touch_action_snapped_minwidth@;
  }
}

/*.meta -------------------------------------------------------------------- */

.meta {
  background-color: @panel_light_color@;
}

/* needs to observe the viewstate */
.meta-section-container {
  padding: 45px 75px 0;
  -moz-box-orient: horizontal;
}

.meta-section-container[viewstate="snapped"],
.meta-section-container[viewstate="portrait"] {
  -moz-box-orient: vertical;
  -moz-box-flex: 1;
}

.meta-section-container[viewstate="snapped"] {
  padding: 0;
}

.meta-section {
  margin: 0 @metro_spacing_large@;
}

.meta-section-container[viewstate="snapped"] > .meta-section {
  margin: 0 @metro_spacing_xnormal@;
}

.meta-section-title {
  margin: @metro_spacing_normal@ @tile_side_margin@;
  font-size: @metro_font_large@;
  font-weight: 100;
  cursor: default;
}

.meta-section-title.wide-title {
  font-size: @metro_font_xlarge@;
  margin-bottom: calc(40px - @tile_side_margin@);
}

.meta-section:not([expanded]) > .meta-section-title.narrow-title:-moz-locale-dir(ltr):after {
  content: ">";
}

.meta-section:not([expanded]) > .meta-section-title.narrow-title:-moz-locale-dir(rtl):before {
  content: "<";
}

.meta-section-container:not([viewstate="snapped"]) .meta-section-title.narrow-title,
.meta-section-container[viewstate="snapped"] .meta-section-title.wide-title {
  display: none;
}

.meta-section-container[viewstate="snapped"] .meta-section-title,
.meta-section-container[viewstate="snapped"] richgrid {
  margin-top: @metro_spacing_xnormal@;
  padding: 0;
}

.meta-section > richgrid {
  opacity: 1;
  transform: translateX(0) translateY(0);
  transition-duration: 367ms;
  transition-delay: 500ms;
  transition-timing-function: @metro_animation_easing@;
}

.meta-section:nth-child(2) > richgrid {
  transition-delay: 600ms;
}
.meta-section:nth-child(3) > richgrid {
  transition-delay: 700ms;
}
.meta-section:nth-child(4) > richgrid {
  transition-delay: 800ms;
}

.meta-section > richgrid[fade] {
  opacity: 0;
  transform: translateX(150px) translateY(25px);
}

#start-container[viewstate="snapped"] .meta-section > richgrid {
  transition-property: none;
}


/* App bars ----------------------------------------------------------------- */

appbar {
  display: block;
  position: fixed;
  bottom: 0;
  width: 100%;
  transform: translateY(100%);
  transition: transform @metro_animation_duration@ @metro_animation_easing@;
  font-size: 0;
  visibility: hidden;
}

appbar[hiding],
appbar[visible] {
  visibility: visible;
}

appbar[visible] {
  transform: none;
}

#stack[keyboardVisible] > appbar {
  /* Slow the bottom up transition since it's impossible to match the system's
     soft keyboard movement. */
  transition: transform @metro_animation_duration@ @metro_animation_easing@,
              bottom @appbar_keyboard_slideup_duration@ @metro_animation_easing@;
}


appbar toolbar {
  -moz-appearance: none;
  -moz-box-align: center;
  border: 0;
  width: 100%;
  min-height: @toolbar_height@;
  font-size: 1rem;
}

appbar toolbar toolbarbutton {
  border: 0;
  margin: 0 @toolbar_horizontal_spacing@;
  padding: 0;
  /* Don't inherit background-color from toolbarbutton[checked="true"] */
  background-color: transparent;
}

appbar toolbar toolbarbutton[disabled] {
  visibility: collapse;
}

appbar toolbar[labelled] {
  min-height: @labelled_toolbar_height@;
}

appbar toolbar[labelled] toolbarbutton {
  -moz-box-orient: vertical;
}

appbar toolbar[labelled] toolbarbutton > .toolbarbutton-text {
  display: block;
  padding-top: @metro_spacing_small@;
  font-size: 0.75rem;
}

/* Sprites */

.appbar-primary > .toolbarbutton-icon,
.appbar-secondary > .toolbarbutton-icon {
  width: 40px;
  height: 40px;
}

/* Primary sprite format: one button per sprite.

   States from left to right:
   normal, hover, active/toggled, toggled+hover, toggled+active. */

.appbar-primary {
  -moz-image-region: rect(0 40px 40px 0);
}

.appbar-primary:not([checked]):hover:not(:active):not([disabled]) {
  -moz-image-region: rect(0 80px 40px 40px);
}

.appbar-primary:not([checked]):active:not([disabled]),
.appbar-primary[checked] {
  -moz-image-region: rect(0 120px 40px 80px);
}

.appbar-primary[checked]:hover:not(:active):not([disabled]) {
  -moz-image-region: rect(0 160px 40px 120px);
}

.appbar-primary[checked]:active:not([disabled]) {
  -moz-image-region: rect(0 200px 40px 160px);
}

@media (min-resolution: @min_res_140pc@) {
  .appbar-primary {
    -moz-image-region: rect(0 56px 56px 0);
  }

  .appbar-primary:not([checked]):hover:not(:active):not([disabled]) {
    -moz-image-region: rect(0 112px 56px 56px);
  }

  .appbar-primary:not([checked]):active:not([disabled]),
  .appbar-primary[checked] {
    -moz-image-region: rect(0 168px 56px 112px);
  }

  .appbar-primary[checked]:hover:not(:active):not([disabled]) {
    -moz-image-region: rect(0 224px 56px 168px);
  }

  .appbar-primary[checked]:active:not([disabled]) {
    -moz-image-region: rect(0 280px 56px 224px);
  }
}

@media (min-resolution: @min_res_180pc@) {
  .appbar-primary {
    -moz-image-region: rect(0 72px 72px 0);
  }

  .appbar-primary:not([checked]):hover:not(:active):not([disabled]) {
    -moz-image-region: rect(0 144px 72px 72px);
  }

  .appbar-primary:not([checked]):active:not([disabled]),
  .appbar-primary[checked] {
    -moz-image-region: rect(0 216px 72px 144px);
  }

  .appbar-primary[checked]:hover:not(:active):not([disabled]) {
    -moz-image-region: rect(0 288px 72px 216px);
  }

  .appbar-primary[checked]:active:not([disabled]) {
    -moz-image-region: rect(0 360px 72px 288px);
  }
}

/* Secondary sprite format: one sprite for everything */

.appbar-secondary {
  list-style-image: url(chrome://browser/skin/images/appbar-icons.png);
}

/* Flyout panels (sidebars) ------------------------------------------------- */

.flyout-narrow {
  width: 346px;
}

/* Some elements don't resize to fit their container properly for some reason.
 * Setting max-width on the element or a child fixes it. */
.flyout-narrow .flyoutpanel-hack {
  max-width: calc(346px - 2 * 40px);
}