Add _v2 version of tabs_below_content.css

This works in Firefox 133 and should be compatible with multi-row_tabs as is
2024-10-15 14:10:05 +03:00
parent eda73c19e4
commit fc231f2444
3 changed files with 111 additions and 0 deletions
--- a/chrome/tabs_below_content_v2.css
+++ b/chrome/tabs_below_content_v2.css
@@ -0,0 +1,109 @@
+/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_below_content_v2.css made available under Mozilla Public License v. 2.0
+See the above repository for updates as well as full license text. */
+
+/* Requires Fx 133+ */
+@media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"){
+  #nav-bar > .titlebar-buttonbox-container{
+    order: -1 !important;
+    > .titlebar-buttonbox{
+      flex-direction: row-reverse;
+    }
+  }
+}
+@media not (-moz-bool-pref: "sidebar.verticalTabs"){
+  #main-window > body{
+    display: grid !important;
+    grid-template-rows: repeat(8,max-content) 1fr;
+    grid-auto-rows: auto;
+  }
+  #navigator-toolbox{
+    display: contents;
+  }
+  :root[sizemode="fullscreen"]:not([inDOMFullscreen]) #toolbar-menubar{
+    min-height: 0 !important;
+  }
+  #main-window #browser{
+    grid-row: 9/10;
+  }
+  #TabsToolbar{
+    grid-row: 10/11;
+    background-attachment: scroll;
+  }
+  .browser-toolbar{
+    background: inherit;
+    background-attachment: fixed;
+  }
+  #TabsToolbar > :is(.titlebar-buttonbox-container,.titlebar-spacer){
+    display: none;
+  }
+  :root[sizemode="fullscreen"] #nav-bar > .titlebar-buttonbox-container{
+    display: flex !important;
+  }
+  :root[tabsintitlebar] #toolbar-menubar:not([autohide="false"]) ~ #nav-bar{
+     > .titlebar-buttonbox-container{
+      display: flex !important;
+    }
+    :root[sizemode="normal"] & {
+      > .titlebar-spacer{
+        display: flex !important;
+      }
+    }
+    :root[sizemode="maximized"] & {
+      > .titlebar-spacer[type="post-tabs"]{
+        display: flex !important;
+      }
+    }
+    @media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"),
+      (-moz-gtk-csd-reversed-placement),
+      (-moz-platform: macos){
+      > .titlebar-spacer[type="post-tabs"]{
+        display: none !important;
+      }
+      > .titlebar-spacer[type="pre-tabs"]{
+        display: flex !important;
+      }
+    }
+  }
+  @media (-moz-bool-pref: "browser.fullscreen.autohide"){
+    #main-window[sizemode="fullscreen"]:not([inDOMFullscreen]){
+      > body {
+        grid-template-rows: repeat(8,0px) 1fr;
+        grid-auto-rows: 0px;
+      }
+      & #nav-bar{
+        height: min-content;
+        z-index: 1;
+        transition: transform 133ms ease-in-out 400ms !important;
+        transform: rotateX(89.9deg);
+        transform-origin: top;
+        &:hover{
+          transition-delay: 0ms !important;
+          transform: rotateX(0deg);
+        }
+      }
+      & #TabsToolbar{
+        opacity: 0 !important;
+        will-change: unset !important;
+        transform: translateY(calc(100% - 1px));
+        transition: transform 66.7ms ease-in-out 100ms, opacity 66.7ms linear 66.7ms !important;
+        height: min-content;
+        align-self: end;
+        z-index: 2;
+        &:hover{
+           transition-delay: 0ms !important;
+           transform: translateY(0);
+           opacity: 1 !important;
+        }
+      }
+      & #mainPopupSet:has(> [panelopen]) ~ #navigator-toolbox > #nav-bar{
+        transition-delay: 0ms !important;
+        transform: rotateX(0deg);
+      }
+      & #mainPopupSet:has(> #tabContextMenu:hover) ~ #navigator-toolbox #TabsToolbar{
+        transition-delay: 0ms;
+        transform: translateY(0);
+        opacity: 1 !important;
+      }
+    }
+  }
+}