sunhat/themes/firefox/chrome/global/popup.css

/* Edge-Frfox - popup.css */

/*
  MARK: Variables
*/
:root {
  --panel-subview-body-padding: 2px 0 !important;
  --arrowpanel-border-radius: 8px !important;
  --arrowpanel-menuitem-border-radius: 4px !important;
  --arrowpanel-menuitem-margin: var(--uc-arrowpanel-menuitem-margin-block) var(--uc-arrowpanel-menuitem-margin-inline) !important;
  --arrowpanel-menuitem-padding-block: 6px !important;
  --arrowpanel-menuitem-padding-inline: 10px !important;
  --uc-arrowpanel-menuicon-margin-inline: 14px;
  --uc-arrowpanel-menuitem-margin-inline: 4px;
  --uc-arrowpanel-menuitem-margin-block: 2px;
  --panel-separator-margin-vertical: 2px !important;
  --panel-separator-margin-horizontal: 0 !important;

  --uc-panel-zoom-button-padding: 8px;
  --uc-panel-zoom-button-inline-padding: 9px;
  --uc-panel-zoom-padding-block: calc(var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block));

  --uc-autocomplete-panel-menuitem-margin: 4px;
  --uc-autocomplete-panel-menuicon-padding-inline: 14px;
  --uc-autocomplete-panel-separator-margin-vertical: 4px;

  --uc-permission-itemcontainer-padding-block: 8px;
  --uc-permission-item-margin-block: 4px;
  --uc-permission-item-padding-inline: 16px;

  --uc-contextmenu-border-radius: 8px;
  --uc-contextmenu-padding: calc(4px - var(--uc-contextmenu-menuitem-border-width)) 0;
  --uc-contextmenu-menuitem-border-radius: calc(4px + var(--uc-contextmenu-menuitem-border-width));
  --uc-contextmenu-menuitem-padding-block: 6px;
  --uc-contextmenu-menuitem-padding-inline: 10px;
  --uc-contextmenu-menuitem-border-width: 2px;
  --uc-contextmenu-menuicon-margin-inline: 12px;
  --uc-contextmenu-menuitem-margin-inline: calc(4px - var(--uc-contextmenu-menuitem-border-width));
  --uc-contextmenu-menuitem-margin-block: 0px;
  --uc-contextmenu-menuitem-margin: var(--uc-contextmenu-menuitem-margin-block) var(--uc-contextmenu-menuitem-margin-inline);
  --uc-contextmenu-separator-vertical: calc(4px - var(--uc-contextmenu-menuitem-border-width));
  --uc-contextmenu-separator-horizontal: 0;
}

/*
  MARK: App menu
*/
.addon-banner-item,
.panel-banner-item {
  margin: 2px 4px 2px !important;
  padding-inline: 4px 12px !important;
  padding-block: var(--arrowpanel-menuitem-padding-block) !important;
  border-radius: var(--arrowpanel-menuitem-border-radius) !important;
}

#appMenu-fxa-label2 label,
#PanelUI-fxa-menu-syncnow-button label {
  margin-block: 0 !important;
}

.widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
.subviewbutton:not(#appMenu-zoom-controls > .subviewbutton) > .toolbarbutton-icon + .toolbarbutton-text,
#appMenu-fxa-label2 > vbox {
  padding-inline-start: var(--uc-arrowpanel-menuicon-margin-inline) !important;
}

/* special case menuitems with no icons */
#appMenu-zoom-controls > .toolbarbutton-text,
#fxa-manage-account-button > vbox,
#PanelUI-fxa-menu-syncnow-button > hbox {
  padding-inline-start: calc(16px + var(--uc-arrowpanel-menuicon-margin-inline)) !important;
}

.subviewbutton > .toolbarbutton-icon {
  width: 16px !important;
}

/* firefox profile avatar in appmenu */
#appMenu-fxa-label2::before {
  content: "";
  display: flex;
  height: 16px;
  width: 16px;
  background: var(--avatar-image-url) 0/16px;
  scale: 1.25;
  border-radius: 99px;
}

/* disable proton account separator */
#appMenu-fxa-separator {
  border-image: none !important;
}

#appMenu-fxa-status2:not([fxastatus]) {
  padding-block: 0 !important;
}

#appMenu-fxa-status2:not([fxastatus]) > #appMenu-fxa-label2 {
  margin-inline-end: calc(var(--arrowpanel-menuitem-padding-inline) * -1) !important;
}

/* zoom controls */
#appMenu-zoom-controls {
  border-top: 1px solid var(--panel-separator-color) !important;
  padding-inline: calc(var(--arrowpanel-menuitem-padding-inline) + var(--uc-arrowpanel-menuitem-margin-inline)) var(--uc-arrowpanel-menuitem-margin-inline) !important;
  padding-block: var(--uc-panel-zoom-padding-block) !important;
  margin: var(--panel-separator-margin-vertical) 0 calc(var(--panel-separator-margin-vertical) * -1) !important;
}

#appMenu-zoom-controls > .subviewbutton {
  padding: var(--uc-panel-zoom-button-padding) var(--uc-panel-zoom-button-inline-padding) !important;
  margin: 0 !important;
}

#appMenu-zoom-controls > #appMenu-zoomReset-button2 {
  padding: var(--uc-panel-zoom-button-padding) calc(var(--uc-panel-zoom-button-padding) / 2) !important;
}

/* #appMenu-zoomReduce-button2, */
#appMenu-zoom-controls > #appMenu-fullscreen-button2 {
  margin-left: calc((var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block)) * 2 + 1px) !important;
}

#appMenu-zoom-controls > #appMenu-fullscreen-button2::before {
  content: "";
  border-inline-start: 1px solid var(--panel-separator-color);
  display: block;
  position: relative;
  height: 32px;
  margin-block: calc(var(--uc-panel-zoom-button-padding) * -1);
  transform: translateX(calc(var(--uc-panel-zoom-button-inline-padding) * -1 - (var(--panel-separator-margin-vertical) + var(--uc-arrowpanel-menuitem-margin-block)) - 1px));
}

#appMenu-zoomReset-button2 {
  height: calc(16px + var(--uc-panel-zoom-button-padding) * 2) !important;
  min-height: calc(16px + var(--uc-panel-zoom-button-padding) * 2) !important;
}

#appMenu-zoomReduce-button2:not([disabled], [open], :active):is(:hover),
#appMenu-zoomEnlarge-button2:not([disabled], [open], :active):is(:hover),
#appMenu-fullscreen-button2:not([disabled], [open], :active):is(:hover),
#appMenu-zoomReset-button2:not([disabled], [open], :active):is(:hover) {
  background-color: var(--panel-item-hover-bgcolor) !important;
}

#appMenu-zoomReduce-button2:not([disabled]):is([open], :hover:active),
#appMenu-zoomEnlarge-button2:not([disabled]):is([open], :hover:active),
#appMenu-fullscreen-button2:not([disabled]):is([open], :hover:active),
#appMenu-zoomReset-button2:not([disabled]):is([open], :hover:active) {
  background-color: var(--panel-item-active-bgcolor) !important;
}

#appMenu-zoomReduce-button2 > .toolbarbutton-icon,
#appMenu-zoomEnlarge-button2 > .toolbarbutton-icon {
  fill: currentColor !important;
  stroke: none !important;
}

#appMenu-zoomReset-button2 > .toolbarbutton-text,
#appMenu-fullscreen-button2 > .toolbarbutton-icon {
  background-color: transparent !important;
  padding: 0 !important;
}

.subviewbutton[shortcut]::after {
  opacity: 0.7 !important;
}

#widget-overflow-mainView .panel-subview-body {
  padding-bottom: 0 !important;
}

.PanelUI-subView > .panel-header + toolbarseparator {
  margin-bottom: 0 !important;
}

.PanelUI-subView > .panel-header + toolbarseparator + .panel-subview-body {
  padding-top: var(--panel-separator-margin-vertical) !important;
}

#identity-popup-security-button {
  margin-bottom: var(--panel-separator-margin-vertical) !important;
}

#permission-popup-mainView-panel-header,
#identity-popup-mainView-panel-header,
#protections-popup-mainView-panel-header,
.panel-header {
  min-height: calc((var(--arrowpanel-menuitem-padding-block) + 4px) * 2 + 16px) !important;
}

/* URL bar popup */
.panel-footer > button {
  border-radius: 2px !important;
}

.identity-popup-security-connection > hbox > description {
  margin-inline-start: 0 !important;
}

.identity-popup-security-connection.identity-button {
  margin-inline-end: calc(-1 * (var(--arrowpanel-menuitem-padding-inline) - 10px)) !important;
}

#identity-popup-mainView-panel-header-span,
#permission-popup-mainView-panel-header-span,
#identity-popup-mainView-panel-header label,
#permission-popup-mainView-panel-header label,
#protections-popup-mainView-panel-header-span {
  margin-block: 0 !important;
}

.permission-popup-section {
  padding-block: var(--uc-permission-itemcontainer-padding-block) !important;
}

#permission-popup-permissions-content {
  padding-inline: var(--uc-permission-item-padding-inline) !important;
}

.permission-popup-permission-item,
#permission-popup-storage-access-permission-list-header {
  margin-block: var(--uc-permission-item-margin-block) !important;
}

.permission-popup-permission-label,
.permission-popup-permission-header-label {
  margin-inline-start: var(--uc-arrowpanel-menuicon-margin-inline) !important;
}

#editBookmarkPanel > #editBookmarkHeaderSeparator,
#editBookmarkPanel > .panel-subview-body > #editBookmarkSeparator {
  margin-inline: 0 !important;
}

/* subview */
.panel-header {
  padding: 4px !important;
  padding-top: 4px !important;
}

.panel-header + toolbarseparator,
#identity-popup-mainView-panel-header + toolbarseparator,
#permission-popup-mainView-panel-header + toolbarseparator,
#protections-popup-mainView-panel-header-section + toolbarseparator {
  margin-block-start: 0 !important;
}

.panel-header > .subviewbutton-back {
  margin: 0 !important;
  padding: var(--arrowpanel-menuitem-padding-block) !important;
}

.panel-subview-footer-button {
  margin-bottom: 4px !important;
}

.webextension-popup-browser,
.webextension-popup-stack {
  margin-block-start: calc(var(--panel-separator-margin-vertical) * -.5) !important;
}

/*
  MARK: Downloads
*/
.downloadTypeIcon {
  height: 16px !important;
  width: 16px !important;
}

.downloadButton {
  min-width: calc(16px + var(--uc-toolbarbutton-inner-inline-padding) * 2) !important;
  height: calc(16px + var(--toolbarbutton-inner-padding) * 2) !important;
  border-radius: var(--toolbarbutton-border-radius) !important;
}

.downloadProgress::-moz-progress-bar,
.downloadProgress > div {
  background-color: var(--toolbarbutton-icon-fill-attention) !important;
}

.downloadMainArea {
  padding-block: 4px !important;
  padding-inline: 12px !important;
  border-radius: 0 !important;
}

#downloadsListBox > richlistitem {
  padding-inline-end: 8px !important;
  border-radius: var(--arrowpanel-menuitem-border-radius) !important;
}

#downloadsListBox,
.downloadsPanelFooterButton {
  margin: var(--arrowpanel-menuitem-margin) !important;
  width: auto !important;
  min-width: auto !important;
}

#downloadsPanel-blockedSubview,
#downloadsPanel-mainView {
  padding: var(--panel-separator-margin-vertical) 0 !important;
}

#emptyDownloads {
  padding: 1.5em 16px 1.7em !important;
}

#downloadsHistory .button-text {
  margin-block: 0 !important;
  margin-inline: 0 !important;
}

.PanelUI-subView .subviewbutton-nav::after,
#PlacesToolbar menu > .menu-right,
.subviewbutton > .menu-right {
  fill-opacity: 1 !important;
}

/*
  MARK: Extensions
*/
/* #region */

.toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > toolbarbutton:not(.toolbarbutton-1)[disabled] {
  opacity: 1 !important;
  color: var(--panel-disabled-color) !important;
}

/* Removes space above extensions items. */
#unified-extensions-messages-container {
  margin-block: 0 !important;
}

:root {
  --uei-icon-size: 24px !important;
}

@media (-moz-bool-pref: "uc.tweak.context-menu.compact-extensions-menu") {
  :root {
    --uei-icon-size: 16px !important;
  }

  /* Hide site access permissions label. */
  .unified-extensions-item-message-deck {
    display: none !important;
  }

  /* Use smaller toolbar extension icon if available. */
  toolbaritem:is([overflowedItem="true"], [cui-areatype="panel"]) > .webextension-browser-action {
    list-style-image: var(--webextension-toolbar-image, var(--webextension-menupanel-image, inherit)) !important;
  }
}

/* Use smaller font-size in extensions menu on Windows. */
@media (-moz-platform: windows) {
  #unified-extensions-panel .toolbarbutton-text {
    font: menu !important;
    font-family: inherit !important;
  }
}

/* Prevent extension labels from using >1 line, adding ellipsis if necessary. */
.unified-extensions-item-contents {
  flex: 1 !important;

  & > .unified-extensions-item-name,
  & > .unified-extensions-item-message-deck > .unified-extensions-item-message {
    max-width: calc(100% - 4px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* Extension item menu button. */
.unified-extensions-item-menu-button {
  padding: 0 !important;

  & > .toolbarbutton-icon {
    border: none !important;
    padding-inline: var(--arrowpanel-menuitem-padding-inline) !important;
    padding-block: var(--arrowpanel-menuitem-padding-block) !important;
    margin-inline-start: var(--uc-arrowpanel-menuitem-margin-inline) !important;
  }
}

/* Add grayscale filter to extensions with no access to current site. */
.unified-extensions-list .unified-extensions-item-action-button:has(.unified-extensions-item-message[data-l10n-id="origin-controls-state-no-access"]) .unified-extensions-item-icon {
  filter: grayscale(1) !important;
}

/* Adjust spacing between the extension item's icon and label. */
.unified-extensions-item-name,
.unified-extensions-item-message {
  padding-inline-start: var(--uc-arrowpanel-menuicon-margin-inline) !important;
}

.unified-extensions-item-icon,
.unified-extensions-item .webextension-browser-action > .toolbarbutton-badge-stack {
  margin-inline-end: 0 !important;
}
/* #endregion */

/*
  MARK: Autocomplete
*/
#PopupAutoComplete {
  /* workaround for inaccessible shadow-root element
  moves the shadow-root element underneath, and away from panel edges */
  padding-block: 10px !important;
  padding-inline: 2px !important;

  & > .autocomplete-richlistbox {
    background: var(--arrowpanel-background) !important;
    box-shadow: 0 0 0 1px inset var(--arrowpanel-border-color) !important;
    height: auto !important;
    margin-block: -10px !important;
    margin-inline: -2px !important;
    padding: var(--uc-contextmenu-padding) !important;
    border-radius: var(--uc-contextmenu-border-radius) !important;
    color: inherit !important;
  }

  & .autocomplete-richlistitem[originaltype="loginsFooter"] {
    justify-content: start !important;
    color: inherit !important;
    background-color: transparent !important;
    height: 28px !important;
    min-height: 28px !important;
    padding-inline-start: var(--uc-contextmenu-menuitem-padding-inline) !important;
    position: relative !important;
    overflow: visible !important;
    margin-top: calc(var(--uc-contextmenu-separator-vertical) * 2 + 1px) !important;
  }

  /* Separator */
  & .autocomplete-richlistitem[originaltype="loginsFooter"]::before {
    content: "";
    width: calc(100% + var(--uc-contextmenu-menuitem-margin-inline) * 2);
    border-top: 1px solid var(--panel-separator-color);
    position: absolute;
    top: calc((var(--uc-contextmenu-separator-vertical) + var(--uc-contextmenu-menuitem-border-width)) * -1 - 1px);
    left: calc(var(--uc-contextmenu-menuitem-margin-inline) * -1);
  }

  & .autocomplete-richlistitem:hover {
    background-color: var(--panel-item-hover-bgcolor) !important;
  }

  & .autocomplete-richlistitem[selected] {
    background-color: var(--panel-item-active-bgcolor) !important;
    color: inherit !important;
  }

  & .ac-site-icon {
    fill: currentColor !important;
    margin-block: auto !important;
    margin-inline: 0 var(--uc-autocomplete-panel-menuicon-padding-inline) !important;
  }

  & .ac-title {
    margin-inline: calc(16px + var(--uc-autocomplete-panel-menuicon-padding-inline)) !important;
  }

  & .two-line-wrapper {
    padding: 0 !important;
    gap: 0 !important;
  }
}

#PlacesToolbar menuitem,
#PlacesToolbar menu,
panelview .toolbarbutton-1,
.subviewbutton,
.widget-overflow-list .toolbarbutton-1 {
  min-height: calc(16px + var(--uc-contextmenu-menuitem-padding-block) * 2) !important;
}

/*
  MARK: Search bar suggestions
*/
#PopupSearchAutoComplete {
  & .searchbar-separator {
    margin: 4px 0 !important;
  }

  /* Search suggestions. */
  & .autocomplete-richlistitem,
  & .search-panel-header {
    padding-block: 2px !important;
    padding-inline: var(--uc-contextmenu-menuitem-padding-inline) !important;
    margin: 0 var(--uc-arrowpanel-menuitem-margin-inline) !important;
    border-radius: var(--arrowpanel-menuitem-border-radius) !important;

    & > .ac-type-icon {
      margin-inline-start: 0 !important;
    }
  }

  /* Search engine selector. */
  & .search-one-offs {
    padding-block: 0 5px !important;

    & #searchbar-one-offs-header-label {
      margin-inline-start: 0 !important;
    }

    & .search-panel-one-offs-container {
      margin-inline: 1px 7px !important;
    }
  }

}

/*
  MARK: Context menu
*/

/* disable context menu when this tweak is applied */
@media not (-moz-bool-pref: "uc.tweak.revert-context-menu") {
  /* Context Menu */
  menupopup:not(.PanelUI-subView),
  menupopup:not(.PanelUI-subView) menuitem,
  menupopup:not(.PanelUI-subView) menu,
  menupopup:not(.PanelUI-subView) menuseparator,
  panel:not(#PopupSearchAutoComplete) {
    appearance: none !important;
  }

  menupopup:not(.PanelUI-subView),
  #PopupAutoComplete,
  menulist > menupopup:not(.PanelUI-subView) > menucaption {
    -moz-window-shadow: none !important;
    background: 0 !important;
    border: 0 !important;
    color: var(--arrowpanel-color) !important;
  }

  .popup-internal-box,
  #PopupAutoComplete > .autocomplete-richlistbox,
  .menupopup-arrowscrollbox {
    background: var(--arrowpanel-background) !important;
    border: 1px solid var(--arrowpanel-border-color) !important;
  }

  /* make room for menu shadow */
  menupopup:not(.PanelUI-subView) {
    padding: 4px 12px 20px !important;
    margin: -6px -12px -16px !important;
  }

  /* cut off shadow so it doesn't get in the way of the menubar items */
  menubar menupopup {
    padding: 1px 8px 20px !important;
    margin: -1px -4px -16px !important;
  }

  menupopup {
    --uc-margin: 0 !important;
    --uc-outline-color: #0001;
    --uc-box-shadow:
      0 8px 12px #0003,
      0 4px 5px #0002,
      0 2px 4px #0002;
  }

  @media (prefers-color-scheme:dark) {
    menupopup {
      --uc-outline-color: #0002;
      --uc-box-shadow:
        0 8px 12px #0003,
        0 4px 5px #0003,
        0 2px 4px #0002;
    }
  }

  /* use default shadow for subview menupopup (eg. bookmarks) */
  menupopup.PanelUI-subView {
    --uc-box-shadow: 0 0 0 1px var(--panel-border-color);
    --uc-margin: 1px !important;
    margin-top: -5px !important;
  }

  .menupopup-arrowscrollbox {
    box-shadow: var(--uc-box-shadow) !important;
    outline: .5px solid var(--uc-outline-color) !important;
  }

  .popup-internal-box {
    margin: 0 !important;
  }

  .popup-internal-box,
  .menupopup-arrowscrollbox {
    padding: var(--uc-contextmenu-padding) !important;
    border-radius: var(--uc-contextmenu-border-radius) !important;
    color: inherit !important;
  }

  menupopup menu[disabled="true"],
  menupopup menuitem[disabled="true"] {
    color: var(--panel-disabled-color) !important;
    background: none !important;
  }

  menupopup menu:hover:not([disabled=true]),
  menupopup menuitem:hover:not([disabled=true]),
  menupopup menu[_moz-menuactive]:not([disabled=true]),
  menupopup menuitem[_moz-menuactive]:not([disabled=true]) {
    background-color: var(--panel-item-hover-bgcolor) !important;
    color: inherit !important;
  }

  menupopup menuitem:hover:active:not([disabled=true]),
  menupopup menu:hover:active:not([disabled=true]) {
    background-color: var(--panel-item-active-bgcolor) !important;
    color: inherit !important;
  }

  menupopup menuseparator,
  panel menuseparator,
  #PopupSearchAutoComplete .searchbar-separator {
    margin: var(--uc-contextmenu-separator-vertical) 0 !important;
    padding: 0 !important;
    background: none !important;
    border-top: 1px solid var(--panel-separator-color) !important;

    &::before {
      content: unset !important;
    }
  }

  #PlacesToolbar menupopup[placespopup="true"] menuseparator::before {
    display: none !important;
  }

  menupopup menu,
  menupopup menuitem,
  menupopup menucaption,
  #PopupAutoComplete > richlistbox > richlistitem,
  #PopupSearchAutoComplete .autocomplete-richlistitem {
    padding: var(--uc-contextmenu-menuitem-padding-block) var(--uc-contextmenu-menuitem-padding-inline) !important;
    margin: var(--uc-contextmenu-menuitem-margin) !important;
    border-radius: var(--uc-contextmenu-menuitem-border-radius) !important;
    border: var(--uc-contextmenu-menuitem-border-width) solid transparent !important;
    background-clip: padding-box !important;
    min-height: calc(16px + (var(--uc-contextmenu-menuitem-padding-block) + var(--uc-contextmenu-menuitem-border-width)) * 2) !important;
  }

  :not(:not(menubar)>menu, #ContentSelectDropdown) > menupopup > menuitem:not(.menuitem-iconic, [type="checkbox"], [type="radio"], .in-menulist, .in-menulist menuitem, .unified-nav-current),
  :not(:not(menubar)>menu, #ContentSelectDropdown) > menupopup > menu:not(.menu-iconic, [type="checkbox"], [type="radio"], .in-menulist, .in-menulist menu, .unified-nav-current),
  :not(:not(menubar)>menu, #ContentSelectDropdown) > menupopup > menucaption {
    padding-inline-start: calc(var(--uc-contextmenu-menuitem-padding-inline) + 16px + var(--uc-contextmenu-menuicon-margin-inline)) !important;
  }

  .menu-iconic-icon {
    margin-block: 0 !important;
    margin-inline-end: 0 !important;
    margin-inline-start: 0 !important;
  }

  menu > .menu-iconic-text,
  menuitem > .menu-iconic-text,
  /* Used for vertical context navigation tweak. */
  #context-navigation > .menuitem-iconic::after {
    padding-inline-start: var(--uc-contextmenu-menuicon-margin-inline) !important;
  }

  .menu-text,
  .menu-iconic-text {
    margin-inline-start: 0 !important;
    padding-block: 0 !important;
  }

  .menu-accel,
  .menu-iconic-accel {
    margin-inline-end: 0 !important;
    padding-block: 0 !important;
    opacity: 0.7 !important;
  }

  .menu-iconic > .menu-iconic-left,
  .menuitem-iconic > .menu-iconic-left {
    padding-inline-end: 0 !important;
    padding-block: 0 !important;
  }

  menuitem:is(.menuitem-iconic:not([data-usercontextid]), [type="checkbox"], [type="radio"], [checked], [selected]) .menu-iconic-icon {
    -moz-context-properties: fill !important;
    fill: currentColor !important;
  }

  .menu-right,
  .menu-accel-container {
    appearance: none !important;
    margin-inline-end: 0 !important;
    -moz-context-properties: fill;
    fill: currentColor !important;
  }

  menupopup menuitem:is([type="checkbox"], [type="radio"]) .menu-iconic-icon,
  menulist > menupopup > menuitem .menu-iconic-icon,
  menu .menu-right {
    height: 16px !important;
    width: 16px !important;
  }

  menulist > menupopup > menuitem:is([checked="true"], [selected="true"])::before,
  menupopup > menuitem::before,
  menupopup > menu::before,
  menupopup > menuitem::after {
    display: none !important;
  }

  menuitem:is([type="checkbox"], [checked="true"], [type="radio"]) > .menu-iconic-left > .menu-iconic-icon {
    display: flex !important;
  }

  menuitem[checked="true"] > .menu-iconic-left,
  menu > .menu-iconic-left,
  menuitem > .menu-iconic-left {
    margin: 0 !important;
    padding: 0 !important
  }

  #context-navigation:not([hidden]) {
    padding: 0 !important;
    --menuitem-min-width: calc(16px + var(--uc-contextmenu-menuitem-padding-inline) * 2) !important;
    min-width: calc(4 * var(--menuitem-min-width));
  }

  #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
    width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
  }

  #context-navigation {
    margin-inline: var(--uc-contextmenu-menuitem-margin-inline) !important;
  }

  #context-navigation > .menuitem-iconic {
    justify-content: center !important;
  }

  #context-navigation > .menuitem-iconic {
    margin: 0 !important;
  }

  #context-navigation > .menuitem-iconic {
    flex-grow: 1 !important;
    width: unset !important;
  }

  #context-navigation > .menuitem-iconic[_moz-menuactive="true"] > .menu-iconic-left > .menu-iconic-icon {
    background-color: transparent !important;
  }

  #context-bookmarkpage[starred] .menu-iconic-icon {
    fill: var(--lwt-toolbarbutton-icon-fill-attention, var(--toolbarbutton-icon-fill-attention, currentColor)) !important;
  }

  @media (not (-moz-bool-pref: "uc.tweak.smaller-context-menu-text")) and (-moz-platform: windows) {
    .menu-text,
    .menu-iconic-text,
    panel .toolbarbutton-text,
    #PopupSearchAutoComplete .ac-title,
    /* Used for vertical context navigation tweak. */
    #context-navigation > .menuitem-iconic::after {
      margin-inline-start: 0 !important;
      margin-block: -3px -1px !important;
      padding-block: 0 !important;
    }

    .menu-text,
    .menu-iconic-text,
    panel .toolbarbutton-text,
    #appMenu-fxa-status2,
    .panel-header,
    #PopupSearchAutoComplete,
    /* Used for vertical context navigation tweak. */
    #context-navigation > .menuitem-iconic::after {
      font-size: 13.6px !important;
    }
  }
}

/*
  MARK: Dialog box
*/

/* Dialog shadow and outline adjustments. */
.dialogBox:not(.spotlightBox) {
  border-radius: 8px !important;
  outline: 0.5px solid var(--panel-separator-color) !important;
  box-shadow:
    0 20px 38px rgb(0 0 0 / 0.23),
    0 5px 9px rgb(0 0 0 / 0.22) !important;
}

dialog {
  /* Dialog title. */
  & #titleContainer {
    /* Add larger gap between icon and title text. */
    & .titleIcon {
      padding-inline-end: 8px !important;
    }

    /* Match font style in Edge. */
    & #titleText {
      font-size: 1.18em !important;
      font-weight: 700 !important;
    }

    /* Adjust vertical alignment of title text. */
    @media (-moz-platform: macOS) {
      &:not([noicon]) > #titleCropper {
        translate: 0 calc(-1px - max(.55 * var(--icon-size) - .6em, 0px)) !important;
      }
    }
  }

  /* Input focus style. */
  & input:where([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):focus {
    outline: 2px solid var(--in-content-box-border-color) !important;
    outline-offset: -2px !important;
  }
}

/* FF123+ tab preview pop-up.
 * CSS reference: https://searchfox.org/mozilla-central/source/browser/components/tabpreview/tabpreview.css
 * Requires `browser.tabs.cardPreview.enabled` set to `true` */
.tab-preview-container {
  background-color: var(--arrowpanel-background) !important;
  color: var(--arrowpanel-color) !important;
  border: 0.5px solid var(--panel-separator-color) !important;
  border-radius: 8.5px !important;

  /* Place thumbnail at the top of the tooltip. */
  display: flex !important;
  flex-direction: column-reverse !important;

  & .tab-preview-uri {
    color: var(--panel-description-color) !important;
  }
}