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. */

@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);

/* 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(20vw, 30em);
  padding: 5px;
  pointer-events: none;
  --uc-tooltip-inner-padding: 4px 7px 6px 7px;
}

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

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

@media (-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).*"), url-prefix("chrome://devtools/content/") {
  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%));
}

*|*::-moz-page-sequence,
*|*::-moz-printed-sheet,
*|*::-moz-page-content,
*|*::-moz-page-break {
  scrollbar-width: thin !important;
  scrollbar-color: gray transparent !important;
}

@media (monochrome) and (-moz-print-preview) {
  *|*::-moz-page {
    scrollbar-width: thin !important;
    scrollbar-color: gray transparent !important;
  }
}

@media print {
  * {
    scrollbar-width: thin !important;
    scrollbar-color: gray transparent !important;
  }
}

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;
  background-repeat: no-repeat;
  -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%);
} */