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

%include ../../../toolkit/themes/osx/global/shared.inc
%define toolbarButtonPressed :hover:active:not([disabled="true"]):not([cui-areatype="menu-panel"])

@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 {
  -moz-appearance: none;
  --tabs-border-color: rgba(0,0,0,.3);
}

/*
  This is a workaround for Bug 1482157
  -moz-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 {
  -moz-appearance: toolbox;
  height: 1px;
  /* use inset box-shadow instead of border because -moz-appearance hides the border */
  border: none;
  box-shadow: inset 0 -1px var(--chrome-content-separator-color);
}

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

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

:root {
  -moz-appearance: none;
  background-color: #eeeeee;
}

/** Begin titlebar **/

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

#titlebar-buttonbox > .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 **/

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

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

/* Draw the bottom border of the tabs toolbar when it's not using
   -moz-appearance: toolbar. */
#main-window:-moz-any([sizemode="fullscreen"],[customize-entered]) #nav-bar:not([tabs-hidden="true"]),
#main-window:not([tabsintitlebar]) #nav-bar:not([tabs-hidden="true"]),
#nav-bar:not([tabs-hidden="true"]):-moz-lwtheme {
  box-shadow: 0 -@navbarTabsShadowSize@ 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);
  }

  #main-window[tabsintitlebar] #nav-bar:not([tabs-hidden="true"]):not(:-moz-lwtheme) {
    box-shadow: 0 -@navbarTabsShadowSize@ 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,
#main-window: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;
}

/* ::::: nav-bar-inner ::::: */

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

:root {
  --toolbar-field-focus-border-color: -moz-mac-focusring;
}

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

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

#urlbar:not(.hidden-focus)[focused="true"],
.searchbar-textbox[focused="true"] {
  box-shadow: 0 0 0 1px var(--toolbar-field-focus-border-color) inset,
              0 0 0 1px var(--toolbar-field-focus-border-color);
}

%include ../shared/identity-block/identity-block.inc.css

#identity-box:not(:active):-moz-focusring {
  box-shadow: var(--focus-ring-box-shadow);
  border-inline-end-style: none;
  padding-inline-end: 5px;
}

/* ::::: URL Bar Zoom Reset Button ::::: */
@keyframes urlbar-zoom-reset-pulse {
  0% {
    transform: scale(0);
  }
  75% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1.0);
  }
}

#urlbar-search-footer {
  border-top: 1px solid var(--panel-separator-color);
  background-color: var(--arrowpanel-dimmed);
}

#urlbar-search-settings {
  -moz-appearance: none;
  -moz-user-focus: ignore;
  color: GrayText;
  margin: 0;
  padding: 8px 20px;
}

#urlbar-search-settings:hover {
  background-color: var(--arrowpanel-dimmed);
}

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

#search-container {
  min-width: calc(54px + 11ch);
}

#wrapper-urlbar-container[place="palette"] {
  max-width: 20em;
}

.urlbar-display {
  margin-top: 0;
  margin-bottom: 0;
  color: GrayText;
}

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

%include ../shared/urlbarSearchSuggestionsNotification.inc.css

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

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

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

/* Give an extra margin top to align the top of the awesomebar with the
 * bottom of the nav bar, OSX calculates the panel position with an missing
 * 1px - https://bugzilla.mozilla.org/show_bug.cgi?id=1406353
 */
#PopupAutoCompleteRichResult {
  margin-top: 1px;
}

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

.ac-title {
  font-size: 14px;
}

.ac-separator,
.ac-url,
.ac-action,
.ac-tags {
  font-size: 12px;
}

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

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

/* Bookmarking panel */

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

#editBookmarkPanelRows > vbox > textbox,
#editBookmarkPanelRows > vbox > hbox > textbox {
  -moz-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 > textbox[focused="true"],
#editBookmarkPanelRows > vbox > hbox > textbox[focused="true"] {
  border-color: -moz-mac-focusring !important;
  box-shadow: var(--focus-ring-box-shadow);
}

/* The following elements come from editBookmarkPanel.inc.xul. Styling that's
   specific to the editBookmarkPanel should be in browser.css. Styling that
   should be shared by all editBookmarkPanel.inc.xul 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 {
  -moz-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-top: 2px;
  padding-bottom: 1px;
  padding-inline-start: 8px;
  padding-inline-end: 4px;
}

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

#editBMPanel_folderMenuList > .menulist-dropmarker {
  -moz-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 {
  -moz-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 {
  -moz-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-box:not([lwt-sidebar]) {
  -moz-appearance: -moz-mac-source-list;
  -moz-font-smoothing-background-color: -moz-mac-source-list;
}

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

.browserContainer > findbar {
  background: @scopeBarBackground@;
  border-top: @scopeBarSeparatorBorder@;
  color: -moz-DialogText;
  text-shadow: none;
}

.browserContainer > findbar:-moz-lwtheme {
  background-color: var(--lwt-accent-color);
  background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor));
  border-top-color: var(--chrome-content-separator-color);
  color: var(--toolbar-color);
}

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

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

#tabbrowser-tabbox {
  margin: 0;
}

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

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

.tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-icon-image:not([selected="true"]) {
  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"]) {
  opacity: .7;
}

.tabbrowser-tab {
  font: message-box;
  border: none;
}

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

.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;
  text-shadow: @loweredShadow@;
}

:root:-moz-any([inFullscreen], [tabsintitlebar]) #TabsToolbar:not(:-moz-lwtheme) {
  -moz-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[visuallyselected=true]:not(:-moz-lwtheme) {
  -moz-font-smoothing-background-color: var(--toolbar-bgcolor);
}

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

/**
 * Tab Drag and Drop
 */

.tab-drop-indicator-box {
  -moz-box-align: center;
}

.tab-drop-indicator {
  list-style-image: url(chrome://browser/skin/tabbrowser/tabDragIndicator.png);
  margin-top: -2px;
  z-index: 3;
}

@media (min-resolution: 2dppx) {
  .tab-drop-indicator {
    list-style-image: url(chrome://browser/skin/tabbrowser/tabDragIndicator@2x.png);
    width: 12px;
  }
}

/* Bookmarks toolbar */
#PlacesToolbarDropIndicator {
  list-style-image: url(chrome://browser/skin/places/toolbarDropMarker.png);
}

/* Bookmark drag and drop styles */

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

/* rules for menupopup drop indicators */
.menupopup-drop-indicator-bar {
  position: relative;
  /* these two margins must together compensate the indicator's height */
  margin-top: -1px;
  margin-bottom: -1px;
}

.menupopup-drop-indicator {
  list-style-image: none;
  height: 2px;
  margin-inline-end: -4em;
  background-color: Highlight;
}

%include ../shared/notification-icons.inc.css

.notification-anchor-icon:-moz-focusring {
  box-shadow: var(--focus-ring-box-shadow);
}

/* 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-top: 1px;
  padding-bottom: 1px;
  min-height: 35px;
}

.translate-infobar-element {
  margin-top: 0 !important;
  margin-bottom: 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-left: 0.25em;
  margin-right: 0.25em;
}

button.translate-infobar-element .button-text {
  margin-left: 0;
  margin-right: 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-start: 0.5em;
  padding-inline-end: 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 > .menulist-label-box {
  padding-top: 1px;
  padding-inline-start: 0.3em;
  margin-top: 0;
  margin-bottom: 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 > .menulist-dropmarker {
  display: -moz-box;
  list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
}

.popup-notification-body[popupid="addon-progress"],
.popup-notification-body[popupid="addon-install-confirmation"] {
  width: 28em;
  max-width: 28em;
}

.addon-install-confirmation-name {
  font-weight: bold;
}

html|*.addon-webext-perm-list {
  margin-block-end: 0;
  padding-inline-start: 10px;
}

.addon-webext-perm-text {
  margin-inline-start: 0;
}

.popup-notification-description[popupid="addon-webext-permissions"],
.popup-notification-description[popupid="addon-webext-permissions-notification"] {
  margin-inline-start: -1px;
}

.addon-webext-perm-notification-content,
.addon-installed-notification-content {
  margin-top: 0;
}

.addon-webext-name {
  display: inline;
  font-weight: bold;
  margin: 0;
}

.addon-addon-icon,
.addon-toolbar-icon {
  width: 14px;
  height: 14px;
  vertical-align: bottom;
  margin-bottom: 1px;
  -moz-context-properties: fill;
  fill: currentColor;
}

.addon-addon-icon {
  list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric-16.svg");
}

.addon-toolbar-icon {
  list-style-image: url("chrome://browser/skin/menu.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;
}

#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-left: 0;
  padding-right: 0;
}

.browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
  padding: 0;
  overflow: hidden;
}

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

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