gecko-dev/browser/themes/winstripe/browser/searchbar.css

/* *** winstripe *** */

%ifdef MOZ_WIDGET_GTK2
#searchbar {
  -moz-margin-start: 3px;
}
%endif

.searchbar-textbox {
  min-height: 22px;
  width: 4em;
  min-width: 4em;
  margin-right: 0px;
  margin-left: 0px;
  background-color: -moz-field;

  -moz-appearance: none;
  -moz-border-top-colors: #96969D;
  -moz-border-bottom-colors: #96969D;
  -moz-border-right-colors: #96969D;
  -moz-border-left-colors: #96969D;
  border-width: 1px;
}

.textbox-input {
  padding: 0px !important;
  margin: 0px !important;
}

/* ::::: searchbar-engine-button ::::: */

.searchbar-engine-button-stack {
  padding: 2px 0px 2px 0px;
}

.searchbar-engine-button-top {
  list-style-image: url("chrome://browser/skin/Search-provider-bkgnd.png");
  -moz-image-region: rect(0px, 32px, 10px, 0px);
  height: 10px;
}

/* GTK does not stretch image regions properly, so use background
   images instead.  See bugs 351764 and 254659. */
.searchbar-engine-button-mid-top {
  background-image: url("chrome://browser/skin/Search-provider-mid-top.png");
}

.searchbar-engine-button-mid-bottom {
  background-image: url("chrome://browser/skin/Search-provider-mid-bottom.png");
}

.searchbar-engine-button-bottom {
  list-style-image: url("chrome://browser/skin/Search-provider-bkgnd.png");
  -moz-image-region: rect(12px, 32px, 22px, 0px);
  height: 10px;
}

.searchbar-engine-button[addengines="true"] .searchbar-engine-button-top {
  -moz-image-region: rect(0px, 128px, 10px, 96px);
}

.searchbar-engine-button[addengines="true"] .searchbar-engine-button-mid-top,
.searchbar-engine-button[addengines="true"] .searchbar-engine-button-mid-bottom {
  background-position: -96px 0px;
}

.searchbar-engine-button[addengines="true"] .searchbar-engine-button-bottom {
  -moz-image-region: rect(12px, 128px, 22px, 96px);
}

.searchbar-engine-button:not([addengines="true"]):hover .searchbar-engine-button-top {
  -moz-image-region: rect(0px, 64px, 10px, 32px);
}

.searchbar-engine-button:not([addengines="true"]):hover .searchbar-engine-button-mid-top,
.searchbar-engine-button:not([addengines="true"]):hover .searchbar-engine-button-mid-bottom {
  background-position: -32px 0px;
}

.searchbar-engine-button:not([addengines="true"]):hover .searchbar-engine-button-bottom {
  -moz-image-region: rect(12px, 64px, 22px, 32px);
}

.searchbar-engine-button:not([addengines="true"])[open="true"] .searchbar-engine-button-top {
  -moz-image-region: rect(0px, 96px, 10px, 64px);
}

.searchbar-engine-button:not([addengines="true"])[open="true"] .searchbar-engine-button-mid-top,
.searchbar-engine-button:not([addengines="true"])[open="true"] .searchbar-engine-button-mid-bottom {
  background-position: -64px 0px;
}

.searchbar-engine-button:not([addengines="true"])[open="true"] .searchbar-engine-button-bottom {
  -moz-image-region: rect(12px, 96px, 22px, 64px);
}

.searchbar-engine-image {
  height: 16px;
  width: 16px;
  list-style-image: url("chrome://global/skin/icons/folder-item.png");
  -moz-image-region: rect(0px, 16px, 16px, 0px);
  -moz-margin-start: 4px;
}

.searchbar-engine-button {
  width: 32px;
  margin: 0px;
  -moz-margin-end: -1px;
  padding: 0px;
}

.searchbar-engine-button[open="true"] {
  background-position: -64px 0px;
}

.searchbar-dropmarker-image {
  list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif");
  -moz-margin-start: 3px;
}

/* ::::: search-go-button ::::: */

/* In text icon mode, the Search Go button scales independently of the field,
 * and the button can be much taller, so we have to center align the elements
 * (instead of stretching them) to prevent the field from stretching vertically
 * to match the button's height and growing too tall.  We still stretch
 * the search engine dropmarker to the height of the field via a stretchy box
 * around just those two elements.
 */
toolbar[mode="text"] .searchbar-box {
  -moz-box-align: center;
}

.search-go-button {
  list-style-image: url("chrome://browser/skin/Search-glass.png");
  border: 0px !important;
  padding: 0px;
  -moz-appearance: none;
}

.search-go-button[chromedir="rtl"] {
  list-style-image: url("chrome://browser/skin/Search-glass-rtl.png");
}

.search-go-button-stack {
  padding: 2px 0px 2px 0px;
  -moz-padding-end: 5px;
}

toolbar[mode="text"] .search-go-button {
  -moz-margin-start: 5px;
  padding: 3px;
  -moz-appearance: toolbarbutton;
}

toolbar[mode="text"] .search-go-button-stack {
  padding: 0px;
}

toolbar[mode="text"] .search-go-button,
toolbar[mode="text"] .search-go-button-stack .search-go-button-bkgnd {
  background-image: none;
  list-style-image: none;
  width: auto;
}

.search-go-button-top {
  list-style-image: url("chrome://browser/skin/Search-bkgnd.png");
  -moz-image-region: rect(0px, 25px, 10px, 0px);
  height: 10px;
}

/* GTK does not stretch image regions properly, so use background
   images instead.  See bugs 351764 and 254659. */
.search-go-button-mid-top {
  background-image: url("chrome://browser/skin/Search-mid-top.png");
}

.search-go-button-mid-bottom {
  background-image: url("chrome://browser/skin/Search-mid-bottom.png");
}

.search-go-button-bottom {
  list-style-image: url("chrome://browser/skin/Search-bkgnd.png");
  -moz-image-region: rect(12px, 25px, 22px, 0px);
  height: 10px;
}

.search-go-button-top[chromedir="rtl"],
.search-go-button-bottom[chromedir="rtl"] {
  list-style-image: url("chrome://browser/skin/Search-bkgnd-rtl.png");
}

.search-go-button-mid-top[chromedir="rtl"] {
  background-image: url("chrome://browser/skin/Search-mid-top-rtl.png");
}

.search-go-button-mid-bottom[chromedir="rtl"] {
  background-image: url("chrome://browser/skin/Search-mid-bottom-rtl.png");
}

.search-go-button-stack:hover .search-go-button-top {
  -moz-image-region: rect(0px, 50px, 10px, 25px);
}

.search-go-button-stack:hover .search-go-button-mid-top,
.search-go-button-stack:hover .search-go-button-mid-bottom  {
  background-position: -25px 0px;
}

.search-go-button-stack:hover .search-go-button-bottom {
  -moz-image-region: rect(12px, 50px, 22px, 25px);
}


/* Disabled images are not used. */
.search-go-button-stack[disabled="true"] .search-go-button-top {
  -moz-image-region: rect(0px, 75px, 10px, 50px);
}

.search-go-button-stack[disabled="true"] .search-go-button-mid-top,
.search-go-button-stack[disabled="true"] .search-go-button-mid-bottom {
  background-position: -50px 0px;
}

.search-go-button-stack[disabled="true"] .search-go-button-bottom {
  -moz-image-region: rect(12px, 75px, 22px, 50px);
}


.search-go-button-stack:hover:active .search-go-button-top {
  -moz-image-region: rect(0px, 100px, 10px, 75px);
}

.search-go-button-stack:hover:active .search-go-button-mid-top,
.search-go-button-stack:hover:active .search-go-button-mid-bottom {
  background-position: -75px 0px;
}

.search-go-button-stack:hover:active .search-go-button-bottom {
  -moz-image-region: rect(12px, 100px, 22px, 75px);
}


.search-go-button {
  -moz-image-region: rect(0px 25px 22px 0px);
}

.search-go-button:hover {
  -moz-image-region: rect(0px 50px 22px 25px);
}

.search-go-button[disabled="true"] {
  -moz-image-region: rect(0px, 75px, 22px, 50px);
}

.search-go-button:hover:active {
  -moz-image-region: rect(0px, 100px, 22px, 75px);
}

.search-go-button > .toolbarbutton-icon {
  margin: 0px !important;
}

.searchbar-engine-menuitem[selected="true"] > .menu-iconic-text {
  font-weight: bold;
}