1 files changed, 306 insertions, 0 deletions
diff --git a/toolkit/themes/shared/global-shared.css b/toolkit/themes/shared/global-shared.css
new file mode 100644
index 0000000000..255a92e1d3
--- /dev/null
+++ b/toolkit/themes/shared/global-shared.css
@@ -0,0 +1,306 @@
+/* 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-tokens-system.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;
+
+  --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);
+
+  --panel-disabled-color: color-mix(in srgb, currentColor 40%, transparent);
+
+  --popup-notification-body-width: calc(31em - calc(2 * var(--arrowpanel-padding)));
+
+  --toolbarbutton-icon-fill: currentColor;
+  --toolbarbutton-disabled-opacity: 0.4;
+
+  --toolbar-field-background-color: Field;
+  --toolbar-field-color: FieldText;
+  --toolbar-field-border-color: ThreeDShadow;
+  --toolbar-field-focus-background-color: Field;
+  --toolbar-field-focus-color: FieldText;
+}
+
+:root:-moz-lwtheme {
+  --toolbar-field-background-color: rgba(255, 255, 255, 0.8);
+  --toolbar-field-focus-background-color: white;
+  --toolbar-field-color: black;
+  --toolbar-field-focus-color: black;
+  --toolbar-field-border-color: transparent;
+}
+
+@media (prefers-contrast) {
+  :root:not(:-moz-lwtheme) {
+    --toolbarbutton-disabled-opacity: 0.3;
+
+    --panel-disabled-color: GrayText;
+  }
+}
+
+:is(menupopup, panel)[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);
+}
+
+/* Lightweight theme roots */
+
+:root[lwtheme-image] {
+  text-shadow: 0 -0.5px 1.5px white;
+}
+
+:root[lwtheme-image][lwtheme-brighttext] {
+  text-shadow: 1px 1px 1.5px black;
+}
+
+/* General styles */
+
+.plain {
+  appearance: none;
+  margin: 0 !important;
+  border: none;
+  padding: 0;
+}
+
+moz-input-box,
+html|input {
+  min-width: 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;
+  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 {
+  color: -moz-nativehyperlinktext;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+:is(a, .text-link):-moz-lwtheme {
+  color: inherit;
+}
+
+:is(a, .text-link):focus-visible {
+  outline: var(--focus-outline);
+  /* Not using --focus-outline-offset here because that's intended for elements
+     with a background, and we only want a slight offset here while not
+     overlapping adjacent text. */
+  outline-offset: 1px;
+  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 {
+  display: flex;
+  justify-content: flex-end;
+  margin: 8px 16px 16px;
+}
+
+.panel-footer > button {
+  appearance: none;
+  border: 0;
+  border-radius: 4px;
+  color: var(--button-color, inherit);
+  background-color: var(--button-bgcolor, color-mix(in srgb, currentColor 13%, transparent));
+  padding: 8px 16px;
+  font-weight: 600;
+  min-width: 0;
+  margin-inline: 8px 0;
+  margin-bottom: 0;
+}
+
+.panel-footer > button[disabled] {
+  opacity: 0.4;
+}
+
+.panel-footer > button:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
+}
+
+.panel-footer > button:not([disabled]):hover {
+  background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 17%, transparent));
+}
+
+.panel-footer > button:not([disabled]):hover:active {
+  background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent));
+}
+
+.panel-footer > button:not([disabled])[default] {
+  color: var(--button-primary-color);
+  background-color: var(--button-primary-bgcolor);
+}
+
+.panel-footer > button:not([disabled])[default]:hover {
+  background-color: var(--button-primary-hover-bgcolor);
+}
+
+.panel-footer > button:not([disabled])[default]:hover:active {
+  background-color: var(--button-primary-active-bgcolor);
+}
+
+@media (-moz-platform: windows) {
+  /* Swap the primary and secondary action, because Windows
+   * platform conventions put the primary action on the left. */
+  .panel-footer:not(moz-button-group) > button[default] {
+    order: -1;
+  }
+}
+
+/* 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,.4);
+  --panel-padding: 0;
+  --panel-background: rgba(249,249,250,.8) no-repeat center var(--autoscroll-background-image);
+  --panel-shadow-margin: 4px;
+  /* Set pointer-events: none; so that mousemove events can be handled by AutoScrollChild.jsm. */
+  pointer-events: none;
+}
+
+.autoscroller::part(content) {
+  border-radius: 100%;
+  background-clip: padding-box;
+  box-shadow: 0 0 var(--panel-shadow-margin) rgba(0,0,0,.2);
+  width: 100%;
+  height: 100%;
+}
+
+.autoscroller[scrolldir="NS"] {
+  --autoscroll-background-image: url("chrome://global/skin/icons/autoscroll-vertical.svg");
+}
+
+.autoscroller[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;
+}
+
+/* Indent options in optgroups */
+.contentSelectDropdown-ingroup .menu-iconic-text {
+  padding-inline-start: 2em;
+}
+
+.deemphasized {
+  color: var(--text-color-deemphasized);
+}