gecko-dev/toolkit/themes/shared/global.inc.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/. */

/* all localizable skin settings shall live here */
@import url("chrome://global/locale/intl.css");
@import url("chrome://global/content/widgets.css");

@import url("close-icon.css");

@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");

:root {
  /* ::::: Variables ::::: */
  --arrowpanel-background: Field;
  --arrowpanel-color: FieldText;
  --arrowpanel-border-color: ThreeDShadow;
  --arrowpanel-border-radius: 8px;
  --arrowpanel-padding: 16px;

  --arrowpanel-dimmed: color-mix(in srgb, currentColor 17%, transparent);
  --arrowpanel-dimmed-further: color-mix(in srgb, currentColor 30%, transparent);
  --arrowpanel-dimmed-even-further: color-mix(in srgb, currentColor 35%, transparent);

  --panel-description-color: GrayText;
  --panel-disabled-color: GrayText;

  --popup-notification-body-width: calc(31em - calc(2 * var(--arrowpanel-padding)));
  --toolbarbutton-icon-fill: currentColor;
}

@media not (-moz-proton-doorhangers) {
:root {
  --popup-notification-body-width: 25em;
}
} /** END not Proton **/

/* Lightweight theme roots */

:root[lwtheme-image]:-moz-lwtheme-darktext {
  text-shadow: 0 -0.5px 1.5px white;
}

:root[lwtheme-image]:-moz-lwtheme-brighttext {
  text-shadow: 1px 1px 1.5px black;
}

/* General styles */

*|*.plain {
  appearance: none;
  margin: 0 !important;
  border: none;
  padding: 0;
}

html|button,
html|input,
html|textarea {
  font: inherit;
}

.header {
  font-weight: bold;
}

.indent {
  margin-inline-start: 23px;
}

.box-padded {
  padding: 5px;
}

/* XUL iframe */

xul|iframe {
  border: none;
  width: 100px;
  height: 100px;
  min-width: 10px;
  min-height: 10px;
}

@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
  /* In emulation, <iframe> is block instead of inline, so reset the width/height */
  xul|iframe {
    width: auto;
    height: auto;
  }
}

/* Label/description formatting */

xul|description,
xul|label {
  cursor: default;
  margin-block: 1px 2px;
  margin-inline: 6px 5px;
}

xul|description {
  margin-bottom: 4px;
}

xul|label[disabled="true"] {
  color: GrayText;
}

.tooltip-label {
  margin: 0;
  word-wrap: break-word;
  /* We must specify a min-width, otherwise word-wrap:break-word doesn't work.
     See Bug 630864. */
  min-width: 1px;
}

/* Links */

.text-link {
  color: -moz-nativehyperlinktext;
  cursor: pointer;
}

.text-link:hover {
  text-decoration: underline;
}

/* Textbox context menu */

.textbox-contextmenu:-moz-locale-dir(rtl) {
  direction: rtl;
}

/* Autoscroll popup */

.autoscroller {
  border: none;
  padding: 0;
  background-image: url("chrome://global/skin/icons/autoscroll.svg");
  background-size: contain;
  background-color: transparent;
  background-repeat: no-repeat;
  appearance: none;
  -moz-window-shadow: none;
  /* Set pointer-events: none; so that mousemove events can be handled by AutoScrollChild.jsm. */
  pointer-events: none;
}

.autoscroller[scrolldir="NS"] {
  background-image: url("chrome://global/skin/icons/autoscroll-vertical.svg");
}

.autoscroller[scrolldir="EW"] {
  background-image: url("chrome://global/skin/icons/autoscroll-horizontal.svg");
}

/* Panel footers */

@media not (-moz-proton-doorhangers) {
.panel-footer {
  background-color: var(--arrowpanel-dimmed);
}

.panel-footer > xul|button {
  appearance: none;
  border-top: 1px solid var(--panel-separator-color);
  color: inherit;
  min-width: 0;
  margin: 0;
  padding: .9em 2px;
}

.panel-footer > xul|button[disabled] {
  color: var(--panel-disabled-color) !important;
}

.panel-footer > xul|button:-moz-focusring {
  outline: 1px dotted;
  outline-offset: -3px;
}

.panel-footer > xul|button:not([disabled]):hover {
  background-color: var(--arrowpanel-dimmed);
}

.panel-footer > xul|button:not([disabled]):hover:active,
.panel-footer > xul|button:not([disabled])[open] {
  background-color: var(--arrowpanel-dimmed-further);
  box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
}

.panel-footer > xul|button:not([disabled])[default] {
  color: white !important;
  background-color: #0060df;
}

.panel-footer > xul|button:not([disabled])[default]:hover {
  background-color: #003eaa;
}

.panel-footer > xul|button:not([disabled])[default]:hover:active {
  background-color: #002275;
}

.panel-footer > xul|button > .button-box {
  padding: 0;
}
} /** END not Proton **/

/* Combobox dropdown renderer */
#ContentSelectDropdown > menupopup {
  /* The menupopup itself should always be rendered LTR to ensure the scrollbar aligns with
   * the dropdown arrow on the dropdown widget. If a menuitem is RTL, its style will be set accordingly */
  direction: ltr;
}

#ContentSelectDropdown > menupopup::part(arrowscrollbox-scrollbox) {
  scrollbar-width: var(--content-select-scrollbar-width, auto);
}

#ContentSelectDropdown > menupopup[customoptionstyling="true"]::part(arrowscrollbox) {
  /* When authors specify a custom background, we use background-image to specify the author-supplied color.
   * In that case, we don't want stuff like custom appearance or custom
   * backgrounds, so we make sure to apply it on top of the default background. */
  background-image: var(--content-select-background-image, none);
  background-color: -moz-Combobox;
}

/* Indent options in optgroups */
.contentSelectDropdown-ingroup .menu-iconic-text {
  padding-inline-start: 2em;
}