From bbcea9a26f113151902682c9ee796b6146842f7b Mon Sep 17 00:00:00 2001 From: MrOtherGuy Date: Fri, 10 Sep 2021 19:07:31 +0300 Subject: [PATCH] make autohide_menubar and toolbars_below_content work together This change adds a few variables to both styles that "communicate" with each other. This autohide_menubar is pretty useful if toolbars are below content so while this does introduce complexity, it's probably worth it. --- chrome/autohide_menubar.css | 10 +++++--- chrome/toolbars_below_content.css | 40 +++++++++++++++---------------- 2 files changed, 26 insertions(+), 24 deletions(-) diff --git a/chrome/autohide_menubar.css b/chrome/autohide_menubar.css index 227540a..38f9f3d 100644 --- a/chrome/autohide_menubar.css +++ b/chrome/autohide_menubar.css @@ -1,10 +1,13 @@ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_menubar.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ -/* Makes menubar behave like on mac */ +/* Makes menubar slide over tabs toolbar when hovered */ /* Menubar will be shown when cursor touches top of the spacers on both side of tabs. Window controls will be in menubar, so they are automatically hidden */ /* Make sure you have menubar enabled */ +:root{ --uc-menubar-spacer: 6px } +:root[sizemode="maximized"]{ --uc-menubar-spacer: 1px } + #nav-bar-customization-target, #PanelUI-button, #nav-bar-overflow-button, @@ -22,7 +25,8 @@ See the above repository for updates as well as full license text. */ display: flex; width: 100vw; height: var(--uc-menubar-height); - margin-top: calc(8px - var(--uc-menubar-height)); + /* --uc-menubar-extra-margin is defined in toolbars_below_content.css */ + margin-top: calc(var(--uc-menubar-spacer) - var(--uc-menubar-height) + var(--uc-menubar-extra-margin,0px)); transition: margin-top 150ms linear !important; -moz-window-dragging: no-drag; z-index:4; @@ -30,7 +34,7 @@ See the above repository for updates as well as full license text. */ #toolbar-menubar:hover{ background-color: var(--toolbar-bgcolor) !important; - margin-top: 0px; + margin-top: var(--uc-menubar-extra-margin,0px) !important; z-index: 6 } diff --git a/chrome/toolbars_below_content.css b/chrome/toolbars_below_content.css index eef1aeb..d1d6a51 100644 --- a/chrome/toolbars_below_content.css +++ b/chrome/toolbars_below_content.css @@ -6,10 +6,13 @@ See the above repository for updates as well as full license text. */ /* By default, menubar will stay on top with two options to select it's behavior - see below */ @-moz-document url(chrome://browser/content/browser.xhtml){ - #titlebar{ -moz-appearance: none !important; } @media (-moz-os-version: windows-win10){ + /* Next two variables are used by autohide_menubar.css */ + #toolbar-menubar{ --uc-menubar-extra-margin: 0px } + :root[sizemode="maximized"] #toolbar-menubar{ --uc-menubar-extra-margin: 8px } + :root[sizemode="maximized"][tabsintitlebar] :where(#browser,#customization-container,#toolbar-menubar){ margin-top: 8px } } @@ -44,30 +47,25 @@ See the above repository for updates as well as full license text. */ /* These two rules exist for compatibility with autohide_toolbox.css */ #navigator-toolbox{ bottom: -1px; transform-origin: bottom } + #toolbar-menubar{ z-index: 1; background-color: var(--lwt-accent-color,black); } + /************** - Menubar options + Menubar options - By default, menubar is overlayed on top of web-content ***************/ - /* Activate only ONE of the following */ - - /* 1. Overlay menubar on top of web-content (default) */ - /* This should be used if menubar is disabled and Alt-key is used to activate it temporarily */ - - #toolbar-menubar{ z-index: 1; background-color: var(--lwt-accent-color,black) } - - /* 2. Static menubar on top of the window, uncomment to enable this option */ - /* Use when menubar is enabled to always show it */ - + /* Uncomment the following if you want static menubar on top of the window (make menubar enabled) + * Use when menubar is enabled to always show it */ + /* - #browser,#customization-container{ padding-top: 28px } + #browser,#customization-container{ padding-top: var(--uc-menubar-spacer,28px) } + */ + + /* OR, if uncomment the following if you want menubar to appear below content, above tabs toolbar */ + + /* + #toolbar-menubar{ position: static; display: -moz-box; margin-top: 0px !important; background-color: transparent } */ - /* 3. Menubar below content, above tabs toolbar */ - /* - #toolbar-menubar{ position: static; display: -moz-box; margin-top: 0px !important; } - */ - - /* set to "reverse" (without quotes) if you want tabs above menubar with option 3 */ + /* set to "reverse" (without quotes) if you want tabs above menubar with the above option */ #titlebar{ -moz-box-direction: normal; } - -} \ No newline at end of file +}