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

/* controls all sorts of things within or associated with the customizable navbar.
if it's visible in the row beneath the tabs then it's probably in here. */

/* remove line under navigation toolbar */
#navigator-toolbox,
:root:not([sizemode="normal"]) #navigator-toolbox {
  border: none !important;
}

#customization-palette toolbarpaletteitem {
  transform-style: preserve-3d !important;
}

toolbarpaletteitem > toolbarspring {
  margin-block: calc((var(--urlbar-container-height) - var(--urlbar-height)) / 2) !important;
  outline: none !important;
  border: 1px solid var(--arrowpanel-dimmed-even-further) !important;
  outline-offset: 0 !important;
  border-radius: var(--toolbarbutton-border-radius) !important;
}

toolbarpaletteitem[place="palette"] > toolbarspring {
  min-height: var(--urlbar-height) !important;
  max-height: var(--urlbar-height) !important;
  padding-block: 0 !important;
  margin-block: 5px !important;
}

#PersonalToolbar > toolbarpaletteitem > toolbarspring {
  margin-block: revert !important;
  margin-inline: 2px !important;
}

/* toolbar button badges */
:is(.customization-target, .widget-overflow-list) :is(toolbarbutton, toolbaritem):is(:not([attention]), [attention="false"]) > .toolbarbutton-badge-stack > .toolbarbutton-badge:not(.feature-callout) {
  background-color: var(--uc-toolbarbutton-badge-bgcolor, hsl(0, 100%, 42.5%)) !important;
  color: var(--toolbar-color, white) !important;
  box-shadow: 0 1px 1px -1px #ffffff4d inset, 0 -1px 1px -1px #00000080 inset, 0 1px 1px #1e1e2026, 0 1px 3px #1e1e2033 !important;
  min-width: 10.5px !important;
  height: 10.5px !important;
  align-items: end !important;
  font-size: 9px !important;
  font-weight: var(--uc-font-weight-bold, 600) !important;
  line-height: 10px !important;
  filter: none !important;
  margin: -6px -6px 0 -6px !important;
}

.toolbarbutton-badge.feature-callout {
  background-image: url(chrome://userchrome/content/indicator-tab-attention-purple.svg) !important;
  background-size: 10px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  margin: -8px -8px 0 !important;
}

:is(.customization-target, .widget-overflow-list) #downloads-button[attention] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  margin-right: -5.5px !important;
  margin-top: -5.5px !important;
  width: 10px !important;
  height: 10px !important;
  box-shadow: none !important;
  background-image: url(chrome://userchrome/content/devtools/error.svg) !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

:is(.customization-target, .widget-overflow-list) #downloads-button[attention="info"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  background-color: transparent !important;
  -moz-context-properties: none !important;
  border-radius: revert !important;
  background-image: url(chrome://userchrome/content/indicator-tab-attention-purple.svg) !important;
}

:is(.customization-target, .widget-overflow-list) #downloads-button[attention="warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  background-color: var(--low-warning-icon-detail) !important;
  fill: var(--low-warning-icon-background) !important;
  border-radius: 50% !important;
}

:is(.customization-target, .widget-overflow-list) #downloads-button[attention="severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  background-color: var(--warning-icon-detail) !important;
  fill: var(--warning-icon-background) !important;
  border-radius: 50% !important;
}

:is(.customization-target, .widget-overflow-list) #fxa-toolbar-menu-button[badge-status="login_failed"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  background: url(chrome://userchrome/content/skin/controlcenter/warning.svg) no-repeat center/contain !important;
  stroke: var(--low-warning-icon-detail) !important;
  fill: var(--low-warning-icon-background) !important;
  box-shadow: none !important;
  -moz-context-properties: fill, stroke !important;
  padding: 0 !important;
  margin: -7px 0 0 !important;
  margin-inline-end: -6px !important;
  filter: none !important;
}

#tabbrowser-tabs[hiddensoundplaying] ~ #alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  background: transparent url(chrome://userchrome/content/audioUnmutedButton.svg) center/contain !important;
  box-shadow: none !important;
  color: inherit !important;
  display: block !important;
  -moz-context-properties: fill, fill-opacity !important;
  fill: currentColor !important;
  margin: -7px 0 0 !important;
  margin-inline-end: -6px !important;
  min-width: 12px !important;
  min-height: 12px !important;
}

.widget-overflow-list .toolbarbutton-1 > .toolbarbutton-text {
  padding-inline-start: var(--arrowpanel-subviewbutton-iconic-gap, 8px) !important;
}

.widget-overflow-list .toolbaritem-combined-buttons .toolbarbutton-1:not([hidden]) {
  justify-items: center !important;
  display: flex !important;
}

.widget-overflow-list .toolbaritem-combined-buttons .toolbarbutton-1 > .toolbarbutton-text {
  padding-inline-end: 4px !important;
}

.widget-overflow-list #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
  min-width: calc(5ch + 4px) !important;
  padding-inline: 0 !important;
}

:is(toolbar, .customization-palette) .toolbaritem-combined-buttons.chromeclass-toolbar-additional {
  margin-inline: 0 !important;
}

:is(toolbar, .customization-palette) .toolbaritem-combined-buttons.chromeclass-toolbar-additional:not(:hover) > separator {
  width: 0.67px !important;
  height: 20px !important;
  margin-inline-end: -0.67px !important;
  background-image: linear-gradient(currentColor 0, currentColor 100%) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 1px 20px !important;
  opacity: 0.2 !important;
}

:is(toolbar, .customization-palette) .toolbarbutton-combined-buttons-dropmarker,
#PersonalToolbar .toolbaritem-combined-buttons .toolbarbutton-combined-buttons-dropmarker {
  margin-block: var(--toolbarbutton-inner-padding) !important;
}

.customization-palette .toolbarbutton-1 {
  appearance: none !important;
  margin: 0 !important;
  padding: 0 var(--toolbarbutton-outer-padding) !important;
  justify-items: center !important;
}

.customization-palette .toolbarbutton-1 > .toolbarbutton-icon {
  width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
  height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
}

.customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
toolbar .toolbarbutton-1 > .toolbarbutton-text,
toolbar .toolbarbutton-1 > .toolbarbutton-badge-stack {
  padding: var(--toolbarbutton-inner-padding) !important;
  border-radius: var(--toolbarbutton-border-radius) !important;
}

:is(toolbar, .customization-palette) .toolbarbutton-combined-buttons-dropmarker > .toolbarbutton-icon {
  padding-inline: 2px !important;
  padding-block: 2px !important;
  height: 20px !important;
  width: 16px !important;
}

:is(toolbar, .customization-palette) .toolbaritem-combined-buttons.unified-extensions-item toolbarbutton {
  background-color: transparent !important;
  padding: 0 var(--toolbarbutton-outer-padding) !important;
}

:is(toolbar, .customization-palette):not(#PersonalToolbar) #edit-controls > #cut-button,
:is(toolbar, .customization-palette) #profiler-button > #profiler-button-button {
  padding-left: 2px !important;
}

:is(toolbar, .customization-palette):not(#PersonalToolbar) #edit-controls > #paste-button,
:is(toolbar, .customization-palette) #profiler-button > #profiler-button-dropmarker {
  padding-right: 2px !important;
}

#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-out-button,
#wrapper-edit-controls[place="palette"] > #edit-controls > #cut-button,
#wrapper-profiler-button[place="palette"] > #profiler-button > #profiler-button-button,
#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-in-button,
#wrapper-edit-controls[place="palette"] > #edit-controls > #paste-button,
#wrapper-profiler-button[place="palette"] > #profiler-button > #profiler-button-dropmarker {
	align-items: center !important;
  flex: 0 !important;
}

:where(toolbar:not(#PersonalToolbar), .customization-palette) #zoom-controls > :is(#zoom-out-button, #zoom-in-button) {
  margin-block: var(--toolbarbutton-inner-padding) !important;
  width: unset !important;
  padding: 0 !important;
  padding-inline: 2px !important;
}

:where(toolbar:not(#PersonalToolbar), .customization-palette) #zoom-controls > :is(#zoom-out-button, #zoom-in-button) > .toolbarbutton-icon {
  height: 20px !important;
  width: 20px !important;
  padding: 4px !important;
}

#zoom-in-button > .toolbarbutton-icon {
  padding-inline-start: 0 !important;
}

#zoom-controls > #zoom-reset-button > .toolbarbutton-text {
	min-width: revert !important;
}

#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button {
  display: revert !important;
}

#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button::before {
  content: "100%" !important;
  line-height: 1.5em !important;
  height: 20px !important;
  min-height: 20px !important;
  box-sizing: border-box !important;
  font-size: 0.98em;
  padding-inline: 5px !important;
  background: hsla(0, 0%, 100%, 0.045);
  border: 1px solid var(--toolbarbutton-hover-background);
  border-radius: 10px !important;
  opacity: 0.4 !important;
}

:where(toolbar:not(#PersonalToolbar), .customization-palette) #zoom-controls > #zoom-reset-button {
  margin-block: var(--toolbarbutton-inner-padding) !important;
}

:where(toolbar:not(#PersonalToolbar), .customization-palette, panel) #zoom-controls > #zoom-reset-button > .toolbarbutton-text {
  height: 20px !important;
  min-height: 20px !important;
  font-size: 0.98em;
  background: hsla(0, 0%, 100%, 0.045);
  border: 1px solid var(--toolbarbutton-hover-background);
  border-radius: 10px !important;
}

:where(toolbar:not(#PersonalToolbar), .customization-palette, panel) #zoom-controls > #zoom-reset-button:not([disabled]):is(:hover, :focus-visible) > .toolbarbutton-text {
  border-color: transparent;
  background-color: var(--toolbarbutton-hover-background) !important;
}

:where(toolbar:not(#PersonalToolbar), .customization-palette, panel) #zoom-controls > #zoom-reset-button:not([disabled]):hover:active > .toolbarbutton-text {
  background-color: var(--toolbarbutton-active-background) !important;
}

#zoom-controls[cui-areatype="panel"] > #zoom-reset-button {
  padding-block: 0 !important;
  margin: 0 !important;
  min-height: revert !important;
  background: none !important;
}

#zoom-controls[cui-areatype="panel"] > #zoom-reset-button > .toolbarbutton-text {
	padding: var(--toolbarbutton-inner-padding) !important;
  flex: 1 !important;
  padding-block: 4px !important;
  height: auto !important;
  border-radius: 50px !important;
}

:is(toolbar, .customization-palette):not(#PersonalToolbar) #zoom-controls separator {
  display: none !important;
}

:root:not([customizing]) #stop-reload-button > .toolbarbutton-1 {
  opacity: 1 !important;
}

:root:not([customizing]) #stop-reload-button > .toolbarbutton-1:not([checked], [open], :active):hover > .toolbarbutton-icon {
  background-color: var(--toolbarbutton-hover-background);
}

:root:not([customizing]) #stop-reload-button > .toolbarbutton-1:is(:focus-visible, [checked="true"]):not([open], :hover, :active) > .toolbarbutton-icon {
  background-color: var(--toolbarbutton-checked-background);
}

:root:not([customizing]) #stop-reload-button > .toolbarbutton-1:is([open], [checked], :hover:active) > .toolbarbutton-icon {
  background-color: var(--toolbarbutton-active-background);
}

/* fix a little visual bug (maybe related to window scaling) where the stop
button appears to move half a pixel to the left between animations. this is
because the reload button is replaced with a step animation for a few moments,
and the step animation is then replaced with a static stop icon. the stop icon
sticks around until the page finishes loading, then it's hidden again and the
step animation returns and plays in reverse. unfortunately the way the static
icon is rendered is not identical to the step animation for every given scaling
factor. to fix this we can just replace the static icon's path entirely with a
path pulled directly from the step animation. i haven't tested this on every
scaling factor, so if it makes things worse on your setup then just delete or
override this. */
#stop-button .toolbarbutton-icon {
  background-image: url(chrome://userchrome/content/skin/stop-button-fix.svg) !important;
  background-repeat: no-repeat;
  background-position: left 5px center;
  list-style-image: none;
}

#nav-bar[brighttext] #panic-button[open] {
  fill: var(--warning-color) !important;
}

#nav-bar {
  padding-inline: 3px !important;
}

#TabsToolbar-customization-target > #back-button {
  margin-inline-start: 2px !important;
}

#stop-reload-button {
  pointer-events: none !important;
}

#stop-reload-button > * {
  pointer-events: auto !important;
}

toolbar .toolbarbutton-1:not([disabled])[open]:hover > .toolbarbutton-icon {
  background-color: var(--toolbarbutton-active-background) !important;
}

#PersonalToolbar toolbarbutton.bookmark-item {
  padding-inline: var(--toolbarbutton-inner-padding) !important;
}

#PersonalToolbar #OtherBookmarks {
  padding-inline: var(--arrowpanel-menuitem-padding) !important;
}

#PersonalToolbar .toolbarbutton-1:is(:focus-visible, [checked="true"]):not([disabled], [open], :hover, :active) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack),
toolbarbutton.bookmark-item:not(.subviewbutton):is(:focus-visible, [checked="true"]):not([disabled], [open], :hover, :active) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack),
toolbar .toolbarbutton-1:is(:focus-visible, [checked="true"]):not([disabled], [open], :hover, :active) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack) {
  background-color: var(--toolbarbutton-checked-background) !important;
  transition: none !important;
}

toolbar .toolbarbutton-1:not([disabled], [open])[checked] > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) {
  background-color: var(--toolbarbutton-checked-background) !important;
}

#firefox-view-button:is(:focus-visible, [checked="true"]):not([open], :hover, :active) > .toolbarbutton-icon {
  background: var(--toolbarbutton-checked-background) !important;
}

#firefox-view-button:hover > .toolbarbutton-icon {
  background: var(--toolbarbutton-hover-background) !important;
}

#firefox-view-button:is(:hover:active, [open]) > .toolbarbutton-icon {
  background: var(--toolbarbutton-active-background) !important;
}

toolbar .toolbarbutton-1:not([disabled], [open])[checked]:hover > .toolbarbutton-icon {
  background-color: var(--toolbarbutton-hover-background) !important;
}

toolbar .toolbarbutton-1:not([disabled], [open])[checked]:hover:active > .toolbarbutton-icon {
  background-color: var(--toolbarbutton-active-background) !important;
}

.widget-overflow-list .toolbarbutton-1:not([disabled], [open])[checked] {
  background-color: var(--button-bgcolor) !important;
}

.widget-overflow-list .toolbarbutton-1:not([disabled], [open])[checked]:is(:hover, :focus-visible) {
  background-color: var(--button-hover-bgcolor) !important;
}

.widget-overflow-list .toolbarbutton-1:not([disabled], [open])[checked]:hover:active {
  background-color: var(--button-active-bgcolor) !important;
}

toolbar[customizing="true"] toolbarpaletteitem > #sidebar-button:not([disabled], [open])[checked] > :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) {
  background-color: revert !important;
  transition: transform var(--drag-drop-transition-duration) cubic-bezier(0.6, 2, 0.75, 1.5) !important;
}

toolbarpaletteitem[place="palette"]:not([mousedown="true"]):focus-visible,
toolbarpaletteitem[place="menu-panel"]:not([mousedown="true"]):focus-visible,
toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):focus-visible {
  transition: outline-width 0.01s linear var(--drag-drop-transition-duration);
  outline: revert !important;
}

.widget-overflow-list .toolbarbutton-1:not([disabled], [open])[checked]::after {
  content: "";
  display: -moz-inline-box;
  background: url(chrome://userchrome/content/check.svg) no-repeat center/contain;
  fill: currentColor;
  width: 16px;
  height: 16px;
  margin-inline-start: 6px;
}

#PersonalToolbar {
  visibility: visible !important;
  padding-inline: 2px !important;
  min-height: var(--urlbar-height) !important;
  transition: min-height 200ms ease-in-out, max-height 200ms ease-in-out, opacity 200ms ease-in-out !important;
  overflow-y: visible !important;
  outline: none !important;
}

#PersonalToolbar > * {
  transition: opacity 200ms ease-in-out, transform 150ms ease-in-out !important;
}

#PersonalToolbar > toolbarpaletteitem:not([notransition])[place="toolbar"] {
  transition: opacity 200ms ease-in-out, transform 150ms ease-in-out, border-width var(--drag-drop-transition-duration) ease-in-out !important;
}

#PersonalToolbar[customizing] {
  #personal-toolbar-empty {
    display: none;
  }
}

#personal-bookmarks {
  justify-content: revert !important;
}

#PersonalToolbar[customizing][draggingover] {
  z-index: 4 !important;
}

#PersonalToolbar #personal-bookmarks {
  flex-grow: 1;
}

:root[inFullscreen]:not([macOSNativeFullscreen], [customizing]) #PersonalToolbar:not([fullscreentoolbar="true"]),
#PersonalToolbar[collapsed="true"] {
  overflow-y: clip !important;
  min-height: 0 !important;
  max-height: 0 !important;
}

:root[inFullscreen]:not([macOSNativeFullscreen], [customizing]) #PersonalToolbar:not([fullscreentoolbar="true"]) > *,
#PersonalToolbar[collapsed="true"] > * {
  overflow-y: clip !important;
  opacity: 0 !important;
  transform: translateY(-12px);
  transform-origin: top;
  transition: opacity 150ms ease-in-out, transform 150ms ease-in-out !important;
}

#personal-toolbar-empty,
#PersonalToolbar .toolbarbutton-1,
toolbarbutton.bookmark-item:not(.subviewbutton) {
  padding: var(--bookmark-block-padding) 4px;
  min-height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
  min-width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
  align-items: center !important;
}

#PersonalToolbar .toolbarbutton-1,
toolbarbutton.bookmark-item:not(.subviewbutton) {
  margin-block: 0 !important;
}

#personal-toolbar-empty-description,
#PersonalToolbar .toolbarbutton-1,
toolbarbutton.bookmark-item:not(.subviewbutton) {
  margin: 2px;
  padding: var(--bookmark-block-padding) 4px;
}

#personal-toolbar-empty-description {
  min-height: 0 !important;
  margin: 0 var(--bookmark-block-padding) !important;
  padding: 0 !important;
}

#PersonalToolbar a {
  color: var(--uc-parent-link-color) !important;
}

#PersonalToolbar a:is(:active, :focus-visible) {
  color: var(--uc-parent-link-color-active) !important;
}

/* stylelint-disable-next-line media-query-no-invalid */
@media -moz-pref("userChrome.bookmarks-toolbar.icons-only") {
  #PersonalToolbar toolbarbutton.bookmark-item:not(.subviewbutton, [id]) {
    margin-inline: 2px !important;
    padding: 0 !important;
  }

  #PlacesToolbar toolbarbutton.bookmark-item[id]:not(#OtherBookmarks) {
    padding-inline: var(--toolbarbutton-inner-padding) !important;
  }

  #PersonalToolbar toolbarbutton.bookmark-item:not(.subviewbutton, [id]) .toolbarbutton-icon {
    margin: 0 !important;
    width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
    height: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
    padding: var(--toolbarbutton-inner-padding) !important;
    border-radius: var(--toolbarbutton-border-radius) !important;
  }

  #PersonalToolbar toolbarbutton.bookmark-item:not(.subviewbutton, [id]) .toolbarbutton-text {
    display: none !important;
  }

  /* display the background on the icon, not the button, similar to regular
  toolbar widgets. allows us to use padding to space the buttons instead of
  margins, so when we drag a bookmark between buttons, it doesn't get dropped
  at the end of the bookmarks */
  :root:not([fluent-reveal-hover], [fluent-reveal-click]) #PersonalToolbar toolbarbutton.bookmark-item:not(.subviewbutton, [id]) {
    background: none !important;
    margin-inline: 0 !important;
    padding: 0 2px !important;
  }

  :root:not([fluent-reveal-hover], [fluent-reveal-click]) #PlacesToolbarDropIndicator {
    margin-inline-start: -18px !important;
  }

  :root:not([fluent-reveal-hover], [fluent-reveal-click]) #PersonalToolbar toolbarbutton.bookmark-item:not(.subviewbutton, [id]):is(:hover, :-moz-drag-over) .toolbarbutton-icon {
    background-color: var(--toolbarbutton-hover-background) !important;
  }

  :root:not([fluent-reveal-hover], [fluent-reveal-click]) #PersonalToolbar toolbarbutton.bookmark-item:not(.subviewbutton, [id]):hover:active .toolbarbutton-icon {
    background-color: var(--toolbarbutton-active-background) !important;
  }

  :root:not([fluent-reveal-hover], [fluent-reveal-click]) #PersonalToolbar toolbarbutton.bookmark-item:not(.subviewbutton, [id]):is(:focus-visible, [checked="true"]):not([disabled], [open], :hover, :active) .toolbarbutton-icon {
    background-color: var(--toolbarbutton-checked-background) !important;
  }
}

#PersonalToolbar #profiler-button > #profiler-button-dropmarker,
#PersonalToolbar .toolbaritem-combined-buttons .toolbarbutton-combined-buttons-dropmarker {
  min-height: 20px !important;
  min-width: 0 !important;
  padding: 0 !important;
  padding-right: 0 !important;
}

#PersonalToolbar .toolbaritem-combined-buttons {
  min-height: 31.5px !important;
}

#PersonalToolbar #profiler-button > #profiler-button-dropmarker {
  margin-inline-start: 0 !important;
}

#PersonalToolbar[mode="icons"] #import-button > .toolbarbutton-icon {
  margin-inline: 0 !important;
}

#PersonalToolbar[mode="icons"] #import-button > .toolbarbutton-text {
  display: none !important;
}

#PlacesToolbarDropIndicator {
  list-style-image: none !important;
  list-style-image: url(chrome://userchrome/content/tab-drag-indicator.svg) !important;
  -moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
  fill: var(--lwt-toolbarbutton-icon-fill, currentColor) !important;
  margin-top: 22px !important;
  translate: -2.5px !important;
  z-index: 2500 !important;
  width: 20px !important;
  height: 20px !important;
}

#customization-header {
  margin-top: 40px !important;
}

#customization-panel-container {
  z-index: 3 !important;
}

#navigator-toolbox {
  z-index: 3 !important;
}

#nav-bar {
  z-index: 11 !important;
  box-shadow: none !important;
}

/* fullscreen button */
#fullscreen-button .toolbarbutton-icon {
  list-style-image: url(chrome://userchrome/content/skin/fullscreen.svg) !important;
}

#fullscreen-button[checked="true"] .toolbarbutton-icon {
  list-style-image: url(chrome://userchrome/content/skin/fullscreen-exit.svg) !important;
}

#fullscreen-button[checked="true"]:hover .toolbarbutton-icon {
  background-color: var(--toolbarbutton-hover-background) !important;
}

#fullscreen-button[checked="true"]:hover:active .toolbarbutton-icon {
  background-color: var(--toolbarbutton-active-background) !important;
}

/* proton stuff, primarily notifications. imo this is about as sexy as a "your
plugin crashed" notification can get. you can test them by pasting this in the
browser console and hitting enter:

{let notificationTest=gBrowser.getNotificationBox(gBrowser.selectedBrowser);notificationTest.appendNotification(null,{label:"This is a demo notification",priority:notificationTest.PRIORITY_INFO_HIGH},[{label:"Button 1"},{label:"Link 1",supportPage:"https://github.com/aminomancer/uc.css.js"}])}

these are the notifications that appear permanently (until closed) under the
navbar, shaped like long bars. by default they stack vertically and push the
browser content down which is quite a waste. instead we flex them horizontally
and float them over the content area with absolute positioning. notification row
is scrollable (when overflown) with mousewheel right/left. (or mousewheel
up/down if mousewheel.autodir.enabled = true. setting that up without the pref
is difficult for these elements) notification icons/close buttons are animated
with a similar slide+zoom motif to tab icons/close buttons. notifications are
translucent with acrylic effect. enable layout.css.backdrop-filter.enabled */

#navigator-toolbox > :is(legacy-stack, .notificationbox-stack) notification-message,
#navigator-toolbox > named-deck > .notificationbox-stack notification-message,
#navigator-toolbox .global-notificationbox notification-message,
.notificationbox-stack notification {
  --in-content-button-background: var(--desaturate-dimmed) !important;
  --in-content-button-background-hover: var(--desaturate-dimmed-further) !important;
  --in-content-button-background-active: var(--desaturate-dimmed-even-further) !important;
  --in-content-button-border-radius: var(--general-button-border-radius) !important;
  --in-content-link-color: var(--purple-35) !important;
  --in-content-link-color-hover: var(--purple-30) !important;
  --in-content-link-color-active: var(--purple-30) !important;
  --link-color: var(--purple-35) !important;
  --link-color-hover: var(--purple-30) !important;
  --link-color-active: var(--purple-30) !important;
  --notification-button-background: var(--desaturate-dimmed) !important;
  --notification-button-background-hover: var(--desaturate-dimmed-further) !important;
  --notification-button-background-active: var(--desaturate-dimmed-even-further) !important;
  --in-content-primary-button-background: var(--purple-40) !important;
  --in-content-primary-button-background-hover: var(--purple-35) !important;
  --in-content-primary-button-background-active: var(--purple-30) !important;
  --in-content-primary-button-text-color: var(--light-on-dark-button-text-color) !important;
  --in-content-primary-button-text-color-hover: var(--light-on-dark-button-text-color) !important;
  --in-content-item-selected: var(--purple-40) !important;
  --checkbox-border-color: var(--in-content-box-border-color) !important;
  --checkbox-checked-border-color: transparent !important;
  --checkbox-unchecked-bgcolor: var(--in-content-button-background) !important;
  --checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover) !important;
  --checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active) !important;
  --checkbox-checked-bgcolor: var(--in-content-primary-button-background) !important;
  --checkbox-checked-color: var(--in-content-primary-button-text-color) !important;
  --checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover) !important;
  --checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active) !important;
  --dropdown-bgcolor: var(--arrowpanel-background) !important;
  --in-content-button-vertical-padding: 5px !important;
  --message-bar-icon-color: var(--attention-color) !important;
  --message-bar-icon-size: var(--size-item-small);
  --message-bar-icon-close-color: var(--icon-color);
  --message-bar-icon-close-url: url("chrome://global/skin/icons/close-12.svg");
  --message-bar-button-size-ghost: var(--button-min-height);
  --message-bar-button-border-radius-ghost: var(--button-border-radius);
  --message-bar-button-background-color-ghost-hover: var(--button-background-color-hover);
  --message-bar-button-background-color-ghost-active: var(--button-background-color-active);
  --message-bar-container-min-height: 0 !important;
  --message-bar-border-color: color-mix(in srgb, currentColor 9%, transparent);
  --message-bar-border-radius: calc(var(--menupopup-border-radius) - 1px) !important;
  --message-bar-border-width: var(--border-width);
  --message-bar-text-color: var(--text-color);
  --message-bar-text-line-height: 1.5em;
  --message-bar-background-color: var(--color-background-information);
  --info-bar-background-color: light-dark(var(--color-white), rgb(66, 65, 77));
  --info-bar-text-color: light-dark(var(--color-gray-100), var(--color-gray-05));
  color: var(--message-bar-text-color);
  overflow: hidden !important;
}

.notificationbox-stack :is(notification, notification-message) {
  background-color: var(--notification-box-bgcolor) !important;
  background-image: var(--notification-box-bgimage) !important;
  backdrop-filter: var(--notification-box-filter) !important;
}

/* keep margins consistent between the multiple notification box areas */
named-deck:has(.notificationbox-stack:not(:empty)) {
  ~ .notificationbox-stack notification-message:first-of-type {
    margin-top: 0 !important;
  }
}

:root {
  --notification-box-bgcolor: var(--arrowpanel-background) !important;
  --notification-box-bgimage: none !important;
  --notification-box-filter: none !important;
}

link[href="chrome://global/content/elements/moz-message-bar.css"] ~ .container {
  background-color: var(--notification-box-bgcolor) !important;
  background-image: var(--notification-box-bgimage) !important;
  backdrop-filter: var(--notification-box-filter) !important;
  padding-inline: 10px 4px !important;
}

notification-message .notification-button,
link[href="chrome://global/content/elements/moz-message-bar.css"] ~ .container button {
	border-radius: var(--toolbarbutton-border-radius) !important;
}

link[href="chrome://global/content/elements/moz-message-bar.css"] ~ .container button {
  background-size: 14px !important;
}

link[href="chrome://global/content/elements/moz-message-bar.css"] ~ .container button.close:hover {
  background-color: var(--notification-button-background-hover) !important;
}

link[href="chrome://global/content/elements/moz-message-bar.css"] ~ .container button.close:hover:active {
  background-color: var(--notification-button-background-active) !important;
}

link[href="chrome://global/content/elements/moz-message-bar.css"] ~ .container button.ghost-button:not(.semi-transparent):enabled:is(:hover, :focus-visible) {
  background-color: var(--in-content-button-background) !important;
}

link[href="chrome://global/content/elements/moz-message-bar.css"] ~ .container button.ghost-button:not(.semi-transparent):enabled:hover:active {
  background-color: var(--in-content-button-background-hover) !important;
}

#fxa-toolbar-menu-button #fxa-avatar-image {
  display: none;
}

#fxa-toolbar-menu-button .toolbarbutton-icon {
  list-style-image: var(--fxa-ui-img, url(chrome://userchrome/content/fxa/avatar-big.svg));
}

#firefox-view-button {
  list-style-image: var(--uc-firefox-view-icon) !important;
}

#firefox-view-button[attention],
#unified-extensions-button[attention] .toolbarbutton-icon {
  background-image: url(chrome://userchrome/content/indicator-tab-attention-purple.svg) !important;
  background-size: 10px !important;
  background-position: top 5px right 2px !important;
  background-repeat: no-repeat !important;
}