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']) {
    @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-sidebar-top-buttons-customization-target {
        padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important;
      }

      /* Set the extra paddings */
      #tabbrowser-tabpanels {
        :root:not([inDOMFullscreen='true']) #browser:has(#navigator-toolbox[zen-right-side='true']) & {
          padding-right: var(--zen-element-separation) !important;
        }

        :root:not([inDOMFullscreen='true']) #browser:has(#navigator-toolbox:not([zen-right-side='true'])) & {
          padding-left: var(--zen-element-separation) !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: 9;
        transition: transform 0.2s ease-in-out, opacity 0.2s 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;

        #browser:has(#navigator-toolbox[zen-right-side='true']) & {
          --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;
        }
      }

      #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);

        @media (-moz-bool-pref: 'zen.view.compact.color-sidebar') {
          background: var(--zen-main-browser-background) !important;
          background-attachment: fixed !important;
          background-size: 2000px !important; /* Dont ask me why */
        }
      }
      /* Mark: toolbox as collapsed */
      #zen-tabbox-wrapper > #navigator-toolbox:not(#navigator-toolbox:is(#navigator-toolbox[zen-expanded='true'])) {
        max-width: calc(var(--zen-toolbox-max-width) + var(--zen-compact-float)) !important;
        min-width: calc(var(--zen-toolbox-max-width) + var(--zen-compact-float)) !important;

        & #titlebar {
          padding-left: 0 !important;
          padding-right: 0 !important;
        }
      }

      @media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
        #navigator-toolbox {
          top: var(--zen-element-separation);
        }
      }

      #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-sidepanel-button)) {
        opacity: 1;

        transform: translateX(calc(100% - var(--zen-element-separation)));
        #browser:has(#navigator-toolbox[zen-right-side='true']) & {
          transform: translateX(calc(-100% + var(--zen-element-separation)));
        }
      }
    }

    @media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') {
      #navigator-toolbox {
        --zen-toolbox-top-align: var(--zen-element-separation);
      }

      &:not([inDOMFullscreen='true']) #tabbrowser-tabpanels {
        padding-top: var(--zen-element-separation) !important;
      }

      #sidebar-box,
      #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: 0;
        transform: translateY(calc(-100% + var(--zen-element-separation) + 1px));
        left: calc(var(--zen-element-separation) + var(--zen-compact-toolbar-offset));
        z-index: 10;
        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);
        transition: all 0.1s ease-in-out;
        width: calc(100% - ((var(--zen-element-separation) + var(--zen-compact-toolbar-offset)) * 2));
        opacity: 0;
        background: var(--zen-dialog-background);

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

      #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;

        transform: translateY(-1px);
      }
    }
  }
}