From 6c1efa741d170d6b71f876326b26ae864c639a3e Mon Sep 17 00:00:00 2001 From: bmFtZQ <62812711+bmFtZQ@users.noreply.github.com> Date: Thu, 23 Nov 2023 22:53:34 +0800 Subject: [PATCH] add new tweak: hide tabs bar --- README.md | 7 +++ chrome/global/browser.css | 24 +++++----- chrome/global/popup.css | 2 +- chrome/global/tweaks.css | 97 +++++++++++++++++++++++++++++++++++++-- chrome/toolbar/tabbar.css | 38 +++++++-------- 5 files changed, 130 insertions(+), 38 deletions(-) diff --git a/README.md b/README.md index 1b70c82..722c5f8 100644 --- a/README.md +++ b/README.md @@ -53,6 +53,13 @@ To disable a tweak, set the key to `false` or delete it, then restart the browse | -------------------------- | | `uc.tweak.rounded-corners` | +| Hide Tabs Bar (Useful when using vertical tabs extensions such as Sidebery, Tree Style Tab, etc.) | +| ------------------------------------------------------------------------------------------------- | +| **NOTE: At the moment, this only supports macOS and Windows.** | +| `uc.tweak.hide-tabs-bar` | +| **OPTIONAL: Only enable in fullscreen mode (currently: macOS Only!)** | +| `uc.tweak.hide-tabs-bar.only-when-maximised` | + | Use background image on newtab page | | -------------------------------------------------------------------------------------------------- | | **SETUP: Add an image named `background-0.(jpg/png)` to the `chrome` folder.** | diff --git a/chrome/global/browser.css b/chrome/global/browser.css index af17570..dab9cb5 100644 --- a/chrome/global/browser.css +++ b/chrome/global/browser.css @@ -26,9 +26,9 @@ :root { --uc-tweak-rounded-corners-padding: 3px; - --uc-tweak-rounded-corners-border: 1px; + --uc-tweak-rounded-corners-border: 1px solid rgb(0 0 0 / .05); --uc-tweak-rounded-corners-radius: 8px; - --uc-tweak-rounded-corners-shadow: 0px 1px 2px rgb(0 0 0 / .1); + --uc-tweak-rounded-corners-shadow: 0px 1px 1px rgb(0 0 0 / .1); & #browser:not([style*="--sidebar-border-color"]) { --sidebar-border-color: light-dark(#bfbfbf80, #595959) !important; @@ -39,28 +39,28 @@ :root[inFullscreen] #navigator-toolbox:where([style*="margin-top"], [fullscreenShouldAnimate]) + #browser, :root[inDOMFullscreen] #browser { --uc-tweak-rounded-corners-padding: 0; - --uc-tweak-rounded-corners-border: 0; + --uc-tweak-rounded-corners-border: none; --uc-tweak-rounded-corners-radius: 0; --uc-tweak-rounded-corners-shadow: none; } #appcontent { - margin-inline: var(--uc-tweak-rounded-corners-padding); - margin-block-end: var(--uc-tweak-rounded-corners-padding); - border-radius: var(--uc-tweak-rounded-corners-radius); - overflow: hidden; - border: var(--uc-tweak-rounded-corners-border) solid rgb(0 0 0 / .1); - box-shadow: var(--uc-tweak-rounded-corners-shadow); + margin-inline: var(--uc-tweak-rounded-corners-padding) !important; + margin-block-end: var(--uc-tweak-rounded-corners-padding) !important; + border-radius: var(--uc-tweak-rounded-corners-radius) !important; + overflow: hidden !important; + border: var(--uc-tweak-rounded-corners-border) !important; + box-shadow: var(--uc-tweak-rounded-corners-shadow) !important; } - - + /* apply rounded corners to sidebar */ #sidebar-box { margin-inline-start: var(--uc-tweak-rounded-corners-padding) !important; margin-block-end: var(--uc-tweak-rounded-corners-padding) !important; border-radius: var(--uc-tweak-rounded-corners-radius) !important; overflow: hidden !important; - border: var(--uc-tweak-rounded-corners-border) solid rgb(0 0 0 / .1); + border: var(--uc-tweak-rounded-corners-border) !important; + box-shadow: var(--uc-tweak-rounded-corners-shadow) !important; &[positionend] { margin-inline-start: 0 !important; diff --git a/chrome/global/popup.css b/chrome/global/popup.css index 04e1409..b7d0766 100644 --- a/chrome/global/popup.css +++ b/chrome/global/popup.css @@ -403,7 +403,7 @@ panelview .toolbarbutton-1, panel[type="autocomplete-richlistbox"]>.autocomplete-richlistbox, .menupopup-arrowscrollbox { background: var(--arrowpanel-background) !important; - border: 1px solid var(--panel-separator-color) !important; + border: 1px solid light-dark(transparent, var(--panel-separator-color)) !important; } /* make room for menu shadow */ diff --git a/chrome/global/tweaks.css b/chrome/global/tweaks.css index ba1a25d..71235ab 100644 --- a/chrome/global/tweaks.css +++ b/chrome/global/tweaks.css @@ -2,7 +2,7 @@ /* disable drag space above tabs */ @media (-moz-bool-pref: "uc.tweak.disable-drag-space") { - :root #titlebar { + :root { --tab-block-margin: 0px !important; } } @@ -85,17 +85,17 @@ bugs with certain themes eg. dark text on dark background.) */ /* adjust spacing of area above tabs */ @media not (-moz-platform: macos) { - :root[sizemode="maximized"] #titlebar { + :root[sizemode="maximized"] { --tab-block-margin: 4px !important; } } - :root:is([inFullscreen], :not([tabsintitlebar])) #titlebar { + :root:is([inFullscreen], :not([tabsintitlebar])) { --tab-block-margin: 4px !important; } @media (-moz-bool-pref: "uc.tweak.disable-drag-space") { - :root #titlebar { + :root { --tab-block-margin: 4px !important; } } @@ -212,3 +212,92 @@ bugs with certain themes eg. dark text on dark background.) */ display: flex !important; } } + +@media (-moz-bool-pref: "uc.tweak.hide-tabs-bar") { + :root:not([customizing]) { + /* Height of navbar, used for determining height and position of window controls */ + --uc-navbar-height: 38px; + /* Drag space next to the window controls, allows you to move the window more easily */ + --uc-titlebar-drag-space: 40px; + + @media not (-moz-bool-pref: "uc.tweak.hide-tabs-bar.only-when-maximised") { + /* Set containing block for the window buttons */ + & #titlebar { + position: relative !important; + } + + /* Hide the tabs */ + & #TabsToolbar { + visibility: collapse !important; + padding-inline-start: 0 !important; + } + + /* Add some padding to the top of the navbar */ + & #nav-bar { + padding-top: var(--tab-block-margin) !important; + } + } + + /* macOS specific positioning */ + @media (-moz-platform: macos) { + &[inFullscreen] { + /* Hide the tabs */ + & #TabsToolbar { + visibility: collapse !important; + padding-inline-start: 0 !important; + } + } + + @media not (-moz-bool-pref: "uc.tweak.hide-tabs-bar.only-when-maximised") { + /* Offset navbar contents to make space for the window controls */ + &[tabsintitlebar] #nav-bar:not([inFullscreen]) { + padding-left: calc(84px + var(--uc-titlebar-drag-space)); + + /* Remove the padding from the side of the navbar */ + & #nav-bar-customization-target > :is(toolbarbutton, toolbaritem):first-child { + padding-inline-start: 0 !important; + } + } + + /* Positioning of the window controls */ + #TabsToolbar .titlebar-buttonbox { + --uc-position: calc((var(--uc-navbar-height) + var(--tab-block-margin)) / 2 - 8px); + visibility: visible !important; + position: absolute; + top: var(--uc-position); + left: var(--uc-position); + margin: 0 !important; + } + } + } + + /* Windows specific positioning */ + @media (-moz-platform: windows) { + /* Offset navbar contents to make space for the window controls */ + &:where([inFullscreen], [tabsintitlebar]) #nav-bar { + padding-right: calc(140px + var(--uc-titlebar-drag-space)); + + /* Remove the padding from the side of the navbar */ + & #PanelUI-menu-button { + padding-inline-end: 0 !important; + } + } + + /* Positioning of the window controls */ + & #toolbar-menubar[inactive] + #TabsToolbar .titlebar-buttonbox { + visibility: visible !important; + position: absolute !important; + top: 0; + right: 0; + height: calc(var(--uc-navbar-height) + var(--tab-block-margin)) !important; + } + + /* Set background colour of the menu bar to maintain consistency with the navbar */ + @media not (-moz-bool-pref: "uc.tweak.floating-tabs") { + #toolbar-menubar { + background-color: var(--toolbar-bgcolor) !important; + } + } + } + } +} diff --git a/chrome/toolbar/tabbar.css b/chrome/toolbar/tabbar.css index 282d1ac..de34c55 100644 --- a/chrome/toolbar/tabbar.css +++ b/chrome/toolbar/tabbar.css @@ -1,29 +1,25 @@ /* Edge-Frfox - tabbar.css */ -@media (-moz-bool-pref: "uc.tweak.floating-tabs.equal-margin") and (-moz-bool-pref: "uc.tweak.floating-tabs") { - :root #titlebar { - --tab-block-margin: 5px !important; +:root { + --tab-block-margin: 8px !important; + + & #titlebar { + --tab-min-height: 32px !important; + --inline-tab-padding: 11px !important; + --tab-border-radius: 8px !important; + + --uc-toolbarbutton-inner-padding: 6px !important; + --toolbarbutton-border-radius: 4px !important; + --toolbarbutton-tabsline-border-radius: 8px !important; + --tabs-navbar-shadow-size: 0 !important; + --tab-shadow-max-size: 0 !important; } -} -@media (not (-moz-bool-pref: "uc.tweak.floating-tabs.equal-margin")) or (not (-moz-bool-pref: "uc.tweak.floating-tabs")) { - :root #titlebar { - --tab-block-margin: 8px !important; + @media (-moz-bool-pref: "uc.tweak.floating-tabs.equal-margin") and (-moz-bool-pref: "uc.tweak.floating-tabs") { + --tab-block-margin: 5px !important; } } -:root #titlebar { - --tab-min-height: 32px !important; - --inline-tab-padding: 11px !important; - --tab-border-radius: 8px !important; - - --uc-toolbarbutton-inner-padding: 6px !important; - --toolbarbutton-border-radius: 4px !important; - --toolbarbutton-tabsline-border-radius: 8px !important; - --tabs-navbar-shadow-size: 0 !important; - --tab-shadow-max-size: 0 !important; -} - /* tab open/close transition */ .tabbrowser-tab:not([pinned]) { transition-property: min-width, max-width !important; @@ -37,13 +33,13 @@ transition: transform 200ms cubic-bezier(0, .75, .25, 1) !important; } -:root:is([inFullscreen], :not([tabsintitlebar])) #titlebar { +:root:is([inFullscreen], :not([tabsintitlebar])) { --tab-block-margin: 0px !important; } /* hide space above tabs when maximised for non-macOS versions of Firefox */ @media not (-moz-platform: macos) { - :root:is([inFullscreen], :not([tabsintitlebar]), [sizemode="maximized"]) #titlebar, + :root:is([inFullscreen], :not([tabsintitlebar]), [sizemode="maximized"]), #toolbar-menubar:not([inactive])+#TabsToolbar { --tab-block-margin: 0px !important; }