hide-tabs-bar.css

/* ArcWTF - tweaks/hide-tabs-bar.css
 * https://github.com/KiKaraage/ArcWTF */

/* Only hide the tabs toolbar if one of the following sidebar extensions is
 * active: */
/* Sidebery */
:root:not([customizing]):has(#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([hidden])),
/* Tree Style Tab */
:root:not([customizing]):has(#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:not([hidden])),
/* Tab Center Reborn */
:root:not([customizing]):has(#sidebar-box[sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"]:not([hidden])) {
  /* Height of navbar, used for determining height and position of window controls */
  --uc-navbar-height: 32px;
  /* Drag space next to the window controls, allows you to move the window more easily */
  --uc-titlebar-drag-space: 40px;

  /* Hide the tabs */
  & #TabsToolbar {
    visibility: collapse !important;
  }
  
  /* Fix issue with missing window controls. */
  &[tabsintitlebar] #titlebar {
    will-change: auto !important;
  }
  
  /* Add some padding to the top of the navbar */
  &[tabsintitlebar] #nav-bar {
    padding-top: 0 !important;
  }

  /* Set background colour of the menu bar to maintain consistency with the navbar */
  @media {
    #toolbar-menubar {
      background-color: var(--toolbar-bgcolor) !important;
      color: var(--toolbar-color) !important;
    }
  }

  /* Make sure window controls are removed in full screen mode. */
  &[inDOMFullscreen] #TabsToolbar .titlebar-buttonbox,
  &[inFullscreen] #navigator-toolbox[style*="margin-top"] #TabsToolbar .titlebar-buttonbox {
    visibility: collapse !important;
  }

  /* macOS specific positioning */
  @media (-moz-platform: macos) {
    /* Offset navbar contents to make space for the window controls */
    &[tabsintitlebar] #nav-bar:not([inFullscreen]) {
      padding-left: calc(70px + var(--uc-titlebar-drag-space)) !important;

      /* Remove the padding from the side of the navbar */
      & #nav-bar-customization-target > :is(toolbarbutton, toolbaritem):first-child {
        padding-inline-start: 0 !important;
      }
    }

    /* Positioning of the window controls */
    #TabsToolbar .titlebar-buttonbox-container {
      visibility: visible !important;
      position: fixed !important;
      height: calc(var(--uc-navbar-height) + var(--uc-tab-top-margin, 0px));
      margin: 0 !important;
      top: 0;
      left: 0;

      & .titlebar-buttonbox {
        margin-inline: calc((var(--uc-navbar-height) + var(--uc-tab-top-margin, 0px) - 14px) / 2) !important;
      }
    }
  }

  /* Windows specific positioning */
  @media (-moz-platform: windows) {
    /* Offset navbar contents to make space for the window controls */
    &:where([inFullscreen], [tabsintitlebar]) #nav-bar {
      padding-inline-end: calc(100px + var(--uc-titlebar-drag-space)) !important;

      /* Remove the padding from the side of the navbar */
      & #PanelUI-menu-button {
        padding-inline-end: 0 !important;
      }
    }

    /* Positioning of the window controls */
    & :where(#toolbar-menubar[inactive]) + #TabsToolbar .titlebar-buttonbox {
      visibility: visible !important;
      position: fixed !important;
      top: 0;
      inset-inline-end: 0;
      height: calc(var(--uc-navbar-height)) !important;
      z-index: 100 !important;
      color: var(--toolbar-color) !important;
    }

  }

  /* Linux/GTK specific positioning, only needed if there is at least one window
   * control button. */
  @media (-moz-gtk-csd-minimize-button),
  (-moz-gtk-csd-maximize-button),
  (-moz-gtk-csd-close-button) {
    /* Width of single window control button. */
    --uc-window-control-btn: 34px;

    /* Navbar space reserved for one button. */
    --uc-window-controls-width: var(--uc-window-control-btn);

    /* Navbar space reserved for two buttons. */
    @media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button),
    (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-close-button),
    (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) {
      --uc-window-controls-width: calc(var(--uc-window-control-btn) * 2);
    }

    /* Navbar space reserved for three buttons. */
    @media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) {
      --uc-window-controls-width: calc(var(--uc-window-control-btn) * 3);
    }

    /* Offset navbar contents to make space for the window controls */
    &:where([inFullscreen], [tabsintitlebar]) #nav-bar {
      /* Window controls on the right. */
      @media not (-moz-gtk-csd-reversed-placement) {
        padding-inline-end: calc(var(--uc-window-controls-width, 0px) + var(--uc-titlebar-drag-space)) !important;

        /* Remove the padding from the side of the navbar */
        & #PanelUI-menu-button {
          padding-inline-end: 0 !important;
        }
      }

      /* Window controls on the left. */
      @media (-moz-gtk-csd-reversed-placement) {
        padding-inline-start: calc(var(--uc-window-controls-width, 0px) + var(--uc-titlebar-drag-space)) !important;

        /* Remove the padding from the side of the navbar */
        & #nav-bar-customization-target > :is(toolbarbutton, toolbaritem):first-child {
          padding-inline-start: 0 !important;
        }
      }
    }

    /* Positioning of the window controls */
    & :where(#toolbar-menubar[inactive]) + #TabsToolbar .titlebar-buttonbox {
      visibility: visible !important;
      position: fixed !important;
      top: 0;
      height: calc(var(--uc-navbar-height) + var(--uc-tab-top-margin, 0)) !important;
      z-index: 100 !important;
      inset-inline: auto 0;

      @media (-moz-gtk-csd-reversed-placement) {
        inset-inline: 0 auto !important;
      }
    }
  }
}