zen-desktop/src/browser/base/content/zen-styles/zen-compact-mode.css

/* All overrides for compact mode go here */

@media (-moz-bool-pref: 'zen.view.compact') {
  :root:not([customizing]):not([inDOMFullscreen='true']) {
    #zen-sidebar-top-buttons:has(#zen-sidebar-top-buttons-customization-target:empty) {
      max-height: 0 !important;
      min-height: 0 !important;
      opacity: 0;
      overflow: hidden;
      pointer-events: none;
    }

    @media (-moz-bool-pref: 'zen.view.compact.hide-tabbar') {
      #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
        margin-left: calc(var(--zen-sidebar-web-panel-spacing) * 2) !important;
      }

      #zen-appcontent-wrapper {
        margin-left: var(--zen-element-separation) !important;
      }

      #zen-sidebar-top-buttons-customization-target {
        padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
      }

      #zen-sidebar-splitter {
        display: none !important;
      }

      #navigator-toolbox {
        --zen-toolbox-max-width: 54px !important;
        --zen-compact-float: calc(var(--zen-element-separation) - 1px);
        position: absolute;
        z-index: 10;
        transition: transform 0.25s ease, opacity 0.1s ease-in-out;
        right: calc(100% - var(--zen-element-separation));
        top: 0;
        bottom: var(--zen-element-separation);
        opacity: 0;
        padding-left: var(--zen-compact-float) !important;
        padding-bottom: 0 !important;
        padding-top: 0 !important;

        :root[zen-single-toolbar='true'] & {
          top: var(--zen-element-separation);

          & #nav-bar {
            margin-left: calc(var(--zen-toolbox-padding) / 2) !important;
          }
        }
      }

      /* When we have multiple toolbars and the top-toolbar is NOT being hidden,
        * we need to adjust the top-padding of the toolbox to account for the
        * extra toolbar height. */
      @media not (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
        &:not([zen-single-toolbar='true']) #navigator-toolbox {
          margin-top: var(--zen-toolbar-height) !important;
        }
      }

      &[zen-right-side='true'] {
        & #navigator-toolbox {
          --zen-compact-float: calc(var(--zen-element-separation) + 1px);
          padding-left: unset !important;
          padding-right: var(--zen-compact-float) !important;
          left: calc(100% - var(--zen-element-separation));
          right: unset;
        }

        & .browserSidebarContainer {
          margin-left: 0 !important;
          margin-right: var(--zen-element-separation) !important;
        }
      }

      #titlebar {
        box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
        border-radius: calc(var(--zen-border-radius) - 2px);
        padding: var(--zen-toolbox-padding) !important;
        position: relative;
        background: var(--zen-dialog-background);
        outline: 1px solid light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));

        :root[zen-single-toolbar='true'] {
          padding-top: 0 !important;
          margin-left: 0 !important;
        }

        @media (-moz-bool-pref: 'zen.view.compact.color-sidebar') {
          background: var(--zen-main-browser-background-toolbar) !important;
          background-attachment: fixed !important;
          background-size: 2000px !important; /* Dont ask me why */
          backdrop-filter: blur(5px) !important;
        }
      }

      #navigator-toolbox:hover,
      #navigator-toolbox[zen-has-hover],
      #navigator-toolbox:focus-within,
      #navigator-toolbox[zen-user-show],
      #navigator-toolbox[flash-popup],
      #navigator-toolbox[has-popup-menu],
      #navigator-toolbox[movingtab],
      #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox,
      #navigator-toolbox:has(.tabbrowser-tab:active),
      #navigator-toolbox:has(*[open='true']:not(tab):not(.zen-compact-mode-ignore)) {
        opacity: 1;

        transform: translateX(calc(100% - var(--zen-element-separation) - 1px));
        :root[zen-right-side='true'] & {
          transform: translateX(calc(-100% + var(--zen-element-separation) + 1px));
        }
      }
    }

    @media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
      &:not([zen-single-toolbar='true']) {
        & #navigator-toolbox {
          top: 0;
        }

        & #navigator-toolbox {
          --zen-toolbox-top-align: var(--zen-element-separation);
        }

        & #sidebar-box,
        & #titlebar,
        & #zen-appcontent-wrapper,
        & #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel:not([pinned='true'])) {
          margin-top: var(--zen-element-separation) !important;
        }

        & #zen-sidebar-web-panel-wrapper:has(#zen-sidebar-web-panel[pinned='true']) {
          margin-top: calc(var(--zen-element-separation) * 2) !important;
        }

        & #zen-appcontent-navbar-container {
          --zen-compact-toolbar-offset: 5px;
          position: absolute;
          top: calc((-1 * var(--zen-toolbar-height)) + var(--zen-element-separation) + 1px);
          left: 0;
          z-index: 20;
          box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3) !important;
          border-bottom-left-radius: var(--zen-border-radius);
          border-bottom-right-radius: var(--zen-border-radius);
          border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
          border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
          transition: all 0.15s ease;
          width: 100%;
          opacity: 0;
          background: var(--zen-dialog-background);
          padding-left: var(--zen-toolbox-padding) !important;

          & > * {
            position: relative !important;
          }

          & #urlbar {
            transform: translateY(-50%);
            transition: transform 0.1s ease-in-out;
          }

          :root[zen-window-buttons-reversed='true'] & {
            padding-left: 0 !important;
            padding-right: var(--zen-toolbox-padding) !important;
          }

          @media (-moz-bool-pref: 'zen.view.compact.color-toolbar') {
            background-attachment: fixed;
            backdrop-filter: blur(5px);
            background: var(--zen-main-browser-background-toolbar);
            background-size: 100% 2000px;
            border-bottom: 1px solid var(--zen-colors-border);
          }
        }

        & #zen-appcontent-navbar-container:hover,
        & #zen-appcontent-navbar-container[zen-has-hover],
        & #zen-appcontent-navbar-container:focus-within,
        & #zen-appcontent-navbar-container[zen-user-show],
        & #zen-appcontent-navbar-container[has-popup-menu],
        & #zen-appcontent-navbar-container:has(*[open='true']) {
          opacity: 1;
          border-top-width: 1px;

          top: -1px;

          & #urlbar {
            transform: translateY(0);
          }
        }
      }
    }
  }
}