uc-misc.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 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;
  max-width: max(20vw, 30em);
  padding: 5px !important;
  pointer-events: none !important;
}

tooltip,
#statuspanel {
  --uc-tooltip-inner-padding: 4px 7px 6px 7px;
}

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, 4px 7px 6px 7px) !important;
  margin: 0 !important;
}

.places-tooltip {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;

  description:empty {
    &:not([value], [id]),
    &[value=""]:not([id]) {
      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. */
  &[position] {
    padding: 0 !important;
    margin: 0 !important;
  }

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

#tab-nav-popup {
  --tooltip-border-radius: 3px !important;
}

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

.places-tooltip-box {
  display: block;
}

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

.places-tooltip-title,
.tab-preview-title {
  font-weight: 600;
  /* Clip after 2 lines, this should ideally use a different method like
  -webkit-line-clamp or overflow: hidden; to get ellipsis support but XUL
  tooltip sizing makes that difficult. */
  max-height: 2.5em;
  overflow-y: clip;
}

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

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

.places-tooltip-box[desc-hidden="true"] {
  > hbox {
    display: none !important;
  }

  .places-tooltip-title {
    margin-bottom: 1px !important;
  }
}

#tabPreviewPanel {
  margin: calc(0px - var(--panel-inner-box-margin, 4px)) !important;
}

.tab-preview-container {
  --tab-preview-background-color: var(--tooltip-bgcolor, Menu) !important;
  --tab-preview-text-color: var(--tooltip-color) !important;
  --tab-preview-border-color: var(--dialog-box-border-color) !important;
  margin: var(--panel-inner-box-margin, 4px) !important;
  max-height: calc(100% - 2 * var(--panel-inner-box-margin)) !important;
  max-width: calc(100% - 2 * var(--panel-inner-box-margin)) !important;
  border-radius: var(--arrowpanel-border-radius) !important;
  box-shadow: var(--uc-panel-shadow) !important;
  box-sizing: border-box !important;
}

.tab-preview-text-container {
  padding: 6px 8px 7px 8px !important;
}

#places-tooltip-insecure-icon {
  -moz-context-properties: fill;
  fill: currentColor;
  width: 1em;
  height: 1em;
  margin-inline-start: 0;
  margin-inline-end: 0.25em !important;
  min-width: 1em !important;

  &[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. */
  @media (-moz-bool-pref: "userChrome.tabs.tooltip.always-show-lock-icon") {
    display: flex !important;
  }
}

/* these rules require restoreTabSoundButton.uc.js to set the
necessary attributes based on tab security state. */
#places-tooltip-insecure-icon,
#tab-nav-tooltip-insecure-icon {
  &[type="secure"] {
    /* secure pages. just a regular lock. */
    list-style-image: url(chrome://global/skin/icons/security.svg) !important;
  }

  /* insecure pages. the default, built-in icon, a lock with a red strikethrough. */
  &[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. */
  &[type="mixed-passive"] {
    list-style-image: url(chrome://global/skin/icons/security-warning.svg) !important;
  }

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

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

  /* extension pages, namely moz-extension:// */
  &[type="extension-page"] {
    list-style-image: url(chrome://mozapps/skin/extensions/extension.svg) !important;
  }

  /* new tab or home page */
  &[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. */
  &[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; */
  }

  /* blocked pages e.g., about:blocked */
  &[type="blocked-page"] {
    list-style-image: url(chrome://userchrome/content/blocked.svg) !important;
  }

  /* don't show secure badges on pending tabs */
  &[type="pending"] {
    display: none !important;
  }
}

#eom-theme-preview-tooltip[position] {
  margin: -3px -5px !important;
}

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

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

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

    &:last-of-type:not([id]) {
      color: var(--panel-shortcut-color) !important;
      box-shadow: none !important;
      background: none !important;
      border: none !important;
      margin-top: 1px !important;
      /* font-size: 0.9em; */
    }
  }

  &:not([shadow-support]) {
    .tooltip-label {
      &[id]:not(:last-of-type) {
        padding: 5.5px 8px 20px 8px !important;
      }

      &:last-of-type:not([id]) {
        padding: 0 8px 8px 8px !important;
        margin-block-start: -19.5px !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;
}

#eom-theme-preview-tooltip {
  padding: 5px !important;
  max-width: revert !important;
  border: none !important;
  background: none !important;
  border-radius: 0 !important;
}

#eom-theme-preview-box {
  border-radius: var(--arrowpanel-border-radius, 8px) !important;
  overflow: hidden !important;
  box-shadow: var(--tooltip-box-shadow) !important;
}

#eom-theme-preview-tooltip description {
  display: none !important;
}

/* eliminate --default-focusring */
treechildren::-moz-tree-row(selected, current, focus) {
  outline: none !important;
}

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

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

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

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

    &:indeterminate::-moz-progress-bar {
      background-color: transparent;
      background-image: none;
      animation: none;
      animation-play-state: paused;
    }
  }

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

  &:indeterminate::-moz-progress-bar {
    border-radius: 0;
    background-image: linear-gradient(90deg, transparent 0%, var(--download-progress-flare-color) 25%, transparent 50%, var(--download-progress-flare-color) 75%, transparent 100%);
  }
}

#statuspanel {
  /* temporarily disabled due to backdrop-filter being disabled. see https://bugzilla.mozilla.org/show_bug.cgi?id=1741779 */
  /* color: var(--ui-text-80) !important;
  background-color: var(--acrylic-blue) !important;
  background-image: var(--acrylic-texture) !important;
  backdrop-filter: var(--acrylic-blur) !important; */

  padding: revert !important;
  border: 1px none var(--tooltip-border-color) !important;
  border-top-style: solid !important;
  box-shadow: var(--tooltip-box-shadow) !important;
  margin-top: calc(0px - var(--menuitem-height)) !important;
  min-width: revert !important;

  background-color: var(--tooltip-bgcolor) !important;
  color: var(--tooltip-color) !important;

  &:not([mirror]):-moz-locale-dir(ltr),
  &[mirror]:-moz-locale-dir(rtl) {
    border-top-left-radius: 0 !important;
    border-top-right-radius: var(--tooltip-border-radius) !important;
    border-right-style: solid !important;
  }

  &:not([mirror]):-moz-locale-dir(rtl),
  &[mirror]:-moz-locale-dir(ltr) {
    border-top-left-radius: var(--tooltip-border-radius) !important;
    border-top-right-radius: 0 !important;
    border-left-style: solid !important;
  }
}

:root[inDOMFullscreen] #statuspanel {
  visibility: collapse !important;
}

#statuspanel-label {
  background: none !important;
  color: inherit !important;
  box-shadow: none !important;
  opacity: revert !important;
  padding: var(--uc-tooltip-inner-padding, 4px 7px 6px 7px) !important;
  margin: 0 !important;
  border: none !important;
  min-width: revert !important;
}

#statuspanel-inner {
  height: revert !important;
  width: auto !important;
  min-width: unset !important;
  max-width: unset !important;
  align-items: center !important;
}

/* selection */
link[href="chrome://global/skin/search-textbox.css"] {
  ~ ::selection {
    background-color: var(--ui-selection-bgcolor);
    color: var(--ui-selection-color);
  }
}

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

#confirmation-hint-checkmark-animation-container[animate] > #confirmation-hint-checkmark-image {
  fill: currentColor !important;
}

/* remove white flash and make default unloaded background dark gray */
#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"]):is([uri^="file:///A:/"i], [uri^="file:///B:/"i], [uri^="file:///C:/"i], [uri^="file:///D:/"i], [uri^="file:///E:/"i], [uri^="file:///F:/"i], [uri^="file:///G:/"i], [uri^="file:///H:/"i], [uri^="file:///I:/"i]),
:is(.tabbrowser-tab, .all-tabs-button):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(.tab-icon-image, .toolbarbutton-icon):not([src]) {
  list-style-image: url(chrome://userchrome/content/notifications/persistent-storage.svg) !important;
}

:is(.unified-nav-forward, .unified-nav-back):not([_moz-menuactive="true"]):is([uri^="file:///A:/"i], [uri^="file:///B:/"i], [uri^="file:///C:/"i], [uri^="file:///D:/"i], [uri^="file:///E:/"i], [uri^="file:///F:/"i], [uri^="file:///G:/"i], [uri^="file:///H:/"i], [uri^="file:///I:/"i]):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]),
:is(.tabbrowser-tab, .all-tabs-button):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]) :is(.tab-icon-image, .toolbarbutton-icon):not([src]) {
  list-style-image: url(chrome://userchrome/content/notifications/canvas.svg) !important;
}

.bookmark-item[scheme="file"] .toolbarbutton-icon {
  display: none !important;
}

.bookmark-item[scheme="file"]::before {
  content: "";
  position: relative;
  display: flex;
  width: 16px;
  height: 16px;
  padding-inline: 0px;
  fill: currentColor;
  -moz-context-properties: fill, fill-opacity, stroke;
  background-position: center;
  background-size: 16px;
  background-repeat: no-repeat;
  background-image: url(chrome://userchrome/content/notifications/persistent-storage.svg) !important;
}

.bookmark-item[scheme="file"][label*="Image, "][label$=" pixels)"]::before {
  background-image: url(chrome://userchrome/content/notifications/canvas.svg) !important;
} */

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

.tabbrowser-tab,
.all-tabs-button {
  &[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"]
  {
    :is(.tab-icon-image, .toolbarbutton-icon) {
      padding-right: 16px !important;
      background: url(chrome://userchrome/content/notifications/persistent-storage.svg) center/contain !important;
      box-sizing: border-box !important;
    }
  }
}

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

:focus:not(:focus-visible),
:focus:not(:focus-visible) > *,
radiogroup:focus-visible radio[focused="true"] > .radio-label-box,
checkbox[native]:-moz-focusring > .checkbox-label-box {
  outline: unset !important;
  outline-offset: unset !important;
  -moz-outline-radius: unset !important;
}

checkbox[native]:focus-visible > .checkbox-check,
radiogroup:focus-visible radio[focused="true"] > .radio-check,
radiogroup deck menulist:focus-visible {
  outline: var(--default-focusring, var(--focus-outline, auto));
}

toolbarbutton:focus-visible,
.popup-notification-button:focus-visible,
.identity-box-button:not(:active):focus-visible,
.panel-footer > button: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 .toolbarbutton-1:focus-visible > .toolbarbutton-icon,
toolbar .toolbarbutton-1:focus-visible > .toolbarbutton-text,
toolbar .toolbarbutton-1:focus-visible > .toolbarbutton-badge-stack,
.urlbar-page-action:focus-visible,
#appMenu-zoomReduce-button2:focus-visible > .toolbarbutton-icon,
#appMenu-zoomEnlarge-button2:focus-visible > .toolbarbutton-icon,
#downloadsFooterButtons button:focus-visible {
  color: inherit;
  outline: unset !important;
  -moz-outline-radius: unset !important;
  outline-offset: unset !important;
}

@media (-moz-bool-pref: "userChrome.css.mac-ui-fonts") {
  @-moz-document regexp("^chrome:(?!\/\/devtools).*") {
    /* for most 12px stuff */
    html:root,
    window:root,
    menupopup,
    panel,
    popupnotification,
    tooltip,
    treechildren,
    panelview,
    #BMB_bookmarksPopup,
    .sidebar-search-container,
    .pointerlockfswarning,
    #ContentSelectDropdown > menupopup,
    :is(#ContentSelectDropdown, menupopup.in-menulist, .contentSelectDropdown-ingroup) :is(menu, menuitem, menucaption),
    panel[type="autocomplete-richlistbox"] > richlistbox > richlistitem,
    html[windowtype="Toolkit:PictureInPicture"] #timestamp,
    html[windowtype="Toolkit:PictureInPicture"] #texttracks,
    html[windowtype="Toolkit:PictureInPicture"] .box label:not(.switch),
    html[windowtype="Toolkit:PictureInPicture"] .panel-legend {
      font-family: SF Pro Text, SF Arabic, Segoe UI, sans-serif !important;
      font-kerning: normal !important;
    }

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

    /* for displaying larger font sizes */
    .panel-header,
    #eom-mainView-panel-header,
    .popup-notification-description,
    #main-menubar,
    #sidebar-header,
    #PanelUI-whatsNew,
    #protections-popup-message,
    #PanelUI-profiler-info,
    .PanelUI-profiler-button-link,
    #protections-popup-no-trackers-found-description,
    #PopupAutoComplete > richlistbox > richlistitem > .ac-title,
    html[windowtype="Toolkit:PictureInPicture"] button {
      font-family: SF Pro Display, SF Arabic, Segoe UI, sans-serif !important;
      font-kerning: normal !important;
    }

    #toolbar-menubar #main-menubar > menu > label {
      padding: 5px 8px 6px 8px !important;
    }

    #main-menubar > menu > menupopup {
      margin-block: calc(0px - var(--menupopup-inner-box-margin) - ((var(--tab-min-height) - 14px - 5px - 6px) / 2)) !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;
    }

    strong {
      font-weight: var(--uc-font-weight-extrabold, 600);
    }

    tooltip,
    #statuspanel {
      --uc-tooltip-inner-padding: 5px 8px 6px 8px;
    }

    .places-tooltip-title,
    .tab-preview-title,
    :is(#back-button-tooltip, #forward-button-tooltip) .tooltip-label[id] {
      font-family: SF Pro Display, SF Arabic, Segoe UI, sans-serif !important;
      font-kerning: normal !important;
      font-weight: var(--uc-font-weight-semibold, 500) !important;
    }

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

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

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

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

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

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

    .urlbarView-row {
      .urlbarView-tag,
      &:is([type="switchtab"], [type="remotetab"]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action,
      &[dynamicType="contextualSearch"] .urlbarView-dynamic-contextualSearch-description {
        line-height: 14px !important;
        font-weight: var(--uc-font-weight-thin, 400) !important;
      }

      &[dynamicType="quickactions"] .urlbarView-quickaction-row {
        line-height: 14px !important;
      }

      .urlbarView-tag strong {
        font-weight: inherit !important;
      }

      &[dynamicType="onboardTabToSearch"] .urlbarView-title strong.urlbarView-dynamic-onboardTabToSearch-titleStrong {
        font-family: SF Pro Text, SF Arabic, Segoe UI, sans-serif !important;
      }
    }

    .urlbarView-button,
    .urlbarView-tip-button {
      font-family: SF Pro Text, SF Arabic, Segoe UI, sans-serif !important;
      font-weight: var(--uc-font-weight-semibold, 600) !important;
    }

    .urlbarView-dynamic-weather-temperature {
      font-weight: var(--uc-font-weight-bold) !important;
    }

    .popup-notification-body input[type="password"] {
      font-family: SF Pro, SF Arabic, Segoe UI, sans-serif !important;
    }

    .popup-notification-description b {
      font-family: SF Pro Display, SF Arabic, Segoe UI, sans-serif !important;
      font-kerning: auto !important;
    }

    :is(#ContentSelectDropdown, menupopup.in-menulist, .contentSelectDropdown-ingroup) :where(menu, menuitem, menucaption),
    panel[type="autocomplete-richlistbox"] > richlistbox > richlistitem {
      font-family: SF Pro Text, SF Arabic, Segoe UI, sans-serif !important;
      font-kerning: normal !important;
    }

    .PanelUI-fxa-service-description-label,
    .PanelUI-remotetabs-instruction-label,
    .pointerlockfswarning-domain-text,
    .pointerlockfswarning-generic-text {
      font-weight: var(--uc-font-weight-thin, 300) !important;
    }

    .pointerlockfswarning-domain {
      font-weight: var(--uc-font-weight-bold, 400) !important;
    }

    .dialog-button-box,
    :root[dialogroot],
    notification-message {
      button {
        font-family: SF Pro Text, SF Arabic, Segoe UI, sans-serif !important;
        font-weight: var(--uc-font-weight-bold, 600) !important;
      }
    }

    #protections-popup-milestones-text {
      font-weight: var(--uc-font-weight-bold, 600) !important;
      font-family: SF Pro Display, SF Arabic, Segoe UI, sans-serif !important;
      font-size: 1.1em !important;
    }

    #identity-popup {
      &[mixedcontent~="active-loaded"] .identity-popup-connection-not-secure,
      &:not([mixedcontent]) .identity-popup-connection-not-secure {
        font-weight: var(--uc-font-weight-bold, 600) !important;
      }
    }

    #translations-button-locale {
      font-family: SF Pro Text, SF Arabic, Segoe UI, sans-serif !important;
      font-weight: var(--uc-font-weight-semibold, 500) !important;
      line-height: 18px !important;
      padding: 0 2px !important;
    }

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

/* replace certain favicons */
/* google */
.tab-icon-image[src="data:image/x-icon;base64,AAABAAIAEBAAAAEAIABoBAAAJgAAACAgAAABACAAqBAAAI4EAAAoAAAAEAAAACAAAAABACAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP///zD9/f2W/f392P39/fn9/f35/f391/39/ZT+/v4uAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/v7+Cf39/Zn///////////////////////////////////////////39/ZX///8IAAAAAAAAAAAAAAAA/v7+Cf39/cH/////+v35/7TZp/92ul3/WKs6/1iqOv9yuFn/rNWd//j79v///////f39v////wgAAAAAAAAAAP39/Zn/////7PXp/3G3WP9TqDT/U6g0/1OoNP9TqDT/U6g0/1OoNP+Or1j//vDo///////9/f2VAAAAAP///zD/////+vz5/3G3V/9TqDT/WKo6/6LQkf/U6cz/1urO/6rUm/+Zo0r/8IZB//adZ////v7///////7+/i79/f2Y/////4nWzf9Lqkj/Vqo4/9Xqzv///////////////////////ebY//SHRv/0hUL//NjD///////9/f2U/f392v////8sxPH/Ebzt/43RsP/////////////////////////////////4roL/9IVC//i1jf///////f391/39/fr/////Cr37/wW8+/+16/7/////////////////9IVC//SFQv/0hUL/9IVC//SFQv/3pnX///////39/fn9/f36/////wu++/8FvPv/tuz+//////////////////SFQv/0hUL/9IVC//SFQv/0hUL/96p7///////9/f35/f392/////81yfz/CrL5/2uk9v///////////////////////////////////////////////////////f392P39/Zn/////ks/7/zdS7P84Rur/0NT6///////////////////////9/f////////////////////////39/Zb+/v4y//////n5/v9WYu3/NUPq/ztJ6/+VnPT/z9L6/9HU+v+WnfT/Ul7t/+Hj/P////////////////////8wAAAAAP39/Z3/////6Or9/1hj7v81Q+r/NUPq/zVD6v81Q+r/NUPq/zVD6v9sdvD////////////9/f2YAAAAAAAAAAD///8K/f39w//////5+f7/paz2/11p7v88Suv/Okfq/1pm7v+iqfX/+fn+///////9/f3B/v7+CQAAAAAAAAAAAAAAAP///wr9/f2d///////////////////////////////////////////9/f2Z/v7+CQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP7+/jL9/f2Z/f392/39/fr9/f36/f392v39/Zj///8wAAAAAAAAAAAAAAAAAAAAAPAPAADAAwAAgAEAAIABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIABAACAAQAAwAMAAPAPAAAoAAAAIAAAAEAAAAABACAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP7+/g3+/v5X/f39mf39/cj9/f3q/f39+f39/fn9/f3q/f39yP39/Zn+/v5W////DAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP7+/iT9/f2c/f399f/////////////////////////////////////////////////////9/f31/f39mv7+/iMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP7+/gn9/f2K/f39+////////////////////////////////////////////////////////////////////////////f39+v39/Yf///8IAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD+/v4k/f390v////////////////////////////////////////////////////////////////////////////////////////////////39/dD///8iAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA////MP39/er//////////////////////////+r05v+v16H/gsBs/2WxSf9Wqjj/Vqk3/2OwRv99vWX/pdKV/97u2P////////////////////////////39/ej+/v4vAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP7+/iT9/f3q/////////////////////+v15/+Pxnv/VKk2/1OoNP9TqDT/U6g0/1OoNP9TqDT/U6g0/1OoNP9TqDT/U6g0/36+Z//d7tf///////////////////////39/ej///8iAAAAAAAAAAAAAAAAAAAAAAAAAAD///8K/f390//////////////////////E4bn/XKw+/1OoNP9TqDT/U6g0/1OoNP9TqDT/U6g0/1OoNP9TqDT/U6g0/1OoNP9TqDT/U6g0/1apN/+x0pv///////////////////////39/dD///8IAAAAAAAAAAAAAAAAAAAAAP39/Yv/////////////////////sdij/1OoNP9TqDT/U6g0/1OoNP9TqDT/U6g0/1OoNP9TqDT/U6g0/1OoNP9TqDT/U6g0/1OoNP9TqDT/YKU1/8qOPv/5wZ////////////////////////39/YcAAAAAAAAAAAAAAAD+/v4l/f39+////////////////8Lgt/9TqDT/U6g0/1OoNP9TqDT/U6g0/1OoNP9utlT/n86N/7faqv+426v/pdKV/3u8ZP9UqDX/U6g0/3egN//jiUH/9IVC//SFQv/82MP//////////////////f39+v7+/iMAAAAAAAAAAP39/Z3////////////////q9Ob/W6w+/1OoNP9TqDT/U6g0/1OoNP9nskz/zOXC/////////////////////////////////+Dv2v+osWP/8YVC//SFQv/0hUL/9IVC//WQVP/++fb//////////////////f39mgAAAAD+/v4O/f399v///////////////4LHj/9TqDT/U6g0/1OoNP9TqDT/dblc//L58P/////////////////////////////////////////////8+v/3p3f/9IVC//SFQv/0hUL/9IVC//rIqf/////////////////9/f31////DP7+/ln////////////////f9v7/Cbz2/zOwhv9TqDT/U6g0/2KwRv/v9+z///////////////////////////////////////////////////////738//1kFT/9IVC//SFQv/0hUL/9plg///////////////////////+/v5W/f39nP///////////////4jf/f8FvPv/Bbz7/yG1s/9QqDz/vN2w//////////////////////////////////////////////////////////////////rHqP/0hUL/9IVC//SFQv/0hUL//vDn//////////////////39/Zn9/f3L////////////////R878/wW8+/8FvPv/Bbz7/y7C5P/7/fr//////////////////////////////////////////////////////////////////ere//SFQv/0hUL/9IVC//SFQv/718H//////////////////f39yP39/ez///////////////8cwvv/Bbz7/wW8+/8FvPv/WNL8///////////////////////////////////////0hUL/9IVC//SFQv/0hUL/9IVC//SFQv/0hUL/9IVC//SFQv/0hUL/9IVC//rIqv/////////////////9/f3q/f39+v///////////////we9+/8FvPv/Bbz7/wW8+/993P3///////////////////////////////////////SFQv/0hUL/9IVC//SFQv/0hUL/9IVC//SFQv/0hUL/9IVC//SFQv/0hUL/+cGf//////////////////39/fn9/f36////////////////B737/wW8+/8FvPv/Bbz7/33c/f//////////////////////////////////////9IVC//SFQv/0hUL/9IVC//SFQv/0hUL/9IVC//SFQv/0hUL/9IVC//SFQv/6xaX//////////////////f39+f39/e3///////////////8cwvv/Bbz7/wW8+/8FvPv/WdP8///////////////////////////////////////0hUL/9IVC//SFQv/0hUL/9IVC//SFQv/0hUL/9IVC//SFQv/0hUL/9IVC//vVv//////////////////9/f3q/f39y////////////////0bN/P8FvPv/Bbz7/wW8+/8hrvn/+/v///////////////////////////////////////////////////////////////////////////////////////////////////////////////////39/cj9/f2c////////////////ht/9/wW8+/8FvPv/FZP1/zRJ6/+zuPf//////////////////////////////////////////////////////////////////////////////////////////////////////////////////f39mf7+/lr////////////////d9v7/B7n7/yB38f81Q+r/NUPq/0hV7P/u8P3////////////////////////////////////////////////////////////////////////////////////////////////////////////+/v5X////D/39/ff///////////////9tkPT/NUPq/zVD6v81Q+r/NUPq/2Fs7//y8v7////////////////////////////////////////////09f7//////////////////////////////////////////////////f399f7+/g0AAAAA/f39n////////////////+Tm/P89Suv/NUPq/zVD6v81Q+r/NUPq/1Bc7f/IzPn/////////////////////////////////x8v5/0xY7P+MlPP////////////////////////////////////////////9/f2cAAAAAAAAAAD+/v4n/f39/P///////////////7W69/81Q+r/NUPq/zVD6v81Q+r/NUPq/zVD6v9ZZe7/k5v0/6609/+vtff/lJv0/1pm7v81Q+r/NUPq/zVD6v+GjvL//v7//////////////////////////////f39+/7+/iQAAAAAAAAAAAAAAAD9/f2N/////////////////////6Cn9f81Q+r/NUPq/zVD6v81Q+r/NUPq/zVD6v81Q+r/NUPq/zVD6v81Q+r/NUPq/zVD6v81Q+r/NUPq/zVD6v+BivL////////////////////////////9/f2KAAAAAAAAAAAAAAAAAAAAAP7+/gv9/f3V/////////////////////7W69/8+S+v/NUPq/zVD6v81Q+r/NUPq/zVD6v81Q+r/NUPq/zVD6v81Q+r/NUPq/zVD6v81Q+r/P0zr/7q/+P///////////////////////f390v7+/gkAAAAAAAAAAAAAAAAAAAAAAAAAAP7+/ib9/f3r/////////////////////+Xn/P94gfH/NkTq/zVD6v81Q+r/NUPq/zVD6v81Q+r/NUPq/zVD6v81Q+r/NkTq/3Z/8f/l5/z///////////////////////39/er+/v4kAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP7+/jL9/f3r///////////////////////////k5vz/nqX1/2p08P9IVez/OEbq/zdF6v9GU+z/aHLv/5qh9f/i5Pz////////////////////////////9/f3q////MAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP7+/ib9/f3V/////////////////////////////////////////////////////////////////////////////////////////////////f390v7+/iQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP///wr9/f2N/f39/P///////////////////////////////////////////////////////////////////////////f39+/39/Yv+/v4JAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD+/v4n/f39n/39/ff//////////////////////////////////////////////////////f399v39/Z3+/v4lAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/v7+Dv7+/lr9/f2c/f39y/39/e39/f36/f39+v39/ez9/f3L/f39nP7+/ln+/v4OAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP/AA///AAD//AAAP/gAAB/wAAAP4AAAB8AAAAPAAAADgAAAAYAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAABgAAAAcAAAAPAAAAD4AAAB/AAAA/4AAAf/AAAP/8AAP//wAP/"] {
  content: url(chrome://userchrome/content/engines/google-color.svg) !important;
}

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

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

/* styles for perTabNavButtons.uc.js */
#tab-nav-tooltip-textbox {
  padding: 4px 6px !important;
  border: 0 !important;
}

#tab-nav-popup-mainView .toolbarbutton-1 {
  background: none !important;
  outline: none !important;

  &:focus-visible:not([disabled], [open], :hover, :active) > .toolbarbutton-icon {
    background-color: var(--toolbarbutton-checked-background) !important;
    transition: none !important;
  }
}

/* highlight container tabs in the recently closed tabs/windows menus.
requires recentlyClosedTabsContextMenu.uc.js */
.recently-closed-item[usercontextid] {
  background-image: linear-gradient(to right, var(--identity-tab-color, transparent) 0, var(--identity-tab-color, transparent) 3px, transparent 3px) !important;
}

/* little dots for container tabs etc.
they expand into big stripes on hover/focus.
this overrides the rule above. */
@media (prefers-reduced-motion: no-preference) {
  toolbarbutton.recently-closed-item[usercontextid],
  menuitem.recently-closed-item[usercontextid],
  .all-tabs-item:is([selected], [multiselected], [usercontextid]) .all-tabs-button {
    background-image: none !important;
  }

  toolbarbutton.recently-closed-item[usercontextid]::before,
  menuitem.recently-closed-item[usercontextid]::before,
  .all-tabs-item .all-tabs-button::before {
    content: "";
    display: block;
    min-width: 4px;
    min-height: 4px;
    border-radius: 100%;
    margin-inline: calc(0px - var(--arrowpanel-menuitem-padding-inline)) calc(8px - var(--arrowpanel-menuitem-padding-inline));
    margin-block: calc(0px - var(--arrowpanel-menuitem-padding-block));
    background-color: var(--identity-tab-color);
    transition: 0.15s margin var(--uc-smooth-timing-function), 0.15s min-width var(--uc-smooth-timing-function), 0.15s min-height var(--uc-smooth-timing-function), 0.15s border-radius var(--uc-smooth-timing-function);
  }

  menuitem.recently-closed-item[usercontextid]::before {
    margin-inline: 0 -4px;
    margin-block: 0;
  }

  .all-tabs-item .all-tabs-button::before {
    background-color: var(--main-stripe-color, transparent);
    transition: 0.15s margin var(--uc-smooth-timing-function), 0.15s min-width var(--uc-smooth-timing-function), 0.15s min-height var(--uc-smooth-timing-function), 0.15s border-radius var(--uc-smooth-timing-function), 0.15s background var(--uc-smooth-timing-function);
  }

  toolbarbutton.recently-closed-item[usercontextid]:not([disabled]):is(:hover, :focus-visible)::before,
  .all-tabs-item:is([selected], [multiselected], [usercontextid]:is(:hover, :focus-within)) .all-tabs-button::before {
    min-width: 3px;
    min-height: var(--subviewbutton-height);
    margin-inline: calc(0px - var(--arrowpanel-menuitem-padding-inline)) calc(9px - var(--arrowpanel-menuitem-padding-inline));
    border-radius: var(--arrowpanel-menuitem-border-radius) 0 0 var(--arrowpanel-menuitem-border-radius);
  }

  menuitem.recently-closed-item[usercontextid]:not([disabled])[_moz-menuactive="true"]::before {
    min-width: 3px;
    min-height: var(--menuitem-height);
    margin-inline: 0 -3px;
    border-radius: var(--context-menuitem-border-radius) 0 0 var(--context-menuitem-border-radius);
  }
}

/* this is for miscMods.uc.js' setting "Anchor permissions popup to granted permission icon" */
/* adjust the popup and icon dimensions commensurately */
#permission-popup[anchor-to-icon] {
  margin-inline: calc(-20px + var(--uc-panel-left-offset, 0px)) !important;
}