gecko-dev/browser/themes/osx/browser.css

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@namespace html url("http://www.w3.org/1999/xhtml");

%include ../shared/browser.inc.css

:root {
  --toolbar-non-lwt-bgcolor: #f9f9fa;
  --toolbar-non-lwt-textcolor: #0c0c0d;
  --toolbar-non-lwt-bgimage: none;

  --toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-inner-padding) + 1px);
  --toolbarbutton-border-radius: 4px;
  --toolbarbutton-icon-fill-opacity: .7;

  --panel-separator-color: hsla(210,4%,10%,.14);
  --arrowpanel-dimmed: hsla(0,0%,80%,.35);
  --arrowpanel-dimmed-further: hsla(0,0%,80%,.5);
  --arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8);

  --arrowpanel-field-background: rgba(249,249,250,.3);

  --urlbar-separator-color: hsla(0,0%,16%,.2);

  --chrome-content-separator-color: #e1e1e2;
}

:root:-moz-lwtheme {
  --chrome-content-separator-color: rgba(0,0,0,.3);
}

:root[lwt-popup-brighttext] {
  --panel-separator-color: rgba(249,249,250,.1);

  --arrowpanel-dimmed: rgba(249,249,250,.1);
  --arrowpanel-dimmed-further: rgba(249,249,250,.15);
  --arrowpanel-dimmed-even-further: rgba(249,249,250,.2);

  --arrowpanel-field-background: rgba(12,12,13,.3);
}

#navigator-toolbox {
  appearance: none;
  --tabs-border-color: rgba(0,0,0,.3);
}

/*
  This is a workaround for Bug 1482157
  -moz-default-appearance: toolbox; makes the macOS sheets attached to the
  element's bottom border. We cannot put this property on the toolbox itself as
  it cancels all backgrounds that are there, so we set it on the toolbox bottom
  border.
*/
#navigator-toolbox::after {
  content: "";
  display: -moz-box;
  appearance: auto;
  -moz-default-appearance: toolbox;
  height: 1px;
  margin-top: -1px;
  opacity: 0.001;
}

#tabbrowser-tabs {
  --tab-line-color: #0a84ff;
}

#navigator-toolbox toolbarbutton:-moz-lwtheme {
  color: inherit;
  text-shadow: inherit;
}

/** Begin titlebar **/

#titlebar {
  /* Centrally align content items vertically */
  -moz-box-pack: center;
}

.titlebar-button {
  display: none;
}

/* Making the toolbox position:relative (browser.inc.css) occludes titlebar indicators
 * if the toolbox has a background. Fix this by positioning the relevant elements, too: */
#titlebar-secondary-buttonbox {
  position: relative;
  z-index: 1;
  /* Centrally align indicators and full screen button vertically */
  -moz-box-align: center;
}

.titlebar-buttonbox-container {
  -moz-box-align: center;
}

/* These would be margin-inline-start/end if it wasn't for the fact that OS X
 * doesn't reverse the order of the items in the titlebar in RTL mode. */
.titlebar-buttonbox {
  margin-left: 12px;
}

/* The fullscreen button doesnt show on Yosemite(10.10) or above so dont give it a
   border there */
@media (-moz-mac-yosemite-theme: 0) {
  .titlebar-spacer[type="fullscreen-button"] {
    margin-right: 4px;
  }
}

/** End titlebar **/

:root[chromehidden~="toolbar"][chromehidden~="location"][chromehidden~="directories"] {
  border-top: 1px solid rgba(0,0,0,0.65);
}

.browser-toolbar:not(.titlebar-color) {
  appearance: none;
  background: var(--toolbar-bgcolor);
  color: var(--toolbar-color);
}

/* Draw the bottom border of the tabs toolbar when it's not using
   -moz-default-appearance: toolbar. */
:root:-moz-any([sizemode="fullscreen"],[customizing]) #nav-bar:not([tabs-hidden="true"]),
:root:not([tabsintitlebar]) #nav-bar:not([tabs-hidden="true"]),
#nav-bar:not([tabs-hidden="true"]):-moz-lwtheme {
  box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 var(--tabs-border-color);
}

/* Always draw a border on Yosemite to ensure the border is well-defined there
 * (the default border is too light). */
@media (-moz-mac-yosemite-theme) {
  #navigator-toolbox:not(:-moz-lwtheme) {
    --tabs-border-color: rgba(0,0,0,.2);
  }
  #navigator-toolbox:not(:-moz-lwtheme):-moz-window-inactive {
    --tabs-border-color: rgba(0,0,0,.05);
  }

  :root[tabsintitlebar] #nav-bar:not([tabs-hidden="true"]):not(:-moz-lwtheme) {
    box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 var(--tabs-border-color);
  }
}

#nav-bar:not([tabs-hidden="true"]) {
  /* The toolbar buttons that animate are only visible when the #TabsToolbar is not collapsed.
     The animations use position:absolute and require a positioned #nav-bar. */
  position: relative;
}

#PersonalToolbar:not(:-moz-lwtheme):-moz-window-inactive,
#nav-bar:not(:-moz-lwtheme):-moz-window-inactive {
  background-color: -moz-mac-chrome-inactive;
}

/* ----- BOOKMARK TOOLBAR ----- */

#nav-bar-customization-target > #wrapper-personal-bookmarks > #personal-bookmarks {
  min-height: 32px;
  -moz-box-align: center;
}

/* Workaround for native menubar inheritance */
.openintabs-menuitem {
  list-style-image: none;
}

.bookmark-item[cutting] > .toolbarbutton-icon,
.bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
  opacity: 0.5;
}

.bookmark-item[cutting] > .toolbarbutton-text,
.bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
  opacity: 0.7;
}

/* ----- BOOKMARK MENUS ----- */

.bookmark-item > .menu-iconic-left > .menu-iconic-icon {
  width: 16px;
  height: 16px;
}

#bookmarksToolbarFolderMenu,
#BMB_bookmarksToolbar,
#panelMenu_bookmarksToolbar {
  list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg");
}

#menu_unsortedBookmarks,
#BMB_unsortedBookmarks,
#panelMenu_unsortedBookmarks {
  list-style-image: url("chrome://browser/skin/places/unfiledBookmarks.svg");
}

%include ../shared/toolbarbuttons.inc.css
%include ../shared/toolbarbutton-icons.inc.css
%include ../shared/menupanel.inc.css

/* Override OSX-specific toolkit findbar button styles */
.findbar-button {
  background-image: none !important;
  box-shadow: none !important;
  border: none;
}

/* On Mac, native buttons keep their full opacity when they become disabled
 * and only the glyph or text on top of them becomes less opaque. */
:root:not([customizing]) #back-button[disabled="true"] {
  opacity: 1 !important;
  /* Disabled toolbar buttons get an opacity of 0.4 which multiplies
   * their fill-opacity of 0.7. calc() doesn't work here - we'd need
   * to multiply two unitless numbers and that's invalid in CSS, so
   * we need to hard code the value for now. */
  fill-opacity: 0.28;
}

/* Inactive elements are faded out on OSX */
.toolbarbutton-1:not(:hover):-moz-window-inactive,
:root:not([customizing]) .toolbarbutton-1:-moz-window-inactive[disabled="true"] {
  opacity: 0.5;
}

/* ----- FULLSCREEN WINDOW CONTROLS ----- */

#minimize-button,
#close-button,
#fullscreen-button ~ #window-controls > #restore-button {
  display: none;
}

/* Address bar */

%include ../shared/urlbar-searchbar.inc.css

#urlbar,
#searchbar {
  font-size: 1.25em;
}

@supports -moz-bool-pref("browser.urlbar.experimental.expandTextOnFocus") {
  #urlbar[breakout-extend] {
    font-size: 1.36em;
  }
}

/* Ensure diacritics and other edge-of-font-box glyphs do not get clipped,
 * even in non-Latin scripts. */
#urlbar-input {
  line-height: 1.745em;
}

%include ../shared/identity-block/identity-block.inc.css
%include ../shared/notification-icons.inc.css
%include ../shared/addon-notification.inc.css

#pageAction-urlbar-shareURL,
#pageAction-panel-shareURL {
  list-style-image: url("chrome://browser/skin/share.svg");
}

/* Address bar results view */

%include ../shared/urlbarView.inc.css

:root {
  --urlbar-popup-url-color: hsl(210, 77%, 47%);
  --urlbar-popup-action-color: hsl(178, 100%, 28%);
}

.urlbarView:not(:-moz-lwtheme),
#PopupSearchAutoComplete:not(:-moz-lwtheme) {
  /* Set custom disabled text color since native graytext is too faint on macOS 10.14+. */
  --panel-disabled-color: #737373;
}

/* ----- AUTOCOMPLETE ----- */

%include ../shared/autocomplete.inc.css

#PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
  border-top: 1px solid #C7C7C7;
}

#BMB_bookmarksPopup[side="top"],
#BMB_bookmarksPopup[side="bottom"] {
  margin-inline: -26px;
}

#BMB_bookmarksPopup[side="left"],
#BMB_bookmarksPopup[side="right"] {
  margin-block: -26px;
}

/* Bookmarking panel */

%include ../shared/places/editBookmarkPanel.inc.css

#editBookmarkPanelRows > vbox > html|input,
#editBookmarkPanelRows > vbox > hbox > html|input {
  appearance: none;
  background-color: var(--arrowpanel-field-background);
  color: inherit;
  border-radius: 2px;
  border: 1px solid var(--panel-separator-color) !important;
  margin: 0;
  padding: 3px 6px;
}

#editBookmarkPanelRows > vbox > html|input:focus,
#editBookmarkPanelRows > vbox > hbox > html|input:focus {
  border-color: -moz-mac-focusring !important;
  box-shadow: var(--focus-ring-box-shadow);
}

/* The following elements come from editBookmarkPanel.inc.xhtml. Styling that's
   specific to the editBookmarkPanel should be in browser.css. Styling that
   should be shared by all editBookmarkPanel.inc.xhtml consumers should be in
   editBookmark.css. */

#editBMPanel_newFolderBox {
  background-color: var(--arrowpanel-field-background);
  color: inherit;
  border-radius: 0 2px;
  border: 1px solid var(--panel-separator-color);
  margin: 0;
  padding: 0;
  height: 24px;
}

#editBMPanel_newFolderButton {
  appearance: none;
  -moz-box-flex: 1;
  -moz-context-properties: fill, fill-opacity;
  fill: currentColor;
  fill-opacity: 0.8;
  border: none;
  padding: 0 9px;
  margin: 0;
  min-height: 24px;
  height: 24px;
  color: inherit;
  list-style-image: url("chrome://browser/skin/add.svg");
}

#editBMPanel_newFolderButton:hover {
  background-color: var(--arrowpanel-dimmed);
}

#editBMPanel_newFolderButton:hover:active {
  background-color: var(--arrowpanel-dimmed-further);
}

#editBMPanel_newFolderButton:-moz-focusring {
  box-shadow: var(--focus-ring-box-shadow);
}

#editBMPanel_newFolderButton .button-text {
  -moz-box-flex: 1; /* push the button icon to the start side */
  text-align: start;
}

#editBMPanel_folderMenuList {
  margin: 0;
  min-height: 22px;
  padding-block: 2px 1px;
  padding-inline: 8px 4px;
}

#editBMPanel_folderMenuList:-moz-focusring {
  box-shadow: var(--focus-ring-box-shadow);
}

#editBMPanel_folderMenuList::part(dropmarker) {
  appearance: none;
  -moz-context-properties: fill, fill-opacity;
  fill: currentColor;
  fill-opacity: 0.8;
  list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
  display: -moz-box;
  -moz-box-align: center;
  padding-inline-end: 4px;
  width: 7px;
}

/**** folder tree and tag selector ****/

#editBMPanel_folderTree,
#editBMPanel_tagsSelector {
  appearance: none;
  background-color: var(--arrowpanel-field-background);
  color: inherit;
  border-radius: 2px;
  border: 1px solid var(--panel-separator-color);
  margin: 0;
}

#editBMPanel_folderTree:-moz-focusring,
#editBMPanel_tagsSelector:-moz-focusring {
  border-color: -moz-mac-focusring;
  box-shadow: var(--focus-ring-box-shadow);
}

#editBMPanel_folderTree > treechildren::-moz-tree-row(blur,selected),
#editBMPanel_tagsSelector:not(:focus) > richlistitem[selected] {
  background-color: var(--arrowpanel-dimmed);
}

#editBMPanel_folderTree > treechildren::-moz-tree-twisty(blur,selected),
#editBMPanel_folderTree > treechildren::-moz-tree-image(blur,selected),
#editBMPanel_folderTree > treechildren::-moz-tree-cell-text(blur,selected),
#editBMPanel_tagsSelector:not(:focus) > richlistitem[selected] {
  color: inherit;
}

#editBMPanel_folderTree {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
  margin: 0 !important;
  min-width: 27em;
  position: relative;
}

/**** expanders ****/

#editBookmarkPanel .expander-up,
#editBookmarkPanel .expander-down {
  appearance: none; /* override button.css */
  -moz-context-properties: fill, fill-opacity;
  fill: currentColor;
  fill-opacity: 0.8;
  margin: 0;
  margin-inline-start: 4px;
  min-width: 27px;
  min-height: 22px;
}

#editBookmarkPanel .expander-up > .button-box > .button-icon,
#editBookmarkPanel .expander-down > .button-box > .button-icon {
  margin: 1px 0 0;
}

#editBookmarkPanel .expander-up > .button-box > .button-text,
#editBookmarkPanel .expander-down > .button-box > .button-text {
  display: none;
}

#editBookmarkPanel .expander-up {
  list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg");
}

#editBookmarkPanel .expander-down {
  list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
}

/* ----- SIDEBAR ELEMENTS ----- */

%include ../shared/sidebar.inc.css

#browser {
  --sidebar-border-color: hsla(240, 5%, 5%, .1);
}

#sidebar-box {
  /* Default font size is 11px on mac, so this is 12px */
  font-size: 1.0909rem;
  --sidebar-background-color: -moz-mac-source-list;
}

/* Give the sidebar a vibrant appearance. Only do this when no lwtheme is
 * in use, because vibrant appearance values only work if there is no
 * background-color rendered behind the element, and we have :root:-moz-lwtheme
 * rules which set appearance: none and an opaque background color on the
 * root element. That background color would interfere with the vibrancy.
 * See bug 1594132 for fixing this. */
#sidebar-box:not(:-moz-lwtheme) {
  appearance: auto;
  -moz-default-appearance: -moz-mac-source-list;
  -moz-font-smoothing-background-color: -moz-mac-source-list;
}

/* ----- CONTENT ----- */

.browserContainer > findbar {
  /* Use the default background gradient from findBar.css */
  background-color: transparent;
  color: -moz-DialogText;
}

.openintabs-menuitem {
  list-style-image: none;
}

/* ::::: tabbrowser ::::: */

#tabbrowser-tabbox {
  margin: 0;
}

%include ../shared/tabs.inc.css

.tab-label {
  margin-block: 1px 0;
}

.tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-icon-image:not([selected="true"]):not([multiselected]) {
  opacity: .9;
}

/*
 * Force the overlay to create a new stacking context so it always appears on
 * top of the icon.
 */
.tab-icon-overlay {
  opacity: 0.9999;
}

.tab-label-container:not([selected="true"]):not([multiselected]) {
  opacity: .7;
}

.tabbrowser-tab {
  font: message-box;
  border: none;
}
.tabbrowser-tab[multiselected]:not(:-moz-lwtheme),
.tabbrowser-tab[visuallyselected=true]:not(:-moz-lwtheme) {
  /* overriding tabbox.css */
  color: hsl(240, 5%, 5%);
}

.tabbrowser-tab[multiselected],
.tabbrowser-tab[visuallyselected=true] {
  /* overriding tabbox.css */
  text-shadow: inherit;
}

:-moz-any(.keyboard-focused-tab, .tabbrowser-tab:focus:not([aria-activedescendant])) > .tab-stack > .tab-content > .tab-label-container:not([pinned]),
:-moz-any(.keyboard-focused-tab, .tabbrowser-tab:focus:not([aria-activedescendant])) > .tab-stack > .tab-content > .tab-icon-image[pinned],
:-moz-any(.keyboard-focused-tab, .tabbrowser-tab:focus:not([aria-activedescendant])) > .tab-stack > .tab-content > .tab-throbber[pinned] {
  box-shadow: var(--focus-ring-box-shadow);
}

#TabsToolbar > .toolbar-items {
  padding-top: var(--space-above-tabbar);
}

#TabsToolbar:not(:-moz-lwtheme) {
  color: #333;
}

:root:-moz-any([inFullscreen], [tabsintitlebar]) #TabsToolbar:not(:-moz-lwtheme) {
  appearance: auto;
  -moz-default-appearance: -moz-mac-vibrant-titlebar-dark;
  -moz-font-smoothing-background-color: -moz-mac-vibrant-titlebar-dark;
  background-color: #232323;
  color: hsl(240, 9%, 98%);
  text-shadow: none;
}

.tabbrowser-tab[multiselected]:not(:-moz-lwtheme),
.tabbrowser-tab[visuallyselected=true]:not(:-moz-lwtheme) {
  -moz-font-smoothing-background-color: var(--toolbar-bgcolor);
}

#tabbrowser-tabs {
  -moz-box-align: stretch;
  padding-inline: 0;
  margin-bottom: 0;
  position: static;
}

/* Bookmark drag and drop styles */

.bookmark-item[dragover-into="true"] {
  background: Highlight !important;
  color: HighlightText !important;
}

/* Translation */

%include ../shared/translation/infobar.inc.css

notification[value="translation"] {
  color: #484848;
  background-color: #EFEFEF;
  background-image: none;
  border-top: none;
  border-bottom: 1px solid #c4c4c4;
  padding-block: 1px;
  min-height: 35px;
}

.translate-infobar-element {
  margin-block: 0 !important;
}

button.translate-infobar-element {
  background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.1)) repeat scroll 0% 0% padding-box transparent;
  color: #333333;
  border: 1px solid;
  border-color: rgba(23, 51, 78, 0.15) rgba(23, 51, 78, 0.17) rgba(23, 51, 78, 0.2);
  box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5) inset, 0px 1px 0px rgba(255, 255, 255, 0.2);
  transition-property: background-color, border-color, box-shadow;
  transition-duration: 150ms;
  min-height: 22px;
  min-width: 0;
  padding: 0 0.8em;
  margin-inline: 0.25em;
}

button.translate-infobar-element .button-text {
  margin-inline: 0;
}

label.translate-infobar-element {
  padding-top: 2px;
}

button.translate-infobar-element:hover {
  background: #f0f0f0;
  box-shadow: 0 1px 0 hsla(0,0%,100%,.1) inset,  0 0 0 1px hsla(0,0%,100%,.05) inset,  0 1px 0 hsla(210,54%,20%,.01),  0 0 4px hsla(206,100%,20%,.1);
}

button.translate-infobar-element:active {
  box-shadow: 0 1px 1px hsla(211,79%,6%,.1) inset,  0 0 1px hsla(211,79%,6%,.2) inset;
  transition-duration: 0ms;
}

button.translate-infobar-element[anonid="translate"] {
  color: #ffffff;
  background: linear-gradient(#4cb1ff, #1793e5);
  box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset,  0 0 0 1px hsla(0,0%,100%,.1) inset,  0 1px 0 hsla(210,54%,20%,.03);
  border-color: hsla(210,54%,20%,.15) hsla(210,54%,20%,.17) hsla(210,54%,20%,.2);
  padding: 0 1.1em;
}

button.translate-infobar-element[anonid="translate"]:hover {
  background-image: linear-gradient(#66bdff, #0d9eff);
  box-shadow: 0 1px 0 hsla(0,0%,100%,.2) inset,  0 0 0 1px hsla(0,0%,100%,.1) inset,  0 1px 0 hsla(210,54%,20%,.03),  0 0 4px hsla(206,100%,20%,.2);
}

button.translate-infobar-element.options-menu-button {
  padding-inline: 0.5em 0;
}

button.translate-infobar-element.options-menu-button > .button-box > .button-menu-dropmarker {
  display: -moz-box;
  -moz-context-properties: fill;
  fill: currentColor;
  list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
  padding: 0;
  margin: 0;
}

menulist.translate-infobar-element {
  text-shadow: 0 1px 1px #FEFFFE;
  border: 1px solid;
  border-color: rgba(23, 51, 78, 0.15) rgba(23, 51, 78, 0.17) rgba(23, 51, 78, 0.2);
  box-shadow: 0 1px 1px 0 #FFFFFF, inset 0 2px 2px 0 #FFFFFF;
  background-color: #F1F1F1;
  background-image: linear-gradient(#FFFFFF, rgba(255,255,255,0.1));
  color: #333333;
  padding: 0;
  min-height: 22px !important;
}

menulist.translate-infobar-element::part(label-box) {
  padding-top: 1px;
  padding-inline-start: 0.3em;
  margin-block: 0;
}

menulist.translate-infobar-element:hover {
  background: #f0f0f0;
  box-shadow: 0 1px 0 hsla(0,0%,100%,.1) inset,  0 0 0 1px hsla(0,0%,100%,.05) inset,  0 1px 0 hsla(210,54%,20%,.01),  0 0 4px hsla(206,100%,20%,.1);
}

menulist.translate-infobar-element[open="true"] {
  background-image: linear-gradient(rgba(255,255,255,0.1),
                                    rgba(255,255,255,0.6));
}

menulist.translate-infobar-element::part(dropmarker) {
  display: -moz-box;
  list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
}

/* Status panel */

#statuspanel-label {
  margin: 0;
  padding: 2px 4px;
  background-color: #f9f9fa;
  border: 1px none #ddd;
  border-top-style: solid;
  color: #444;
  text-shadow: none;
}

@media (prefers-color-scheme: dark) {
  #statuspanel-label {
    background-color: hsl(240, 1%, 20%);
    border-color: hsl(240, 1%, 40%);
    color: rgb(249, 249, 250);
  }
}

#statuspanel:not([mirror]) > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(ltr),
#statuspanel[mirror] > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(rtl) {
  border-right-style: solid;
  border-top-right-radius: .3em;
  margin-right: 1em;
}

#statuspanel:not([mirror]) > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(rtl),
#statuspanel[mirror] > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(ltr) {
  border-left-style: solid;
  border-top-left-radius: .3em;
  margin-left: 1em;
}

%include ../shared/fullscreen/warning.inc.css
%include ../shared/ctrlTab.inc.css

/* On mac, the popup notification contents are indented by default and so
  the default closebutton margins from notification.css require adjustment */

.click-to-play-plugins-notification-description-box > .popup-notification-closebutton {
  margin-inline-end: -6px;
  margin-top: -7px;
}

/* Customization mode */

%include ../shared/customizableui/customizeMode.inc.css

/* End customization mode */

%include ../shared/UITour.inc.css

#UITourTooltipDescription {
  font-size: 1.18rem;
  line-height: 2rem;
}

#UITourTooltipClose {
  margin-inline-end: -10px;
  margin-top: -14px;
}

%include ../shared/contextmenu.inc.css

#context-navigation > .menuitem-iconic {
  padding-inline: 0;
}

.cui-widget-panelview[id^=PanelUI-webext-] {
  border-radius: 3.5px;
}

.webextension-popup-browser,
.webextension-popup-stack {
  border-radius: inherit;
}