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
%include ../shared/browser-custom-colors.inc.css

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

  --toolbar-field-non-lwt-bgcolor: #f0f0f4;

  --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-field-background: rgba(249,249,250,.3);

  --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-field-background: rgba(12,12,13,.3);
}

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

@supports -moz-bool-pref("browser.proton.enabled") {
#navigator-toolbox:not(:-moz-lwtheme) {
  background-color: #f0f0f4;
}
} /*** END proton ***/

#navigator-toolbox:not(:-moz-lwtheme):-moz-window-inactive {
  --tabs-border-color: rgba(0,0,0,.05);
}

#navigator-toolbox:-moz-lwtheme {
  --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: -moz-accent-color;
}

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

@supports not -moz-bool-pref("browser.proton.enabled") {
:root[OSXLionFullscreen]:not(:-moz-lwtheme) :is(#navigator-toolbox, #sidebar-box) {
  /* Make the toolbar opaque using this color that simulates the
  -moz-mac-vibrant-toolbar-dark effect. This hides vibrancy, but it also
  ensures that we can't see #browser through the transparent toolbar. */
  background-color: #232323;
}
} /*** END !proton ***/

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

/** End titlebar **/

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

.browser-toolbar {
  appearance: none;
}

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

@supports not -moz-bool-pref("browser.proton.enabled") {
.browser-toolbar.titlebar-color:not(:-moz-lwtheme) {
  appearance: auto;
}
} /* END !proton */

/* Draw the bottom border of the tabs toolbar when titlebar isn't using vibrancy */
:root:not([inFullscreen], [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);
}

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

@supports not -moz-bool-pref("browser.proton.enabled") {
#PersonalToolbar:not(:-moz-lwtheme):-moz-window-inactive,
#nav-bar:not(:-moz-lwtheme):-moz-window-inactive {
  background-color: -moz-mac-chrome-inactive;
}
} /* END !proton */

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

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

@supports not -moz-bool-pref("browser.proton.enabled") {
/* 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;
}
} /* END !proton */

/* Inactive elements are faded out on OSX */
.toolbarbutton-1:not(:hover):-moz-window-inactive,
.bookmark-item: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

@media not (prefers-contrast) {
  @supports -moz-bool-pref("browser.proton.urlbar.enabled") {
  :root:not(:-moz-lwtheme) #urlbar:not([focused="true"]) {
    --urlbar-box-bgcolor: white;
  }
  } /*** END proton ***/
}

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

/* Move the margin to the parent element to properly position the ::after badge */
moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left > .menu-iconic-icon {
  margin-inline: 0;
}
moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left {
  margin-inline: 0 5px;
}

%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

.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://global/skin/icons/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 sidebar
 * rules are in use. Vibrant appearance values only work if there is no
 * background-color rendered behind the element. If the active theme has sidebar
 * rules, we want to show the theme's background-color in the sidebar. */
#sidebar-box:not([lwt-sidebar]) {
  appearance: auto;
  -moz-default-appearance: -moz-mac-source-list;
  -moz-font-smoothing-background-color: -moz-mac-source-list;
}

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

.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"], [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"], [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;
}

@supports not -moz-bool-pref("browser.proton.tabs.enabled") {
:is(.keyboard-focused-tab, .tabbrowser-tab:focus:not([aria-activedescendant])) > .tab-stack > .tab-content > .tab-label-container:not([pinned]),
:is(.keyboard-focused-tab, .tabbrowser-tab:focus:not([aria-activedescendant])) > .tab-stack > .tab-content > .tab-icon-image[pinned],
:is(.keyboard-focused-tab, .tabbrowser-tab:focus:not([aria-activedescendant])) > .tab-stack > .tab-content > .tab-throbber[pinned] {
  box-shadow: var(--focus-ring-box-shadow);
}
} /*** END !proton ***/

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

@supports not -moz-bool-pref("browser.proton.enabled") {
#TabsToolbar:not(:-moz-lwtheme) {
  color: #333;
}

:root:is([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);
}
} /* END !proton */

#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

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

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

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