uc-misc.css

/* this stylesheet contains general/miscellaneous changes
that are too small to have their own stylesheet.
includes status bars, tooltips, confirmation hints and warnings,
notifications, specific favicons, fixing the white flash when loading pages,
focus rings, text highlight colors, and compatibility adjustments for minBrowserNavBar.uc.js */

/* tooltip stuff, pair with userChrome.ag.css to cover all 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 !important;
    display: -moz-popup;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: transparent !important;
    color: var(--tooltip-color) !important;
    border: none !important;
    padding: 5px !important;
    margin-inline-start: -5px !important;
    margin-block-start: 16px !important;
    pointer-events: none !important;
    --uc-tooltip-inner-padding: 2px 6px 4px 6px;
}

tooltip > description,
.places-tooltip-box,
tooltip .uc-tooltip-box {
    background-color: var(--tooltip-bgcolor) !important;
    color: var(--tooltip-color) !important;
    border: 1px solid var(--tooltip-border-color) !important;
    border-radius: var(--tooltip-border-radius) !important;
    box-shadow: var(--tooltip-box-shadow) !important;
    padding: var(--uc-tooltip-inner-padding, 2px 6px 4px 6px) !important;
    margin: 0 !important;
}

/* set browser.proton.places-tooltip.enabled to true, it's less in the way when it's tethered to the tab */
.places-tooltip {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

.places-tooltip-box,
tooltip .uc-tooltip-box {
    --uc-tooltip-inner-padding: 4px 6px 5px 6px !important;
}

.places-tooltip description:not([value], [id]):empty,
.places-tooltip description[value=""]:not([id]):empty {
    display: none !important;
}

.places-tooltip-box > hbox {
    display: flex !important;
    align-items: center !important;
    max-width: 500px !important;
    color: var(--panel-shortcut-color) !important;
}

.places-tooltip-uri {
    color: var(--panel-shortcut-color) !important;
}

.places-tooltip-title[hidden="true"] ~ .places-tooltip-uri {
    color: inherit !important;
}

#places-tooltip-insecure-icon {
    min-width: 1em !important;
}

#places-tooltip-insecure-icon[hidden] {
    display: none;
}

/* the following rule can make the lock icon in the tab tooltip visible on all tabs except pending/unloaded tabs.
by default, it only shows an insecure lock on pages connected by http or with invalid certificates.
this rule makes it show a secure lock on all other pages.
but it's a little silly because 1) CSS on the tooltip can't differentiate between secure pages and pages with mixed content...
and 2) we can't differentiate between secure pages and local pages, system pages, etc. so the lock icon could be misleading.
for that reason i disabled it but maybe someone else wants it. it does look kinda cool i guess. */
@supports -moz-bool-pref("userChrome.tabs.tooltip.always-show-lock-icon") {
    #places-tooltip-insecure-icon {
        display: -moz-inline-box !important;
    }
}

/* the next several rulesets require restoreTabSoundButton.uc.js to set the necessary attributes based on tab security state. */

/* secure pages. just a regular lock. */
#places-tooltip-insecure-icon[type="secure"] {
    list-style-image: url(chrome://global/skin/icons/security.svg) !important;
}

/* insecure pages. the default, built-in icon, a lock with a red strikethrough. */
#places-tooltip-insecure-icon[type="insecure"] {
    list-style-image: url(chrome://global/skin/icons/security-broken.svg) !important;
}

/* tooltip icon for https pages with mixed passive content.
a lock with a yellow warning icon overlapping it. intended to match the identity icon.
mixed active content still shows the normal lock with red strikethrough. */
#places-tooltip-insecure-icon[type="mixed-passive"] {
    list-style-image: url(chrome://global/skin/icons/security-warning.svg) !important;
}

/* about:* pages. */
#places-tooltip-insecure-icon[type="about-page"] {
    list-style-image: url(chrome://userchrome/content/identity-icons-brand.svg) !important;
}

/* local pages, e.g. file:/// or resource:// or chrome:// */
#places-tooltip-insecure-icon[type="local-page"] {
    list-style-image: url(chrome://userchrome/content/notifications/persistent-storage.svg) !important;
}

/* extension pages, namely moz-extension:// */
#places-tooltip-insecure-icon[type="extension-page"] {
    list-style-image: url(chrome://browser/content/extension.svg) !important;
}

/* new tab or home page */
#places-tooltip-insecure-icon[type="home-page"] {
    list-style-image: url(chrome://browser/skin/tab.svg) !important;
}

/* tooltip icon for tabs loading error pages, e.g. network error, certificate error, https-only error. */
#places-tooltip-insecure-icon[type="error-page"] {
    list-style-image: url(chrome://userchrome/content/warning.svg) !important;

    /* alternate style, with colored icon */
    /* list-style-image: url(chrome://userchrome/content/skin/controlcenter/warning.svg) !important;
    stroke: var(--low-warning-icon-detail) !important;
    fill: var(--low-warning-icon-background) !important;
    -moz-context-properties: fill, stroke !important; */
}

/* show nothing on unloaded tabs, since determining which icon to show requires accessing the browser in session storage,
which lazy loads the browser and thereby wastes memory and computation */
#places-tooltip-insecure-icon[pending] {
    display: none !important;
}

/* the shadow on the tab tooltip must be removed since it blocks mouse hover from reaching the tab.
which would mean when you hover a tab, it'd appear hovered, then the tooltip would show up and it would appear unhovered,
as the mouse would then be on top of the tooltip popup not the main window. */
.places-tooltip[position] {
    padding: 0 !important;
    margin: 0 !important;
}

.places-tooltip[position] > .places-tooltip-box {
    box-shadow: none !important;
}

:is(#mainPopupSet, .sidebar-panel) > #aHTMLTooltip description {
    overflow-wrap: anywhere !important;
    text-overflow: ellipsis !important;
}

:is(#tracking-protection-icon-tooltip, #back-button-tooltip, #forward-button-tooltip)
    description:not([value], [id]):empty,
:is(#tracking-protection-icon-tooltip, #back-button-tooltip, #forward-button-tooltip)
    description[value=""]:not([id]):empty {
    display: none !important;
}

:is(#back-button-tooltip, #forward-button-tooltip):not([shadow-support]) description {
    border: none !important;
}

:is(#back-button-tooltip, #forward-button-tooltip) .tooltip-label[id]:not(:last-of-type) {
    font-weight: var(--uc-font-weight-bold, 600);
}

:is(#back-button-tooltip, #forward-button-tooltip) .tooltip-label:last-of-type:not([id]) {
    color: var(--panel-shortcut-color) !important;
    box-shadow: none !important;
    background: none !important;
    font-size: 0.9em;
}

:is(#back-button-tooltip, #forward-button-tooltip):not([shadow-support])
    .tooltip-label[id]:not(:last-of-type) {
    padding: 4px 6px 21px 6px !important;
}

:is(#back-button-tooltip, #forward-button-tooltip):not([shadow-support])
    .tooltip-label:last-of-type:not([id]) {
    padding-block: 0 6px !important;
    margin-block-start: -20px !important;
}

#tracking-protection-container tooltip {
    background-color: var(--ui-secondary-bg) !important;
    color: var(--tooltip-color) !important;
    border: 1px solid var(--tooltip-border-color) !important;
    border-radius: var(--tooltip-border-radius) !important;
    box-shadow: var(--tooltip-box-shadow) !important;
    padding: var(--uc-tooltip-inner-padding) !important;
    margin-block-start: 26px !important;
}

progress {
    appearance: none;
    border: 1px solid transparent;
    border-radius: 100px;
    height: 8px;
    background-color: var(--arrowpanel-dimmed);
    overflow: hidden;
}

progress[paused] {
    background-color: var(--desaturate-dimmed);
}

progress:not([value="0"])::-moz-progress-bar {
    margin: 0;
    height: 100%;
}

progress::-moz-progress-bar {
    background-color: var(--toolbarbutton-icon-fill-attention);
}

progress[paused]::-moz-progress-bar {
    background-color: var(--desaturate-dimmed-further);
}

:root[inDOMFullscreen] #statuspanel {
    display: none !important;
}

#statuspanel:not([type="overLink"], [inactive][previoustype="overLink"]) {
    opacity: 0 !important;
    transition: none !important;
}

#statuspanel[type="overLink"] {
    transition: opacity 200ms var(--uc-smooth-timing-function), visibility 200ms;
}

/* blur filter */
#statuspanel-label {
    background-color: var(--acrylic-blue) !important;
    background-image: var(--acrylic-texture) !important;
    backdrop-filter: var(--acrylic-blur) !important;
    color: var(--ui-text-80) !important;
    border-color: var(--tooltip-border-color) !important;
    box-shadow: var(--tooltip-box-shadow) !important;
    opacity: 1;
    padding: 5px 8px !important;
}

#statuspanel-inner {
    width: -moz-fit-content !important;
    min-width: unset !important;
    max-width: unset !important;
}

#statuspanel:not([mirror]) > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(ltr),
#statuspanel[mirror] > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(rtl) {
    border-top-left-radius: 0;
    border-top-right-radius: var(--tooltip-border-radius);
}

#statuspanel:not([mirror]) > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(rtl),
#statuspanel[mirror] > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(ltr) {
    border-top-left-radius: var(--tooltip-border-radius);
    border-top-right-radius: 0;
}

#fullscreen-warning {
    background-color: var(--acrylic-blue) !important;
    background-image: var(--acrylic-texture) !important;
    backdrop-filter: var(--acrylic-blur) !important;
}

/* hide keyword fixup notification */
notification[value="keyword-uri-fixup"] {
    display: none !important;
}

#confirmation-hint[data-message-id="hideCheckHint"] #confirmation-hint-message {
    margin-inline: 0 !important;
}

/* remove white flash and make default unloaded background dark gray (matching my new tab page addon, message u/MotherStylus on reddit for a download link) */
#tabbrowser-tabpanels,
#webextpanels-window,
#webext-panels-stack,
#webext-panels-browser {
    background: var(--in-content-bg-dark) !important;
}

/* change default favicon for local files */
:is(.unified-nav-forward, .unified-nav-back):not([_moz-menuactive="true"])[uri^="file:///"],
.tabbrowser-tab:is([label^="/A:/"i], [label^="/B:/"i], [label^="/C:/"i], [label^="/D:/"i], [label^="/E:/"i], [label^="/F:/"i], [label^="/G:/"i], [label^="/H:/"i], [label^="/I:/"i]) .tab-icon-image:not([src]) {
    list-style-image: url(chrome://userchrome/content/notifications/persistent-storage.svg) !important;
}

.tabbrowser-tab[image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8%2F9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAjFJREFUeNqsU8uOElEQPffR3XQ3ONASdBJCSBxHos5%2B3Bg3rvkCv8PElS78gPkO%2FATjQoUdO2ftrJiRh6aneTb9sOpC4weMN6lcuFV16pxDIfI8x12OYIDhcPiu2Wx%2B%2FHF5CW1Z6Jyegt%2FTNEWSJIjjGFEUIQxDrFYrWFSzXC4%2FdLvd95pRKpXKy%2BpRFZ7nwaWo1%2BsGnQG2260BKJfLKJVKGI1GEEJw7ateryd0v993W63WEwjgxfn5obGYzgCbzcaEbdsIggDj8Riu6z6iUk9SYZMSx8W0LMsM%2FSKK75xnJlIq80anQXdbEp0OhcPJ0eiaJnGRMEyyPDsAKKUM9clkYoDo3SZJzzSdp0VSKYmfV1co%2Bz580kw5KDIM8RbRfEnUf1HzxtQyMAGcaGruTKczMzEIaqhKifV6jd%2BzGQQB5llunF%2FM52BizC2K5sYPYvZcu653tjOM9O93wnYc08gmkgg4VAxixfqFUJT36AYBZGd6PJkFCZnnlBxMp38gqIgLpZB0y4Nph18lyWh5FFbrOSxbl3V4G%2BVB7T4ajYYxTyuLtO%2BCvWGgJE1Mc7JNsJEhvgw%2FQV4fo%2F24nbEsX2u1d5sVyn8sJO0ZAQiIYnFh%2BxrfLz%2Fj29cBS%2FO14zg3i8XigW3ZkErDtmKoeM%2BAJGRMnXeEPGKf0nCD1ydvkDzU9Jbc6OpR7WIw6L8lQ%2B4pQ1%2FlPF0RGM9Ns91Wmptk0GfB4EJkt77vXYj%2F8m%2B8y%2FkrwABHbz2H9V68DQAAAABJRU5ErkJggg%3D%3D"]
    .tab-icon-image {
    padding-right: 16px !important;
    background: url(chrome://userchrome/content/notifications/persistent-storage.svg) center/contain !important;
    -moz-context-properties: fill, fill-opacity !important;
    animation: none !important;
    fill: currentColor !important;
}

:is(.unified-nav-forward, .unified-nav-back):not([_moz-menuactive="true"])[uri^="file:///"]:is([uri$=".svg"i], [uri$=".png"i], [uri$=".jpg"i], [uri$=".jpeg"i], [uri$=".gif"i]),
.tabbrowser-tab[label*="Image, "][label$=" pixels)"] .tab-icon-image:not([src]),
.tabbrowser-tab:is([label^="/A:/"i], [label^="/B:/"i], [label^="/C:/"i], [label^="/D:/"i], [label^="/E:/"i], [label^="/F:/"i], [label^="/G:/"i], [label^="/H:/"i], [label^="/I:/"i]):is([label$=".svg"i], [label$=".png"i], [label$=".jpg"i], [label$=".jpeg"i], [label$=".gif"i]) .tab-icon-image:not([src]) {
    list-style-image: url(chrome://userchrome/content/notifications/canvas.svg) !important;
}

:is(.unified-nav-forward, .unified-nav-back)[_moz-menuactive="true"] .menu-iconic-icon {
    padding: 1px;
}

:is(#mainPopupSet, #browser, #navigator-toolbox) textbox {
    appearance: none !important;
    user-select: text !important;
    -moz-user-select: text !important;
    background-color: var(--ui-textbox-bgcolor) !important;
    color: #fff !important;
}

/* basic checkbox appearance.
the actual icon is set in utils/chrome.manifest since there are far too many checkboxes to override them all with CSS. */
checkbox .checkbox-check {
    background-size: contain;
}

#label-box {
    outline: unset !important;
}

:-moz-focusring,
:focus,
button::-moz-focus-inner,
:-moz-focusring *,
:focus *,
:-moz-focusring:focus:not(:focus-visible),
:-moz-focusring:focus:not(:focus-visible) > * {
    outline: unset !important;
    outline-offset: unset !important;
    -moz-outline-radius: unset !important;
}

toolbarbutton:focus-visible,
.keyboard-focused-tab > .tab-stack > .tab-background,
.tabbrowser-tab:focus:not([aria-activedescendant]) > .tab-stack > .tab-background,
.identity-box-button:not(:active):focus-visible,
#tracking-protection-icon-container:not(:active):focus-visible,
#PersonalToolbar .toolbarbutton-1:focus-visible,
findbar toolbarbutton.tabbable:focus-visible,
toolbarbutton.bookmark-item:not(.subviewbutton):focus-visible,
toolbar:not(#PersonalToolbar) .toolbarbutton-1:focus-visible > .toolbarbutton-icon,
toolbar:not(#PersonalToolbar) .toolbarbutton-1:focus-visible > .toolbarbutton-text,
toolbar:not(#PersonalToolbar) .toolbarbutton-1:focus-visible > .toolbarbutton-badge-stack {
    color: inherit;
    outline: unset !important;
    -moz-outline-radius: unset !important;
    outline-offset: unset !important;
}

:is(#mainPopupSet, #browser, #navigator-toolbox, .sidebar-panel) ::selection,
link[href="chrome://global/skin/search-textbox.css"] ~ ::selection
{
    background-color: var(--ui-selection-bgcolor) !important;
    color: var(--ui-selection-color) !important;
}

@-moz-document url-prefix("chrome://")
{
    ::selection {
        background-color: var(--url-selection-bgcolor) !important;
        color: var(--url-selection-color) !important;
    }
}

@supports -moz-bool-pref("userChrome.css.mac-ui-fonts") {
    @-moz-document regexp("^chrome:(?!\/\/(devtools|mozapps|browser\/content\/(places\/places.xhtml|pageinfo\/pageInfo.xhtml)|global\/content\/commonDialog)).*") {
        /* for most 12px stuff */
        html:root,
        window:root,
        menupopup,
        panel,
        popupnotification,
        tooltip,
        panelview,
        #BMB_bookmarksPopup,
        #main-menubar,
        .sidebar-search-container {
            font-family: SF Pro Text, Segoe UI, sans-serif !important;
            font-kerning: normal !important;
        }

        /* for stuff that should be thin */
        #urlbar,
        #searchbar,
        #PopupSearchAutoComplete,
        treechildren {
            font-family: SF Pro, Segoe UI, sans-serif !important;
        }

        /* for displaying larger font sizes */
        .panel-header,
        #sidebar-header,
        .identity-popup-security-connection,
        #PanelUI-whatsNew,
        #protections-popup-message,
        #protections-popup-no-trackers-found-description {
            font-family: SF Pro Display, Segoe UI, sans-serif !important;
            font-kerning: normal !important;
        }

        :is(#back-button-tooltip, #forward-button-tooltip):not([shadow-support])
            .tooltip-label[id]:not(:last-of-type) {
            padding: 3.5px 6px 18px 6px !important;
        }

        :is(#back-button-tooltip, #forward-button-tooltip):not([shadow-support])
            .tooltip-label:last-of-type:not([id]) {
            margin-block-start: -17.5px !important;
        }

        #fxa-menu-header-description {
            color: var(--panel-description-color);
            font-weight: inherit !important;
        }

        panel .panel-banner-item {
            font-weight: var(--uc-font-weight-bold, 500) !important;
        }

        tooltip {
            --uc-tooltip-inner-padding: 3px 6px 4px 6px;
        }

        :is(#back-button-tooltip, #forward-button-tooltip) .tooltip-label[id] {
            font-weight: var(--uc-font-weight-semibold, 400) !important;
        }

        :is(#back-button-tooltip, #forward-button-tooltip) .tooltip-label:not([id]) {
            font-weight: var(--uc-font-weight-thin, 300) !important;
        }

        .places-tooltip-title {
            font-size: 12px !important;
            font-weight: var(--uc-font-weight-semibold, 400) !important;
            line-height: 13.5px !important;
            max-height: 27px !important;
        }

        .places-tooltip-uri {
            font-weight: var(--uc-font-weight-thin, 300) !important;
        }

        .places-tooltip-title[hidden="true"] ~ .places-tooltip-uri {
            font-weight: inherit !important;
        }

        #urlbar-zoom-button .toolbarbutton-text {
            height: revert !important;
            font-weight: var(--uc-font-weight-semibold, 400) !important;
        }

        toolbar:not(#PersonalToolbar) #zoom-controls > #zoom-reset-button > .toolbarbutton-text {
            padding-block: 2px !important;
            font-weight: var(--uc-font-weight-semibold, 400) !important;
        }

        #appMenu-zoomReset-button2 .toolbarbutton-text {
            font-size: 11.5px !important;
        }

        .popup-notification-body input[type="password"] {
            font-family: SF Pro !important;
        }

        @-moz-document url-prefix("chrome://browser/content/syncedtabs/sidebar.xhtml")
        {
            body {
                font-family: SF Pro, Segoe UI, sans-serif !important;
                font-kerning: normal !important;
            }
        }
    }
}

/* allow scrollbuttons to flow onto the menupopup border */
.menupopup-arrowscrollbox[overflowing="true"][orient="vertical"] {
    overflow: visible !important;
}

/* remove tooltip borders if pref is enabled */
@supports -moz-bool-pref("userChrome.css.remove-tooltip-borders") {
    tooltip > description,
    tooltip .uc-tooltip-box,
    .places-tooltip-box,
    #tracking-protection-container tooltip,
    #statuspanel-label {
        border: none !important;
    }
}

/* hide the acceltext for the bookmarks toolbar shortcut when floatingSidebarResizer.uc.js changes the hotkey */
#toolbar-context-menu[bmb-command-disabled="true"]
    menuitem[key="viewBookmarksToolbarKb"]
    .menu-accel-container
    label {
    width: 0 !important;
    visibility: hidden !important;
}