gecko/browser/metro/theme/forms.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/. */

%filter substitution
%include defines.inc

/* Find bar ------------------------------------------------------------- */

#content-navigator {
  display: block;
  position: fixed;
  pointer-events: none;
  padding: 0;
  bottom: 0;
  transform: translateY(100%);
  transition: transform @metro_animation_duration@ @metro_animation_easing@;
  background-color: @metro_orange@;
}

#content-navigator[showing] {
  transform: none;
}

#stack[keyboardVisible] > #content-navigator {
  /* 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@;
}

#content-navigator > .previous-button,
#content-navigator > .next-button,
#content-navigator > .close-button {
  min-width: @touch_button_small@ !important; /* button size */
  min-height: @touch_button_small@ !important; /* button size */
  border: none !important;
  background-image: none !important;
  background-color: inherit !important;
  pointer-events: auto;
  -moz-user-focus: ignore !important;
  margin: 0 @margin_normal@ !important;
}

#content-navigator > .close-button {
  -moz-margin-start: 0;
  list-style-image: url(chrome://browser/skin/images/appbar-icons.png);
  -moz-image-region: rect(0px, 480px, 40px, 440px);
}

#content-navigator > .close-button:hover {
  -moz-image-region: rect(40px, 480px, 80px, 440px);
}

#content-navigator > .close-button:active {
  -moz-image-region: rect(80px, 480px, 120px, 440px);
}

#content-navigator > .previous-button {
  -moz-margin-end: 0;
  list-style-image: url(chrome://browser/skin/images/appbar-icons.png);
  -moz-image-region: rect(0px, 400px, 40px, 360px);
}

#content-navigator > .previous-button:hover {
  -moz-image-region: rect(40px, 400px, 80px, 360px);
}

#content-navigator > .previous-button:active{
  -moz-image-region: rect(80px, 400px, 120px, 360px);
}

#content-navigator:-moz-locale-dir(ltr) > .previous-button {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

#content-navigator:-moz-locale-dir(rtl) > .previous-button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

#content-navigator > .next-button {
  -moz-margin-start: 0;
  list-style-image: url(chrome://browser/skin/images/appbar-icons.png);
  -moz-image-region: rect(0px, 440px, 40px, 400px);
}

#content-navigator > .next-button:hover {
  -moz-image-region: rect(40px, 440px, 80px, 400px);
}

#content-navigator > .next-button:active {
  -moz-image-region: rect(80px, 440px, 120px, 400px);
}

#content-navigator:-moz-locale-dir(ltr) > .next-button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

#content-navigator:-moz-locale-dir(rtl) > .next-button {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

#content-navigator[type="find"] > .previous-button {
  /* previous button overlap the textbox */
  -moz-margin-start: -@margin_normal@;
}

#content-navigator:not([type="find"]) > #find-helper-textbox {
  display: none;
}

#find-helper-textbox {
  pointer-events: auto;
  -moz-margin-end: 0;
  border: none !important;
  width: 20em;
}

.textbox-search-icon {
  list-style-image: url("chrome://browser/skin/images/search-glass-30.png");
  -moz-image-region: auto;
}

/* Override the default box ordering and make the find textbox appear to the
   right of the icon */
#find-helper-textbox input {
  -moz-box-ordinal-group: 2
}

#find-helper-textbox deck {
  margin-right: @margin_normal@;
}

#find-helper-textbox[status="1"] { /* Ci.nsITypeAheadFind.FIND_NOTFOUND */
  background: rgb(255,200,200);
}

#find-helper-textbox:hover:active {
  background: #8db8d8;
}

/* Select popup ------------------------------------------------------------- */

#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%;
}

/* listcell element doesn't have flex="1" so we need to force it */
#select-commands .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: @selected_color@ !important;
  color: black;
}

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

.option-command:not([disabled]):hover {
  background-color: #dedad0;
  color: black;
}

.option-command:not([disabled]):active {
  background-color: @selected_color@ !important;
  color: black;
}