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: -moz-dialog;
  --toolbar-non-lwt-textcolor: -moz-dialogtext;
  --toolbar-non-lwt-bgimage: none;

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

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

#navigator-toolbox:not(:-moz-lwtheme) {
  background-color: window;
}

@media not (prefers-contrast) {
  #navigator-toolbox:not(:-moz-lwtheme) {
    background-color: #f0f0f4;
  }
}

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

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

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

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

/* 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) {
  :root:not(:-moz-lwtheme) #urlbar:not([focused="true"]) {
    --urlbar-box-bgcolor: white;
  }
  :root[lwt-default-theme-in-dark-mode] #urlbar:not([focused="true"]) {
    --urlbar-box-bgcolor: var(--lwt-toolbar-field-focus);
  }
}

@media (prefers-contrast) {
  /* The "increase contrast" preference on macOS draws a 1px black line around
     panels, including the separate search bar. Since the Urlbar is not
     implemented as a panel, it does not get this outline. This outline rule
     resembles the system outline, bringing the Urlbar in line with panels and
     other Mac apps. */
  #urlbar[open] > #urlbar-background {
    outline: 1px solid var(--focus-outline-color)
  }
}

#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

/* Address bar results view */

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

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

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

/* Bookmarking panel */

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

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

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

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

#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: var(--arrowpanel-border-radius);
}

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