Add: One Liner - responsive

css/leptonChrome.css

@@ -3247,10 +3247,19 @@
     }
   }
   @supports -moz-bool-pref("userChrome.tab.one_liner") {
+    @supports not -moz-bool-pref("userChrome.tab.one_liner.responsive") {
       :root {
         --tab-max-width: 180px;
       }
     }
+    @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") {
+      @media screen and (min-width: 1100px) {
+        :root {
+          --tab-max-width: 180px;
+        }
+      }
+    }
+  }
 
   .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) {
     max-width: var(--tab-max-width) !important;
@@ -3987,6 +3996,7 @@
 }
 /*= Tab Bar - Oneliner =======================================================*/
 @supports -moz-bool-pref("userChrome.tab.one_liner") {
+  @supports not -moz-bool-pref("userChrome.tab.one_liner.responsive") {
     :root {
       --uc-navbar-size: 40vw;
       --uc-tabbar-size: calc(100vw - var(--uc-navbar-size));
@@ -4039,9 +4049,67 @@
         display: none !important;
       }
     }
+  }
+  @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") {
+    @media screen and (min-width: 1100px) {
+      :root {
+        --uc-navbar-size: 40vw;
+        --uc-tabbar-size: calc(100vw - var(--uc-navbar-size));
+      }
+
+      #navigator-toolbox {
+        background-color: var(--toolbar-bgcolor) !important;
+      }
+
+      #nav-bar {
+        margin-top: var(--uc-tabbar-hide-height) !important;
+        height: var(--uc-tabbar-height) !important;
+      }
+
+      #nav-bar > * {
+        transform: translateY(calc((var(--uc-tabbar-height) + var(--uc-navbar-hide-height)) / 2));
+      }
+
+      #urlbar-container {
+        min-width: 0px !important;
+      }
+
+      toolbarspring.chromeclass-toolbar-additional {
+        display: none !important;
+      }
+
+      @supports not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") {
+        #TabsToolbar {
+          margin-inline-start: var(--uc-navbar-size) !important;
+        }
+
+        #nav-bar {
+          margin-inline-end: var(--uc-tabbar-size) !important;
+        }
+
+        .titlebar-spacer[type="pre-tabs"] {
+          display: none !important;
+        }
+      }
+      @supports -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") {
+        #TabsToolbar {
+          margin-inline-end: var(--uc-navbar-size) !important;
+        }
+
+        #nav-bar {
+          margin-inline-start: var(--uc-tabbar-size) !important;
+        }
+
+        .titlebar-spacer[type="post-tabs"] {
+          display: none !important;
+        }
+      }
+    }
+  }
 }
 /*= Tab Bar - Shared Layout ==================================================*/
 @supports -moz-bool-pref("userChrome.tab.on_bottom") or -moz-bool-pref("userChrome.tab.one_liner") {
+  @supports not -moz-bool-pref("userChrome.tab.one_liner.responsive") {
     @supports -moz-bool-pref("userChrome.tab.on_bottom") or -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") {
       /*= Windows Control - Move to toolbar ========================================*/
       /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0
@@ -4208,6 +4276,177 @@
         right: unset;
       }
     }
+  }
+  @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") {
+    @media screen and (min-width: 1100px) {
+      @supports -moz-bool-pref("userChrome.tab.on_bottom") or -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") {
+        /*= Windows Control - Move to toolbar ========================================*/
+        /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0
+        See the above repository for updates as well as full license text. */
+        :root {
+          --uc-titlebar-padding: 0px;
+        }
+
+        @media (-moz-os-version: windows-win7),
+          (-moz-platform: windows-win7),
+          (-moz-os-version: windows-win8),
+          (-moz-platform: windows-win8),
+          (-moz-os-version: windows-win10),
+          (-moz-platform: windows-win10) {
+          :root[sizemode="maximized"][tabsintitlebar] {
+            --uc-titlebar-padding: 8px;
+          }
+        }
+        #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
+        #TabsToolbar > .titlebar-buttonbox-container {
+          position: fixed;
+          display: block;
+          top: var(--uc-titlebar-padding);
+          right: 0;
+          height: 40px;
+          z-index: 1;
+        }
+
+        /* where window controls are on left */
+        @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
+          :root {
+            --uc-titlebar-padding: 0px !important;
+          }
+
+          .titlebar-buttonbox-container {
+            left: 0;
+            right: unset !important;
+          }
+        }
+        #navigator-toolbox {
+          padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important;
+        }
+
+        :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container {
+          height: 32px;
+        }
+
+        #toolbar-menubar[inactive] > .titlebar-buttonbox-container {
+          opacity: 0;
+        }
+
+        .titlebar-buttonbox-container > .titlebar-buttonbox {
+          height: 100%;
+        }
+        @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
+          .titlebar-buttonbox-container > .titlebar-buttonbox {
+            margin-block: 10px;
+          }
+        }
+
+        /* At Full Screen */
+        :root[sizemode="fullscreen"] #window-controls {
+          position: fixed;
+          display: flex;
+          top: 0;
+          right: 0;
+          height: 40px;
+        }
+
+        :root[uidensity="compact"][sizemode="fullscreen"] #window-controls {
+          height: 32px;
+        }
+
+        @supports -moz-bool-pref("browser.fullscreen.autohide") {
+          :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container {
+            visibility: hidden;
+          }
+        }
+        /* At Activated Menubar */
+        :root:not([chromehidden~="menubar"], [sizemode="fullscreen"])
+          #toolbar-menubar:not([autohide="true"])
+          + #TabsToolbar
+          > .titlebar-buttonbox-container {
+          display: block !important;
+        }
+
+        :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container {
+          visibility: hidden;
+        }
+      }
+      /*= Navbar - Padding for window controls =====================================*/
+      /* Customized https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/window_control_placeholder_support.css */
+      :root {
+        --uc-window-control-width: 0px;
+        /* Same as .titlebar-buttonbox-container      -  Space reserved for window controls */
+        --uc-window-drag-space-pre: 0px;
+        /* Same as .titlebar-spacer[type="pre-tabs"]  - Extra space reserved on both sides of the nav-bar to be able to drag the window */
+        --uc-window-drag-space-post: 0px;
+        /* Same as .titlebar-spacer[type="post-tabs"] */
+      }
+
+      :root:is([tabsintitlebar], [sizemode="fullscreen"]) {
+        --uc-window-control-width: 84px;
+        /* 84px is default value of linux */
+        --uc-window-drag-space-pre: var(--uc-title-pre-spacer, 40px);
+        --uc-window-drag-space-post: var(--uc-title-post-spacer, 40px);
+      }
+
+      :root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) {
+        --uc-window-drag-space-pre: 0px;
+        /* Remove pre space */
+      }
+
+      @supports -moz-bool-pref("userChrome.tab.one_liner") {
+        @supports not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") {
+          :root:is([tabsintitlebar], [sizemode="fullscreen"]) {
+            /* Don't need window control */
+            --uc-window-control-width: 0px;
+            --uc-window-drag-space-post: 0px;
+          }
+        }
+        @supports -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") {
+          :root:is([tabsintitlebar], [sizemode="fullscreen"]) {
+            /* Don't need pre spacer */
+            --uc-window-drag-space-pre: 0px;
+          }
+        }
+      }
+      #nav-bar {
+        border-inline-start-width: var(--uc-window-drag-space-pre);
+        border-inline-end-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post));
+        border-inline-style: solid !important;
+        border-inline-color: var(--toolbar-bgcolor);
+      }
+
+      /* Windows */
+      @media (-moz-os-version: windows-win7),
+        (-moz-platform: windows-win7),
+        (-moz-os-version: windows-win8),
+        (-moz-platform: windows-win8) {
+        :root:is([tabsintitlebar], [sizemode="fullscreen"]) {
+          --uc-window-control-width: 105px;
+        }
+      }
+      @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) {
+        :root:is([tabsintitlebar], [sizemode="fullscreen"]) {
+          --uc-window-control-width: 138px;
+        }
+      }
+      /* Use this pref to check Mac OS where window controls are on left */
+      /* This pref defaults to true on Mac and doesn't actually do anything on other platforms. So if your system has window controls on LEFT side you can set the pref to true */
+      @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") {
+        :root:is([tabsintitlebar], [sizemode="fullscreen"]) {
+          --uc-window-control-width: 72px;
+        }
+
+        :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar {
+          border-inline-start-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post));
+          border-inline-end-width: var(--uc-window-drag-space-pre);
+        }
+
+        :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child,
+        :root[sizemode="fullscreen"] #window-controls {
+          right: unset;
+        }
+      }
+    }
+  }
 }
 /*= Tab Bar - Show only current tab ==========================================*/
 @supports -moz-bool-pref("userChrome.tab.as_titlebar") {
@@ -4691,11 +4930,21 @@
 
   @supports -moz-bool-pref("userChrome.tab.one_liner") {
     @supports not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") {
+      @supports not -moz-bool-pref("userChrome.tab.one_liner.responsive") {
         .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-background::before {
           opacity: var(--tab-separator-opacity);
           transform: translateX(-1.5px) translateY(calc(-50% + 1px));
         }
       }
+      @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") {
+        @media screen and (min-width: 1100px) {
+          .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-background::before {
+            opacity: var(--tab-separator-opacity);
+            transform: translateX(-1.5px) translateY(calc(-50% + 1px));
+          }
+        }
+      }
+    }
   }
   @supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") {
     #tabs-newtab-button:not(:hover, [open])::before {
@@ -5964,6 +6213,19 @@
         margin-bottom: 0;
       }
     }
+    @supports -moz-bool-pref("userChrome.tab.one_liner") {
+      @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") {
+        @media screen and (max-width: 1100px) {
+          #nav-bar:not([customizing]) {
+            margin-bottom: var(--uc-navbar-hide-height);
+          }
+
+          #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
     @media (prefers-reduced-motion: no-preference) {
       #nav-bar:not([customizing]) {
         transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay),

src/autohide/_navbar.scss

@@ -6,7 +6,7 @@
   opacity: 1;
 }
 
-@include NotOption("userChrome.tab.one_liner") {
+@include OneLinerBeforeResponsive {
   #nav-bar:not([customizing]) {
     margin-bottom: var(--uc-navbar-hide-height);
   }

src/autohide/_toolbar_overlap.scss

@@ -37,6 +37,7 @@
         }
       }
 
+      // OneLinerBeforeResponsive
       @include NotOption("userChrome.tab.one_liner") {
         @include Option("userChrome.autohide.navbar") {
           @include NotOption("userChrome.autohide.bookmarkbar") {

src/leptonChrome.scss

@@ -4,6 +4,7 @@
 @use "utils/theme" as *;
 @use "utils/accent_color" as *;
 @use "utils/native_menu" as *;
+@use "utils/one_liner" as *;
 @use "utils/proton_elements" as Proton;
 @use "sass:selector";
 

src/padding/_tabbar_width.scss

@@ -66,7 +66,7 @@
   @include Option("userChrome.tab.photon_like_padding") {
     --tab-max-width: 225px;
   }
-  @include Option("userChrome.tab.one_liner") {
+  @include OneLiner {
     --tab-max-width: 180px;
   }
 }

src/tabbar/_index.scss

@@ -24,13 +24,15 @@
 }
 
 /*= Tab Bar - Oneliner =======================================================*/
-@include Option("userChrome.tab.one_liner") {
+@include OneLiner {
   @import "one_liner";
 }
 
 /*= Tab Bar - Shared Layout ==================================================*/
 @include Option("userChrome.tab.on_bottom", "userChrome.tab.one_liner") {
+  @include OneLinerContent {
     @import "layout";
+  }
 }
 
 /*= Tab Bar - Show only current tab ==========================================*/

src/tabbar/unselected_tab/_dynamic_separator.scss

@@ -59,11 +59,13 @@
 }
 @include Option("userChrome.tab.one_liner") {
   @include NotOption("userChrome.tab.one_liner.tabbar_first") {
+    @include OneLinerContent {
       .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-background::before {
         opacity: var(--tab-separator-opacity);
         transform: translateX(-1.5px) translateY(calc(-50% + 1px));
       }
     }
+  }
 }
 @include Option("userChrome.tab.newtab_button_like_tab") {
   #tabs-newtab-button:not(:hover, [open])::before {

user.js

@@ -112,6 +112,7 @@ user_pref("userChrome.rounding.square_tab",           false);
 // user_pref("userChrome.tab.on_bottom.menubar_on_top",        true); // Need on_bottom
 // user_pref("userChrome.tab.one_liner",                       true);
 // user_pref("userChrome.tab.one_liner.tabbar_first",          true);
+// user_pref("userChrome.tab.one_liner.responsive",            true);
 // user_pref("userChrome.tab.as_titlebar",                     true);
 // user_pref("userChrome.tab.always_show_tab_icon",            true);
 // user_pref("userChrome.tab.close_button_at_pinned",          true);