global-shared.css

Propagation: 60.34%
/* 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/skin/design-system/tokens-platform.css");
@import url("chrome://global/skin/design-system/text-and-typography.css");

@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 {
  --default-focusring-width: 2px;
  --default-focusring: var(--default-focusring-width) dotted;

  --animation-easing-function: cubic-bezier(0.07, 0.95, 0, 1);

  --arrowpanel-background: Field;
  --arrowpanel-color: FieldText;
  --arrowpanel-border-color: ThreeDShadow;
  --arrowpanel-border-radius: 8px;
  --arrowpanel-padding: 16px;
  --arrowpanel-shadow-margin: 4px;

  --arrowpanel-menuitem-border-radius: 4px;
  --arrowpanel-menuitem-margin-block: 0px;
  --arrowpanel-menuitem-margin-inline: 8px;
  --arrowpanel-menuitem-margin: var(--arrowpanel-menuitem-margin-block) var(--arrowpanel-menuitem-margin-inline);
  --arrowpanel-menuitem-padding-block: 8px;
  --arrowpanel-menuitem-padding-inline: 8px;
  --arrowpanel-menuitem-padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline);

  --search-engine-name-max-width: 25em;

  @media (-moz-platform: macos) {
    /* On macOS we use native shadows via -moz-window-shadow */
    --arrowpanel-shadow-margin: 0px;
  }

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

  --panel-separator-color: color-mix(in srgb, currentColor 25%, transparent);

  --popup-notification-body-width: calc(31em - calc(2 * var(--arrowpanel-padding)));

  --input-border-color: color-mix(in srgb, currentColor 46%, transparent);

  --toolbarbutton-icon-fill: currentColor;
  --toolbarbutton-icon-fill-attention: AccentColor;
  --toolbarbutton-icon-fill-attention-text: AccentColorText;
  --toolbarbutton-disabled-opacity: 0.4;

  --toolbar-field-background-color: Field;
  --toolbar-field-color: FieldText;
  --toolbar-field-border-color: var(--input-border-color);
  --toolbar-field-focus-background-color: Field;
  --toolbar-field-focus-color: FieldText;
  --toolbar-field-focus-border-color: color-mix(in srgb, var(--focus-outline-color) 50%, transparent);

  --toolbar-bgcolor: color-mix(in srgb, -moz-dialog 85%, white);
  --toolbar-color: -moz-dialogtext;

  /* Override some toolbar colors when not under prefers-contrast. Note that
   * for the browser window these might be overridden by
   * browser-colors.css.
   *
   * For the light theme we use .05 alpha, to increase the contrast of the
   * text. For the dark theme, we use a darker background, which works because
   * the toolbar background applies some white unconditionally.
   */
  @media not (prefers-contrast) {
    --toolbar-field-border-color: transparent;
    --toolbar-field-background-color: light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3));
    --toolbar-field-color: inherit;

    @media (prefers-color-scheme: light) {
      --toolbar-bgcolor: white;
    }
  }

  &[lwtheme] {
    --toolbar-bgcolor: rgba(255, 255, 255, 0.4);
    --toolbar-color: var(--lwt-text-color, inherit);

    --toolbarbutton-icon-fill-attention: light-dark(rgb(0, 97, 224), rgb(0, 221, 255));
    --toolbarbutton-icon-fill-attention-text-light: rgb(240, 240, 244);
    --toolbarbutton-icon-fill-attention-text-dark: rgb(28, 27, 34);
    --toolbarbutton-icon-fill-attention-text: light-dark(
      var(--toolbarbutton-icon-fill-attention-text-light),
      var(--toolbarbutton-icon-fill-attention-text-dark)
    );
    &[lwt-icon-fill-attention="dark"] {
      --toolbarbutton-icon-fill-attention-text: var(--toolbarbutton-icon-fill-attention-text-light);
    }
    &[lwt-icon-fill-attention="light"] {
      --toolbarbutton-icon-fill-attention-text: var(--toolbarbutton-icon-fill-attention-text-dark);
    }
  }

  /* This color scheme should match --toolbar-color. However, note that
   * individual toolbars might override this (see ToolbarIconColor and the
   * brighttext attribute). */
  --toolbar-color-scheme: light dark;
  &[lwt-toolbar="light"] {
    --toolbar-color-scheme: light;
  }
  &[lwt-toolbar="dark"] {
    --toolbar-color-scheme: dark;
  }

  @media (prefers-contrast) {
    /* Reduce the opacity of disabled toolbar buttons in order to increase
       contrast with the enabled state. */
    --toolbarbutton-disabled-opacity: 0.3;

    --panel-separator-color: currentColor;
    --toolbar-field-focus-border-color: var(--focus-outline-color);

    --input-border-color: currentColor;
  }

  @media (forced-colors) {
    --input-border-color: ThreeDShadow;
  }

  background-color: -moz-Dialog;
  color: -moz-DialogText;
  font: message-box;
  -moz-box-collapse: legacy;

  &[dialogroot] {
    font: menu;
  }
}

:is(menupopup, panel):where([type="arrow"]) {
  --panel-background: var(--arrowpanel-background);
  --panel-color: var(--arrowpanel-color);
  --panel-border-color: var(--arrowpanel-border-color);
  --panel-border-radius: var(--arrowpanel-border-radius);
  --panel-padding: var(--arrowpanel-padding);
  --panel-shadow-margin: var(--arrowpanel-shadow-margin);
  --menuitem-border-radius: var(--arrowpanel-menuitem-border-radius);
  --menuitem-padding: var(--arrowpanel-menuitem-padding);
  --menuitem-margin: var(--arrowpanel-menuitem-margin);
}

/* Lightweight theme roots */

:root[lwtheme] {
  .browser-toolbox-background,
  toolbar,
  &[lwt-popup="light"] panel {
    color-scheme: light;
  }
  &[lwtheme-brighttext] .browser-toolbox-background,
  toolbar[brighttext],
  &[lwt-popup="dark"] panel {
    color-scheme: dark;
  }
}

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

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

/* Rules for 'hiding' portions of the chrome for special
   kinds of windows with toolbars (not just browser windows) */
:root[chromehidden~="menubar"] .chromeclass-menubar,
:root[chromehidden~="directories"] .chromeclass-directories,
:root[chromehidden~="status"] .chromeclass-status,
:root[chromehidden~="extrachrome"] .chromeclass-extrachrome,
:root[chromehidden~="location"] .chromeclass-location,
:root[chromehidden~="location"][chromehidden~="toolbar"] .chromeclass-toolbar,
:root[chromehidden~="toolbar"] .chromeclass-toolbar-additional {
  display: none;
}

/* General styles */

moz-input-box,
html|input {
  min-width: 0;
}

html|input {
  margin: 2px 4px;
}

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

html|input:where(:not([type="radio" i], [type="checkbox" i], [type="range" i])),
html|textarea {
  appearance: none;
  padding: var(--space-small);
  border: 1px solid var(--input-border-color);
  border-radius: var(--border-radius-small);
  margin: 0;
  background-color: var(--input-bgcolor, Field);
  color: var(--input-color, FieldText);

  &:where(:user-invalid) {
    border-color: var(--outline-color-error);
  }

  &:where(:focus-visible) {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-inset);
  }
}

/* adapted from toolkit/themes/shared/menulist.css */
html|select:where(:not([size], [multiple])) {
  appearance: none;
  padding: 6px 16px;
  padding-inline-end: 32px; /* 2 * 10px padding + image's 12px width */
  margin: 5px 2px 3px;
  border: none;
  border-radius: var(--border-radius-small);

  font-weight: var(--font-weight-bold);

  color: var(--button-text-color);
  background-color: var(--button-background-color);
  background-image: url(chrome://global/skin/icons/arrow-down-12.svg);
  background-position: right 10px center;
  background-repeat: no-repeat;
  -moz-context-properties: fill;
  fill: currentColor;

  &:-moz-locale-dir(rtl) {
    background-position-x: left 10px;
  }

  &:hover {
    background-color: var(--button-background-color-hover);
  }

  &:hover:active {
    background-color: var(--button-background-color-active);
  }

  &:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }
}

.header {
  font-weight: var(--font-weight-bold);
}

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

.box-padded {
  padding: 5px;
}

/* XUL iframe */

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

/* 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,
a,
::part(support-link) {
  color: var(--link-color);
  cursor: pointer;
  text-decoration: underline;

  &:hover {
    color: var(--link-color-hover);
  }

  &:hover:active {
    color: var(--link-color-active);
    text-decoration: none;
  }

  &:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--link-focus-outline-offset);
    border-radius: 1px;
  }
}

/* Override properties set on buttons, to display the links without unwanted styling */
button.text-link {
  appearance: none;
  background-color: transparent;
  border: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  font: inherit;
}

button.text-link .button-text {
  /* Cancel out the default internal margin */
  margin: 0;
}

/* Textbox context menu */

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

/* Panel footer buttons */

.panel-footer {
  margin: 8px 16px 16px;
}

.footer-button {
  appearance: none;
  border: 0;
  border-radius: var(--border-radius-small);
  color: var(--button-text-color);
  background-color: var(--button-background-color);
  padding: 0.45em 1em;
  min-height: var(--size-item-large);
  font-weight: 600;
  min-width: 0;
  margin-inline: 8px 0;
  margin-bottom: 0;

  &.small-button {
    margin: 0;
    min-height: var(--size-item-medium);
    font-size: var(--font-size-small);
    align-items: center;
  }

  &[disabled] {
    opacity: 0.4;
  }

  &:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }

  &:not([disabled]) {
    &:hover {
      color: var(--button-text-color-hover);
      background-color: var(--button-background-color-hover);
    }
    &:hover:active,
    &[open] {
      color: var(--button-text-color-active);
      background-color: var(--button-background-color-active);
    }
    &[default],
    &.primary {
      color: var(--button-text-color-primary);
      background-color: var(--color-accent-primary);
      &:hover {
        color: var(--button-text-color-primary-hover);
        background-color: var(--color-accent-primary-hover);
      }
      &:hover:active,
      &[open] {
        color: var(--button-text-color-primary-active);
        background-color: var(--color-accent-primary-active);
      }
    }
  }

  &[type="menu"] > .button-box > .button-menu-dropmarker {
    appearance: none;
    display: flex;
    content: url("chrome://global/skin/icons/arrow-down-12.svg");
    -moz-context-properties: fill;
    fill: currentColor;
  }
}

/* Autoscroll popup */

.autoscroller {
  appearance: none;

  /* Resets the native styles in windows and macOS */
  border: none;
  background-color: transparent;
  -moz-window-shadow: none;

  --autoscroll-background-image: url("chrome://global/skin/icons/autoscroll.svg");
  --panel-border-color: rgba(0, 0, 0, 0.4);
  --panel-padding: 0;
  --panel-background: rgba(249, 249, 250, 0.8) no-repeat center var(--autoscroll-background-image);
  --panel-shadow: 0 0 var(--panel-shadow-margin) rgba(0, 0, 0, 0.2);
  --panel-shadow-margin: 4px;
  --panel-border-radius: 100%;

  /* Set pointer-events: none; so that mousemove events can be handled by AutoScrollChild.sys.mjs. */
  pointer-events: none;

  &::part(content) {
    background-clip: padding-box;
    width: 100%;
    height: 100%;
  }

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

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

/* 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;
}

/* Full width separator in select */
#ContentSelectDropdown menuseparator {
  padding-inline: 0;
}

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