userChrome.ag.css

/* This Source Code Form is subject to the terms of the Creative Commons
 * Attribution-NonCommercial-ShareAlike International License, v. 4.0.
 * If a copy of the CC BY-NC-SA 4.0 was not distributed with this
 * file, You can obtain one at http://creativecommons.org/licenses/by-nc-sa/4.0/
 * or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA. */

/* this stylesheet is used to style native anonymous content
and in particular, tooltips and scrollbars. */

@import url(uc-globals.css);

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

/* overlay scrollbars in browser chrome. the * at the beginning basically means
"only select this scrollbar if it has a XUL ancestor" so the purpose is to
exclude scrollbars with HTML ancestors. */
* scrollbar {
  appearance: none !important;
  position: relative;
  background-color: transparent;
  background-image: none;
  z-index: 999;
  padding: 0px;
}

* scrollbar[orient="vertical"] {
  -moz-margin-start: -11px;
  min-width: 11px;
  max-width: 11px;
  padding-block: 2px;
}

* scrollbar[orient="horizontal"] {
  margin-top: -11px;
  min-height: 11px;
  max-height: 11px;
  padding-inline: 2px;
}

/* reduce the scrollbar edge padding on menupopup arrowscrollboxes
(not the gutter — e.g. for a vertical scrollbox, reduce the padding-block) */
* scrollbox > scrollbar[orient="horizontal"],
* scrollbox > scrollbar[orient="vertical"] {
  padding: 0;
}

* scrollbar thumb {
  appearance: none !important;
  border-width: 0px;
  background-color: transparent;
  opacity: 0.3;
  transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
}

* scrollbar[orient="vertical"] thumb {
  min-height: 20px;
  transform-origin: right;
}

* scrollbar[orient="horizontal"] thumb {
  min-width: 20px;
  transform-origin: bottom;
}

* scrollbar:hover thumb {
  opacity: 0.5;
  transition: opacity 0.1s ease-in-out, transform 0.15s ease-in-out;
}

* scrollbar thumb:active {
  opacity: 0.9;
  transition: opacity 0.06s ease-in-out, transform 0.1s ease-in-out;
}

* scrollbar[orient="horizontal"]:not(:hover) thumb:not(:active) {
  transform: scaleY(20%);
}

* scrollbar[orient="vertical"]:not(:hover) thumb:not(:active) {
  transform: scaleX(20%);
}

* scrollbar thumb::before {
  content: "";
  display: -moz-box;
  background-color: rgba(124, 124, 131, 1);
  -moz-box-flex: 1;
  border-radius: 5px;
}

* scrollbar[orient="vertical"] thumb::before {
  margin-inline-end: 2px;
  min-width: 9px;
}

* scrollbar[orient="horizontal"] thumb::before {
  margin-block-end: 2px;
  min-height: 9px;
}

* scrollbar scrollbarbutton,
* scrollbar gripper {
  display: none;
}

/* tree scrollbars — these only show up in the firefox UI and system pages, e.g. bookmarks sidebar */
* .hidevscroll-scrollbar,
* .hidehscroll-box scrollbar {
  appearance: none !important;
  border: none;
  position: relative;
  background-color: transparent;
  padding: 0px;
  z-index: 999;
}

* .hidevscroll-scrollbar[orient="vertical"] {
  -moz-margin-start: -11px;
  min-width: 11px;
  padding-block: 2px;
}

* .hidehscroll-box scrollbar[orient="horizontal"] {
  margin-block-start: -11px;
  min-height: 11px;
  padding-inline: 2px;
}

* .hidevscroll-scrollbar thumb,
* .hidehscroll-box scrollbar thumb {
  appearance: none !important;
  border-width: 0px;
  background-color: transparent;
  opacity: 0.3;
  transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
}

* .hidevscroll-scrollbar[orient="vertical"] thumb {
  min-height: 20px;
  transform-origin: right;
}

* .hidehscroll-box scrollbar[orient="horizontal"] thumb {
  min-width: 20px;
  transform-origin: bottom;
}

* .hidevscroll-scrollbar:hover thumb,
* .hidehscroll-box scrollbar:hover thumb {
  background-color: transparent;
  opacity: 0.5;
  transition: opacity 0.1s ease-in-out, transform 0.15s ease-in-out;
}

* .hidevscroll-scrollbar thumb:active,
* .hidehscroll-box scrollbar thumb:active {
  background-color: transparent;
  opacity: 0.9;
  transition: opacity 0.06s ease-in-out, transform 0.1s ease-in-out;
}

* .hidevscroll-scrollbar[orient="vertical"]:not(:hover) thumb:not(:active) {
  transform: scaleX(20%);
}

* .hidehscroll-box scrollbar[orient="horizontal"]:not(:hover) thumb:not(:active) {
  transform: scaleY(20%);
}

* .hidevscroll-scrollbar thumb::before,
* .hidehscroll-box scrollbar thumb::before {
  content: "";
  display: -moz-box;
  background-color: rgba(124, 124, 131, 1);
  -moz-box-flex: 1;
  border-radius: 5px;
}

* .hidevscroll-scrollbar[orient="vertical"] thumb::before {
  margin-inline-end: 2px;
  min-width: 9px;
}

* .hidehscroll-box scrollbar[orient="horizontal"] thumb::before {
  margin-block-end: 2px;
  min-height: 9px;
}

* .hidevscroll-scrollbar scrollbarbutton,
* .hidevscroll-scrollbar gripper,
* .hidehscroll-box scrollbar scrollbarbutton,
* .hidehscroll-box scrollbar gripper {
  display: none;
}

* select > scrollbar,
* select > scrollbar > thumb {
  appearance: initial !important;
  -moz-margin-start: 0 !important;
  margin-top: 0 !important;
}

* panelview scrollbar thumb[collapsed="true"] {
  visibility: collapse;
}

scrollbar[disabled="true"] {
  appearance: none !important;
  pointer-events: none;
  margin: 0 !important;
}

:is(scrollcorner, resizer, scrollbar, scrollbarbutton, slider):where(:-moz-native-anonymous) {
  /* cribbed from minimal-xul.css to avoid crashes */
  -moz-box-layout: initial;
  direction: ltr;
  font: 16px sans-serif;
  justify-items: start;
  vertical-align: initial !important;
  -moz-user-focus: ignore;
  user-select: none;
  display: -moz-box;
  box-sizing: border-box;
}

:is(scrollbarbutton, slider, thumb):where(:-moz-native-anonymous) {
  cursor: inherit;
}

/* overlay scrollbars in content, if the pref is enabled. I don't recommend
using this pref because overlay scrollbars can cause problems on certain
websites where multiple scrollable divs are nested inside each other or
directly overlapping each other. for example, a scrollable chat box anchored
to the right side of the page will not be scrollable because its scrollbar
overlaps with the page's scrollbar. there isn't an easy way to fix this
because all this stuff is implemented in C++ and it can be pretty
burdensome. the clear solution is to just not use overlay scrollbars
wherever they might overlap. you can get visually good results (not overlay
but still pretty) by just setting widget.non-native-theme.scrollbar.style to
2. you might want to try different settings. 0 is the default, and 1 through
5 enable macOS, GTK, android, win10, win11 respectively. I prefer the GTK
style (2) but macOS (1) and android (3) are very similar. some might prefer
the win11 style (5). probably nobody is going to want win10 (4) lol. */
@supports -moz-bool-pref("userChrome.css.overlay-scrollbars.in-content") {
  scrollbar {
    appearance: none !important;
    position: relative;
    background-color: transparent;
    background-image: none;
    z-index: 999;
    padding: 0px;
  }

  scrollbar[orient="vertical"] {
    -moz-margin-start: -11px;
    min-width: 11px;
    max-width: 11px;
    padding-block: 2px;
  }

  scrollbar[orient="horizontal"] {
    margin-top: -11px;
    min-height: 11px;
    max-height: 11px;
    padding-inline: 2px;
  }

  /* reduce the scrollbar edge padding on menupopup arrowscrollboxes
  (not the gutter — e.g. for a vertical scrollbox, reduce the padding-block) */
  scrollbox > scrollbar[orient="horizontal"],
  scrollbox > scrollbar[orient="vertical"] {
    padding: 0;
  }

  scrollbar thumb {
    appearance: none !important;
    border-width: 0px;
    background-color: transparent;
    opacity: 0.3;
    transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
  }

  scrollbar[orient="vertical"] thumb {
    min-height: 20px;
    transform-origin: right;
  }

  scrollbar[orient="horizontal"] thumb {
    min-width: 20px;
    transform-origin: bottom;
  }

  scrollbar:hover thumb {
    opacity: 0.5;
    transition: opacity 0.1s ease-in-out, transform 0.15s ease-in-out;
  }

  scrollbar thumb:active {
    opacity: 0.9;
    transition: opacity 0.06s ease-in-out, transform 0.1s ease-in-out;
  }

  scrollbar[orient="horizontal"]:not(:hover) thumb:not(:active) {
    transform: scaleY(20%);
  }

  scrollbar[orient="vertical"]:not(:hover) thumb:not(:active) {
    transform: scaleX(20%);
  }

  scrollbar thumb::before {
    content: "";
    display: -moz-box;
    background-color: rgba(124, 124, 131, 1);
    -moz-box-flex: 1;
    border-radius: 5px;
  }

  scrollbar[orient="vertical"] thumb::before {
    margin-inline-end: 2px;
    min-width: 9px;
  }

  scrollbar[orient="horizontal"] thumb::before {
    margin-block-end: 2px;
    min-height: 9px;
  }

  scrollbar scrollbarbutton,
  scrollbar gripper {
    display: none;
  }

  /* tree scrollbars — these only show up in the firefox UI and system pages, e.g. bookmarks sidebar */
  .hidevscroll-scrollbar,
  .hidehscroll-box scrollbar {
    appearance: none !important;
    border: none;
    position: relative;
    background-color: transparent;
    padding: 0px;
    z-index: 999;
  }

  .hidevscroll-scrollbar[orient="vertical"] {
    -moz-margin-start: -11px;
    min-width: 11px;
    padding-block: 2px;
  }

  .hidehscroll-box scrollbar[orient="horizontal"] {
    margin-block-start: -11px;
    min-height: 11px;
    padding-inline: 2px;
  }

  .hidevscroll-scrollbar thumb,
  .hidehscroll-box scrollbar thumb {
    appearance: none !important;
    border-width: 0px;
    background-color: transparent;
    opacity: 0.3;
    transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
  }

  .hidevscroll-scrollbar[orient="vertical"] thumb {
    min-height: 20px;
    transform-origin: right;
  }

  .hidehscroll-box scrollbar[orient="horizontal"] thumb {
    min-width: 20px;
    transform-origin: bottom;
  }

  .hidevscroll-scrollbar:hover thumb,
  .hidehscroll-box scrollbar:hover thumb {
    background-color: transparent;
    opacity: 0.5;
    transition: opacity 0.1s ease-in-out, transform 0.15s ease-in-out;
  }

  .hidevscroll-scrollbar thumb:active,
  .hidehscroll-box scrollbar thumb:active {
    background-color: transparent;
    opacity: 0.9;
    transition: opacity 0.06s ease-in-out, transform 0.1s ease-in-out;
  }

  .hidevscroll-scrollbar[orient="vertical"]:not(:hover) thumb:not(:active) {
    transform: scaleX(20%);
  }

  .hidehscroll-box scrollbar[orient="horizontal"]:not(:hover) thumb:not(:active) {
    transform: scaleY(20%);
  }

  .hidevscroll-scrollbar thumb::before,
  .hidehscroll-box scrollbar thumb::before {
    content: "";
    display: -moz-box;
    background-color: rgba(124, 124, 131, 1);
    -moz-box-flex: 1;
    border-radius: 5px;
  }

  .hidevscroll-scrollbar[orient="vertical"] thumb::before {
    margin-inline-end: 2px;
    min-width: 9px;
  }

  .hidehscroll-box scrollbar[orient="horizontal"] thumb::before {
    margin-block-end: 2px;
    min-height: 9px;
  }

  .hidevscroll-scrollbar scrollbarbutton,
  .hidevscroll-scrollbar gripper,
  .hidehscroll-box scrollbar scrollbarbutton,
  .hidehscroll-box scrollbar gripper {
    display: none;
  }

  select > scrollbar,
  select > scrollbar > thumb {
    appearance: initial !important;
    -moz-margin-start: 0 !important;
    margin-top: 0 !important;
  }
}

/* tooltips */
/* I recommend using tooltipShadowSupport.uc.js if you want the thin
border on all tooltips. If you don't want the border then set
userChrome.css.remove-tooltip-borders to true in about:config */
tooltip {
  -moz-default-appearance: none;
  display: -moz-popup;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  color: var(--tooltip-color);
  border: none;
  border-radius: 0;
  max-width: max(30vw, 40em);
  padding: 5px;
  pointer-events: none;
  --uc-tooltip-inner-padding: 4px 7px 6px 7px;
}

tooltip:not([position]) {
  margin-block-start: 16px;
  margin-inline-start: -5px;
}

tooltip > description {
  background-color: var(--tooltip-bgcolor);
  color: var(--tooltip-color);
  border: 1px solid var(--tooltip-border-color);
  border-radius: var(--tooltip-border-radius);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  padding: var(--uc-tooltip-inner-padding, 4px 7px 6px 7px);
  margin: 0;
}

@supports -moz-bool-pref("userChrome.css.remove-tooltip-borders") {
  tooltip > description {
    border: none;
  }
}

@supports -moz-bool-pref("userChrome.css.mac-ui-fonts") {
  tooltip {
    font-family: SF Pro Text, SF Arabic, Segoe UI, sans-serif;
    font-kerning: normal;
    --uc-tooltip-inner-padding: 5px 8px 6px 8px;
  }
}

/* dark gray tooltips for some system pages */
tooltip[backdrop-color="gray"],
window#places tooltip,
window#unknownContentTypeWindow tooltip {
  --tooltip-bgcolor: var(--in-content-bg-darker, rgb(21, 21, 23)) !important;
  --tooltip-border-color: color-mix(in srgb, currentColor 8%, var(--in-content-bg-darker, rgb(21, 21, 23))) !important;
}

@-moz-document regexp("^about:(?!devtools-toolbox).*") {
  tooltip:-moz-native-anonymous {
    --tooltip-bgcolor: var(--in-content-bg-darker, rgb(21, 21, 23)) !important;
    --tooltip-border-color: color-mix(in srgb, currentColor 8%, var(--in-content-bg-darker, rgb(21, 21, 23))) !important;
  }
}

/* this appears when you open a file that firefox tries to read as XML, but
it's either invalid or not XML. for example when opening an XHTML file. */
parsererror|parsererror {
  color: var(--plaintext-color) !important;
  background-color: var(--in-content-bg-dark) !important;
  font-family: Fira Code UC, Fira Code, SF Mono, -moz-fixed;
  font-weight: 400;
}

parsererror|sourcetext {
  font-family: Fira Code UC, Fira Code, SF Mono, -moz-fixed;
  font-weight: bold;
}

/* print preview background */
::-moz-page-sequence {
  background-image: linear-gradient(hsl(240, 4%, 12%), hsl(240, 4%, 20%));
}

html|*.videocontrols .controlBar {
  background-color: var(--uc-content-box-background);
}

:-moz-native-anonymous .eye-dropper-color-value {
  color: var(--in-content-bg-dark);
}

html|input[type="number"]::-moz-number-spin-box {
  appearance: none;
  min-width: 16px;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

html|input[type="number"]::-moz-number-spin-up,
html|input[type="number"]::-moz-number-spin-down {
  -moz-context-properties: fill, fill-opacity !important;
  border: 0;
  border-radius: 0;
  background-image: url(chrome://userchrome/content/arrow-dropdown-16.svg);
  background-size: 8px;
  background-position: center top;
  -moz-context-properties: fill;
  fill: currentColor;
  fill-opacity: 0.6;
  appearance: none;
}

html|input[type="number"]::-moz-number-spin-up {
  background-image: url(chrome://userchrome/content/arrow-dropdown-16-up.svg);
  background-position: center bottom;
}

html|input[type="number"]::-moz-number-spin-down:hover,
html|input[type="number"]::-moz-number-spin-up:hover {
  fill-opacity: 0.9;
}

html|input[type="number"] {
  cursor: default;
}

html|input[type="number"]::-moz-text-control-editing-root,
html|input[type="number"]::placeholder,
html|input[type="number"]::-moz-text-control-preview {
  cursor: text;
}

/* this looks nice on unstyled ranges but looks ugly on sites
that don't reset properties, like amazon prime video. sigh */
/* html|input[type="range"] {
  appearance: none;
  background: none;
  border: none;
}

html|input[type="range"]::-moz-range-track {
  background: linear-gradient(#2e2e2e 20%, #383838 55%, #454545 85%);
  block-size: 7px;
  border: 1px solid #444;
  border-radius: 16px;
  overflow: hidden;
}

html|input[type="range"]::-moz-range-progress {
  background: linear-gradient(#616fb8 20%, #434bb1 55%, #3a3091 85%);
  height: 7px;
  border-radius: 16px;
}

html|input[type="range"]::-moz-range-thumb {
  background: radial-gradient(#f0f0f0, #bbb);
  border-color: transparent;
  border-radius: 100%;
}

html|input[type="range"]:is(:hover, :focus-visible)::-moz-range-track {
  background: linear-gradient(hsl(230, 0%, 20%) 20%, hsl(236, 0%, 24%) 55%, hsl(246, 0%, 29%) 85%);
}

html|input[type="range"]:is(:hover, :focus-visible)::-moz-range-progress {
  background: linear-gradient(
    hsl(230, 38%, 58%) 20%,
    hsl(236, 45%, 51%) 55%,
    hsl(246, 50%, 41%) 85%
  );
}

html|input[type="range"]:is(:hover, :focus-visible)::-moz-range-thumb:hover {
  background: radial-gradient(#fff, #ccc);
} */

/* the indeterminate progress vector file is in resources/layout/contentaccessible/ */
/* breaks netflix's weird position indicators in the episode flyout menu */
/* html|progress {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 100px;
  height: 9px;
  background-color: var(--uc-content-box-background-odd);
  overflow: hidden;
}

html|progress::-moz-progress-bar {
  background: linear-gradient(#6572b3 20%, #3f46a6 55%, #362d86 85%);
}

html|progress[paused]::-moz-progress-bar {
  background: linear-gradient(#808080 20%, #595959 55%, #404040 85%);
}

html|progress:not([value]):indeterminate::-moz-progress-bar {
  background-image: url("resource://content-accessible/progress-bar-indeterminate.svg");
}

html|progress[paused]:not([value]):indeterminate::-moz-progress-bar {
  background: transparent;
} */

/* i assume it breaks something */
/* html|meter {
  appearance: none;
  border-radius: 45px;
  overflow: hidden;
  height: 16px;
  background: linear-gradient(#494949, #444, #3f3f3f 20%, #333 45%, #303030 65%, #2d2d2d 75%);
}

html|*::-moz-meter-bar {
  appearance: none;
}

html|*:-moz-meter-optimum::-moz-meter-bar {
  background: linear-gradient(#529d43, #5eb34d, #72b365 20%, #448131 45%, #387326 65%);
}

html|*:-moz-meter-sub-optimum::-moz-meter-bar {
  background: linear-gradient(#9d8143, #b3924d, #b39b65 20%, #816331 45%, #735526 65%);
}

html|*:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  background: linear-gradient(#9d4343, #b34d4d, #b36565 20%, #813136 45%, #73262b 65%);
} */