zen-desktop/src/browser/base/content/zen-styles/zen-browser-ui.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/.
 */

#tabbrowser-tabpanels {
  background: transparent !important;
}

#navigator-toolbox {
  /* see issue #426 */
  background: var(--zen-navigator-toolbox-background, transparent) !important;
  --inactive-titlebar-opacity: 1;
}

#nav-bar,
#navigator-toolbox {
  position: inherit;
}

:root:is([inDOMFullscreen='true'], [chromehidden~='location'], [chromehidden~='toolbar']) {
  #navigator-toolbox,
  #zen-sidebar-splitter {
    visibility: collapse;
  }
}

:root[zen-before-loaded='true'] #browser > *,
:root[zen-before-loaded='true'] #urlbar {
  opacity: 0 !important;
}

#browser {
  width: 100%;
  background: var(--zen-main-browser-background) !important;

  will-change: background-color;

  &::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
  }

  &:not([post-animating='true'])::after {
    transition: background-color var(--inactive-window-transition);
  }

  @media (-moz-bool-pref: 'zen.theme.gradient') {
    &[animating='true']::after {
      background: var(--zen-main-browser-background-old);
      backdrop-filter: blur(5px);
      animation: zen-main-app-wrapper-animation 0.4s ease forwards;
      transition: 0s;
    }
  }

  @media (not (-moz-windows-mica)) and (-moz-bool-pref: 'zen.view.grey-out-inactive-windows') {
    transition: color var(--inactive-window-transition);
    :root:not([zen-welcome-stage]) &:-moz-window-inactive {
      color: var(--toolbox-textcolor-inactive);
      &::after {
        background-color: var(--toolbox-bgcolor-inactive);
      }
    }
  }

  &::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(chrome://browser/content/zen-images/grain-bg.png);
    pointer-events: none;
    z-index: 0;
    opacity: var(--zen-grainy-background-opacity, 0);
    mix-blend-mode: overlay;
  }
}

#sidebar-box {
  /** Sidebar is already hidden in full screen mode */
  border: none;
}

@supports (-moz-osx-font-smoothing: auto) {
  #zen-main-app-wrapper,
  #zen-appcontent-wrapper,
  #zen-sidebar-splitter {
    appearance: -moz-window-titlebar !important;
  }
}

:root:not([zen-single-toolbar='true']) #zen-appcontent-wrapper {
  z-index: 2;
}

#nav-bar {
  /* For some reason, firefox adds a really small border to the top of the nav-bar */
  border-top: none !important;
}

#zen-main-app-wrapper {
  background: var(--zen-themed-toolbar-bg-transparent);
  overflow: hidden;

  & > * {
    z-index: 1;
  }

  @media (-moz-windows-accent-color-in-titlebar) and (-moz-windows-mica) {
    background-color: ActiveCaption;
    color: CaptionText;
    transition: background-color var(--inactive-window-transition);
    &:-moz-window-inactive {
      background-color: InactiveCaption;
      color: InactiveCaptionText;
    }
  }
}

#zen-appcontent-wrapper {
  z-index: 1;
  /* Use this trick to prevent bookmarks from overflowing the window,
   * without using overflow: hidden.
   */
  min-width: 1px;
}

:root:not([inDOMFullscreen='true']):not([chromehidden~='location']):not([chromehidden~='toolbar']) {
  & #zen-tabbox-wrapper {
    margin: var(--zen-element-separation);
    margin-top: 0;
  }

  &:not([zen-right-side='true']) #zen-tabbox-wrapper {
    margin-left: 0;
  }

  &[zen-right-side='true'] #zen-tabbox-wrapper {
    margin-right: 0;
  }
}

#tabbrowser-tabbox {
  display: flex;
  flex-direction: row;
  position: relative;
  gap: var(--zen-element-separation);
}

@media not (-moz-platform: macos) {
  .titlebar-buttonbox-container {
    height: 100%;
  }
}

@media (-moz-platform: macos) {
  .titlebar-buttonbox-container {
    margin-inline-end: 8px;
    padding: 3px 0;

    & > .titlebar-buttonbox {
      margin-inline-start: var(--zen-toolbox-padding);
    }
  }

  @media (-moz-bool-pref: 'zen.widget.mac.mono-window-controls') {
    .titlebar-buttonbox-container {
      /* Draw 3 dots as background to represent the window controls,
        all with the same cololr as the titlebar */
      background-image: radial-gradient(circle, var(--zen-toolbar-element-bg) 6px, transparent 0.5px);
      background-size: 20px 22px;
      background-position: 53% 50%;

      &:not([zen-has-hover='true']) > .titlebar-buttonbox {
        opacity: 0;
      }
    }
  }
}