From 044ea2073354bff6de4003b15363d8082f0b1121 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 19 Nov 2022 08:44:50 +0900 Subject: [PATCH] Add: NavBar - As sidebar Looks liek Arc Browser - https://thebrowser.company/ --- css/leptonChrome.css | 526 ++++++++++++++++++++++++------------ src/autohide/_common.scss | 61 ++++- src/leptonChrome.scss | 3 + src/navbar/_as_sidebar.scss | 125 +++++++++ src/navbar/_index.scss | 4 + src/sidebar/_overlap.scss | 22 +- src/tabbar/_index.scss | 2 +- src/tabbar/_layout.scss | 4 +- user.js | 2 + 9 files changed, 561 insertions(+), 188 deletions(-) create mode 100644 src/navbar/_as_sidebar.scss create mode 100644 src/navbar/_index.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index ddc3986..78ab784 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5856,75 +5856,19 @@ } } } - /*= Navbar - Padding for window controls =====================================*/ - /* Customized https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/window_control_placeholder_support.css */ - #nav-bar { - border-inline-style: solid !important; - border-inline-color: transparent; - } - @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) { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { - #nav-bar { - border-inline-start-width: var(--uc-window-drag-space-pre); - border-inline-end-width: var(--uc-window-control-space); - } + @supports not -moz-bool-pref("userChrome.navbar.as_sidebar") { + /*= Navbar - Padding for window controls =====================================*/ + /* Customized https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/window_control_placeholder_support.css */ + #nav-bar { + border-inline-style: solid !important; + border-inline-color: transparent; } - @supports -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { - #nav-bar { - border-inline-start-width: var(--uc-window-drag-space-pre); - border-inline-end-width: var(--uc-window-control-space); - } - } - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { - @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { - @media screen and (max-width: 1100px) { - #nav-bar { - border-inline-start-width: var(--uc-window-drag-space-pre); - border-inline-end-width: var(--uc-window-control-space); - } - } - } - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #nav-bar { - margin-inline-start: var(--uc-window-drag-space-pre) !important; - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #nav-bar { - margin-inline-end: var(--uc-window-control-space) !important; - } - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @media screen and (min-width: 1100px) { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #nav-bar { - margin-inline-start: var(--uc-window-drag-space-pre) !important; - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #nav-bar { - margin-inline-end: var(--uc-window-control-space) !important; - } - } - } - } - } - } - } - @media (-moz-gtk-csd-available) { - @media (-moz-gtk-csd-reversed-placement: 0) { + @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) { @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { #nav-bar { border-inline-start-width: var(--uc-window-drag-space-pre); @@ -5940,7 +5884,7 @@ } @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { - @media screen and (-moz-gtk-csd-reversed-placement: 0) and (max-width: 1100px) { + @media screen and (max-width: 1100px) { #nav-bar { border-inline-start-width: var(--uc-window-drag-space-pre); border-inline-end-width: var(--uc-window-control-space); @@ -5964,7 +5908,7 @@ } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @media screen and (-moz-gtk-csd-reversed-placement: 0) and (min-width: 1100px) { + @media screen and (min-width: 1100px) { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #nav-bar { margin-inline-start: var(--uc-window-drag-space-pre) !important; @@ -5980,57 +5924,58 @@ } } } - } - - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { - #nav-bar { - border-inline-start-width: var(--uc-window-control-space); - border-inline-end-width: var(--uc-window-drag-space-pre); - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { - #nav-bar { - border-inline-start-width: var(--uc-window-control-space); - border-inline-end-width: var(--uc-window-drag-space-pre); - } - } - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { - @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { - @media screen and (max-width: 1100px) { - #nav-bar { - border-inline-start-width: var(--uc-window-control-space); - border-inline-end-width: var(--uc-window-drag-space-pre); - } + @media (-moz-gtk-csd-available) { + @media (-moz-gtk-csd-reversed-placement: 0) { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { + #nav-bar { + border-inline-start-width: var(--uc-window-drag-space-pre); + border-inline-end-width: var(--uc-window-control-space); } } - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { #nav-bar { - margin-inline-start: var(--uc-window-control-space, 0px) !important; + border-inline-start-width: var(--uc-window-drag-space-pre); + border-inline-end-width: var(--uc-window-control-space); } } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #nav-bar { - margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; - } - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @media screen and (min-width: 1100px) { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #nav-bar { - margin-inline-start: var(--uc-window-control-space, 0px) !important; + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { + @media screen and (-moz-gtk-csd-reversed-placement: 0) and (max-width: 1100px) { + #nav-bar { + border-inline-start-width: var(--uc-window-drag-space-pre); + border-inline-end-width: var(--uc-window-control-space); + } } } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #nav-bar { - margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-start: var(--uc-window-drag-space-pre) !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-end: var(--uc-window-control-space) !important; + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (-moz-gtk-csd-reversed-placement: 0) and (min-width: 1100px) { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-start: var(--uc-window-drag-space-pre) !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-end: var(--uc-window-control-space) !important; + } + } } } } @@ -6038,43 +5983,7 @@ } } - @supports -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #TabsToolbar { - margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; - } - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @media screen and (min-width: 1100px) { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #TabsToolbar { - margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; - } - } - } - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - #TabsToolbar { - margin-inline-start: var(--uc-window-control-width, 0px) !important; - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @media screen and (min-width: 1100px) { - #TabsToolbar { - margin-inline-start: var(--uc-window-control-width, 0px) !important; - } - } - } - } - } - } - @media (-moz-gtk-csd-available) { - @media (-moz-gtk-csd-reversed-placement) { + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { #nav-bar { border-inline-start-width: var(--uc-window-control-space); @@ -6090,7 +5999,7 @@ } @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { - @media screen and (-moz-gtk-csd-reversed-placement) and (max-width: 1100px) { + @media screen and (max-width: 1100px) { #nav-bar { border-inline-start-width: var(--uc-window-control-space); border-inline-end-width: var(--uc-window-drag-space-pre); @@ -6114,7 +6023,7 @@ } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @media screen and (-moz-gtk-csd-reversed-placement) and (min-width: 1100px) { + @media screen and (min-width: 1100px) { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #nav-bar { margin-inline-start: var(--uc-window-control-space, 0px) !important; @@ -6140,7 +6049,7 @@ } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @media screen and (-moz-gtk-csd-reversed-placement) and (min-width: 1100px) { + @media screen and (min-width: 1100px) { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #TabsToolbar { margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; @@ -6156,7 +6065,7 @@ } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @media screen and (-moz-gtk-csd-reversed-placement) and (min-width: 1100px) { + @media screen and (min-width: 1100px) { #TabsToolbar { margin-inline-start: var(--uc-window-control-width, 0px) !important; } @@ -6165,11 +6074,104 @@ } } } - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, - :root[sizemode="fullscreen"] #window-controls { - right: unset; + @media (-moz-gtk-csd-available) { + @media (-moz-gtk-csd-reversed-placement) { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { + #nav-bar { + border-inline-start-width: var(--uc-window-control-space); + border-inline-end-width: var(--uc-window-drag-space-pre); + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + #nav-bar { + border-inline-start-width: var(--uc-window-control-space); + border-inline-end-width: var(--uc-window-drag-space-pre); + } + } + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { + @media screen and (-moz-gtk-csd-reversed-placement) and (max-width: 1100px) { + #nav-bar { + border-inline-start-width: var(--uc-window-control-space); + border-inline-end-width: var(--uc-window-drag-space-pre); + } + } + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-start: var(--uc-window-control-space, 0px) !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (-moz-gtk-csd-reversed-placement) and (min-width: 1100px) { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-start: var(--uc-window-control-space, 0px) !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; + } + } + } + } + } + } + + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #TabsToolbar { + margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (-moz-gtk-csd-reversed-placement) and (min-width: 1100px) { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #TabsToolbar { + margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; + } + } + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + #TabsToolbar { + margin-inline-start: var(--uc-window-control-width, 0px) !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (-moz-gtk-csd-reversed-placement) and (min-width: 1100px) { + #TabsToolbar { + margin-inline-start: var(--uc-window-control-width, 0px) !important; + } + } + } + } + } + } + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, + :root[sizemode="fullscreen"] #window-controls { + right: unset; + } } } } @@ -6336,7 +6338,7 @@ display: none !important; } } -/*= Tab Bar - Fill width tab =================================================*/ +/*= Tab Bar - Scollmode disabled =============================================*/ @supports -moz-bool-pref("userChrome.tabbar.unscroll") { /* Disable scrollbox */ spacer[part="overflow-start-indicator"] + .scrollbox-clip > scrollbox { @@ -8140,6 +8142,130 @@ display: none !important; } } +/** Nav Bar UI ****************************************************************/ +/*= Nav Bar - Navbar comabine with sidebar===================================*/ +@supports -moz-bool-pref("userChrome.navbar.as_sidebar") { + :root { + --uc-navbar-margin-block: var(--toolbarbutton-inner-padding); + --uc-urlbar-margin-top: calc(var(--uc-navbar-height) + var(--uc-navbar-margin-block)); + --uc-urlbar-container-height: 36px; + --uc-navbar-sideblock-height: calc(var(--uc-urlbar-margin-top) + var(--uc-urlbar-container-height)); + } + + #nav-bar, + #sidebar-box, + #sidebar-header, + #sidebar { + min-width: var(--uc-sidebar-activate-width) !important; + max-width: var(--uc-sidebar-activate-width) !important; + } + + #nav-bar, + #wrapper-urlbar-container, + #urlbar-container { + position: absolute !important; + } + + #nav-bar { + --toolbarbutton-outer-padding: 0px !important; + z-index: 1; + margin-top: calc( + var(--uc-tabbar-height) + var(--uc-bm-height) + var(--uc-menubar-height) + var(--uc-navbar-margin-block) + ); + overflow-y: visible !important; + background: none !important; + box-shadow: none !important; + -moz-window-dragging: drag; + } + + @supports selector(:has(a)) { + :root:has(#sidebar-box[hidden="true"]) #nav-bar { + margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important; + opacity: 0; + visibility: collapse; + } + + :root:has(#sidebar-box[positionend="true"]) #nav-bar { + right: 0; + } + } + @media (prefers-reduced-motion: no-preference) { + @supports -moz-bool-pref("userChrome.decoration.animate") { + @supports not -moz-bool-pref("userChrome.decoration.disable_sidebar_animate") { + #nav-bar { + transition: margin-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, + visibility 0s linear, + margin-top var(--uc-autohide-toolbar-speed) var(--animation-easing-function) + var(--uc-autohide-toolbar-delay), + var(--ext-theme-background-transition) !important; + will-change: margin-inline-start, opacity, visibility, margin-top; + } + + :root:has(#sidebar-box[hidden="true"]) #nav-bar, + #navigator-toolbox:is(:hover, :focus-within) #nav-bar { + transition-delay: 0s, 0s, 0.25s, 0s, 0s !important; + } + } + @supports -moz-bool-pref("userChrome.decoration.disable_sidebar_animate") { + #nav-bar { + transition: margin-top var(--uc-autohide-toolbar-speed) var(--animation-easing-function) + var(--uc-autohide-toolbar-delay), + var(--ext-theme-background-transition) !important; + will-change: margin-top; + } + + #navigator-toolbox:is(:hover, :focus-within) #nav-bar { + transition-delay: 0s !important; + } + } + } + } + #urlbar-container { + top: var(--uc-urlbar-margin-top); + min-width: calc(var(--uc-sidebar-activate-width) - 2 * var(--toolbarbutton-inner-padding)) !important; + } + + #sidebar-header { + margin-top: var(--uc-navbar-sideblock-height) !important; + -moz-window-dragging: drag; + } + + :root[customizing="true"] #browser[collapsed="true"] { + visibility: visible !important; + } + :root[customizing="true"] #browser[collapsed="true"] #appcontent { + visibility: collapse; + } + :root[customizing="true"] #browser[collapsed="true"] #sidebar-box { + position: absolute; + height: 100%; + } + :root[customizing="true"] #browser[collapsed="true"] #sidebar-box[positionend="true"] { + right: 0; + } + :root[customizing="true"] #customization-container { + --uc-customization-conatiner-margin: var(--uc-navbar-height-default); + width: calc(100% - var(--uc-sidebar-activate-width)); + height: calc(100% - var(--uc-customization-conatiner-margin)); + } + @supports -moz-bool-pref("userChrome.hidden.tabbar") { + :root[customizing="true"] #customization-container { + --uc-customization-conatiner-margin: calc(var(--uc-navbar-height-default) - var(--uc-tabbar-height-default)); + } + } + :root[customizing="true"]:has(#sidebar-box:not([positionend="true"])) #customization-container { + margin-inline-start: var(--uc-sidebar-activate-width); + } + :root[customizing="true"]:has(#sidebar-box[positionend="true"]) #customization-container { + margin-inline-end: var(--uc-sidebar-activate-width); + } + :root[customizing="true"] #customization-palette-container { + flex-shrink: 0.35 !important; + } + :root[customizing="true"] #customization-panel-container { + flex-shrink: 0.5 !important; + } +} /** Bookark Bar UI ************************************************************/ @supports -moz-bool-pref("userChrome.bookmarkbar.multi_row") { #PersonalToolbar { @@ -8242,22 +8368,32 @@ } } /** Sidebar UI ****************************************************************/ -@supports -moz-bool-pref("userChrome.sidebar.overlap") or -moz-bool-pref("userChrome.autohide.sidebar") { - #sidebar-box { +@supports -moz-bool-pref("userChrome.sidebar.overlap") or -moz-bool-pref("userChrome.autohide.sidebar") or -moz-bool-pref( + "userChrome.navbar.as_sidebar" + ) { + :root { /* Original min-width: 14em; width: 18em; max-width: 36em; */ --uc-sidebar-width: 40px; - --uc-sidebar-activate-width: 18em; + --uc-sidebar-activate-width: 18rem; --uc-sidebar-activate-width-reverse: calc(-1 * var(--uc-sidebar-activate-width)); --uc-sidebar-fullscreen-width: 4px; - --uc-sidebar-shadow-color: #28282f; --uc-autohide-sidebar-speed: 750ms; --uc-autohide-fullscreen-sidebar-speed: 1s; --uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */ + } + + #sidebar-splitter { + display: none !important; + } +} +@supports -moz-bool-pref("userChrome.sidebar.overlap") or -moz-bool-pref("userChrome.autohide.sidebar") { + #sidebar-box { + --uc-sidebar-shadow-color: #28282f; z-index: 1 !important; position: relative !important; box-shadow: 1px 0px 15px -10px var(--uc-sidebar-shadow-color); @@ -8269,10 +8405,6 @@ #sidebar { display: block; } - - #sidebar-splitter { - display: none !important; - } } @supports -moz-bool-pref("userChrome.sidebar.overlap") { #sidebar-box[positionend="true"] { @@ -8978,15 +9110,22 @@ @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.autohide.navbar") or -moz-bool-pref( "userChrome.autohide.bookmarkbar" ) - or -moz-bool-pref("userChrome.tabbar.one_liner") or -moz-bool-pref("userChrome.hidden.tabbar") { + or -moz-bool-pref("userChrome.tabbar.one_liner") or -moz-bool-pref("userChrome.hidden.tabbar") or -moz-bool-pref("userChrome.navbar.as_sidebar") { :root { - --uc-tabbar-height: var(--tab-min-height); + --uc-tabbar-height: var(--uc-tabbar-height-default); + --uc-tabbar-height-default: var(--tab-min-height); --uc-tabbar-hide-height: calc(-1 * var(--uc-tabbar-height)); - --uc-navbar-height: calc(16px + 2 * (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding))); + --uc-navbar-height: var(--uc-navbar-height-default); + --uc-navbar-height-default: calc( + 16px + 2 * (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) + ); --uc-navbar-hide-height: calc(-1 * var(--uc-navbar-height)); - --uc-bm-height: calc(20px + (2 * var(--bookmark-block-padding, 4px))); + --uc-bm-height: var(--uc-bm-height-default); + --uc-bm-height-default: calc(20px + (2 * var(--bookmark-block-padding, 4px))); /* 20px = 16px + (2px * 2) [margin block] */ --uc-bm-hide-height: calc(-1 * var(--uc-bm-height)); + --uc-titlebar-buttonbox-height: 34px; + --uc-menubar-height: 0px; } @supports -moz-bool-pref("userChrome.hidden.tabbar") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { @@ -9011,9 +9150,50 @@ } @supports selector(:has(a)) { + :root:not([tabsintitlebar]):has(#toolbar-menubar) #nav-bar { + --uc-menubar-height: 1.6rem; + } + @media (-moz-gtk-csd-available) { + :root[tabsintitlebar]:has(#toolbar-menubar[autohide="true"]) #nav-bar { + --uc-menubar-height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin)); + } + } + @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { + :root[tabsintitlebar]:has(#toolbar-menubar[autohide="true"]) #nav-bar { + --uc-menubar-height: calc(var(--tab-min-height) - var(--tabs-navbar-shadow-size)); + } + } + @media (-moz-os-version: windows-win7), + (-moz-platform: windows-win7), + (-moz-os-version: windows-win8), + (-moz-platform: windows-win8) { + :root[tabsintitlebar]:has(#toolbar-menubar[autohide="true"]) #nav-bar { + --uc-menubar-height: calc(var(--tab-min-height) + var(--tab-block-margin)); + } + } + :root[tabsintitlebar]:has(#toolbar-menubar[autohide="false"]) #nav-bar { + --uc-menubar-height: var(--uc-titlebar-buttonbox-height); + } + :root:not([tabsintitlebar]):has(#toolbar-menubar[autohide="true"][inactive="true"]) #nav-bar, + :root[tabsintitlebar]:has(#toolbar-menubar[autohide="true"][inactive="true"]) #nav-bar { + --uc-menubar-height: 0px; + } + #navigator-toolbox:has(#PersonalToolbar[collapsed="true"]) { --uc-bm-height: 0px; } + + @supports -moz-bool-pref("userChrome.navbar.as_sidebar") { + #navigator-toolbox:has(#PersonalToolbar[collapsed="false"]) #nav-bar { + --uc-bm-height: var(--uc-bm-height-default); + } + + @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { + #navigator-toolbox:has(#PersonalToolbar[collapsed="false"]):not(:hover) #nav-bar { + --uc-bm-height: 0px; + } + } + } } } @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.autohide.navbar") or -moz-bool-pref( diff --git a/src/autohide/_common.scss b/src/autohide/_common.scss index 1fde6d6..5b8f2ee 100644 --- a/src/autohide/_common.scss +++ b/src/autohide/_common.scss @@ -3,15 +3,29 @@ --uc-autohide-toolbar-delay: 600ms; } -@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar", "userChrome.tabbar.one_liner", "userChrome.hidden.tabbar") { +@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar", "userChrome.tabbar.one_liner", "userChrome.hidden.tabbar", "userChrome.navbar.as_sidebar") { :root { - --uc-tabbar-height: var(--tab-min-height); // calc((var(--tab-block-margin) * 2) + var(--tab-min-height)); + --uc-tabbar-height: var(--uc-tabbar-height-default); + --uc-tabbar-height-default: var(--tab-min-height); // calc((var(--tab-block-margin) * 2) + var(--tab-min-height)); --uc-tabbar-hide-height: calc(-1 * var(--uc-tabbar-height)); - --uc-navbar-height: calc(16px + 2 * (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding))); + + --uc-navbar-height: var(--uc-navbar-height-default); + --uc-navbar-height-default: calc(16px + 2 * (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding))); --uc-navbar-hide-height: calc(-1 * var(--uc-navbar-height)); - --uc-bm-height: calc(20px + (2 * var(--bookmark-block-padding, 4px))); /* 20px = 16px + (2px * 2) [margin block] */ + + --uc-bm-height: var(--uc-bm-height-default); + --uc-bm-height-default: calc(20px + (2 * var(--bookmark-block-padding, 4px))); /* 20px = 16px + (2px * 2) [margin block] */ --uc-bm-hide-height: calc(-1 * var(--uc-bm-height)); + // Mac - None exist + // https://github.com/mozilla/gecko-dev/blob/92d3050ecbbdd077ffa4cb78e0dffc4bd5021109/browser/base/content/browser.css#L131 + // https://github.com/mozilla/gecko-dev/blob/92d3050ecbbdd077ffa4cb78e0dffc4bd5021109/browser/themes/linux/browser.css#L327 + // https://github.com/mozilla/gecko-dev/blob/92d3050ecbbdd077ffa4cb78e0dffc4bd5021109/browser/themes/windows/browser-aero.css#L14 + // https://github.com/mozilla/gecko-dev/blob/92d3050ecbbdd077ffa4cb78e0dffc4bd5021109/browser/themes/windows/browser.css#L65 + $_menubarPadding: 2px; // menubar padding block 1px + --uc-titlebar-buttonbox-height: #{ 32px + $_menubarPadding }; + --uc-menubar-height: 0px; + @include Option("userChrome.hidden.tabbar") { @include OneLinerNavbarContent() { --uc-tabbar-height: 0px; @@ -22,9 +36,48 @@ } } @include Has { + :root { + &:not([tabsintitlebar]):has(#toolbar-menubar) #nav-bar { + --uc-menubar-height: #{ 1rem + 0.3rem * 2 }; // text 1rem, menu padding 0.3em + } + + &[tabsintitlebar]:has(#toolbar-menubar[autohide="true"]) #nav-bar { + @include OS($linux) { + --uc-menubar-height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin)); + } + @include OS($win10) { + --uc-menubar-height: calc(var(--tab-min-height) - var(--tabs-navbar-shadow-size)); + } + @include OS($win7, $win8) { + --uc-menubar-height: calc(var(--tab-min-height) + var(--tab-block-margin)); + } + } + &[tabsintitlebar]:has(#toolbar-menubar[autohide="false"]) #nav-bar { + --uc-menubar-height: var(--uc-titlebar-buttonbox-height); + } + + &:not([tabsintitlebar]), + &[tabsintitlebar] { + &:has(#toolbar-menubar[autohide="true"][inactive="true"]) #nav-bar { + --uc-menubar-height: 0px; + } + } + } + #navigator-toolbox:has(#PersonalToolbar[collapsed="true"]) { --uc-bm-height: 0px; } + + @include Option("userChrome.navbar.as_sidebar") { + #navigator-toolbox:has(#PersonalToolbar[collapsed="false"]) #nav-bar { + --uc-bm-height: var(--uc-bm-height-default); // Re-calculate to force!! + } + @include Option("userChrome.autohide.bookmarkbar") { + #navigator-toolbox:has(#PersonalToolbar[collapsed="false"]):not(:hover) #nav-bar { + --uc-bm-height: 0px; + } + } + } } } diff --git a/src/leptonChrome.scss b/src/leptonChrome.scss index 66ff8ad..24cbca3 100644 --- a/src/leptonChrome.scss +++ b/src/leptonChrome.scss @@ -39,6 +39,9 @@ /** Tab UI ********************************************************************/ @import "tab/index"; +/** Nav Bar UI ****************************************************************/ +@import "navbar/index"; + /** Bookark Bar UI ************************************************************/ @import "bookmarkbar/index"; diff --git a/src/navbar/_as_sidebar.scss b/src/navbar/_as_sidebar.scss new file mode 100644 index 0000000..7191049 --- /dev/null +++ b/src/navbar/_as_sidebar.scss @@ -0,0 +1,125 @@ +:root { + --uc-navbar-margin-block: var(--toolbarbutton-inner-padding); + --uc-urlbar-margin-top: calc(var(--uc-navbar-height) + var(--uc-navbar-margin-block)); + + --uc-urlbar-container-height: 36px; + --uc-navbar-sideblock-height: calc(var(--uc-urlbar-margin-top) + var(--uc-urlbar-container-height)); +} + +#nav-bar, +#sidebar-box, +#sidebar-header, +#sidebar { + min-width: var(--uc-sidebar-activate-width) !important; + max-width: var(--uc-sidebar-activate-width) !important; +} + +#nav-bar, +#wrapper-urlbar-container, +#urlbar-container { + position: absolute !important; +} + +#nav-bar { + --toolbarbutton-outer-padding: 0px !important; + z-index: 1; + + margin-top: calc(var(--uc-tabbar-height) + var(--uc-bm-height) + var(--uc-menubar-height) + var(--uc-navbar-margin-block)); // drag space + overflow-y: visible !important; // show urlbar + + background: none !important; + box-shadow: none !important; + + -moz-window-dragging: drag; +} +@include Has { + :root:has(#sidebar-box[hidden="true"]) #nav-bar { + margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important; + opacity: 0; + visibility: collapse; + } + :root:has(#sidebar-box[positionend="true"]) #nav-bar { + right: 0; + } +} +@include Animate { + @include Option("userChrome.decoration.animate") { + @include NotOption("userChrome.decoration.disable_sidebar_animate") { + #nav-bar { + transition: margin-inline-start 0.25s var(--animation-easing-function), + opacity 0.25s ease-in-out, + visibility 0s linear, + margin-top var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + var(--ext-theme-background-transition)!important; + will-change: margin-inline-start, opacity, visibility, margin-top; + } + :root:has(#sidebar-box[hidden="true"]) #nav-bar, + #navigator-toolbox:is(:hover, :focus-within) #nav-bar { + transition-delay: 0s, 0s, 0.25s, 0s, 0s !important; + } + } + @include Option("userChrome.decoration.disable_sidebar_animate") { + #nav-bar { + transition: margin-top var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), var(--ext-theme-background-transition) !important; + will-change: margin-top; + } + #navigator-toolbox:is(:hover, :focus-within) #nav-bar { + transition-delay: 0s !important; + } + } + } +} + +#urlbar-container { + top: var(--uc-urlbar-margin-top); + min-width: calc(var(--uc-sidebar-activate-width) - (2 * var(--toolbarbutton-inner-padding))) !important; +} + +#sidebar-header { + margin-top: var(--uc-navbar-sideblock-height) !important; + -moz-window-dragging: drag; +} + +:root[customizing="true"] { + #browser[collapsed="true"] { + visibility: visible !important; + + #appcontent { + visibility: collapse; + } + + #sidebar-box { + position: absolute; + height: 100%; + + &[positionend="true"] { + right: 0; + } + } + } + + #customization-container { + --uc-customization-conatiner-margin: var(--uc-navbar-height-default); + @include Option("userChrome.hidden.tabbar") { + --uc-customization-conatiner-margin: calc(var(--uc-navbar-height-default) - var(--uc-tabbar-height-default)); + } + + width: calc(100% - var(--uc-sidebar-activate-width)); + height: calc(100% - var(--uc-customization-conatiner-margin)); + } + + &:has(#sidebar-box:not([positionend="true"])) #customization-container { + margin-inline-start: var(--uc-sidebar-activate-width); + } + &:has(#sidebar-box[positionend="true"]) #customization-container { + margin-inline-end: var(--uc-sidebar-activate-width); + } + + #customization-palette-container { + flex-shrink: 0.35 !important; + } + #customization-panel-container { + flex-shrink: 0.5 !important; + } +} + diff --git a/src/navbar/_index.scss b/src/navbar/_index.scss new file mode 100644 index 0000000..6d9b9fe --- /dev/null +++ b/src/navbar/_index.scss @@ -0,0 +1,4 @@ +/*= Nav Bar - Navbar comabine with sidebar===================================*/ +@include Option("userChrome.navbar.as_sidebar") { + @import "as_sidebar"; +} diff --git a/src/sidebar/_overlap.scss b/src/sidebar/_overlap.scss index 953cb48..797e026 100644 --- a/src/sidebar/_overlap.scss +++ b/src/sidebar/_overlap.scss @@ -1,20 +1,28 @@ -@include Option("userChrome.sidebar.overlap", "userChrome.autohide.sidebar") { - #sidebar-box { +@include Option("userChrome.sidebar.overlap", "userChrome.autohide.sidebar", "userChrome.navbar.as_sidebar") { + :root { /* Original min-width: 14em; width: 18em; max-width: 36em; */ - --uc-sidebar-width: 40px; - --uc-sidebar-activate-width: 18em; + --uc-sidebar-activate-width: 18rem; --uc-sidebar-activate-width-reverse: calc(-1 * var(--uc-sidebar-activate-width)); --uc-sidebar-fullscreen-width: 4px; - --uc-sidebar-shadow-color: #28282F; --uc-autohide-sidebar-speed: 750ms; --uc-autohide-fullscreen-sidebar-speed: 1s; --uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */ + } + + #sidebar-splitter { + display: none !important; + } +} + +@include Option("userChrome.sidebar.overlap", "userChrome.autohide.sidebar") { + #sidebar-box { + --uc-sidebar-shadow-color: #28282F; z-index: 1 !important; position: relative !important; @@ -28,10 +36,6 @@ #sidebar { display: block; } - - #sidebar-splitter { - display: none !important; - } } @include Option("userChrome.sidebar.overlap") { diff --git a/src/tabbar/_index.scss b/src/tabbar/_index.scss index 0fc9db9..a6691c4 100644 --- a/src/tabbar/_index.scss +++ b/src/tabbar/_index.scss @@ -48,7 +48,7 @@ @import "multi_row"; } -/*= Tab Bar - Fill width tab =================================================*/ +/*= Tab Bar - Scollmode disabled =============================================*/ @include Option("userChrome.tabbar.unscroll") { @import "unscroll"; } diff --git a/src/tabbar/_layout.scss b/src/tabbar/_layout.scss index 9c78c6a..3a57631 100644 --- a/src/tabbar/_layout.scss +++ b/src/tabbar/_layout.scss @@ -35,4 +35,6 @@ } } -@import "layout/navbar_padding"; +@include NotOption("userChrome.navbar.as_sidebar") { + @import "layout/navbar_padding"; +} diff --git a/user.js b/user.js index eb54d54..fe624b4 100644 --- a/user.js +++ b/user.js @@ -169,6 +169,8 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.tab.close_button_at_hover.with_selected", true); // Need close_button_at_hover // user_pref("userChrome.tab.sound_show_label", true); // Need remove sound_hide_label +// user_pref("userChrome.navbar.as_sidebar", true); + // user_pref("userChrome.bookmarkbar.multi_row", true); // user_pref("userChrome.panel.remove_strip", true);