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

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