1 files changed, 265 insertions, 0 deletions
diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css
new file mode 100644
index 0000000000..b62710cc71
--- /dev/null
+++ b/browser/themes/osx/browser.css
@@ -0,0 +1,265 @@
+/* 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 {
+  --arrowpanel-field-background: light-dark(rgba(249, 249, 250, .3), rgba(12, 12, 13, .3));
+}
+
+#browser,
+#navigator-toolbox {
+  /* #browser and #navigator-toolbox must have relative positions so that the
+     latter can slide over the former in fullscreen mode. */
+  position: relative;
+}
+
+/** Begin titlebar **/
+
+#titlebar {
+  /* Centrally align content items vertically */
+  justify-content: center;
+}
+
+.titlebar-button {
+  display: none;
+}
+
+.titlebar-buttonbox-container {
+  align-items: center;
+  /* Hide window controls in fullscreen */
+  :root[inFullscreen] & {
+    display: none;
+  }
+}
+
+.titlebar-buttonbox {
+  &:-moz-locale-dir(ltr) {
+    margin-inline: 12px 0;
+
+    @media (-moz-mac-rtl) {
+      margin-inline: 12px;
+    }
+  }
+
+  &:-moz-locale-dir(rtl) {
+    margin-inline: 12px;
+
+    @media (-moz-mac-rtl) {
+      margin-inline: 12px 0;
+    }
+  }
+}
+
+/** End titlebar **/
+
+:root[chromehidden~="toolbar"][chromehidden~="location"][chromehidden~="directories"] {
+  border-top: 1px solid rgba(0,0,0,0.65);
+}
+
+/* ----- BOOKMARK TOOLBAR ----- */
+
+#nav-bar-customization-target > #wrapper-personal-bookmarks > #personal-bookmarks {
+  min-height: 32px;
+  align-items: center;
+}
+
+/* Workaround for native menubar inheritance */
+.openintabs-menuitem {
+  list-style-image: none;
+}
+
+.bookmark-item {
+  > .menu-iconic-left > .menu-iconic-icon {
+    width: 16px;
+    height: 16px;
+  }
+
+  &[cutting] {
+    > .toolbarbutton-icon,
+    > .menu-iconic-left > .menu-iconic-icon {
+      opacity: 0.5;
+    }
+
+    > .toolbarbutton-text,
+    > .menu-iconic-left > .menu-iconic-text {
+      opacity: 0.7;
+    }
+  }
+}
+
+/* ----- BOOKMARK MENUS ----- */
+
+#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 (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;
+}
+
+/* stylelint-disable-next-line media-query-no-invalid */
+@media (-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 {
+  margin-inline: 0 5px;
+
+  > .menu-iconic-icon {
+    margin-inline: 0;
+  }
+}
+
+/* ----- 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. */
+
+/**** 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 ----- */
+
+#sidebar-box {
+  /* Default font size is 11px on mac, so this is 12px */
+  font-size: 1.0909rem;
+}
+
+/* ::::: tabbrowser ::::: */
+
+#tabbrowser-tabbox {
+  margin: 0;
+}
+
+.tab-label {
+  margin-block: 1px 0;
+}
+
+.tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-icon-image:not([selected], [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], [multiselected]) {
+  opacity: .7;
+}
+
+.tabbrowser-tab {
+  font: message-box;
+  border: none;
+
+  /* FIXME: Are these styles really needed nowadays? */
+  &:is([visuallyselected], [multiselected]) {
+    /* overriding tabbox.css */
+    text-shadow: inherit;
+
+    @media (prefers-color-scheme: light) {
+      &:not(:-moz-lwtheme) {
+        /* overriding tabbox.css */
+        color: hsl(240, 5%, 5%);
+      }
+    }
+  }
+}
+
+#tabbrowser-tabs {
+  /* overriding tabbox.css */
+  align-items: 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;
+}
+
+#UITourTooltipDescription {
+  font-size: 1.18rem;
+  line-height: 2rem;
+}
+
+#UITourTooltipClose {
+  margin-inline-end: -10px;
+  margin-top: -14px;
+}