1 files changed, 458 insertions, 0 deletions
diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css
new file mode 100644
index 0000000000..e16c87ff37
--- /dev/null
+++ b/browser/themes/osx/browser.css
@@ -0,0 +1,458 @@
+/* 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/. */
+
+@import url("chrome://browser/skin/browser-shared.css");
+@import url("chrome://browser/skin/browser-custom-colors.css");
+
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+:root {
+  --toolbar-non-lwt-bgcolor: -moz-dialog;
+  --toolbar-non-lwt-textcolor: -moz-dialogtext;
+
+  --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);
+}
+
+#browser {
+  /* #browser and #navigator-toolbox must have relative positions so that the
+     latter can slide over the former in fullscreen mode. */
+  position: relative;
+}
+
+#navigator-toolbox {
+  appearance: none;
+  position: relative;
+}
+
+#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;
+}
+
+.titlebar-buttonbox-container {
+  -moz-box-align: center;
+}
+
+/* Hide window controls in fullscreen */
+:root[inFullscreen] .titlebar-buttonbox-container {
+  display: none;
+}
+
+.titlebar-buttonbox:-moz-locale-dir(ltr) {
+  margin-left: 12px;
+  margin-right: 0;
+}
+
+.titlebar-buttonbox:-moz-locale-dir(rtl) {
+  margin-left: 12px;
+  margin-right: 12px;
+}
+
+@media (-moz-mac-rtl) {
+  .titlebar-buttonbox:-moz-locale-dir(ltr) {
+    margin-left: 12px;
+    margin-right: 12px;
+  }
+
+  .titlebar-buttonbox:-moz-locale-dir(rtl) {
+    margin-left: 0;
+    margin-right: 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(--lwt-tabs-border-color, rgba(0,0,0,.3));
+}
+
+#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");
+}
+
+/* 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;
+}
+
+/* Address bar */
+
+@media not (prefers-contrast) {
+  :root:not(:-moz-lwtheme) #urlbar {
+    --urlbar-box-bgcolor: white;
+  }
+  :root[lwt-default-theme-in-dark-mode] #urlbar {
+    --urlbar-box-bgcolor: var(--toolbar-field-focus-background-color);
+  }
+}
+
+@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;
+  }
+}
+
+/* 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;
+}
+
+/* ----- AUTOCOMPLETE ----- */
+
+#PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
+  border-top: 1px solid #C7C7C7;
+}
+
+/* Bookmarking panel */
+
+/* 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: 1px solid var(--panel-separator-color);
+  border-radius: 0 0 2px 2px;
+  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;
+  border-radius: 0;
+  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 .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 > 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-end-start-radius: 0;
+  border-end-end-radius: 0;
+  /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
+  margin: 0 !important;
+  min-width: 27em;
+  position: relative;
+}
+
+/* ----- SIDEBAR ELEMENTS ----- */
+
+#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;
+}
+
+.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 {
+  /* overriding tabbox.css */
+  -moz-box-align: stretch;
+  margin-bottom: 0;
+  position: static;
+  z-index: auto;
+}
+
+/* Bookmark drag and drop styles */
+
+.bookmark-item[dragover-into="true"] {
+  background: SelectedItem !important;
+  color: SelectedItemText !important;
+}
+
+/* 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 (-moz-content-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-label:-moz-locale-dir(ltr),
+#statuspanel[mirror] > #statuspanel-label:-moz-locale-dir(rtl) {
+  border-right-style: solid;
+  border-top-right-radius: .3em;
+  margin-right: 1em;
+}
+
+#statuspanel:not([mirror]) > #statuspanel-label:-moz-locale-dir(rtl),
+#statuspanel[mirror] > #statuspanel-label:-moz-locale-dir(ltr) {
+  border-left-style: solid;
+  border-top-left-radius: .3em;
+  margin-left: 1em;
+}
+
+/* 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;
+}
+
+#UITourTooltipDescription {
+  font-size: 1.18rem;
+  line-height: 2rem;
+}
+
+#UITourTooltipClose {
+  margin-inline-end: -10px;
+  margin-top: -14px;
+}
+
+#historySwipeAnimationPreviousArrow {
+  background: url("chrome://browser/skin/history-swipe-arrow.svg")
+              center left / 64px 128px no-repeat transparent;
+  will-change: transform;
+}
+#historySwipeAnimationPreviousArrow:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+#historySwipeAnimationNextArrow {
+  background: url("chrome://browser/skin/history-swipe-arrow.svg")
+              center left / 64px 128px no-repeat transparent;
+  will-change: transform;
+}
+#historySwipeAnimationNextArrow:-moz-locale-dir(ltr) {
+  transform: scaleX(-1);
+}