userChrome.ag.css

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

/* browser scrollbars */
scrollbar {
    appearance: none !important;
    position: relative;
    background-color: transparent;
    background-image: none;
    z-index: 3;
    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: 3;
}

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

panelview scrollbar[disabled="true"] {
    visibility: collapse;
    pointer-events: none;
    margin: 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;
    padding: 5px;
    pointer-events: none;
    --uc-tooltip-inner-padding: 2px 6px 4px 6px;
}

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(--uc-menu-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, 2px 6px 4px 6px);
    margin: 0;
}

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

@supports -moz-bool-pref("userChrome.css.mac-ui-fonts") {
    @-moz-document url(chrome://browser/content/browser.xhtml)
    {
        tooltip {
            font-family: SF Pro Text, Segoe UI, sans-serif;
            font-kerning: normal;
            --uc-tooltip-inner-padding: 3px 6px 4px 6px;
        }
    }
}

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

html|input[type="number"] {
    -moz-appearance: none;
    appearance: none;
    padding-inline-end: 0;
}

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 0px;
    -moz-context-properties: fill;
    fill: currentColor;
    fill-opacity: 0.4;
    appearance: none;
}

html|input[type="number"]::-moz-number-spin-up {
    scale: 1 -1;
}

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

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

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

html|progress {
    appearance: none;
    border: 1px solid transparent;
    border-radius: 100px;
    height: 9px;
    background-color: var(--content-principal-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%);
}

/* animate the bar when its progress is stalled or unknown. this vector file is in resources/layout/contentaccessible/ */
html|progress:not([value]):indeterminate::-moz-progress-bar {
    background-image: url("resource://content-accessible/progress-bar-indeterminate.svg");
}

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