diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 2456f17..0805811 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4397,6 +4397,50 @@ } } /*= Tab Bar - Shared Layout ==================================================*/ +@supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.tabbar.one_liner") or -moz-bool-pref( + "userChrome.hidden.tabbar" + ) + or -moz-bool-pref("userChrome.tabbar.as_titlebar") { + :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"] */ + --uc-widow-control-space: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); + } + + :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); + } + @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; + } + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + --uc-window-control-width: 72px; + } + } + + :root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) { + --uc-window-drag-space-pre: 0px; + /* Remove pre space */ + } +} @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.tabbar.one_liner") or -moz-bool-pref( "userChrome.hidden.tabbar" ) { @@ -4996,28 +5040,6 @@ } /*= 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"] */ - --uc-widow-control-space: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); - } - - :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.tabbar.one_liner") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { @@ -5025,12 +5047,19 @@ /* Don't need pre spacer */ --uc-window-drag-space-pre: 0px; } + @supports -moz-bool-pref("userChrome.tabbar.as_titlebar") { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) #tabbrowser-tabs { + /* Don't need window control */ + --uc-widow-control-space: 0px; + } + } } @supports not -moz-bool-pref("userChrome.tabbar.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 not -moz-bool-pref("userChrome.tabbar.as_titlebar") { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + /* Don't need window control */ + --uc-widow-control-space: 0px; + } } } } @@ -5041,8 +5070,7 @@ /* Don't need pre spacer */ --uc-window-drag-space-pre: 0px; /* Don't need window control */ - --uc-window-control-width: 0px; - --uc-window-drag-space-post: 0px; + --uc-widow-control-space: 0px; } } } @@ -5052,12 +5080,19 @@ /* Don't need pre spacer */ --uc-window-drag-space-pre: 0px; } + @supports -moz-bool-pref("userChrome.tabbar.as_titlebar") { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) #tabbrowser-tabs { + /* Don't need window control */ + --uc-widow-control-space: 0px; + } + } } @supports not -moz-bool-pref("userChrome.tabbar.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 not -moz-bool-pref("userChrome.tabbar.as_titlebar") { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + /* Don't need window control */ + --uc-widow-control-space: 0px; + } } } } @@ -5122,27 +5157,9 @@ } } - /* 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; - } - @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { border-inline-start-width: var(--uc-widow-control-space); @@ -5210,7 +5227,7 @@ #scrollbutton-up, #scrollbutton-down, .titlebar-spacer[type="pre-tabs"], - spacer[part="overflow-end-indicator"], + spacer:is([part="overflow-start-indicator"], [part="overflow-end-indicator"]), .tabbrowser-tab:not([selected="true"]), .tabbrowser-tab[selected="true"] .tab-background, .tabbrowser-tab[selected="true"] .tab-stack:is(::before, ::after), @@ -5221,16 +5238,15 @@ .tabbrowser-tab[selected="true"] { -moz-window-dragging: drag; - --tab-max-width: 100%; - width: var(--tab-max-width) !important; + --tab-max-width: 100vw; + min-width: calc(var(--uc-tabbar-width, 100vw) - var(--uc-widow-control-space)) !important; + max-width: var(--tab-max-width) !important; margin-inline-start: calc(var(--tab-shadow-max-size) * -1) !important; } - .tabbrowser-tab[selected="true"][pinned="true"] { -moz-box-flex: 100; max-width: var(--tab-max-width) !important; } - .tabbrowser-tab[selected="true"] .tab-label-container { margin-inline: 0 !important; } @@ -5241,7 +5257,12 @@ } /* Pinned */ + #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned][selected="true"] { + position: relative !important; + } + #tabbrowser-tabs { + --tab-overflow-pinned-tabs-width: 0 !important; padding-inline: 0 !important; /* Original: var(--tab-overflow-pinned-tabs-width) 0; */ } diff --git a/src/tabbar/_as_titlebar.scss b/src/tabbar/_as_titlebar.scss index 40ef1a8..77f5175 100644 --- a/src/tabbar/_as_titlebar.scss +++ b/src/tabbar/_as_titlebar.scss @@ -2,7 +2,7 @@ #scrollbutton-up, /* Defaults */ #scrollbutton-down, .titlebar-spacer[type="pre-tabs"], -spacer[part="overflow-end-indicator"], +spacer:is([part="overflow-start-indicator"], [part="overflow-end-indicator"]), .tabbrowser-tab:not([selected="true"]), .tabbrowser-tab[selected="true"] .tab-background, .tabbrowser-tab[selected="true"] .tab-stack:is(::before, ::after), @@ -13,20 +13,21 @@ spacer[part="overflow-end-indicator"], .tabbrowser-tab[selected="true"] { -moz-window-dragging: drag; - --tab-max-width: 100%; - width: var(--tab-max-width) !important; + --tab-max-width: 100vw; + min-width: calc(var(--uc-tabbar-width, 100vw) - var(--uc-widow-control-space)) !important; + max-width: var(--tab-max-width) !important; margin-inline-start: calc(var(--tab-shadow-max-size) * -1) !important; // padding-inline-start: calc(var(--tab-shadow-max-size) + 1px) !important; -} -.tabbrowser-tab[selected="true"][pinned="true"] { - -moz-box-flex: 100; - max-width: var(--tab-max-width) !important; -} -.tabbrowser-tab[selected="true"] .tab-label-container { - margin-inline: 0 !important; -} + &[pinned="true"] { + -moz-box-flex: 100; + max-width: var(--tab-max-width) !important; + } + .tab-label-container { + margin-inline: 0 !important; + } +} .tab-content { margin-inline: auto; width: 100%; @@ -34,7 +35,11 @@ spacer[part="overflow-end-indicator"], /* Pinned */ +#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned][selected="true"] { + position: relative !important; +} #tabbrowser-tabs { + --tab-overflow-pinned-tabs-width: 0 !important; padding-inline: 0 !important; /* Original: var(--tab-overflow-pinned-tabs-width) 0; */ } .tab-throbber, diff --git a/src/tabbar/_index.scss b/src/tabbar/_index.scss index 7fa84a8..0f5909d 100644 --- a/src/tabbar/_index.scss +++ b/src/tabbar/_index.scss @@ -31,6 +31,9 @@ } /*= Tab Bar - Shared Layout ==================================================*/ +@include Option("userChrome.tabbar.on_bottom", "userChrome.tabbar.one_liner", "userChrome.hidden.tabbar", "userChrome.tabbar.as_titlebar") { + @import "layout/window_control_size"; +} @include Option("userChrome.tabbar.on_bottom", "userChrome.tabbar.one_liner", "userChrome.hidden.tabbar") { @import "layout"; } diff --git a/src/tabbar/layout/_navbar_padding.scss b/src/tabbar/layout/_navbar_padding.scss index 555ab50..41f22b5 100644 --- a/src/tabbar/layout/_navbar_padding.scss +++ b/src/tabbar/layout/_navbar_padding.scss @@ -1,20 +1,5 @@ /*= 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"] */ - - --uc-widow-control-space: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); -} -: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); // 30px - --uc-window-drag-space-post: var(--uc-title-post-spacer, 40px); // 25px -} -:root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) { - --uc-window-drag-space-pre: 0px; /* Remove pre space */ -} //-- Mixin --------------------------------------------------------------------- @mixin _remove_spacer_pre() { @@ -24,16 +9,22 @@ @mixin _remove_spacer_post() { /* Don't need window control */ - --uc-window-control-width: 0px; - --uc-window-drag-space-post: 0px; + --uc-widow-control-space: 0px; } @mixin _remove_spacer_oneLiner() { @include Option("userChrome.tabbar.one_liner.tabbar_first") { @include _remove_spacer_pre; + @include Option("userChrome.tabbar.as_titlebar") { + #tabbrowser-tabs { + @include _remove_spacer_post; + } + } } @include NotOption("userChrome.tabbar.one_liner.tabbar_first") { - @include _remove_spacer_post; + @include NotOption("userChrome.tabbar.as_titlebar") { + @include _remove_spacer_post; + } } } @@ -110,25 +101,9 @@ } } -/* Windows */ -@include OS($win7, $win8) { - :root:is([tabsintitlebar], [sizemode="fullscreen"]) { - --uc-window-control-width: 105px; - } -} - -@include OS($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 */ @include OS($mac) { - :root:is([tabsintitlebar], [sizemode="fullscreen"]) { - --uc-window-control-width: 72px; - } :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { @include _oneLiner_navBar_borderPadding { border-inline-start-width: var(--uc-widow-control-space); diff --git a/src/tabbar/layout/_window_control_size.scss b/src/tabbar/layout/_window_control_size.scss new file mode 100644 index 0000000..c3bb050 --- /dev/null +++ b/src/tabbar/layout/_window_control_size.scss @@ -0,0 +1,27 @@ +: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"] */ + + --uc-widow-control-space: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); +} + +: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); // 30px + --uc-window-drag-space-post: var(--uc-title-post-spacer, 40px); // 25px + + @include OS($win7, $win8) { + --uc-window-control-width: 105px; + } + @include OS($win10) { + --uc-window-control-width: 138px; + } + @include OS($mac) { + --uc-window-control-width: 72px; + } +} + +:root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) { + --uc-window-drag-space-pre: 0px; /* Remove pre space */ +}