From 7baf1d3fbede1e213c16e98ba3f5059cee0cee64 Mon Sep 17 00:00:00 2001 From: MrOtherGuy Date: Sun, 27 Oct 2024 19:20:46 +0200 Subject: [PATCH] create autohide_tabstoolbar_v2.css Rewriting the old style to work with both vertical and horizontal tabs --- chrome/autohide_tabstoolbar_v2.css | 77 ++++++++++++++++++++++++++++++ html_resources/tagmap.json | 3 +- tags.csv | 1 + 3 files changed, 80 insertions(+), 1 deletion(-) create mode 100644 chrome/autohide_tabstoolbar_v2.css diff --git a/chrome/autohide_tabstoolbar_v2.css b/chrome/autohide_tabstoolbar_v2.css new file mode 100644 index 0000000..a94faf1 --- /dev/null +++ b/chrome/autohide_tabstoolbar_v2.css @@ -0,0 +1,77 @@ +/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_tabstoolbar_v2.css made available under Mozilla Public License v. 2.0 +See the above repository for updates as well as full license text. */ + +/* Requires Firefox 133 */ + +:root{ + --uc-tabs-hide-animation-duration: 48ms; + --uc-tabs-hide-animation-delay: 200ms; +} + +@media (-moz-bool-pref: "sidebar.verticalTabs"){ + #sidebar-main:has(>[expanded]){ + overflow: visible !important; + max-width: var(--tab-collapsed-width); + z-index: var(--browser-area-z-index-toolbox-while-animating); + transition: z-index 0s linear var(--uc-tabs-hide-duration); + } + #sidebar-main >[expanded]{ + --tab-pinned-horizontal-count: 5; /* This needs to match whatever is used in sidebar-main.css - currently 5 */ + background: inherit; + overflow: hidden; + min-width: var(--tab-collapsed-width); + transition: min-width var(--uc-tabs-hide-animation-duration) ease-out var(--uc-tabs-hide-animation-delay); + border-inline: 0.01px solid var(--chrome-content-separator-color); + border-inline-width: 0 0.01px; + &[positionend]{ + transition-property: min-width, transform; + border-inline-width: 0.01px 0; + } + } + #sidebar-main >[expanded]:hover{ + min-width: calc(var(--tab-pinned-horizontal-count) * var(--tab-pinned-min-width-expanded) + 2 * var(--tab-pinned-container-margin-inline-expanded) + 1px); + transition-delay: 0ms !important; + &[positionend]{ + transform: translateX(calc(var(--tab-collapsed-width) - 100%)); + } + } +} +@media not (-moz-bool-pref: "sidebar.verticalTabs"){ + :root:not([customizing],[chromehidden~="menubar"]) #navigator-toolbox:hover, + :root:not([customizing],[chromehidden~="menubar"]) #TabsToolbar{ + margin-bottom: calc(0px - 2 * var(--tab-block-margin) - var(--tab-min-height)); + } + #navigator-toolbox{ + transition: margin-bottom var(--uc-tabs-hide-animation-duration) ease-out var(--uc-tabs-hide-animation-delay) !important; + --browser-area-z-index-toolbox: 3; + } + #TabsToolbar:not([customizing]){ + visibility: hidden; + transition: visibility 0ms linear var(--uc-tabs-hide-animation-delay), + margin-bottom var(--uc-tabs-hide-animation-duration) ease-out var(--uc-tabs-hide-animation-delay) !important; + } + #navigator-toolbox:hover{ + transition-delay: 0s !important; + > #TabsToolbar{ + visibility: visible; + margin-bottom: 0px; + transition-delay: 18ms, 0ms !important; + } + } + @media (-moz-bool-pref: "userchrome.autohidetabs.show-while-inactive.enabled"){ + #navigator-toolbox:-moz-window-inactive{ + margin-bottom: calc(0px - 2 * var(--tab-block-margin) - var(--tab-min-height)); + > #TabsToolbar{ + visibility: visible; + margin-bottom: 0px; + } + } + } + /* These rules make sure that height of tabs toolbar doesn't exceed tab-min-height */ + #tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container{ + max-height: var(--tab-min-height); + } + .tab-label{ line-height: 20px !important; } + :root[uidensity="compact"] .tab-label{ line-height: 18px !important; } +} + diff --git a/html_resources/tagmap.json b/html_resources/tagmap.json index 1473b29..e38c8d5 100644 --- a/html_resources/tagmap.json +++ b/html_resources/tagmap.json @@ -181,5 +181,6 @@ "icon_only_context_menu_text_controls.css":["menu","icons","hack"], "tabs_on_bottom_v2.css":["hack","tabs","toolbars"], "oneline_toolbar.css":["tabs","toolbars"], -"toolbars_below_content_v2.css":["toolbars"] +"toolbars_below_content_v2.css":["toolbars"], +"autohide_tabstoolbar_v2.css":["tabs","toolbars","autohide"] } diff --git a/tags.csv b/tags.csv index dc85037..f9c37f2 100644 --- a/tags.csv +++ b/tags.csv @@ -181,3 +181,4 @@ icon_only_context_menu_text_controls.css,menu,icons,hack tabs_on_bottom_v2.css,hack,tabs,toolbars oneline_toolbar.css,tabs,toolbars toolbars_below_content_v2.css,toolbars +autohide_tabstoolbar_v2.css,tabs,toolbars,autohide