path: root/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/. */

@import url("chrome://browser/skin/browser-shared.css");
/* stylelint-disable-next-line media-query-no-invalid */
@import url("chrome://browser/skin/browser-custom-colors.css") not (-moz-bool-pref: "browser.theme.macos.native-theme");

:root {
  --arrowpanel-field-background: light-dark(rgba(249, 249, 250, .3), rgba(12, 12, 13, .3));

  /* On macOS, top level windows are always opaque. This gives us the right
   * default background color, without confusing Gecko about whether the window
   * is transparent or not. */
  appearance: auto;
  -moz-default-appearance: -moz-mac-unified-toolbar-window;
}

/* stylelint-disable-next-line media-query-no-invalid */
@media (-moz-bool-pref: "browser.theme.macos.native-theme") {
  /* TODO: Share this with Linux, which effectively does ~the same */
  @media not (prefers-contrast) {
    :root:not([lwtheme]) {
      --toolbar-field-border-color: transparent;
      --toolbar-field-background-color: light-dark(rgba(0, 0, 0, .05), rgba(0, 0, 0, .3));
      --toolbar-field-color: inherit;
      @media (prefers-color-scheme: light) {
        --toolbar-non-lwt-bgcolor: white;
        --urlbar-box-bgcolor: #fafafa;
      }
      @media (prefers-color-scheme: dark) {
        --tab-selected-bgcolor: color-mix(in srgb, -moz-dialog 75%, white);
      }
    }
  }

  /* Don't make the toolbox vibrant when in full-screen. macOS fullscreen has a
   * native titlebar outside of the window (revealed on hover) anyways. */
  :root[tabsintitlebar]:not([lwtheme], [macOSNativeFullscreen]) #navigator-toolbox {
    background-color: transparent;

    /* This is conceptually a background, but putting this on a
     * pseudo-element avoids it from suppressing the chrome-content separator
     * border, etc */
    &::after {
      -moz-default-appearance: -moz-window-titlebar;
      appearance: auto;
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
    }
  }
}

#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) {
      :root:not([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;
}