From 8c010c73ac7699f87cc553c456a8dc43d5819a3c Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 1 Jul 2022 17:16:42 +0900 Subject: [PATCH 01/89] Add: Minimal - Centered Bookmarkbar option --- css/leptonChrome.css | 8 ++++++++ src/leptonChrome.scss | 3 +++ src/others/_centered_bookmarkbar.scss | 4 ++++ src/others/_index.scss | 4 ++++ user.js | 2 ++ 5 files changed, 21 insertions(+) create mode 100644 src/others/_centered_bookmarkbar.scss create mode 100644 src/others/_index.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 534436d1..e1f4c4e5 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5166,6 +5166,14 @@ --arrowpanel-menuitem-padding-inline: calc(var(--arrowpanel-menuitem-padding-block) + 8px) !important; } } +/** Other UI ******************************************************************/ +/*= Bookmark Bar - Centered ==================================================*/ +@supports -moz-bool-pref("userChrome.bookmarkbar.centered") { + #PlacesToolbarItems { + display: flex !important; + justify-content: safe center !important; + } +} /** Fullscreen - Overlap toolbar **********************************************/ @supports -moz-bool-pref("userChrome.fullscreen.overlap") { @supports -moz-bool-pref("browser.fullscreen.autohide") { diff --git a/src/leptonChrome.scss b/src/leptonChrome.scss index 353bd454..19a9b835 100644 --- a/src/leptonChrome.scss +++ b/src/leptonChrome.scss @@ -67,6 +67,9 @@ /** Panel UI ******************************************************************/ @import "panel/index"; +/** Other UI ******************************************************************/ +@import "others/index"; + /** Fullscreen - Overlap toolbar **********************************************/ @import "fullscreen/index"; diff --git a/src/others/_centered_bookmarkbar.scss b/src/others/_centered_bookmarkbar.scss new file mode 100644 index 00000000..816d2d2d --- /dev/null +++ b/src/others/_centered_bookmarkbar.scss @@ -0,0 +1,4 @@ +#PlacesToolbarItems { + display: flex !important; + justify-content: safe center !important; +} diff --git a/src/others/_index.scss b/src/others/_index.scss new file mode 100644 index 00000000..ca2d0e56 --- /dev/null +++ b/src/others/_index.scss @@ -0,0 +1,4 @@ +/*= Bookmark Bar - Centered ==================================================*/ +@include Option("userChrome.bookmarkbar.centered") { + @import "centered_bookmarkbar"; +} diff --git a/user.js b/user.js index c5d9fa4c..6498ef93 100644 --- a/user.js +++ b/user.js @@ -103,6 +103,8 @@ user_pref("userChrome.tab.bottom_rounded_corner", true); // user_pref("userChrome.tab.sound_show_label", true); // Need remove sound_hide_label // user_pref("userChrome.tab.centered_label", true); +// user_pref("userChrome.bookmarkbar.centered", true); + // user_pref("userChrome.panel.remove_strip", true); // user_pref("userChrome.panel.full_width_separator", true); // user_pref("userChrome.panel.full_width_padding", true); From d6d26565a51f92dc6e83f78b2147abccd19b4aa3 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 3 Jul 2022 21:25:56 +0900 Subject: [PATCH 02/89] Add: Option - `userChrome.tab.one_line` --- css/leptonChrome.css | 38 ++++++++++++++++++++++++++++++++++++++ src/tabbar/_index.scss | 5 +++++ src/tabbar/_one_line.scss | 34 ++++++++++++++++++++++++++++++++++ user.js | 1 + 4 files changed, 78 insertions(+) create mode 100644 src/tabbar/_one_line.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index e1f4c4e5..26e5930e 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -3958,6 +3958,44 @@ } } } +/*= Tab Bar - Oneliner =======================================================*/ +@supports -moz-bool-pref("userChrome.tab.one_line") { + #navigator-toolbox { + display: flex !important; + flex-wrap: wrap; + background-color: var(--toolbar-bgcolor) !important; + } + + :root { + --navbar-size: 40vw; + } + + #titlebar, + #nav-bar, + #PersonalToolbar, + #tab-notification-deck-template { + flex-basis: 100vw; + } + + #TabsToolbar { + margin-left: var(--navbar-size) !important; + } + + #nav-bar { + margin-right: calc(100vw - var(--navbar-size)) !important; + margin-top: calc(-1 * var(--tab-min-height)) !important; + height: var(--tab-min-height) !important; + } + + #urlbar-container { + min-width: 0px !important; + } + + toolbarspring.chromeclass-toolbar-additional, + .titlebar-spacer { + display: none !important; + } +} /*= Tab Bar - Connect to window ==============================================*/ @supports -moz-bool-pref("userChrome.tab.connect_to_window") { .tab-background { diff --git a/src/tabbar/_index.scss b/src/tabbar/_index.scss index 4b180550..0456f43e 100644 --- a/src/tabbar/_index.scss +++ b/src/tabbar/_index.scss @@ -23,6 +23,11 @@ @import "tabs_on_bottom"; } +/*= Tab Bar - Oneliner =======================================================*/ +@include Option("userChrome.tab.one_line") { + @import "one_line"; +} + /*= Tab Bar - Connect to window ==============================================*/ @include Option("userChrome.tab.connect_to_window") { @import "connect_to_window"; diff --git a/src/tabbar/_one_line.scss b/src/tabbar/_one_line.scss new file mode 100644 index 00000000..4ea9ff8c --- /dev/null +++ b/src/tabbar/_one_line.scss @@ -0,0 +1,34 @@ +#navigator-toolbox { + display: flex !important; + flex-wrap: wrap; + background-color: var(--toolbar-bgcolor) !important; +} + +:root { + --navbar-size: 40vw; +} + +#titlebar, +#nav-bar, +#PersonalToolbar, +#tab-notification-deck-template { + flex-basis: 100vw; +} + +#TabsToolbar { + margin-left: var(--navbar-size) !important; +} +#nav-bar { + margin-right: calc(100vw - var(--navbar-size)) !important; + margin-top: calc(-1 * var(--tab-min-height)) !important; + height: var(--tab-min-height) !important; +} + +#urlbar-container { + min-width: 0px !important; +} + +toolbarspring.chromeclass-toolbar-additional, +.titlebar-spacer { + display: none !important; +} diff --git a/user.js b/user.js index 6498ef93..18170066 100644 --- a/user.js +++ b/user.js @@ -95,6 +95,7 @@ user_pref("userChrome.tab.bottom_rounded_corner", true); // user_pref("userChrome.tab.on_bottom", true); // user_pref("userChrome.tab.on_bottom.above_bookmark", true); // Need on_bottom // user_pref("userChrome.tab.on_bottom.menubar_on_top", true); // Need on_bottom +// user_pref("userChrome.tab.one_line", true); // user_pref("userChrome.tab.always_show_tab_icon", true); // user_pref("userChrome.tab.close_button_at_pinned", true); // user_pref("userChrome.tab.close_button_at_pinned.always", true); From c9b690a65176c4440fea1e224bb38f2b6ecc3bd6 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 4 Jul 2022 02:28:57 +0900 Subject: [PATCH 03/89] Fix: One Liner - Clean & Pre spacer --- css/leptonChrome.css | 47 ++++++++++++++++++--------------- src/padding/_tabbar_width.scss | 8 ++++-- src/tabbar/_one_line.scss | 28 +++++++++----------- src/tabbar/_tabs_on_bottom.scss | 4 +-- 4 files changed, 47 insertions(+), 40 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 26e5930e..b20429ef 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -3015,14 +3015,19 @@ } @supports -moz-bool-pref("userChrome.padding.tabbar_width") { /* Titlebar Space */ - .titlebar-spacer[type="pre-tabs"] { - width: 30px !important; + :root { + --uc-title-pre-spacer: 30px; + /* Original: 40px */ + --uc-title-post-spacer: 25px; /* Original: 40px */ } + .titlebar-spacer[type="pre-tabs"] { + width: var(--uc-title-pre-spacer) !important; + } + .titlebar-spacer[type="post-tabs"] { - width: 25px !important; - /* Original: 40px */ + width: var(--uc-title-post-spacer) !important; } /* Tabbar Buttons */ @@ -3822,8 +3827,8 @@ :root:is([tabsintitlebar], [sizemode="fullscreen"]) { --uc-window-control-width: 84px; /* 84px is default value of linux */ - --uc-window-drag-space-pre: 30px; - --uc-window-drag-space-post: 25px; + --uc-window-drag-space-pre: var(--uc-title-pre-spacer); + --uc-window-drag-space-post: var(--uc-title-post-spacer); } :root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) { @@ -3960,29 +3965,20 @@ } /*= Tab Bar - Oneliner =======================================================*/ @supports -moz-bool-pref("userChrome.tab.one_line") { - #navigator-toolbox { - display: flex !important; - flex-wrap: wrap; - background-color: var(--toolbar-bgcolor) !important; - } - :root { - --navbar-size: 40vw; + --uc-navbar-size: 40vw; } - #titlebar, - #nav-bar, - #PersonalToolbar, - #tab-notification-deck-template { - flex-basis: 100vw; + #navigator-toolbox { + background-color: var(--toolbar-bgcolor) !important; } #TabsToolbar { - margin-left: var(--navbar-size) !important; + margin-left: var(--uc-navbar-size) !important; } #nav-bar { - margin-right: calc(100vw - var(--navbar-size)) !important; + margin-right: calc(100vw - var(--uc-navbar-size)) !important; margin-top: calc(-1 * var(--tab-min-height)) !important; height: var(--tab-min-height) !important; } @@ -3992,9 +3988,18 @@ } toolbarspring.chromeclass-toolbar-additional, - .titlebar-spacer { + .titlebar-spacer[type="pre-tabs"] { display: none !important; } + + :root:not([sizemode="maximized"]) #nav-bar { + padding-inline-start: 40px !important; + } + @supports -moz-bool-pref("userChrome.padding.tabbar_width") { + :root:not([sizemode="maximized"]) #nav-bar { + padding-inline-start: var(--uc-title-pre-spacer) !important; + } + } } /*= Tab Bar - Connect to window ==============================================*/ @supports -moz-bool-pref("userChrome.tab.connect_to_window") { diff --git a/src/padding/_tabbar_width.scss b/src/padding/_tabbar_width.scss index 52b2b7ec..a0e58bdd 100644 --- a/src/padding/_tabbar_width.scss +++ b/src/padding/_tabbar_width.scss @@ -1,9 +1,13 @@ /* Titlebar Space */ +:root { + --uc-title-pre-spacer: 30px; /* Original: 40px */ + --uc-title-post-spacer: 25px; /* Original: 40px */ +} .titlebar-spacer[type="pre-tabs"] { - width: 30px !important; /* Original: 40px */ + width: var(--uc-title-pre-spacer) !important; } .titlebar-spacer[type="post-tabs"] { - width: 25px !important; /* Original: 40px */ + width: var(--uc-title-post-spacer) !important; } /* Tabbar Buttons */ diff --git a/src/tabbar/_one_line.scss b/src/tabbar/_one_line.scss index 4ea9ff8c..695e2242 100644 --- a/src/tabbar/_one_line.scss +++ b/src/tabbar/_one_line.scss @@ -1,25 +1,16 @@ -#navigator-toolbox { - display: flex !important; - flex-wrap: wrap; - background-color: var(--toolbar-bgcolor) !important; -} - :root { - --navbar-size: 40vw; + --uc-navbar-size: 40vw; } -#titlebar, -#nav-bar, -#PersonalToolbar, -#tab-notification-deck-template { - flex-basis: 100vw; +#navigator-toolbox { + background-color: var(--toolbar-bgcolor) !important; } #TabsToolbar { - margin-left: var(--navbar-size) !important; + margin-left: var(--uc-navbar-size) !important; } #nav-bar { - margin-right: calc(100vw - var(--navbar-size)) !important; + margin-right: calc(100vw - var(--uc-navbar-size)) !important; margin-top: calc(-1 * var(--tab-min-height)) !important; height: var(--tab-min-height) !important; } @@ -29,6 +20,13 @@ } toolbarspring.chromeclass-toolbar-additional, -.titlebar-spacer { +.titlebar-spacer[type="pre-tabs"] { display: none !important; } + +:root:not([sizemode="maximized"]) #nav-bar { + padding-inline-start: 40px !important; + @include Option("userChrome.padding.tabbar_width") { + padding-inline-start: var(--uc-title-pre-spacer) !important; + } +} diff --git a/src/tabbar/_tabs_on_bottom.scss b/src/tabbar/_tabs_on_bottom.scss index f197f8aa..4b06545b 100644 --- a/src/tabbar/_tabs_on_bottom.scss +++ b/src/tabbar/_tabs_on_bottom.scss @@ -117,8 +117,8 @@ See the above repository for updates as well as full license text. */ } :root:is([tabsintitlebar], [sizemode="fullscreen"]) { --uc-window-control-width: 84px; /* 84px is default value of linux */ - --uc-window-drag-space-pre: 30px; - --uc-window-drag-space-post: 25px; + --uc-window-drag-space-pre: var(--uc-title-pre-spacer); // 30px + --uc-window-drag-space-post: var(--uc-title-post-spacer); // 25px } :root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) { --uc-window-drag-space-pre: 0px; /* Remove pre space */ From f1bf9345235f07df8e885758f0ae8e1fccb789f1 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 5 Jul 2022 04:19:57 +0900 Subject: [PATCH 04/89] Add: One Liner - `userChrome.tab.one_line.tabbar_first` option --- css/leptonChrome.css | 353 ++++++++++++++----------- src/tabbar/_index.scss | 5 + src/tabbar/_layout.scss | 5 + src/tabbar/_one_line.scss | 32 ++- src/tabbar/_tabs_on_bottom.scss | 129 --------- src/tabbar/layout/_navbar_padding.scss | 67 +++++ src/tabbar/layout/_window_control.scss | 79 ++++++ user.js | 1 + 8 files changed, 373 insertions(+), 298 deletions(-) create mode 100644 src/tabbar/_layout.scss create mode 100644 src/tabbar/layout/_navbar_padding.scss create mode 100644 src/tabbar/layout/_window_control.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index b20429ef..70f0ca82 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -3727,153 +3727,6 @@ } } } - /*= Windows Control - Move to toolbar ========================================*/ - :root { - --uc-titlebar-padding: 0px; - } - - @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) { - :root[sizemode="maximized"][tabsintitlebar] { - --uc-titlebar-padding: 8px; - } - } - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, - #TabsToolbar > .titlebar-buttonbox-container { - position: fixed; - display: block; - top: var(--uc-titlebar-padding); - right: 0; - height: 40px; - } - - /* where window controls are on left */ - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - :root { - --uc-titlebar-padding: 0px !important; - } - - .titlebar-buttonbox-container { - left: 0; - right: unset !important; - } - } - #navigator-toolbox { - padding-top: var(--uc-titlebar-padding) !important; - } - - :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container { - height: 32px; - } - - #toolbar-menubar[inactive] > .titlebar-buttonbox-container { - opacity: 0; - } - - .titlebar-buttonbox-container > .titlebar-buttonbox { - height: 100%; - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - .titlebar-buttonbox-container > .titlebar-buttonbox { - margin-block: 10px; - } - } - - /* At Full Screen */ - :root[sizemode="fullscreen"] #window-controls { - position: fixed; - display: flex; - top: 0; - right: 0; - height: 40px; - } - - :root[uidensity="compact"][sizemode="fullscreen"] #window-controls { - height: 32px; - } - - @supports -moz-bool-pref("browser.fullscreen.autohide") { - :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { - visibility: hidden; - } - } - /* At Activated Menubar */ - :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) - #toolbar-menubar:not([autohide="true"]) - + #TabsToolbar - > .titlebar-buttonbox-container { - display: block !important; - } - - :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { - visibility: hidden; - } - - /*= 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"] */ - } - - :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); - --uc-window-drag-space-post: var(--uc-title-post-spacer); - } - - :root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) { - --uc-window-drag-space-pre: 0px; - /* Remove pre space */ - } - - #nav-bar { - border-inline-start-width: var(--uc-window-drag-space-pre); - border-inline-end-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); - border-inline-style: solid !important; - border-inline-color: var(--toolbar-bgcolor); - } - - /* 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; - } - - :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { - border-inline-start-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); - border-inline-end-width: var(--uc-window-drag-space-pre); - } - - :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, - :root[sizemode="fullscreen"] #window-controls { - right: unset; - } - } /*= Menubar - Always on top ==================================================*/ @supports -moz-bool-pref("userChrome.tab.on_bottom.menubar_on_top") { /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0 @@ -3967,18 +3820,14 @@ @supports -moz-bool-pref("userChrome.tab.one_line") { :root { --uc-navbar-size: 40vw; + --uc-tabbar-size: calc(100vw - var(--uc-navbar-size)); } #navigator-toolbox { background-color: var(--toolbar-bgcolor) !important; } - #TabsToolbar { - margin-left: var(--uc-navbar-size) !important; - } - #nav-bar { - margin-right: calc(100vw - var(--uc-navbar-size)) !important; margin-top: calc(-1 * var(--tab-min-height)) !important; height: var(--tab-min-height) !important; } @@ -3987,17 +3836,203 @@ min-width: 0px !important; } - toolbarspring.chromeclass-toolbar-additional, - .titlebar-spacer[type="pre-tabs"] { + toolbarspring.chromeclass-toolbar-additional { display: none !important; } - :root:not([sizemode="maximized"]) #nav-bar { - padding-inline-start: 40px !important; + @supports not -moz-bool-pref("userChrome.tab.one_line.tabbar_first") { + #TabsToolbar { + margin-inline-start: var(--uc-navbar-size) !important; + } + + #nav-bar { + margin-inline-end: var(--uc-tabbar-size) !important; + } + + .titlebar-spacer[type="pre-tabs"] { + display: none !important; + } } - @supports -moz-bool-pref("userChrome.padding.tabbar_width") { - :root:not([sizemode="maximized"]) #nav-bar { - padding-inline-start: var(--uc-title-pre-spacer) !important; + @supports -moz-bool-pref("userChrome.tab.one_line.tabbar_first") { + #TabsToolbar { + margin-inline-end: var(--uc-navbar-size) !important; + } + + #nav-bar { + margin-inline-start: var(--uc-tabbar-size) !important; + } + + .titlebar-spacer[type="post-tabs"] { + display: none !important; + } + } +} +/*= Tab Bar - Shared Layout ==================================================*/ +@supports -moz-bool-pref("userChrome.tab.on_bottom") or -moz-bool-pref("userChrome.tab.one_line") { + @supports -moz-bool-pref("userChrome.tab.on_bottom") or -moz-bool-pref("userChrome.tab.one_line.tabbar_first") { + /*= Windows Control - Move to toolbar ========================================*/ + /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 + See the above repository for updates as well as full license text. */ + :root { + --uc-titlebar-padding: 0px; + } + + @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) { + :root[sizemode="maximized"][tabsintitlebar] { + --uc-titlebar-padding: 8px; + } + } + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, + #TabsToolbar > .titlebar-buttonbox-container { + position: fixed; + display: block; + top: var(--uc-titlebar-padding); + right: 0; + height: 40px; + z-index: 1; + } + + /* where window controls are on left */ + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + :root { + --uc-titlebar-padding: 0px !important; + } + + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + #navigator-toolbox { + padding-top: var(--uc-titlebar-padding) !important; + } + + :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container { + height: 32px; + } + + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + opacity: 0; + } + + .titlebar-buttonbox-container > .titlebar-buttonbox { + height: 100%; + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + .titlebar-buttonbox-container > .titlebar-buttonbox { + margin-block: 10px; + } + } + + /* At Full Screen */ + :root[sizemode="fullscreen"] #window-controls { + position: fixed; + display: flex; + top: 0; + right: 0; + height: 40px; + } + + :root[uidensity="compact"][sizemode="fullscreen"] #window-controls { + height: 32px; + } + + @supports -moz-bool-pref("browser.fullscreen.autohide") { + :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { + visibility: hidden; + } + } + /* At Activated Menubar */ + :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) + #toolbar-menubar:not([autohide="true"]) + + #TabsToolbar + > .titlebar-buttonbox-container { + display: block !important; + } + + :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { + visibility: hidden; + } + } + /*= 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"] */ + } + + :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.tab.one_line") { + @supports not -moz-bool-pref("userChrome.tab.one_line.tabbar_first") { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + /* Don't need window control */ + --uc-window-control-width: 0px; + --uc-window-drag-space-post: 0px; + } + } + @supports -moz-bool-pref("userChrome.tab.one_line.tabbar_first") { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + /* Don't need pre spacer */ + --uc-window-drag-space-pre: 0px; + } + } + } + #nav-bar { + border-inline-start-width: var(--uc-window-drag-space-pre); + border-inline-end-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); + border-inline-style: solid !important; + border-inline-color: var(--toolbar-bgcolor); + } + + /* 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; + } + + :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { + border-inline-start-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); + border-inline-end-width: var(--uc-window-drag-space-pre); + } + + :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, + :root[sizemode="fullscreen"] #window-controls { + right: unset; } } } diff --git a/src/tabbar/_index.scss b/src/tabbar/_index.scss index 0456f43e..b59becc2 100644 --- a/src/tabbar/_index.scss +++ b/src/tabbar/_index.scss @@ -28,6 +28,11 @@ @import "one_line"; } +/*= Tab Bar - Shared Layout ==================================================*/ +@include Option("userChrome.tab.on_bottom", "userChrome.tab.one_line") { + @import "layout"; +} + /*= Tab Bar - Connect to window ==============================================*/ @include Option("userChrome.tab.connect_to_window") { @import "connect_to_window"; diff --git a/src/tabbar/_layout.scss b/src/tabbar/_layout.scss new file mode 100644 index 00000000..37c5c81c --- /dev/null +++ b/src/tabbar/_layout.scss @@ -0,0 +1,5 @@ +@include Option("userChrome.tab.on_bottom", "userChrome.tab.one_line.tabbar_first") { + @import "layout/window_control"; +} + +@import "layout/navbar_padding"; diff --git a/src/tabbar/_one_line.scss b/src/tabbar/_one_line.scss index 695e2242..15081654 100644 --- a/src/tabbar/_one_line.scss +++ b/src/tabbar/_one_line.scss @@ -1,16 +1,13 @@ :root { --uc-navbar-size: 40vw; + --uc-tabbar-size: calc(100vw - var(--uc-navbar-size)); } #navigator-toolbox { background-color: var(--toolbar-bgcolor) !important; } -#TabsToolbar { - margin-left: var(--uc-navbar-size) !important; -} #nav-bar { - margin-right: calc(100vw - var(--uc-navbar-size)) !important; margin-top: calc(-1 * var(--tab-min-height)) !important; height: var(--tab-min-height) !important; } @@ -19,14 +16,29 @@ min-width: 0px !important; } -toolbarspring.chromeclass-toolbar-additional, -.titlebar-spacer[type="pre-tabs"] { +toolbarspring.chromeclass-toolbar-additional { display: none !important; } -:root:not([sizemode="maximized"]) #nav-bar { - padding-inline-start: 40px !important; - @include Option("userChrome.padding.tabbar_width") { - padding-inline-start: var(--uc-title-pre-spacer) !important; +@include NotOption("userChrome.tab.one_line.tabbar_first") { + #TabsToolbar { + margin-inline-start: var(--uc-navbar-size) !important; + } + #nav-bar { + margin-inline-end: var(--uc-tabbar-size) !important; + } + .titlebar-spacer[type="pre-tabs"] { + display: none !important; + } +} +@include Option("userChrome.tab.one_line.tabbar_first") { + #TabsToolbar { + margin-inline-end: var(--uc-navbar-size) !important; + } + #nav-bar { + margin-inline-start: var(--uc-tabbar-size) !important; + } + .titlebar-spacer[type="post-tabs"] { + display: none !important; } } diff --git a/src/tabbar/_tabs_on_bottom.scss b/src/tabbar/_tabs_on_bottom.scss index 4b06545b..4e7943a8 100644 --- a/src/tabbar/_tabs_on_bottom.scss +++ b/src/tabbar/_tabs_on_bottom.scss @@ -32,135 +32,6 @@ See the above repository for updates as well as full license text. */ } } -/*= Windows Control - Move to toolbar ========================================*/ -:root { - --uc-titlebar-padding: 0px; -} - -@include OS($win) { - :root[sizemode="maximized"][tabsintitlebar]{ - --uc-titlebar-padding: 8px; - } -} - -#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, -#TabsToolbar > .titlebar-buttonbox-container{ - position: fixed; - display: block; - top: var(--uc-titlebar-padding); - right:0; - height: 40px; -} - -/* where window controls are on left */ -@include OS($mac) { - :root{ - --uc-titlebar-padding: 0px !important; - } - .titlebar-buttonbox-container{ - left:0; - right: unset !important; - } -} - -#navigator-toolbox { - padding-top: var(--uc-titlebar-padding) !important; -} - -:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container { - height: 32px; -} - -#toolbar-menubar[inactive] > .titlebar-buttonbox-container { - opacity: 0; -} - -.titlebar-buttonbox-container > .titlebar-buttonbox { - height: 100%; - @include OS($mac) { - margin-block: 10px; - } -} - -/* At Full Screen */ -:root[sizemode="fullscreen"] #window-controls { - position: fixed; - display: flex; - top: 0; - right: 0; - height: 40px; -} -:root[uidensity="compact"][sizemode="fullscreen"] #window-controls { - height: 32px; -} - -@include Option("browser.fullscreen.autohide") { - :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { - visibility: hidden; - } -} - -/* At Activated Menubar */ -:root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container { - display: block !important; -} -:root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { - visibility: hidden; -} - -/*= 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"] */ -} -: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); // 30px - --uc-window-drag-space-post: var(--uc-title-post-spacer); // 25px -} -:root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) { - --uc-window-drag-space-pre: 0px; /* Remove pre space */ -} - -#nav-bar { - border-inline-start-width: var(--uc-window-drag-space-pre); - border-inline-end-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); - - border-inline-style: solid !important; - border-inline-color: var(--toolbar-bgcolor); -} - -/* 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 { - border-inline-start-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); - border-inline-end-width: var(--uc-window-drag-space-pre); - } - :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, - :root[sizemode="fullscreen"] #window-controls { - right: unset; - } -} - /*= Menubar - Always on top ==================================================*/ @include Option("userChrome.tab.on_bottom.menubar_on_top") { /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0 diff --git a/src/tabbar/layout/_navbar_padding.scss b/src/tabbar/layout/_navbar_padding.scss new file mode 100644 index 00000000..9926444d --- /dev/null +++ b/src/tabbar/layout/_navbar_padding.scss @@ -0,0 +1,67 @@ +/*= 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"] */ +} +: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 */ +} +@include Option("userChrome.tab.one_line") { + @include NotOption("userChrome.tab.one_line.tabbar_first") { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + /* Don't need window control */ + --uc-window-control-width: 0px; + --uc-window-drag-space-post: 0px; + } + } + @include Option("userChrome.tab.one_line.tabbar_first") { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + /* Don't need pre spacer */ + --uc-window-drag-space-pre: 0px; + } + } +} + +#nav-bar { + border-inline-start-width: var(--uc-window-drag-space-pre); + border-inline-end-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); + + border-inline-style: solid !important; + border-inline-color: var(--toolbar-bgcolor); +} + +/* 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 { + border-inline-start-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); + border-inline-end-width: var(--uc-window-drag-space-pre); + } + :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, + :root[sizemode="fullscreen"] #window-controls { + right: unset; + } +} diff --git a/src/tabbar/layout/_window_control.scss b/src/tabbar/layout/_window_control.scss new file mode 100644 index 00000000..c309d49f --- /dev/null +++ b/src/tabbar/layout/_window_control.scss @@ -0,0 +1,79 @@ +/*= Windows Control - Move to toolbar ========================================*/ +/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 +See the above repository for updates as well as full license text. */ +:root { + --uc-titlebar-padding: 0px; +} + +@include OS($win) { + :root[sizemode="maximized"][tabsintitlebar]{ + --uc-titlebar-padding: 8px; + } +} + +#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, +#TabsToolbar > .titlebar-buttonbox-container { + position: fixed; + display: block; + top: var(--uc-titlebar-padding); + right:0; + height: 40px; + z-index: 1; +} + +/* where window controls are on left */ +@include OS($mac) { + :root{ + --uc-titlebar-padding: 0px !important; + } + .titlebar-buttonbox-container{ + left:0; + right: unset !important; + } +} + +#navigator-toolbox { + padding-top: var(--uc-titlebar-padding) !important; +} + +:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container { + height: 32px; +} + +#toolbar-menubar[inactive] > .titlebar-buttonbox-container { + opacity: 0; +} + +.titlebar-buttonbox-container > .titlebar-buttonbox { + height: 100%; + @include OS($mac) { + margin-block: 10px; + } +} + +/* At Full Screen */ +:root[sizemode="fullscreen"] #window-controls { + position: fixed; + display: flex; + top: 0; + right: 0; + height: 40px; +} +:root[uidensity="compact"][sizemode="fullscreen"] #window-controls { + height: 32px; +} + +@include Option("browser.fullscreen.autohide") { + :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { + visibility: hidden; + } +} + +/* At Activated Menubar */ +:root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container { + display: block !important; +} +:root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { + visibility: hidden; +} + diff --git a/user.js b/user.js index 18170066..ff540d0e 100644 --- a/user.js +++ b/user.js @@ -96,6 +96,7 @@ user_pref("userChrome.tab.bottom_rounded_corner", true); // user_pref("userChrome.tab.on_bottom.above_bookmark", true); // Need on_bottom // user_pref("userChrome.tab.on_bottom.menubar_on_top", true); // Need on_bottom // user_pref("userChrome.tab.one_line", true); +// user_pref("userChrome.tab.one_line.tabbar_first", true); // user_pref("userChrome.tab.always_show_tab_icon", true); // user_pref("userChrome.tab.close_button_at_pinned", true); // user_pref("userChrome.tab.close_button_at_pinned.always", true); From f5c5c011e997ae9b4eeaba6f354d2135fc75bf72 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 6 Jul 2022 01:27:57 +0900 Subject: [PATCH 05/89] Add: Auto Hide - forward button --- css/leptonChrome.css | 19 +++++++++++++++++++ src/autohide/_forward_button.scss | 16 ++++++++++++++++ src/autohide/_index.scss | 3 +++ src/leptonChrome.scss | 3 +++ user.js | 2 ++ 5 files changed, 43 insertions(+) create mode 100644 src/autohide/_forward_button.scss create mode 100644 src/autohide/_index.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 70f0ca82..cb5c5b72 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5282,6 +5282,25 @@ /* Makes the bookmarks toolbar visible if enabled */ } } +/** Auto Hide *****************************************************************/ +@supports -moz-bool-pref("userChrome.autohide.forward_button") { + #forward-button[disabled="true"] { + margin-left: -36px !important; + opacity: 0 !important; + pointer-events: none; + } + + @media (prefers-reduced-motion: no-preference) { + #forward-button { + transition-property: background-color, opacity, margin-left !important; + } + + #forward-button[disabled="true"] { + transition: background-color 1s var(--animation-easing-function), opacity 1s var(--animation-easing-function), + margin-left 0.5s ease !important; + } + } +} /** Library - Icons Replace ***************************************************/ @supports -moz-bool-pref("userChrome.icon.library") { /*= Standard Folder - More Visible ===========================================*/ diff --git a/src/autohide/_forward_button.scss b/src/autohide/_forward_button.scss new file mode 100644 index 00000000..50245249 --- /dev/null +++ b/src/autohide/_forward_button.scss @@ -0,0 +1,16 @@ +#forward-button[disabled="true"] { + margin-left: -36px !important; + opacity: 0 !important; + pointer-events: none; +} + +@include Animate { + #forward-button { + transition-property: background-color, opacity, margin-left !important; + } + #forward-button[disabled="true"] { + transition: background-color 1s var(--animation-easing-function), + opacity 1s var(--animation-easing-function), + margin-left 0.5s ease !important; + } +} diff --git a/src/autohide/_index.scss b/src/autohide/_index.scss new file mode 100644 index 00000000..312f6893 --- /dev/null +++ b/src/autohide/_index.scss @@ -0,0 +1,3 @@ +@include Option("userChrome.autohide.forward_button") { + @import "forward_button"; +} diff --git a/src/leptonChrome.scss b/src/leptonChrome.scss index 19a9b835..fbce8b16 100644 --- a/src/leptonChrome.scss +++ b/src/leptonChrome.scss @@ -73,6 +73,9 @@ /** Fullscreen - Overlap toolbar **********************************************/ @import "fullscreen/index"; +/** Auto Hide *****************************************************************/ +@import "autohide/index"; + /** Library - Icons Replace ***************************************************/ @include Option("userChrome.icon.library") { @import "library/chrome"; diff --git a/user.js b/user.js index ff540d0e..ed9b9b67 100644 --- a/user.js +++ b/user.js @@ -70,6 +70,8 @@ user_pref("userChrome.tab.bottom_rounded_corner", true); // user_pref("userChrome.theme.proton_color.dark_blue_accent", true); +// user_pref("userChrome.autohide.forward_button", true); + // user_pref("userChrome.rounding.square_button", true); // user_pref("userChrome.rounding.square_panel", true); // user_pref("userChrome.rounding.square_panelitem", true); From 8ffcd5469786ab1e6806e190a9b1a732a8aba0fc Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 7 Jul 2022 10:38:33 +0900 Subject: [PATCH 06/89] Fix: Centered Label - overflowing and unwinding Always include `padding-inline-end` at label self. It's prevent recalculation. --- css/leptonChrome.css | 5 +++-- src/tabbar/_centered_label.scss | 4 ++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index cb5c5b72..8e0c9254 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5182,8 +5182,9 @@ #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([selected]):not(:hover, [pinned]) - .tab-label-container:not([textoverflow]) { - margin-inline-end: 19px; + .tab-label-container + label { + padding-inline-end: 19px; } } } diff --git a/src/tabbar/_centered_label.scss b/src/tabbar/_centered_label.scss index c7ebae40..6537d2fd 100644 --- a/src/tabbar/_centered_label.scss +++ b/src/tabbar/_centered_label.scss @@ -18,7 +18,7 @@ #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not(:hover,[pinned]) .tab-label-container:not([textoverflow]) { margin-inline-end: 1px; } - #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([selected]):not(:hover, [pinned]) .tab-label-container:not([textoverflow]) { - margin-inline-end: 19px; + #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([selected]):not(:hover, [pinned]) .tab-label-container label { + padding-inline-end: 19px; } } From 973100f136cbf83b1390191875d6a9b3e93b1d23 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 8 Jul 2022 11:24:39 +0900 Subject: [PATCH 07/89] Add: Centerd - `userChrome.tab.centered_content` --- src/tabbar/_centerted.scss | 10 ++++++++++ src/tabbar/_index.scss | 6 ++---- src/tabbar/centered/_content.scss | 7 +++++++ src/tabbar/centered/_label.scss | 15 +++++++++++++++ .../_layout.scss} | 11 ----------- user.js | 1 + 6 files changed, 35 insertions(+), 15 deletions(-) create mode 100644 src/tabbar/_centerted.scss create mode 100644 src/tabbar/centered/_content.scss create mode 100644 src/tabbar/centered/_label.scss rename src/tabbar/{_centered_label.scss => centered/_layout.scss} (68%) diff --git a/src/tabbar/_centerted.scss b/src/tabbar/_centerted.scss new file mode 100644 index 00000000..dc90af52 --- /dev/null +++ b/src/tabbar/_centerted.scss @@ -0,0 +1,10 @@ +@include Option("userChrome.tab.centered_content", "userChrome.tab.centered_label") { + @import "centered/layout"; +} + +@include Option("userChrome.tab.centered_content") { + @import "centered/content"; +} +@include Option("userChrome.tab.centered_label") { + @import "centered/label"; +} diff --git a/src/tabbar/_index.scss b/src/tabbar/_index.scss index b59becc2..e6d00963 100644 --- a/src/tabbar/_index.scss +++ b/src/tabbar/_index.scss @@ -73,7 +73,5 @@ @import "crashed_tab"; } -/*= Tab Label - Make to Center ===============================================*/ -@include Option("userChrome.tab.centered_label") { - @import "centered_label"; -} +/*= Tab Centered - Make to Center ============================================*/ +@import "centered"; diff --git a/src/tabbar/centered/_content.scss b/src/tabbar/centered/_content.scss new file mode 100644 index 00000000..e735af6d --- /dev/null +++ b/src/tabbar/centered/_content.scss @@ -0,0 +1,7 @@ +/* Based on https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/centered_tab_content.css */ + +.tab-content:not([pinned])::before { + display: -moz-box; + content: ""; + -moz-box-flex: 1; +} diff --git a/src/tabbar/centered/_label.scss b/src/tabbar/centered/_label.scss new file mode 100644 index 00000000..b5b25d0c --- /dev/null +++ b/src/tabbar/centered/_label.scss @@ -0,0 +1,15 @@ +/* Based on https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/centered_tab_label.css */ +.tab-label-container { + display: grid; + justify-content: safe center; + align-items: safe center; +} +.tab-label, +.tab-secondary-label { + overflow: hidden; +} + +.tabbrowser-tab[selected]:not(:hover) .tab-label-container:not([textoverflow]), +.tabbrowser-tab:not(:hover,[pinned]) .tab-label-container:not([textoverflow]) { + margin-inline-end: 5px; +} diff --git a/src/tabbar/_centered_label.scss b/src/tabbar/centered/_layout.scss similarity index 68% rename from src/tabbar/_centered_label.scss rename to src/tabbar/centered/_layout.scss index 6537d2fd..bbeb6b71 100644 --- a/src/tabbar/_centered_label.scss +++ b/src/tabbar/centered/_layout.scss @@ -1,14 +1,3 @@ -/* Based on https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/centered_tab_label.css */ -.tab-label-container { - display: grid; - justify-content: safe center; - align-items: safe center; -} -.tab-label, -.tab-secondary-label { - overflow: hidden; -} - .tabbrowser-tab[selected]:not(:hover) .tab-label-container:not([textoverflow]), .tabbrowser-tab:not(:hover,[pinned]) .tab-label-container:not([textoverflow]) { margin-inline-end: 5px; diff --git a/user.js b/user.js index ed9b9b67..1694895e 100644 --- a/user.js +++ b/user.js @@ -105,6 +105,7 @@ user_pref("userChrome.tab.bottom_rounded_corner", true); // user_pref("userChrome.tab.close_button_at_pinned.background", true); // user_pref("userChrome.tab.close_button_at_hover.always", true); // Need close_button_at_hover // user_pref("userChrome.tab.sound_show_label", true); // Need remove sound_hide_label +// user_pref("userChrome.tab.centered_content", true); // user_pref("userChrome.tab.centered_label", true); // user_pref("userChrome.bookmarkbar.centered", true); From 231ad1b75137d049e8977551e199e23c1e0a456d Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 9 Jul 2022 21:42:43 +0900 Subject: [PATCH 08/89] Fix: Centered - Compatibility for container indicator --- css/leptonChrome.css | 42 ++++++++++++++++++++----------- src/tabbar/centered/_content.scss | 7 ++---- src/tabbar/centered/_layout.scss | 2 +- 3 files changed, 30 insertions(+), 21 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 8e0c9254..ebfad75b 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5154,20 +5154,8 @@ display: none !important; } } -/*= Tab Label - Make to Center ===============================================*/ -@supports -moz-bool-pref("userChrome.tab.centered_label") { - /* Based on https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/centered_tab_label.css */ - .tab-label-container { - display: grid; - justify-content: safe center; - align-items: safe center; - } - - .tab-label, - .tab-secondary-label { - overflow: hidden; - } - +/*= Tab Centered - Make to Center ============================================*/ +@supports -moz-bool-pref("userChrome.tab.centered_content") or -moz-bool-pref("userChrome.tab.centered_label") { .tabbrowser-tab[selected]:not(:hover) .tab-label-container:not([textoverflow]), .tabbrowser-tab:not(:hover, [pinned]) .tab-label-container:not([textoverflow]) { margin-inline-end: 5px; @@ -5184,10 +5172,34 @@ .tabbrowser-tab:not([selected]):not(:hover, [pinned]) .tab-label-container label { - padding-inline-end: 19px; + padding-inline-end: 18px; } } } +@supports -moz-bool-pref("userChrome.tab.centered_content") { + .tab-icon-stack { + -moz-box-flex: 1; + justify-content: end; + } +} +@supports -moz-bool-pref("userChrome.tab.centered_label") { + /* Based on https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/centered_tab_label.css */ + .tab-label-container { + display: grid; + justify-content: safe center; + align-items: safe center; + } + + .tab-label, + .tab-secondary-label { + overflow: hidden; + } + + .tabbrowser-tab[selected]:not(:hover) .tab-label-container:not([textoverflow]), + .tabbrowser-tab:not(:hover, [pinned]) .tab-label-container:not([textoverflow]) { + margin-inline-end: 5px; + } +} /** Url View UI ***************************************************************/ /*= Url View - Move icon to left =============================================*/ @supports -moz-bool-pref("userChrome.urlView.move_icon_to_left") { diff --git a/src/tabbar/centered/_content.scss b/src/tabbar/centered/_content.scss index e735af6d..1549e6ee 100644 --- a/src/tabbar/centered/_content.scss +++ b/src/tabbar/centered/_content.scss @@ -1,7 +1,4 @@ -/* Based on https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/centered_tab_content.css */ - -.tab-content:not([pinned])::before { - display: -moz-box; - content: ""; +.tab-icon-stack { -moz-box-flex: 1; + justify-content: end; } diff --git a/src/tabbar/centered/_layout.scss b/src/tabbar/centered/_layout.scss index bbeb6b71..a26f2207 100644 --- a/src/tabbar/centered/_layout.scss +++ b/src/tabbar/centered/_layout.scss @@ -8,6 +8,6 @@ margin-inline-end: 1px; } #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([selected]):not(:hover, [pinned]) .tab-label-container label { - padding-inline-end: 19px; + padding-inline-end: 18px; } } From bbe6cebe3f488a54dfd286b83b02e1dd92eff0bb Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 9 Jul 2022 22:44:43 +0900 Subject: [PATCH 09/89] Add: Vertical Tab - `userChrome.tab.as_titlebar` --- css/leptonChrome.css | 154 ++++++++++++------ src/tabbar/_as_titlebar.scss | 43 +++++ .../{_centerted.scss => _centered.scss} | 0 src/tabbar/_clipped_tab.scss | 4 +- src/tabbar/_index.scss | 5 + user.js | 1 + 6 files changed, 154 insertions(+), 53 deletions(-) create mode 100644 src/tabbar/_as_titlebar.scss rename src/tabbar/{_centerted.scss => _centered.scss} (100%) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index ebfad75b..5908513a 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4036,6 +4036,53 @@ } } } +/*= Tab Bar - Show only current tab ==========================================*/ +@supports -moz-bool-pref("userChrome.tab.as_titlebar") { + :root:not([tabsintitlebar="true"]) #tabbrowser-tabs, + #scrollbutton-up, + #scrollbutton-down, + .titlebar-spacer[type="pre-tabs"], + spacer[part="overflow-end-indicator"], + .tabbrowser-tab:not([selected="true"]), + .tabbrowser-tab[selected="true"] .tab-background, + .tabbrowser-tab[selected="true"] .tab-stack:is(::before, ::after), + .tabbrowser-tab[selected="true"] .tab-close-button, + #tabs-newtab-button { + display: none !important; + } + + .tabbrowser-tab[selected="true"] { + -moz-window-dragging: drag; + --tab-max-width: 100%; + } + + .tabbrowser-tab[selected="true"] .tab-label-container { + margin-inline: 0 !important; + } + + .tab-content { + margin-inline: auto; + width: 100%; + } + + /* Pinned */ + #tabbrowser-tabs { + padding-inline: 0 !important; + /* Original: var(--tab-overflow-pinned-tabs-width) 0; */ + } + + .tab-throbber[pinned], + .tab-icon-pending[pinned], + .tab-icon-image[pinned], + .tab-sharing-icon-overlay[pinned], + .tab-icon-overlay[pinned] { + margin-inline-end: 5.5px; + } + + .tab-label-container[pinned] { + width: unset !important; + } +} /*= Tab Bar - Connect to window ==============================================*/ @supports -moz-bool-pref("userChrome.tab.connect_to_window") { .tab-background { @@ -4800,36 +4847,20 @@ } /** Clipped tabs - Show close button at pinned tab ****************************/ @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") { - #tabbrowser-tabs { - --uc-close-button-size: 24px; - --uc-close-button-padding: 6px; - --uc-close-button-margin: calc((var(--uc-close-button-size) - 16px) / -2); - } + @supports not -moz-bool-pref("userChrome.tab.as_titlebar") { + #tabbrowser-tabs { + --uc-close-button-size: 24px; + --uc-close-button-padding: 6px; + --uc-close-button-margin: calc((var(--uc-close-button-size) - 16px) / -2); + } - #tabbrowser-tabs[closebuttons="activetab"] { - --uc-close-button-size: 20px; - --uc-close-button-padding: 4px; - } + #tabbrowser-tabs[closebuttons="activetab"] { + --uc-close-button-size: 20px; + --uc-close-button-padding: 4px; + } - .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover:not([busy]) .tab-close-button { - display: -moz-box !important; - -moz-box-ordinal-group: 0 !important; - /* Looks like hover */ - width: var(--uc-close-button-size) !important; - height: var(--uc-close-button-size) !important; - padding: var(--uc-close-button-padding) !important; - margin-inline: var(--uc-close-button-margin) !important; - } - .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover:not([busy]) .tab-icon-stack { - width: 0 !important; - position: absolute; - bottom: 8px; - } - .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover .tab-icon-image { - display: none !important; - } - @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned.always") { - .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-close-button { + .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover:not([busy]) + .tab-close-button { display: -moz-box !important; -moz-box-ordinal-group: 0 !important; /* Looks like hover */ @@ -4838,39 +4869,58 @@ padding: var(--uc-close-button-padding) !important; margin-inline: var(--uc-close-button-margin) !important; } - .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-stack { + .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover:not([busy]) .tab-icon-stack { width: 0 !important; position: absolute; bottom: 8px; } - .tabbrowser-tab[pinned][visuallyselected] .tab-icon-image { + .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover .tab-icon-image { display: none !important; } - } - @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned.background") { - .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) .tab-close-button { - display: -moz-box !important; - -moz-box-ordinal-group: 0 !important; - /* Looks like hover */ - width: var(--uc-close-button-size) !important; - height: var(--uc-close-button-size) !important; - padding: var(--uc-close-button-padding) !important; - margin-inline: var(--uc-close-button-margin) !important; - } - .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) .tab-icon-stack { - width: 0 !important; - position: absolute; - bottom: 8px; + @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned.always") { + .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-close-button { + display: -moz-box !important; + -moz-box-ordinal-group: 0 !important; + /* Looks like hover */ + width: var(--uc-close-button-size) !important; + height: var(--uc-close-button-size) !important; + padding: var(--uc-close-button-padding) !important; + margin-inline: var(--uc-close-button-margin) !important; + } + .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-stack { + width: 0 !important; + position: absolute; + bottom: 8px; + } + .tabbrowser-tab[pinned][visuallyselected] .tab-icon-image { + display: none !important; + } } - .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover .tab-icon-image { - display: none !important; + @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned.background") { + .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) .tab-close-button { + display: -moz-box !important; + -moz-box-ordinal-group: 0 !important; + /* Looks like hover */ + width: var(--uc-close-button-size) !important; + height: var(--uc-close-button-size) !important; + padding: var(--uc-close-button-padding) !important; + margin-inline: var(--uc-close-button-margin) !important; + } + .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) .tab-icon-stack { + width: 0 !important; + position: absolute; + bottom: 8px; + } + .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover .tab-icon-image { + display: none !important; + } } - } - #tabbrowser-tabs[closebuttons="activetab"] - .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) - .tab-close-button { - margin-inline-end: var(--uc-close-button-margin) !important; + #tabbrowser-tabs[closebuttons="activetab"] + .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) + .tab-close-button { + margin-inline-end: var(--uc-close-button-margin) !important; + } } } /** Clipped tabs - Always show tab icon ***************************************/ diff --git a/src/tabbar/_as_titlebar.scss b/src/tabbar/_as_titlebar.scss new file mode 100644 index 00000000..b9b74590 --- /dev/null +++ b/src/tabbar/_as_titlebar.scss @@ -0,0 +1,43 @@ +:root:not([tabsintitlebar="true"]) #tabbrowser-tabs, /* Show only */ +#scrollbutton-up, /* Defaults */ +#scrollbutton-down, +.titlebar-spacer[type="pre-tabs"], +spacer[part="overflow-end-indicator"], +.tabbrowser-tab:not([selected="true"]), +.tabbrowser-tab[selected="true"] .tab-background, +.tabbrowser-tab[selected="true"] .tab-stack:is(::before, ::after), +.tabbrowser-tab[selected="true"] .tab-close-button, +#tabs-newtab-button { + display: none !important; +} + +.tabbrowser-tab[selected="true"] { + -moz-window-dragging: drag; + --tab-max-width: 100%; +} +.tabbrowser-tab[selected="true"] .tab-label-container { + margin-inline: 0 !important; +} + +.tab-content { + margin-inline: auto; + width: 100%; +} + + +/* Pinned */ +#tabbrowser-tabs { + padding-inline: 0 !important; /* Original: var(--tab-overflow-pinned-tabs-width) 0; */ +} +.tab-throbber, +.tab-icon-pending, +.tab-icon-image, +.tab-sharing-icon-overlay, +.tab-icon-overlay { + &[pinned] { + margin-inline-end: 5.5px; + } +} +.tab-label-container[pinned] { + width: unset !important; +} diff --git a/src/tabbar/_centerted.scss b/src/tabbar/_centered.scss similarity index 100% rename from src/tabbar/_centerted.scss rename to src/tabbar/_centered.scss diff --git a/src/tabbar/_clipped_tab.scss b/src/tabbar/_clipped_tab.scss index 8b237a84..0762caf6 100644 --- a/src/tabbar/_clipped_tab.scss +++ b/src/tabbar/_clipped_tab.scss @@ -10,7 +10,9 @@ /** Clipped tabs - Show close button at pinned tab ****************************/ @include Option("userChrome.tab.close_button_at_pinned") { - @import "clipped_tab/pinned_close_button"; + @include NotOption("userChrome.tab.as_titlebar") { + @import "clipped_tab/pinned_close_button"; + } } /** Clipped tabs - Always show tab icon ***************************************/ diff --git a/src/tabbar/_index.scss b/src/tabbar/_index.scss index e6d00963..fe5808f5 100644 --- a/src/tabbar/_index.scss +++ b/src/tabbar/_index.scss @@ -33,6 +33,11 @@ @import "layout"; } +/*= Tab Bar - Show only current tab ==========================================*/ +@include Option("userChrome.tab.as_titlebar") { + @import "as_titlebar"; +} + /*= Tab Bar - Connect to window ==============================================*/ @include Option("userChrome.tab.connect_to_window") { @import "connect_to_window"; diff --git a/user.js b/user.js index 1694895e..811031f2 100644 --- a/user.js +++ b/user.js @@ -99,6 +99,7 @@ user_pref("userChrome.tab.bottom_rounded_corner", true); // user_pref("userChrome.tab.on_bottom.menubar_on_top", true); // Need on_bottom // user_pref("userChrome.tab.one_line", true); // user_pref("userChrome.tab.one_line.tabbar_first", true); +// user_pref("userChrome.tab.as_titlebar", true); // user_pref("userChrome.tab.always_show_tab_icon", true); // user_pref("userChrome.tab.close_button_at_pinned", true); // user_pref("userChrome.tab.close_button_at_pinned.always", true); From bbe679b8ecb3a6341c8513828caf305bde7d89c3 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 10 Jul 2022 03:12:21 +0900 Subject: [PATCH 10/89] Fix: Vertical Tab - Layout fix for Pinned Tab --- css/leptonChrome.css | 25 ++++++++++++++++++ src/tabbar/_as_titlebar.scss | 50 ++++++++++++++++++++++++++++++++++++ 2 files changed, 75 insertions(+) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 5908513a..b5fe9561 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4054,6 +4054,13 @@ .tabbrowser-tab[selected="true"] { -moz-window-dragging: drag; --tab-max-width: 100%; + 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 { @@ -4082,6 +4089,24 @@ .tab-label-container[pinned] { width: unset !important; } + + @supports -moz-bool-pref("browser.tabs.tabmanager.enabled") { + :root:not([tabsintitlebar="true"]) #tabbrowser-tabs:not([overflow="true"], [hashiddentabs]) ~ #alltabs-button, + :root:not([tabsintitlebar="true"]) + #tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow="true"]) + ~ #new-tab-button { + display: -moz-box !important; + } + } + #tabbrowser-tabs:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox { + padding-inline: 12.5px !important; + } + + #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) + > #tabbrowser-arrowscrollbox + > .tabbrowser-tab[first-visible-unpinned-tab] { + --inline-tab-padding: 0 !important; + } } /*= Tab Bar - Connect to window ==============================================*/ @supports -moz-bool-pref("userChrome.tab.connect_to_window") { diff --git a/src/tabbar/_as_titlebar.scss b/src/tabbar/_as_titlebar.scss index b9b74590..40ef1a8f 100644 --- a/src/tabbar/_as_titlebar.scss +++ b/src/tabbar/_as_titlebar.scss @@ -14,6 +14,14 @@ spacer[part="overflow-end-indicator"], .tabbrowser-tab[selected="true"] { -moz-window-dragging: drag; --tab-max-width: 100%; + 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; @@ -41,3 +49,45 @@ spacer[part="overflow-end-indicator"], .tab-label-container[pinned] { width: unset !important; } + + +// @supports not -moz-bool-pref("browser.tabs.tabmanager.enabled") { +// #tabbrowser-tabs:not([overflow="true"], [hashiddentabs]) ~ #alltabs-button { +// display: none; +// } +// #tabbrowser-tabs:not([overflow="true"])[using-closing-tabs-spacer] ~ #alltabs-button { +// // temporary space to keep a tab's close button under the cursor +// display: -moz-box; +// visibility: hidden; +// } +// } +// +// #tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow="true"]) ~ #new-tab-button, +// #tabbrowser-tabs[overflow="true"] > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button, +// #tabbrowser-tabs:not([hasadjacentnewtabbutton]) > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button, +// #TabsToolbar[customizing="true"] #tabs-newtab-button { +// display: none; +// } +// +// #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox::part(scrollbox) { +// // Add padding to match the shadow's blur radius so the +// // shadow doesn't get clipped when either the first or +// // last tab is selected +// padding-inline: var(--tab-shadow-max-size); // 6px +// } +// +// #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] { +// margin-inline-start: 12px !important; +// } +@include Option("browser.tabs.tabmanager.enabled") { + :root:not([tabsintitlebar="true"]) #tabbrowser-tabs:not([overflow="true"], [hashiddentabs]) ~ #alltabs-button, + :root:not([tabsintitlebar="true"]) #tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow="true"]) ~ #new-tab-button { + display: -moz-box !important; + } +} +#tabbrowser-tabs:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox { + padding-inline: 12.5px !important; +} +#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] { + --inline-tab-padding: 0 !important; +} From 65bb513eacc2e43072ca29aa32e8f88d29a445ee Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 11 Jul 2022 17:47:32 +0900 Subject: [PATCH 11/89] Add: Auto Hide - Sidebar with overlap --- css/leptonChrome.css | 67 ++++++++++++++++++++++++++++ src/autohide/_index.scss | 2 + src/autohide/_sidebar.scss | 3 ++ src/autohide/sidebar/_overlay.scss | 70 ++++++++++++++++++++++++++++++ user.js | 1 + 5 files changed, 143 insertions(+) create mode 100644 src/autohide/_sidebar.scss create mode 100644 src/autohide/sidebar/_overlay.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index b5fe9561..5fd99a86 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5389,6 +5389,73 @@ } } } +@supports -moz-bool-pref("userChrome.autohide.sidebar") { + #sidebar-box { + /* Original + min-width: 14em; + width: 18em; + max-width: 36em; + */ + --uc-sidebar-width: 40px; + --uc-sidebar-hover-width: 18em; + --uc-sidebar-shadow-color: #28282f; + --uc-autohide-sidebar-delay: 600ms; + /* Wait 0.6s before hiding sidebar */ + z-index: 1000 !important; + position: relative !important; + min-width: var(--uc-sidebar-width) !important; + max-width: var(--uc-sidebar-width) !important; + } + + #sidebar-splitter { + display: none !important; + } + + #sidebar-header, + #sidebar { + box-shadow: 1px 5px 15px -5px var(--uc-sidebar-shadow-color); + } + + #sidebar-header { + background-color: var(--sidebar-background-color) !important; + color: var(--sidebar-text-color) !important; + overflow: hidden; + } + + #sidebar { + min-width: var(--uc-sidebar-width) !important; + max-width: var(--uc-sidebar-width) !important; + transition: min-width 750ms var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; + will-change: min-width, max-width; + } + + #sidebar-box:hover > #sidebar { + min-width: var(--uc-sidebar-hover-width) !important; + max-width: var(--uc-sidebar-hover-width) !important; + transition-delay: 0ms !important; + } + + :root[inFullscreen="true"] #sidebar-box { + min-width: var(--uc-sidebar-hover-width) !important; + max-width: var(--uc-sidebar-hover-width) !important; + margin-inline-start: calc(-1 * var(--uc-sidebar-hover-width)) !important; + transform: translateX(4px) !important; + transition: transform 1s var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; + will-change: transform; + } + + :root[inFullscreen="true"] #sidebar-box:hover { + transform: translateX(var(--uc-sidebar-hover-width)) !important; + transition-delay: 0ms !important; + } + + :root[inFullscreen="true"] #sidebar-box #sidebar-header, + :root[inFullscreen="true"] #sidebar-box #sidebar { + min-width: calc(var(--uc-sidebar-hover-width)) !important; + max-width: calc(var(--uc-sidebar-hover-width)) !important; + box-shadow: 2px 0 33px var(--uc-sidebar-shadow-color); + } +} /** Library - Icons Replace ***************************************************/ @supports -moz-bool-pref("userChrome.icon.library") { /*= Standard Folder - More Visible ===========================================*/ diff --git a/src/autohide/_index.scss b/src/autohide/_index.scss index 312f6893..5d3c6524 100644 --- a/src/autohide/_index.scss +++ b/src/autohide/_index.scss @@ -1,3 +1,5 @@ @include Option("userChrome.autohide.forward_button") { @import "forward_button"; } + +@import "sidebar"; diff --git a/src/autohide/_sidebar.scss b/src/autohide/_sidebar.scss new file mode 100644 index 00000000..8e395d6e --- /dev/null +++ b/src/autohide/_sidebar.scss @@ -0,0 +1,3 @@ +@include Option("userChrome.autohide.sidebar") { + @import "sidebar/overlay"; +} diff --git a/src/autohide/sidebar/_overlay.scss b/src/autohide/sidebar/_overlay.scss new file mode 100644 index 00000000..95ecff0c --- /dev/null +++ b/src/autohide/sidebar/_overlay.scss @@ -0,0 +1,70 @@ +#sidebar-box { + /* Original + min-width: 14em; + width: 18em; + max-width: 36em; + */ + + --uc-sidebar-width: 40px; + --uc-sidebar-hover-width: 18em; + --uc-sidebar-shadow-color: #28282F; + --uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */ + + z-index: 1000 !important; + position: relative !important; + + min-width: var(--uc-sidebar-width) !important; + max-width: var(--uc-sidebar-width) !important; +} + +#sidebar-splitter { + display: none !important; +} + +#sidebar-header, +#sidebar { + box-shadow: 1px 5px 15px -5px var(--uc-sidebar-shadow-color); +} + +#sidebar-header { + background-color: var(--sidebar-background-color) !important; + color: var(--sidebar-text-color) !important; + overflow: hidden; +} + +#sidebar { + min-width: var(--uc-sidebar-width) !important; + max-width: var(--uc-sidebar-width) !important; + + transition: min-width 750ms var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; + will-change: min-width, max-width; +} + +#sidebar-box:hover > #sidebar { + min-width: var(--uc-sidebar-hover-width) !important; + max-width: var(--uc-sidebar-hover-width) !important; + transition-delay: 0ms !important; +} + +:root[inFullscreen="true"] #sidebar-box { + min-width: var(--uc-sidebar-hover-width) !important; + max-width: var(--uc-sidebar-hover-width) !important; + margin-inline-start: calc(-1 * var(--uc-sidebar-hover-width)) !important; + + transform: translateX(4px) !important; + + transition: transform 1s var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; + will-change: transform; +} + +:root[inFullscreen="true"] #sidebar-box:hover { + transform: translateX(var(--uc-sidebar-hover-width)) !important; + transition-delay: 0ms !important; +} + +:root[inFullscreen="true"] #sidebar-box #sidebar-header, +:root[inFullscreen="true"] #sidebar-box #sidebar { + min-width: calc(var(--uc-sidebar-hover-width)) !important; + max-width: calc(var(--uc-sidebar-hover-width)) !important; + box-shadow: 2px 0 33px var(--uc-sidebar-shadow-color); +} diff --git a/user.js b/user.js index 811031f2..d405c49d 100644 --- a/user.js +++ b/user.js @@ -71,6 +71,7 @@ user_pref("userChrome.tab.bottom_rounded_corner", true); // user_pref("userChrome.theme.proton_color.dark_blue_accent", true); // user_pref("userChrome.autohide.forward_button", true); +// user_pref("userChrome.autohide.sidebar", true); // user_pref("userChrome.rounding.square_button", true); // user_pref("userChrome.rounding.square_panel", true); From 1439fb659ea4bbe79f46fadbb32cdb81b0a70dc1 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 11 Jul 2022 17:55:28 +0900 Subject: [PATCH 12/89] Fix: AutoHide - Sidebar Animate ON/OFF settings --- css/leptonChrome.css | 24 ++++++++++++----- src/autohide/sidebar/_overlay.scss | 41 ++++++++++++++++++++---------- 2 files changed, 46 insertions(+), 19 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 5fd99a86..04583636 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5425,14 +5425,12 @@ #sidebar { min-width: var(--uc-sidebar-width) !important; max-width: var(--uc-sidebar-width) !important; - transition: min-width 750ms var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; will-change: min-width, max-width; } #sidebar-box:hover > #sidebar { min-width: var(--uc-sidebar-hover-width) !important; max-width: var(--uc-sidebar-hover-width) !important; - transition-delay: 0ms !important; } :root[inFullscreen="true"] #sidebar-box { @@ -5440,20 +5438,34 @@ max-width: var(--uc-sidebar-hover-width) !important; margin-inline-start: calc(-1 * var(--uc-sidebar-hover-width)) !important; transform: translateX(4px) !important; - transition: transform 1s var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; will-change: transform; } - :root[inFullscreen="true"] #sidebar-box:hover { transform: translateX(var(--uc-sidebar-hover-width)) !important; - transition-delay: 0ms !important; } - :root[inFullscreen="true"] #sidebar-box #sidebar-header, :root[inFullscreen="true"] #sidebar-box #sidebar { min-width: calc(var(--uc-sidebar-hover-width)) !important; max-width: calc(var(--uc-sidebar-hover-width)) !important; box-shadow: 2px 0 33px var(--uc-sidebar-shadow-color); + will-change: unset; + } + + @media (prefers-reduced-motion: no-preference) { + #sidebar { + transition: min-width 750ms var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; + } + + #sidebar-box:hover > #sidebar { + transition-delay: 0ms !important; + } + + :root[inFullscreen="true"] #sidebar-box { + transition: transform 1s var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; + } + :root[inFullscreen="true"] #sidebar-box:hover { + transition-delay: 0ms !important; + } } } /** Library - Icons Replace ***************************************************/ diff --git a/src/autohide/sidebar/_overlay.scss b/src/autohide/sidebar/_overlay.scss index 95ecff0c..d9af5188 100644 --- a/src/autohide/sidebar/_overlay.scss +++ b/src/autohide/sidebar/_overlay.scss @@ -36,14 +36,12 @@ min-width: var(--uc-sidebar-width) !important; max-width: var(--uc-sidebar-width) !important; - transition: min-width 750ms var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; will-change: min-width, max-width; } #sidebar-box:hover > #sidebar { min-width: var(--uc-sidebar-hover-width) !important; max-width: var(--uc-sidebar-hover-width) !important; - transition-delay: 0ms !important; } :root[inFullscreen="true"] #sidebar-box { @@ -52,19 +50,36 @@ margin-inline-start: calc(-1 * var(--uc-sidebar-hover-width)) !important; transform: translateX(4px) !important; - - transition: transform 1s var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; will-change: transform; -} -:root[inFullscreen="true"] #sidebar-box:hover { - transform: translateX(var(--uc-sidebar-hover-width)) !important; - transition-delay: 0ms !important; + &:hover { + transform: translateX(var(--uc-sidebar-hover-width)) !important; + } + + #sidebar-header, + #sidebar { + min-width: calc(var(--uc-sidebar-hover-width)) !important; + max-width: calc(var(--uc-sidebar-hover-width)) !important; + box-shadow: 2px 0 33px var(--uc-sidebar-shadow-color); + + will-change: unset; + } } -:root[inFullscreen="true"] #sidebar-box #sidebar-header, -:root[inFullscreen="true"] #sidebar-box #sidebar { - min-width: calc(var(--uc-sidebar-hover-width)) !important; - max-width: calc(var(--uc-sidebar-hover-width)) !important; - box-shadow: 2px 0 33px var(--uc-sidebar-shadow-color); +@include Animate { + #sidebar { + transition: min-width 750ms var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; + } + + #sidebar-box:hover > #sidebar { + transition-delay: 0ms !important; + } + + :root[inFullscreen="true"] #sidebar-box { + transition: transform 1s var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; + + &:hover { + transition-delay: 0ms !important; + } + } } From e384e45aa3a01c0128b46d122e0baafd64597564 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 12 Jul 2022 04:35:21 +0900 Subject: [PATCH 13/89] Add: Auto Hide - Static sidebar --- css/leptonChrome.css | 127 ++++++++++++++++++----------- src/autohide/_sidebar.scss | 38 ++++++++- src/autohide/sidebar/_overlay.scss | 33 +------- src/autohide/sidebar/_static.scss | 38 +++++++++ user.js | 1 + 5 files changed, 158 insertions(+), 79 deletions(-) create mode 100644 src/autohide/sidebar/_static.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 04583636..b95df9a5 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5392,12 +5392,13 @@ @supports -moz-bool-pref("userChrome.autohide.sidebar") { #sidebar-box { /* Original - min-width: 14em; - width: 18em; - max-width: 36em; + min-width: 14em; + width: 18em; + max-width: 36em; */ --uc-sidebar-width: 40px; --uc-sidebar-hover-width: 18em; + --uc-sidebar-fullscreen-width: 4px; --uc-sidebar-shadow-color: #28282f; --uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */ @@ -5405,66 +5406,100 @@ position: relative !important; min-width: var(--uc-sidebar-width) !important; max-width: var(--uc-sidebar-width) !important; - } - - #sidebar-splitter { - display: none !important; - } - - #sidebar-header, - #sidebar { - box-shadow: 1px 5px 15px -5px var(--uc-sidebar-shadow-color); - } - - #sidebar-header { - background-color: var(--sidebar-background-color) !important; - color: var(--sidebar-text-color) !important; - overflow: hidden; - } - - #sidebar { - min-width: var(--uc-sidebar-width) !important; - max-width: var(--uc-sidebar-width) !important; - will-change: min-width, max-width; - } - - #sidebar-box:hover > #sidebar { - min-width: var(--uc-sidebar-hover-width) !important; - max-width: var(--uc-sidebar-hover-width) !important; + box-shadow: 1px 0px 15px -10px var(--uc-sidebar-shadow-color); } :root[inFullscreen="true"] #sidebar-box { min-width: var(--uc-sidebar-hover-width) !important; max-width: var(--uc-sidebar-hover-width) !important; - margin-inline-start: calc(-1 * var(--uc-sidebar-hover-width)) !important; - transform: translateX(4px) !important; - will-change: transform; } - :root[inFullscreen="true"] #sidebar-box:hover { - transform: translateX(var(--uc-sidebar-hover-width)) !important; - } - :root[inFullscreen="true"] #sidebar-box #sidebar-header, - :root[inFullscreen="true"] #sidebar-box #sidebar { - min-width: calc(var(--uc-sidebar-hover-width)) !important; - max-width: calc(var(--uc-sidebar-hover-width)) !important; - box-shadow: 2px 0 33px var(--uc-sidebar-shadow-color); - will-change: unset; + + #sidebar-splitter { + display: none !important; } - @media (prefers-reduced-motion: no-preference) { + @supports -moz-bool-pref("userChrome.autohide.sidebar.overlap") { + #sidebar-header { + background-color: var(--sidebar-background-color) !important; + color: var(--sidebar-text-color) !important; + overflow: hidden; + } + #sidebar { - transition: min-width 750ms var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; + min-width: var(--uc-sidebar-width) !important; + max-width: var(--uc-sidebar-width) !important; + will-change: min-width, max-width; } #sidebar-box:hover > #sidebar { - transition-delay: 0ms !important; + min-width: var(--uc-sidebar-hover-width) !important; + max-width: var(--uc-sidebar-hover-width) !important; + } + + :root[inFullscreen="true"] #sidebar-box { + margin-inline-start: calc(-1 * var(--uc-sidebar-hover-width)) !important; + transform: translateX(var(--uc-sidebar-fullscreen-width)) !important; + will-change: transform; + } + :root[inFullscreen="true"] #sidebar-box:hover { + transform: translateX(var(--uc-sidebar-hover-width)) !important; + } + :root[inFullscreen="true"] #sidebar-box #sidebar-header, + :root[inFullscreen="true"] #sidebar-box #sidebar { + min-width: calc(var(--uc-sidebar-hover-width)) !important; + max-width: calc(var(--uc-sidebar-hover-width)) !important; + will-change: unset; + } + + @media (prefers-reduced-motion: no-preference) { + #sidebar { + transition: min-width 750ms var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; + } + + #sidebar-box:hover > #sidebar { + transition-delay: 0ms !important; + } + + :root[inFullscreen="true"] #sidebar-box { + transition: transform 1s var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; + } + :root[inFullscreen="true"] #sidebar-box:hover { + transition-delay: 0ms !important; + } + } + } + @supports not -moz-bool-pref("userChrome.autohide.sidebar.overlap") { + #sidebar-box { + overflow: hidden; + will-change: min-width, max-width; + } + #sidebar-box:hover { + min-width: var(--uc-sidebar-hover-width) !important; + max-width: var(--uc-sidebar-hover-width) !important; } :root[inFullscreen="true"] #sidebar-box { - transition: transform 1s var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; + margin-inline-start: calc(var(--uc-sidebar-fullscreen-width) + -1 * var(--uc-sidebar-hover-width)) !important; + will-change: margin-inline-start; } :root[inFullscreen="true"] #sidebar-box:hover { - transition-delay: 0ms !important; + margin-inline-start: 0 !important; + } + + @media (prefers-reduced-motion: no-preference) { + #sidebar-box { + transition: min-width 750ms var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; + } + #sidebar-box:hover { + transition-delay: 0ms !important; + } + + :root[inFullscreen="true"] #sidebar-box { + transition: margin-inline-start 1s var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; + } + :root[inFullscreen="true"] #sidebar-box:hover { + transition-delay: 0ms !important; + } } } } diff --git a/src/autohide/_sidebar.scss b/src/autohide/_sidebar.scss index 8e395d6e..f066eb6e 100644 --- a/src/autohide/_sidebar.scss +++ b/src/autohide/_sidebar.scss @@ -1,3 +1,39 @@ @include Option("userChrome.autohide.sidebar") { - @import "sidebar/overlay"; + #sidebar-box { + /* Original + min-width: 14em; + width: 18em; + max-width: 36em; + */ + + --uc-sidebar-width: 40px; + --uc-sidebar-hover-width: 18em; + --uc-sidebar-fullscreen-width: 4px; + --uc-sidebar-shadow-color: #28282F; + --uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */ + + z-index: 1000 !important; + position: relative !important; + + min-width: var(--uc-sidebar-width) !important; + max-width: var(--uc-sidebar-width) !important; + box-shadow: 1px 0px 15px -10px var(--uc-sidebar-shadow-color); + } + + :root[inFullscreen="true"] #sidebar-box { + min-width: var(--uc-sidebar-hover-width) !important; + max-width: var(--uc-sidebar-hover-width) !important; + } + + #sidebar-splitter { + display: none !important; + } + + + @include Option("userChrome.autohide.sidebar.overlap") { + @import "sidebar/overlay"; + } + @include NotOption("userChrome.autohide.sidebar.overlap") { + @import "sidebar/static"; + } } diff --git a/src/autohide/sidebar/_overlay.scss b/src/autohide/sidebar/_overlay.scss index d9af5188..571ada84 100644 --- a/src/autohide/sidebar/_overlay.scss +++ b/src/autohide/sidebar/_overlay.scss @@ -1,31 +1,3 @@ -#sidebar-box { - /* Original - min-width: 14em; - width: 18em; - max-width: 36em; - */ - - --uc-sidebar-width: 40px; - --uc-sidebar-hover-width: 18em; - --uc-sidebar-shadow-color: #28282F; - --uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */ - - z-index: 1000 !important; - position: relative !important; - - min-width: var(--uc-sidebar-width) !important; - max-width: var(--uc-sidebar-width) !important; -} - -#sidebar-splitter { - display: none !important; -} - -#sidebar-header, -#sidebar { - box-shadow: 1px 5px 15px -5px var(--uc-sidebar-shadow-color); -} - #sidebar-header { background-color: var(--sidebar-background-color) !important; color: var(--sidebar-text-color) !important; @@ -45,11 +17,9 @@ } :root[inFullscreen="true"] #sidebar-box { - min-width: var(--uc-sidebar-hover-width) !important; - max-width: var(--uc-sidebar-hover-width) !important; margin-inline-start: calc(-1 * var(--uc-sidebar-hover-width)) !important; - transform: translateX(4px) !important; + transform: translateX(var(--uc-sidebar-fullscreen-width)) !important; will-change: transform; &:hover { @@ -60,7 +30,6 @@ #sidebar { min-width: calc(var(--uc-sidebar-hover-width)) !important; max-width: calc(var(--uc-sidebar-hover-width)) !important; - box-shadow: 2px 0 33px var(--uc-sidebar-shadow-color); will-change: unset; } diff --git a/src/autohide/sidebar/_static.scss b/src/autohide/sidebar/_static.scss new file mode 100644 index 00000000..c00f98b4 --- /dev/null +++ b/src/autohide/sidebar/_static.scss @@ -0,0 +1,38 @@ +#sidebar-box { + overflow: hidden; + + will-change: min-width, max-width; + + &:hover { + min-width: var(--uc-sidebar-hover-width) !important; + max-width: var(--uc-sidebar-hover-width) !important; + } +} + +:root[inFullscreen="true"] #sidebar-box { + margin-inline-start: calc(var(--uc-sidebar-fullscreen-width) + (-1 * var(--uc-sidebar-hover-width))) !important; + will-change: margin-inline-start; + + &:hover { + margin-inline-start: 0 !important; + } +} + + +@include Animate { + #sidebar-box { + transition: min-width 750ms var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; + + &:hover { + transition-delay: 0ms !important; + } + } + + :root[inFullscreen="true"] #sidebar-box { + transition: margin-inline-start 1s var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; + + &:hover { + transition-delay: 0ms !important; + } + } +} diff --git a/user.js b/user.js index d405c49d..382efb8b 100644 --- a/user.js +++ b/user.js @@ -72,6 +72,7 @@ user_pref("userChrome.tab.bottom_rounded_corner", true); // user_pref("userChrome.autohide.forward_button", true); // user_pref("userChrome.autohide.sidebar", true); +// user_pref("userChrome.autohide.sidebar.overlap", true); // user_pref("userChrome.rounding.square_button", true); // user_pref("userChrome.rounding.square_panel", true); From 0a1fe3fe179c0d3aac6aa7b38c9002ee33856b4a Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 12 Jul 2022 10:22:30 +0900 Subject: [PATCH 14/89] Add: Sidebar - Separated to `userChrome.sidebar.overlap` --- css/leptonChrome.css | 63 ++++++++++++++++++++---------- src/autohide/_sidebar.scss | 47 ++++++++++++++++------ src/autohide/sidebar/_overlay.scss | 12 +++--- src/autohide/sidebar/_static.scss | 6 +-- src/decoration/_animate.scss | 1 + user.js | 3 +- 6 files changed, 91 insertions(+), 41 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index b95df9a5..40cf40c3 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -2821,6 +2821,7 @@ /* Animation */ transition: margin-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, visibility 0s linear !important; + will-change: margin-inline-start, opacity, visibility; } #sidebar-box[hidden="true"] { display: -moz-box !important; @@ -5389,7 +5390,7 @@ } } } -@supports -moz-bool-pref("userChrome.autohide.sidebar") { +@supports -moz-bool-pref("userChrome.sidebar.overlap") or -moz-bool-pref("userChrome.autohide.sidebar") { #sidebar-box { /* Original min-width: 14em; @@ -5397,28 +5398,50 @@ max-width: 36em; */ --uc-sidebar-width: 40px; - --uc-sidebar-hover-width: 18em; + --uc-sidebar-activate-width: 18em; --uc-sidebar-fullscreen-width: 4px; --uc-sidebar-shadow-color: #28282f; --uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */ z-index: 1000 !important; position: relative !important; - min-width: var(--uc-sidebar-width) !important; - max-width: var(--uc-sidebar-width) !important; box-shadow: 1px 0px 15px -10px var(--uc-sidebar-shadow-color); } - :root[inFullscreen="true"] #sidebar-box { - min-width: var(--uc-sidebar-hover-width) !important; - max-width: var(--uc-sidebar-hover-width) !important; - } - #sidebar-splitter { display: none !important; } +} +@supports -moz-bool-pref("userChrome.sidebar.overlap") { + @supports not -moz-bool-pref("userChrome.autohide.sidebar") { + #sidebar-box { + min-width: var(--uc-sidebar-activate-width) !important; + max-width: var(--uc-sidebar-activate-width) !important; + margin-inline-start: calc(-1 * var(--uc-sidebar-activate-width)) !important; + will-change: transform; + } + #sidebar-box:not([hidden="true"]) { + transform: translateX(var(--uc-sidebar-activate-width)); + } + @media (prefers-reduced-motion: no-preference) { + #sidebar-box { + transition: transform 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, visibility 0s linear !important; + } + } + } +} +@supports -moz-bool-pref("userChrome.autohide.sidebar") { + #sidebar-box { + min-width: var(--uc-sidebar-width) !important; + max-width: var(--uc-sidebar-width) !important; + } + + :root[inFullscreen="true"] #sidebar-box { + min-width: var(--uc-sidebar-activate-width) !important; + max-width: var(--uc-sidebar-activate-width) !important; + } - @supports -moz-bool-pref("userChrome.autohide.sidebar.overlap") { + @supports -moz-bool-pref("userChrome.sidebar.overlap") { #sidebar-header { background-color: var(--sidebar-background-color) !important; color: var(--sidebar-text-color) !important; @@ -5432,22 +5455,22 @@ } #sidebar-box:hover > #sidebar { - min-width: var(--uc-sidebar-hover-width) !important; - max-width: var(--uc-sidebar-hover-width) !important; + min-width: var(--uc-sidebar-activate-width) !important; + max-width: var(--uc-sidebar-activate-width) !important; } :root[inFullscreen="true"] #sidebar-box { - margin-inline-start: calc(-1 * var(--uc-sidebar-hover-width)) !important; + margin-inline-start: calc(-1 * var(--uc-sidebar-activate-width)) !important; transform: translateX(var(--uc-sidebar-fullscreen-width)) !important; will-change: transform; } :root[inFullscreen="true"] #sidebar-box:hover { - transform: translateX(var(--uc-sidebar-hover-width)) !important; + transform: translateX(var(--uc-sidebar-activate-width)) !important; } :root[inFullscreen="true"] #sidebar-box #sidebar-header, :root[inFullscreen="true"] #sidebar-box #sidebar { - min-width: calc(var(--uc-sidebar-hover-width)) !important; - max-width: calc(var(--uc-sidebar-hover-width)) !important; + min-width: calc(var(--uc-sidebar-activate-width)) !important; + max-width: calc(var(--uc-sidebar-activate-width)) !important; will-change: unset; } @@ -5468,18 +5491,18 @@ } } } - @supports not -moz-bool-pref("userChrome.autohide.sidebar.overlap") { + @supports not -moz-bool-pref("userChrome.sidebar.overlap") { #sidebar-box { overflow: hidden; will-change: min-width, max-width; } #sidebar-box:hover { - min-width: var(--uc-sidebar-hover-width) !important; - max-width: var(--uc-sidebar-hover-width) !important; + min-width: var(--uc-sidebar-activate-width) !important; + max-width: var(--uc-sidebar-activate-width) !important; } :root[inFullscreen="true"] #sidebar-box { - margin-inline-start: calc(var(--uc-sidebar-fullscreen-width) + -1 * var(--uc-sidebar-hover-width)) !important; + margin-inline-start: calc(var(--uc-sidebar-fullscreen-width) + -1 * var(--uc-sidebar-activate-width)) !important; will-change: margin-inline-start; } :root[inFullscreen="true"] #sidebar-box:hover { diff --git a/src/autohide/_sidebar.scss b/src/autohide/_sidebar.scss index f066eb6e..82471843 100644 --- a/src/autohide/_sidebar.scss +++ b/src/autohide/_sidebar.scss @@ -1,4 +1,4 @@ -@include Option("userChrome.autohide.sidebar") { +@include Option("userChrome.sidebar.overlap", "userChrome.autohide.sidebar") { #sidebar-box { /* Original min-width: 14em; @@ -7,7 +7,7 @@ */ --uc-sidebar-width: 40px; - --uc-sidebar-hover-width: 18em; + --uc-sidebar-activate-width: 18em; --uc-sidebar-fullscreen-width: 4px; --uc-sidebar-shadow-color: #28282F; --uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */ @@ -15,25 +15,50 @@ z-index: 1000 !important; position: relative !important; - min-width: var(--uc-sidebar-width) !important; - max-width: var(--uc-sidebar-width) !important; box-shadow: 1px 0px 15px -10px var(--uc-sidebar-shadow-color); } - :root[inFullscreen="true"] #sidebar-box { - min-width: var(--uc-sidebar-hover-width) !important; - max-width: var(--uc-sidebar-hover-width) !important; - } - #sidebar-splitter { display: none !important; } +} + +@include Option("userChrome.sidebar.overlap") { + @include NotOption("userChrome.autohide.sidebar") { + #sidebar-box { + min-width: var(--uc-sidebar-activate-width) !important; + max-width: var(--uc-sidebar-activate-width) !important; + margin-inline-start: calc(-1 * var(--uc-sidebar-activate-width)) !important; + + will-change: transform; + &:not([hidden="true"]) { + transform: translateX(var(--uc-sidebar-activate-width)); + } + + @include Animate { + transition: transform 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, + visibility 0s linear !important; + } + } + } +} + +@include Option("userChrome.autohide.sidebar") { + #sidebar-box { + min-width: var(--uc-sidebar-width) !important; + max-width: var(--uc-sidebar-width) !important; + } + + :root[inFullscreen="true"] #sidebar-box { + min-width: var(--uc-sidebar-activate-width) !important; + max-width: var(--uc-sidebar-activate-width) !important; + } - @include Option("userChrome.autohide.sidebar.overlap") { + @include Option("userChrome.sidebar.overlap") { @import "sidebar/overlay"; } - @include NotOption("userChrome.autohide.sidebar.overlap") { + @include NotOption("userChrome.sidebar.overlap") { @import "sidebar/static"; } } diff --git a/src/autohide/sidebar/_overlay.scss b/src/autohide/sidebar/_overlay.scss index 571ada84..cd3ec0bc 100644 --- a/src/autohide/sidebar/_overlay.scss +++ b/src/autohide/sidebar/_overlay.scss @@ -12,24 +12,24 @@ } #sidebar-box:hover > #sidebar { - min-width: var(--uc-sidebar-hover-width) !important; - max-width: var(--uc-sidebar-hover-width) !important; + min-width: var(--uc-sidebar-activate-width) !important; + max-width: var(--uc-sidebar-activate-width) !important; } :root[inFullscreen="true"] #sidebar-box { - margin-inline-start: calc(-1 * var(--uc-sidebar-hover-width)) !important; + margin-inline-start: calc(-1 * var(--uc-sidebar-activate-width)) !important; transform: translateX(var(--uc-sidebar-fullscreen-width)) !important; will-change: transform; &:hover { - transform: translateX(var(--uc-sidebar-hover-width)) !important; + transform: translateX(var(--uc-sidebar-activate-width)) !important; } #sidebar-header, #sidebar { - min-width: calc(var(--uc-sidebar-hover-width)) !important; - max-width: calc(var(--uc-sidebar-hover-width)) !important; + min-width: calc(var(--uc-sidebar-activate-width)) !important; + max-width: calc(var(--uc-sidebar-activate-width)) !important; will-change: unset; } diff --git a/src/autohide/sidebar/_static.scss b/src/autohide/sidebar/_static.scss index c00f98b4..01516f13 100644 --- a/src/autohide/sidebar/_static.scss +++ b/src/autohide/sidebar/_static.scss @@ -4,13 +4,13 @@ will-change: min-width, max-width; &:hover { - min-width: var(--uc-sidebar-hover-width) !important; - max-width: var(--uc-sidebar-hover-width) !important; + min-width: var(--uc-sidebar-activate-width) !important; + max-width: var(--uc-sidebar-activate-width) !important; } } :root[inFullscreen="true"] #sidebar-box { - margin-inline-start: calc(var(--uc-sidebar-fullscreen-width) + (-1 * var(--uc-sidebar-hover-width))) !important; + margin-inline-start: calc(var(--uc-sidebar-fullscreen-width) + (-1 * var(--uc-sidebar-activate-width))) !important; will-change: margin-inline-start; &:hover { diff --git a/src/decoration/_animate.scss b/src/decoration/_animate.scss index 25997a70..6b969fe2 100644 --- a/src/decoration/_animate.scss +++ b/src/decoration/_animate.scss @@ -104,6 +104,7 @@ xul|search-textbox.tabsFilter, /* Animation */ transition: margin-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, visibility 0s linear !important; + will-change: margin-inline-start, opacity, visibility; &[hidden="true"] { display: -moz-box !important; diff --git a/user.js b/user.js index 382efb8b..b158b79f 100644 --- a/user.js +++ b/user.js @@ -72,7 +72,6 @@ user_pref("userChrome.tab.bottom_rounded_corner", true); // user_pref("userChrome.autohide.forward_button", true); // user_pref("userChrome.autohide.sidebar", true); -// user_pref("userChrome.autohide.sidebar.overlap", true); // user_pref("userChrome.rounding.square_button", true); // user_pref("userChrome.rounding.square_panel", true); @@ -117,6 +116,8 @@ user_pref("userChrome.tab.bottom_rounded_corner", true); // user_pref("userChrome.panel.full_width_separator", true); // user_pref("userChrome.panel.full_width_padding", true); +// user_pref("userChrome.sidebar.overlap", true); + // user_pref("userChrome.icon.account_image_to_right", true); // user_pref("userChrome.icon.account_label_to_right", true); // user_pref("userChrome.icon.menu.full", true); From 0aef856efb06fb857eb8d06d97a9887fc0742584 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 12 Jul 2022 13:25:38 +0900 Subject: [PATCH 15/89] Clean: Sidebar - Separated UI --- css/leptonChrome.css | 81 ++++++++++--------- src/autohide/_sidebar.scss | 48 +---------- .../sidebar/{_overlay.scss => _overlap.scss} | 0 src/leptonChrome.scss | 3 + 4 files changed, 46 insertions(+), 86 deletions(-) rename src/autohide/sidebar/{_overlay.scss => _overlap.scss} (100%) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 40cf40c3..9e49a65c 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5333,6 +5333,47 @@ --arrowpanel-menuitem-padding-inline: calc(var(--arrowpanel-menuitem-padding-block) + 8px) !important; } } +/** Sidebar UI ****************************************************************/ +@supports -moz-bool-pref("userChrome.sidebar.overlap") or -moz-bool-pref("userChrome.autohide.sidebar") { + #sidebar-box { + /* Original + min-width: 14em; + width: 18em; + max-width: 36em; + */ + --uc-sidebar-width: 40px; + --uc-sidebar-activate-width: 18em; + --uc-sidebar-fullscreen-width: 4px; + --uc-sidebar-shadow-color: #28282f; + --uc-autohide-sidebar-delay: 600ms; + /* Wait 0.6s before hiding sidebar */ + z-index: 1000 !important; + position: relative !important; + box-shadow: 1px 0px 15px -10px var(--uc-sidebar-shadow-color); + } + + #sidebar-splitter { + display: none !important; + } +} +@supports -moz-bool-pref("userChrome.sidebar.overlap") { + @supports not -moz-bool-pref("userChrome.autohide.sidebar") { + #sidebar-box { + min-width: var(--uc-sidebar-activate-width) !important; + max-width: var(--uc-sidebar-activate-width) !important; + margin-inline-start: calc(-1 * var(--uc-sidebar-activate-width)) !important; + will-change: transform; + } + #sidebar-box:not([hidden="true"]) { + transform: translateX(var(--uc-sidebar-activate-width)); + } + @media (prefers-reduced-motion: no-preference) { + #sidebar-box { + transition: transform 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, visibility 0s linear !important; + } + } + } +} /** Other UI ******************************************************************/ /*= Bookmark Bar - Centered ==================================================*/ @supports -moz-bool-pref("userChrome.bookmarkbar.centered") { @@ -5390,46 +5431,6 @@ } } } -@supports -moz-bool-pref("userChrome.sidebar.overlap") or -moz-bool-pref("userChrome.autohide.sidebar") { - #sidebar-box { - /* Original - min-width: 14em; - width: 18em; - max-width: 36em; - */ - --uc-sidebar-width: 40px; - --uc-sidebar-activate-width: 18em; - --uc-sidebar-fullscreen-width: 4px; - --uc-sidebar-shadow-color: #28282f; - --uc-autohide-sidebar-delay: 600ms; - /* Wait 0.6s before hiding sidebar */ - z-index: 1000 !important; - position: relative !important; - box-shadow: 1px 0px 15px -10px var(--uc-sidebar-shadow-color); - } - - #sidebar-splitter { - display: none !important; - } -} -@supports -moz-bool-pref("userChrome.sidebar.overlap") { - @supports not -moz-bool-pref("userChrome.autohide.sidebar") { - #sidebar-box { - min-width: var(--uc-sidebar-activate-width) !important; - max-width: var(--uc-sidebar-activate-width) !important; - margin-inline-start: calc(-1 * var(--uc-sidebar-activate-width)) !important; - will-change: transform; - } - #sidebar-box:not([hidden="true"]) { - transform: translateX(var(--uc-sidebar-activate-width)); - } - @media (prefers-reduced-motion: no-preference) { - #sidebar-box { - transition: transform 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, visibility 0s linear !important; - } - } - } -} @supports -moz-bool-pref("userChrome.autohide.sidebar") { #sidebar-box { min-width: var(--uc-sidebar-width) !important; diff --git a/src/autohide/_sidebar.scss b/src/autohide/_sidebar.scss index 82471843..ba58cd8a 100644 --- a/src/autohide/_sidebar.scss +++ b/src/autohide/_sidebar.scss @@ -1,48 +1,4 @@ -@include Option("userChrome.sidebar.overlap", "userChrome.autohide.sidebar") { - #sidebar-box { - /* Original - min-width: 14em; - width: 18em; - max-width: 36em; - */ - - --uc-sidebar-width: 40px; - --uc-sidebar-activate-width: 18em; - --uc-sidebar-fullscreen-width: 4px; - --uc-sidebar-shadow-color: #28282F; - --uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */ - - z-index: 1000 !important; - position: relative !important; - - box-shadow: 1px 0px 15px -10px var(--uc-sidebar-shadow-color); - } - - #sidebar-splitter { - display: none !important; - } -} - -@include Option("userChrome.sidebar.overlap") { - @include NotOption("userChrome.autohide.sidebar") { - #sidebar-box { - min-width: var(--uc-sidebar-activate-width) !important; - max-width: var(--uc-sidebar-activate-width) !important; - margin-inline-start: calc(-1 * var(--uc-sidebar-activate-width)) !important; - - will-change: transform; - - &:not([hidden="true"]) { - transform: translateX(var(--uc-sidebar-activate-width)); - } - - @include Animate { - transition: transform 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, - visibility 0s linear !important; - } - } - } -} +// Refer variable `src/sidebar/overlap` @include Option("userChrome.autohide.sidebar") { #sidebar-box { @@ -56,7 +12,7 @@ } @include Option("userChrome.sidebar.overlap") { - @import "sidebar/overlay"; + @import "sidebar/overlap"; } @include NotOption("userChrome.sidebar.overlap") { @import "sidebar/static"; diff --git a/src/autohide/sidebar/_overlay.scss b/src/autohide/sidebar/_overlap.scss similarity index 100% rename from src/autohide/sidebar/_overlay.scss rename to src/autohide/sidebar/_overlap.scss diff --git a/src/leptonChrome.scss b/src/leptonChrome.scss index fbce8b16..1a5717bb 100644 --- a/src/leptonChrome.scss +++ b/src/leptonChrome.scss @@ -67,6 +67,9 @@ /** Panel UI ******************************************************************/ @import "panel/index"; +/** Sidebar UI ****************************************************************/ +@import "sidebar/index"; + /** Other UI ******************************************************************/ @import "others/index"; From 046ab3b64a9f2cd5f8b8bb281da43c1f81b9a496 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 12 Jul 2022 13:31:02 +0900 Subject: [PATCH 16/89] Fix: Oneliner - `userChrome.tab.one_line` -> `userChrome.tab.one_liner` --- css/leptonChrome.css | 8 ++++---- src/tabbar/_index.scss | 6 +++--- src/tabbar/{_one_line.scss => _one_liner.scss} | 4 ++-- user.js | 4 ++-- 4 files changed, 11 insertions(+), 11 deletions(-) rename src/tabbar/{_one_line.scss => _one_liner.scss} (87%) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 9e49a65c..1bccfa01 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -3818,7 +3818,7 @@ } } /*= Tab Bar - Oneliner =======================================================*/ -@supports -moz-bool-pref("userChrome.tab.one_line") { +@supports -moz-bool-pref("userChrome.tab.one_liner") { :root { --uc-navbar-size: 40vw; --uc-tabbar-size: calc(100vw - var(--uc-navbar-size)); @@ -3841,7 +3841,7 @@ display: none !important; } - @supports not -moz-bool-pref("userChrome.tab.one_line.tabbar_first") { + @supports not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { #TabsToolbar { margin-inline-start: var(--uc-navbar-size) !important; } @@ -3854,7 +3854,7 @@ display: none !important; } } - @supports -moz-bool-pref("userChrome.tab.one_line.tabbar_first") { + @supports -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { #TabsToolbar { margin-inline-end: var(--uc-navbar-size) !important; } @@ -3869,7 +3869,7 @@ } } /*= Tab Bar - Shared Layout ==================================================*/ -@supports -moz-bool-pref("userChrome.tab.on_bottom") or -moz-bool-pref("userChrome.tab.one_line") { +@supports -moz-bool-pref("userChrome.tab.on_bottom") or -moz-bool-pref("userChrome.tab.one_liner") { @supports -moz-bool-pref("userChrome.tab.on_bottom") or -moz-bool-pref("userChrome.tab.one_line.tabbar_first") { /*= Windows Control - Move to toolbar ========================================*/ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 diff --git a/src/tabbar/_index.scss b/src/tabbar/_index.scss index fe5808f5..4914d4a6 100644 --- a/src/tabbar/_index.scss +++ b/src/tabbar/_index.scss @@ -24,12 +24,12 @@ } /*= Tab Bar - Oneliner =======================================================*/ -@include Option("userChrome.tab.one_line") { - @import "one_line"; +@include Option("userChrome.tab.one_liner") { + @import "one_liner"; } /*= Tab Bar - Shared Layout ==================================================*/ -@include Option("userChrome.tab.on_bottom", "userChrome.tab.one_line") { +@include Option("userChrome.tab.on_bottom", "userChrome.tab.one_liner") { @import "layout"; } diff --git a/src/tabbar/_one_line.scss b/src/tabbar/_one_liner.scss similarity index 87% rename from src/tabbar/_one_line.scss rename to src/tabbar/_one_liner.scss index 15081654..8eed94d3 100644 --- a/src/tabbar/_one_line.scss +++ b/src/tabbar/_one_liner.scss @@ -20,7 +20,7 @@ toolbarspring.chromeclass-toolbar-additional { display: none !important; } -@include NotOption("userChrome.tab.one_line.tabbar_first") { +@include NotOption("userChrome.tab.one_liner.tabbar_first") { #TabsToolbar { margin-inline-start: var(--uc-navbar-size) !important; } @@ -31,7 +31,7 @@ toolbarspring.chromeclass-toolbar-additional { display: none !important; } } -@include Option("userChrome.tab.one_line.tabbar_first") { +@include Option("userChrome.tab.one_liner.tabbar_first") { #TabsToolbar { margin-inline-end: var(--uc-navbar-size) !important; } diff --git a/user.js b/user.js index b158b79f..fbaa1f5f 100644 --- a/user.js +++ b/user.js @@ -98,8 +98,8 @@ user_pref("userChrome.tab.bottom_rounded_corner", true); // user_pref("userChrome.tab.on_bottom", true); // user_pref("userChrome.tab.on_bottom.above_bookmark", true); // Need on_bottom // user_pref("userChrome.tab.on_bottom.menubar_on_top", true); // Need on_bottom -// user_pref("userChrome.tab.one_line", true); -// user_pref("userChrome.tab.one_line.tabbar_first", true); +// user_pref("userChrome.tab.one_liner", true); +// user_pref("userChrome.tab.one_liner.tabbar_first", true); // user_pref("userChrome.tab.as_titlebar", true); // user_pref("userChrome.tab.always_show_tab_icon", true); // user_pref("userChrome.tab.close_button_at_pinned", true); From b5755d8df00e1a4fd32974e935fadd17ea45f173 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 13 Jul 2022 14:34:32 +0900 Subject: [PATCH 17/89] Add: Sidbar - Hidden header --- css/leptonChrome.css | 13 +++++++++++ src/sidebar/_hidden.scss | 14 ++++++++++++ src/sidebar/_index.scss | 5 +++++ src/sidebar/_overlap.scss | 45 +++++++++++++++++++++++++++++++++++++++ user.js | 2 ++ 5 files changed, 79 insertions(+) create mode 100644 src/sidebar/_hidden.scss create mode 100644 src/sidebar/_index.scss create mode 100644 src/sidebar/_overlap.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 1bccfa01..11b4889b 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5374,6 +5374,19 @@ } } } +@supports -moz-bool-pref("userChrome.sidebar.hidden_header") { + @supports not -moz-bool-pref("userChrome.sidebar.hidden_header.vertical_tab_only") { + #sidebar-header { + display: none !important; + } + } + @supports -moz-bool-pref("userChrome.sidebar.hidden_header.vertical_tab_only") { + #sidebar-box:is([sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"], [sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"]) + #sidebar-header { + display: none !important; + } + } +} /** Other UI ******************************************************************/ /*= Bookmark Bar - Centered ==================================================*/ @supports -moz-bool-pref("userChrome.bookmarkbar.centered") { diff --git a/src/sidebar/_hidden.scss b/src/sidebar/_hidden.scss new file mode 100644 index 00000000..94f60011 --- /dev/null +++ b/src/sidebar/_hidden.scss @@ -0,0 +1,14 @@ +@include NotOption("userChrome.sidebar.hidden_header.vertical_tab_only") { + #sidebar-header { + display: none !important; + } +} + +@include Option("userChrome.sidebar.hidden_header.vertical_tab_only") { + #sidebar-box:is( + [sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"], + [sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"] + ) #sidebar-header { + display: none !important; + } +} diff --git a/src/sidebar/_index.scss b/src/sidebar/_index.scss new file mode 100644 index 00000000..27c61d00 --- /dev/null +++ b/src/sidebar/_index.scss @@ -0,0 +1,5 @@ +@import "overlap"; + +@include Option("userChrome.sidebar.hidden_header") { + @import "hidden"; +} diff --git a/src/sidebar/_overlap.scss b/src/sidebar/_overlap.scss new file mode 100644 index 00000000..59c0a22d --- /dev/null +++ b/src/sidebar/_overlap.scss @@ -0,0 +1,45 @@ +@include Option("userChrome.sidebar.overlap", "userChrome.autohide.sidebar") { + #sidebar-box { + /* Original + min-width: 14em; + width: 18em; + max-width: 36em; + */ + + --uc-sidebar-width: 40px; + --uc-sidebar-activate-width: 18em; + --uc-sidebar-fullscreen-width: 4px; + --uc-sidebar-shadow-color: #28282F; + --uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */ + + z-index: 1000 !important; + position: relative !important; + + box-shadow: 1px 0px 15px -10px var(--uc-sidebar-shadow-color); + } + + #sidebar-splitter { + display: none !important; + } +} + +@include Option("userChrome.sidebar.overlap") { + @include NotOption("userChrome.autohide.sidebar") { + #sidebar-box { + min-width: var(--uc-sidebar-activate-width) !important; + max-width: var(--uc-sidebar-activate-width) !important; + margin-inline-start: calc(-1 * var(--uc-sidebar-activate-width)) !important; + + will-change: transform; + + &:not([hidden="true"]) { + transform: translateX(var(--uc-sidebar-activate-width)); + } + + @include Animate { + transition: transform 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, + visibility 0s linear !important; + } + } + } +} diff --git a/user.js b/user.js index fbaa1f5f..6d46603f 100644 --- a/user.js +++ b/user.js @@ -116,6 +116,8 @@ user_pref("userChrome.tab.bottom_rounded_corner", true); // user_pref("userChrome.panel.full_width_separator", true); // user_pref("userChrome.panel.full_width_padding", true); +// user_pref("userChrome.sidebar.hidden_header", true); +// user_pref("userChrome.sidebar.hidden_header.vertical_tab_only", true); // user_pref("userChrome.sidebar.overlap", true); // user_pref("userChrome.icon.account_image_to_right", true); From 1d432538b7d64e9d5f9c1c8e09c6eec99a888194 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 13 Jul 2022 17:07:03 +0900 Subject: [PATCH 18/89] Add: Icons - Vertical tab - Tree Style Tab - Tab Center Reborn --- css/leptonChrome.css | 65 +++++++++++++++++++----- src/icons/context_menu/_others.scss | 3 ++ src/icons/context_menu/_tab_toolbar.scss | 65 +++++++++++++++++++----- 3 files changed, 105 insertions(+), 28 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 11b4889b..5e5c3e46 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6680,50 +6680,76 @@ @supports -moz-bool-pref("userChrome.icon.context_menu") { /** Context Menu - Icons ******************************************************/ /*= tabContextMenu ===========================================================*/ - #context_openANewTab { + #context_openANewTab, + #treestyletab_piro_sakura_ne_jp-menuitem-_context_newTab, + #tabcenter-reborn_ariasuni-menuitem-_newTabContextMenuOpenAlternatePosition { --menuitem-image: url("chrome://browser/skin/new-tab.svg"); } + #tabcenter-reborn_ariasuni-menuitem-_newTabContextMenuOpenInWindow { + --menuitem-image: url("chrome://browser/skin/window.svg"); + } + + #tabcenter-reborn_ariasuni-menuitem-_newTabContextMenuOpenInPrivateWindow { + --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg"); + } + #context_reloadTab, - #context_reloadSelectedTabs { + #context_reloadSelectedTabs, + #treestyletab_piro_sakura_ne_jp-menuitem-_context_reloadTab, + #tabcenter-reborn_ariasuni-menuitem-_contextMenuReloadTab { --menuitem-image: url("../icons/reload.svg"); } #context_toggleMuteTab, - #context_toggleMuteSelectedTabs { + #context_toggleMuteSelectedTabs, + #treestyletab_piro_sakura_ne_jp-menuitem-_context_toggleMuteTab-mute, + #tabcenter-reborn_ariasuni-menuitem-_contextMenuMuteTab { --menuitem-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg"); } #context_toggleMuteTab[muted], - #context_toggleMuteSelectedTabs[muted] { + #context_toggleMuteSelectedTabs[muted], + #treestyletab_piro_sakura_ne_jp-menuitem-_context_toggleMuteTab-unmute, + #tabcenter-reborn_ariasuni-menuitem-_contextMenuMuteTab[label="Unmute Tab"] { --menuitem-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg"); } #context_pinTab, - #context_pinSelectedTabs { + #context_pinSelectedTabs, + #treestyletab_piro_sakura_ne_jp-menuitem-_context_pinTab, + #tabcenter-reborn_ariasuni-menuitem-_contextMenuPinTab { --menuitem-image: url("../icons/pin-tab.svg"); } #context_unpinTab, - #context_unpinSelectedTabs { + #context_unpinSelectedTabs, + #treestyletab_piro_sakura_ne_jp-menuitem-_context_unpinTab, + #tabcenter-reborn_ariasuni-menuitem-_contextMenuPinTab[label="Unpin Tab"] { --menuitem-image: url("../icons/unpin-tab.svg"); } #context_duplicateTab, - #context_duplicateTabs { + #context_duplicateTabs, + #treestyletab_piro_sakura_ne_jp-menuitem-_context_duplicateTab, + #tabcenter-reborn_ariasuni-menuitem-_contextMenuDuplicateTab { --menuitem-image: url("../icons/notebook-subsection.svg"); } #context_bookmarkTab, - #context_bookmarkSelectedTabs { + #context_bookmarkSelectedTabs, + #treestyletab_piro_sakura_ne_jp-menuitem-_context_bookmarkTab { --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } - #context_moveTabOptions { + #context_moveTabOptions, + #treestyletab_piro_sakura_ne_jp-menuitem-_context_moveTab, + #tabcenter-reborn_ariasuni-menuitem-_contextMenuMoveTab { --menuitem-image: url("../icons/arrow-swap.svg"); } - #context_sendTabToDevice { + #context_sendTabToDevice, + #treestyletab_piro_sakura_ne_jp-menuitem-_context_sendTabsToDevice { --menuitem-image: url("../icons/send-to-device.svg"); } @@ -6739,19 +6765,26 @@ --menuitem-image: url("../icons/share.svg"); } } - #context_reopenInContainer { + #context_reopenInContainer, + #treestyletab_piro_sakura_ne_jp-menuitem-_context_reopenInContainer, + #tabcenter-reborn_ariasuni-menuitem-_contextMenuOpenInContextualTab { --menuitem-image: url("../icons/container-openin-16.svg"); } - #context_selectAllTabs { + #context_selectAllTabs, + #treestyletab_piro_sakura_ne_jp-menuitem-_context_selectAllTabs { --menuitem-image: url("../icons/tab-multiple.svg"); } - #context_closeTab { + #context_closeTab, + #treestyletab_piro_sakura_ne_jp-menuitem-_context_closeTab, + #tabcenter-reborn_ariasuni-menuitem-_contextMenuCloseTab { --menuitem-image: url("chrome://global/skin/icons/close.svg"); } - #context_undoCloseTab { + #context_undoCloseTab, + #treestyletab_piro_sakura_ne_jp-menuitem-_context_undoCloseTab, + #tabcenter-reborn_ariasuni-menuitem-_contextMenuUndoCloseTab { --menuitem-image: url("../icons/undo.svg"); } @@ -7542,6 +7575,10 @@ .sync-menuitem.sendtab-target:not([clientType]) { --menuitem-image: url("chrome://global/skin/icons/settings.svg"); } + + #treestyletab_piro_sakura_ne_jp-menuitem-_context_sendTabsToDevice\:manage { + --menuitem-image: url("chrome://global/skin/icons/settings.svg"); + } } @supports -moz-bool-pref("userChrome.icon.global_menubar") { /*= main-menubar =============================================================*/ diff --git a/src/icons/context_menu/_others.scss b/src/icons/context_menu/_others.scss index 2f55da56..453f4052 100644 --- a/src/icons/context_menu/_others.scss +++ b/src/icons/context_menu/_others.scss @@ -204,3 +204,6 @@ menuitem.searchbar-clear-history { --menuitem-image: url("chrome://global/skin/icons/settings.svg"); } } +#treestyletab_piro_sakura_ne_jp-menuitem-_context_sendTabsToDevice\:manage { + --menuitem-image: url("chrome://global/skin/icons/settings.svg"); +} diff --git a/src/icons/context_menu/_tab_toolbar.scss b/src/icons/context_menu/_tab_toolbar.scss index b82fe302..66a92fef 100644 --- a/src/icons/context_menu/_tab_toolbar.scss +++ b/src/icons/context_menu/_tab_toolbar.scss @@ -1,43 +1,71 @@ /*= tabContextMenu ===========================================================*/ -#context_openANewTab { +#context_openANewTab, +#treestyletab_piro_sakura_ne_jp-menuitem-_context_newTab, +#tabcenter-reborn_ariasuni-menuitem-_newTabContextMenuOpenAlternatePosition { --menuitem-image: url("chrome://browser/skin/new-tab.svg"); } +#tabcenter-reborn_ariasuni-menuitem-_newTabContextMenuOpenInWindow { + --menuitem-image: url("chrome://browser/skin/window.svg"); +} +#tabcenter-reborn_ariasuni-menuitem-_newTabContextMenuOpenInPrivateWindow { + --menuitem-image: url("chrome://browser/skin/privateBrowsing.svg"); +} #context_reloadTab, -#context_reloadSelectedTabs { +#context_reloadSelectedTabs, +#treestyletab_piro_sakura_ne_jp-menuitem-_context_reloadTab, +#tabcenter-reborn_ariasuni-menuitem-_contextMenuReloadTab { --menuitem-image: url("../icons/reload.svg"); } #context_toggleMuteTab, -#context_toggleMuteSelectedTabs { +#context_toggleMuteSelectedTabs, +#treestyletab_piro_sakura_ne_jp-menuitem-_context_toggleMuteTab-mute, +#tabcenter-reborn_ariasuni-menuitem-_contextMenuMuteTab { --menuitem-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg"); } #context_toggleMuteTab[muted], -#context_toggleMuteSelectedTabs[muted] { +#context_toggleMuteSelectedTabs[muted], +#treestyletab_piro_sakura_ne_jp-menuitem-_context_toggleMuteTab-unmute, +#tabcenter-reborn_ariasuni-menuitem-_contextMenuMuteTab[label="Unmute Tab"] { --menuitem-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg"); } #context_pinTab, -#context_pinSelectedTabs { +#context_pinSelectedTabs, +#treestyletab_piro_sakura_ne_jp-menuitem-_context_pinTab, +#tabcenter-reborn_ariasuni-menuitem-_contextMenuPinTab { --menuitem-image: url("../icons/pin-tab.svg"); } #context_unpinTab, -#context_unpinSelectedTabs { +#context_unpinSelectedTabs, +#treestyletab_piro_sakura_ne_jp-menuitem-_context_unpinTab, +#tabcenter-reborn_ariasuni-menuitem-_contextMenuPinTab[label="Unpin Tab"] { --menuitem-image: url("../icons/unpin-tab.svg"); } #context_duplicateTab, -#context_duplicateTabs { +#context_duplicateTabs, +#treestyletab_piro_sakura_ne_jp-menuitem-_context_duplicateTab, +#tabcenter-reborn_ariasuni-menuitem-_contextMenuDuplicateTab { --menuitem-image: url("../icons/notebook-subsection.svg"); } +#tabcenter-reborn_ariasuni-menuitem-_contextMenuUnloadTab { +} #context_bookmarkTab, -#context_bookmarkSelectedTabs { +#context_bookmarkSelectedTabs, +#treestyletab_piro_sakura_ne_jp-menuitem-_context_bookmarkTab { --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } -#context_moveTabOptions { +#context_moveTabOptions, +#treestyletab_piro_sakura_ne_jp-menuitem-_context_moveTab, +#tabcenter-reborn_ariasuni-menuitem-_contextMenuMoveTab { --menuitem-image: url("../icons/arrow-swap.svg"); } -#context_sendTabToDevice { +#context_sendTabToDevice, +#treestyletab_piro_sakura_ne_jp-menuitem-_context_sendTabsToDevice { --menuitem-image: url("../icons/send-to-device.svg"); } +#treestyletab_piro_sakura_ne_jp-menuitem-_context_topLevel_sendTreeToDevice { +} #context_sendTabToDevice:is([disabled="true"]) + #context_shareTabURL, /* Legacy */ #context_sendTabToDevice:is([disabled="true"]) + menuitem.share-tab-url-item { @@ -50,19 +78,28 @@ --menuitem-image: url("../icons/share.svg"); } } -#context_reopenInContainer { +#context_reopenInContainer, +#treestyletab_piro_sakura_ne_jp-menuitem-_context_reopenInContainer, +#tabcenter-reborn_ariasuni-menuitem-_contextMenuOpenInContextualTab { --menuitem-image: url("../icons/container-openin-16.svg"); } -#context_selectAllTabs { +#context_selectAllTabs, +#treestyletab_piro_sakura_ne_jp-menuitem-_context_selectAllTabs { --menuitem-image: url("../icons/tab-multiple.svg"); } -#context_closeTab { +#context_closeTab, +#treestyletab_piro_sakura_ne_jp-menuitem-_context_closeTab, +#tabcenter-reborn_ariasuni-menuitem-_contextMenuCloseTab { --menuitem-image: url("chrome://global/skin/icons/close.svg"); } +#tabcenter-reborn_ariasuni-menuitem-_contextMenuCloseTabs { +} #context_closeTabOptions { } -#context_undoCloseTab { +#context_undoCloseTab, +#treestyletab_piro_sakura_ne_jp-menuitem-_context_undoCloseTab, +#tabcenter-reborn_ariasuni-menuitem-_contextMenuUndoCloseTab { --menuitem-image: url("../icons/undo.svg"); } From 9d5ba38ab27509512e1022ae8a2285f9dac7cae5 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 14 Jul 2022 10:23:34 +0900 Subject: [PATCH 19/89] Add: Auto Hide - Bookmark Bar --- css/leptonChrome.css | 53 ++++++++++++++++++++++++++++++++++++++++ src/autohide/_index.scss | 4 +++ user.js | 1 + 3 files changed, 58 insertions(+) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 5e5c3e46..d1e630ea 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5444,6 +5444,59 @@ } } } +@supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { + #PersonalToolbar { + --uc-bm-height: calc(21px + (2 * var(--bookmark-block-padding, 4px))); + /* 21px = 16px + 1px [ border bottom ] + (2px * 2) [margin block] */ + --uc-bm-hide-height: calc(-1 * var(--uc-bm-height)); + --uc-autohide-bookmarkbar-delay: 600ms; + /* The toolbar is hidden after 0.6s */ + } + + #PersonalToolbar:not([customizing]) { + position: relative; + z-index: 1; + --uc-navbar-height: calc(16px + 2 * (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding))); + --uc-bg-y: calc((var(--tab-min-height) + var(--uc-navbar-height)) * -1); + background-repeat: no-repeat, no-repeat, var(--lwt-background-tiling); + background-position: top left, top left, var(--lwt-background-alignment, top left); + background-position-y: top, top, var(--uc-bg-y), var(--uc-bg-y), var(--uc-bg-y); + background-image: var(--toolbar-bgimage), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), + var(--lwt-header-image, var(--lwt-additional-images)) !important; + border-bottom: 1px solid var(--chrome-content-separator-color) !important; + margin-bottom: var(--uc-bm-hide-height); + transform: translateY(-100%); + opacity: 0; + } + + :root[lwtheme-image] #navigator-toolbox:-moz-lwtheme #PersonalToolbar:not([customizing]) { + background-image: var(--lwt-header-image), var(--lwt-additional-images) !important; + background-repeat: var(--lwt-background-tiling) !important; + background-position: var(--lwt-background-alignment) !important; + /* right top */ + } + + #nav-bar:focus-within + #PersonalToolbar, + #navigator-toolbox:hover #PersonalToolbar:not([customizing]) { + z-index: 1001; + transform: translateY(0%); + opacity: 1; + } + + @media (prefers-reduced-motion: no-preference) { + #PersonalToolbar:not([customizing]) { + transition-property: transform, opacity; + transition-duration: 0.25s; + transition-timing-function: var(--animation-easing-function); + transition-delay: var(--uc-autohide-bookmarkbar-delay); + } + + #nav-bar:focus-within + #PersonalToolbar, + #navigator-toolbox:hover #PersonalToolbar:not([customizing]) { + transition-delay: 0s; + } + } +} @supports -moz-bool-pref("userChrome.autohide.sidebar") { #sidebar-box { min-width: var(--uc-sidebar-width) !important; diff --git a/src/autohide/_index.scss b/src/autohide/_index.scss index 5d3c6524..152d2ece 100644 --- a/src/autohide/_index.scss +++ b/src/autohide/_index.scss @@ -2,4 +2,8 @@ @import "forward_button"; } +@include Option("userChrome.autohide.bookmarkbar") { + @import "bookmarkbar"; +} + @import "sidebar"; diff --git a/user.js b/user.js index 6d46603f..5d6eea5d 100644 --- a/user.js +++ b/user.js @@ -70,6 +70,7 @@ user_pref("userChrome.tab.bottom_rounded_corner", true); // user_pref("userChrome.theme.proton_color.dark_blue_accent", true); +// user_pref("userChrome.autohide.bookmarkbar", true); // user_pref("userChrome.autohide.forward_button", true); // user_pref("userChrome.autohide.sidebar", true); From 2320f139efb86d3457510cd6bb8fcf1fe3d97b64 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 14 Jul 2022 10:35:55 +0900 Subject: [PATCH 20/89] Fix: Auto Hide - z-index --- css/leptonChrome.css | 5 ++- src/autohide/_bookmarkbar.scss | 57 ++++++++++++++++++++++++++++++++++ src/sidebar/_overlap.scss | 2 +- 3 files changed, 60 insertions(+), 4 deletions(-) create mode 100644 src/autohide/_bookmarkbar.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index d1e630ea..c2f7ccd4 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5347,7 +5347,7 @@ --uc-sidebar-shadow-color: #28282f; --uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */ - z-index: 1000 !important; + z-index: 1 !important; position: relative !important; box-shadow: 1px 0px 15px -10px var(--uc-sidebar-shadow-color); } @@ -5455,7 +5455,7 @@ #PersonalToolbar:not([customizing]) { position: relative; - z-index: 1; + z-index: 2; --uc-navbar-height: calc(16px + 2 * (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding))); --uc-bg-y: calc((var(--tab-min-height) + var(--uc-navbar-height)) * -1); background-repeat: no-repeat, no-repeat, var(--lwt-background-tiling); @@ -5478,7 +5478,6 @@ #nav-bar:focus-within + #PersonalToolbar, #navigator-toolbox:hover #PersonalToolbar:not([customizing]) { - z-index: 1001; transform: translateY(0%); opacity: 1; } diff --git a/src/autohide/_bookmarkbar.scss b/src/autohide/_bookmarkbar.scss new file mode 100644 index 00000000..cc5a718c --- /dev/null +++ b/src/autohide/_bookmarkbar.scss @@ -0,0 +1,57 @@ +// Based on https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/autohide_bookmarks_toolbar.css + +#PersonalToolbar { + --uc-bm-height: calc(21px + (2 * var(--bookmark-block-padding, 4px))); /* 21px = 16px + 1px [ border bottom ] + (2px * 2) [margin block] */ + --uc-bm-hide-height: calc(-1 * var(--uc-bm-height)); + --uc-autohide-bookmarkbar-delay: 600ms; /* The toolbar is hidden after 0.6s */ +} + +#PersonalToolbar:not([customizing]) { + position: relative; + z-index: 2; + + // Titlebar + Navbar + // --uc-bg-y: calc(-2 * (var(--tab-block-margin) + var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) - var(--tab-min-height) - 16px - var(--bookmark-block-padding)); + --uc-navbar-height: calc(16px + 2 * (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding))); + --uc-bg-y: calc((var(--tab-min-height) + var(--uc-navbar-height)) * -1); + background-repeat: no-repeat, no-repeat, var(--lwt-background-tiling); + background-position: top left, top left, var(--lwt-background-alignment, top left); + background-position-y: top, top, var(--uc-bg-y), var(--uc-bg-y), var(--uc-bg-y); + background-image: var(--toolbar-bgimage), + linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)), + var(--lwt-header-image, + var(--lwt-additional-images)) !important; + + border-bottom: 1px solid var(--chrome-content-separator-color) !important; + + margin-bottom: var(--uc-bm-hide-height); + transform: translateY(-100%); + opacity: 0; +} + +:root[lwtheme-image] #navigator-toolbox:-moz-lwtheme #PersonalToolbar:not([customizing]) { + background-image: var(--lwt-header-image), var(--lwt-additional-images) !important; + background-repeat: var(--lwt-background-tiling) !important; + background-position: var(--lwt-background-alignment) !important; + + /* right top */ +} + +#nav-bar:focus-within + #PersonalToolbar, +#navigator-toolbox:hover #PersonalToolbar:not([customizing]) { + transform: translateY(0%); + opacity: 1; +} + +@include Animate { + #PersonalToolbar:not([customizing]) { + transition-property: transform, opacity; + transition-duration: 0.25s; + transition-timing-function: var(--animation-easing-function); + transition-delay: var(--uc-autohide-bookmarkbar-delay); + } + #nav-bar:focus-within + #PersonalToolbar, + #navigator-toolbox:hover #PersonalToolbar:not([customizing]) { + transition-delay: 0s; + } +} diff --git a/src/sidebar/_overlap.scss b/src/sidebar/_overlap.scss index 59c0a22d..baa0157f 100644 --- a/src/sidebar/_overlap.scss +++ b/src/sidebar/_overlap.scss @@ -12,7 +12,7 @@ --uc-sidebar-shadow-color: #28282F; --uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */ - z-index: 1000 !important; + z-index: 1 !important; position: relative !important; box-shadow: 1px 0px 15px -10px var(--uc-sidebar-shadow-color); From 881f2ef78affb8d82b5091d05fc4d22396c9a5cc Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 16 Jul 2022 19:10:25 +0900 Subject: [PATCH 21/89] Add: Auto Hide - Nav Bar --- css/leptonChrome.css | 64 +++++++++++++++++++++++++++++++++- src/autohide/_bookmarkbar.scss | 1 - src/autohide/_common.scss | 6 ++++ src/autohide/_index.scss | 4 +++ src/autohide/_navbar.scss | 51 +++++++++++++++++++++++++++ user.js | 3 +- 6 files changed, 126 insertions(+), 3 deletions(-) create mode 100644 src/autohide/_common.scss create mode 100644 src/autohide/_navbar.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index c2f7ccd4..324ad496 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5444,6 +5444,12 @@ } } } +@supports -moz-bool-pref("userChrome.autohide.navbar") or -moz-bool-pref("userChrome.autohide.bookmarkbar") { + :root { + --uc-navbar-height: calc(16px + 2 * (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding))); + --uc-navbar-hide-height: calc(-1 * var(--uc-navbar-height)); + } +} @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { #PersonalToolbar { --uc-bm-height: calc(21px + (2 * var(--bookmark-block-padding, 4px))); @@ -5456,7 +5462,6 @@ #PersonalToolbar:not([customizing]) { position: relative; z-index: 2; - --uc-navbar-height: calc(16px + 2 * (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding))); --uc-bg-y: calc((var(--tab-min-height) + var(--uc-navbar-height)) * -1); background-repeat: no-repeat, no-repeat, var(--lwt-background-tiling); background-position: top left, top left, var(--lwt-background-alignment, top left); @@ -5496,6 +5501,63 @@ } } } +@supports -moz-bool-pref("userChrome.autohide.navbar") { + #navigator-toolbox > div { + display: contents; + } + + :root[sessionrestored] :where(#nav-bar, #PersonalToolbar, #tab-notification-deck, .global-notificationbox) { + transform: translateY(var(--uc-navbar-hide-height)); + } + + :root:is([customizing], [chromehidden*="toolbar"]) + :where(#nav-bar, #PersonalToolbar, #tab-notification-deck, .global-notificationbox) { + transform: none !important; + opacity: 1 !important; + } + + #nav-bar:not([customizing]) { + opacity: 0; + transition: transform 400ms ease 1.8s, opacity 400ms ease 1.8s !important; + position: relative; + z-index: 2; + } + + #TabsToolbar { + position: relative; + z-index: 3; + } + + /* Show when toolbox is focused, like when urlbar has received focus */ + #navigator-toolbox:focus-within > .browser-toolbar { + transform: translateY(0); + opacity: 1; + transition-duration: 500ms, 200ms !important; + transition-delay: 0s !important; + } + + /* Show when toolbox is hovered */ + #titlebar:hover ~ .browser-toolbar, + #nav-bar:hover, + #nav-bar:hover + #PersonalToolbar { + transform: translateY(0); + opacity: 1; + transition-duration: 500ms, 200ms !important; + transition-delay: 0s !important; + } + + /* Bookmarks toolbar needs so extra rules */ + #PersonalToolbar { + transition: transform 400ms ease 1.8s !important; + position: relative; + z-index: 1; + } + + /* Move up the content view */ + :root[sessionrestored]:not([inFullscreen]) > body > #browser { + margin-top: var(--uc-navbar-hide-height); + } +} @supports -moz-bool-pref("userChrome.autohide.sidebar") { #sidebar-box { min-width: var(--uc-sidebar-width) !important; diff --git a/src/autohide/_bookmarkbar.scss b/src/autohide/_bookmarkbar.scss index cc5a718c..2bdf17b0 100644 --- a/src/autohide/_bookmarkbar.scss +++ b/src/autohide/_bookmarkbar.scss @@ -12,7 +12,6 @@ // Titlebar + Navbar // --uc-bg-y: calc(-2 * (var(--tab-block-margin) + var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) - var(--tab-min-height) - 16px - var(--bookmark-block-padding)); - --uc-navbar-height: calc(16px + 2 * (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding))); --uc-bg-y: calc((var(--tab-min-height) + var(--uc-navbar-height)) * -1); background-repeat: no-repeat, no-repeat, var(--lwt-background-tiling); background-position: top left, top left, var(--lwt-background-alignment, top left); diff --git a/src/autohide/_common.scss b/src/autohide/_common.scss new file mode 100644 index 00000000..6bcb448b --- /dev/null +++ b/src/autohide/_common.scss @@ -0,0 +1,6 @@ +@include Option("userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar") { + :root { + --uc-navbar-height: calc(16px + 2 * (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding))); + --uc-navbar-hide-height: calc(-1 * var(--uc-navbar-height)); + } +} diff --git a/src/autohide/_index.scss b/src/autohide/_index.scss index 152d2ece..e59b95e5 100644 --- a/src/autohide/_index.scss +++ b/src/autohide/_index.scss @@ -2,6 +2,10 @@ @import "forward_button"; } +@import "common"; +@include Option("userChrome.autohide.navbar") { + @import "navbar"; +} @include Option("userChrome.autohide.bookmarkbar") { @import "bookmarkbar"; } diff --git a/src/autohide/_navbar.scss b/src/autohide/_navbar.scss new file mode 100644 index 00000000..73ef4c12 --- /dev/null +++ b/src/autohide/_navbar.scss @@ -0,0 +1,51 @@ +#navigator-toolbox > div { + display: contents; +} +:root[sessionrestored] :where(#nav-bar, #PersonalToolbar, #tab-notification-deck, .global-notificationbox) { + transform: translateY(var(--uc-navbar-hide-height)); +} +:root:is([customizing], [chromehidden*="toolbar"]) :where(#nav-bar, #PersonalToolbar, #tab-notification-deck, .global-notificationbox) { + transform: none !important; + opacity: 1 !important; +} + +#nav-bar:not([customizing]) { + opacity: 0; + transition: transform 400ms ease 1.8s, opacity 400ms ease 1.8s !important; + position: relative; + z-index: 2; +} +#TabsToolbar { + position: relative; + z-index: 3; +} + +/* Show when toolbox is focused, like when urlbar has received focus */ +#navigator-toolbox:focus-within > .browser-toolbar { + transform: translateY(0); + opacity: 1; + transition-duration: 500ms, 200ms !important; + transition-delay: 0s !important; +} + +/* Show when toolbox is hovered */ +#titlebar:hover ~ .browser-toolbar, +#nav-bar:hover, +#nav-bar:hover + #PersonalToolbar { + transform: translateY(0); + opacity: 1; + transition-duration: 500ms, 200ms !important; + transition-delay: 0s !important; +} + +/* Bookmarks toolbar needs so extra rules */ +#PersonalToolbar { + transition: transform 400ms ease 1.8s !important; + position: relative; + z-index: 1; +} + +/* Move up the content view */ +:root[sessionrestored]:not([inFullscreen]) > body > #browser{ + margin-top: var(--uc-navbar-hide-height); +} diff --git a/user.js b/user.js index 5d6eea5d..08e2d744 100644 --- a/user.js +++ b/user.js @@ -71,8 +71,9 @@ user_pref("userChrome.tab.bottom_rounded_corner", true); // user_pref("userChrome.theme.proton_color.dark_blue_accent", true); // user_pref("userChrome.autohide.bookmarkbar", true); -// user_pref("userChrome.autohide.forward_button", true); +// user_pref("userChrome.autohide.navbar", true); // user_pref("userChrome.autohide.sidebar", true); +// user_pref("userChrome.autohide.forward_button", true); // user_pref("userChrome.rounding.square_button", true); // user_pref("userChrome.rounding.square_panel", true); From bf6f69ceaeefa792a828d02c9294eb629c01e45c Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 17 Jul 2022 02:39:58 +0900 Subject: [PATCH 22/89] Fix: Auto Hide - Navbar with bookmarkbar --- css/leptonChrome.css | 133 ++++++++++++++++----------------- src/autohide/_bookmarkbar.scss | 20 ++--- src/autohide/_common.scss | 5 ++ src/autohide/_navbar.scss | 46 ++++++------ 4 files changed, 97 insertions(+), 107 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 324ad496..a4c16821 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5449,19 +5449,72 @@ --uc-navbar-height: calc(16px + 2 * (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding))); --uc-navbar-hide-height: calc(-1 * var(--uc-navbar-height)); } + + #PersonalToolbar:not([customizing]) { + position: relative; + z-index: 2; + } +} +@supports -moz-bool-pref("userChrome.autohide.navbar") { + :root[sessionrestored] :where(#nav-bar, #PersonalToolbar, #tab-notification-deck, .global-notificationbox) { + transform: translateY(var(--uc-navbar-hide-height)); + } + + :root:is([customizing], [chromehidden*="toolbar"]) + :where(#nav-bar, #PersonalToolbar, #tab-notification-deck, .global-notificationbox) { + transform: none !important; + opacity: 1 !important; + } + + #navigator-toolbox > div { + display: contents; + } + + #nav-bar:not([customizing]) { + --uc-autohide-navbar-delay: 600ms; + position: relative; + z-index: 2; + opacity: 0; + } + + #TabsToolbar { + position: relative; + z-index: 3; + } + + #navigator-toolbox:is(:hover, :focus-within) > .browser-toolbar { + transform: translateY(0); + opacity: 1; + } + + /* Move up the content view */ + :root[sessionrestored]:not([inFullscreen]) > body > #browser { + margin-top: var(--uc-navbar-hide-height); + } + + :root[sessionrestored] #nav-bar:-moz-lwtheme { + transition: var(--ext-theme-background-transition); + } + + @media (prefers-reduced-motion: no-preference) { + #nav-bar:not([customizing]) { + transition: transform 0.25s var(--animation-easing-function) var(--uc-autohide-navbar-delay), + opacity 0.25s var(--animation-easing-function) var(--uc-autohide-navbar-delay), + var(--ext-theme-background-transition) !important; + } + + #navigator-toolbox:is(:hover, :focus-within) > .browser-toolbar { + transition-delay: 0s !important; + } + } } @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { - #PersonalToolbar { + #PersonalToolbar:not([customizing]) { --uc-bm-height: calc(21px + (2 * var(--bookmark-block-padding, 4px))); /* 21px = 16px + 1px [ border bottom ] + (2px * 2) [margin block] */ --uc-bm-hide-height: calc(-1 * var(--uc-bm-height)); --uc-autohide-bookmarkbar-delay: 600ms; /* The toolbar is hidden after 0.6s */ - } - - #PersonalToolbar:not([customizing]) { - position: relative; - z-index: 2; --uc-bg-y: calc((var(--tab-min-height) + var(--uc-navbar-height)) * -1); background-repeat: no-repeat, no-repeat, var(--lwt-background-tiling); background-position: top left, top left, var(--lwt-background-alignment, top left); @@ -5481,7 +5534,7 @@ /* right top */ } - #nav-bar:focus-within + #PersonalToolbar, + #nav-bar:focus-within + #PersonalToolbar:not([customizing]), #navigator-toolbox:hover #PersonalToolbar:not([customizing]) { transform: translateY(0%); opacity: 1; @@ -5489,75 +5542,17 @@ @media (prefers-reduced-motion: no-preference) { #PersonalToolbar:not([customizing]) { - transition-property: transform, opacity; - transition-duration: 0.25s; - transition-timing-function: var(--animation-easing-function); - transition-delay: var(--uc-autohide-bookmarkbar-delay); + transition: transform 0.25s var(--animation-easing-function) var(--uc-autohide-bookmarkbar-delay), + opacity 0.25s var(--animation-easing-function) var(--uc-autohide-bookmarkbar-delay), min-height 170ms ease-out, + max-height 170ms ease-out, var(--ext-theme-background-transition) !important; } - #nav-bar:focus-within + #PersonalToolbar, + #nav-bar:focus-within + #PersonalToolbar:not([customizing]), #navigator-toolbox:hover #PersonalToolbar:not([customizing]) { transition-delay: 0s; } } } -@supports -moz-bool-pref("userChrome.autohide.navbar") { - #navigator-toolbox > div { - display: contents; - } - - :root[sessionrestored] :where(#nav-bar, #PersonalToolbar, #tab-notification-deck, .global-notificationbox) { - transform: translateY(var(--uc-navbar-hide-height)); - } - - :root:is([customizing], [chromehidden*="toolbar"]) - :where(#nav-bar, #PersonalToolbar, #tab-notification-deck, .global-notificationbox) { - transform: none !important; - opacity: 1 !important; - } - - #nav-bar:not([customizing]) { - opacity: 0; - transition: transform 400ms ease 1.8s, opacity 400ms ease 1.8s !important; - position: relative; - z-index: 2; - } - - #TabsToolbar { - position: relative; - z-index: 3; - } - - /* Show when toolbox is focused, like when urlbar has received focus */ - #navigator-toolbox:focus-within > .browser-toolbar { - transform: translateY(0); - opacity: 1; - transition-duration: 500ms, 200ms !important; - transition-delay: 0s !important; - } - - /* Show when toolbox is hovered */ - #titlebar:hover ~ .browser-toolbar, - #nav-bar:hover, - #nav-bar:hover + #PersonalToolbar { - transform: translateY(0); - opacity: 1; - transition-duration: 500ms, 200ms !important; - transition-delay: 0s !important; - } - - /* Bookmarks toolbar needs so extra rules */ - #PersonalToolbar { - transition: transform 400ms ease 1.8s !important; - position: relative; - z-index: 1; - } - - /* Move up the content view */ - :root[sessionrestored]:not([inFullscreen]) > body > #browser { - margin-top: var(--uc-navbar-hide-height); - } -} @supports -moz-bool-pref("userChrome.autohide.sidebar") { #sidebar-box { min-width: var(--uc-sidebar-width) !important; diff --git a/src/autohide/_bookmarkbar.scss b/src/autohide/_bookmarkbar.scss index 2bdf17b0..dc7a7745 100644 --- a/src/autohide/_bookmarkbar.scss +++ b/src/autohide/_bookmarkbar.scss @@ -1,14 +1,8 @@ // Based on https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/autohide_bookmarks_toolbar.css - -#PersonalToolbar { +#PersonalToolbar:not([customizing]) { --uc-bm-height: calc(21px + (2 * var(--bookmark-block-padding, 4px))); /* 21px = 16px + 1px [ border bottom ] + (2px * 2) [margin block] */ --uc-bm-hide-height: calc(-1 * var(--uc-bm-height)); --uc-autohide-bookmarkbar-delay: 600ms; /* The toolbar is hidden after 0.6s */ -} - -#PersonalToolbar:not([customizing]) { - position: relative; - z-index: 2; // Titlebar + Navbar // --uc-bg-y: calc(-2 * (var(--tab-block-margin) + var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) - var(--tab-min-height) - 16px - var(--bookmark-block-padding)); @@ -36,7 +30,7 @@ /* right top */ } -#nav-bar:focus-within + #PersonalToolbar, +#nav-bar:focus-within + #PersonalToolbar:not([customizing]), #navigator-toolbox:hover #PersonalToolbar:not([customizing]) { transform: translateY(0%); opacity: 1; @@ -44,12 +38,12 @@ @include Animate { #PersonalToolbar:not([customizing]) { - transition-property: transform, opacity; - transition-duration: 0.25s; - transition-timing-function: var(--animation-easing-function); - transition-delay: var(--uc-autohide-bookmarkbar-delay); + // --ext-theme-background-transition: background-color 0.1s cubic-bezier(.17,.67,.83,.67); + transition: transform 0.25s var(--animation-easing-function) var(--uc-autohide-bookmarkbar-delay), + opacity 0.25s var(--animation-easing-function) var(--uc-autohide-bookmarkbar-delay), + min-height 170ms ease-out, max-height 170ms ease-out, var(--ext-theme-background-transition) !important; } - #nav-bar:focus-within + #PersonalToolbar, + #nav-bar:focus-within + #PersonalToolbar:not([customizing]), #navigator-toolbox:hover #PersonalToolbar:not([customizing]) { transition-delay: 0s; } diff --git a/src/autohide/_common.scss b/src/autohide/_common.scss index 6bcb448b..be286073 100644 --- a/src/autohide/_common.scss +++ b/src/autohide/_common.scss @@ -3,4 +3,9 @@ --uc-navbar-height: calc(16px + 2 * (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding))); --uc-navbar-hide-height: calc(-1 * var(--uc-navbar-height)); } + + #PersonalToolbar:not([customizing]) { + position: relative; + z-index: 2; + } } diff --git a/src/autohide/_navbar.scss b/src/autohide/_navbar.scss index 73ef4c12..43602d0c 100644 --- a/src/autohide/_navbar.scss +++ b/src/autohide/_navbar.scss @@ -1,6 +1,3 @@ -#navigator-toolbox > div { - display: contents; -} :root[sessionrestored] :where(#nav-bar, #PersonalToolbar, #tab-notification-deck, .global-notificationbox) { transform: translateY(var(--uc-navbar-hide-height)); } @@ -8,44 +5,43 @@ transform: none !important; opacity: 1 !important; } +#navigator-toolbox > div { + display: contents; +} #nav-bar:not([customizing]) { - opacity: 0; - transition: transform 400ms ease 1.8s, opacity 400ms ease 1.8s !important; + --uc-autohide-navbar-delay: 600ms; position: relative; z-index: 2; + + opacity: 0; } #TabsToolbar { position: relative; z-index: 3; } -/* Show when toolbox is focused, like when urlbar has received focus */ -#navigator-toolbox:focus-within > .browser-toolbar { +#navigator-toolbox:is(:hover, :focus-within) > .browser-toolbar { transform: translateY(0); opacity: 1; - transition-duration: 500ms, 200ms !important; - transition-delay: 0s !important; } -/* Show when toolbox is hovered */ -#titlebar:hover ~ .browser-toolbar, -#nav-bar:hover, -#nav-bar:hover + #PersonalToolbar { - transform: translateY(0); - opacity: 1; - transition-duration: 500ms, 200ms !important; - transition-delay: 0s !important; +/* Move up the content view */ +:root[sessionrestored]:not([inFullscreen]) > body > #browser{ + margin-top: var(--uc-navbar-hide-height); } -/* Bookmarks toolbar needs so extra rules */ -#PersonalToolbar { - transition: transform 400ms ease 1.8s !important; - position: relative; - z-index: 1; +:root[sessionrestored] #nav-bar:-moz-lwtheme { + transition: var(--ext-theme-background-transition); } -/* Move up the content view */ -:root[sessionrestored]:not([inFullscreen]) > body > #browser{ - margin-top: var(--uc-navbar-hide-height); +@include Animate { + #nav-bar:not([customizing]) { + transition: transform 0.25s var(--animation-easing-function) var(--uc-autohide-navbar-delay), + opacity 0.25s var(--animation-easing-function) var(--uc-autohide-navbar-delay), + var(--ext-theme-background-transition) !important; + } + #navigator-toolbox:is(:hover, :focus-within) > .browser-toolbar { + transition-delay: 0s !important; + } } From d7e56da00d16395d11cf9a9b322437ee3f1c4653 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 18 Jul 2022 02:59:27 +0900 Subject: [PATCH 23/89] Add: Auto Hide - Tab Bar --- css/leptonChrome.css | 48 ++++++++++++++++++++++++++++++ src/autohide/_index.scss | 3 ++ src/autohide/_tabbar.scss | 61 +++++++++++++++++++++++++++++++++++++++ user.js | 3 +- 4 files changed, 114 insertions(+), 1 deletion(-) create mode 100644 src/autohide/_tabbar.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index a4c16821..3651f27e 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5455,6 +5455,54 @@ z-index: 2; } } +@supports -moz-bool-pref("userChrome.autohide.tabbar") { + :root:not([customizing]) #navigator-toolbox { + position: relative; + z-index: 1; + } + + #navigator-toolbox:not(:hover) > #titlebar { + -moz-window-dragging: no-drag !important; + pointer-events: none; + } + + :root:not([customizing]) #navigator-toolbox:hover, + :root:not([customizing]) #titlebar { + margin-bottom: calc(0px - 2 * var(--tab-block-margin) - var(--tab-min-height)); + } + + #TabsToolbar:not([customizing]) { + opacity: 0; + } + + #navigator-toolbox:hover > #titlebar { + margin-bottom: 0px; + } + #navigator-toolbox:hover #TabsToolbar { + opacity: 1; + } + + @media (prefers-reduced-motion: no-preference) { + #navigator-toolbox, + #titlebar { + transition: margin-bottom 0.25s var(--animation-easing-function) 600ms; + } + + #TabsToolbar:not([customizing]) { + transition: opacity 0.25s var(--animation-easing-function) 600ms; + } + + #navigator-toolbox:hover { + transition-delay: 0s; + } + #navigator-toolbox:hover > #titlebar { + transition-delay: 0s; + } + #navigator-toolbox:hover #TabsToolbar { + transition-delay: 0s; + } + } +} @supports -moz-bool-pref("userChrome.autohide.navbar") { :root[sessionrestored] :where(#nav-bar, #PersonalToolbar, #tab-notification-deck, .global-notificationbox) { transform: translateY(var(--uc-navbar-hide-height)); diff --git a/src/autohide/_index.scss b/src/autohide/_index.scss index e59b95e5..50de57d4 100644 --- a/src/autohide/_index.scss +++ b/src/autohide/_index.scss @@ -3,6 +3,9 @@ } @import "common"; +@include Option("userChrome.autohide.tabbar") { + @import "tabbar"; +} @include Option("userChrome.autohide.navbar") { @import "navbar"; } diff --git a/src/autohide/_tabbar.scss b/src/autohide/_tabbar.scss new file mode 100644 index 00000000..a55060e2 --- /dev/null +++ b/src/autohide/_tabbar.scss @@ -0,0 +1,61 @@ +:root:not([customizing]) #navigator-toolbox { + position: relative; + z-index: 1; +} + +#navigator-toolbox:not(:hover) > #titlebar { + -moz-window-dragging: no-drag !important; + pointer-events: none +} + +:root:not([customizing]) #navigator-toolbox:hover, +:root:not([customizing]) #titlebar { + margin-bottom: calc(0px - 2 * var(--tab-block-margin) - var(--tab-min-height)); +} + +#TabsToolbar:not([customizing]) { + opacity: 0; +} + +#navigator-toolbox:hover { + > #titlebar { + margin-bottom: 0px; + } + #TabsToolbar { + opacity: 1; + } +} + +@include Animate { + #navigator-toolbox, + #titlebar { + transition: margin-bottom 0.25s var(--animation-easing-function) 600ms; + } + + #TabsToolbar:not([customizing]) { + transition: opacity 0.25s var(--animation-easing-function) 600ms; + } + + #navigator-toolbox:hover { + transition-delay: 0s; + + > #titlebar { + transition-delay: 0s; + } + + #TabsToolbar { + transition-delay: 0s; + } + } +} + +// /* 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/user.js b/user.js index 08e2d744..588804ee 100644 --- a/user.js +++ b/user.js @@ -70,8 +70,9 @@ user_pref("userChrome.tab.bottom_rounded_corner", true); // user_pref("userChrome.theme.proton_color.dark_blue_accent", true); -// user_pref("userChrome.autohide.bookmarkbar", true); +// user_pref("userChrome.autohide.tabbar", true); // user_pref("userChrome.autohide.navbar", true); +// user_pref("userChrome.autohide.bookmarkbar", true); // user_pref("userChrome.autohide.sidebar", true); // user_pref("userChrome.autohide.forward_button", true); From df81a4446164eb06f21e4a63c23672c316f6a2b6 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 18 Jul 2022 04:53:59 +0900 Subject: [PATCH 24/89] Fix: Auto Hide - tabbar with navbar --- css/leptonChrome.css | 29 +++++++++++++++++++++++------ src/autohide/_tabbar.scss | 26 ++++++++++++++++++++------ 2 files changed, 43 insertions(+), 12 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 3651f27e..c3c3283a 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5456,6 +5456,16 @@ } } @supports -moz-bool-pref("userChrome.autohide.tabbar") { + :root { + --uc-titlebar-height: calc((var(--tab-block-margin) * 2) + var(--tab-min-height)); + --uc-titlebar-autohide-height: calc(-1 * var(--uc-titlebar-height)); + } + @supports -moz-bool-pref("userChrome.autohide.navbar") { + :root { + --uc-titlebar-autohide-height: calc(-1 * (var(--uc-titlebar-height) + var(--uc-navbar-height))); + } + } + :root:not([customizing]) #navigator-toolbox { position: relative; z-index: 1; @@ -5468,7 +5478,13 @@ :root:not([customizing]) #navigator-toolbox:hover, :root:not([customizing]) #titlebar { - margin-bottom: calc(0px - 2 * var(--tab-block-margin) - var(--tab-min-height)); + margin-bottom: var(--uc-titlebar-autohide-height); + } + @supports -moz-bool-pref("userChrome.autohide.navbar") { + :root:not([customizing]) #navigator-toolbox:hover, + :root:not([customizing]) #titlebar { + border-bottom: 1px solid var(--chrome-content-separator-color) !important; + } } #TabsToolbar:not([customizing]) { @@ -5485,21 +5501,22 @@ @media (prefers-reduced-motion: no-preference) { #navigator-toolbox, #titlebar { - transition: margin-bottom 0.25s var(--animation-easing-function) 600ms; + transition: margin-bottom 0.25s var(--animation-easing-function) 600ms, + background-color 1s var(--animation-easing-function) !important; } #TabsToolbar:not([customizing]) { - transition: opacity 0.25s var(--animation-easing-function) 600ms; + transition: opacity 0.25s var(--animation-easing-function) 600ms !important; } #navigator-toolbox:hover { - transition-delay: 0s; + transition-delay: 0s !important; } #navigator-toolbox:hover > #titlebar { - transition-delay: 0s; + transition-delay: 0s !important; } #navigator-toolbox:hover #TabsToolbar { - transition-delay: 0s; + transition-delay: 0s !important; } } } diff --git a/src/autohide/_tabbar.scss b/src/autohide/_tabbar.scss index a55060e2..d28c48bb 100644 --- a/src/autohide/_tabbar.scss +++ b/src/autohide/_tabbar.scss @@ -1,3 +1,12 @@ +:root { + --uc-titlebar-height: calc((var(--tab-block-margin) * 2) + var(--tab-min-height)); + --uc-titlebar-autohide-height: calc(-1 * var(--uc-titlebar-height)); + + @include Option("userChrome.autohide.navbar") { + --uc-titlebar-autohide-height: calc(-1 * (var(--uc-titlebar-height) + var(--uc-navbar-height))); + } +} + :root:not([customizing]) #navigator-toolbox { position: relative; z-index: 1; @@ -10,7 +19,11 @@ :root:not([customizing]) #navigator-toolbox:hover, :root:not([customizing]) #titlebar { - margin-bottom: calc(0px - 2 * var(--tab-block-margin) - var(--tab-min-height)); + margin-bottom: var(--uc-titlebar-autohide-height); + + @include Option("userChrome.autohide.navbar") { + border-bottom: 1px solid var(--chrome-content-separator-color) !important; + } } #TabsToolbar:not([customizing]) { @@ -29,22 +42,23 @@ @include Animate { #navigator-toolbox, #titlebar { - transition: margin-bottom 0.25s var(--animation-easing-function) 600ms; + transition: margin-bottom 0.25s var(--animation-easing-function) 600ms, + background-color 1s var(--animation-easing-function) !important; } #TabsToolbar:not([customizing]) { - transition: opacity 0.25s var(--animation-easing-function) 600ms; + transition: opacity 0.25s var(--animation-easing-function) 600ms !important; } #navigator-toolbox:hover { - transition-delay: 0s; + transition-delay: 0s !important; > #titlebar { - transition-delay: 0s; + transition-delay: 0s !important; } #TabsToolbar { - transition-delay: 0s; + transition-delay: 0s !important; } } } From 9cca8a3bfb11bf3945dcaa5e0107db12571777db Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 18 Jul 2022 16:53:41 +0900 Subject: [PATCH 25/89] Fix: Auto Hide - Makes simple --- css/leptonChrome.css | 138 ++++++++++----------------------- src/autohide/_bookmarkbar.scss | 41 ++-------- src/autohide/_common.scss | 17 +++- src/autohide/_navbar.scss | 40 ++-------- src/autohide/_tabbar.scss | 50 +++--------- 5 files changed, 78 insertions(+), 208 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index c3c3283a..4a284cb3 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5444,177 +5444,119 @@ } } } -@supports -moz-bool-pref("userChrome.autohide.navbar") or -moz-bool-pref("userChrome.autohide.bookmarkbar") { +@supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.autohide.navbar") or -moz-bool-pref( + "userChrome.autohide.bookmarkbar" + ) { :root { + --uc-titlebar-height: calc((var(--tab-block-margin) * 2) + var(--tab-min-height)); + --uc-titlebar-hide-height: calc(-1 * var(--uc-titlebar-height)); --uc-navbar-height: 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(21px + (2 * var(--bookmark-block-padding, 4px))); + /* 21px = 16px + 1px [ border bottom ] + (2px * 2) [margin block] */ + --uc-bm-hide-height: calc(-1 * var(--uc-bm-height)); + --uc-autohide-toolbar-delay: 600ms; } - #PersonalToolbar:not([customizing]) { + #navigator-toolbox { position: relative; - z-index: 2; - } -} -@supports -moz-bool-pref("userChrome.autohide.tabbar") { - :root { - --uc-titlebar-height: calc((var(--tab-block-margin) * 2) + var(--tab-min-height)); - --uc-titlebar-autohide-height: calc(-1 * var(--uc-titlebar-height)); - } - @supports -moz-bool-pref("userChrome.autohide.navbar") { - :root { - --uc-titlebar-autohide-height: calc(-1 * (var(--uc-titlebar-height) + var(--uc-navbar-height))); - } + z-index: 1; } - :root:not([customizing]) #navigator-toolbox { + #TabsToolbar { position: relative; - z-index: 1; + z-index: 3; } - +} +@supports -moz-bool-pref("userChrome.autohide.tabbar") { #navigator-toolbox:not(:hover) > #titlebar { -moz-window-dragging: no-drag !important; pointer-events: none; } - :root:not([customizing]) #navigator-toolbox:hover, :root:not([customizing]) #titlebar { - margin-bottom: var(--uc-titlebar-autohide-height); - } - @supports -moz-bool-pref("userChrome.autohide.navbar") { - :root:not([customizing]) #navigator-toolbox:hover, - :root:not([customizing]) #titlebar { - border-bottom: 1px solid var(--chrome-content-separator-color) !important; - } + margin-bottom: var(--uc-titlebar-hide-height); + will-change: margin-bottom; } #TabsToolbar:not([customizing]) { opacity: 0; + will-change: opacity; } - #navigator-toolbox:hover > #titlebar { + #navigator-toolbox:is(:hover, :focus-within) > #titlebar { margin-bottom: 0px; } - #navigator-toolbox:hover #TabsToolbar { + #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar { opacity: 1; } @media (prefers-reduced-motion: no-preference) { - #navigator-toolbox, - #titlebar { - transition: margin-bottom 0.25s var(--animation-easing-function) 600ms, + #titlebar:not([customizing]) { + transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), background-color 1s var(--animation-easing-function) !important; } #TabsToolbar:not([customizing]) { - transition: opacity 0.25s var(--animation-easing-function) 600ms !important; + transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay) !important; } - #navigator-toolbox:hover { + #navigator-toolbox:is(:hover, :focus-within) { transition-delay: 0s !important; } - #navigator-toolbox:hover > #titlebar { + #navigator-toolbox:is(:hover, :focus-within) > #titlebar:not([customizing]) { transition-delay: 0s !important; } - #navigator-toolbox:hover #TabsToolbar { + #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar:not([customizing]) { transition-delay: 0s !important; } } } @supports -moz-bool-pref("userChrome.autohide.navbar") { - :root[sessionrestored] :where(#nav-bar, #PersonalToolbar, #tab-notification-deck, .global-notificationbox) { - transform: translateY(var(--uc-navbar-hide-height)); - } - - :root:is([customizing], [chromehidden*="toolbar"]) - :where(#nav-bar, #PersonalToolbar, #tab-notification-deck, .global-notificationbox) { - transform: none !important; - opacity: 1 !important; - } - - #navigator-toolbox > div { - display: contents; - } - #nav-bar:not([customizing]) { - --uc-autohide-navbar-delay: 600ms; - position: relative; - z-index: 2; + margin-bottom: var(--uc-titlebar-hide-height); opacity: 0; + will-change: margin-bottom, opacity; } - #TabsToolbar { - position: relative; - z-index: 3; - } - - #navigator-toolbox:is(:hover, :focus-within) > .browser-toolbar { - transform: translateY(0); + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { + margin-bottom: 0; opacity: 1; } - /* Move up the content view */ - :root[sessionrestored]:not([inFullscreen]) > body > #browser { - margin-top: var(--uc-navbar-hide-height); - } - - :root[sessionrestored] #nav-bar:-moz-lwtheme { - transition: var(--ext-theme-background-transition); - } - @media (prefers-reduced-motion: no-preference) { #nav-bar:not([customizing]) { - transition: transform 0.25s var(--animation-easing-function) var(--uc-autohide-navbar-delay), - opacity 0.25s var(--animation-easing-function) var(--uc-autohide-navbar-delay), + transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), var(--ext-theme-background-transition) !important; } - #navigator-toolbox:is(:hover, :focus-within) > .browser-toolbar { + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { transition-delay: 0s !important; } } } @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { #PersonalToolbar:not([customizing]) { - --uc-bm-height: calc(21px + (2 * var(--bookmark-block-padding, 4px))); - /* 21px = 16px + 1px [ border bottom ] + (2px * 2) [margin block] */ - --uc-bm-hide-height: calc(-1 * var(--uc-bm-height)); - --uc-autohide-bookmarkbar-delay: 600ms; - /* The toolbar is hidden after 0.6s */ - --uc-bg-y: calc((var(--tab-min-height) + var(--uc-navbar-height)) * -1); - background-repeat: no-repeat, no-repeat, var(--lwt-background-tiling); - background-position: top left, top left, var(--lwt-background-alignment, top left); - background-position-y: top, top, var(--uc-bg-y), var(--uc-bg-y), var(--uc-bg-y); - background-image: var(--toolbar-bgimage), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), - var(--lwt-header-image, var(--lwt-additional-images)) !important; - border-bottom: 1px solid var(--chrome-content-separator-color) !important; margin-bottom: var(--uc-bm-hide-height); - transform: translateY(-100%); opacity: 0; + will-change: margin-bottom, opacity; } - :root[lwtheme-image] #navigator-toolbox:-moz-lwtheme #PersonalToolbar:not([customizing]) { - background-image: var(--lwt-header-image), var(--lwt-additional-images) !important; - background-repeat: var(--lwt-background-tiling) !important; - background-position: var(--lwt-background-alignment) !important; - /* right top */ - } - - #nav-bar:focus-within + #PersonalToolbar:not([customizing]), - #navigator-toolbox:hover #PersonalToolbar:not([customizing]) { - transform: translateY(0%); + #navigator-toolbox:is(:hover, :focus-within) #PersonalToolbar:not([customizing]) { + margin-bottom: 0; opacity: 1; } @media (prefers-reduced-motion: no-preference) { #PersonalToolbar:not([customizing]) { - transition: transform 0.25s var(--animation-easing-function) var(--uc-autohide-bookmarkbar-delay), - opacity 0.25s var(--animation-easing-function) var(--uc-autohide-bookmarkbar-delay), min-height 170ms ease-out, + transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), min-height 170ms ease-out, max-height 170ms ease-out, var(--ext-theme-background-transition) !important; } - #nav-bar:focus-within + #PersonalToolbar:not([customizing]), - #navigator-toolbox:hover #PersonalToolbar:not([customizing]) { - transition-delay: 0s; + #navigator-toolbox:is(:hover, :focus-within) #PersonalToolbar:not([customizing]) { + transition-delay: 0s !important; } } } diff --git a/src/autohide/_bookmarkbar.scss b/src/autohide/_bookmarkbar.scss index dc7a7745..24de7f50 100644 --- a/src/autohide/_bookmarkbar.scss +++ b/src/autohide/_bookmarkbar.scss @@ -1,50 +1,23 @@ // Based on https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/autohide_bookmarks_toolbar.css #PersonalToolbar:not([customizing]) { - --uc-bm-height: calc(21px + (2 * var(--bookmark-block-padding, 4px))); /* 21px = 16px + 1px [ border bottom ] + (2px * 2) [margin block] */ - --uc-bm-hide-height: calc(-1 * var(--uc-bm-height)); - --uc-autohide-bookmarkbar-delay: 600ms; /* The toolbar is hidden after 0.6s */ - - // Titlebar + Navbar - // --uc-bg-y: calc(-2 * (var(--tab-block-margin) + var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) - var(--tab-min-height) - 16px - var(--bookmark-block-padding)); - --uc-bg-y: calc((var(--tab-min-height) + var(--uc-navbar-height)) * -1); - background-repeat: no-repeat, no-repeat, var(--lwt-background-tiling); - background-position: top left, top left, var(--lwt-background-alignment, top left); - background-position-y: top, top, var(--uc-bg-y), var(--uc-bg-y), var(--uc-bg-y); - background-image: var(--toolbar-bgimage), - linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)), - var(--lwt-header-image, - var(--lwt-additional-images)) !important; - - border-bottom: 1px solid var(--chrome-content-separator-color) !important; - margin-bottom: var(--uc-bm-hide-height); - transform: translateY(-100%); opacity: 0; + will-change: margin-bottom, opacity; } -:root[lwtheme-image] #navigator-toolbox:-moz-lwtheme #PersonalToolbar:not([customizing]) { - background-image: var(--lwt-header-image), var(--lwt-additional-images) !important; - background-repeat: var(--lwt-background-tiling) !important; - background-position: var(--lwt-background-alignment) !important; - - /* right top */ -} - -#nav-bar:focus-within + #PersonalToolbar:not([customizing]), -#navigator-toolbox:hover #PersonalToolbar:not([customizing]) { - transform: translateY(0%); +#navigator-toolbox:is(:hover, :focus-within) #PersonalToolbar:not([customizing]) { + margin-bottom: 0; opacity: 1; } @include Animate { #PersonalToolbar:not([customizing]) { // --ext-theme-background-transition: background-color 0.1s cubic-bezier(.17,.67,.83,.67); - transition: transform 0.25s var(--animation-easing-function) var(--uc-autohide-bookmarkbar-delay), - opacity 0.25s var(--animation-easing-function) var(--uc-autohide-bookmarkbar-delay), + transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), min-height 170ms ease-out, max-height 170ms ease-out, var(--ext-theme-background-transition) !important; } - #nav-bar:focus-within + #PersonalToolbar:not([customizing]), - #navigator-toolbox:hover #PersonalToolbar:not([customizing]) { - transition-delay: 0s; + #navigator-toolbox:is(:hover, :focus-within) #PersonalToolbar:not([customizing]) { + transition-delay: 0s !important; } } diff --git a/src/autohide/_common.scss b/src/autohide/_common.scss index be286073..69da7b23 100644 --- a/src/autohide/_common.scss +++ b/src/autohide/_common.scss @@ -1,11 +1,22 @@ -@include Option("userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar") { +@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar") { :root { + --uc-titlebar-height: calc((var(--tab-block-margin) * 2) + var(--tab-min-height)); + --uc-titlebar-hide-height: calc(-1 * var(--uc-titlebar-height)); --uc-navbar-height: 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(21px + (2 * var(--bookmark-block-padding, 4px))); /* 21px = 16px + 1px [ border bottom ] + (2px * 2) [margin block] */ + --uc-bm-hide-height: calc(-1 * var(--uc-bm-height)); + + --uc-autohide-toolbar-delay: 600ms; + } + + #navigator-toolbox { + position: relative; + z-index: 1; } - #PersonalToolbar:not([customizing]) { + #TabsToolbar { position: relative; - z-index: 2; + z-index: 3; } } diff --git a/src/autohide/_navbar.scss b/src/autohide/_navbar.scss index 43602d0c..d5bd6322 100644 --- a/src/autohide/_navbar.scss +++ b/src/autohide/_navbar.scss @@ -1,47 +1,21 @@ -:root[sessionrestored] :where(#nav-bar, #PersonalToolbar, #tab-notification-deck, .global-notificationbox) { - transform: translateY(var(--uc-navbar-hide-height)); -} -:root:is([customizing], [chromehidden*="toolbar"]) :where(#nav-bar, #PersonalToolbar, #tab-notification-deck, .global-notificationbox) { - transform: none !important; - opacity: 1 !important; -} -#navigator-toolbox > div { - display: contents; -} - #nav-bar:not([customizing]) { - --uc-autohide-navbar-delay: 600ms; - position: relative; - z-index: 2; - + margin-bottom: var(--uc-titlebar-hide-height); opacity: 0; -} -#TabsToolbar { - position: relative; - z-index: 3; + will-change: margin-bottom, opacity; } -#navigator-toolbox:is(:hover, :focus-within) > .browser-toolbar { - transform: translateY(0); +#navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { + margin-bottom: 0; opacity: 1; } -/* Move up the content view */ -:root[sessionrestored]:not([inFullscreen]) > body > #browser{ - margin-top: var(--uc-navbar-hide-height); -} - -:root[sessionrestored] #nav-bar:-moz-lwtheme { - transition: var(--ext-theme-background-transition); -} - @include Animate { #nav-bar:not([customizing]) { - transition: transform 0.25s var(--animation-easing-function) var(--uc-autohide-navbar-delay), - opacity 0.25s var(--animation-easing-function) var(--uc-autohide-navbar-delay), + transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), var(--ext-theme-background-transition) !important; } - #navigator-toolbox:is(:hover, :focus-within) > .browser-toolbar { + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { transition-delay: 0s !important; } } diff --git a/src/autohide/_tabbar.scss b/src/autohide/_tabbar.scss index d28c48bb..6fd6e043 100644 --- a/src/autohide/_tabbar.scss +++ b/src/autohide/_tabbar.scss @@ -1,36 +1,18 @@ -:root { - --uc-titlebar-height: calc((var(--tab-block-margin) * 2) + var(--tab-min-height)); - --uc-titlebar-autohide-height: calc(-1 * var(--uc-titlebar-height)); - - @include Option("userChrome.autohide.navbar") { - --uc-titlebar-autohide-height: calc(-1 * (var(--uc-titlebar-height) + var(--uc-navbar-height))); - } -} - -:root:not([customizing]) #navigator-toolbox { - position: relative; - z-index: 1; -} - #navigator-toolbox:not(:hover) > #titlebar { -moz-window-dragging: no-drag !important; pointer-events: none } -:root:not([customizing]) #navigator-toolbox:hover, :root:not([customizing]) #titlebar { - margin-bottom: var(--uc-titlebar-autohide-height); - - @include Option("userChrome.autohide.navbar") { - border-bottom: 1px solid var(--chrome-content-separator-color) !important; - } + margin-bottom: var(--uc-titlebar-hide-height); + will-change: margin-bottom; } - #TabsToolbar:not([customizing]) { opacity: 0; + will-change: opacity; } -#navigator-toolbox:hover { +#navigator-toolbox:is(:hover, :focus-within) { > #titlebar { margin-bottom: 0px; } @@ -40,36 +22,24 @@ } @include Animate { - #navigator-toolbox, - #titlebar { - transition: margin-bottom 0.25s var(--animation-easing-function) 600ms, + #titlebar:not([customizing]) { + transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), background-color 1s var(--animation-easing-function) !important; } #TabsToolbar:not([customizing]) { - transition: opacity 0.25s var(--animation-easing-function) 600ms !important; + transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay) !important; } - #navigator-toolbox:hover { + #navigator-toolbox:is(:hover, :focus-within) { transition-delay: 0s !important; - > #titlebar { + > #titlebar:not([customizing]) { transition-delay: 0s !important; } - #TabsToolbar { + #TabsToolbar:not([customizing]) { transition-delay: 0s !important; } } } - -// /* 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; -// } From 08b8d3d6b22f4332bacbbedb26c5c4a9259fceba Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 19 Jul 2022 10:13:22 +0900 Subject: [PATCH 26/89] Add: Auto Hide - Toolbar overlap --- css/leptonChrome.css | 85 +++++++++++++++++++++++++++++++++++++-- src/autohide/_common.scss | 75 +++++++++++++++++++++++++++++++++- user.js | 1 + 3 files changed, 156 insertions(+), 5 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 4a284cb3..ea214b9d 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5452,21 +5452,100 @@ --uc-titlebar-hide-height: calc(-1 * var(--uc-titlebar-height)); --uc-navbar-height: 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(21px + (2 * var(--bookmark-block-padding, 4px))); - /* 21px = 16px + 1px [ border bottom ] + (2px * 2) [margin block] */ + --uc-bm-height: 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-autohide-toolbar-delay: 600ms; } #navigator-toolbox { position: relative; - z-index: 1; + z-index: 2; } #TabsToolbar { position: relative; z-index: 3; } + + @supports -moz-bool-pref("userChrome.autohide.toolbar_overlap") { + #navigator-toolbox { + --uc-toolbar-hide-height: calc(-1 * var(--uc-toolbar-height, 0)); + margin-bottom: var(--uc-toolbar-hide-height) !important; + } + @media (prefers-reduced-motion: no-preference) { + @supports -moz-bool-pref("userChrome.decoration.animate") { + #navigator-toolbox { + transition: margin-top 1s ease, + margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + } + #navigator-toolbox:hover { + transition-delay: 0s !important; + } + #navigator-toolbox[inFullscreen="true"] { + transition: margin-top 1.3s var(--animation-easing-function) 50ms, + margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + } + } + @supports not -moz-bool-pref("userChrome.decoration.animate") { + #navigator-toolbox { + transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + } + #navigator-toolbox:hover { + transition-delay: 0s !important; + } + } + } + @supports -moz-bool-pref("userChrome.autohide.tabbar") { + #navigator-toolbox:hover { + --uc-toolbar-height: var(--uc-titlebar-height); + } + @supports not -moz-bool-pref("userChrome.autohide.bookmarkbar") { + @supports -moz-bool-pref("userChrome.autohide.navbar") { + #navigator-toolbox:hover { + --uc-toolbar-height: calc(var(--uc-titlebar-height) + var(--uc-navbar-height)); + } + } + } + @supports not -moz-bool-pref("userChrome.autohide.navbar") { + @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { + #navigator-toolbox:hover { + --uc-toolbar-height: calc(var(--uc-titlebar-height) + var(--uc-bm-height)); + } + } + } + @supports -moz-bool-pref("userChrome.autohide.navbar") { + @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { + #navigator-toolbox:hover { + --uc-toolbar-height: calc(var(--uc-titlebar-height) + var(--uc-navbar-height) + var(--uc-bm-height)); + } + } + } + } + @supports not -moz-bool-pref("userChrome.autohide.tabbar") { + @supports not -moz-bool-pref("userChrome.autohide.bookmarkbar") { + @supports -moz-bool-pref("userChrome.autohide.navbar") { + #navigator-toolbox:hover { + --uc-toolbar-height: var(--uc-navbar-height); + } + } + } + @supports not -moz-bool-pref("userChrome.autohide.navbar") { + @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { + #navigator-toolbox:hover { + --uc-toolbar-height: var(--uc-bm-height); + } + } + } + @supports -moz-bool-pref("userChrome.autohide.navbar") { + @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { + #navigator-toolbox:hover { + --uc-toolbar-height: calc(var(--uc-navbar-height) + var(--uc-bm-height)); + } + } + } + } + } } @supports -moz-bool-pref("userChrome.autohide.tabbar") { #navigator-toolbox:not(:hover) > #titlebar { diff --git a/src/autohide/_common.scss b/src/autohide/_common.scss index 69da7b23..28a1de97 100644 --- a/src/autohide/_common.scss +++ b/src/autohide/_common.scss @@ -4,7 +4,7 @@ --uc-titlebar-hide-height: calc(-1 * var(--uc-titlebar-height)); --uc-navbar-height: 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(21px + (2 * var(--bookmark-block-padding, 4px))); /* 21px = 16px + 1px [ border bottom ] + (2px * 2) [margin block] */ + --uc-bm-height: 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-autohide-toolbar-delay: 600ms; @@ -12,11 +12,82 @@ #navigator-toolbox { position: relative; - z-index: 1; + z-index: 2; } #TabsToolbar { position: relative; z-index: 3; } + + @include Option("userChrome.autohide.toolbar_overlap") { + #navigator-toolbox { + --uc-toolbar-hide-height: calc(-1 * var(--uc-toolbar-height, 0)); + margin-bottom: var(--uc-toolbar-hide-height) !important; + + @include Animate { + @include Option("userChrome.decoration.animate") { + transition: margin-top 1s ease, + margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + + &:hover { + transition-delay: 0s !important; + } + + &[inFullscreen="true"] { + transition: margin-top 1.3s var(--animation-easing-function) 50ms, + margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + } + } + @include NotOption("userChrome.decoration.animate") { + transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + + &:hover { + transition-delay: 0s !important; + } + } + } + + &:hover { + @include Option("userChrome.autohide.tabbar") { + --uc-toolbar-height: var(--uc-titlebar-height); + + @include NotOption("userChrome.autohide.bookmarkbar") { + @include Option("userChrome.autohide.navbar") { + --uc-toolbar-height: calc(var(--uc-titlebar-height) + var(--uc-navbar-height)); + } + } + @include NotOption("userChrome.autohide.navbar") { + @include Option("userChrome.autohide.bookmarkbar") { + --uc-toolbar-height: calc(var(--uc-titlebar-height) + var(--uc-bm-height)); + } + } + + @include Option("userChrome.autohide.navbar") { + @include Option("userChrome.autohide.bookmarkbar") { + --uc-toolbar-height: calc(var(--uc-titlebar-height) + var(--uc-navbar-height) + var(--uc-bm-height)); + } + } + } + @include NotOption("userChrome.autohide.tabbar") { + @include NotOption("userChrome.autohide.bookmarkbar") { + @include Option("userChrome.autohide.navbar") { + --uc-toolbar-height: var(--uc-navbar-height); + } + } + @include NotOption("userChrome.autohide.navbar") { + @include Option("userChrome.autohide.bookmarkbar") { + --uc-toolbar-height: var(--uc-bm-height); + } + } + + @include Option("userChrome.autohide.navbar") { + @include Option("userChrome.autohide.bookmarkbar") { + --uc-toolbar-height: calc(var(--uc-navbar-height) + var(--uc-bm-height)); + } + } + } + } + } + } } diff --git a/user.js b/user.js index 588804ee..a2620929 100644 --- a/user.js +++ b/user.js @@ -75,6 +75,7 @@ user_pref("userChrome.tab.bottom_rounded_corner", true); // user_pref("userChrome.autohide.bookmarkbar", true); // user_pref("userChrome.autohide.sidebar", true); // user_pref("userChrome.autohide.forward_button", true); +// user_pref("userChrome.autohide.toolbar_overlap", true); // user_pref("userChrome.rounding.square_button", true); // user_pref("userChrome.rounding.square_panel", true); From beaa169c2063ad9d680c4e13df18f784b5888bf4 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 20 Jul 2022 00:20:04 +0900 Subject: [PATCH 27/89] Fix: Sidebar - Works with right sidebar(`positionend`) --- css/leptonChrome.css | 49 +++++++++++++++++++++++++----- src/autohide/sidebar/_overlap.scss | 20 +++++++++--- src/autohide/sidebar/_static.scss | 24 ++++++++++++--- src/sidebar/_overlap.scss | 13 +++++++- 4 files changed, 88 insertions(+), 18 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index ea214b9d..296b27c6 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5343,6 +5343,7 @@ */ --uc-sidebar-width: 40px; --uc-sidebar-activate-width: 18em; + --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-delay: 600ms; @@ -5351,22 +5352,32 @@ position: relative !important; box-shadow: 1px 0px 15px -10px var(--uc-sidebar-shadow-color); } + #sidebar-box[positionend="true"] { + box-shadow: -1px 0px 15px -10px var(--uc-sidebar-shadow-color); + } #sidebar-splitter { display: none !important; } } @supports -moz-bool-pref("userChrome.sidebar.overlap") { + #sidebar-box[positionend="true"] { + direction: rtl; + } + @supports not -moz-bool-pref("userChrome.autohide.sidebar") { #sidebar-box { min-width: var(--uc-sidebar-activate-width) !important; max-width: var(--uc-sidebar-activate-width) !important; - margin-inline-start: calc(-1 * var(--uc-sidebar-activate-width)) !important; + margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important; will-change: transform; } #sidebar-box:not([hidden="true"]) { transform: translateX(var(--uc-sidebar-activate-width)); } + #sidebar-box[positionend="true"]:not([hidden="true"]) { + transform: translateX(var(--uc-sidebar-activate-width-reverse)); + } @media (prefers-reduced-motion: no-preference) { #sidebar-box { transition: transform 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, visibility 0s linear !important; @@ -5669,13 +5680,24 @@ } :root[inFullscreen="true"] #sidebar-box { - margin-inline-start: calc(-1 * var(--uc-sidebar-activate-width)) !important; - transform: translateX(var(--uc-sidebar-fullscreen-width)) !important; will-change: transform; } - :root[inFullscreen="true"] #sidebar-box:hover { + :root[inFullscreen="true"] #sidebar-box:not([positionend="true"]) { + margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important; + transform: translateX(var(--uc-sidebar-fullscreen-width)) !important; + } + :root[inFullscreen="true"] #sidebar-box:not([positionend="true"]):hover { transform: translateX(var(--uc-sidebar-activate-width)) !important; } + :root[inFullscreen="true"] #sidebar-box[positionend="true"] { + margin-inline-end: var(--uc-sidebar-activate-width-reverse) !important; + transform: translateX( + calc(var(--uc-sidebar-activate-width) + -1 * var(--uc-sidebar-fullscreen-width)) + ) !important; + } + :root[inFullscreen="true"] #sidebar-box[positionend="true"]:hover { + transform: translateX(0) !important; + } :root[inFullscreen="true"] #sidebar-box #sidebar-header, :root[inFullscreen="true"] #sidebar-box #sidebar { min-width: calc(var(--uc-sidebar-activate-width)) !important; @@ -5702,6 +5724,9 @@ } @supports not -moz-bool-pref("userChrome.sidebar.overlap") { #sidebar-box { + --uc-sidebar-fullscreen-margin: calc( + var(--uc-sidebar-fullscreen-width) + var(--uc-sidebar-activate-width-reverse) + ); overflow: hidden; will-change: min-width, max-width; } @@ -5710,13 +5735,20 @@ max-width: var(--uc-sidebar-activate-width) !important; } - :root[inFullscreen="true"] #sidebar-box { - margin-inline-start: calc(var(--uc-sidebar-fullscreen-width) + -1 * var(--uc-sidebar-activate-width)) !important; + :root[inFullscreen="true"] #sidebar-box:not([positionend="true"]) { + margin-inline-start: var(--uc-sidebar-fullscreen-margin) !important; will-change: margin-inline-start; } - :root[inFullscreen="true"] #sidebar-box:hover { + :root[inFullscreen="true"] #sidebar-box:not([positionend="true"]):hover { margin-inline-start: 0 !important; } + :root[inFullscreen="true"] #sidebar-box[positionend="true"] { + margin-inline-end: var(--uc-sidebar-fullscreen-margin) !important; + will-change: margin-inline-end; + } + :root[inFullscreen="true"] #sidebar-box[positionend="true"]:hover { + margin-inline-end: 0 !important; + } @media (prefers-reduced-motion: no-preference) { #sidebar-box { @@ -5729,6 +5761,9 @@ :root[inFullscreen="true"] #sidebar-box { transition: margin-inline-start 1s var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; } + :root[inFullscreen="true"] #sidebar-box[positionend="true"] { + transition-property: margin-inline-end !important; + } :root[inFullscreen="true"] #sidebar-box:hover { transition-delay: 0ms !important; } diff --git a/src/autohide/sidebar/_overlap.scss b/src/autohide/sidebar/_overlap.scss index cd3ec0bc..cad04cc6 100644 --- a/src/autohide/sidebar/_overlap.scss +++ b/src/autohide/sidebar/_overlap.scss @@ -17,13 +17,23 @@ } :root[inFullscreen="true"] #sidebar-box { - margin-inline-start: calc(-1 * var(--uc-sidebar-activate-width)) !important; - - transform: translateX(var(--uc-sidebar-fullscreen-width)) !important; will-change: transform; - &:hover { - transform: translateX(var(--uc-sidebar-activate-width)) !important; + &:not([positionend="true"]) { + margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important; + transform: translateX(var(--uc-sidebar-fullscreen-width)) !important; + + &:hover { + transform: translateX(var(--uc-sidebar-activate-width)) !important; + } + } + &[positionend="true"] { + margin-inline-end: var(--uc-sidebar-activate-width-reverse) !important; + transform: translateX(calc(var(--uc-sidebar-activate-width) + (-1 * var(--uc-sidebar-fullscreen-width)))) !important; + + &:hover { + transform: translateX(0) !important; + } } #sidebar-header, diff --git a/src/autohide/sidebar/_static.scss b/src/autohide/sidebar/_static.scss index 01516f13..22f2986a 100644 --- a/src/autohide/sidebar/_static.scss +++ b/src/autohide/sidebar/_static.scss @@ -1,8 +1,8 @@ #sidebar-box { + --uc-sidebar-fullscreen-margin: calc(var(--uc-sidebar-fullscreen-width) + var(--uc-sidebar-activate-width-reverse)); overflow: hidden; will-change: min-width, max-width; - &:hover { min-width: var(--uc-sidebar-activate-width) !important; max-width: var(--uc-sidebar-activate-width) !important; @@ -10,11 +10,22 @@ } :root[inFullscreen="true"] #sidebar-box { - margin-inline-start: calc(var(--uc-sidebar-fullscreen-width) + (-1 * var(--uc-sidebar-activate-width))) !important; - will-change: margin-inline-start; + &:not([positionend="true"]) { + margin-inline-start: var(--uc-sidebar-fullscreen-margin) !important; + will-change: margin-inline-start; - &:hover { - margin-inline-start: 0 !important; + &:hover { + margin-inline-start: 0 !important; + } + } + + &[positionend="true"] { + margin-inline-end: var(--uc-sidebar-fullscreen-margin) !important; + will-change: margin-inline-end; + + &:hover { + margin-inline-end: 0 !important; + } } } @@ -31,6 +42,9 @@ :root[inFullscreen="true"] #sidebar-box { transition: margin-inline-start 1s var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; + &[positionend="true"] { + transition-property: margin-inline-end !important; + } &:hover { transition-delay: 0ms !important; } diff --git a/src/sidebar/_overlap.scss b/src/sidebar/_overlap.scss index baa0157f..1cd575f6 100644 --- a/src/sidebar/_overlap.scss +++ b/src/sidebar/_overlap.scss @@ -8,6 +8,7 @@ --uc-sidebar-width: 40px; --uc-sidebar-activate-width: 18em; + --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-delay: 600ms; /* Wait 0.6s before hiding sidebar */ @@ -16,6 +17,9 @@ position: relative !important; box-shadow: 1px 0px 15px -10px var(--uc-sidebar-shadow-color); + &[positionend="true"] { + box-shadow: -1px 0px 15px -10px var(--uc-sidebar-shadow-color); + } } #sidebar-splitter { @@ -24,17 +28,24 @@ } @include Option("userChrome.sidebar.overlap") { + #sidebar-box[positionend="true"] { + direction: rtl; + } + @include NotOption("userChrome.autohide.sidebar") { #sidebar-box { min-width: var(--uc-sidebar-activate-width) !important; max-width: var(--uc-sidebar-activate-width) !important; - margin-inline-start: calc(-1 * var(--uc-sidebar-activate-width)) !important; + margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important; will-change: transform; &:not([hidden="true"]) { transform: translateX(var(--uc-sidebar-activate-width)); } + &[positionend="true"]:not([hidden="true"]) { + transform: translateX(var(--uc-sidebar-activate-width-reverse)); + } @include Animate { transition: transform 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, From bb23dcde30024910e16dc815479e58c87099d427 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 21 Jul 2022 10:17:38 +0900 Subject: [PATCH 28/89] Fix: One Liner - Dynamic Separator at first tab --- css/leptonChrome.css | 8 ++++++++ src/tabbar/unselected_tab/_dynamic_separator.scss | 8 ++++++++ 2 files changed, 16 insertions(+) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 296b27c6..aeea15ed 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4517,6 +4517,14 @@ opacity: var(--tab-separator-opacity); } + @supports -moz-bool-pref("userChrome.tab.one_liner") { + @supports not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-background::before { + opacity: var(--tab-separator-opacity); + transform: translateX(-1.5px) translateY(calc(-50% + 1px)); + } + } + } @supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { #tabs-newtab-button:not(:hover, [open])::before { opacity: var(--tab-separator-opacity); diff --git a/src/tabbar/unselected_tab/_dynamic_separator.scss b/src/tabbar/unselected_tab/_dynamic_separator.scss index 9633b1b2..4088c02e 100644 --- a/src/tabbar/unselected_tab/_dynamic_separator.scss +++ b/src/tabbar/unselected_tab/_dynamic_separator.scss @@ -57,6 +57,14 @@ .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before { opacity: var(--tab-separator-opacity); } +@include Option("userChrome.tab.one_liner") { + @include NotOption("userChrome.tab.one_liner.tabbar_first") { + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-background::before { + opacity: var(--tab-separator-opacity); + transform: translateX(-1.5px) translateY(calc(-50% + 1px)); + } + } +} @include Option("userChrome.tab.newtab_button_like_tab") { #tabs-newtab-button:not(:hover, [open])::before { opacity: var(--tab-separator-opacity); From 0490e0e2b8e7400e1350697aaf1ec442dbbfc1c5 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 21 Jul 2022 10:23:55 +0900 Subject: [PATCH 29/89] Fix: One Liner - Missing settings name --- css/leptonChrome.css | 8 ++++---- src/tabbar/_layout.scss | 2 +- src/tabbar/layout/_navbar_padding.scss | 6 +++--- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index aeea15ed..f227a0d5 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -3870,7 +3870,7 @@ } /*= Tab Bar - Shared Layout ==================================================*/ @supports -moz-bool-pref("userChrome.tab.on_bottom") or -moz-bool-pref("userChrome.tab.one_liner") { - @supports -moz-bool-pref("userChrome.tab.on_bottom") or -moz-bool-pref("userChrome.tab.one_line.tabbar_first") { + @supports -moz-bool-pref("userChrome.tab.on_bottom") or -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { /*= Windows Control - Move to toolbar ========================================*/ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ @@ -3983,15 +3983,15 @@ /* Remove pre space */ } - @supports -moz-bool-pref("userChrome.tab.one_line") { - @supports not -moz-bool-pref("userChrome.tab.one_line.tabbar_first") { + @supports -moz-bool-pref("userChrome.tab.one_liner") { + @supports not -moz-bool-pref("userChrome.tab.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 -moz-bool-pref("userChrome.tab.one_line.tabbar_first") { + @supports -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { /* Don't need pre spacer */ --uc-window-drag-space-pre: 0px; diff --git a/src/tabbar/_layout.scss b/src/tabbar/_layout.scss index 37c5c81c..bfab821b 100644 --- a/src/tabbar/_layout.scss +++ b/src/tabbar/_layout.scss @@ -1,4 +1,4 @@ -@include Option("userChrome.tab.on_bottom", "userChrome.tab.one_line.tabbar_first") { +@include Option("userChrome.tab.on_bottom", "userChrome.tab.one_liner.tabbar_first") { @import "layout/window_control"; } diff --git a/src/tabbar/layout/_navbar_padding.scss b/src/tabbar/layout/_navbar_padding.scss index 9926444d..10f7c1ae 100644 --- a/src/tabbar/layout/_navbar_padding.scss +++ b/src/tabbar/layout/_navbar_padding.scss @@ -13,15 +13,15 @@ :root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) { --uc-window-drag-space-pre: 0px; /* Remove pre space */ } -@include Option("userChrome.tab.one_line") { - @include NotOption("userChrome.tab.one_line.tabbar_first") { +@include Option("userChrome.tab.one_liner") { + @include NotOption("userChrome.tab.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; } } - @include Option("userChrome.tab.one_line.tabbar_first") { + @include Option("userChrome.tab.one_liner.tabbar_first") { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { /* Don't need pre spacer */ --uc-window-drag-space-pre: 0px; From c2c8bc85dd425f45a911b52d75d5370cc70796a8 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 22 Jul 2022 09:05:27 +0900 Subject: [PATCH 30/89] Fix: Auto Hide - Static auto hide with One Liner --- css/leptonChrome.css | 29 ++++++----- src/autohide/_common.scss | 79 +++--------------------------- src/autohide/_navbar.scss | 2 +- src/autohide/_tabbar.scss | 2 +- src/autohide/_toolbar_overlap.scss | 68 +++++++++++++++++++++++++ src/tabbar/_one_liner.scss | 4 +- 6 files changed, 98 insertions(+), 86 deletions(-) create mode 100644 src/autohide/_toolbar_overlap.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index f227a0d5..4b37108a 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -3829,8 +3829,8 @@ } #nav-bar { - margin-top: calc(-1 * var(--tab-min-height)) !important; - height: var(--tab-min-height) !important; + margin-top: var(--uc-tabbar-hide-height) !important; + height: var(--uc-tabbar-height) !important; } #urlbar-container { @@ -5465,15 +5465,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.tab.one_liner") { :root { - --uc-titlebar-height: calc((var(--tab-block-margin) * 2) + var(--tab-min-height)); - --uc-titlebar-hide-height: calc(-1 * var(--uc-titlebar-height)); + --uc-tabbar-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-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-hide-height: calc(-1 * var(--uc-bm-height)); + } +} +@supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.autohide.navbar") or -moz-bool-pref( + "userChrome.autohide.bookmarkbar" + ) { + :root { --uc-autohide-toolbar-delay: 600ms; } @@ -5517,26 +5524,26 @@ } @supports -moz-bool-pref("userChrome.autohide.tabbar") { #navigator-toolbox:hover { - --uc-toolbar-height: var(--uc-titlebar-height); + --uc-toolbar-height: var(--uc-tabbar-height); } @supports not -moz-bool-pref("userChrome.autohide.bookmarkbar") { @supports -moz-bool-pref("userChrome.autohide.navbar") { #navigator-toolbox:hover { - --uc-toolbar-height: calc(var(--uc-titlebar-height) + var(--uc-navbar-height)); + --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height)); } } } @supports not -moz-bool-pref("userChrome.autohide.navbar") { @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { #navigator-toolbox:hover { - --uc-toolbar-height: calc(var(--uc-titlebar-height) + var(--uc-bm-height)); + --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-bm-height)); } } } @supports -moz-bool-pref("userChrome.autohide.navbar") { @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { #navigator-toolbox:hover { - --uc-toolbar-height: calc(var(--uc-titlebar-height) + var(--uc-navbar-height) + var(--uc-bm-height)); + --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height) + var(--uc-bm-height)); } } } @@ -5573,7 +5580,7 @@ } :root:not([customizing]) #titlebar { - margin-bottom: var(--uc-titlebar-hide-height); + margin-bottom: var(--uc-tabbar-hide-height); will-change: margin-bottom; } @@ -5612,7 +5619,7 @@ } @supports -moz-bool-pref("userChrome.autohide.navbar") { #nav-bar:not([customizing]) { - margin-bottom: var(--uc-titlebar-hide-height); + margin-bottom: var(--uc-tabbar-hide-height); opacity: 0; will-change: margin-bottom, opacity; } diff --git a/src/autohide/_common.scss b/src/autohide/_common.scss index 28a1de97..e6df5b63 100644 --- a/src/autohide/_common.scss +++ b/src/autohide/_common.scss @@ -1,12 +1,16 @@ -@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar") { +@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar", "userChrome.tab.one_liner") { :root { - --uc-titlebar-height: calc((var(--tab-block-margin) * 2) + var(--tab-min-height)); - --uc-titlebar-hide-height: calc(-1 * var(--uc-titlebar-height)); + --uc-tabbar-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-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-hide-height: calc(-1 * var(--uc-bm-height)); + } +} +@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar") { + :root { --uc-autohide-toolbar-delay: 600ms; } @@ -21,73 +25,6 @@ } @include Option("userChrome.autohide.toolbar_overlap") { - #navigator-toolbox { - --uc-toolbar-hide-height: calc(-1 * var(--uc-toolbar-height, 0)); - margin-bottom: var(--uc-toolbar-hide-height) !important; - - @include Animate { - @include Option("userChrome.decoration.animate") { - transition: margin-top 1s ease, - margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); - - &:hover { - transition-delay: 0s !important; - } - - &[inFullscreen="true"] { - transition: margin-top 1.3s var(--animation-easing-function) 50ms, - margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); - } - } - @include NotOption("userChrome.decoration.animate") { - transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); - - &:hover { - transition-delay: 0s !important; - } - } - } - - &:hover { - @include Option("userChrome.autohide.tabbar") { - --uc-toolbar-height: var(--uc-titlebar-height); - - @include NotOption("userChrome.autohide.bookmarkbar") { - @include Option("userChrome.autohide.navbar") { - --uc-toolbar-height: calc(var(--uc-titlebar-height) + var(--uc-navbar-height)); - } - } - @include NotOption("userChrome.autohide.navbar") { - @include Option("userChrome.autohide.bookmarkbar") { - --uc-toolbar-height: calc(var(--uc-titlebar-height) + var(--uc-bm-height)); - } - } - - @include Option("userChrome.autohide.navbar") { - @include Option("userChrome.autohide.bookmarkbar") { - --uc-toolbar-height: calc(var(--uc-titlebar-height) + var(--uc-navbar-height) + var(--uc-bm-height)); - } - } - } - @include NotOption("userChrome.autohide.tabbar") { - @include NotOption("userChrome.autohide.bookmarkbar") { - @include Option("userChrome.autohide.navbar") { - --uc-toolbar-height: var(--uc-navbar-height); - } - } - @include NotOption("userChrome.autohide.navbar") { - @include Option("userChrome.autohide.bookmarkbar") { - --uc-toolbar-height: var(--uc-bm-height); - } - } - - @include Option("userChrome.autohide.navbar") { - @include Option("userChrome.autohide.bookmarkbar") { - --uc-toolbar-height: calc(var(--uc-navbar-height) + var(--uc-bm-height)); - } - } - } - } - } + @import "toolbar_overlap"; } } diff --git a/src/autohide/_navbar.scss b/src/autohide/_navbar.scss index d5bd6322..74e2d276 100644 --- a/src/autohide/_navbar.scss +++ b/src/autohide/_navbar.scss @@ -1,5 +1,5 @@ #nav-bar:not([customizing]) { - margin-bottom: var(--uc-titlebar-hide-height); + margin-bottom: var(--uc-tabbar-hide-height); opacity: 0; will-change: margin-bottom, opacity; } diff --git a/src/autohide/_tabbar.scss b/src/autohide/_tabbar.scss index 6fd6e043..38f9ae62 100644 --- a/src/autohide/_tabbar.scss +++ b/src/autohide/_tabbar.scss @@ -4,7 +4,7 @@ } :root:not([customizing]) #titlebar { - margin-bottom: var(--uc-titlebar-hide-height); + margin-bottom: var(--uc-tabbar-hide-height); will-change: margin-bottom; } #TabsToolbar:not([customizing]) { diff --git a/src/autohide/_toolbar_overlap.scss b/src/autohide/_toolbar_overlap.scss new file mode 100644 index 00000000..bf9555d9 --- /dev/null +++ b/src/autohide/_toolbar_overlap.scss @@ -0,0 +1,68 @@ +#navigator-toolbox { + --uc-toolbar-hide-height: calc(-1 * var(--uc-toolbar-height, 0)); + margin-bottom: var(--uc-toolbar-hide-height) !important; + + @include Animate { + @include Option("userChrome.decoration.animate") { + transition: margin-top 1s ease, + margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + + &:hover { + transition-delay: 0s !important; + } + + &[inFullscreen="true"] { + transition: margin-top 1.3s var(--animation-easing-function) 50ms, + margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + } + } + @include NotOption("userChrome.decoration.animate") { + transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + + &:hover { + transition-delay: 0s !important; + } + } + } + + &:hover { + @include Option("userChrome.autohide.tabbar") { + --uc-toolbar-height: var(--uc-tabbar-height); + + @include NotOption("userChrome.autohide.bookmarkbar") { + @include Option("userChrome.autohide.navbar") { + --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height)); + } + } + @include NotOption("userChrome.autohide.navbar") { + @include Option("userChrome.autohide.bookmarkbar") { + --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-bm-height)); + } + } + + @include Option("userChrome.autohide.navbar") { + @include Option("userChrome.autohide.bookmarkbar") { + --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height) + var(--uc-bm-height)); + } + } + } + @include NotOption("userChrome.autohide.tabbar") { + @include NotOption("userChrome.autohide.bookmarkbar") { + @include Option("userChrome.autohide.navbar") { + --uc-toolbar-height: var(--uc-navbar-height); + } + } + @include NotOption("userChrome.autohide.navbar") { + @include Option("userChrome.autohide.bookmarkbar") { + --uc-toolbar-height: var(--uc-bm-height); + } + } + + @include Option("userChrome.autohide.navbar") { + @include Option("userChrome.autohide.bookmarkbar") { + --uc-toolbar-height: calc(var(--uc-navbar-height) + var(--uc-bm-height)); + } + } + } + } +} diff --git a/src/tabbar/_one_liner.scss b/src/tabbar/_one_liner.scss index 8eed94d3..59ad4381 100644 --- a/src/tabbar/_one_liner.scss +++ b/src/tabbar/_one_liner.scss @@ -8,8 +8,8 @@ } #nav-bar { - margin-top: calc(-1 * var(--tab-min-height)) !important; - height: var(--tab-min-height) !important; + margin-top: var(--uc-tabbar-hide-height) !important; + height: var(--uc-tabbar-height) !important; } #urlbar-container { From 9b62d29fd17dc61d98ba3b26a6664d771381f573 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 22 Jul 2022 09:08:32 +0900 Subject: [PATCH 31/89] Fix: Auto Hide - Overlap autohide with One Liner --- css/leptonChrome.css | 154 +++++++++++++++-------------- src/autohide/_index.scss | 12 ++- src/autohide/_navbar.scss | 12 ++- src/autohide/_tabbar.scss | 5 - src/autohide/_toolbar_overlap.scss | 34 +++---- 5 files changed, 112 insertions(+), 105 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 4b37108a..702d8e6e 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5522,17 +5522,10 @@ } } } - @supports -moz-bool-pref("userChrome.autohide.tabbar") { + @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.tab.one_liner") { #navigator-toolbox:hover { --uc-toolbar-height: var(--uc-tabbar-height); } - @supports not -moz-bool-pref("userChrome.autohide.bookmarkbar") { - @supports -moz-bool-pref("userChrome.autohide.navbar") { - #navigator-toolbox:hover { - --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height)); - } - } - } @supports not -moz-bool-pref("userChrome.autohide.navbar") { @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { #navigator-toolbox:hover { @@ -5540,22 +5533,22 @@ } } } - @supports -moz-bool-pref("userChrome.autohide.navbar") { - @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { - #navigator-toolbox:hover { - --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height) + var(--uc-bm-height)); + @supports not -moz-bool-pref("userChrome.tab.one_liner") { + @supports -moz-bool-pref("userChrome.autohide.navbar") { + @supports not -moz-bool-pref("userChrome.autohide.bookmarkbar") { + #navigator-toolbox:hover { + --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height)); + } + } + @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { + #navigator-toolbox:hover { + --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height) + var(--uc-bm-height)); + } } } } } @supports not -moz-bool-pref("userChrome.autohide.tabbar") { - @supports not -moz-bool-pref("userChrome.autohide.bookmarkbar") { - @supports -moz-bool-pref("userChrome.autohide.navbar") { - #navigator-toolbox:hover { - --uc-toolbar-height: var(--uc-navbar-height); - } - } - } @supports not -moz-bool-pref("userChrome.autohide.navbar") { @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { #navigator-toolbox:hover { @@ -5563,81 +5556,92 @@ } } } - @supports -moz-bool-pref("userChrome.autohide.navbar") { - @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { - #navigator-toolbox:hover { - --uc-toolbar-height: calc(var(--uc-navbar-height) + var(--uc-bm-height)); + @supports not -moz-bool-pref("userChrome.tab.one_liner") { + @supports -moz-bool-pref("userChrome.autohide.navbar") { + @supports not -moz-bool-pref("userChrome.autohide.bookmarkbar") { + #navigator-toolbox:hover { + --uc-toolbar-height: var(--uc-navbar-height); + } + } + @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { + #navigator-toolbox:hover { + --uc-toolbar-height: calc(var(--uc-navbar-height) + var(--uc-bm-height)); + } } } } } } } -@supports -moz-bool-pref("userChrome.autohide.tabbar") { - #navigator-toolbox:not(:hover) > #titlebar { - -moz-window-dragging: no-drag !important; - pointer-events: none; - } - - :root:not([customizing]) #titlebar { - margin-bottom: var(--uc-tabbar-hide-height); - will-change: margin-bottom; - } - - #TabsToolbar:not([customizing]) { - opacity: 0; - will-change: opacity; - } - - #navigator-toolbox:is(:hover, :focus-within) > #titlebar { - margin-bottom: 0px; - } - #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar { - opacity: 1; - } - - @media (prefers-reduced-motion: no-preference) { - #titlebar:not([customizing]) { - transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), - background-color 1s var(--animation-easing-function) !important; +@supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.autohide.navbar") { + @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.tab.one_liner") { + :root:not([customizing]) #titlebar { + margin-bottom: var(--uc-tabbar-hide-height); + will-change: margin-bottom; } #TabsToolbar:not([customizing]) { - transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay) !important; + opacity: 0; + will-change: opacity; } - #navigator-toolbox:is(:hover, :focus-within) { - transition-delay: 0s !important; + #navigator-toolbox:is(:hover, :focus-within) > #titlebar { + margin-bottom: 0px; } - #navigator-toolbox:is(:hover, :focus-within) > #titlebar:not([customizing]) { - transition-delay: 0s !important; + #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar { + opacity: 1; } - #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar:not([customizing]) { - transition-delay: 0s !important; + + @media (prefers-reduced-motion: no-preference) { + #titlebar:not([customizing]) { + transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + background-color 1s var(--animation-easing-function) !important; + } + + #TabsToolbar:not([customizing]) { + transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay) !important; + } + + #navigator-toolbox:is(:hover, :focus-within) { + transition-delay: 0s !important; + } + #navigator-toolbox:is(:hover, :focus-within) > #titlebar:not([customizing]) { + transition-delay: 0s !important; + } + #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar:not([customizing]) { + transition-delay: 0s !important; + } } } -} -@supports -moz-bool-pref("userChrome.autohide.navbar") { - #nav-bar:not([customizing]) { - margin-bottom: var(--uc-tabbar-hide-height); - opacity: 0; - will-change: margin-bottom, opacity; - } + @supports -moz-bool-pref("userChrome.autohide.navbar") or -moz-bool-pref("userChrome.tab.one_liner") { + #nav-bar:not([customizing]) { + opacity: 0; + will-change: margin-bottom, opacity; + } - #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { - margin-bottom: 0; - opacity: 1; - } + #navigator-toolbox:is(:hover, :active, :focus-within) #nav-bar:not([customizing]) { + opacity: 1; + } - @media (prefers-reduced-motion: no-preference) { - #nav-bar:not([customizing]) { - transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), - opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), - var(--ext-theme-background-transition) !important; + @supports not -moz-bool-pref("userChrome.tab.one_liner") { + #nav-bar:not([customizing]) { + margin-bottom: var(--uc-navbar-hide-height); + } + + #navigator-toolbox:is(:hover, :active, :focus-within) #nav-bar:not([customizing]) { + margin-bottom: 0; + } } + @media (prefers-reduced-motion: no-preference) { + #nav-bar:not([customizing]) { + transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + var(--ext-theme-background-transition) !important; + } - #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { - transition-delay: 0s !important; + #navigator-toolbox:is(:hover, :active, :focus-within) #nav-bar:not([customizing]) { + transition-delay: 0s !important; + } } } } diff --git a/src/autohide/_index.scss b/src/autohide/_index.scss index 50de57d4..3d0dca69 100644 --- a/src/autohide/_index.scss +++ b/src/autohide/_index.scss @@ -3,11 +3,13 @@ } @import "common"; -@include Option("userChrome.autohide.tabbar") { - @import "tabbar"; -} -@include Option("userChrome.autohide.navbar") { - @import "navbar"; +@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar") { + @include Option("userChrome.autohide.tabbar", "userChrome.tab.one_liner") { + @import "tabbar"; + } + @include Option("userChrome.autohide.navbar", "userChrome.tab.one_liner") { + @import "navbar"; + } } @include Option("userChrome.autohide.bookmarkbar") { @import "bookmarkbar"; diff --git a/src/autohide/_navbar.scss b/src/autohide/_navbar.scss index 74e2d276..e7e624e3 100644 --- a/src/autohide/_navbar.scss +++ b/src/autohide/_navbar.scss @@ -1,14 +1,20 @@ #nav-bar:not([customizing]) { - margin-bottom: var(--uc-tabbar-hide-height); opacity: 0; will-change: margin-bottom, opacity; } - #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { - margin-bottom: 0; opacity: 1; } +@include NotOption("userChrome.tab.one_liner") { + #nav-bar:not([customizing]) { + margin-bottom: var(--uc-navbar-hide-height); + } + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { + margin-bottom: 0; + } +} + @include Animate { #nav-bar:not([customizing]) { transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), diff --git a/src/autohide/_tabbar.scss b/src/autohide/_tabbar.scss index 38f9ae62..c013cbf5 100644 --- a/src/autohide/_tabbar.scss +++ b/src/autohide/_tabbar.scss @@ -1,8 +1,3 @@ -#navigator-toolbox:not(:hover) > #titlebar { - -moz-window-dragging: no-drag !important; - pointer-events: none -} - :root:not([customizing]) #titlebar { margin-bottom: var(--uc-tabbar-hide-height); will-change: margin-bottom; diff --git a/src/autohide/_toolbar_overlap.scss b/src/autohide/_toolbar_overlap.scss index bf9555d9..03be1f3e 100644 --- a/src/autohide/_toolbar_overlap.scss +++ b/src/autohide/_toolbar_overlap.scss @@ -26,41 +26,41 @@ } &:hover { - @include Option("userChrome.autohide.tabbar") { + @include Option("userChrome.autohide.tabbar", "userChrome.tab.one_liner") { --uc-toolbar-height: var(--uc-tabbar-height); - @include NotOption("userChrome.autohide.bookmarkbar") { - @include Option("userChrome.autohide.navbar") { - --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height)); - } - } @include NotOption("userChrome.autohide.navbar") { @include Option("userChrome.autohide.bookmarkbar") { --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-bm-height)); } } - @include Option("userChrome.autohide.navbar") { - @include Option("userChrome.autohide.bookmarkbar") { - --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height) + var(--uc-bm-height)); + @include NotOption("userChrome.tab.one_liner") { + @include Option("userChrome.autohide.navbar") { + @include NotOption("userChrome.autohide.bookmarkbar") { + --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height)); + } + @include Option("userChrome.autohide.bookmarkbar") { + --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height) + var(--uc-bm-height)); + } } } } @include NotOption("userChrome.autohide.tabbar") { - @include NotOption("userChrome.autohide.bookmarkbar") { - @include Option("userChrome.autohide.navbar") { - --uc-toolbar-height: var(--uc-navbar-height); - } - } @include NotOption("userChrome.autohide.navbar") { @include Option("userChrome.autohide.bookmarkbar") { --uc-toolbar-height: var(--uc-bm-height); } } - @include Option("userChrome.autohide.navbar") { - @include Option("userChrome.autohide.bookmarkbar") { - --uc-toolbar-height: calc(var(--uc-navbar-height) + var(--uc-bm-height)); + @include NotOption("userChrome.tab.one_liner") { + @include Option("userChrome.autohide.navbar") { + @include NotOption("userChrome.autohide.bookmarkbar") { + --uc-toolbar-height: var(--uc-navbar-height); + } + @include Option("userChrome.autohide.bookmarkbar") { + --uc-toolbar-height: calc(var(--uc-navbar-height) + var(--uc-bm-height)); + } } } } From 7fa26d6c5f4e36027c0094ac3cb7aeabc15d9f0e Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 25 Jul 2022 12:31:39 +0900 Subject: [PATCH 32/89] Add: Vertical Tab - Support `Sidebar Tabs` https://addons.mozilla.org/en-US/firefox/addon/sidebartabs --- css/leptonChrome.css | 47 +++++++++++++++--------- src/icons/context_menu/_tab_toolbar.scss | 47 +++++++++++++++++------- src/sidebar/_hidden.scss | 3 +- 3 files changed, 65 insertions(+), 32 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index b007c194..5925f01b 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5588,7 +5588,7 @@ } } @supports -moz-bool-pref("userChrome.sidebar.hidden_header.vertical_tab_only") { - #sidebar-box:is([sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"], [sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"]) + #sidebar-box:is([sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"], [sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"], [sidebarcommand="sidebartabs_asamuzak_jp-sidebar-action"]) #sidebar-header { display: none !important; } @@ -5807,7 +5807,7 @@ will-change: margin-bottom, opacity; } - #navigator-toolbox:is(:hover, :active, :focus-within) #nav-bar:not([customizing]) { + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { opacity: 1; } @@ -5816,7 +5816,7 @@ margin-bottom: var(--uc-navbar-hide-height); } - #navigator-toolbox:is(:hover, :active, :focus-within) #nav-bar:not([customizing]) { + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { margin-bottom: 0; } } @@ -5827,7 +5827,7 @@ var(--ext-theme-background-transition) !important; } - #navigator-toolbox:is(:hover, :active, :focus-within) #nav-bar:not([customizing]) { + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { transition-delay: 0s !important; } } @@ -7122,7 +7122,8 @@ /*= tabContextMenu ===========================================================*/ #context_openANewTab, #treestyletab_piro_sakura_ne_jp-menuitem-_context_newTab, - #tabcenter-reborn_ariasuni-menuitem-_newTabContextMenuOpenAlternatePosition { + #tabcenter-reborn_ariasuni-menuitem-_newTabContextMenuOpenAlternatePosition, + #sidebartabs_asamuzak_jp-menuitem-_newTab { --menuitem-image: url("chrome://browser/skin/new-tab.svg"); } @@ -7137,54 +7138,62 @@ #context_reloadTab, #context_reloadSelectedTabs, #treestyletab_piro_sakura_ne_jp-menuitem-_context_reloadTab, - #tabcenter-reborn_ariasuni-menuitem-_contextMenuReloadTab { + #tabcenter-reborn_ariasuni-menuitem-_contextMenuReloadTab, + #sidebartabs_asamuzak_jp-menuitem-_reloadTab { --menuitem-image: url("../icons/reload.svg"); } #context_toggleMuteTab, #context_toggleMuteSelectedTabs, #treestyletab_piro_sakura_ne_jp-menuitem-_context_toggleMuteTab-mute, - #tabcenter-reborn_ariasuni-menuitem-_contextMenuMuteTab { + #tabcenter-reborn_ariasuni-menuitem-_contextMenuMuteTab, + #sidebartabs_asamuzak_jp-menuitem-_muteTab { --menuitem-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg"); } #context_toggleMuteTab[muted], #context_toggleMuteSelectedTabs[muted], #treestyletab_piro_sakura_ne_jp-menuitem-_context_toggleMuteTab-unmute, - #tabcenter-reborn_ariasuni-menuitem-_contextMenuMuteTab[label="Unmute Tab"] { + #tabcenter-reborn_ariasuni-menuitem-_contextMenuMuteTab[label="Unmute Tab"], + #sidebartabs_asamuzak_jp-menuitem-_muteTab[label="Unmute Tab"] { --menuitem-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg"); } #context_pinTab, #context_pinSelectedTabs, #treestyletab_piro_sakura_ne_jp-menuitem-_context_pinTab, - #tabcenter-reborn_ariasuni-menuitem-_contextMenuPinTab { + #tabcenter-reborn_ariasuni-menuitem-_contextMenuPinTab, + #sidebartabs_asamuzak_jp-menuitem-_pinTab { --menuitem-image: url("../icons/pin-tab.svg"); } #context_unpinTab, #context_unpinSelectedTabs, #treestyletab_piro_sakura_ne_jp-menuitem-_context_unpinTab, - #tabcenter-reborn_ariasuni-menuitem-_contextMenuPinTab[label="Unpin Tab"] { + #tabcenter-reborn_ariasuni-menuitem-_contextMenuPinTab[label="Unpin Tab"], + #sidebartabs_asamuzak_jp-menuitem-_pinTab[label="Unpin Tab"] { --menuitem-image: url("../icons/unpin-tab.svg"); } #context_duplicateTab, #context_duplicateTabs, #treestyletab_piro_sakura_ne_jp-menuitem-_context_duplicateTab, - #tabcenter-reborn_ariasuni-menuitem-_contextMenuDuplicateTab { + #tabcenter-reborn_ariasuni-menuitem-_contextMenuDuplicateTab, + #sidebartabs_asamuzak_jp-menuitem-_dupeTab { --menuitem-image: url("../icons/notebook-subsection.svg"); } #context_bookmarkTab, #context_bookmarkSelectedTabs, - #treestyletab_piro_sakura_ne_jp-menuitem-_context_bookmarkTab { + #treestyletab_piro_sakura_ne_jp-menuitem-_context_bookmarkTab, + #sidebartabs_asamuzak_jp-menuitem-_bookmarkTab { --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } #context_moveTabOptions, #treestyletab_piro_sakura_ne_jp-menuitem-_context_moveTab, - #tabcenter-reborn_ariasuni-menuitem-_contextMenuMoveTab { + #tabcenter-reborn_ariasuni-menuitem-_contextMenuMoveTab, + #sidebartabs_asamuzak_jp-menuitem-_moveTab { --menuitem-image: url("../icons/arrow-swap.svg"); } @@ -7207,24 +7216,28 @@ } #context_reopenInContainer, #treestyletab_piro_sakura_ne_jp-menuitem-_context_reopenInContainer, - #tabcenter-reborn_ariasuni-menuitem-_contextMenuOpenInContextualTab { + #tabcenter-reborn_ariasuni-menuitem-_contextMenuOpenInContextualTab, + #sidebartabs_asamuzak_jp-menuitem-_reopenTabInContainer { --menuitem-image: url("../icons/container-openin-16.svg"); } #context_selectAllTabs, - #treestyletab_piro_sakura_ne_jp-menuitem-_context_selectAllTabs { + #treestyletab_piro_sakura_ne_jp-menuitem-_context_selectAllTabs, + #sidebartabs_asamuzak_jp-menuitem-_selectAllTabs { --menuitem-image: url("../icons/tab-multiple.svg"); } #context_closeTab, #treestyletab_piro_sakura_ne_jp-menuitem-_context_closeTab, - #tabcenter-reborn_ariasuni-menuitem-_contextMenuCloseTab { + #tabcenter-reborn_ariasuni-menuitem-_contextMenuCloseTab, + #sidebartabs_asamuzak_jp-menuitem-_closeTab { --menuitem-image: url("chrome://global/skin/icons/close.svg"); } #context_undoCloseTab, #treestyletab_piro_sakura_ne_jp-menuitem-_context_undoCloseTab, - #tabcenter-reborn_ariasuni-menuitem-_contextMenuUndoCloseTab { + #tabcenter-reborn_ariasuni-menuitem-_contextMenuUndoCloseTab, + #sidebartabs_asamuzak_jp-menuitem-_undoCloseTab { --menuitem-image: url("../icons/undo.svg"); } diff --git a/src/icons/context_menu/_tab_toolbar.scss b/src/icons/context_menu/_tab_toolbar.scss index 66a92fef..08beab95 100644 --- a/src/icons/context_menu/_tab_toolbar.scss +++ b/src/icons/context_menu/_tab_toolbar.scss @@ -1,7 +1,8 @@ /*= tabContextMenu ===========================================================*/ #context_openANewTab, #treestyletab_piro_sakura_ne_jp-menuitem-_context_newTab, -#tabcenter-reborn_ariasuni-menuitem-_newTabContextMenuOpenAlternatePosition { +#tabcenter-reborn_ariasuni-menuitem-_newTabContextMenuOpenAlternatePosition, +#sidebartabs_asamuzak_jp-menuitem-_newTab { --menuitem-image: url("chrome://browser/skin/new-tab.svg"); } #tabcenter-reborn_ariasuni-menuitem-_newTabContextMenuOpenInWindow { @@ -14,37 +15,43 @@ #context_reloadTab, #context_reloadSelectedTabs, #treestyletab_piro_sakura_ne_jp-menuitem-_context_reloadTab, -#tabcenter-reborn_ariasuni-menuitem-_contextMenuReloadTab { +#tabcenter-reborn_ariasuni-menuitem-_contextMenuReloadTab, +#sidebartabs_asamuzak_jp-menuitem-_reloadTab { --menuitem-image: url("../icons/reload.svg"); } #context_toggleMuteTab, #context_toggleMuteSelectedTabs, #treestyletab_piro_sakura_ne_jp-menuitem-_context_toggleMuteTab-mute, -#tabcenter-reborn_ariasuni-menuitem-_contextMenuMuteTab { +#tabcenter-reborn_ariasuni-menuitem-_contextMenuMuteTab, +#sidebartabs_asamuzak_jp-menuitem-_muteTab { --menuitem-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg"); } #context_toggleMuteTab[muted], #context_toggleMuteSelectedTabs[muted], #treestyletab_piro_sakura_ne_jp-menuitem-_context_toggleMuteTab-unmute, -#tabcenter-reborn_ariasuni-menuitem-_contextMenuMuteTab[label="Unmute Tab"] { +#tabcenter-reborn_ariasuni-menuitem-_contextMenuMuteTab[label="Unmute Tab"], +#sidebartabs_asamuzak_jp-menuitem-_muteTab[label="Unmute Tab"] { --menuitem-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg"); } #context_pinTab, #context_pinSelectedTabs, #treestyletab_piro_sakura_ne_jp-menuitem-_context_pinTab, -#tabcenter-reborn_ariasuni-menuitem-_contextMenuPinTab { +#tabcenter-reborn_ariasuni-menuitem-_contextMenuPinTab, +#sidebartabs_asamuzak_jp-menuitem-_pinTab { --menuitem-image: url("../icons/pin-tab.svg"); } #context_unpinTab, #context_unpinSelectedTabs, #treestyletab_piro_sakura_ne_jp-menuitem-_context_unpinTab, -#tabcenter-reborn_ariasuni-menuitem-_contextMenuPinTab[label="Unpin Tab"] { +#tabcenter-reborn_ariasuni-menuitem-_contextMenuPinTab[label="Unpin Tab"], +#sidebartabs_asamuzak_jp-menuitem-_pinTab[label="Unpin Tab"] { --menuitem-image: url("../icons/unpin-tab.svg"); } #context_duplicateTab, #context_duplicateTabs, #treestyletab_piro_sakura_ne_jp-menuitem-_context_duplicateTab, -#tabcenter-reborn_ariasuni-menuitem-_contextMenuDuplicateTab { +#tabcenter-reborn_ariasuni-menuitem-_contextMenuDuplicateTab, +#sidebartabs_asamuzak_jp-menuitem-_dupeTab { --menuitem-image: url("../icons/notebook-subsection.svg"); } #tabcenter-reborn_ariasuni-menuitem-_contextMenuUnloadTab { @@ -52,12 +59,14 @@ #context_bookmarkTab, #context_bookmarkSelectedTabs, -#treestyletab_piro_sakura_ne_jp-menuitem-_context_bookmarkTab { +#treestyletab_piro_sakura_ne_jp-menuitem-_context_bookmarkTab, +#sidebartabs_asamuzak_jp-menuitem-_bookmarkTab { --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } #context_moveTabOptions, #treestyletab_piro_sakura_ne_jp-menuitem-_context_moveTab, -#tabcenter-reborn_ariasuni-menuitem-_contextMenuMoveTab { +#tabcenter-reborn_ariasuni-menuitem-_contextMenuMoveTab, +#sidebartabs_asamuzak_jp-menuitem-_moveTab { --menuitem-image: url("../icons/arrow-swap.svg"); } #context_sendTabToDevice, @@ -80,26 +89,36 @@ } #context_reopenInContainer, #treestyletab_piro_sakura_ne_jp-menuitem-_context_reopenInContainer, -#tabcenter-reborn_ariasuni-menuitem-_contextMenuOpenInContextualTab { +#tabcenter-reborn_ariasuni-menuitem-_contextMenuOpenInContextualTab, +#sidebartabs_asamuzak_jp-menuitem-_reopenTabInContainer { --menuitem-image: url("../icons/container-openin-16.svg"); } +#sidebartabs_asamuzak_jp-menuitem-_reloadAllTabs { +} #context_selectAllTabs, -#treestyletab_piro_sakura_ne_jp-menuitem-_context_selectAllTabs { +#treestyletab_piro_sakura_ne_jp-menuitem-_context_selectAllTabs, +#sidebartabs_asamuzak_jp-menuitem-_selectAllTabs { --menuitem-image: url("../icons/tab-multiple.svg"); } +#sidebartabs_asamuzak_jp-menuitem-_tabGroup { +} + #context_closeTab, #treestyletab_piro_sakura_ne_jp-menuitem-_context_closeTab, -#tabcenter-reborn_ariasuni-menuitem-_contextMenuCloseTab { +#tabcenter-reborn_ariasuni-menuitem-_contextMenuCloseTab, +#sidebartabs_asamuzak_jp-menuitem-_closeTab { --menuitem-image: url("chrome://global/skin/icons/close.svg"); } -#tabcenter-reborn_ariasuni-menuitem-_contextMenuCloseTabs { +#tabcenter-reborn_ariasuni-menuitem-_contextMenuCloseTabs, +#sidebartabs_asamuzak_jp-menuitem-_closeMultipleTabs { } #context_closeTabOptions { } #context_undoCloseTab, #treestyletab_piro_sakura_ne_jp-menuitem-_context_undoCloseTab, -#tabcenter-reborn_ariasuni-menuitem-_contextMenuUndoCloseTab { +#tabcenter-reborn_ariasuni-menuitem-_contextMenuUndoCloseTab, +#sidebartabs_asamuzak_jp-menuitem-_undoCloseTab { --menuitem-image: url("../icons/undo.svg"); } diff --git a/src/sidebar/_hidden.scss b/src/sidebar/_hidden.scss index 94f60011..be69a27c 100644 --- a/src/sidebar/_hidden.scss +++ b/src/sidebar/_hidden.scss @@ -7,7 +7,8 @@ @include Option("userChrome.sidebar.hidden_header.vertical_tab_only") { #sidebar-box:is( [sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"], - [sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"] + [sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"], + [sidebarcommand="sidebartabs_asamuzak_jp-sidebar-action"] ) #sidebar-header { display: none !important; } From 64cc77ab389db4611fd868329f9bbfe4383f9a57 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 25 Jul 2022 12:32:53 +0900 Subject: [PATCH 33/89] Fix: One Liner - Adjust tab max width --- css/leptonChrome.css | 6 ++++++ src/padding/_tabbar_width.scss | 11 ++++++----- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 5925f01b..77886f9c 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -3246,6 +3246,12 @@ --tab-max-width: 225px; } } + @supports -moz-bool-pref("userChrome.tab.one_liner") { + :root { + --tab-max-width: 180px; + } + } + .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) { max-width: var(--tab-max-width) !important; /* Original: 225px */ diff --git a/src/padding/_tabbar_width.scss b/src/padding/_tabbar_width.scss index a0e58bdd..5b429ab7 100644 --- a/src/padding/_tabbar_width.scss +++ b/src/padding/_tabbar_width.scss @@ -59,15 +59,16 @@ } /* Tab - Max Size */ -@include NotOption("userChrome.tab.photon_like_padding") { - :root { +:root { + @include NotOption("userChrome.tab.photon_like_padding") { --tab-max-width: 240px; } -} -@include Option("userChrome.tab.photon_like_padding") { - :root { + @include Option("userChrome.tab.photon_like_padding") { --tab-max-width: 225px; } + @include Option("userChrome.tab.one_liner") { + --tab-max-width: 180px; + } } .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) { max-width: var(--tab-max-width) !important; /* Original: 225px */ From 52cf0fd5077ef0713f5d742dd8f362f0d0d024fe Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 25 Jul 2022 14:05:59 +0900 Subject: [PATCH 34/89] Add: Auto Hide - Tab --- CREDITS | 5 +++++ css/leptonChrome.css | 46 ++++++++++++++++++++++++++++++++++++++++ src/autohide/_index.scss | 4 ++++ src/autohide/_tab.scss | 34 +++++++++++++++++++++++++++++ user.js | 3 +++ 5 files changed, 92 insertions(+) create mode 100644 src/autohide/_tab.scss diff --git a/CREDITS b/CREDITS index a2cc6366..6830bfa8 100644 --- a/CREDITS +++ b/CREDITS @@ -170,6 +170,11 @@ W: https://github.com/coekuss/quietfox C: Copyright (c) 2019 coekuss L: MIT +N: RainFox +W: https://github.com/1280px/rainfox +C: Copyright (c) 2020 1280px +L: MIT + N: ShadowFox W: https://github.com/overdodactyl/ShadowFox C: Copyright (c) 2017 overdodactyl diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 77886f9c..3276ba32 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5657,6 +5657,52 @@ } } } +@supports -moz-bool-pref("userChrome.autohide.tab") { + @supports not -moz-bool-pref("userChrome.autohide.tab.opacity") { + @supports not -moz-bool-pref("userChrome.autohide.tab.blur") { + .tabbrowser-tab:not([multiselected]) .tab-content:not(:hover):not([selected]) { + margin-bottom: -64px; + } + } + } + @supports -moz-bool-pref("userChrome.autohide.tab.opacity") { + .tabbrowser-tab:not([multiselected]) .tab-content:not(:hover):not([selected]) { + opacity: 0%; + } + } + @supports -moz-bool-pref("userChrome.autohide.tab.blur") { + .tabbrowser-tab:not([multiselected]) .tab-content:not(:hover):not([selected]) { + filter: blur(8px); + } + } + @media (prefers-reduced-motion: no-preference) { + .tabbrowser-tab:not([multiselected]) .tab-content:not(:hover):not([selected]) { + transition-timing-function: var(--animation-easing-function); + transition-duration: 0.2s; + transition-delay: 600ms; + } + .tabbrowser-tab:not([multiselected]) .tab-content:not(:hover):not([selected]):hover { + transition-delay: 0s; + } + @supports not -moz-bool-pref("userChrome.autohide.tab.opacity") { + @supports not -moz-bool-pref("userChrome.autohide.tab.blur") { + .tabbrowser-tab:not([multiselected]) .tab-content:not(:hover):not([selected]) { + transition-property: margin-bottom; + } + } + } + @supports -moz-bool-pref("userChrome.autohide.tab.opacity") { + .tabbrowser-tab:not([multiselected]) .tab-content:not(:hover):not([selected]) { + transition-property: opacity; + } + } + @supports -moz-bool-pref("userChrome.autohide.tab.blur") { + .tabbrowser-tab:not([multiselected]) .tab-content:not(:hover):not([selected]) { + transition-property: filter; + } + } + } +} @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.autohide.navbar") or -moz-bool-pref( "userChrome.autohide.bookmarkbar" ) diff --git a/src/autohide/_index.scss b/src/autohide/_index.scss index 3d0dca69..6cbd0074 100644 --- a/src/autohide/_index.scss +++ b/src/autohide/_index.scss @@ -2,6 +2,10 @@ @import "forward_button"; } +@include Option("userChrome.autohide.tab") { + @import "tab"; +} + @import "common"; @include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar") { @include Option("userChrome.autohide.tabbar", "userChrome.tab.one_liner") { diff --git a/src/autohide/_tab.scss b/src/autohide/_tab.scss new file mode 100644 index 00000000..e9e3e411 --- /dev/null +++ b/src/autohide/_tab.scss @@ -0,0 +1,34 @@ +.tabbrowser-tab:not([multiselected]) .tab-content:not(:hover):not([selected]) { + @include NotOption("userChrome.autohide.tab.opacity") { + @include NotOption("userChrome.autohide.tab.blur") { + margin-bottom: -64px; + } + } + @include Option("userChrome.autohide.tab.opacity") { + opacity: 0%; + } + @include Option("userChrome.autohide.tab.blur") { + filter: blur(8px); + } + + @include Animate { + transition-timing-function: var(--animation-easing-function); + transition-duration: 0.2s; + transition-delay: 600ms; + &:hover { + transition-delay: 0s; + } + + @include NotOption("userChrome.autohide.tab.opacity") { + @include NotOption("userChrome.autohide.tab.blur") { + transition-property: margin-bottom; + } + } + @include Option("userChrome.autohide.tab.opacity") { + transition-property: opacity; + } + @include Option("userChrome.autohide.tab.blur") { + transition-property: filter; + } + } +} diff --git a/user.js b/user.js index 68dc9125..603091d7 100644 --- a/user.js +++ b/user.js @@ -73,6 +73,9 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.theme.proton_color.dark_blue_accent", true); +// user_pref("userChrome.autohide.tab", true); +// user_pref("userChrome.autohide.tab.opacity", true); +// user_pref("userChrome.autohide.tab.blur", true); // user_pref("userChrome.autohide.tabbar", true); // user_pref("userChrome.autohide.navbar", true); // user_pref("userChrome.autohide.bookmarkbar", true); From afa7159bc5dfae79418cf3509ab116810e8c3f43 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 26 Jul 2022 16:48:40 +0900 Subject: [PATCH 35/89] Add: Auto Hide - Back button --- css/leptonChrome.css | 18 ++++++++++++++++++ src/autohide/_back_button.scss | 16 ++++++++++++++++ src/autohide/_index.scss | 3 +++ user.js | 1 + 4 files changed, 38 insertions(+) create mode 100644 src/autohide/_back_button.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 3276ba32..bc450ce4 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5639,6 +5639,24 @@ } } /** Auto Hide *****************************************************************/ +@supports -moz-bool-pref("userChrome.autohide.back_button") { + #back-button[disabled="true"] { + margin-left: -36px !important; + opacity: 0 !important; + pointer-events: none; + } + + @media (prefers-reduced-motion: no-preference) { + #back-button { + transition-property: background-color, opacity, margin-left !important; + } + + #back-button[disabled="true"] { + transition: background-color 1s var(--animation-easing-function), opacity 1s var(--animation-easing-function), + margin-left 0.5s ease !important; + } + } +} @supports -moz-bool-pref("userChrome.autohide.forward_button") { #forward-button[disabled="true"] { margin-left: -36px !important; diff --git a/src/autohide/_back_button.scss b/src/autohide/_back_button.scss new file mode 100644 index 00000000..beab7818 --- /dev/null +++ b/src/autohide/_back_button.scss @@ -0,0 +1,16 @@ +#back-button[disabled="true"] { + margin-left: -36px !important; + opacity: 0 !important; + pointer-events: none; +} + +@include Animate { + #back-button { + transition-property: background-color, opacity, margin-left !important; + } + #back-button[disabled="true"] { + transition: background-color 1s var(--animation-easing-function), + opacity 1s var(--animation-easing-function), + margin-left 0.5s ease !important; + } +} diff --git a/src/autohide/_index.scss b/src/autohide/_index.scss index 6cbd0074..bc69cc00 100644 --- a/src/autohide/_index.scss +++ b/src/autohide/_index.scss @@ -1,3 +1,6 @@ +@include Option("userChrome.autohide.back_button") { + @import "back_button"; +} @include Option("userChrome.autohide.forward_button") { @import "forward_button"; } diff --git a/user.js b/user.js index 603091d7..6b75de41 100644 --- a/user.js +++ b/user.js @@ -80,6 +80,7 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.autohide.navbar", true); // user_pref("userChrome.autohide.bookmarkbar", true); // user_pref("userChrome.autohide.sidebar", true); +// user_pref("userChrome.autohide.back_button", true); // user_pref("userChrome.autohide.forward_button", true); // user_pref("userChrome.autohide.toolbar_overlap", true); From 4efe8af6ee196018683f062500703feebc5de26c Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 26 Jul 2022 16:49:14 +0900 Subject: [PATCH 36/89] Fix: Tabs on bottom - Padding bug, autohide bug --- css/leptonChrome.css | 56 +++++++++++++++++++++----- src/autohide/_tabbar.scss | 32 ++++++++++++--- src/tabbar/_tabs_on_bottom.scss | 5 ++- src/tabbar/layout/_window_control.scss | 2 +- 4 files changed, 77 insertions(+), 18 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index bc450ce4..89601c5a 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -3875,6 +3875,10 @@ display: none; } + #TabsToolbar-customization-target > .toolbarbutton-1:last-child { + padding-inline-end: var(--toolbar-start-end-padding, 8px); + } + @supports -moz-bool-pref("userChrome.tab.on_bottom.above_bookmark") { #PersonalToolbar { order: 2; @@ -3922,7 +3926,6 @@ #navigator-toolbox { -moz-window-dragging: drag; - padding-top: calc(var(--uc-menubar-height) + var(--uc-titlebar-padding)) !important; } :root[sizemode="fullscreen"] #navigator-toolbox { @@ -4074,7 +4077,7 @@ } } #navigator-toolbox { - padding-top: var(--uc-titlebar-padding) !important; + padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; } :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container { @@ -5838,16 +5841,31 @@ will-change: margin-bottom; } - #TabsToolbar:not([customizing]) { - opacity: 0; - will-change: opacity; + @supports not -moz-bool-pref("userChrome.tab.on_bottom") { + #TabsToolbar:not([customizing]) { + opacity: 0; + will-change: opacity; + } + } + @supports -moz-bool-pref("userChrome.tab.on_bottom") { + #TabsToolbar:not([customizing]) > *:not(.titlebar-buttonbox-container) { + opacity: 0; + will-change: opacity; + } } #navigator-toolbox:is(:hover, :focus-within) > #titlebar { margin-bottom: 0px; } - #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar { - opacity: 1; + @supports not -moz-bool-pref("userChrome.tab.on_bottom") { + #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar { + opacity: 1; + } + } + @supports -moz-bool-pref("userChrome.tab.on_bottom") { + #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar > *:not(.titlebar-buttonbox-container) { + opacity: 1; + } } @media (prefers-reduced-motion: no-preference) { @@ -5856,8 +5874,15 @@ background-color 1s var(--animation-easing-function) !important; } - #TabsToolbar:not([customizing]) { - transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay) !important; + @supports not -moz-bool-pref("userChrome.tab.on_bottom") { + #TabsToolbar:not([customizing]) { + transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay) !important; + } + } + @supports -moz-bool-pref("userChrome.tab.on_bottom") { + #TabsToolbar:not([customizing]) > *:not(.titlebar-buttonbox-container) { + transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay) !important; + } } #navigator-toolbox:is(:hover, :focus-within) { @@ -5866,8 +5891,17 @@ #navigator-toolbox:is(:hover, :focus-within) > #titlebar:not([customizing]) { transition-delay: 0s !important; } - #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar:not([customizing]) { - transition-delay: 0s !important; + @supports not -moz-bool-pref("userChrome.tab.on_bottom") { + #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar:not([customizing]) { + transition-delay: 0s !important; + } + } + @supports -moz-bool-pref("userChrome.tab.on_bottom") { + #navigator-toolbox:is(:hover, :focus-within) + #TabsToolbar:not([customizing]) + > *:not(.titlebar-buttonbox-container) { + transition-delay: 0s !important; + } } } } diff --git a/src/autohide/_tabbar.scss b/src/autohide/_tabbar.scss index c013cbf5..125a7697 100644 --- a/src/autohide/_tabbar.scss +++ b/src/autohide/_tabbar.scss @@ -1,10 +1,26 @@ +//-- Mixin --------------------------------------------------------------------- +@mixin _autohide_tabbar() { + @include NotOption("userChrome.tab.on_bottom") { + @content; + } + @include Option("userChrome.tab.on_bottom") { + > *:not(.titlebar-buttonbox-container) { + @content; + } + } +} + +//------------------------------------------------------------------------------ + :root:not([customizing]) #titlebar { margin-bottom: var(--uc-tabbar-hide-height); will-change: margin-bottom; } #TabsToolbar:not([customizing]) { - opacity: 0; - will-change: opacity; + @include _autohide_tabbar { + opacity: 0; + will-change: opacity; + } } #navigator-toolbox:is(:hover, :focus-within) { @@ -12,7 +28,9 @@ margin-bottom: 0px; } #TabsToolbar { - opacity: 1; + @include _autohide_tabbar { + opacity: 1; + } } } @@ -23,7 +41,9 @@ } #TabsToolbar:not([customizing]) { - transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay) !important; + @include _autohide_tabbar { + transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay) !important; + } } #navigator-toolbox:is(:hover, :focus-within) { @@ -34,7 +54,9 @@ } #TabsToolbar:not([customizing]) { - transition-delay: 0s !important; + @include _autohide_tabbar { + transition-delay: 0s !important; + } } } } diff --git a/src/tabbar/_tabs_on_bottom.scss b/src/tabbar/_tabs_on_bottom.scss index 4e7943a8..94fc61f9 100644 --- a/src/tabbar/_tabs_on_bottom.scss +++ b/src/tabbar/_tabs_on_bottom.scss @@ -16,6 +16,10 @@ See the above repository for updates as well as full license text. */ display: none; } +#TabsToolbar-customization-target > .toolbarbutton-1:last-child { + padding-inline-end: var(--toolbar-start-end-padding, 8px); +} + @include Option("userChrome.tab.on_bottom.above_bookmark") { #PersonalToolbar { order: 2; /* When userChrome.fullscreen.overlap */ @@ -60,7 +64,6 @@ See the above repository for updates as well as full license text. */ #navigator-toolbox{ -moz-window-dragging: drag; - padding-top: calc(var(--uc-menubar-height) + var(--uc-titlebar-padding)) !important; } :root[sizemode="fullscreen"] #navigator-toolbox { padding-top: 0px !important; diff --git a/src/tabbar/layout/_window_control.scss b/src/tabbar/layout/_window_control.scss index c309d49f..9a66be7c 100644 --- a/src/tabbar/layout/_window_control.scss +++ b/src/tabbar/layout/_window_control.scss @@ -33,7 +33,7 @@ See the above repository for updates as well as full license text. */ } #navigator-toolbox { - padding-top: var(--uc-titlebar-padding) !important; + padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; } :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container { From d74fd2a1f2f6db7e3a57f38b5632ddc6776b990a Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 27 Jul 2022 22:15:44 +0900 Subject: [PATCH 37/89] Add: Auto Hide - Infobar --- css/leptonChrome.css | 72 +++++++++++++++++++++++++++++--------- src/autohide/_common.scss | 2 +- src/autohide/_index.scss | 3 ++ src/autohide/_infobar.scss | 27 ++++++++++++++ src/padding/_info_bar.scss | 35 ++++++++++++------ 5 files changed, 110 insertions(+), 29 deletions(-) create mode 100644 src/autohide/_infobar.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 89601c5a..f9e4e04a 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -3523,44 +3523,44 @@ /*= Info Bar - Reduce Padding ================================================*/ @supports -moz-bool-pref("userChrome.padding.infobar") { :root:not([uidensity]) #tab-notification-deck { - --infobar-message-margin: 0 4px 3px; + --infobar-message-vertical-margin: 3px; + --infobar-vertical-margin: 7px; + --infobar-button-vertical-margin: 3px; } :root[uidensity="compact"] #tab-notification-deck { - --infobar-message-margin: 0 4px 2px; - } - - #tab-notification-deck notification-message[message-bar-type="infobar"]:not([style*="margin-top"]) { - margin: var(--infobar-message-margin, 0 4px 4px) !important; + --infobar-message-vertical-margin: 2px; + --infobar-vertical-margin: 6px; + --infobar-button-vertical-margin: 2px; } - :root:not([uidensity]) notification-message[message-bar-type="infobar"] { - --infobar-vertical-margin: 7px; - --infobar-button-vertical-margin: 3px; + :root[uidensity="touch"] #tab-notification-deck { + --infobar-message-vertical-margin: 4px; + --infobar-vertical-margin: 8px; + --infobar-button-vertical-margin: 4px; } - :root[uidensity="compact"] notification-message[message-bar-type="infobar"] { - --infobar-vertical-margin: 6px; - --infobar-button-vertical-margin: 2px; + #tab-notification-deck notification-message[message-bar-type="infobar"]:not([style*="margin-top"]) { + margin: var(--infobar-message-margin, 0 4px var(--infobar-message-vertical-margin)) !important; } .infobar > .icon { - margin-block: var(--infobar-vertical-margin, 8px) !important; + margin-block: var(--infobar-vertical-margin) !important; /* Original: 8px */ } .notification-message { - padding-block: var(--infobar-vertical-margin, 8px) !important; + padding-block: var(--infobar-vertical-margin) !important; /* Original: 8px */ } .notification-button-container > .notification-button { - margin-block: var(--infobar-button-vertical-margin, 4px) !important; + margin-block: var(--infobar-button-vertical-margin) !important; /* Original: 4px */ } .notification-close { - margin: var(--infobar-button-vertical-margin, 4px) 8px !important; + margin: var(--infobar-button-vertical-margin) 8px !important; /* Original: 4px 8px */ } @@ -5740,7 +5740,8 @@ } @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.autohide.infobar") { :root { --uc-autohide-toolbar-delay: 600ms; } @@ -5961,6 +5962,43 @@ } } } +@supports -moz-bool-pref("userChrome.autohide.infobar") { + #tab-notification-deck:not([customizing]) > .notificationbox-stack { + --infobar-height: calc( + 25px + (var(--infobar-button-vertical-margin, 4px) * 2) + var(--infobar-message-vertical-margin, 8px) + ); + } + + #tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message { + --infobar-message-margin: 0 4px calc(-1 * var(--infobar-height)); + opacity: 0; + will-change: margin-bottom, opacity; + } + + #navigator-toolbox:is(:hover, :focus-within) + #tab-notification-deck:not([customizing]) + > .notificationbox-stack[slot="selected"] + > notification-message { + --infobar-message-margin: 0 4px var(--infobar-message-vertical-margin, 8px); + margin-bottom: 0; + opacity: 1; + } + + @media (prefers-reduced-motion: no-preference) { + #tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message { + transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + var(--ext-theme-background-transition) !important; + } + + #navigator-toolbox:is(:hover, :focus-within) + #tab-notification-deck:not([customizing]) + > .notificationbox-stack[slot="selected"] + > notification-message { + transition-delay: 0s !important; + } + } +} @supports -moz-bool-pref("userChrome.autohide.sidebar") { #sidebar-box { min-width: var(--uc-sidebar-width) !important; diff --git a/src/autohide/_common.scss b/src/autohide/_common.scss index e6df5b63..a4a46d46 100644 --- a/src/autohide/_common.scss +++ b/src/autohide/_common.scss @@ -9,7 +9,7 @@ } } -@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar") { +@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar", "userChrome.autohide.infobar") { :root { --uc-autohide-toolbar-delay: 600ms; } diff --git a/src/autohide/_index.scss b/src/autohide/_index.scss index bc69cc00..8ea7d1ad 100644 --- a/src/autohide/_index.scss +++ b/src/autohide/_index.scss @@ -21,5 +21,8 @@ @include Option("userChrome.autohide.bookmarkbar") { @import "bookmarkbar"; } +@include Option("userChrome.autohide.infobar") { + @import "infobar"; +} @import "sidebar"; diff --git a/src/autohide/_infobar.scss b/src/autohide/_infobar.scss new file mode 100644 index 00000000..77536b71 --- /dev/null +++ b/src/autohide/_infobar.scss @@ -0,0 +1,27 @@ +#tab-notification-deck:not([customizing]) > .notificationbox-stack { + $infobarFixedHeight: 13px + ((1px + 5px) * 2); // button height + (button border + [button.small-button padding]) * 2 + // fiexedHeight + (button margin * 2) + messagebar margin + --infobar-height: calc(#{ $infobarFixedHeight } + (var(--infobar-button-vertical-margin, 4px) * 2) + var(--infobar-message-vertical-margin, 8px)); +} +#tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message { + --infobar-message-margin: 0 4px calc(-1 * var(--infobar-height)); + opacity: 0; + will-change: margin-bottom, opacity; +} + +#navigator-toolbox:is(:hover, :focus-within) #tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message { + --infobar-message-margin: 0 4px var(--infobar-message-vertical-margin, 8px); + margin-bottom: 0; + opacity: 1; +} + +@include Animate { + #tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message { + transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + var(--ext-theme-background-transition) !important; + } + #navigator-toolbox:is(:hover, :focus-within) #tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message { + transition-delay: 0s !important; + } +} diff --git a/src/padding/_info_bar.scss b/src/padding/_info_bar.scss index 409550cd..098e5b22 100644 --- a/src/padding/_info_bar.scss +++ b/src/padding/_info_bar.scss @@ -1,32 +1,45 @@ :root:not([uidensity]) #tab-notification-deck { - --infobar-message-margin: 0 4px 3px; + --infobar-message-vertical-margin: 3px; + + --infobar-vertical-margin: 7px; + --infobar-button-vertical-margin: 3px; } :root[uidensity="compact"] #tab-notification-deck { - --infobar-message-margin: 0 4px 2px; + --infobar-message-vertical-margin: 2px; + + --infobar-vertical-margin: 6px; + --infobar-button-vertical-margin: 2px; +} +:root[uidensity="touch"] #tab-notification-deck { + --infobar-message-vertical-margin: 4px; + + --infobar-vertical-margin: 8px; + --infobar-button-vertical-margin: 4px; } #tab-notification-deck notification-message[message-bar-type="infobar"]:not([style*="margin-top"]) { - margin: var(--infobar-message-margin, 0 4px 4px) !important; + margin: var(--infobar-message-margin, 0 4px var(--infobar-message-vertical-margin)) !important; } +:root:not([uidensity]) #tab-notification-deck, :root:not([uidensity]) notification-message[message-bar-type="infobar"] { - --infobar-vertical-margin: 7px; - --infobar-button-vertical-margin: 3px; } +:root[uidensity="compact"] #tab-notification-deck, :root[uidensity="compact"] notification-message[message-bar-type="infobar"] { - --infobar-vertical-margin: 6px; - --infobar-button-vertical-margin: 2px; +} +:root[uidensity="touch"] #tab-notification-deck, +:root[uidensity="touch"] notification-message[message-bar-type="infobar"] { } .infobar > .icon { - margin-block: var(--infobar-vertical-margin, 8px) !important; /* Original: 8px */ + margin-block: var(--infobar-vertical-margin) !important; /* Original: 8px */ } .notification-message { - padding-block: var(--infobar-vertical-margin, 8px) !important; /* Original: 8px */ + padding-block: var(--infobar-vertical-margin) !important; /* Original: 8px */ } .notification-button-container > .notification-button { - margin-block: var(--infobar-button-vertical-margin, 4px) !important; /* Original: 4px */ + margin-block: var(--infobar-button-vertical-margin) !important; /* Original: 4px */ } .notification-close { - margin: var(--infobar-button-vertical-margin, 4px) 8px !important; /* Original: 4px 8px */ + margin: var(--infobar-button-vertical-margin) 8px !important; /* Original: 4px 8px */ } /* Hard coded for compatibility - Disappearing phenomenon */ From e1fe6dccf6833f8c54e60ed0dbcbebe5eed14439 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 28 Jul 2022 10:30:34 +0900 Subject: [PATCH 38/89] Fix: Auto Hide - Infobar with overlap --- css/leptonChrome.css | 15 ++++++++++----- src/autohide/_infobar.scss | 7 ++++++- src/padding/_index.scss | 5 +++++ src/padding/_info_bar.scss | 3 --- 4 files changed, 21 insertions(+), 9 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index f9e4e04a..71fb1194 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -3521,6 +3521,11 @@ } } /*= Info Bar - Reduce Padding ================================================*/ +@supports -moz-bool-pref("userChrome.padding.infobar") or -moz-bool-pref("userChrome.autohide.infobar") { + #tab-notification-deck notification-message[message-bar-type="infobar"]:not([style*="margin-top"]) { + margin: var(--infobar-message-margin, 0 4px var(--infobar-message-vertical-margin, 8px)) !important; + } +} @supports -moz-bool-pref("userChrome.padding.infobar") { :root:not([uidensity]) #tab-notification-deck { --infobar-message-vertical-margin: 3px; @@ -3540,10 +3545,6 @@ --infobar-button-vertical-margin: 4px; } - #tab-notification-deck notification-message[message-bar-type="infobar"]:not([style*="margin-top"]) { - margin: var(--infobar-message-margin, 0 4px var(--infobar-message-vertical-margin)) !important; - } - .infobar > .icon { margin-block: var(--infobar-vertical-margin) !important; /* Original: 8px */ @@ -5980,10 +5981,14 @@ > .notificationbox-stack[slot="selected"] > notification-message { --infobar-message-margin: 0 4px var(--infobar-message-vertical-margin, 8px); - margin-bottom: 0; opacity: 1; } + @supports -moz-bool-pref("userChrome.autohide.toolbar_overlap") { + #tab-notification-deck:not([customizing]) { + height: 0; + } + } @media (prefers-reduced-motion: no-preference) { #tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message { transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), diff --git a/src/autohide/_infobar.scss b/src/autohide/_infobar.scss index 77536b71..39c9fb82 100644 --- a/src/autohide/_infobar.scss +++ b/src/autohide/_infobar.scss @@ -11,10 +11,15 @@ #navigator-toolbox:is(:hover, :focus-within) #tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message { --infobar-message-margin: 0 4px var(--infobar-message-vertical-margin, 8px); - margin-bottom: 0; opacity: 1; } +@include Option("userChrome.autohide.toolbar_overlap") { + #tab-notification-deck:not([customizing]) { + height: 0; + } +} + @include Animate { #tab-notification-deck:not([customizing]) > .notificationbox-stack[slot="selected"] > notification-message { transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), diff --git a/src/padding/_index.scss b/src/padding/_index.scss index b4872dc9..4d6776a4 100644 --- a/src/padding/_index.scss +++ b/src/padding/_index.scss @@ -46,6 +46,11 @@ } /*= Info Bar - Reduce Padding ================================================*/ +@include Option("userChrome.padding.infobar", "userChrome.autohide.infobar") { + #tab-notification-deck notification-message[message-bar-type="infobar"]:not([style*="margin-top"]) { + margin: var(--infobar-message-margin, 0 4px var(--infobar-message-vertical-margin, 8px)) !important; + } +} @include Option("userChrome.padding.infobar") { @import "info_bar"; } diff --git a/src/padding/_info_bar.scss b/src/padding/_info_bar.scss index 098e5b22..9697bc68 100644 --- a/src/padding/_info_bar.scss +++ b/src/padding/_info_bar.scss @@ -16,9 +16,6 @@ --infobar-vertical-margin: 8px; --infobar-button-vertical-margin: 4px; } -#tab-notification-deck notification-message[message-bar-type="infobar"]:not([style*="margin-top"]) { - margin: var(--infobar-message-margin, 0 4px var(--infobar-message-vertical-margin)) !important; -} :root:not([uidensity]) #tab-notification-deck, :root:not([uidensity]) notification-message[message-bar-type="infobar"] { From c9006ff2a900fe40bcd02a73c4632a1ea90efc3f Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 28 Jul 2022 12:58:28 +0900 Subject: [PATCH 39/89] Clean: filenames --- src/padding/{_bookmark_bar.scss => _bookmarkbar.scss} | 0 src/padding/_index.scss | 8 ++++---- src/padding/{_info_bar.scss => _infobar.scss} | 0 src/padding/{_nav_bar.scss => _navbar.scss} | 0 src/padding/{_url_bar.scss => _urlbar.scss} | 0 5 files changed, 4 insertions(+), 4 deletions(-) rename src/padding/{_bookmark_bar.scss => _bookmarkbar.scss} (100%) rename src/padding/{_info_bar.scss => _infobar.scss} (100%) rename src/padding/{_nav_bar.scss => _navbar.scss} (100%) rename src/padding/{_url_bar.scss => _urlbar.scss} (100%) diff --git a/src/padding/_bookmark_bar.scss b/src/padding/_bookmarkbar.scss similarity index 100% rename from src/padding/_bookmark_bar.scss rename to src/padding/_bookmarkbar.scss diff --git a/src/padding/_index.scss b/src/padding/_index.scss index 4d6776a4..6acdb098 100644 --- a/src/padding/_index.scss +++ b/src/padding/_index.scss @@ -26,12 +26,12 @@ /*= Nav Bar - Reduce Width ===================================================*/ @include Option("userChrome.padding.navbar_width") { - @import "nav_bar"; + @import "navbar"; } /*= URL Bar - Reduce Padding =================================================*/ @include Option("userChrome.padding.urlbar") { - @import "url_bar"; + @import "urlbar"; } @include Option("userChrome.padding.urlView_expanding") { @import "urlview_expanding"; @@ -42,7 +42,7 @@ /*= BookMark Bar - Reduce Height =============================================*/ @include Option("userChrome.padding.bookmarkbar") { - @import "bookmark_bar"; + @import "bookmarkbar"; } /*= Info Bar - Reduce Padding ================================================*/ @@ -52,7 +52,7 @@ } } @include Option("userChrome.padding.infobar") { - @import "info_bar"; + @import "infobar"; } /*= Menu - Reduce Padding ====================================================*/ diff --git a/src/padding/_info_bar.scss b/src/padding/_infobar.scss similarity index 100% rename from src/padding/_info_bar.scss rename to src/padding/_infobar.scss diff --git a/src/padding/_nav_bar.scss b/src/padding/_navbar.scss similarity index 100% rename from src/padding/_nav_bar.scss rename to src/padding/_navbar.scss diff --git a/src/padding/_url_bar.scss b/src/padding/_urlbar.scss similarity index 100% rename from src/padding/_url_bar.scss rename to src/padding/_urlbar.scss From 4e2f6fdce2c572bd0706f2fb92b7b494f5b4aeab Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 29 Jul 2022 07:14:35 +0900 Subject: [PATCH 40/89] Add: Auto Hide - Page action --- css/leptonChrome.css | 32 ++++++++++++++++++++++++++++++++ src/autohide/_index.scss | 3 +++ src/autohide/_page_action.scss | 29 +++++++++++++++++++++++++++++ user.js | 1 + 4 files changed, 65 insertions(+) create mode 100644 src/autohide/_page_action.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 71fb1194..d993d07c 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5679,6 +5679,38 @@ } } } +@supports -moz-bool-pref("userChrome.autohide.page_action") { + #page-action-buttons > .urlbar-page-action { + margin-inline-end: calc(-16px - 2 * var(--urlbar-icon-padding)); + opacity: 0; + } + + #urlbar-container:hover #page-action-buttons > .urlbar-page-action, + .urlbar-page-action[open], + .urlbar-page-action[open] ~ .urlbar-page-action { + margin-inline-end: 0px !important; + opacity: 1; + } + + @media (prefers-reduced-motion: no-preference) { + #page-action-buttons > .urlbar-page-action { + transition: margin-inline-end 50ms var(--animation-easing-function) 900ms, + opacity 1.5s var(--animation-easing-function) 600ms !important; + } + @supports -moz-bool-pref("userChrome.decoration.animate") { + #page-action-buttons > .urlbar-page-action { + transition: margin-inline-end 50ms var(--animation-easing-function) 900ms, + opacity 1.5s var(--animation-easing-function) 600ms, background-color 2.5s var(--animation-easing-function) !important; + } + } + + #urlbar-container:hover #page-action-buttons > .urlbar-page-action, + .urlbar-page-action[open], + .urlbar-page-action[open] ~ .urlbar-page-action { + transition-delay: 0s !important; + } + } +} @supports -moz-bool-pref("userChrome.autohide.tab") { @supports not -moz-bool-pref("userChrome.autohide.tab.opacity") { @supports not -moz-bool-pref("userChrome.autohide.tab.blur") { diff --git a/src/autohide/_index.scss b/src/autohide/_index.scss index 8ea7d1ad..874609fe 100644 --- a/src/autohide/_index.scss +++ b/src/autohide/_index.scss @@ -4,6 +4,9 @@ @include Option("userChrome.autohide.forward_button") { @import "forward_button"; } +@include Option("userChrome.autohide.page_action") { + @import "page_action"; +} @include Option("userChrome.autohide.tab") { @import "tab"; diff --git a/src/autohide/_page_action.scss b/src/autohide/_page_action.scss new file mode 100644 index 00000000..67ff7926 --- /dev/null +++ b/src/autohide/_page_action.scss @@ -0,0 +1,29 @@ +#page-action-buttons > .urlbar-page-action { + margin-inline-end: calc(-16px - 2 * var(--urlbar-icon-padding) ); + opacity: 0; +} + +#urlbar-container:hover #page-action-buttons > .urlbar-page-action, +.urlbar-page-action[open], +.urlbar-page-action[open] ~ .urlbar-page-action { + margin-inline-end: 0px !important; + opacity: 1; +} + +@include Animate { + #page-action-buttons > .urlbar-page-action { + transition: margin-inline-end 50ms var(--animation-easing-function) 900ms, + opacity 1.5s var(--animation-easing-function) 600ms !important; + + @include Option("userChrome.decoration.animate") { + transition: margin-inline-end 50ms var(--animation-easing-function) 900ms, + opacity 1.5s var(--animation-easing-function) 600ms, + background-color 2.5s var(--animation-easing-function) !important; + } + } + #urlbar-container:hover #page-action-buttons > .urlbar-page-action, + .urlbar-page-action[open], + .urlbar-page-action[open] ~ .urlbar-page-action{ + transition-delay: 0s !important; + } +} diff --git a/user.js b/user.js index 6b75de41..273d3ebc 100644 --- a/user.js +++ b/user.js @@ -82,6 +82,7 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.autohide.sidebar", true); // user_pref("userChrome.autohide.back_button", true); // user_pref("userChrome.autohide.forward_button", true); +// user_pref("userChrome.autohide.page_action", true); // user_pref("userChrome.autohide.toolbar_overlap", true); // user_pref("userChrome.rounding.square_button", true); From 188abc48d0b5e9e6b47531b61d4018826b520c41 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 29 Jul 2022 09:13:39 +0900 Subject: [PATCH 41/89] Fix: One Liner - Vertical Align --- css/leptonChrome.css | 4 ++++ src/tabbar/_one_liner.scss | 3 +++ 2 files changed, 7 insertions(+) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index d993d07c..da67094d 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4001,6 +4001,10 @@ height: var(--uc-tabbar-height) !important; } + #nav-bar > * { + transform: translateY(calc((var(--uc-tabbar-height) + var(--uc-navbar-hide-height)) / 2)); + } + #urlbar-container { min-width: 0px !important; } diff --git a/src/tabbar/_one_liner.scss b/src/tabbar/_one_liner.scss index 59ad4381..0e35b388 100644 --- a/src/tabbar/_one_liner.scss +++ b/src/tabbar/_one_liner.scss @@ -11,6 +11,9 @@ margin-top: var(--uc-tabbar-hide-height) !important; height: var(--uc-tabbar-height) !important; } +#nav-bar > * { + transform: translateY(calc((var(--uc-tabbar-height) + var(--uc-navbar-hide-height)) / 2)); +} #urlbar-container { min-width: 0px !important; From 692380ce0779d55f2396730e2252691a2521886c Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 31 Jul 2022 05:59:25 +0900 Subject: [PATCH 42/89] Fix: Auto Hide - Bookmark overlap mode --- css/leptonChrome.css | 6 ++++++ src/autohide/_bookmarkbar.scss | 7 +++++++ 2 files changed, 13 insertions(+) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index da67094d..ef219723 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5981,6 +5981,12 @@ opacity: 0; will-change: margin-bottom, opacity; } + @supports -moz-bool-pref("userChrome.autohide.toolbar_overlap") { + #PersonalToolbar:not([customizing])[collapsed="true"] { + visibility: visible !important; + max-height: unset !important; + } + } #navigator-toolbox:is(:hover, :focus-within) #PersonalToolbar:not([customizing]) { margin-bottom: 0; diff --git a/src/autohide/_bookmarkbar.scss b/src/autohide/_bookmarkbar.scss index 24de7f50..af0f9e47 100644 --- a/src/autohide/_bookmarkbar.scss +++ b/src/autohide/_bookmarkbar.scss @@ -3,6 +3,13 @@ margin-bottom: var(--uc-bm-hide-height); opacity: 0; will-change: margin-bottom, opacity; + + @include Option("userChrome.autohide.toolbar_overlap") { + &[collapsed="true"] { + visibility: visible !important; + max-height: unset !important; + } + } } #navigator-toolbox:is(:hover, :focus-within) #PersonalToolbar:not([customizing]) { From 5c6640bf206f63b64acdfedd0d1a95abfa2018a5 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 31 Jul 2022 18:57:07 +0900 Subject: [PATCH 43/89] Fix: Auto Hide - Hide tabbar size conditional --- css/leptonChrome.css | 6 ++++-- src/autohide/_toolbar_overlap.scss | 4 +++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index ef219723..7a252a27 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5822,8 +5822,10 @@ } } @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.tab.one_liner") { - #navigator-toolbox:hover { - --uc-toolbar-height: var(--uc-tabbar-height); + @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.autohide.navbar") { + #navigator-toolbox:hover { + --uc-toolbar-height: var(--uc-tabbar-height); + } } @supports not -moz-bool-pref("userChrome.autohide.navbar") { @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { diff --git a/src/autohide/_toolbar_overlap.scss b/src/autohide/_toolbar_overlap.scss index 03be1f3e..03a3f65b 100644 --- a/src/autohide/_toolbar_overlap.scss +++ b/src/autohide/_toolbar_overlap.scss @@ -27,7 +27,9 @@ &:hover { @include Option("userChrome.autohide.tabbar", "userChrome.tab.one_liner") { - --uc-toolbar-height: var(--uc-tabbar-height); + @include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar") { + --uc-toolbar-height: var(--uc-tabbar-height); + } @include NotOption("userChrome.autohide.navbar") { @include Option("userChrome.autohide.bookmarkbar") { From 0d543b62f12de405b52fa58ed39364976df12ea9 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 1 Aug 2022 20:55:19 +0900 Subject: [PATCH 44/89] Add: One Liner - responsive --- css/leptonChrome.css | 604 +++++++++++++----- src/autohide/_navbar.scss | 2 +- src/autohide/_toolbar_overlap.scss | 1 + src/leptonChrome.scss | 1 + src/padding/_tabbar_width.scss | 2 +- src/tabbar/_index.scss | 6 +- .../unselected_tab/_dynamic_separator.scss | 8 +- user.js | 1 + 8 files changed, 447 insertions(+), 178 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 7a252a27..24643506 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -3247,8 +3247,17 @@ } } @supports -moz-bool-pref("userChrome.tab.one_liner") { - :root { - --tab-max-width: 180px; + @supports not -moz-bool-pref("userChrome.tab.one_liner.responsive") { + :root { + --tab-max-width: 180px; + } + } + @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @media screen and (min-width: 1100px) { + :root { + --tab-max-width: 180px; + } + } } } @@ -3987,225 +3996,455 @@ } /*= Tab Bar - Oneliner =======================================================*/ @supports -moz-bool-pref("userChrome.tab.one_liner") { - :root { - --uc-navbar-size: 40vw; - --uc-tabbar-size: calc(100vw - var(--uc-navbar-size)); - } - - #navigator-toolbox { - background-color: var(--toolbar-bgcolor) !important; - } - - #nav-bar { - margin-top: var(--uc-tabbar-hide-height) !important; - height: var(--uc-tabbar-height) !important; - } - - #nav-bar > * { - transform: translateY(calc((var(--uc-tabbar-height) + var(--uc-navbar-hide-height)) / 2)); - } + @supports not -moz-bool-pref("userChrome.tab.one_liner.responsive") { + :root { + --uc-navbar-size: 40vw; + --uc-tabbar-size: calc(100vw - var(--uc-navbar-size)); + } - #urlbar-container { - min-width: 0px !important; - } + #navigator-toolbox { + background-color: var(--toolbar-bgcolor) !important; + } - toolbarspring.chromeclass-toolbar-additional { - display: none !important; - } + #nav-bar { + margin-top: var(--uc-tabbar-hide-height) !important; + height: var(--uc-tabbar-height) !important; + } - @supports not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { - #TabsToolbar { - margin-inline-start: var(--uc-navbar-size) !important; + #nav-bar > * { + transform: translateY(calc((var(--uc-tabbar-height) + var(--uc-navbar-hide-height)) / 2)); } - #nav-bar { - margin-inline-end: var(--uc-tabbar-size) !important; + #urlbar-container { + min-width: 0px !important; } - .titlebar-spacer[type="pre-tabs"] { + toolbarspring.chromeclass-toolbar-additional { display: none !important; } - } - @supports -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { - #TabsToolbar { - margin-inline-end: var(--uc-navbar-size) !important; + + @supports not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { + #TabsToolbar { + margin-inline-start: var(--uc-navbar-size) !important; + } + + #nav-bar { + margin-inline-end: var(--uc-tabbar-size) !important; + } + + .titlebar-spacer[type="pre-tabs"] { + display: none !important; + } } + @supports -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { + #TabsToolbar { + margin-inline-end: var(--uc-navbar-size) !important; + } - #nav-bar { - margin-inline-start: var(--uc-tabbar-size) !important; + #nav-bar { + margin-inline-start: var(--uc-tabbar-size) !important; + } + + .titlebar-spacer[type="post-tabs"] { + display: none !important; + } } + } + @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @media screen and (min-width: 1100px) { + :root { + --uc-navbar-size: 40vw; + --uc-tabbar-size: calc(100vw - var(--uc-navbar-size)); + } - .titlebar-spacer[type="post-tabs"] { - display: none !important; + #navigator-toolbox { + background-color: var(--toolbar-bgcolor) !important; + } + + #nav-bar { + margin-top: var(--uc-tabbar-hide-height) !important; + height: var(--uc-tabbar-height) !important; + } + + #nav-bar > * { + transform: translateY(calc((var(--uc-tabbar-height) + var(--uc-navbar-hide-height)) / 2)); + } + + #urlbar-container { + min-width: 0px !important; + } + + toolbarspring.chromeclass-toolbar-additional { + display: none !important; + } + + @supports not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { + #TabsToolbar { + margin-inline-start: var(--uc-navbar-size) !important; + } + + #nav-bar { + margin-inline-end: var(--uc-tabbar-size) !important; + } + + .titlebar-spacer[type="pre-tabs"] { + display: none !important; + } + } + @supports -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { + #TabsToolbar { + margin-inline-end: var(--uc-navbar-size) !important; + } + + #nav-bar { + margin-inline-start: var(--uc-tabbar-size) !important; + } + + .titlebar-spacer[type="post-tabs"] { + display: none !important; + } + } } } } /*= Tab Bar - Shared Layout ==================================================*/ @supports -moz-bool-pref("userChrome.tab.on_bottom") or -moz-bool-pref("userChrome.tab.one_liner") { - @supports -moz-bool-pref("userChrome.tab.on_bottom") or -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { - /*= Windows Control - Move to toolbar ========================================*/ - /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 - See the above repository for updates as well as full license text. */ - :root { - --uc-titlebar-padding: 0px; - } + @supports not -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @supports -moz-bool-pref("userChrome.tab.on_bottom") or -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { + /*= Windows Control - Move to toolbar ========================================*/ + /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 + See the above repository for updates as well as full license text. */ + :root { + --uc-titlebar-padding: 0px; + } - @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) { - :root[sizemode="maximized"][tabsintitlebar] { - --uc-titlebar-padding: 8px; + @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) { + :root[sizemode="maximized"][tabsintitlebar] { + --uc-titlebar-padding: 8px; + } + } + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, + #TabsToolbar > .titlebar-buttonbox-container { + position: fixed; + display: block; + top: var(--uc-titlebar-padding); + right: 0; + height: 40px; + z-index: 1; } - } - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, - #TabsToolbar > .titlebar-buttonbox-container { - position: fixed; - display: block; - top: var(--uc-titlebar-padding); - right: 0; - height: 40px; - z-index: 1; - } - /* where window controls are on left */ - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - :root { - --uc-titlebar-padding: 0px !important; + /* where window controls are on left */ + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + :root { + --uc-titlebar-padding: 0px !important; + } + + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + #navigator-toolbox { + padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; } - .titlebar-buttonbox-container { - left: 0; - right: unset !important; + :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container { + height: 32px; + } + + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + opacity: 0; + } + + .titlebar-buttonbox-container > .titlebar-buttonbox { + height: 100%; + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + .titlebar-buttonbox-container > .titlebar-buttonbox { + margin-block: 10px; + } + } + + /* At Full Screen */ + :root[sizemode="fullscreen"] #window-controls { + position: fixed; + display: flex; + top: 0; + right: 0; + height: 40px; + } + + :root[uidensity="compact"][sizemode="fullscreen"] #window-controls { + height: 32px; + } + + @supports -moz-bool-pref("browser.fullscreen.autohide") { + :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { + visibility: hidden; + } + } + /* At Activated Menubar */ + :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) + #toolbar-menubar:not([autohide="true"]) + + #TabsToolbar + > .titlebar-buttonbox-container { + display: block !important; + } + + :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { + visibility: hidden; } } - #navigator-toolbox { - padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; + /*= 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"] */ } - :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container { - height: 32px; + :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); } - #toolbar-menubar[inactive] > .titlebar-buttonbox-container { - opacity: 0; + :root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) { + --uc-window-drag-space-pre: 0px; + /* Remove pre space */ } - .titlebar-buttonbox-container > .titlebar-buttonbox { - height: 100%; - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - .titlebar-buttonbox-container > .titlebar-buttonbox { - margin-block: 10px; + @supports -moz-bool-pref("userChrome.tab.one_liner") { + @supports not -moz-bool-pref("userChrome.tab.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 -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + /* Don't need pre spacer */ + --uc-window-drag-space-pre: 0px; + } } } - - /* At Full Screen */ - :root[sizemode="fullscreen"] #window-controls { - position: fixed; - display: flex; - top: 0; - right: 0; - height: 40px; - } - - :root[uidensity="compact"][sizemode="fullscreen"] #window-controls { - height: 32px; + #nav-bar { + border-inline-start-width: var(--uc-window-drag-space-pre); + border-inline-end-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); + border-inline-style: solid !important; + border-inline-color: var(--toolbar-bgcolor); } - @supports -moz-bool-pref("browser.fullscreen.autohide") { - :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { - visibility: hidden; + /* 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; } } - /* At Activated Menubar */ - :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) - #toolbar-menubar:not([autohide="true"]) - + #TabsToolbar - > .titlebar-buttonbox-container { - display: block !important; + @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; + } - :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { - visibility: hidden; + :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { + border-inline-start-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); + border-inline-end-width: var(--uc-window-drag-space-pre); + } + + :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, + :root[sizemode="fullscreen"] #window-controls { + right: unset; + } } } - /*= 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"] */ - } + @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @media screen and (min-width: 1100px) { + @supports -moz-bool-pref("userChrome.tab.on_bottom") or -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { + /*= Windows Control - Move to toolbar ========================================*/ + /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 + See the above repository for updates as well as full license text. */ + :root { + --uc-titlebar-padding: 0px; + } - :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), + (-moz-os-version: windows-win10), + (-moz-platform: windows-win10) { + :root[sizemode="maximized"][tabsintitlebar] { + --uc-titlebar-padding: 8px; + } + } + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, + #TabsToolbar > .titlebar-buttonbox-container { + position: fixed; + display: block; + top: var(--uc-titlebar-padding); + right: 0; + height: 40px; + z-index: 1; + } - :root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) { - --uc-window-drag-space-pre: 0px; - /* Remove pre space */ - } + /* where window controls are on left */ + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + :root { + --uc-titlebar-padding: 0px !important; + } - @supports -moz-bool-pref("userChrome.tab.one_liner") { - @supports not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { - :root:is([tabsintitlebar], [sizemode="fullscreen"]) { - /* Don't need window control */ + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + #navigator-toolbox { + padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; + } + + :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container { + height: 32px; + } + + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + opacity: 0; + } + + .titlebar-buttonbox-container > .titlebar-buttonbox { + height: 100%; + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + .titlebar-buttonbox-container > .titlebar-buttonbox { + margin-block: 10px; + } + } + + /* At Full Screen */ + :root[sizemode="fullscreen"] #window-controls { + position: fixed; + display: flex; + top: 0; + right: 0; + height: 40px; + } + + :root[uidensity="compact"][sizemode="fullscreen"] #window-controls { + height: 32px; + } + + @supports -moz-bool-pref("browser.fullscreen.autohide") { + :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { + visibility: hidden; + } + } + /* At Activated Menubar */ + :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) + #toolbar-menubar:not([autohide="true"]) + + #TabsToolbar + > .titlebar-buttonbox-container { + display: block !important; + } + + :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { + visibility: hidden; + } + } + /*= 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"] */ } - } - @supports -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { - /* Don't need pre spacer */ + --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 */ } - } - } - #nav-bar { - border-inline-start-width: var(--uc-window-drag-space-pre); - border-inline-end-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); - border-inline-style: solid !important; - border-inline-color: var(--toolbar-bgcolor); - } - /* 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 -moz-bool-pref("userChrome.tab.one_liner") { + @supports not -moz-bool-pref("userChrome.tab.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 -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + /* Don't need pre spacer */ + --uc-window-drag-space-pre: 0px; + } + } + } + #nav-bar { + border-inline-start-width: var(--uc-window-drag-space-pre); + border-inline-end-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); + border-inline-style: solid !important; + border-inline-color: var(--toolbar-bgcolor); + } - :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { - border-inline-start-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); - border-inline-end-width: var(--uc-window-drag-space-pre); - } + /* 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; + } + + :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { + border-inline-start-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); + border-inline-end-width: var(--uc-window-drag-space-pre); + } - :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, - :root[sizemode="fullscreen"] #window-controls { - right: unset; + :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, + :root[sizemode="fullscreen"] #window-controls { + right: unset; + } + } } } } @@ -4691,9 +4930,19 @@ @supports -moz-bool-pref("userChrome.tab.one_liner") { @supports not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { - .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-background::before { - opacity: var(--tab-separator-opacity); - transform: translateX(-1.5px) translateY(calc(-50% + 1px)); + @supports not -moz-bool-pref("userChrome.tab.one_liner.responsive") { + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-background::before { + opacity: var(--tab-separator-opacity); + transform: translateX(-1.5px) translateY(calc(-50% + 1px)); + } + } + @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @media screen and (min-width: 1100px) { + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-background::before { + opacity: var(--tab-separator-opacity); + transform: translateX(-1.5px) translateY(calc(-50% + 1px)); + } + } } } } @@ -5964,6 +6213,19 @@ margin-bottom: 0; } } + @supports -moz-bool-pref("userChrome.tab.one_liner") { + @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @media screen and (max-width: 1100px) { + #nav-bar:not([customizing]) { + margin-bottom: var(--uc-navbar-hide-height); + } + + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { + margin-bottom: 0; + } + } + } + } @media (prefers-reduced-motion: no-preference) { #nav-bar:not([customizing]) { transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), diff --git a/src/autohide/_navbar.scss b/src/autohide/_navbar.scss index e7e624e3..21a59c7d 100644 --- a/src/autohide/_navbar.scss +++ b/src/autohide/_navbar.scss @@ -6,7 +6,7 @@ opacity: 1; } -@include NotOption("userChrome.tab.one_liner") { +@include OneLinerBeforeResponsive { #nav-bar:not([customizing]) { margin-bottom: var(--uc-navbar-hide-height); } diff --git a/src/autohide/_toolbar_overlap.scss b/src/autohide/_toolbar_overlap.scss index 03a3f65b..dc6dca06 100644 --- a/src/autohide/_toolbar_overlap.scss +++ b/src/autohide/_toolbar_overlap.scss @@ -37,6 +37,7 @@ } } + // OneLinerBeforeResponsive @include NotOption("userChrome.tab.one_liner") { @include Option("userChrome.autohide.navbar") { @include NotOption("userChrome.autohide.bookmarkbar") { diff --git a/src/leptonChrome.scss b/src/leptonChrome.scss index 8448e64d..d8db42e0 100644 --- a/src/leptonChrome.scss +++ b/src/leptonChrome.scss @@ -4,6 +4,7 @@ @use "utils/theme" as *; @use "utils/accent_color" as *; @use "utils/native_menu" as *; +@use "utils/one_liner" as *; @use "utils/proton_elements" as Proton; @use "sass:selector"; diff --git a/src/padding/_tabbar_width.scss b/src/padding/_tabbar_width.scss index 5b429ab7..62bdbfdb 100644 --- a/src/padding/_tabbar_width.scss +++ b/src/padding/_tabbar_width.scss @@ -66,7 +66,7 @@ @include Option("userChrome.tab.photon_like_padding") { --tab-max-width: 225px; } - @include Option("userChrome.tab.one_liner") { + @include OneLiner { --tab-max-width: 180px; } } diff --git a/src/tabbar/_index.scss b/src/tabbar/_index.scss index 4914d4a6..4a7aafad 100644 --- a/src/tabbar/_index.scss +++ b/src/tabbar/_index.scss @@ -24,13 +24,15 @@ } /*= Tab Bar - Oneliner =======================================================*/ -@include Option("userChrome.tab.one_liner") { +@include OneLiner { @import "one_liner"; } /*= Tab Bar - Shared Layout ==================================================*/ @include Option("userChrome.tab.on_bottom", "userChrome.tab.one_liner") { - @import "layout"; + @include OneLinerContent { + @import "layout"; + } } /*= Tab Bar - Show only current tab ==========================================*/ diff --git a/src/tabbar/unselected_tab/_dynamic_separator.scss b/src/tabbar/unselected_tab/_dynamic_separator.scss index bc40d37a..f4f4447c 100644 --- a/src/tabbar/unselected_tab/_dynamic_separator.scss +++ b/src/tabbar/unselected_tab/_dynamic_separator.scss @@ -59,9 +59,11 @@ } @include Option("userChrome.tab.one_liner") { @include NotOption("userChrome.tab.one_liner.tabbar_first") { - .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-background::before { - opacity: var(--tab-separator-opacity); - transform: translateX(-1.5px) translateY(calc(-50% + 1px)); + @include OneLinerContent { + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-background::before { + opacity: var(--tab-separator-opacity); + transform: translateX(-1.5px) translateY(calc(-50% + 1px)); + } } } } diff --git a/user.js b/user.js index 273d3ebc..de2ebf9b 100644 --- a/user.js +++ b/user.js @@ -112,6 +112,7 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.tab.on_bottom.menubar_on_top", true); // Need on_bottom // user_pref("userChrome.tab.one_liner", true); // user_pref("userChrome.tab.one_liner.tabbar_first", true); +// user_pref("userChrome.tab.one_liner.responsive", true); // user_pref("userChrome.tab.as_titlebar", true); // user_pref("userChrome.tab.always_show_tab_icon", true); // user_pref("userChrome.tab.close_button_at_pinned", true); From 3dba28c970cf1cef2113b76d9a18d1425447e6ac Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 2 Aug 2022 09:05:40 +0900 Subject: [PATCH 45/89] Fix: One Liner - Navbar Background --- css/leptonChrome.css | 6 ++++++ src/tabbar/_one_liner.scss | 4 ++++ 2 files changed, 10 insertions(+) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 24643506..0dd37f61 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4009,6 +4009,9 @@ #nav-bar { margin-top: var(--uc-tabbar-hide-height) !important; height: var(--uc-tabbar-height) !important; + --lwt-tabs-border-color: transparent; + background-color: unset !important; + background-image: unset !important; } #nav-bar > * { @@ -4064,6 +4067,9 @@ #nav-bar { margin-top: var(--uc-tabbar-hide-height) !important; height: var(--uc-tabbar-height) !important; + --lwt-tabs-border-color: transparent; + background-color: unset !important; + background-image: unset !important; } #nav-bar > * { diff --git a/src/tabbar/_one_liner.scss b/src/tabbar/_one_liner.scss index 0e35b388..96d535a5 100644 --- a/src/tabbar/_one_liner.scss +++ b/src/tabbar/_one_liner.scss @@ -10,6 +10,10 @@ #nav-bar { margin-top: var(--uc-tabbar-hide-height) !important; height: var(--uc-tabbar-height) !important; + + --lwt-tabs-border-color: transparent; // box-shadow + background-color: unset !important; // var(--toolbar-bgcolor) + background-image: unset !important; // var(--toolbar-bgimage) } #nav-bar > * { transform: translateY(calc((var(--uc-tabbar-height) + var(--uc-navbar-hide-height)) / 2)); From 3fae1e25bce2225194c6306f7a6de66e08f2771a Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 2 Aug 2022 09:45:46 +0900 Subject: [PATCH 46/89] Fix: Auto Hide - Oneliner responsive mode --- __tests__/one_liner.test.scss | 96 ++++++++++++++++++++++ css/leptonChrome.css | 146 +++++++++++++++++++++++++--------- src/autohide/_navbar.scss | 13 +-- src/autohide/_tabbar.scss | 34 ++++---- src/utils/_one_liner.scss | 49 ++++++++++++ 5 files changed, 274 insertions(+), 64 deletions(-) create mode 100644 __tests__/one_liner.test.scss create mode 100644 src/utils/_one_liner.scss diff --git a/__tests__/one_liner.test.scss b/__tests__/one_liner.test.scss new file mode 100644 index 00000000..2cd0a92c --- /dev/null +++ b/__tests__/one_liner.test.scss @@ -0,0 +1,96 @@ +@use 'true' as *; +@use "example" as *; +@use "../src/utils/one_liner"; + +@include test-module("One Liner [mix]") { + @include test("content") { + @include assert { + @include output { + @include one_liner.OneLinerContent { + @include example; + } + } + @include expect { + @supports not -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @include example; + } + @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @media screen and (min-width: 1100px) { + @include example; + } + } + } + } + } + + @include test("explicitly") { + @include assert { + @include output { + @include one_liner.OneLiner { + @include example; + } + } + @include expect { + @supports -moz-bool-pref("userChrome.tab.one_liner") { + @supports not -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @include example; + } + @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @media screen and (min-width: 1100px) { + @include example; + } + } + } + } + } + } +} + +@include test-module("One Liner for Responsive [mix]") { + @include test("Tab bar") { + @include assert { + @include output { + @include one_liner.OneLinerTabbar { + @include example; + } + } + @include expect { + @supports not -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @include example; + } + @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @media screen and (min-width: 1100px) { + @include example; + } + @supports -moz-bool-pref("userChrome.autohide.tabbar") { + @include example; + } + } + } + } + } + + @include test("Nav Bar") { + @include assert { + @include output { + @include one_liner.OneLinerNavbar { + @include example; + } + } + @include expect { + @supports not -moz-bool-pref("userChrome.tab.one_liner") { + @include example; + } + @supports -moz-bool-pref("userChrome.tab.one_liner") { + @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @supports -moz-bool-pref("userChrome.autohide.navbar") { + @media screen and (max-width: 1100px) { + @include example; + } + } + } + } + } + } + } +} diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 0dd37f61..4559bdc9 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6131,38 +6131,107 @@ } @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.autohide.navbar") { @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.tab.one_liner") { - :root:not([customizing]) #titlebar { - margin-bottom: var(--uc-tabbar-hide-height); - will-change: margin-bottom; - } + @supports not -moz-bool-pref("userChrome.tab.one_liner.responsive") { + :root:not([customizing]) #titlebar { + margin-bottom: var(--uc-tabbar-hide-height); + will-change: margin-bottom; + } - @supports not -moz-bool-pref("userChrome.tab.on_bottom") { - #TabsToolbar:not([customizing]) { - opacity: 0; - will-change: opacity; + @supports not -moz-bool-pref("userChrome.tab.on_bottom") { + #TabsToolbar:not([customizing]) { + opacity: 0; + will-change: opacity; + } } - } - @supports -moz-bool-pref("userChrome.tab.on_bottom") { - #TabsToolbar:not([customizing]) > *:not(.titlebar-buttonbox-container) { - opacity: 0; - will-change: opacity; + @supports -moz-bool-pref("userChrome.tab.on_bottom") { + #TabsToolbar:not([customizing]) > *:not(.titlebar-buttonbox-container) { + opacity: 0; + will-change: opacity; + } } - } - #navigator-toolbox:is(:hover, :focus-within) > #titlebar { - margin-bottom: 0px; - } - @supports not -moz-bool-pref("userChrome.tab.on_bottom") { - #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar { - opacity: 1; + #navigator-toolbox:is(:hover, :focus-within) > #titlebar { + margin-bottom: 0px; } - } - @supports -moz-bool-pref("userChrome.tab.on_bottom") { - #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar > *:not(.titlebar-buttonbox-container) { - opacity: 1; + @supports not -moz-bool-pref("userChrome.tab.on_bottom") { + #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar { + opacity: 1; + } + } + @supports -moz-bool-pref("userChrome.tab.on_bottom") { + #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar > *:not(.titlebar-buttonbox-container) { + opacity: 1; + } } } + @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @media screen and (min-width: 1100px) { + :root:not([customizing]) #titlebar { + margin-bottom: var(--uc-tabbar-hide-height); + will-change: margin-bottom; + } + + @supports not -moz-bool-pref("userChrome.tab.on_bottom") { + #TabsToolbar:not([customizing]) { + opacity: 0; + will-change: opacity; + } + } + @supports -moz-bool-pref("userChrome.tab.on_bottom") { + #TabsToolbar:not([customizing]) > *:not(.titlebar-buttonbox-container) { + opacity: 0; + will-change: opacity; + } + } + #navigator-toolbox:is(:hover, :focus-within) > #titlebar { + margin-bottom: 0px; + } + @supports not -moz-bool-pref("userChrome.tab.on_bottom") { + #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar { + opacity: 1; + } + } + @supports -moz-bool-pref("userChrome.tab.on_bottom") { + #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar > *:not(.titlebar-buttonbox-container) { + opacity: 1; + } + } + } + @supports -moz-bool-pref("userChrome.autohide.tabbar") { + :root:not([customizing]) #titlebar { + margin-bottom: var(--uc-tabbar-hide-height); + will-change: margin-bottom; + } + + @supports not -moz-bool-pref("userChrome.tab.on_bottom") { + #TabsToolbar:not([customizing]) { + opacity: 0; + will-change: opacity; + } + } + @supports -moz-bool-pref("userChrome.tab.on_bottom") { + #TabsToolbar:not([customizing]) > *:not(.titlebar-buttonbox-container) { + opacity: 0; + will-change: opacity; + } + } + + #navigator-toolbox:is(:hover, :focus-within) > #titlebar { + margin-bottom: 0px; + } + @supports not -moz-bool-pref("userChrome.tab.on_bottom") { + #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar { + opacity: 1; + } + } + @supports -moz-bool-pref("userChrome.tab.on_bottom") { + #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar > *:not(.titlebar-buttonbox-container) { + opacity: 1; + } + } + } + } @media (prefers-reduced-motion: no-preference) { #titlebar:not([customizing]) { transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), @@ -6201,33 +6270,32 @@ } } @supports -moz-bool-pref("userChrome.autohide.navbar") or -moz-bool-pref("userChrome.tab.one_liner") { - #nav-bar:not([customizing]) { - opacity: 0; - will-change: margin-bottom, opacity; - } - - #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { - opacity: 1; - } - @supports not -moz-bool-pref("userChrome.tab.one_liner") { #nav-bar:not([customizing]) { margin-bottom: var(--uc-navbar-hide-height); + opacity: 0; + will-change: margin-bottom, opacity; } #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { margin-bottom: 0; + opacity: 1; } } @supports -moz-bool-pref("userChrome.tab.one_liner") { @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { - @media screen and (max-width: 1100px) { - #nav-bar:not([customizing]) { - margin-bottom: var(--uc-navbar-hide-height); - } + @supports -moz-bool-pref("userChrome.autohide.navbar") { + @media screen and (max-width: 1100px) { + #nav-bar:not([customizing]) { + margin-bottom: var(--uc-navbar-hide-height); + opacity: 0; + will-change: margin-bottom, opacity; + } - #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { - margin-bottom: 0; + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { + margin-bottom: 0; + opacity: 1; + } } } } diff --git a/src/autohide/_navbar.scss b/src/autohide/_navbar.scss index 21a59c7d..b7c5f69a 100644 --- a/src/autohide/_navbar.scss +++ b/src/autohide/_navbar.scss @@ -1,17 +1,12 @@ -#nav-bar:not([customizing]) { - opacity: 0; - will-change: margin-bottom, opacity; -} -#navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { - opacity: 1; -} - -@include OneLinerBeforeResponsive { +@include OneLinerNavbar { #nav-bar:not([customizing]) { margin-bottom: var(--uc-navbar-hide-height); + opacity: 0; + will-change: margin-bottom, opacity; } #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { margin-bottom: 0; + opacity: 1; } } diff --git a/src/autohide/_tabbar.scss b/src/autohide/_tabbar.scss index 125a7697..ab632adc 100644 --- a/src/autohide/_tabbar.scss +++ b/src/autohide/_tabbar.scss @@ -12,24 +12,26 @@ //------------------------------------------------------------------------------ -:root:not([customizing]) #titlebar { - margin-bottom: var(--uc-tabbar-hide-height); - will-change: margin-bottom; -} -#TabsToolbar:not([customizing]) { - @include _autohide_tabbar { - opacity: 0; - will-change: opacity; - } -} - -#navigator-toolbox:is(:hover, :focus-within) { - > #titlebar { - margin-bottom: 0px; +@include OneLinerTabbar { + :root:not([customizing]) #titlebar { + margin-bottom: var(--uc-tabbar-hide-height); + will-change: margin-bottom; } - #TabsToolbar { + #TabsToolbar:not([customizing]) { @include _autohide_tabbar { - opacity: 1; + opacity: 0; + will-change: opacity; + } + } + + #navigator-toolbox:is(:hover, :focus-within) { + > #titlebar { + margin-bottom: 0px; + } + #TabsToolbar { + @include _autohide_tabbar { + opacity: 1; + } } } } diff --git a/src/utils/_one_liner.scss b/src/utils/_one_liner.scss new file mode 100644 index 00000000..3995dcde --- /dev/null +++ b/src/utils/_one_liner.scss @@ -0,0 +1,49 @@ +@use "option" as *; + +@mixin OneLinerContent() { + @include NotOption("userChrome.tab.one_liner.responsive") { + @content; + } + @include Option("userChrome.tab.one_liner.responsive") { + @media screen and (min-width: 1100px) { + @content; + } + } +} + +@mixin OneLiner() { + @include Option("userChrome.tab.one_liner") { + @include OneLinerContent { + @content; + } + } +} + +@mixin OneLinerTabbar() { + @include NotOption("userChrome.tab.one_liner.responsive") { + @content; + } + @include Option("userChrome.tab.one_liner.responsive") { + @media screen and (min-width: 1100px) { + @content; + } + @include Option("userChrome.autohide.tabbar") { + @content; + } + } +} + +@mixin OneLinerNavbar() { + @include NotOption("userChrome.tab.one_liner") { + @content; + } + @include Option("userChrome.tab.one_liner") { + @include Option("userChrome.tab.one_liner.responsive") { + @include Option("userChrome.autohide.navbar") { + @media screen and (max-width: 1100px) { + @content; + } + } + } + } +} From 54b3d5a68bb6a6fbcc879cc405e2c2f060c27a52 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 2 Aug 2022 17:06:17 +0900 Subject: [PATCH 47/89] Fix: One Liner - URL bar width, URL view z-index --- css/leptonChrome.css | 14 ++++++++++++-- src/tabbar/_one_liner.scss | 8 +++++++- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 4559bdc9..87b53df9 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4019,7 +4019,12 @@ } #urlbar-container { - min-width: 0px !important; + min-width: calc(24px + 2 * var(--toolbarbutton-inner-padding)) !important; + } + + #PersonalToolbar { + position: relative; + z-index: -1; } toolbarspring.chromeclass-toolbar-additional { @@ -4077,7 +4082,12 @@ } #urlbar-container { - min-width: 0px !important; + min-width: calc(24px + 2 * var(--toolbarbutton-inner-padding)) !important; + } + + #PersonalToolbar { + position: relative; + z-index: -1; } toolbarspring.chromeclass-toolbar-additional { diff --git a/src/tabbar/_one_liner.scss b/src/tabbar/_one_liner.scss index 96d535a5..77dc7092 100644 --- a/src/tabbar/_one_liner.scss +++ b/src/tabbar/_one_liner.scss @@ -20,7 +20,13 @@ } #urlbar-container { - min-width: 0px !important; + min-width: calc(24px + 2 * var(--toolbarbutton-inner-padding)) !important; // Original: calc(350px + 24px + 2 * var(--toolbarbutton-inner-padding)) +} + +#PersonalToolbar { + // for URL Bar + position: relative; + z-index: -1; } toolbarspring.chromeclass-toolbar-additional { From 7a725d9645d3c9e7a1264fd07bc0a0d937b529e0 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 3 Aug 2022 09:06:33 +0900 Subject: [PATCH 48/89] Fix: Auto Hide - Overlap with oneliner responsive --- css/leptonChrome.css | 58 +++++++++++++++++++++++------- src/autohide/_toolbar_overlap.scss | 21 +++++------ 2 files changed, 55 insertions(+), 24 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 87b53df9..ea976add 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6086,21 +6086,19 @@ } } } - @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.tab.one_liner") { - @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.autohide.navbar") { + @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.autohide.navbar") { + @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.tab.one_liner") { #navigator-toolbox:hover { --uc-toolbar-height: var(--uc-tabbar-height); } - } - @supports not -moz-bool-pref("userChrome.autohide.navbar") { - @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { - #navigator-toolbox:hover { - --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-bm-height)); + @supports not -moz-bool-pref("userChrome.autohide.navbar") { + @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { + #navigator-toolbox:hover { + --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-bm-height)); + } } } - } - @supports not -moz-bool-pref("userChrome.tab.one_liner") { - @supports -moz-bool-pref("userChrome.autohide.navbar") { + @supports not -moz-bool-pref("userChrome.tab.one_liner") { @supports not -moz-bool-pref("userChrome.autohide.bookmarkbar") { #navigator-toolbox:hover { --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height)); @@ -6112,6 +6110,24 @@ } } } + @supports -moz-bool-pref("userChrome.tab.one_liner") { + @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @supports -moz-bool-pref("userChrome.autohide.navbar") { + @media screen and (max-width: 1100px) { + @supports not -moz-bool-pref("userChrome.autohide.bookmarkbar") { + #navigator-toolbox:hover { + --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height)); + } + } + @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { + #navigator-toolbox:hover { + --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height) + var(--uc-bm-height)); + } + } + } + } + } + } } } @supports not -moz-bool-pref("userChrome.autohide.tabbar") { @@ -6122,8 +6138,8 @@ } } } - @supports not -moz-bool-pref("userChrome.tab.one_liner") { - @supports -moz-bool-pref("userChrome.autohide.navbar") { + @supports -moz-bool-pref("userChrome.autohide.navbar") or -moz-bool-pref("userChrome.tab.one_liner") { + @supports not -moz-bool-pref("userChrome.tab.one_liner") { @supports not -moz-bool-pref("userChrome.autohide.bookmarkbar") { #navigator-toolbox:hover { --uc-toolbar-height: var(--uc-navbar-height); @@ -6135,6 +6151,24 @@ } } } + @supports -moz-bool-pref("userChrome.tab.one_liner") { + @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @supports -moz-bool-pref("userChrome.autohide.navbar") { + @media screen and (max-width: 1100px) { + @supports not -moz-bool-pref("userChrome.autohide.bookmarkbar") { + #navigator-toolbox:hover { + --uc-toolbar-height: var(--uc-navbar-height); + } + } + @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { + #navigator-toolbox:hover { + --uc-toolbar-height: calc(var(--uc-navbar-height) + var(--uc-bm-height)); + } + } + } + } + } + } } } } diff --git a/src/autohide/_toolbar_overlap.scss b/src/autohide/_toolbar_overlap.scss index dc6dca06..4765e8c3 100644 --- a/src/autohide/_toolbar_overlap.scss +++ b/src/autohide/_toolbar_overlap.scss @@ -26,20 +26,17 @@ } &:hover { - @include Option("userChrome.autohide.tabbar", "userChrome.tab.one_liner") { - @include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar") { + @include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar") { + @include Option("userChrome.autohide.tabbar", "userChrome.tab.one_liner") { --uc-toolbar-height: var(--uc-tabbar-height); - } - @include NotOption("userChrome.autohide.navbar") { - @include Option("userChrome.autohide.bookmarkbar") { - --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-bm-height)); + @include NotOption("userChrome.autohide.navbar") { + @include Option("userChrome.autohide.bookmarkbar") { + --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-bm-height)); + } } - } - // OneLinerBeforeResponsive - @include NotOption("userChrome.tab.one_liner") { - @include Option("userChrome.autohide.navbar") { + @include OneLinerNavbar { @include NotOption("userChrome.autohide.bookmarkbar") { --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height)); } @@ -56,8 +53,8 @@ } } - @include NotOption("userChrome.tab.one_liner") { - @include Option("userChrome.autohide.navbar") { + @include Option("userChrome.autohide.navbar", "userChrome.tab.one_liner") { + @include OneLinerNavbar { @include NotOption("userChrome.autohide.bookmarkbar") { --uc-toolbar-height: var(--uc-navbar-height); } From eecc5b03f06b647aa6f03044b9680c795aa17eef Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 3 Aug 2022 09:11:31 +0900 Subject: [PATCH 49/89] Fix: One Liner - Responsive with tabs on bottom --- __tests__/one_liner.test.scss | 22 + css/leptonChrome.css | 756 +++++++++++++++++-------- src/tabbar/_index.scss | 8 +- src/tabbar/_layout.scss | 25 +- src/tabbar/_tabs_on_bottom.scss | 2 +- src/tabbar/layout/_navbar_padding.scss | 47 +- src/tabbar/layout/_window_control.scss | 3 +- src/utils/_one_liner.scss | 13 + 8 files changed, 619 insertions(+), 257 deletions(-) diff --git a/__tests__/one_liner.test.scss b/__tests__/one_liner.test.scss index 2cd0a92c..ad967492 100644 --- a/__tests__/one_liner.test.scss +++ b/__tests__/one_liner.test.scss @@ -47,6 +47,28 @@ } @include test-module("One Liner for Responsive [mix]") { + @include test("Tabs on bottom") { + @include assert { + @include output { + @include one_liner.OneLinerOnBottom { + @include example; + } + } + @include expect { + @supports not -moz-bool-pref("userChrome.tab.one_liner") { + @include example; + } + @supports -moz-bool-pref("userChrome.tab.one_liner") { + @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @media screen and (max-width: 1100px) { + @include example; + } + } + } + } + } + } + @include test("Tab bar") { @include assert { @include output { diff --git a/css/leptonChrome.css b/css/leptonChrome.css index ea976add..d02fcc89 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -3865,132 +3865,268 @@ } } @supports -moz-bool-pref("userChrome.tab.on_bottom") { - /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 - See the above repository for updates as well as full license text. */ - /*= Tabbar - Move to bottom ==================================================*/ - #titlebar { - order: 2; - /* When userChrome.fullscreen.overlap */ - -moz-box-ordinal-group: 2; - --tabs-navbar-shadow-size: 0px; - } - - #tab-notification-deck { - order: 2; - /* When userChrome.fullscreen.overlap */ - -moz-box-ordinal-group: 2; - } - - #TabsToolbar .titlebar-spacer { - display: none; - } - - #TabsToolbar-customization-target > .toolbarbutton-1:last-child { - padding-inline-end: var(--toolbar-start-end-padding, 8px); - } - - @supports -moz-bool-pref("userChrome.tab.on_bottom.above_bookmark") { - #PersonalToolbar { + @supports not -moz-bool-pref("userChrome.tab.one_liner") { + /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 + See the above repository for updates as well as full license text. */ + /*= Tabbar - Move to bottom ==================================================*/ + #titlebar { order: 2; /* When userChrome.fullscreen.overlap */ -moz-box-ordinal-group: 2; - } - } - @supports not -moz-bool-pref("userChrome.tab.on_bottom.above_bookmark") { - @supports -moz-bool-pref("userChrome.tab.connect_to_window") { - @supports -moz-bool-pref("userChrome.tab.color_like_toolbar") { - #navigator-toolbox { - border-bottom-color: var(--toolbar-bgcolor) !important; - /* Original: 1px solid var(--chrome-content-separator-color); */ - } - } - } - } - /*= Menubar - Always on top ==================================================*/ - @supports -moz-bool-pref("userChrome.tab.on_bottom.menubar_on_top") { - /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0 - See the above repository for updates as well as full license text. */ - :root { - /* height if native titlebar is enabled, assumes empty menubar */ - --uc-menubar-height: 20px; - --uc-menubar-padding: 1px; - /* FF's menubar padding */ - --uc-menubar-container-height: calc(var(--uc-menubar-height) - (2 * var(--uc-menubar-padding))); + --tabs-navbar-shadow-size: 0px; } - :root[tabsintitlebar] { - /* height when native titlebar is disabled, more roomy so can fit buttons etc. */ - --uc-menubar-height: 30px; + #tab-notification-deck { + order: 2; + /* When userChrome.fullscreen.overlap */ + -moz-box-ordinal-group: 2; } - /* Menubar on top patch - use with tabs_on_bottom.css */ - /* Only really useful if menubar is ALWAYS visible */ - :root:not([sizemode="fullscreen"]) { - --uc-window-control-width: 0px !important; + #TabsToolbar .titlebar-spacer { + display: none; } - /* Since menubar is statically at top, remove fake drag-space that might be set by window_control_placeholder_support.css */ - :root:not([sizemode="fullscreen"]) #nav-bar { - border-inline-width: 0; + #TabsToolbar-customization-target > .toolbarbutton-1:last-child { + padding-inline-end: var(--toolbar-start-end-padding, 8px); } - #navigator-toolbox { - -moz-window-dragging: drag; + @supports -moz-bool-pref("userChrome.tab.on_bottom.above_bookmark") { + #PersonalToolbar { + order: 2; + /* When userChrome.fullscreen.overlap */ + -moz-box-ordinal-group: 2; + } } - - :root[sizemode="fullscreen"] #navigator-toolbox { - padding-top: 0px !important; + @supports not -moz-bool-pref("userChrome.tab.on_bottom.above_bookmark") { + @supports -moz-bool-pref("userChrome.tab.connect_to_window") { + @supports -moz-bool-pref("userChrome.tab.color_like_toolbar") { + #navigator-toolbox { + border-bottom-color: var(--toolbar-bgcolor) !important; + /* Original: 1px solid var(--chrome-content-separator-color); */ + } + } + } } + /*= Menubar - Always on top ==================================================*/ + @supports -moz-bool-pref("userChrome.tab.on_bottom.menubar_on_top") { + /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0 + See the above repository for updates as well as full license text. */ + :root { + /* height if native titlebar is enabled, assumes empty menubar */ + --uc-menubar-height: 20px; + --uc-menubar-padding: 1px; + /* FF's menubar padding */ + --uc-menubar-container-height: calc(var(--uc-menubar-height) - (2 * var(--uc-menubar-padding))); + } - #toolbar-menubar { - position: fixed; - display: flex; - top: var(--uc-titlebar-padding); - height: var(--uc-menubar-height); - width: 100%; - overflow: hidden; - } + :root[tabsintitlebar] { + /* height when native titlebar is disabled, more roomy so can fit buttons etc. */ + --uc-menubar-height: 30px; + } - :root[tabsintitlebar] #toolbar-menubar[autohide="true"]:not([inactive="true"]) { - height: var(--uc-menubar-height) !important; - /* calc(var(--tab-min-height) + 2 * var(--tab-block-margin)) */ - } + /* Menubar on top patch - use with tabs_on_bottom.css */ + /* Only really useful if menubar is ALWAYS visible */ + :root:not([sizemode="fullscreen"]) { + --uc-window-control-width: 0px !important; + } - #toolbar-menubar > .titlebar-buttonbox-container { - height: 100%; - order: 100; - } + /* Since menubar is statically at top, remove fake drag-space that might be set by window_control_placeholder_support.css */ + :root:not([sizemode="fullscreen"]) #nav-bar { + border-inline-width: 0; + } - #toolbar-menubar > [flex] { - flex-grow: 100; - } + #navigator-toolbox { + -moz-window-dragging: drag; + } - #toolbar-menubar > spacer[flex] { - order: 99; - flex-grow: 1; - min-width: var(--uc-window-drag-space-post); - } + :root[sizemode="fullscreen"] #navigator-toolbox { + padding-top: 0px !important; + } - #toolbar-menubar .toolbarbutton-1 { - --toolbarbutton-inner-padding: 3px; - } + #toolbar-menubar { + position: fixed; + display: flex; + top: var(--uc-titlebar-padding); + height: var(--uc-menubar-height); + width: 100%; + overflow: hidden; + } - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, - #TabsToolbar > .titlebar-buttonbox-container { - height: var(--uc-menubar-container-height); - } + :root[tabsintitlebar] #toolbar-menubar[autohide="true"]:not([inactive="true"]) { + height: var(--uc-menubar-height) !important; + /* calc(var(--tab-min-height) + 2 * var(--tab-block-margin)) */ + } - :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) - #toolbar-menubar:not([autohide="true"]) - + #TabsToolbar - > .titlebar-buttonbox-container { - visibility: collapse !important; + #toolbar-menubar > .titlebar-buttonbox-container { + height: 100%; + order: 100; + } + + #toolbar-menubar > [flex] { + flex-grow: 100; + } + + #toolbar-menubar > spacer[flex] { + order: 99; + flex-grow: 1; + min-width: var(--uc-window-drag-space-post); + } + + #toolbar-menubar .toolbarbutton-1 { + --toolbarbutton-inner-padding: 3px; + } + + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, + #TabsToolbar > .titlebar-buttonbox-container { + height: var(--uc-menubar-container-height); + } + + :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) + #toolbar-menubar:not([autohide="true"]) + + #TabsToolbar + > .titlebar-buttonbox-container { + visibility: collapse !important; + } + + :root:not([chromehidden~="menubar"]):not([sizemode="fullscreen"]) + #toolbar-menubar:not([autohide="true"]) + .titlebar-buttonbox-container { + visibility: visible; + } } + } + @supports -moz-bool-pref("userChrome.tab.one_liner") { + @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @media screen and (max-width: 1100px) { + /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 + See the above repository for updates as well as full license text. */ + /*= Tabbar - Move to bottom ==================================================*/ + #titlebar { + order: 2; + /* When userChrome.fullscreen.overlap */ + -moz-box-ordinal-group: 2; + --tabs-navbar-shadow-size: 0px; + } + + #tab-notification-deck { + order: 2; + /* When userChrome.fullscreen.overlap */ + -moz-box-ordinal-group: 2; + } + + #TabsToolbar .titlebar-spacer { + display: none; + } + + #TabsToolbar-customization-target > .toolbarbutton-1:last-child { + padding-inline-end: var(--toolbar-start-end-padding, 8px); + } + + @supports -moz-bool-pref("userChrome.tab.on_bottom.above_bookmark") { + #PersonalToolbar { + order: 2; + /* When userChrome.fullscreen.overlap */ + -moz-box-ordinal-group: 2; + } + } + @supports not -moz-bool-pref("userChrome.tab.on_bottom.above_bookmark") { + @supports -moz-bool-pref("userChrome.tab.connect_to_window") { + @supports -moz-bool-pref("userChrome.tab.color_like_toolbar") { + #navigator-toolbox { + border-bottom-color: var(--toolbar-bgcolor) !important; + /* Original: 1px solid var(--chrome-content-separator-color); */ + } + } + } + } + /*= Menubar - Always on top ==================================================*/ + @supports -moz-bool-pref("userChrome.tab.on_bottom.menubar_on_top") { + /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0 + See the above repository for updates as well as full license text. */ + :root { + /* height if native titlebar is enabled, assumes empty menubar */ + --uc-menubar-height: 20px; + --uc-menubar-padding: 1px; + /* FF's menubar padding */ + --uc-menubar-container-height: calc(var(--uc-menubar-height) - (2 * var(--uc-menubar-padding))); + } + + :root[tabsintitlebar] { + /* height when native titlebar is disabled, more roomy so can fit buttons etc. */ + --uc-menubar-height: 30px; + } + + /* Menubar on top patch - use with tabs_on_bottom.css */ + /* Only really useful if menubar is ALWAYS visible */ + :root:not([sizemode="fullscreen"]) { + --uc-window-control-width: 0px !important; + } + + /* Since menubar is statically at top, remove fake drag-space that might be set by window_control_placeholder_support.css */ + :root:not([sizemode="fullscreen"]) #nav-bar { + border-inline-width: 0; + } + + #navigator-toolbox { + -moz-window-dragging: drag; + } + + :root[sizemode="fullscreen"] #navigator-toolbox { + padding-top: 0px !important; + } + + #toolbar-menubar { + position: fixed; + display: flex; + top: var(--uc-titlebar-padding); + height: var(--uc-menubar-height); + width: 100%; + overflow: hidden; + } + + :root[tabsintitlebar] #toolbar-menubar[autohide="true"]:not([inactive="true"]) { + height: var(--uc-menubar-height) !important; + /* calc(var(--tab-min-height) + 2 * var(--tab-block-margin)) */ + } + + #toolbar-menubar > .titlebar-buttonbox-container { + height: 100%; + order: 100; + } + + #toolbar-menubar > [flex] { + flex-grow: 100; + } + + #toolbar-menubar > spacer[flex] { + order: 99; + flex-grow: 1; + min-width: var(--uc-window-drag-space-post); + } + + #toolbar-menubar .toolbarbutton-1 { + --toolbarbutton-inner-padding: 3px; + } + + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, + #TabsToolbar > .titlebar-buttonbox-container { + height: var(--uc-menubar-container-height); + } - :root:not([chromehidden~="menubar"]):not([sizemode="fullscreen"]) - #toolbar-menubar:not([autohide="true"]) - .titlebar-buttonbox-container { - visibility: visible; + :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) + #toolbar-menubar:not([autohide="true"]) + + #TabsToolbar + > .titlebar-buttonbox-container { + visibility: collapse !important; + } + + :root:not([chromehidden~="menubar"]):not([sizemode="fullscreen"]) + #toolbar-menubar:not([autohide="true"]) + .titlebar-buttonbox-container { + visibility: visible; + } + } + } } } } @@ -4125,8 +4261,10 @@ } /*= Tab Bar - Shared Layout ==================================================*/ @supports -moz-bool-pref("userChrome.tab.on_bottom") or -moz-bool-pref("userChrome.tab.one_liner") { - @supports not -moz-bool-pref("userChrome.tab.one_liner.responsive") { - @supports -moz-bool-pref("userChrome.tab.on_bottom") or -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { + @supports -moz-bool-pref("userChrome.tab.on_bottom") or -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { + } + @supports not -moz-bool-pref("userChrome.tab.one_liner") { + @supports -moz-bool-pref("userChrome.tab.on_bottom") { /*= Windows Control - Move to toolbar ========================================*/ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ @@ -4216,86 +4354,10 @@ visibility: hidden; } } - /*= 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"] */ - } - - :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.tab.one_liner") { - @supports not -moz-bool-pref("userChrome.tab.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 -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { - :root:is([tabsintitlebar], [sizemode="fullscreen"]) { - /* Don't need pre spacer */ - --uc-window-drag-space-pre: 0px; - } - } - } - #nav-bar { - border-inline-start-width: var(--uc-window-drag-space-pre); - border-inline-end-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); - border-inline-style: solid !important; - border-inline-color: var(--toolbar-bgcolor); - } - - /* 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; - } - - :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { - border-inline-start-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); - border-inline-end-width: var(--uc-window-drag-space-pre); - } - - :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, - :root[sizemode="fullscreen"] #window-controls { - right: unset; - } - } } - @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { - @media screen and (min-width: 1100px) { - @supports -moz-bool-pref("userChrome.tab.on_bottom") or -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { + @supports -moz-bool-pref("userChrome.tab.one_liner") { + @supports not -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @supports -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { /*= Windows Control - Move to toolbar ========================================*/ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ @@ -4385,82 +4447,298 @@ visibility: hidden; } } - /*= 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"] */ - } + } + @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @supports -moz-bool-pref("userChrome.tab.on_bottom") { + @media screen and (max-width: 1100px) { + /*= Windows Control - Move to toolbar ========================================*/ + /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 + See the above repository for updates as well as full license text. */ + :root { + --uc-titlebar-padding: 0px; + } - :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), + (-moz-os-version: windows-win10), + (-moz-platform: windows-win10) { + :root[sizemode="maximized"][tabsintitlebar] { + --uc-titlebar-padding: 8px; + } + } + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, + #TabsToolbar > .titlebar-buttonbox-container { + position: fixed; + display: block; + top: var(--uc-titlebar-padding); + right: 0; + height: 40px; + z-index: 1; + } + + /* where window controls are on left */ + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + :root { + --uc-titlebar-padding: 0px !important; + } + + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + #navigator-toolbox { + padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; + } + + :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container { + height: 32px; + } + + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + opacity: 0; + } + + .titlebar-buttonbox-container > .titlebar-buttonbox { + height: 100%; + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + .titlebar-buttonbox-container > .titlebar-buttonbox { + margin-block: 10px; + } + } + + /* At Full Screen */ + :root[sizemode="fullscreen"] #window-controls { + position: fixed; + display: flex; + top: 0; + right: 0; + height: 40px; + } + + :root[uidensity="compact"][sizemode="fullscreen"] #window-controls { + height: 32px; + } + + @supports -moz-bool-pref("browser.fullscreen.autohide") { + :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { + visibility: hidden; + } + } + /* At Activated Menubar */ + :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) + #toolbar-menubar:not([autohide="true"]) + + #TabsToolbar + > .titlebar-buttonbox-container { + display: block !important; + } + + :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { + visibility: hidden; + } + } } + @supports -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { + @media screen and (min-width: 1100px) { + /*= Windows Control - Move to toolbar ========================================*/ + /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 + See the above repository for updates as well as full license text. */ + :root { + --uc-titlebar-padding: 0px; + } + + @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) { + :root[sizemode="maximized"][tabsintitlebar] { + --uc-titlebar-padding: 8px; + } + } + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, + #TabsToolbar > .titlebar-buttonbox-container { + position: fixed; + display: block; + top: var(--uc-titlebar-padding); + right: 0; + height: 40px; + z-index: 1; + } + + /* where window controls are on left */ + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + :root { + --uc-titlebar-padding: 0px !important; + } + + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + #navigator-toolbox { + padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; + } + + :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container { + height: 32px; + } + + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + opacity: 0; + } + + .titlebar-buttonbox-container > .titlebar-buttonbox { + height: 100%; + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + .titlebar-buttonbox-container > .titlebar-buttonbox { + margin-block: 10px; + } + } + + /* At Full Screen */ + :root[sizemode="fullscreen"] #window-controls { + position: fixed; + display: flex; + top: 0; + right: 0; + height: 40px; + } + + :root[uidensity="compact"][sizemode="fullscreen"] #window-controls { + height: 32px; + } + + @supports -moz-bool-pref("browser.fullscreen.autohide") { + :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { + visibility: hidden; + } + } + /* At Activated Menubar */ + :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) + #toolbar-menubar:not([autohide="true"]) + + #TabsToolbar + > .titlebar-buttonbox-container { + display: block !important; + } - :root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) { - --uc-window-drag-space-pre: 0px; - /* Remove pre space */ + :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { + visibility: hidden; + } + } } + } + } + /*= 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"] */ + } - @supports -moz-bool-pref("userChrome.tab.one_liner") { - @supports not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { + :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.tab.one_liner") { + @supports not -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @supports -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + /* Don't need pre spacer */ + --uc-window-drag-space-pre: 0px; + } + } + @supports not -moz-bool-pref("userChrome.tab.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 -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @media screen and (max-width: 1100px) { + @supports not -moz-bool-pref("userChrome.tab.on_bottom") { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + /* 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; } } + } + @media screen and (min-width: 1100px) { @supports -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { /* Don't need pre spacer */ --uc-window-drag-space-pre: 0px; } } - } - #nav-bar { - border-inline-start-width: var(--uc-window-drag-space-pre); - border-inline-end-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); - border-inline-style: solid !important; - border-inline-color: var(--toolbar-bgcolor); - } - - /* 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; + @supports not -moz-bool-pref("userChrome.tab.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; + } } } - /* 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; - } + } + } + #nav-bar { + border-inline-start-width: var(--uc-window-drag-space-pre); + border-inline-end-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); + border-inline-style: solid !important; + border-inline-color: var(--toolbar-bgcolor); + } - :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { - border-inline-start-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); - border-inline-end-width: var(--uc-window-drag-space-pre); - } + /* 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; + } - :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, - :root[sizemode="fullscreen"] #window-controls { - right: unset; - } - } + :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { + border-inline-start-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); + border-inline-end-width: var(--uc-window-drag-space-pre); + } + + :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, + :root[sizemode="fullscreen"] #window-controls { + right: unset; } } } diff --git a/src/tabbar/_index.scss b/src/tabbar/_index.scss index 4a7aafad..e312b715 100644 --- a/src/tabbar/_index.scss +++ b/src/tabbar/_index.scss @@ -20,7 +20,9 @@ } @include Option("userChrome.tab.on_bottom") { - @import "tabs_on_bottom"; + @include OneLinerOnBottom { + @import "tabs_on_bottom"; + } } /*= Tab Bar - Oneliner =======================================================*/ @@ -30,9 +32,7 @@ /*= Tab Bar - Shared Layout ==================================================*/ @include Option("userChrome.tab.on_bottom", "userChrome.tab.one_liner") { - @include OneLinerContent { - @import "layout"; - } + @import "layout"; } /*= Tab Bar - Show only current tab ==========================================*/ diff --git a/src/tabbar/_layout.scss b/src/tabbar/_layout.scss index bfab821b..72b42d3a 100644 --- a/src/tabbar/_layout.scss +++ b/src/tabbar/_layout.scss @@ -1,5 +1,28 @@ @include Option("userChrome.tab.on_bottom", "userChrome.tab.one_liner.tabbar_first") { - @import "layout/window_control"; +} +@include NotOption("userChrome.tab.one_liner") { + @include Option("userChrome.tab.on_bottom") { + @import "layout/window_control"; + } +} +@include Option("userChrome.tab.one_liner") { + @include NotOption("userChrome.tab.one_liner.responsive") { + @include Option("userChrome.tab.one_liner.tabbar_first") { + @import "layout/window_control"; + } + } + @include Option("userChrome.tab.one_liner.responsive") { + @include Option("userChrome.tab.on_bottom") { + @media screen and (max-width: 1100px) { + @import "layout/window_control"; + } + } + @include Option("userChrome.tab.one_liner.tabbar_first") { + @media screen and (min-width: 1100px) { + @import "layout/window_control"; + } + } + } } @import "layout/navbar_padding"; diff --git a/src/tabbar/_tabs_on_bottom.scss b/src/tabbar/_tabs_on_bottom.scss index 94fc61f9..73b9c672 100644 --- a/src/tabbar/_tabs_on_bottom.scss +++ b/src/tabbar/_tabs_on_bottom.scss @@ -2,7 +2,7 @@ See the above repository for updates as well as full license text. */ /*= Tabbar - Move to bottom ==================================================*/ -#titlebar{ +#titlebar { order: 2; /* When userChrome.fullscreen.overlap */ -moz-box-ordinal-group: 2; --tabs-navbar-shadow-size: 0px; diff --git a/src/tabbar/layout/_navbar_padding.scss b/src/tabbar/layout/_navbar_padding.scss index 10f7c1ae..92da540c 100644 --- a/src/tabbar/layout/_navbar_padding.scss +++ b/src/tabbar/layout/_navbar_padding.scss @@ -13,18 +13,45 @@ :root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) { --uc-window-drag-space-pre: 0px; /* Remove pre space */ } -@include Option("userChrome.tab.one_liner") { + +//-- Mixin --------------------------------------------------------------------- +@mixin _remove_spacer_pre() { + /* Don't need pre spacer */ + --uc-window-drag-space-pre: 0px; +} + +@mixin _remove_spacer_post() { + /* Don't need window control */ + --uc-window-control-width: 0px; + --uc-window-drag-space-post: 0px; +} + +@mixin _remove_spacer_oneLiner() { + @include Option("userChrome.tab.one_liner.tabbar_first") { + @include _remove_spacer_pre; + } @include NotOption("userChrome.tab.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; - } + @include _remove_spacer_post; } - @include Option("userChrome.tab.one_liner.tabbar_first") { - :root:is([tabsintitlebar], [sizemode="fullscreen"]) { - /* Don't need pre spacer */ - --uc-window-drag-space-pre: 0px; +} + +//------------------------------------------------------------------------------ + +@include Option("userChrome.tab.one_liner") { + :root:is([tabsintitlebar], [sizemode="fullscreen"]) { + @include NotOption("userChrome.tab.one_liner.responsive") { + @include _remove_spacer_oneLiner; + } + @include Option("userChrome.tab.one_liner.responsive") { + @media screen and (max-width: 1100px) { + @include NotOption("userChrome.tab.on_bottom") { + @include _remove_spacer_pre; + @include _remove_spacer_post; + } + } + @media screen and (min-width: 1100px) { + @include _remove_spacer_oneLiner; + } } } } diff --git a/src/tabbar/layout/_window_control.scss b/src/tabbar/layout/_window_control.scss index 9a66be7c..f6d813a9 100644 --- a/src/tabbar/layout/_window_control.scss +++ b/src/tabbar/layout/_window_control.scss @@ -6,7 +6,7 @@ See the above repository for updates as well as full license text. */ } @include OS($win) { - :root[sizemode="maximized"][tabsintitlebar]{ + :root[sizemode="maximized"][tabsintitlebar] { --uc-titlebar-padding: 8px; } } @@ -76,4 +76,3 @@ See the above repository for updates as well as full license text. */ :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { visibility: hidden; } - diff --git a/src/utils/_one_liner.scss b/src/utils/_one_liner.scss index 3995dcde..ccf6aa21 100644 --- a/src/utils/_one_liner.scss +++ b/src/utils/_one_liner.scss @@ -19,6 +19,19 @@ } } +@mixin OneLinerOnBottom() { + @include NotOption("userChrome.tab.one_liner") { + @content; + } + @include Option("userChrome.tab.one_liner") { + @include Option("userChrome.tab.one_liner.responsive") { + @media screen and (max-width: 1100px) { + @content; + } + } + } +} + @mixin OneLinerTabbar() { @include NotOption("userChrome.tab.one_liner.responsive") { @content; From 22e93013312b66bef4af96688d4d3e75b64e76e2 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 3 Aug 2022 15:10:37 +0900 Subject: [PATCH 50/89] Fix: Tabbar Height - `--tab-min-height` set at `:root` --- css/leptonChrome.css | 47 ++++++++++++-------------------- src/autohide/_common.scss | 2 +- src/padding/_tabbar_height.scss | 48 ++++++++++++++++++--------------- src/tabbar/_one_liner.scss | 3 --- 4 files changed, 45 insertions(+), 55 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index d02fcc89..6d878bdc 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -3359,29 +3359,25 @@ @supports -moz-bool-pref("userChrome.padding.tabbar_height") { /* Toolbar Height */ @supports -moz-bool-pref("userChrome.tab.lepton_like_padding") { - :root:not([uidensity]) #TabsToolbar { - --tab-min-height: 36px; + :root:not([uidensity]) { + --tab-min-height: 36px !important; } - - :root[uidensity="compact"] #TabsToolbar { - --tab-min-height: 32px; + :root[uidensity="compact"] { + --tab-min-height: 32px !important; } - - :root[uidensity="touch"] #TabsToolbar { - --tab-min-height: 41px; + :root[uidensity="touch"] { + --tab-min-height: 41px !important; } } @supports -moz-bool-pref("userChrome.tab.photon_like_padding") { - :root:not([uidensity]) #TabsToolbar { - --tab-min-height: 32px; + :root:not([uidensity]) { + --tab-min-height: 32px !important; } - - :root[uidensity="compact"] #TabsToolbar { - --tab-min-height: 29px; + :root[uidensity="compact"] { + --tab-min-height: 29px !important; } - - :root[uidensity="touch"] #TabsToolbar { - --tab-min-height: 41px; + :root[uidensity="touch"] { + --tab-min-height: 41px !important; } /* Top Margin */ @@ -3392,13 +3388,12 @@ } @supports not -moz-bool-pref("userChrome.tab.lepton_like_padding") { @supports not -moz-bool-pref("userChrome.tab.photon_like_padding") { - :root:not([uidensity]) #TabsToolbar { - --tab-min-height: 36px; + :root:not([uidensity]) { + --tab-min-height: 36px !important; /* 38px -> 36px */ } - - :root[uidensity="compact"] #TabsToolbar { - --tab-min-height: 29px; + :root[uidensity="compact"] { + --tab-min-height: 29px !important; /* 36px -> 29px */ } } @@ -4150,10 +4145,6 @@ background-image: unset !important; } - #nav-bar > * { - transform: translateY(calc((var(--uc-tabbar-height) + var(--uc-navbar-hide-height)) / 2)); - } - #urlbar-container { min-width: calc(24px + 2 * var(--toolbarbutton-inner-padding)) !important; } @@ -4213,10 +4204,6 @@ background-image: unset !important; } - #nav-bar > * { - transform: translateY(calc((var(--uc-tabbar-height) + var(--uc-navbar-hide-height)) / 2)); - } - #urlbar-container { min-width: calc(24px + 2 * var(--toolbarbutton-inner-padding)) !important; } @@ -6309,7 +6296,7 @@ ) or -moz-bool-pref("userChrome.tab.one_liner") { :root { - --uc-tabbar-height: calc((var(--tab-block-margin) * 2) + var(--tab-min-height)); + --uc-tabbar-height: 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-hide-height: calc(-1 * var(--uc-navbar-height)); diff --git a/src/autohide/_common.scss b/src/autohide/_common.scss index a4a46d46..b9c7298d 100644 --- a/src/autohide/_common.scss +++ b/src/autohide/_common.scss @@ -1,6 +1,6 @@ @include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar", "userChrome.tab.one_liner") { :root { - --uc-tabbar-height: calc((var(--tab-block-margin) * 2) + var(--tab-min-height)); + --uc-tabbar-height: 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-hide-height: calc(-1 * var(--uc-navbar-height)); diff --git a/src/padding/_tabbar_height.scss b/src/padding/_tabbar_height.scss index 71fc4bef..02456f7c 100644 --- a/src/padding/_tabbar_height.scss +++ b/src/padding/_tabbar_height.scss @@ -1,24 +1,28 @@ /* Toolbar Height */ @include Option("userChrome.tab.lepton_like_padding") { - :root:not([uidensity]) #TabsToolbar { - --tab-min-height: 36px; - } - :root[uidensity="compact"] #TabsToolbar { - --tab-min-height: 32px; - } - :root[uidensity="touch"] #TabsToolbar { - --tab-min-height: 41px; + :root { + &:not([uidensity]) { + --tab-min-height: 36px !important; + } + &[uidensity="compact"] { + --tab-min-height: 32px !important; + } + &[uidensity="touch"] { + --tab-min-height: 41px !important; + } } } @include Option("userChrome.tab.photon_like_padding") { - :root:not([uidensity]) #TabsToolbar { - --tab-min-height: 32px; - } - :root[uidensity="compact"] #TabsToolbar { - --tab-min-height: 29px; - } - :root[uidensity="touch"] #TabsToolbar { - --tab-min-height: 41px; + :root { + &:not([uidensity]) { + --tab-min-height: 32px !important; + } + &[uidensity="compact"] { + --tab-min-height: 29px !important; + } + &[uidensity="touch"] { + --tab-min-height: 41px !important; + } } /* Top Margin */ @@ -29,11 +33,13 @@ } @include NotOption("userChrome.tab.lepton_like_padding") { @include NotOption("userChrome.tab.photon_like_padding") { - :root:not([uidensity]) #TabsToolbar { - --tab-min-height: 36px; /* 38px -> 36px */ - } - :root[uidensity="compact"] #TabsToolbar { - --tab-min-height: 29px; /* 36px -> 29px */ + :root { + &:not([uidensity]) { + --tab-min-height: 36px !important; /* 38px -> 36px */ + } + &[uidensity="compact"] { + --tab-min-height: 29px !important; /* 36px -> 29px */ + } } } } diff --git a/src/tabbar/_one_liner.scss b/src/tabbar/_one_liner.scss index 77dc7092..210dc4bc 100644 --- a/src/tabbar/_one_liner.scss +++ b/src/tabbar/_one_liner.scss @@ -15,9 +15,6 @@ background-color: unset !important; // var(--toolbar-bgcolor) background-image: unset !important; // var(--toolbar-bgimage) } -#nav-bar > * { - transform: translateY(calc((var(--uc-tabbar-height) + var(--uc-navbar-hide-height)) / 2)); -} #urlbar-container { min-width: calc(24px + 2 * var(--toolbarbutton-inner-padding)) !important; // Original: calc(350px + 24px + 2 * var(--toolbarbutton-inner-padding)) From ff677b7d36714222347bc83f5606ad42650d51e7 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 4 Aug 2022 09:10:12 +0900 Subject: [PATCH 51/89] Add: One Liner - Change default design to separated navbar --- css/leptonChrome.css | 219 ++++++++++++++++++++++--- src/tabbar/_layout.scss | 2 - src/tabbar/_one_liner.scss | 64 ++++++-- src/tabbar/layout/_navbar_padding.scss | 66 +++++++- user.js | 1 + 5 files changed, 308 insertions(+), 44 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 6d878bdc..f3c7de68 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4131,20 +4131,64 @@ :root { --uc-navbar-size: 40vw; --uc-tabbar-size: calc(100vw - var(--uc-navbar-size)); + --uc-navbar-margin: calc(var(--uc-navbar-size) + var(--uc-navbar-gap, 0px)); } - #navigator-toolbox { - background-color: var(--toolbar-bgcolor) !important; + #nav-bar { + --uc-navbar-double-block: calc(2 * var(--uc-navbar-block, 0px)); + height: calc(var(--uc-tabbar-height) - var(--uc-navbar-double-block)) !important; + margin-top: calc(var(--uc-tabbar-hide-height) + var(--uc-navbar-double-block)) !important; + margin-bottom: var(--uc-navbar-block, 0px) !important; + transform: translateY(calc(-1 * var(--uc-navbar-block, 0px))); } - #nav-bar { - margin-top: var(--uc-tabbar-hide-height) !important; - height: var(--uc-tabbar-height) !important; - --lwt-tabs-border-color: transparent; - background-color: unset !important; - background-image: unset !important; + #titlebar { + transform: translateY(var(--uc-navbar-block, 0px)); + } + + #TabsToolbar > .titlebar-buttonbox-container { + transform: translateY(calc(-1 * var(--uc-navbar-block, 0px))); } + @supports not -moz-bool-pref("userChrome.tab.one_liner.combine_navbar") { + :root { + --uc-navbar-gap: 10px; + --uc-navbar-block: 1.5px; + } + :root[uidensity="compact"] { + --uc-navbar-block: 1px; + } + :root[uidensity="touch"] { + --uc-navbar-block: 3px; + } + + #nav-bar { + --toolbarbutton-inner-padding: 6px; + /* Original: 8px */ + border-radius: var(--tab-border-radius, 4px); + } + + #nav-bar, + #nav-bar-customization-target { + -moz-box-align: center; + } + + #urlbar[breakout] { + top: 0px !important; + /* Original: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2); */ + } + } + @supports -moz-bool-pref("userChrome.tab.one_liner.combine_navbar") { + #navigator-toolbox { + background-color: var(--toolbar-bgcolor) !important; + } + + #nav-bar { + --lwt-tabs-border-color: transparent; + background-color: unset !important; + background-image: unset !important; + } + } #urlbar-container { min-width: calc(24px + 2 * var(--toolbarbutton-inner-padding)) !important; } @@ -4160,7 +4204,7 @@ @supports not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { #TabsToolbar { - margin-inline-start: var(--uc-navbar-size) !important; + margin-inline-start: var(--uc-navbar-margin) !important; } #nav-bar { @@ -4173,7 +4217,7 @@ } @supports -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { #TabsToolbar { - margin-inline-end: var(--uc-navbar-size) !important; + margin-inline-end: var(--uc-navbar-margin) !important; } #nav-bar { @@ -4190,20 +4234,64 @@ :root { --uc-navbar-size: 40vw; --uc-tabbar-size: calc(100vw - var(--uc-navbar-size)); + --uc-navbar-margin: calc(var(--uc-navbar-size) + var(--uc-navbar-gap, 0px)); } - #navigator-toolbox { - background-color: var(--toolbar-bgcolor) !important; + #nav-bar { + --uc-navbar-double-block: calc(2 * var(--uc-navbar-block, 0px)); + height: calc(var(--uc-tabbar-height) - var(--uc-navbar-double-block)) !important; + margin-top: calc(var(--uc-tabbar-hide-height) + var(--uc-navbar-double-block)) !important; + margin-bottom: var(--uc-navbar-block, 0px) !important; + transform: translateY(calc(-1 * var(--uc-navbar-block, 0px))); } - #nav-bar { - margin-top: var(--uc-tabbar-hide-height) !important; - height: var(--uc-tabbar-height) !important; - --lwt-tabs-border-color: transparent; - background-color: unset !important; - background-image: unset !important; + #titlebar { + transform: translateY(var(--uc-navbar-block, 0px)); + } + + #TabsToolbar > .titlebar-buttonbox-container { + transform: translateY(calc(-1 * var(--uc-navbar-block, 0px))); } + @supports not -moz-bool-pref("userChrome.tab.one_liner.combine_navbar") { + :root { + --uc-navbar-gap: 10px; + --uc-navbar-block: 1.5px; + } + :root[uidensity="compact"] { + --uc-navbar-block: 1px; + } + :root[uidensity="touch"] { + --uc-navbar-block: 3px; + } + + #nav-bar { + --toolbarbutton-inner-padding: 6px; + /* Original: 8px */ + border-radius: var(--tab-border-radius, 4px); + } + + #nav-bar, + #nav-bar-customization-target { + -moz-box-align: center; + } + + #urlbar[breakout] { + top: 0px !important; + /* Original: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2); */ + } + } + @supports -moz-bool-pref("userChrome.tab.one_liner.combine_navbar") { + #navigator-toolbox { + background-color: var(--toolbar-bgcolor) !important; + } + + #nav-bar { + --lwt-tabs-border-color: transparent; + background-color: unset !important; + background-image: unset !important; + } + } #urlbar-container { min-width: calc(24px + 2 * var(--toolbarbutton-inner-padding)) !important; } @@ -4219,7 +4307,7 @@ @supports not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { #TabsToolbar { - margin-inline-start: var(--uc-navbar-size) !important; + margin-inline-start: var(--uc-navbar-margin) !important; } #nav-bar { @@ -4232,7 +4320,7 @@ } @supports -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { #TabsToolbar { - margin-inline-end: var(--uc-navbar-size) !important; + margin-inline-end: var(--uc-navbar-margin) !important; } #nav-bar { @@ -4248,8 +4336,6 @@ } /*= Tab Bar - Shared Layout ==================================================*/ @supports -moz-bool-pref("userChrome.tab.on_bottom") or -moz-bool-pref("userChrome.tab.one_liner") { - @supports -moz-bool-pref("userChrome.tab.on_bottom") or -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { - } @supports not -moz-bool-pref("userChrome.tab.one_liner") { @supports -moz-bool-pref("userChrome.tab.on_bottom") { /*= Windows Control - Move to toolbar ========================================*/ @@ -4631,6 +4717,7 @@ /* 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"]) { @@ -4691,11 +4778,51 @@ } } #nav-bar { - border-inline-start-width: var(--uc-window-drag-space-pre); - border-inline-end-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); border-inline-style: solid !important; border-inline-color: var(--toolbar-bgcolor); } + @supports not -moz-bool-pref("userChrome.tab.one_liner") { + #nav-bar { + border-inline-start-width: var(--uc-window-drag-space-pre); + border-inline-end-width: var(--uc-widow-control-space); + } + } + @supports -moz-bool-pref("userChrome.tab.one_liner") { + @supports -moz-bool-pref("userChrome.tab.one_liner.combine_navbar") { + #nav-bar { + border-inline-start-width: var(--uc-window-drag-space-pre); + border-inline-end-width: var(--uc-widow-control-space); + } + } + @supports not -moz-bool-pref("userChrome.tab.one_liner.combine_navbar") { + @supports -moz-bool-pref("userChrome.tab.on_bottom") { + @media screen and (max-width: 1100px) { + #nav-bar { + border-inline-start-width: var(--uc-window-drag-space-pre); + border-inline-end-width: var(--uc-widow-control-space); + } + } + } + } + } + @supports -moz-bool-pref("userChrome.tab.one_liner") { + @supports not -moz-bool-pref("userChrome.tab.one_liner.combine_navbar") { + @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @media screen and (min-width: 1100px) { + @supports not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { + #nav-bar { + margin-inline-start: var(--uc-window-drag-space-pre) !important; + } + } + @supports -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { + #nav-bar { + margin-inline-end: var(--uc-widow-control-space) !important; + } + } + } + } + } + } /* Windows */ @media (-moz-os-version: windows-win7), @@ -4718,9 +4845,47 @@ --uc-window-control-width: 72px; } - :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { - border-inline-start-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); - border-inline-end-width: var(--uc-window-drag-space-pre); + @supports not -moz-bool-pref("userChrome.tab.one_liner") { + :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { + border-inline-start-width: var(--uc-widow-control-space); + border-inline-end-width: var(--uc-window-drag-space-pre); + } + } + @supports -moz-bool-pref("userChrome.tab.one_liner") { + @supports -moz-bool-pref("userChrome.tab.one_liner.combine_navbar") { + :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { + border-inline-start-width: var(--uc-widow-control-space); + border-inline-end-width: var(--uc-window-drag-space-pre); + } + } + @supports not -moz-bool-pref("userChrome.tab.one_liner.combine_navbar") { + @supports -moz-bool-pref("userChrome.tab.on_bottom") { + @media screen and (max-width: 1100px) { + :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { + border-inline-start-width: var(--uc-widow-control-space); + border-inline-end-width: var(--uc-window-drag-space-pre); + } + } + } + } + } + @supports -moz-bool-pref("userChrome.tab.one_liner") { + @supports not -moz-bool-pref("userChrome.tab.one_liner.combine_navbar") { + @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @media screen and (min-width: 1100px) { + @supports not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { + :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { + margin-inline-start: var(--uc-window-drag-space-pre, 0px) !important; + } + } + @supports -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { + :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { + margin-inline-end: var(--uc-widow-control-space, 0px) !important; + } + } + } + } + } } :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, diff --git a/src/tabbar/_layout.scss b/src/tabbar/_layout.scss index 72b42d3a..56ad3f1e 100644 --- a/src/tabbar/_layout.scss +++ b/src/tabbar/_layout.scss @@ -1,5 +1,3 @@ -@include Option("userChrome.tab.on_bottom", "userChrome.tab.one_liner.tabbar_first") { -} @include NotOption("userChrome.tab.one_liner") { @include Option("userChrome.tab.on_bottom") { @import "layout/window_control"; diff --git a/src/tabbar/_one_liner.scss b/src/tabbar/_one_liner.scss index 210dc4bc..3d9c380d 100644 --- a/src/tabbar/_one_liner.scss +++ b/src/tabbar/_one_liner.scss @@ -1,19 +1,63 @@ :root { --uc-navbar-size: 40vw; --uc-tabbar-size: calc(100vw - var(--uc-navbar-size)); -} -#navigator-toolbox { - background-color: var(--toolbar-bgcolor) !important; + --uc-navbar-margin: calc(var(--uc-navbar-size) + var(--uc-navbar-gap, 0px)); } #nav-bar { - margin-top: var(--uc-tabbar-hide-height) !important; - height: var(--uc-tabbar-height) !important; + --uc-navbar-double-block: calc(2 * var(--uc-navbar-block, 0px)); + height: calc(var(--uc-tabbar-height) - var(--uc-navbar-double-block)) !important; + margin-top: calc(var(--uc-tabbar-hide-height) + var(--uc-navbar-double-block)) !important; + margin-bottom: var(--uc-navbar-block, 0px) !important; + transform: translateY(calc(-1 * var(--uc-navbar-block, 0px))); +} + +#titlebar { + transform: translateY(var(--uc-navbar-block, 0px)); +} +#TabsToolbar > .titlebar-buttonbox-container { + transform: translateY(calc(-1 * var(--uc-navbar-block, 0px))); +} + +@include NotOption("userChrome.tab.one_liner.combine_navbar") { + :root { + --uc-navbar-gap: 10px; + --uc-navbar-block: 1.5px; // var(--tab-block-margin) or var(--tabs-navbar-shadow-size) + + &[uidensity="compact"] { + --uc-navbar-block: 1px; + } + &[uidensity="touch"] { + --uc-navbar-block: 3px; + } + } + + #nav-bar { + --toolbarbutton-inner-padding: 6px; /* Original: 8px */ + border-radius: var(--tab-border-radius, 4px); + } + + #nav-bar, + #nav-bar-customization-target { + -moz-box-align: center; + } + + #urlbar[breakout] { + top: 0px !important; /* Original: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2); */ + } +} + +@include Option("userChrome.tab.one_liner.combine_navbar") { + #navigator-toolbox { + background-color: var(--toolbar-bgcolor) !important; + } - --lwt-tabs-border-color: transparent; // box-shadow - background-color: unset !important; // var(--toolbar-bgcolor) - background-image: unset !important; // var(--toolbar-bgimage) + #nav-bar { + --lwt-tabs-border-color: transparent; // box-shadow + background-color: unset !important; // var(--toolbar-bgcolor) + background-image: unset !important; // var(--toolbar-bgimage) + } } #urlbar-container { @@ -32,7 +76,7 @@ toolbarspring.chromeclass-toolbar-additional { @include NotOption("userChrome.tab.one_liner.tabbar_first") { #TabsToolbar { - margin-inline-start: var(--uc-navbar-size) !important; + margin-inline-start: var(--uc-navbar-margin) !important; } #nav-bar { margin-inline-end: var(--uc-tabbar-size) !important; @@ -43,7 +87,7 @@ toolbarspring.chromeclass-toolbar-additional { } @include Option("userChrome.tab.one_liner.tabbar_first") { #TabsToolbar { - margin-inline-end: var(--uc-navbar-size) !important; + margin-inline-end: var(--uc-navbar-margin) !important; } #nav-bar { margin-inline-start: var(--uc-tabbar-size) !important; diff --git a/src/tabbar/layout/_navbar_padding.scss b/src/tabbar/layout/_navbar_padding.scss index 92da540c..4d4663b6 100644 --- a/src/tabbar/layout/_navbar_padding.scss +++ b/src/tabbar/layout/_navbar_padding.scss @@ -4,6 +4,8 @@ --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 */ @@ -35,6 +37,34 @@ } } +@mixin _oneLiner_navBar_borderPadding() { + @include NotOption("userChrome.tab.one_liner") { + @content; + } + @include Option("userChrome.tab.one_liner") { + @include Option("userChrome.tab.one_liner.combine_navbar") { + @content; + } + @include NotOption("userChrome.tab.one_liner.combine_navbar") { + @include Option("userChrome.tab.on_bottom") { + @media screen and (max-width: 1100px) { + @content; + } + } + } + } +} + +@mixin _oneLiner_navBar_marginGap() { + @include NotOption("userChrome.tab.one_liner.combine_navbar") { + @include Option("userChrome.tab.one_liner.responsive") { + @media screen and (min-width: 1100px) { + @content; + } + } + } +} + //------------------------------------------------------------------------------ @include Option("userChrome.tab.one_liner") { @@ -57,11 +87,24 @@ } #nav-bar { - border-inline-start-width: var(--uc-window-drag-space-pre); - border-inline-end-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); - border-inline-style: solid !important; border-inline-color: var(--toolbar-bgcolor); + + @include _oneLiner_navBar_borderPadding { + border-inline-start-width: var(--uc-window-drag-space-pre); + border-inline-end-width: var(--uc-widow-control-space); + } + + @include Option("userChrome.tab.one_liner") { + @include _oneLiner_navBar_marginGap { + @include NotOption("userChrome.tab.one_liner.tabbar_first") { + margin-inline-start: var(--uc-window-drag-space-pre) !important; + } + @include Option("userChrome.tab.one_liner.tabbar_first") { + margin-inline-end: var(--uc-widow-control-space) !important; + } + } + } } /* Windows */ @@ -84,8 +127,21 @@ --uc-window-control-width: 72px; } :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { - border-inline-start-width: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post)); - border-inline-end-width: var(--uc-window-drag-space-pre); + @include _oneLiner_navBar_borderPadding { + border-inline-start-width: var(--uc-widow-control-space); + border-inline-end-width: var(--uc-window-drag-space-pre); + } + + @include Option("userChrome.tab.one_liner") { + @include _oneLiner_navBar_marginGap { + @include NotOption("userChrome.tab.one_liner.tabbar_first") { + margin-inline-start: var(--uc-window-drag-space-pre, 0px) !important; + } + @include Option("userChrome.tab.one_liner.tabbar_first") { + margin-inline-end: var(--uc-widow-control-space, 0px) !important; + } + } + } } :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, :root[sizemode="fullscreen"] #window-controls { diff --git a/user.js b/user.js index de2ebf9b..fe7fe375 100644 --- a/user.js +++ b/user.js @@ -111,6 +111,7 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.tab.on_bottom.above_bookmark", true); // Need on_bottom // user_pref("userChrome.tab.on_bottom.menubar_on_top", true); // Need on_bottom // user_pref("userChrome.tab.one_liner", true); +// user_pref("userChrome.tab.one_liner.combine_navbar", true); // user_pref("userChrome.tab.one_liner.tabbar_first", true); // user_pref("userChrome.tab.one_liner.responsive", true); // user_pref("userChrome.tab.as_titlebar", true); From 48eb45b40de2506531cf1509ee6221413f8d670f Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 4 Aug 2022 09:32:43 +0900 Subject: [PATCH 52/89] Clean: Tab Bar - Separated Tabbar, Tab --- css/leptonChrome.css | 3 +- src/leptonChrome.scss | 3 ++ src/{tabbar => tab}/_centered.scss | 0 src/{tabbar => tab}/_clipped_tab.scss | 0 src/{tabbar => tab}/_connect_to_window.scss | 0 src/{tabbar => tab}/_container_tab.scss | 0 src/{tabbar => tab}/_crashed_tab.scss | 0 src/tab/_index.scss | 42 ++++++++++++++++++ src/{tabbar => tab}/_newtab_button.scss | 0 .../_picture_in_picture_tab.scss | 0 src/{tabbar => tab}/_selected_tab.scss | 0 src/{tabbar => tab}/_sound_tab.scss | 0 src/{tabbar => tab}/_unload_tab.scss | 0 src/{tabbar => tab}/_unselected_tab.scss | 0 src/{tabbar => tab}/centered/_content.scss | 0 src/{tabbar => tab}/centered/_label.scss | 0 src/{tabbar => tab}/centered/_layout.scss | 0 .../clipped_tab/_always_show_tab_icon.scss | 0 .../clipped_tab/_letters_cleary.scss | 0 .../clipped_tab/_pinned_close_button.scss | 0 .../_show_close_button_at_hover.scss | 0 .../newtab_button/_looks_like_tab.scss | 0 .../newtab_button/_proton_like_button.scss | 0 .../newtab_button/_smaller_button.scss | 0 .../selected_tab/_bottom_rounded_corner.scss | 0 .../selected_tab/_box_shadow.scss | 0 .../selected_tab/_color_like_toolbar.scss | 0 .../selected_tab/_multi_selected.scss | 0 .../_photon_like_contextline.scss | 0 .../sound_tab/_hide_label.scss | 0 .../sound_tab/_show_label.scss | 0 .../sound_tab/_show_with_favicons.scss | 0 .../unselected_tab/_dynamic_separator.scss | 0 .../unselected_tab/_static_separator.scss | 0 src/tabbar/_index.scss | 43 ------------------- 35 files changed, 47 insertions(+), 44 deletions(-) rename src/{tabbar => tab}/_centered.scss (100%) rename src/{tabbar => tab}/_clipped_tab.scss (100%) rename src/{tabbar => tab}/_connect_to_window.scss (100%) rename src/{tabbar => tab}/_container_tab.scss (100%) rename src/{tabbar => tab}/_crashed_tab.scss (100%) create mode 100644 src/tab/_index.scss rename src/{tabbar => tab}/_newtab_button.scss (100%) rename src/{tabbar => tab}/_picture_in_picture_tab.scss (100%) rename src/{tabbar => tab}/_selected_tab.scss (100%) rename src/{tabbar => tab}/_sound_tab.scss (100%) rename src/{tabbar => tab}/_unload_tab.scss (100%) rename src/{tabbar => tab}/_unselected_tab.scss (100%) rename src/{tabbar => tab}/centered/_content.scss (100%) rename src/{tabbar => tab}/centered/_label.scss (100%) rename src/{tabbar => tab}/centered/_layout.scss (100%) rename src/{tabbar => tab}/clipped_tab/_always_show_tab_icon.scss (100%) rename src/{tabbar => tab}/clipped_tab/_letters_cleary.scss (100%) rename src/{tabbar => tab}/clipped_tab/_pinned_close_button.scss (100%) rename src/{tabbar => tab}/clipped_tab/_show_close_button_at_hover.scss (100%) rename src/{tabbar => tab}/newtab_button/_looks_like_tab.scss (100%) rename src/{tabbar => tab}/newtab_button/_proton_like_button.scss (100%) rename src/{tabbar => tab}/newtab_button/_smaller_button.scss (100%) rename src/{tabbar => tab}/selected_tab/_bottom_rounded_corner.scss (100%) rename src/{tabbar => tab}/selected_tab/_box_shadow.scss (100%) rename src/{tabbar => tab}/selected_tab/_color_like_toolbar.scss (100%) rename src/{tabbar => tab}/selected_tab/_multi_selected.scss (100%) rename src/{tabbar => tab}/selected_tab/_photon_like_contextline.scss (100%) rename src/{tabbar => tab}/sound_tab/_hide_label.scss (100%) rename src/{tabbar => tab}/sound_tab/_show_label.scss (100%) rename src/{tabbar => tab}/sound_tab/_show_with_favicons.scss (100%) rename src/{tabbar => tab}/unselected_tab/_dynamic_separator.scss (100%) rename src/{tabbar => tab}/unselected_tab/_static_separator.scss (100%) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index f3c7de68..288fb3c4 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4966,7 +4966,8 @@ --inline-tab-padding: 0 !important; } } -/*= Tab Bar - Connect to window ==============================================*/ +/** Tab UI ****************************************************************/ +/*= Tab - Connect to window ==============================================*/ @supports -moz-bool-pref("userChrome.tab.connect_to_window") { .tab-background { border-radius: var(--tab-border-radius) var(--tab-border-radius) 0px 0px !important; diff --git a/src/leptonChrome.scss b/src/leptonChrome.scss index d8db42e0..9ac881e9 100644 --- a/src/leptonChrome.scss +++ b/src/leptonChrome.scss @@ -63,6 +63,9 @@ /** Tab Bar UI ****************************************************************/ @import "tabbar/index"; +/** Tab UI ****************************************************************/ +@import "tab/index"; + /** Url View UI ***************************************************************/ @import "urlview/index"; diff --git a/src/tabbar/_centered.scss b/src/tab/_centered.scss similarity index 100% rename from src/tabbar/_centered.scss rename to src/tab/_centered.scss diff --git a/src/tabbar/_clipped_tab.scss b/src/tab/_clipped_tab.scss similarity index 100% rename from src/tabbar/_clipped_tab.scss rename to src/tab/_clipped_tab.scss diff --git a/src/tabbar/_connect_to_window.scss b/src/tab/_connect_to_window.scss similarity index 100% rename from src/tabbar/_connect_to_window.scss rename to src/tab/_connect_to_window.scss diff --git a/src/tabbar/_container_tab.scss b/src/tab/_container_tab.scss similarity index 100% rename from src/tabbar/_container_tab.scss rename to src/tab/_container_tab.scss diff --git a/src/tabbar/_crashed_tab.scss b/src/tab/_crashed_tab.scss similarity index 100% rename from src/tabbar/_crashed_tab.scss rename to src/tab/_crashed_tab.scss diff --git a/src/tab/_index.scss b/src/tab/_index.scss new file mode 100644 index 00000000..30a08d66 --- /dev/null +++ b/src/tab/_index.scss @@ -0,0 +1,42 @@ +/*= Tab - Connect to window ==============================================*/ +@include Option("userChrome.tab.connect_to_window") { + @import "connect_to_window"; +} + +/*= Selected Tab =============================================================*/ +@import "selected_tab"; + +/*= Unselected Tab - Divide line =============================================*/ +@import "unselected_tab"; + +/*= New tab button ============================================================*/ +@import "newtab_button"; + +/*= Unloaded Tab - Contents Opacity ===========================================*/ +@include Option("userChrome.tab.unloaded") { + @import "unload_tab"; +} + +/*= Clipped tabs =============================================================*/ +@import "clipped_tab"; + +/*= Sound Tab ================================================================*/ +@import "sound_tab"; + +/*= PictureInPicture Tab - Show PIP Icon =====================================*/ +@include Option("userChrome.tab.pip") { + @import "picture_in_picture_tab"; +} + +/*= Container Tab - Color line at icon's bottom ==============================*/ +@include Option("userChrome.tab.container") { + @import "container_tab"; +} + +/*= Crashed Tab - Don't show Favicons ========================================*/ +@include Option("userChrome.tab.crashed") { + @import "crashed_tab"; +} + +/*= Tab Centered - Make to Center ============================================*/ +@import "centered"; diff --git a/src/tabbar/_newtab_button.scss b/src/tab/_newtab_button.scss similarity index 100% rename from src/tabbar/_newtab_button.scss rename to src/tab/_newtab_button.scss diff --git a/src/tabbar/_picture_in_picture_tab.scss b/src/tab/_picture_in_picture_tab.scss similarity index 100% rename from src/tabbar/_picture_in_picture_tab.scss rename to src/tab/_picture_in_picture_tab.scss diff --git a/src/tabbar/_selected_tab.scss b/src/tab/_selected_tab.scss similarity index 100% rename from src/tabbar/_selected_tab.scss rename to src/tab/_selected_tab.scss diff --git a/src/tabbar/_sound_tab.scss b/src/tab/_sound_tab.scss similarity index 100% rename from src/tabbar/_sound_tab.scss rename to src/tab/_sound_tab.scss diff --git a/src/tabbar/_unload_tab.scss b/src/tab/_unload_tab.scss similarity index 100% rename from src/tabbar/_unload_tab.scss rename to src/tab/_unload_tab.scss diff --git a/src/tabbar/_unselected_tab.scss b/src/tab/_unselected_tab.scss similarity index 100% rename from src/tabbar/_unselected_tab.scss rename to src/tab/_unselected_tab.scss diff --git a/src/tabbar/centered/_content.scss b/src/tab/centered/_content.scss similarity index 100% rename from src/tabbar/centered/_content.scss rename to src/tab/centered/_content.scss diff --git a/src/tabbar/centered/_label.scss b/src/tab/centered/_label.scss similarity index 100% rename from src/tabbar/centered/_label.scss rename to src/tab/centered/_label.scss diff --git a/src/tabbar/centered/_layout.scss b/src/tab/centered/_layout.scss similarity index 100% rename from src/tabbar/centered/_layout.scss rename to src/tab/centered/_layout.scss diff --git a/src/tabbar/clipped_tab/_always_show_tab_icon.scss b/src/tab/clipped_tab/_always_show_tab_icon.scss similarity index 100% rename from src/tabbar/clipped_tab/_always_show_tab_icon.scss rename to src/tab/clipped_tab/_always_show_tab_icon.scss diff --git a/src/tabbar/clipped_tab/_letters_cleary.scss b/src/tab/clipped_tab/_letters_cleary.scss similarity index 100% rename from src/tabbar/clipped_tab/_letters_cleary.scss rename to src/tab/clipped_tab/_letters_cleary.scss diff --git a/src/tabbar/clipped_tab/_pinned_close_button.scss b/src/tab/clipped_tab/_pinned_close_button.scss similarity index 100% rename from src/tabbar/clipped_tab/_pinned_close_button.scss rename to src/tab/clipped_tab/_pinned_close_button.scss diff --git a/src/tabbar/clipped_tab/_show_close_button_at_hover.scss b/src/tab/clipped_tab/_show_close_button_at_hover.scss similarity index 100% rename from src/tabbar/clipped_tab/_show_close_button_at_hover.scss rename to src/tab/clipped_tab/_show_close_button_at_hover.scss diff --git a/src/tabbar/newtab_button/_looks_like_tab.scss b/src/tab/newtab_button/_looks_like_tab.scss similarity index 100% rename from src/tabbar/newtab_button/_looks_like_tab.scss rename to src/tab/newtab_button/_looks_like_tab.scss diff --git a/src/tabbar/newtab_button/_proton_like_button.scss b/src/tab/newtab_button/_proton_like_button.scss similarity index 100% rename from src/tabbar/newtab_button/_proton_like_button.scss rename to src/tab/newtab_button/_proton_like_button.scss diff --git a/src/tabbar/newtab_button/_smaller_button.scss b/src/tab/newtab_button/_smaller_button.scss similarity index 100% rename from src/tabbar/newtab_button/_smaller_button.scss rename to src/tab/newtab_button/_smaller_button.scss diff --git a/src/tabbar/selected_tab/_bottom_rounded_corner.scss b/src/tab/selected_tab/_bottom_rounded_corner.scss similarity index 100% rename from src/tabbar/selected_tab/_bottom_rounded_corner.scss rename to src/tab/selected_tab/_bottom_rounded_corner.scss diff --git a/src/tabbar/selected_tab/_box_shadow.scss b/src/tab/selected_tab/_box_shadow.scss similarity index 100% rename from src/tabbar/selected_tab/_box_shadow.scss rename to src/tab/selected_tab/_box_shadow.scss diff --git a/src/tabbar/selected_tab/_color_like_toolbar.scss b/src/tab/selected_tab/_color_like_toolbar.scss similarity index 100% rename from src/tabbar/selected_tab/_color_like_toolbar.scss rename to src/tab/selected_tab/_color_like_toolbar.scss diff --git a/src/tabbar/selected_tab/_multi_selected.scss b/src/tab/selected_tab/_multi_selected.scss similarity index 100% rename from src/tabbar/selected_tab/_multi_selected.scss rename to src/tab/selected_tab/_multi_selected.scss diff --git a/src/tabbar/selected_tab/_photon_like_contextline.scss b/src/tab/selected_tab/_photon_like_contextline.scss similarity index 100% rename from src/tabbar/selected_tab/_photon_like_contextline.scss rename to src/tab/selected_tab/_photon_like_contextline.scss diff --git a/src/tabbar/sound_tab/_hide_label.scss b/src/tab/sound_tab/_hide_label.scss similarity index 100% rename from src/tabbar/sound_tab/_hide_label.scss rename to src/tab/sound_tab/_hide_label.scss diff --git a/src/tabbar/sound_tab/_show_label.scss b/src/tab/sound_tab/_show_label.scss similarity index 100% rename from src/tabbar/sound_tab/_show_label.scss rename to src/tab/sound_tab/_show_label.scss diff --git a/src/tabbar/sound_tab/_show_with_favicons.scss b/src/tab/sound_tab/_show_with_favicons.scss similarity index 100% rename from src/tabbar/sound_tab/_show_with_favicons.scss rename to src/tab/sound_tab/_show_with_favicons.scss diff --git a/src/tabbar/unselected_tab/_dynamic_separator.scss b/src/tab/unselected_tab/_dynamic_separator.scss similarity index 100% rename from src/tabbar/unselected_tab/_dynamic_separator.scss rename to src/tab/unselected_tab/_dynamic_separator.scss diff --git a/src/tabbar/unselected_tab/_static_separator.scss b/src/tab/unselected_tab/_static_separator.scss similarity index 100% rename from src/tabbar/unselected_tab/_static_separator.scss rename to src/tab/unselected_tab/_static_separator.scss diff --git a/src/tabbar/_index.scss b/src/tabbar/_index.scss index e312b715..0de1daeb 100644 --- a/src/tabbar/_index.scss +++ b/src/tabbar/_index.scss @@ -39,46 +39,3 @@ @include Option("userChrome.tab.as_titlebar") { @import "as_titlebar"; } - -/*= Tab Bar - Connect to window ==============================================*/ -@include Option("userChrome.tab.connect_to_window") { - @import "connect_to_window"; -} - -/*= Selected Tab =============================================================*/ -@import "selected_tab"; - -/*= Unselected Tab - Divide line =============================================*/ -@import "unselected_tab"; - -/*= New tab button ============================================================*/ -@import "newtab_button"; - -/*= Unloaded Tab - Contents Opacity ===========================================*/ -@include Option("userChrome.tab.unloaded") { - @import "unload_tab"; -} - -/*= Clipped tabs =============================================================*/ -@import "clipped_tab"; - -/*= Sound Tab ================================================================*/ -@import "sound_tab"; - -/*= PictureInPicture Tab - Show PIP Icon =====================================*/ -@include Option("userChrome.tab.pip") { - @import "picture_in_picture_tab"; -} - -/*= Container Tab - Color line at icon's bottom ==============================*/ -@include Option("userChrome.tab.container") { - @import "container_tab"; -} - -/*= Crashed Tab - Don't show Favicons ========================================*/ -@include Option("userChrome.tab.crashed") { - @import "crashed_tab"; -} - -/*= Tab Centered - Make to Center ============================================*/ -@import "centered"; From 6a0b56c2ba016e27e69037c75cc35b17ad2b7131 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 4 Aug 2022 10:03:18 +0900 Subject: [PATCH 53/89] Fix: Tab Bar - Separated tabbar options --- __tests__/one_liner.test.scss | 26 +-- css/leptonChrome.css | 200 +++++++++--------- src/autohide/_common.scss | 2 +- src/autohide/_index.scss | 4 +- src/autohide/_tabbar.scss | 4 +- src/autohide/_toolbar_overlap.scss | 4 +- src/tab/_clipped_tab.scss | 2 +- .../unselected_tab/_dynamic_separator.scss | 4 +- src/tabbar/_index.scss | 10 +- src/tabbar/_layout.scss | 16 +- .../{_tabs_on_bottom.scss => _on_bottom.scss} | 6 +- src/tabbar/_one_liner.scss | 8 +- src/tabbar/layout/_navbar_padding.scss | 38 ++-- src/utils/_one_liner.scss | 22 +- user.js | 17 +- 15 files changed, 182 insertions(+), 181 deletions(-) rename src/tabbar/{_tabs_on_bottom.scss => _on_bottom.scss} (94%) diff --git a/__tests__/one_liner.test.scss b/__tests__/one_liner.test.scss index ad967492..74b8f96a 100644 --- a/__tests__/one_liner.test.scss +++ b/__tests__/one_liner.test.scss @@ -11,10 +11,10 @@ } } @include expect { - @supports not -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @include example; } - @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (min-width: 1100px) { @include example; } @@ -31,11 +31,11 @@ } } @include expect { - @supports -moz-bool-pref("userChrome.tab.one_liner") { - @supports not -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @include example; } - @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (min-width: 1100px) { @include example; } @@ -55,11 +55,11 @@ } } @include expect { - @supports not -moz-bool-pref("userChrome.tab.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { @include example; } - @supports -moz-bool-pref("userChrome.tab.one_liner") { - @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (max-width: 1100px) { @include example; } @@ -77,10 +77,10 @@ } } @include expect { - @supports not -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @include example; } - @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (min-width: 1100px) { @include example; } @@ -100,11 +100,11 @@ } } @include expect { - @supports not -moz-bool-pref("userChrome.tab.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { @include example; } - @supports -moz-bool-pref("userChrome.tab.one_liner") { - @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @supports -moz-bool-pref("userChrome.autohide.navbar") { @media screen and (max-width: 1100px) { @include example; diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 288fb3c4..bfab5b07 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -3246,13 +3246,13 @@ --tab-max-width: 225px; } } - @supports -moz-bool-pref("userChrome.tab.one_liner") { - @supports not -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { :root { --tab-max-width: 180px; } } - @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (min-width: 1100px) { :root { --tab-max-width: 180px; @@ -3838,7 +3838,7 @@ } /** Tab Bar UI ****************************************************************/ /*= Tabs on Bottom ===========================================================*/ -@supports -moz-bool-pref("userChrome.tab.on_bottom") or -moz-bool-pref("userChrome.fullscreen.overlap") { +@supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.fullscreen.overlap") { /* Don't use display: flex at not fullscreen!! side effect #372 */ :root[sizemode="fullscreen"] #navigator-toolbox { display: flex !important; @@ -3859,8 +3859,8 @@ -moz-appearance: none !important; } } -@supports -moz-bool-pref("userChrome.tab.on_bottom") { - @supports not -moz-bool-pref("userChrome.tab.one_liner") { +@supports -moz-bool-pref("userChrome.tabbar.on_bottom") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ /*= Tabbar - Move to bottom ==================================================*/ @@ -3885,14 +3885,14 @@ padding-inline-end: var(--toolbar-start-end-padding, 8px); } - @supports -moz-bool-pref("userChrome.tab.on_bottom.above_bookmark") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom.above_bookmark") { #PersonalToolbar { order: 2; /* When userChrome.fullscreen.overlap */ -moz-box-ordinal-group: 2; } } - @supports not -moz-bool-pref("userChrome.tab.on_bottom.above_bookmark") { + @supports not -moz-bool-pref("userChrome.tabbar.on_bottom.above_bookmark") { @supports -moz-bool-pref("userChrome.tab.connect_to_window") { @supports -moz-bool-pref("userChrome.tab.color_like_toolbar") { #navigator-toolbox { @@ -3903,7 +3903,7 @@ } } /*= Menubar - Always on top ==================================================*/ - @supports -moz-bool-pref("userChrome.tab.on_bottom.menubar_on_top") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") { /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ :root { @@ -3990,8 +3990,8 @@ } } } - @supports -moz-bool-pref("userChrome.tab.one_liner") { - @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (max-width: 1100px) { /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ @@ -4017,14 +4017,14 @@ padding-inline-end: var(--toolbar-start-end-padding, 8px); } - @supports -moz-bool-pref("userChrome.tab.on_bottom.above_bookmark") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom.above_bookmark") { #PersonalToolbar { order: 2; /* When userChrome.fullscreen.overlap */ -moz-box-ordinal-group: 2; } } - @supports not -moz-bool-pref("userChrome.tab.on_bottom.above_bookmark") { + @supports not -moz-bool-pref("userChrome.tabbar.on_bottom.above_bookmark") { @supports -moz-bool-pref("userChrome.tab.connect_to_window") { @supports -moz-bool-pref("userChrome.tab.color_like_toolbar") { #navigator-toolbox { @@ -4035,7 +4035,7 @@ } } /*= Menubar - Always on top ==================================================*/ - @supports -moz-bool-pref("userChrome.tab.on_bottom.menubar_on_top") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") { /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ :root { @@ -4126,8 +4126,8 @@ } } /*= Tab Bar - Oneliner =======================================================*/ -@supports -moz-bool-pref("userChrome.tab.one_liner") { - @supports not -moz-bool-pref("userChrome.tab.one_liner.responsive") { +@supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { :root { --uc-navbar-size: 40vw; --uc-tabbar-size: calc(100vw - var(--uc-navbar-size)); @@ -4150,7 +4150,7 @@ transform: translateY(calc(-1 * var(--uc-navbar-block, 0px))); } - @supports not -moz-bool-pref("userChrome.tab.one_liner.combine_navbar") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { :root { --uc-navbar-gap: 10px; --uc-navbar-block: 1.5px; @@ -4178,7 +4178,7 @@ /* Original: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2); */ } } - @supports -moz-bool-pref("userChrome.tab.one_liner.combine_navbar") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { #navigator-toolbox { background-color: var(--toolbar-bgcolor) !important; } @@ -4202,7 +4202,7 @@ display: none !important; } - @supports not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #TabsToolbar { margin-inline-start: var(--uc-navbar-margin) !important; } @@ -4215,7 +4215,7 @@ display: none !important; } } - @supports -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #TabsToolbar { margin-inline-end: var(--uc-navbar-margin) !important; } @@ -4229,7 +4229,7 @@ } } } - @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (min-width: 1100px) { :root { --uc-navbar-size: 40vw; @@ -4253,7 +4253,7 @@ transform: translateY(calc(-1 * var(--uc-navbar-block, 0px))); } - @supports not -moz-bool-pref("userChrome.tab.one_liner.combine_navbar") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { :root { --uc-navbar-gap: 10px; --uc-navbar-block: 1.5px; @@ -4281,7 +4281,7 @@ /* Original: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2); */ } } - @supports -moz-bool-pref("userChrome.tab.one_liner.combine_navbar") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { #navigator-toolbox { background-color: var(--toolbar-bgcolor) !important; } @@ -4305,7 +4305,7 @@ display: none !important; } - @supports not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #TabsToolbar { margin-inline-start: var(--uc-navbar-margin) !important; } @@ -4318,7 +4318,7 @@ display: none !important; } } - @supports -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #TabsToolbar { margin-inline-end: var(--uc-navbar-margin) !important; } @@ -4335,9 +4335,9 @@ } } /*= Tab Bar - Shared Layout ==================================================*/ -@supports -moz-bool-pref("userChrome.tab.on_bottom") or -moz-bool-pref("userChrome.tab.one_liner") { - @supports not -moz-bool-pref("userChrome.tab.one_liner") { - @supports -moz-bool-pref("userChrome.tab.on_bottom") { +@supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { /*= Windows Control - Move to toolbar ========================================*/ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ @@ -4428,9 +4428,9 @@ } } } - @supports -moz-bool-pref("userChrome.tab.one_liner") { - @supports not -moz-bool-pref("userChrome.tab.one_liner.responsive") { - @supports -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { + @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") { /*= Windows Control - Move to toolbar ========================================*/ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ @@ -4521,8 +4521,8 @@ } } } - @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { - @supports -moz-bool-pref("userChrome.tab.on_bottom") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { @media screen and (max-width: 1100px) { /*= Windows Control - Move to toolbar ========================================*/ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 @@ -4614,7 +4614,7 @@ } } } - @supports -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { @media screen and (min-width: 1100px) { /*= Windows Control - Move to toolbar ========================================*/ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 @@ -4732,15 +4732,15 @@ /* Remove pre space */ } - @supports -moz-bool-pref("userChrome.tab.one_liner") { - @supports not -moz-bool-pref("userChrome.tab.one_liner.responsive") { - @supports -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { + @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") { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { /* Don't need pre spacer */ --uc-window-drag-space-pre: 0px; } } - @supports not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { + @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; @@ -4748,9 +4748,9 @@ } } } - @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (max-width: 1100px) { - @supports not -moz-bool-pref("userChrome.tab.on_bottom") { + @supports not -moz-bool-pref("userChrome.tabbar.on_bottom") { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { /* Don't need pre spacer */ --uc-window-drag-space-pre: 0px; @@ -4761,13 +4761,13 @@ } } @media screen and (min-width: 1100px) { - @supports -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { /* Don't need pre spacer */ --uc-window-drag-space-pre: 0px; } } - @supports not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { + @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; @@ -4781,21 +4781,21 @@ border-inline-style: solid !important; border-inline-color: var(--toolbar-bgcolor); } - @supports not -moz-bool-pref("userChrome.tab.one_liner") { + @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-widow-control-space); } } - @supports -moz-bool-pref("userChrome.tab.one_liner") { - @supports -moz-bool-pref("userChrome.tab.one_liner.combine_navbar") { + @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-widow-control-space); } } - @supports not -moz-bool-pref("userChrome.tab.one_liner.combine_navbar") { - @supports -moz-bool-pref("userChrome.tab.on_bottom") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { @media screen and (max-width: 1100px) { #nav-bar { border-inline-start-width: var(--uc-window-drag-space-pre); @@ -4805,16 +4805,16 @@ } } } - @supports -moz-bool-pref("userChrome.tab.one_liner") { - @supports not -moz-bool-pref("userChrome.tab.one_liner.combine_navbar") { - @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (min-width: 1100px) { - @supports not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { + @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.tab.one_liner.tabbar_first") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #nav-bar { margin-inline-end: var(--uc-widow-control-space) !important; } @@ -4845,21 +4845,21 @@ --uc-window-control-width: 72px; } - @supports not -moz-bool-pref("userChrome.tab.one_liner") { + @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); border-inline-end-width: var(--uc-window-drag-space-pre); } } - @supports -moz-bool-pref("userChrome.tab.one_liner") { - @supports -moz-bool-pref("userChrome.tab.one_liner.combine_navbar") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { border-inline-start-width: var(--uc-widow-control-space); border-inline-end-width: var(--uc-window-drag-space-pre); } } - @supports not -moz-bool-pref("userChrome.tab.one_liner.combine_navbar") { - @supports -moz-bool-pref("userChrome.tab.on_bottom") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { @media screen and (max-width: 1100px) { :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { border-inline-start-width: var(--uc-widow-control-space); @@ -4869,16 +4869,16 @@ } } } - @supports -moz-bool-pref("userChrome.tab.one_liner") { - @supports not -moz-bool-pref("userChrome.tab.one_liner.combine_navbar") { - @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (min-width: 1100px) { - @supports not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { margin-inline-start: var(--uc-window-drag-space-pre, 0px) !important; } } - @supports -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { margin-inline-end: var(--uc-widow-control-space, 0px) !important; } @@ -4895,7 +4895,7 @@ } } /*= Tab Bar - Show only current tab ==========================================*/ -@supports -moz-bool-pref("userChrome.tab.as_titlebar") { +@supports -moz-bool-pref("userChrome.tabbar.as_titlebar") { :root:not([tabsintitlebar="true"]) #tabbrowser-tabs, #scrollbutton-up, #scrollbutton-down, @@ -5375,15 +5375,15 @@ opacity: var(--tab-separator-opacity); } - @supports -moz-bool-pref("userChrome.tab.one_liner") { - @supports not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { - @supports not -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-background::before { opacity: var(--tab-separator-opacity); transform: translateX(-1.5px) translateY(calc(-50% + 1px)); } } - @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (min-width: 1100px) { .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-background::before { opacity: var(--tab-separator-opacity); @@ -5779,7 +5779,7 @@ } /** Clipped tabs - Show close button at pinned tab ****************************/ @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") { - @supports not -moz-bool-pref("userChrome.tab.as_titlebar") { + @supports not -moz-bool-pref("userChrome.tabbar.as_titlebar") { #tabbrowser-tabs { --uc-close-button-size: 24px; --uc-close-button-padding: 6px; @@ -6460,7 +6460,7 @@ @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.tab.one_liner") { + or -moz-bool-pref("userChrome.tabbar.one_liner") { :root { --uc-tabbar-height: var(--tab-min-height); --uc-tabbar-hide-height: calc(-1 * var(--uc-tabbar-height)); @@ -6518,7 +6518,7 @@ } } @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.autohide.navbar") { - @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.tab.one_liner") { + @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.tabbar.one_liner") { #navigator-toolbox:hover { --uc-toolbar-height: var(--uc-tabbar-height); } @@ -6529,7 +6529,7 @@ } } } - @supports not -moz-bool-pref("userChrome.tab.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { @supports not -moz-bool-pref("userChrome.autohide.bookmarkbar") { #navigator-toolbox:hover { --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height)); @@ -6541,8 +6541,8 @@ } } } - @supports -moz-bool-pref("userChrome.tab.one_liner") { - @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @supports -moz-bool-pref("userChrome.autohide.navbar") { @media screen and (max-width: 1100px) { @supports not -moz-bool-pref("userChrome.autohide.bookmarkbar") { @@ -6569,8 +6569,8 @@ } } } - @supports -moz-bool-pref("userChrome.autohide.navbar") or -moz-bool-pref("userChrome.tab.one_liner") { - @supports not -moz-bool-pref("userChrome.tab.one_liner") { + @supports -moz-bool-pref("userChrome.autohide.navbar") or -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { @supports not -moz-bool-pref("userChrome.autohide.bookmarkbar") { #navigator-toolbox:hover { --uc-toolbar-height: var(--uc-navbar-height); @@ -6582,8 +6582,8 @@ } } } - @supports -moz-bool-pref("userChrome.tab.one_liner") { - @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @supports -moz-bool-pref("userChrome.autohide.navbar") { @media screen and (max-width: 1100px) { @supports not -moz-bool-pref("userChrome.autohide.bookmarkbar") { @@ -6605,20 +6605,20 @@ } } @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.autohide.navbar") { - @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.tab.one_liner") { - @supports not -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { :root:not([customizing]) #titlebar { margin-bottom: var(--uc-tabbar-hide-height); will-change: margin-bottom; } - @supports not -moz-bool-pref("userChrome.tab.on_bottom") { + @supports not -moz-bool-pref("userChrome.tabbar.on_bottom") { #TabsToolbar:not([customizing]) { opacity: 0; will-change: opacity; } } - @supports -moz-bool-pref("userChrome.tab.on_bottom") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { #TabsToolbar:not([customizing]) > *:not(.titlebar-buttonbox-container) { opacity: 0; will-change: opacity; @@ -6628,31 +6628,31 @@ #navigator-toolbox:is(:hover, :focus-within) > #titlebar { margin-bottom: 0px; } - @supports not -moz-bool-pref("userChrome.tab.on_bottom") { + @supports not -moz-bool-pref("userChrome.tabbar.on_bottom") { #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar { opacity: 1; } } - @supports -moz-bool-pref("userChrome.tab.on_bottom") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar > *:not(.titlebar-buttonbox-container) { opacity: 1; } } } - @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (min-width: 1100px) { :root:not([customizing]) #titlebar { margin-bottom: var(--uc-tabbar-hide-height); will-change: margin-bottom; } - @supports not -moz-bool-pref("userChrome.tab.on_bottom") { + @supports not -moz-bool-pref("userChrome.tabbar.on_bottom") { #TabsToolbar:not([customizing]) { opacity: 0; will-change: opacity; } } - @supports -moz-bool-pref("userChrome.tab.on_bottom") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { #TabsToolbar:not([customizing]) > *:not(.titlebar-buttonbox-container) { opacity: 0; will-change: opacity; @@ -6662,12 +6662,12 @@ #navigator-toolbox:is(:hover, :focus-within) > #titlebar { margin-bottom: 0px; } - @supports not -moz-bool-pref("userChrome.tab.on_bottom") { + @supports not -moz-bool-pref("userChrome.tabbar.on_bottom") { #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar { opacity: 1; } } - @supports -moz-bool-pref("userChrome.tab.on_bottom") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar > *:not(.titlebar-buttonbox-container) { opacity: 1; } @@ -6679,13 +6679,13 @@ will-change: margin-bottom; } - @supports not -moz-bool-pref("userChrome.tab.on_bottom") { + @supports not -moz-bool-pref("userChrome.tabbar.on_bottom") { #TabsToolbar:not([customizing]) { opacity: 0; will-change: opacity; } } - @supports -moz-bool-pref("userChrome.tab.on_bottom") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { #TabsToolbar:not([customizing]) > *:not(.titlebar-buttonbox-container) { opacity: 0; will-change: opacity; @@ -6695,12 +6695,12 @@ #navigator-toolbox:is(:hover, :focus-within) > #titlebar { margin-bottom: 0px; } - @supports not -moz-bool-pref("userChrome.tab.on_bottom") { + @supports not -moz-bool-pref("userChrome.tabbar.on_bottom") { #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar { opacity: 1; } } - @supports -moz-bool-pref("userChrome.tab.on_bottom") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar > *:not(.titlebar-buttonbox-container) { opacity: 1; } @@ -6713,12 +6713,12 @@ background-color 1s var(--animation-easing-function) !important; } - @supports not -moz-bool-pref("userChrome.tab.on_bottom") { + @supports not -moz-bool-pref("userChrome.tabbar.on_bottom") { #TabsToolbar:not([customizing]) { transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay) !important; } } - @supports -moz-bool-pref("userChrome.tab.on_bottom") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { #TabsToolbar:not([customizing]) > *:not(.titlebar-buttonbox-container) { transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay) !important; } @@ -6730,12 +6730,12 @@ #navigator-toolbox:is(:hover, :focus-within) > #titlebar:not([customizing]) { transition-delay: 0s !important; } - @supports not -moz-bool-pref("userChrome.tab.on_bottom") { + @supports not -moz-bool-pref("userChrome.tabbar.on_bottom") { #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar:not([customizing]) { transition-delay: 0s !important; } } - @supports -moz-bool-pref("userChrome.tab.on_bottom") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar:not([customizing]) > *:not(.titlebar-buttonbox-container) { @@ -6744,8 +6744,8 @@ } } } - @supports -moz-bool-pref("userChrome.autohide.navbar") or -moz-bool-pref("userChrome.tab.one_liner") { - @supports not -moz-bool-pref("userChrome.tab.one_liner") { + @supports -moz-bool-pref("userChrome.autohide.navbar") or -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { #nav-bar:not([customizing]) { margin-bottom: var(--uc-navbar-hide-height); opacity: 0; @@ -6757,8 +6757,8 @@ opacity: 1; } } - @supports -moz-bool-pref("userChrome.tab.one_liner") { - @supports -moz-bool-pref("userChrome.tab.one_liner.responsive") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @supports -moz-bool-pref("userChrome.autohide.navbar") { @media screen and (max-width: 1100px) { #nav-bar:not([customizing]) { diff --git a/src/autohide/_common.scss b/src/autohide/_common.scss index b9c7298d..ce7b3d92 100644 --- a/src/autohide/_common.scss +++ b/src/autohide/_common.scss @@ -1,4 +1,4 @@ -@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar", "userChrome.tab.one_liner") { +@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar", "userChrome.tabbar.one_liner") { :root { --uc-tabbar-height: var(--tab-min-height); // calc((var(--tab-block-margin) * 2) + var(--tab-min-height)); --uc-tabbar-hide-height: calc(-1 * var(--uc-tabbar-height)); diff --git a/src/autohide/_index.scss b/src/autohide/_index.scss index 874609fe..cc4e956c 100644 --- a/src/autohide/_index.scss +++ b/src/autohide/_index.scss @@ -14,10 +14,10 @@ @import "common"; @include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar") { - @include Option("userChrome.autohide.tabbar", "userChrome.tab.one_liner") { + @include Option("userChrome.autohide.tabbar", "userChrome.tabbar.one_liner") { @import "tabbar"; } - @include Option("userChrome.autohide.navbar", "userChrome.tab.one_liner") { + @include Option("userChrome.autohide.navbar", "userChrome.tabbar.one_liner") { @import "navbar"; } } diff --git a/src/autohide/_tabbar.scss b/src/autohide/_tabbar.scss index ab632adc..5781a34d 100644 --- a/src/autohide/_tabbar.scss +++ b/src/autohide/_tabbar.scss @@ -1,9 +1,9 @@ //-- Mixin --------------------------------------------------------------------- @mixin _autohide_tabbar() { - @include NotOption("userChrome.tab.on_bottom") { + @include NotOption("userChrome.tabbar.on_bottom") { @content; } - @include Option("userChrome.tab.on_bottom") { + @include Option("userChrome.tabbar.on_bottom") { > *:not(.titlebar-buttonbox-container) { @content; } diff --git a/src/autohide/_toolbar_overlap.scss b/src/autohide/_toolbar_overlap.scss index 4765e8c3..258684d8 100644 --- a/src/autohide/_toolbar_overlap.scss +++ b/src/autohide/_toolbar_overlap.scss @@ -27,7 +27,7 @@ &:hover { @include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar") { - @include Option("userChrome.autohide.tabbar", "userChrome.tab.one_liner") { + @include Option("userChrome.autohide.tabbar", "userChrome.tabbar.one_liner") { --uc-toolbar-height: var(--uc-tabbar-height); @include NotOption("userChrome.autohide.navbar") { @@ -53,7 +53,7 @@ } } - @include Option("userChrome.autohide.navbar", "userChrome.tab.one_liner") { + @include Option("userChrome.autohide.navbar", "userChrome.tabbar.one_liner") { @include OneLinerNavbar { @include NotOption("userChrome.autohide.bookmarkbar") { --uc-toolbar-height: var(--uc-navbar-height); diff --git a/src/tab/_clipped_tab.scss b/src/tab/_clipped_tab.scss index 0762caf6..b08982fe 100644 --- a/src/tab/_clipped_tab.scss +++ b/src/tab/_clipped_tab.scss @@ -10,7 +10,7 @@ /** Clipped tabs - Show close button at pinned tab ****************************/ @include Option("userChrome.tab.close_button_at_pinned") { - @include NotOption("userChrome.tab.as_titlebar") { + @include NotOption("userChrome.tabbar.as_titlebar") { @import "clipped_tab/pinned_close_button"; } } diff --git a/src/tab/unselected_tab/_dynamic_separator.scss b/src/tab/unselected_tab/_dynamic_separator.scss index f4f4447c..e9975670 100644 --- a/src/tab/unselected_tab/_dynamic_separator.scss +++ b/src/tab/unselected_tab/_dynamic_separator.scss @@ -57,8 +57,8 @@ .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before { opacity: var(--tab-separator-opacity); } -@include Option("userChrome.tab.one_liner") { - @include NotOption("userChrome.tab.one_liner.tabbar_first") { +@include Option("userChrome.tabbar.one_liner") { + @include NotOption("userChrome.tabbar.one_liner.tabbar_first") { @include OneLinerContent { .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-background::before { opacity: var(--tab-separator-opacity); diff --git a/src/tabbar/_index.scss b/src/tabbar/_index.scss index 0de1daeb..0581a97c 100644 --- a/src/tabbar/_index.scss +++ b/src/tabbar/_index.scss @@ -1,5 +1,5 @@ /*= Tabs on Bottom ===========================================================*/ -@include Option("userChrome.tab.on_bottom", "userChrome.fullscreen.overlap") { +@include Option("userChrome.tabbar.on_bottom", "userChrome.fullscreen.overlap") { /* Don't use display: flex at not fullscreen!! side effect #372 */ :root[sizemode="fullscreen"] #navigator-toolbox { display: flex !important; /* Needed for content to take up entire height, compatibility with tabs on bottom */ @@ -19,9 +19,9 @@ } } -@include Option("userChrome.tab.on_bottom") { +@include Option("userChrome.tabbar.on_bottom") { @include OneLinerOnBottom { - @import "tabs_on_bottom"; + @import "on_bottom"; } } @@ -31,11 +31,11 @@ } /*= Tab Bar - Shared Layout ==================================================*/ -@include Option("userChrome.tab.on_bottom", "userChrome.tab.one_liner") { +@include Option("userChrome.tabbar.on_bottom", "userChrome.tabbar.one_liner") { @import "layout"; } /*= Tab Bar - Show only current tab ==========================================*/ -@include Option("userChrome.tab.as_titlebar") { +@include Option("userChrome.tabbar.as_titlebar") { @import "as_titlebar"; } diff --git a/src/tabbar/_layout.scss b/src/tabbar/_layout.scss index 56ad3f1e..13b4c7e3 100644 --- a/src/tabbar/_layout.scss +++ b/src/tabbar/_layout.scss @@ -1,21 +1,21 @@ -@include NotOption("userChrome.tab.one_liner") { - @include Option("userChrome.tab.on_bottom") { +@include NotOption("userChrome.tabbar.one_liner") { + @include Option("userChrome.tabbar.on_bottom") { @import "layout/window_control"; } } -@include Option("userChrome.tab.one_liner") { - @include NotOption("userChrome.tab.one_liner.responsive") { - @include Option("userChrome.tab.one_liner.tabbar_first") { +@include Option("userChrome.tabbar.one_liner") { + @include NotOption("userChrome.tabbar.one_liner.responsive") { + @include Option("userChrome.tabbar.one_liner.tabbar_first") { @import "layout/window_control"; } } - @include Option("userChrome.tab.one_liner.responsive") { - @include Option("userChrome.tab.on_bottom") { + @include Option("userChrome.tabbar.one_liner.responsive") { + @include Option("userChrome.tabbar.on_bottom") { @media screen and (max-width: 1100px) { @import "layout/window_control"; } } - @include Option("userChrome.tab.one_liner.tabbar_first") { + @include Option("userChrome.tabbar.one_liner.tabbar_first") { @media screen and (min-width: 1100px) { @import "layout/window_control"; } diff --git a/src/tabbar/_tabs_on_bottom.scss b/src/tabbar/_on_bottom.scss similarity index 94% rename from src/tabbar/_tabs_on_bottom.scss rename to src/tabbar/_on_bottom.scss index 73b9c672..a43cdfd9 100644 --- a/src/tabbar/_tabs_on_bottom.scss +++ b/src/tabbar/_on_bottom.scss @@ -20,13 +20,13 @@ See the above repository for updates as well as full license text. */ padding-inline-end: var(--toolbar-start-end-padding, 8px); } -@include Option("userChrome.tab.on_bottom.above_bookmark") { +@include Option("userChrome.tabbar.on_bottom.above_bookmark") { #PersonalToolbar { order: 2; /* When userChrome.fullscreen.overlap */ -moz-box-ordinal-group: 2; } } -@include NotOption("userChrome.tab.on_bottom.above_bookmark") { +@include NotOption("userChrome.tabbar.on_bottom.above_bookmark") { @include Option("userChrome.tab.connect_to_window") { @include Option("userChrome.tab.color_like_toolbar") { #navigator-toolbox { @@ -37,7 +37,7 @@ See the above repository for updates as well as full license text. */ } /*= Menubar - Always on top ==================================================*/ -@include Option("userChrome.tab.on_bottom.menubar_on_top") { +@include Option("userChrome.tabbar.on_bottom.menubar_on_top") { /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ diff --git a/src/tabbar/_one_liner.scss b/src/tabbar/_one_liner.scss index 3d9c380d..a07508c9 100644 --- a/src/tabbar/_one_liner.scss +++ b/src/tabbar/_one_liner.scss @@ -20,7 +20,7 @@ transform: translateY(calc(-1 * var(--uc-navbar-block, 0px))); } -@include NotOption("userChrome.tab.one_liner.combine_navbar") { +@include NotOption("userChrome.tabbar.one_liner.combine_navbar") { :root { --uc-navbar-gap: 10px; --uc-navbar-block: 1.5px; // var(--tab-block-margin) or var(--tabs-navbar-shadow-size) @@ -48,7 +48,7 @@ } } -@include Option("userChrome.tab.one_liner.combine_navbar") { +@include Option("userChrome.tabbar.one_liner.combine_navbar") { #navigator-toolbox { background-color: var(--toolbar-bgcolor) !important; } @@ -74,7 +74,7 @@ toolbarspring.chromeclass-toolbar-additional { display: none !important; } -@include NotOption("userChrome.tab.one_liner.tabbar_first") { +@include NotOption("userChrome.tabbar.one_liner.tabbar_first") { #TabsToolbar { margin-inline-start: var(--uc-navbar-margin) !important; } @@ -85,7 +85,7 @@ toolbarspring.chromeclass-toolbar-additional { display: none !important; } } -@include Option("userChrome.tab.one_liner.tabbar_first") { +@include Option("userChrome.tabbar.one_liner.tabbar_first") { #TabsToolbar { margin-inline-end: var(--uc-navbar-margin) !important; } diff --git a/src/tabbar/layout/_navbar_padding.scss b/src/tabbar/layout/_navbar_padding.scss index 4d4663b6..31968150 100644 --- a/src/tabbar/layout/_navbar_padding.scss +++ b/src/tabbar/layout/_navbar_padding.scss @@ -29,24 +29,24 @@ } @mixin _remove_spacer_oneLiner() { - @include Option("userChrome.tab.one_liner.tabbar_first") { + @include Option("userChrome.tabbar.one_liner.tabbar_first") { @include _remove_spacer_pre; } - @include NotOption("userChrome.tab.one_liner.tabbar_first") { + @include NotOption("userChrome.tabbar.one_liner.tabbar_first") { @include _remove_spacer_post; } } @mixin _oneLiner_navBar_borderPadding() { - @include NotOption("userChrome.tab.one_liner") { + @include NotOption("userChrome.tabbar.one_liner") { @content; } - @include Option("userChrome.tab.one_liner") { - @include Option("userChrome.tab.one_liner.combine_navbar") { + @include Option("userChrome.tabbar.one_liner") { + @include Option("userChrome.tabbar.one_liner.combine_navbar") { @content; } - @include NotOption("userChrome.tab.one_liner.combine_navbar") { - @include Option("userChrome.tab.on_bottom") { + @include NotOption("userChrome.tabbar.one_liner.combine_navbar") { + @include Option("userChrome.tabbar.on_bottom") { @media screen and (max-width: 1100px) { @content; } @@ -56,8 +56,8 @@ } @mixin _oneLiner_navBar_marginGap() { - @include NotOption("userChrome.tab.one_liner.combine_navbar") { - @include Option("userChrome.tab.one_liner.responsive") { + @include NotOption("userChrome.tabbar.one_liner.combine_navbar") { + @include Option("userChrome.tabbar.one_liner.responsive") { @media screen and (min-width: 1100px) { @content; } @@ -67,14 +67,14 @@ //------------------------------------------------------------------------------ -@include Option("userChrome.tab.one_liner") { +@include Option("userChrome.tabbar.one_liner") { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { - @include NotOption("userChrome.tab.one_liner.responsive") { + @include NotOption("userChrome.tabbar.one_liner.responsive") { @include _remove_spacer_oneLiner; } - @include Option("userChrome.tab.one_liner.responsive") { + @include Option("userChrome.tabbar.one_liner.responsive") { @media screen and (max-width: 1100px) { - @include NotOption("userChrome.tab.on_bottom") { + @include NotOption("userChrome.tabbar.on_bottom") { @include _remove_spacer_pre; @include _remove_spacer_post; } @@ -95,12 +95,12 @@ border-inline-end-width: var(--uc-widow-control-space); } - @include Option("userChrome.tab.one_liner") { + @include Option("userChrome.tabbar.one_liner") { @include _oneLiner_navBar_marginGap { - @include NotOption("userChrome.tab.one_liner.tabbar_first") { + @include NotOption("userChrome.tabbar.one_liner.tabbar_first") { margin-inline-start: var(--uc-window-drag-space-pre) !important; } - @include Option("userChrome.tab.one_liner.tabbar_first") { + @include Option("userChrome.tabbar.one_liner.tabbar_first") { margin-inline-end: var(--uc-widow-control-space) !important; } } @@ -132,12 +132,12 @@ border-inline-end-width: var(--uc-window-drag-space-pre); } - @include Option("userChrome.tab.one_liner") { + @include Option("userChrome.tabbar.one_liner") { @include _oneLiner_navBar_marginGap { - @include NotOption("userChrome.tab.one_liner.tabbar_first") { + @include NotOption("userChrome.tabbar.one_liner.tabbar_first") { margin-inline-start: var(--uc-window-drag-space-pre, 0px) !important; } - @include Option("userChrome.tab.one_liner.tabbar_first") { + @include Option("userChrome.tabbar.one_liner.tabbar_first") { margin-inline-end: var(--uc-widow-control-space, 0px) !important; } } diff --git a/src/utils/_one_liner.scss b/src/utils/_one_liner.scss index ccf6aa21..169d0e97 100644 --- a/src/utils/_one_liner.scss +++ b/src/utils/_one_liner.scss @@ -1,10 +1,10 @@ @use "option" as *; @mixin OneLinerContent() { - @include NotOption("userChrome.tab.one_liner.responsive") { + @include NotOption("userChrome.tabbar.one_liner.responsive") { @content; } - @include Option("userChrome.tab.one_liner.responsive") { + @include Option("userChrome.tabbar.one_liner.responsive") { @media screen and (min-width: 1100px) { @content; } @@ -12,7 +12,7 @@ } @mixin OneLiner() { - @include Option("userChrome.tab.one_liner") { + @include Option("userChrome.tabbar.one_liner") { @include OneLinerContent { @content; } @@ -20,11 +20,11 @@ } @mixin OneLinerOnBottom() { - @include NotOption("userChrome.tab.one_liner") { + @include NotOption("userChrome.tabbar.one_liner") { @content; } - @include Option("userChrome.tab.one_liner") { - @include Option("userChrome.tab.one_liner.responsive") { + @include Option("userChrome.tabbar.one_liner") { + @include Option("userChrome.tabbar.one_liner.responsive") { @media screen and (max-width: 1100px) { @content; } @@ -33,10 +33,10 @@ } @mixin OneLinerTabbar() { - @include NotOption("userChrome.tab.one_liner.responsive") { + @include NotOption("userChrome.tabbar.one_liner.responsive") { @content; } - @include Option("userChrome.tab.one_liner.responsive") { + @include Option("userChrome.tabbar.one_liner.responsive") { @media screen and (min-width: 1100px) { @content; } @@ -47,11 +47,11 @@ } @mixin OneLinerNavbar() { - @include NotOption("userChrome.tab.one_liner") { + @include NotOption("userChrome.tabbar.one_liner") { @content; } - @include Option("userChrome.tab.one_liner") { - @include Option("userChrome.tab.one_liner.responsive") { + @include Option("userChrome.tabbar.one_liner") { + @include Option("userChrome.tabbar.one_liner.responsive") { @include Option("userChrome.autohide.navbar") { @media screen and (max-width: 1100px) { @content; diff --git a/user.js b/user.js index fe7fe375..f6ea755c 100644 --- a/user.js +++ b/user.js @@ -107,14 +107,15 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.urlView.go_button_when_typing", true); // user_pref("userChrome.urlView.always_show_page_actions", true); -// user_pref("userChrome.tab.on_bottom", true); -// user_pref("userChrome.tab.on_bottom.above_bookmark", true); // Need on_bottom -// user_pref("userChrome.tab.on_bottom.menubar_on_top", true); // Need on_bottom -// user_pref("userChrome.tab.one_liner", true); -// user_pref("userChrome.tab.one_liner.combine_navbar", true); -// user_pref("userChrome.tab.one_liner.tabbar_first", true); -// user_pref("userChrome.tab.one_liner.responsive", true); -// user_pref("userChrome.tab.as_titlebar", true); +// user_pref("userChrome.tabbar.as_titlebar", true); +// user_pref("userChrome.tabbar.on_bottom", true); +// user_pref("userChrome.tabbar.on_bottom.above_bookmark", true); // Need on_bottom +// user_pref("userChrome.tabbar.on_bottom.menubar_on_top", true); // Need on_bottom +// user_pref("userChrome.tabbar.one_liner", true); +// user_pref("userChrome.tabbar.one_liner.combine_navbar", true); // Need one_liner +// user_pref("userChrome.tabbar.one_liner.tabbar_first", true); // Need one_liner +// user_pref("userChrome.tabbar.one_liner.responsive", true); // Need one_liner + // user_pref("userChrome.tab.always_show_tab_icon", true); // user_pref("userChrome.tab.close_button_at_pinned", true); // user_pref("userChrome.tab.close_button_at_pinned.always", true); From 2ea8702816c1e3248fed76cfbce34d8b7ad0400a Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 4 Aug 2022 17:27:54 +0900 Subject: [PATCH 54/89] Fix: Auto Hide - Navbar scope --- __tests__/one_liner.test.scss | 12 +++--- css/leptonChrome.css | 74 +++++++++++++++++------------------ src/utils/_one_liner.scss | 12 +++--- 3 files changed, 49 insertions(+), 49 deletions(-) diff --git a/__tests__/one_liner.test.scss b/__tests__/one_liner.test.scss index 74b8f96a..e59f49da 100644 --- a/__tests__/one_liner.test.scss +++ b/__tests__/one_liner.test.scss @@ -100,12 +100,12 @@ } } @include expect { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { - @include example; - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @supports -moz-bool-pref("userChrome.autohide.navbar") { + @supports -moz-bool-pref("userChrome.autohide.navbar") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { + @include example; + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (max-width: 1100px) { @include example; } diff --git a/css/leptonChrome.css b/css/leptonChrome.css index bfab5b07..4d68707a 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6529,21 +6529,21 @@ } } } - @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports not -moz-bool-pref("userChrome.autohide.bookmarkbar") { - #navigator-toolbox:hover { - --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height)); + @supports -moz-bool-pref("userChrome.autohide.navbar") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.autohide.bookmarkbar") { + #navigator-toolbox:hover { + --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height)); + } } - } - @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { - #navigator-toolbox:hover { - --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height) + var(--uc-bm-height)); + @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { + #navigator-toolbox:hover { + --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height) + var(--uc-bm-height)); + } } } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @supports -moz-bool-pref("userChrome.autohide.navbar") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (max-width: 1100px) { @supports not -moz-bool-pref("userChrome.autohide.bookmarkbar") { #navigator-toolbox:hover { @@ -6570,21 +6570,21 @@ } } @supports -moz-bool-pref("userChrome.autohide.navbar") or -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports not -moz-bool-pref("userChrome.autohide.bookmarkbar") { - #navigator-toolbox:hover { - --uc-toolbar-height: var(--uc-navbar-height); + @supports -moz-bool-pref("userChrome.autohide.navbar") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.autohide.bookmarkbar") { + #navigator-toolbox:hover { + --uc-toolbar-height: var(--uc-navbar-height); + } } - } - @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { - #navigator-toolbox:hover { - --uc-toolbar-height: calc(var(--uc-navbar-height) + var(--uc-bm-height)); + @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { + #navigator-toolbox:hover { + --uc-toolbar-height: calc(var(--uc-navbar-height) + var(--uc-bm-height)); + } } } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @supports -moz-bool-pref("userChrome.autohide.navbar") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (max-width: 1100px) { @supports not -moz-bool-pref("userChrome.autohide.bookmarkbar") { #navigator-toolbox:hover { @@ -6745,21 +6745,21 @@ } } @supports -moz-bool-pref("userChrome.autohide.navbar") or -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { - #nav-bar:not([customizing]) { - margin-bottom: var(--uc-navbar-hide-height); - opacity: 0; - will-change: margin-bottom, opacity; - } + @supports -moz-bool-pref("userChrome.autohide.navbar") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { + #nav-bar:not([customizing]) { + margin-bottom: var(--uc-navbar-hide-height); + opacity: 0; + will-change: margin-bottom, opacity; + } - #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { - margin-bottom: 0; - opacity: 1; + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { + margin-bottom: 0; + opacity: 1; + } } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @supports -moz-bool-pref("userChrome.autohide.navbar") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (max-width: 1100px) { #nav-bar:not([customizing]) { margin-bottom: var(--uc-navbar-hide-height); diff --git a/src/utils/_one_liner.scss b/src/utils/_one_liner.scss index 169d0e97..40ae98d7 100644 --- a/src/utils/_one_liner.scss +++ b/src/utils/_one_liner.scss @@ -47,12 +47,12 @@ } @mixin OneLinerNavbar() { - @include NotOption("userChrome.tabbar.one_liner") { - @content; - } - @include Option("userChrome.tabbar.one_liner") { - @include Option("userChrome.tabbar.one_liner.responsive") { - @include Option("userChrome.autohide.navbar") { + @include Option("userChrome.autohide.navbar") { + @include NotOption("userChrome.tabbar.one_liner") { + @content; + } + @include Option("userChrome.tabbar.one_liner") { + @include Option("userChrome.tabbar.one_liner.responsive") { @media screen and (max-width: 1100px) { @content; } From 434c66285a87b70a2e91b5dc5fcb65e181291847 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 5 Aug 2022 09:03:25 +0900 Subject: [PATCH 55/89] Add: Hidden - Tabbar --- css/leptonChrome.css | 132 +++++++++++++++++++++---- src/autohide/_common.scss | 4 + src/leptonChrome.scss | 3 + src/tabbar/_index.scss | 2 +- src/tabbar/_layout.scss | 2 +- src/tabbar/layout/_window_control.scss | 23 ++++- user.js | 2 + 7 files changed, 146 insertions(+), 22 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 4d68707a..91e0603b 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4335,9 +4335,11 @@ } } /*= Tab Bar - Shared Layout ==================================================*/ -@supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.tabbar.one_liner") { +@supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.tabbar.one_liner") or -moz-bool-pref( + "userChrome.hidden.tabbar" + ) { @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { /*= Windows Control - Move to toolbar ========================================*/ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ @@ -4384,8 +4386,15 @@ height: 32px; } - #toolbar-menubar[inactive] > .titlebar-buttonbox-container { - opacity: 0; + @supports not -moz-bool-pref("userChrome.hidden.tabbar") { + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + opacity: 0; + } + } + @supports -moz-bool-pref("userChrome.hidden.tabbar") { + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + visibility: visible; + } } .titlebar-buttonbox-container > .titlebar-buttonbox { @@ -4415,6 +4424,16 @@ visibility: hidden; } } + @supports -moz-bool-pref("userChrome.hidden.tabbar") { + :root[inFullscreen]:not([macOSNativeFullscreen]) #toolbar-menubar { + visibility: visible !important; + min-height: 0 !important; + max-height: 0 !important; + } + :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { + visibility: collapse !important; + } + } /* At Activated Menubar */ :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) @@ -4423,8 +4442,10 @@ display: block !important; } - :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { - visibility: hidden; + @supports not -moz-bool-pref("userChrome.hidden.tabbar") { + :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { + visibility: hidden; + } } } } @@ -4477,8 +4498,15 @@ height: 32px; } - #toolbar-menubar[inactive] > .titlebar-buttonbox-container { - opacity: 0; + @supports not -moz-bool-pref("userChrome.hidden.tabbar") { + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + opacity: 0; + } + } + @supports -moz-bool-pref("userChrome.hidden.tabbar") { + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + visibility: visible; + } } .titlebar-buttonbox-container > .titlebar-buttonbox { @@ -4508,6 +4536,16 @@ visibility: hidden; } } + @supports -moz-bool-pref("userChrome.hidden.tabbar") { + :root[inFullscreen]:not([macOSNativeFullscreen]) #toolbar-menubar { + visibility: visible !important; + min-height: 0 !important; + max-height: 0 !important; + } + :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { + visibility: collapse !important; + } + } /* At Activated Menubar */ :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) @@ -4516,8 +4554,10 @@ display: block !important; } - :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { - visibility: hidden; + @supports not -moz-bool-pref("userChrome.hidden.tabbar") { + :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { + visibility: hidden; + } } } } @@ -4570,8 +4610,15 @@ height: 32px; } - #toolbar-menubar[inactive] > .titlebar-buttonbox-container { - opacity: 0; + @supports not -moz-bool-pref("userChrome.hidden.tabbar") { + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + opacity: 0; + } + } + @supports -moz-bool-pref("userChrome.hidden.tabbar") { + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + visibility: visible; + } } .titlebar-buttonbox-container > .titlebar-buttonbox { @@ -4601,6 +4648,16 @@ visibility: hidden; } } + @supports -moz-bool-pref("userChrome.hidden.tabbar") { + :root[inFullscreen]:not([macOSNativeFullscreen]) #toolbar-menubar { + visibility: visible !important; + min-height: 0 !important; + max-height: 0 !important; + } + :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { + visibility: collapse !important; + } + } /* At Activated Menubar */ :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) @@ -4609,8 +4666,10 @@ display: block !important; } - :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { - visibility: hidden; + @supports not -moz-bool-pref("userChrome.hidden.tabbar") { + :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { + visibility: hidden; + } } } } @@ -4662,8 +4721,15 @@ height: 32px; } - #toolbar-menubar[inactive] > .titlebar-buttonbox-container { - opacity: 0; + @supports not -moz-bool-pref("userChrome.hidden.tabbar") { + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + opacity: 0; + } + } + @supports -moz-bool-pref("userChrome.hidden.tabbar") { + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + visibility: visible; + } } .titlebar-buttonbox-container > .titlebar-buttonbox { @@ -4693,6 +4759,16 @@ visibility: hidden; } } + @supports -moz-bool-pref("userChrome.hidden.tabbar") { + :root[inFullscreen]:not([macOSNativeFullscreen]) #toolbar-menubar { + visibility: visible !important; + min-height: 0 !important; + max-height: 0 !important; + } + :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { + visibility: collapse !important; + } + } /* At Activated Menubar */ :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) @@ -4701,8 +4777,10 @@ display: block !important; } - :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { - visibility: hidden; + @supports not -moz-bool-pref("userChrome.hidden.tabbar") { + :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { + visibility: hidden; + } } } } @@ -6470,6 +6548,11 @@ /* 20px = 16px + (2px * 2) [margin block] */ --uc-bm-hide-height: calc(-1 * var(--uc-bm-height)); } + @supports -moz-bool-pref("userChrome.hidden.tabbar") { + :root { + --uc-tabbar-height: 0px; + } + } } @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.autohide.navbar") or -moz-bool-pref( "userChrome.autohide.bookmarkbar" @@ -6979,6 +7062,19 @@ } } } +/** Hidden ********************************************************************/ +@supports -moz-bool-pref("userChrome.hidden.tabbar") { + @supports not -moz-bool-pref("userChrome.hidden.tabbar.tabs_only") { + #TabsToolbar { + display: none; + } + } + @supports -moz-bool-pref("userChrome.hidden.tabbar.tabs_only") { + #tabbrowser-tabs { + display: none; + } + } +} /** Library - Icons Replace ***************************************************/ @supports -moz-bool-pref("userChrome.icon.library") { /*= Standard Folder - More Visible ===========================================*/ diff --git a/src/autohide/_common.scss b/src/autohide/_common.scss index ce7b3d92..047cd39e 100644 --- a/src/autohide/_common.scss +++ b/src/autohide/_common.scss @@ -6,6 +6,10 @@ --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-hide-height: calc(-1 * var(--uc-bm-height)); + + @include Option("userChrome.hidden.tabbar") { + --uc-tabbar-height: 0px; + } } } diff --git a/src/leptonChrome.scss b/src/leptonChrome.scss index 9ac881e9..dc2ae085 100644 --- a/src/leptonChrome.scss +++ b/src/leptonChrome.scss @@ -84,6 +84,9 @@ /** Auto Hide *****************************************************************/ @import "autohide/index"; +/** Hidden ********************************************************************/ +@import "hidden/index"; + /** Library - Icons Replace ***************************************************/ @include Option("userChrome.icon.library") { @import "library/chrome"; diff --git a/src/tabbar/_index.scss b/src/tabbar/_index.scss index 0581a97c..7fa84a8d 100644 --- a/src/tabbar/_index.scss +++ b/src/tabbar/_index.scss @@ -31,7 +31,7 @@ } /*= Tab Bar - Shared Layout ==================================================*/ -@include Option("userChrome.tabbar.on_bottom", "userChrome.tabbar.one_liner") { +@include Option("userChrome.tabbar.on_bottom", "userChrome.tabbar.one_liner", "userChrome.hidden.tabbar") { @import "layout"; } diff --git a/src/tabbar/_layout.scss b/src/tabbar/_layout.scss index 13b4c7e3..99a8b8f8 100644 --- a/src/tabbar/_layout.scss +++ b/src/tabbar/_layout.scss @@ -1,5 +1,5 @@ @include NotOption("userChrome.tabbar.one_liner") { - @include Option("userChrome.tabbar.on_bottom") { + @include Option("userChrome.tabbar.on_bottom", "userChrome.hidden.tabbar") { @import "layout/window_control"; } } diff --git a/src/tabbar/layout/_window_control.scss b/src/tabbar/layout/_window_control.scss index f6d813a9..c0d4b917 100644 --- a/src/tabbar/layout/_window_control.scss +++ b/src/tabbar/layout/_window_control.scss @@ -41,7 +41,12 @@ See the above repository for updates as well as full license text. */ } #toolbar-menubar[inactive] > .titlebar-buttonbox-container { - opacity: 0; + @include NotOption("userChrome.hidden.tabbar") { + opacity: 0; + } + @include Option("userChrome.hidden.tabbar") { + visibility: visible; + } } .titlebar-buttonbox-container > .titlebar-buttonbox { @@ -68,11 +73,25 @@ See the above repository for updates as well as full license text. */ visibility: hidden; } } +@include Option("userChrome.hidden.tabbar") { + :root[inFullscreen]:not([macOSNativeFullscreen]) { + #toolbar-menubar { + visibility: visible !important; + min-height: 0 !important; + max-height: 0 !important; + } + #menubar-items { + visibility: collapse !important; + } + } +} /* At Activated Menubar */ :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container { display: block !important; } :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { - visibility: hidden; + @include NotOption("userChrome.hidden.tabbar") { + visibility: hidden; + } } diff --git a/user.js b/user.js index f6ea755c..4b64e03a 100644 --- a/user.js +++ b/user.js @@ -85,6 +85,8 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.autohide.page_action", true); // user_pref("userChrome.autohide.toolbar_overlap", true); +// user_pref("userChrome.hidden.tabbar", true); + // user_pref("userChrome.rounding.square_button", true); // user_pref("userChrome.rounding.square_panel", true); // user_pref("userChrome.rounding.square_panelitem", true); From b41e3c62ad812ba73ae6fc4d9eb01cf274855e14 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 5 Aug 2022 09:03:49 +0900 Subject: [PATCH 56/89] Add: Hidden - Navbar --- css/leptonChrome.css | 198 ++++++++++++++++++++++--- src/autohide/_common.scss | 3 + src/hidden/_index.scss | 13 ++ src/tabbar/layout/_window_control.scss | 24 +++ src/utils/_one_liner.scss | 22 ++- user.js | 1 + 6 files changed, 235 insertions(+), 26 deletions(-) create mode 100644 src/hidden/_index.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 91e0603b..f5d91f19 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4389,14 +4389,45 @@ @supports not -moz-bool-pref("userChrome.hidden.tabbar") { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { opacity: 0; + visibility: collapse; } } @supports -moz-bool-pref("userChrome.hidden.tabbar") { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + opacity: 1; visibility: visible; } + @supports -moz-bool-pref("userChrome.autohide.navbar") { + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + opacity: 0; + visibility: collapse; + } + } } + @supports -moz-bool-pref("userChrome.hidden.tabbar") { + @supports -moz-bool-pref("userChrome.autohide.navbar") { + #navigator-toolbox:is(:hover, :focus-within) + #toolbar-menubar[inactive]:not([customizing]) + > .titlebar-buttonbox-container { + opacity: 1; + visibility: visible; + } + } + } + + @media (prefers-reduced-motion: no-preference) { + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay, 600ms), + visibility 100ms var(--animation-easing-function) 0.25s !important; + } + + #navigator-toolbox:is(:hover, :focus-within) + #toolbar-menubar[inactive]:not([customizing]) + > .titlebar-buttonbox-container { + transition-delay: 0s !important; + } + } .titlebar-buttonbox-container > .titlebar-buttonbox { height: 100%; } @@ -4501,14 +4532,45 @@ @supports not -moz-bool-pref("userChrome.hidden.tabbar") { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { opacity: 0; + visibility: collapse; } } @supports -moz-bool-pref("userChrome.hidden.tabbar") { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + opacity: 1; visibility: visible; } + @supports -moz-bool-pref("userChrome.autohide.navbar") { + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + opacity: 0; + visibility: collapse; + } + } } + @supports -moz-bool-pref("userChrome.hidden.tabbar") { + @supports -moz-bool-pref("userChrome.autohide.navbar") { + #navigator-toolbox:is(:hover, :focus-within) + #toolbar-menubar[inactive]:not([customizing]) + > .titlebar-buttonbox-container { + opacity: 1; + visibility: visible; + } + } + } + + @media (prefers-reduced-motion: no-preference) { + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay, 600ms), + visibility 100ms var(--animation-easing-function) 0.25s !important; + } + + #navigator-toolbox:is(:hover, :focus-within) + #toolbar-menubar[inactive]:not([customizing]) + > .titlebar-buttonbox-container { + transition-delay: 0s !important; + } + } .titlebar-buttonbox-container > .titlebar-buttonbox { height: 100%; } @@ -4613,14 +4675,50 @@ @supports not -moz-bool-pref("userChrome.hidden.tabbar") { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { opacity: 0; + visibility: collapse; } } @supports -moz-bool-pref("userChrome.hidden.tabbar") { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + opacity: 1; visibility: visible; } + @supports -moz-bool-pref("userChrome.autohide.navbar") { + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + opacity: 0; + visibility: collapse; + } + } + } + + @supports -moz-bool-pref("userChrome.hidden.tabbar") { + @supports -moz-bool-pref("userChrome.autohide.navbar") { + #navigator-toolbox:is(:hover, :focus-within) + #toolbar-menubar[inactive]:not([customizing]) + > .titlebar-buttonbox-container { + opacity: 1; + visibility: visible; + } + } } + /* At Full Screen */ + + /* At Activated Menubar */ + } + @media screen and (max-width: 1100px) and (prefers-reduced-motion: no-preference) { + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay, 600ms), + visibility 100ms var(--animation-easing-function) 0.25s !important; + } + + #navigator-toolbox:is(:hover, :focus-within) + #toolbar-menubar[inactive]:not([customizing]) + > .titlebar-buttonbox-container { + transition-delay: 0s !important; + } + } + @media screen and (max-width: 1100px) { .titlebar-buttonbox-container > .titlebar-buttonbox { height: 100%; } @@ -4629,8 +4727,8 @@ margin-block: 10px; } } - - /* At Full Screen */ + } + @media screen and (max-width: 1100px) { :root[sizemode="fullscreen"] #window-controls { position: fixed; display: flex; @@ -4638,16 +4736,20 @@ right: 0; height: 40px; } - + } + @media screen and (max-width: 1100px) { :root[uidensity="compact"][sizemode="fullscreen"] #window-controls { height: 32px; } - + } + @media screen and (max-width: 1100px) { @supports -moz-bool-pref("browser.fullscreen.autohide") { :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { visibility: hidden; } } + } + @media screen and (max-width: 1100px) { @supports -moz-bool-pref("userChrome.hidden.tabbar") { :root[inFullscreen]:not([macOSNativeFullscreen]) #toolbar-menubar { visibility: visible !important; @@ -4658,14 +4760,16 @@ visibility: collapse !important; } } - /* At Activated Menubar */ + } + @media screen and (max-width: 1100px) { :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container { display: block !important; } - + } + @media screen and (max-width: 1100px) { @supports not -moz-bool-pref("userChrome.hidden.tabbar") { :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { visibility: hidden; @@ -4724,14 +4828,50 @@ @supports not -moz-bool-pref("userChrome.hidden.tabbar") { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { opacity: 0; + visibility: collapse; } } @supports -moz-bool-pref("userChrome.hidden.tabbar") { #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + opacity: 1; visibility: visible; } + @supports -moz-bool-pref("userChrome.autohide.navbar") { + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + opacity: 0; + visibility: collapse; + } + } + } + + @supports -moz-bool-pref("userChrome.hidden.tabbar") { + @supports -moz-bool-pref("userChrome.autohide.navbar") { + #navigator-toolbox:is(:hover, :focus-within) + #toolbar-menubar[inactive]:not([customizing]) + > .titlebar-buttonbox-container { + opacity: 1; + visibility: visible; + } + } + } + + /* At Full Screen */ + + /* At Activated Menubar */ + } + @media screen and (min-width: 1100px) and (prefers-reduced-motion: no-preference) { + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay, 600ms), + visibility 100ms var(--animation-easing-function) 0.25s !important; } + #navigator-toolbox:is(:hover, :focus-within) + #toolbar-menubar[inactive]:not([customizing]) + > .titlebar-buttonbox-container { + transition-delay: 0s !important; + } + } + @media screen and (min-width: 1100px) { .titlebar-buttonbox-container > .titlebar-buttonbox { height: 100%; } @@ -4740,8 +4880,8 @@ margin-block: 10px; } } - - /* At Full Screen */ + } + @media screen and (min-width: 1100px) { :root[sizemode="fullscreen"] #window-controls { position: fixed; display: flex; @@ -4749,16 +4889,20 @@ right: 0; height: 40px; } - + } + @media screen and (min-width: 1100px) { :root[uidensity="compact"][sizemode="fullscreen"] #window-controls { height: 32px; } - + } + @media screen and (min-width: 1100px) { @supports -moz-bool-pref("browser.fullscreen.autohide") { :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { visibility: hidden; } } + } + @media screen and (min-width: 1100px) { @supports -moz-bool-pref("userChrome.hidden.tabbar") { :root[inFullscreen]:not([macOSNativeFullscreen]) #toolbar-menubar { visibility: visible !important; @@ -4769,14 +4913,16 @@ visibility: collapse !important; } } - /* At Activated Menubar */ + } + @media screen and (min-width: 1100px) { :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container { display: block !important; } - + } + @media screen and (min-width: 1100px) { @supports not -moz-bool-pref("userChrome.hidden.tabbar") { :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { visibility: hidden; @@ -6553,6 +6699,11 @@ --uc-tabbar-height: 0px; } } + @supports -moz-bool-pref("userChrome.hidden.navbar") { + :root { + --uc-navbar-height: 0px; + } + } } @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.autohide.navbar") or -moz-bool-pref( "userChrome.autohide.bookmarkbar" @@ -7064,14 +7215,25 @@ } /** Hidden ********************************************************************/ @supports -moz-bool-pref("userChrome.hidden.tabbar") { - @supports not -moz-bool-pref("userChrome.hidden.tabbar.tabs_only") { - #TabsToolbar { - display: none; + #TabsToolbar { + display: none !important; + } +} +@supports -moz-bool-pref("userChrome.hidden.navbar") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { + #nav-bar { + visibility: collapse; + /* display: none is not work */ } } - @supports -moz-bool-pref("userChrome.hidden.tabbar.tabs_only") { - #tabbrowser-tabs { - display: none; + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (max-width: 1100px) { + #nav-bar { + visibility: collapse; + /* display: none is not work */ + } + } } } } diff --git a/src/autohide/_common.scss b/src/autohide/_common.scss index 047cd39e..3ddf4ad5 100644 --- a/src/autohide/_common.scss +++ b/src/autohide/_common.scss @@ -10,6 +10,9 @@ @include Option("userChrome.hidden.tabbar") { --uc-tabbar-height: 0px; } + @include Option("userChrome.hidden.navbar") { + --uc-navbar-height: 0px; + } } } diff --git a/src/hidden/_index.scss b/src/hidden/_index.scss new file mode 100644 index 00000000..68e405b2 --- /dev/null +++ b/src/hidden/_index.scss @@ -0,0 +1,13 @@ +@include Option("userChrome.hidden.tabbar") { + #TabsToolbar { + display: none !important; + } +} + +@include Option("userChrome.hidden.navbar") { + @include OneLinerNabarContent() { + #nav-bar { + visibility: collapse; /* display: none is not work */ + } + } +} diff --git a/src/tabbar/layout/_window_control.scss b/src/tabbar/layout/_window_control.scss index c0d4b917..eef3fc90 100644 --- a/src/tabbar/layout/_window_control.scss +++ b/src/tabbar/layout/_window_control.scss @@ -43,9 +43,33 @@ See the above repository for updates as well as full license text. */ #toolbar-menubar[inactive] > .titlebar-buttonbox-container { @include NotOption("userChrome.hidden.tabbar") { opacity: 0; + visibility: collapse; } @include Option("userChrome.hidden.tabbar") { + opacity: 1; visibility: visible; + + @include Option("userChrome.autohide.navbar") { + opacity: 0; + visibility: collapse; + } + } +} +#navigator-toolbox:is(:hover, :focus-within) #toolbar-menubar[inactive]:not([customizing]) > .titlebar-buttonbox-container { + @include Option("userChrome.hidden.tabbar") { + @include Option("userChrome.autohide.navbar") { + opacity: 1; + visibility: visible; + } + } +} +@include Animate { + #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay, 600ms), + visibility 100ms var(--animation-easing-function) 0.25s !important; + } + #navigator-toolbox:is(:hover, :focus-within) #toolbar-menubar[inactive]:not([customizing]) > .titlebar-buttonbox-container { + transition-delay: 0s !important; } } diff --git a/src/utils/_one_liner.scss b/src/utils/_one_liner.scss index 40ae98d7..92753219 100644 --- a/src/utils/_one_liner.scss +++ b/src/utils/_one_liner.scss @@ -46,17 +46,23 @@ } } +@mixin OneLinerNabarContent() { + @include NotOption("userChrome.tabbar.one_liner") { + @content; + } + @include Option("userChrome.tabbar.one_liner") { + @include Option("userChrome.tabbar.one_liner.responsive") { + @media screen and (max-width: 1100px) { + @content; + } + } + } +} + @mixin OneLinerNavbar() { @include Option("userChrome.autohide.navbar") { - @include NotOption("userChrome.tabbar.one_liner") { + @include OneLinerNabarContent() { @content; } - @include Option("userChrome.tabbar.one_liner") { - @include Option("userChrome.tabbar.one_liner.responsive") { - @media screen and (max-width: 1100px) { - @content; - } - } - } } } diff --git a/user.js b/user.js index 4b64e03a..ec7cd166 100644 --- a/user.js +++ b/user.js @@ -86,6 +86,7 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.autohide.toolbar_overlap", true); // user_pref("userChrome.hidden.tabbar", true); +// user_pref("userChrome.hidden.navbar", true); // user_pref("userChrome.rounding.square_button", true); // user_pref("userChrome.rounding.square_panel", true); From b41bad17c4e8321c09d40c89555362ef96e96e3a Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 5 Aug 2022 13:01:53 +0900 Subject: [PATCH 57/89] Add: Hidden - selected tab, disabled menu --- css/leptonChrome.css | 20 ++++++++++++++++++++ src/hidden/_index.scss | 26 ++++++++++++++++++++++++++ user.js | 2 ++ 3 files changed, 48 insertions(+) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index f5d91f19..9c21a915 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -7237,6 +7237,26 @@ } } } +@supports -moz-bool-pref("userChrome.hidden.selected_tab") { + .tabbrowser-tab[selected="true"] { + -moz-box-flex: 0 !important; + min-width: 0 !important; + max-width: 0 !important; + } +} +@supports -moz-bool-pref("userChrome.hidden.disabled_menu") { + menu[disabled="true"], + menuitem:not(#context-back, #context-forward)[disabled="true"] { + display: none !important; + } + + @supports -moz-bool-pref("widget.macos.native-context-menus") or -moz-bool-pref("widget.gtk.native-context-menus") { + #context-back[disabled="true"], + #context-forward[disabled="true"] { + display: none !important; + } + } +} /** Library - Icons Replace ***************************************************/ @supports -moz-bool-pref("userChrome.icon.library") { /*= Standard Folder - More Visible ===========================================*/ diff --git a/src/hidden/_index.scss b/src/hidden/_index.scss index 68e405b2..07cb5fac 100644 --- a/src/hidden/_index.scss +++ b/src/hidden/_index.scss @@ -11,3 +11,29 @@ } } } + +@include Option("userChrome.hidden.selected_tab") { + .tabbrowser-tab[selected="true"] { + -moz-box-flex: 0 !important; + min-width: 0 !important; + max-width: 0 !important; + } +} + +@include Option("userChrome.hidden.disabled_menu") { + menu, + menuitem:not(#context-back, #context-forward) { + &[disabled="true"] { + display: none !important; + } + } + + @include NativeMenu { + #context-back, + #context-forward { + &[disabled="true"] { + display: none !important; + } + } + } +} diff --git a/user.js b/user.js index ec7cd166..7476ef8a 100644 --- a/user.js +++ b/user.js @@ -87,6 +87,8 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.hidden.tabbar", true); // user_pref("userChrome.hidden.navbar", true); +// user_pref("userChrome.hidden.selected_tab", true); +// user_pref("userChrome.hidden.disabled_menu", true); // user_pref("userChrome.rounding.square_button", true); // user_pref("userChrome.rounding.square_panel", true); From b59c541a959bdb661b47339d8dfb225a7e41295d Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 5 Aug 2022 17:43:51 +0900 Subject: [PATCH 58/89] Add: Hidden - Urlbar iconbox --- css/leptonChrome.css | 25 +++++++++++++++++++++++++ src/hidden/_index.scss | 16 ++++++++++++++++ user.js | 1 + 3 files changed, 42 insertions(+) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 9c21a915..127adce3 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -7237,6 +7237,31 @@ } } } +@supports -moz-bool-pref("userChrome.hidden.urlbar_iconbox") { + #identity-box[pageproxystate="valid"] + #identity-box[pageproxystate="valid"] + #identity-box[pageproxystate="valid"] + .notSecureText + #identity-icon-label, + #identity-box[pageproxystate="valid"] + #identity-box[pageproxystate="valid"] + #identity-box[pageproxystate="valid"] + .chromeUI + #identity-icon-box, + #identity-box[pageproxystate="valid"] + #identity-box[pageproxystate="valid"] + #identity-box[pageproxystate="valid"].extensionPage + #identity-icon-box { + display: none; + } + #identity-box[pageproxystate="valid"] + #identity-box[pageproxystate="valid"] + #identity-box[pageproxystate="valid"].notSecureText + #identity-icon-box { + padding-inline-end: 5px; + /* Original: 8px */ + } +} @supports -moz-bool-pref("userChrome.hidden.selected_tab") { .tabbrowser-tab[selected="true"] { -moz-box-flex: 0 !important; diff --git a/src/hidden/_index.scss b/src/hidden/_index.scss index 07cb5fac..a9bef35a 100644 --- a/src/hidden/_index.scss +++ b/src/hidden/_index.scss @@ -12,6 +12,22 @@ } } +@include Option("userChrome.hidden.urlbar_iconbox") { + #identity-box[pageproxystate="valid"] + #identity-box[pageproxystate="valid"] + #identity-box[pageproxystate="valid"] { + .notSecureText #identity-icon-label, + .chromeUI #identity-icon-box, + &.extensionPage #identity-icon-box { + display: none; + } + + &.notSecureText #identity-icon-box { + padding-inline-end: 5px; /* Original: 8px */ + } + } +} + @include Option("userChrome.hidden.selected_tab") { .tabbrowser-tab[selected="true"] { -moz-box-flex: 0 !important; diff --git a/user.js b/user.js index 7476ef8a..7409dcca 100644 --- a/user.js +++ b/user.js @@ -87,6 +87,7 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.hidden.tabbar", true); // user_pref("userChrome.hidden.navbar", true); +// user_pref("userChrome.hidden.urlbar_iconbox", true); // user_pref("userChrome.hidden.selected_tab", true); // user_pref("userChrome.hidden.disabled_menu", true); From 09d3f461ead600ec6fb7cf40acf2d69242be7f20 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 6 Aug 2022 17:15:36 +0900 Subject: [PATCH 59/89] Fix: Hidden - `userChrome.sidebar.hidden_header` -> `userChrome.hidden.sidebar_header` --- css/leptonChrome.css | 26 +++++++++++++------------- src/hidden/_index.scss | 18 ++++++++++++++++++ src/sidebar/_hidden.scss | 15 --------------- src/sidebar/_index.scss | 4 ---- user.js | 4 ++-- 5 files changed, 33 insertions(+), 34 deletions(-) delete mode 100644 src/sidebar/_hidden.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 127adce3..297a1d66 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6515,19 +6515,6 @@ } } } -@supports -moz-bool-pref("userChrome.sidebar.hidden_header") { - @supports not -moz-bool-pref("userChrome.sidebar.hidden_header.vertical_tab_only") { - #sidebar-header { - display: none !important; - } - } - @supports -moz-bool-pref("userChrome.sidebar.hidden_header.vertical_tab_only") { - #sidebar-box:is([sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"], [sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"], [sidebarcommand="sidebartabs_asamuzak_jp-sidebar-action"]) - #sidebar-header { - display: none !important; - } - } -} /** Other UI ******************************************************************/ /*= Bookmark Bar - Centered ==================================================*/ @supports -moz-bool-pref("userChrome.bookmarkbar.centered") { @@ -7237,6 +7224,19 @@ } } } +@supports -moz-bool-pref("userChrome.hidden.sidebar_header") { + @supports not -moz-bool-pref("userChrome.hidden.sidebar_header.vertical_tab_only") { + #sidebar-header { + display: none !important; + } + } + @supports -moz-bool-pref("userChrome.hidden.sidebar_header.vertical_tab_only") { + #sidebar-box:is([sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"], [sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"], [sidebarcommand="sidebartabs_asamuzak_jp-sidebar-action"]) + #sidebar-header { + display: none !important; + } + } +} @supports -moz-bool-pref("userChrome.hidden.urlbar_iconbox") { #identity-box[pageproxystate="valid"] #identity-box[pageproxystate="valid"] diff --git a/src/hidden/_index.scss b/src/hidden/_index.scss index a9bef35a..8cf48308 100644 --- a/src/hidden/_index.scss +++ b/src/hidden/_index.scss @@ -12,6 +12,24 @@ } } +@include Option("userChrome.hidden.sidebar_header") { + @include NotOption("userChrome.hidden.sidebar_header.vertical_tab_only") { + #sidebar-header { + display: none !important; + } + } + + @include Option("userChrome.hidden.sidebar_header.vertical_tab_only") { + #sidebar-box:is( + [sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"], + [sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"], + [sidebarcommand="sidebartabs_asamuzak_jp-sidebar-action"] + ) #sidebar-header { + display: none !important; + } + } +} + @include Option("userChrome.hidden.urlbar_iconbox") { #identity-box[pageproxystate="valid"] #identity-box[pageproxystate="valid"] diff --git a/src/sidebar/_hidden.scss b/src/sidebar/_hidden.scss deleted file mode 100644 index be69a27c..00000000 --- a/src/sidebar/_hidden.scss +++ /dev/null @@ -1,15 +0,0 @@ -@include NotOption("userChrome.sidebar.hidden_header.vertical_tab_only") { - #sidebar-header { - display: none !important; - } -} - -@include Option("userChrome.sidebar.hidden_header.vertical_tab_only") { - #sidebar-box:is( - [sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"], - [sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"], - [sidebarcommand="sidebartabs_asamuzak_jp-sidebar-action"] - ) #sidebar-header { - display: none !important; - } -} diff --git a/src/sidebar/_index.scss b/src/sidebar/_index.scss index 27c61d00..adf19ab6 100644 --- a/src/sidebar/_index.scss +++ b/src/sidebar/_index.scss @@ -1,5 +1 @@ @import "overlap"; - -@include Option("userChrome.sidebar.hidden_header") { - @import "hidden"; -} diff --git a/user.js b/user.js index 7409dcca..31c0823d 100644 --- a/user.js +++ b/user.js @@ -87,6 +87,8 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.hidden.tabbar", true); // user_pref("userChrome.hidden.navbar", true); +// user_pref("userChrome.hidden.sidebar_header", true); +// user_pref("userChrome.hidden.sidebar_header.vertical_tab_only", true); // user_pref("userChrome.hidden.urlbar_iconbox", true); // user_pref("userChrome.hidden.selected_tab", true); // user_pref("userChrome.hidden.disabled_menu", true); @@ -137,8 +139,6 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.panel.full_width_separator", true); // user_pref("userChrome.panel.full_width_padding", true); -// user_pref("userChrome.sidebar.hidden_header", true); -// user_pref("userChrome.sidebar.hidden_header.vertical_tab_only", true); // user_pref("userChrome.sidebar.overlap", true); // user_pref("userChrome.icon.account_image_to_right", true); From c103e2020d51d60d18e540893701dc0e0034c243 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 6 Aug 2022 21:47:45 +0900 Subject: [PATCH 60/89] Fix: Icons - Sidebar Tabs --- css/leptonChrome.css | 14 ++++++++++++-- src/icons/context_menu/_tab_toolbar.scss | 21 +++++++++++++++++++-- 2 files changed, 31 insertions(+), 4 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 297a1d66..cd326714 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -8443,8 +8443,11 @@ #context_reloadTab, #context_reloadSelectedTabs, #treestyletab_piro_sakura_ne_jp-menuitem-_context_reloadTab, + #treestyletab_piro_sakura_ne_jp-menuitem-_noContextTab\:context_reloadTab, + #treestyletab_piro_sakura_ne_jp-menuitem-_grouped\:reloadTree, #tabcenter-reborn_ariasuni-menuitem-_contextMenuReloadTab, - #sidebartabs_asamuzak_jp-menuitem-_reloadTab { + #sidebartabs_asamuzak_jp-menuitem-_reloadTab, + #sidebartabs_asamuzak_jp-menuitem-_reloadAllTabs { --menuitem-image: url("../icons/reload.svg"); } @@ -8491,7 +8494,10 @@ #context_bookmarkTab, #context_bookmarkSelectedTabs, #treestyletab_piro_sakura_ne_jp-menuitem-_context_bookmarkTab, - #sidebartabs_asamuzak_jp-menuitem-_bookmarkTab { + #treestyletab_piro_sakura_ne_jp-menuitem-_noContextTab\:context_bookmarkSelected, + #treestyletab_piro_sakura_ne_jp-menuitem-_grouped\:bookmarkTree, + #sidebartabs_asamuzak_jp-menuitem-_bookmarkTab, + #sidebartabs_asamuzak_jp-menuitem-_bookmarkAllTabs { --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } @@ -8522,18 +8528,21 @@ #context_reopenInContainer, #treestyletab_piro_sakura_ne_jp-menuitem-_context_reopenInContainer, #tabcenter-reborn_ariasuni-menuitem-_contextMenuOpenInContextualTab, + #sidebartabs_asamuzak_jp-menuitem-_openNewTabInContainer, #sidebartabs_asamuzak_jp-menuitem-_reopenTabInContainer { --menuitem-image: url("../icons/container-openin-16.svg"); } #context_selectAllTabs, #treestyletab_piro_sakura_ne_jp-menuitem-_context_selectAllTabs, + #treestyletab_piro_sakura_ne_jp-menuitem-_noContextTab\:context_selectAllTabs, #sidebartabs_asamuzak_jp-menuitem-_selectAllTabs { --menuitem-image: url("../icons/tab-multiple.svg"); } #context_closeTab, #treestyletab_piro_sakura_ne_jp-menuitem-_context_closeTab, + #treestyletab_piro_sakura_ne_jp-menuitem-_grouped\:closeTree, #tabcenter-reborn_ariasuni-menuitem-_contextMenuCloseTab, #sidebartabs_asamuzak_jp-menuitem-_closeTab { --menuitem-image: url("chrome://global/skin/icons/close.svg"); @@ -8541,6 +8550,7 @@ #context_undoCloseTab, #treestyletab_piro_sakura_ne_jp-menuitem-_context_undoCloseTab, + #treestyletab_piro_sakura_ne_jp-menuitem-_noContextTab\:context_undoCloseTab, #tabcenter-reborn_ariasuni-menuitem-_contextMenuUndoCloseTab, #sidebartabs_asamuzak_jp-menuitem-_undoCloseTab { --menuitem-image: url("../icons/undo.svg"); diff --git a/src/icons/context_menu/_tab_toolbar.scss b/src/icons/context_menu/_tab_toolbar.scss index 08beab95..2a38cb34 100644 --- a/src/icons/context_menu/_tab_toolbar.scss +++ b/src/icons/context_menu/_tab_toolbar.scss @@ -15,8 +15,11 @@ #context_reloadTab, #context_reloadSelectedTabs, #treestyletab_piro_sakura_ne_jp-menuitem-_context_reloadTab, +#treestyletab_piro_sakura_ne_jp-menuitem-_noContextTab\:context_reloadTab, +#treestyletab_piro_sakura_ne_jp-menuitem-_grouped\:reloadTree, #tabcenter-reborn_ariasuni-menuitem-_contextMenuReloadTab, -#sidebartabs_asamuzak_jp-menuitem-_reloadTab { +#sidebartabs_asamuzak_jp-menuitem-_reloadTab, +#sidebartabs_asamuzak_jp-menuitem-_reloadAllTabs { --menuitem-image: url("../icons/reload.svg"); } #context_toggleMuteTab, @@ -60,7 +63,10 @@ #context_bookmarkTab, #context_bookmarkSelectedTabs, #treestyletab_piro_sakura_ne_jp-menuitem-_context_bookmarkTab, -#sidebartabs_asamuzak_jp-menuitem-_bookmarkTab { +#treestyletab_piro_sakura_ne_jp-menuitem-_noContextTab\:context_bookmarkSelected, +#treestyletab_piro_sakura_ne_jp-menuitem-_grouped\:bookmarkTree, +#sidebartabs_asamuzak_jp-menuitem-_bookmarkTab, +#sidebartabs_asamuzak_jp-menuitem-_bookmarkAllTabs { --menuitem-image: url("chrome://browser/skin/bookmark.svg"); } #context_moveTabOptions, @@ -90,6 +96,7 @@ #context_reopenInContainer, #treestyletab_piro_sakura_ne_jp-menuitem-_context_reopenInContainer, #tabcenter-reborn_ariasuni-menuitem-_contextMenuOpenInContextualTab, +#sidebartabs_asamuzak_jp-menuitem-_openNewTabInContainer, #sidebartabs_asamuzak_jp-menuitem-_reopenTabInContainer { --menuitem-image: url("../icons/container-openin-16.svg"); } @@ -97,6 +104,7 @@ } #context_selectAllTabs, #treestyletab_piro_sakura_ne_jp-menuitem-_context_selectAllTabs, +#treestyletab_piro_sakura_ne_jp-menuitem-_noContextTab\:context_selectAllTabs, #sidebartabs_asamuzak_jp-menuitem-_selectAllTabs { --menuitem-image: url("../icons/tab-multiple.svg"); } @@ -106,6 +114,7 @@ #context_closeTab, #treestyletab_piro_sakura_ne_jp-menuitem-_context_closeTab, +#treestyletab_piro_sakura_ne_jp-menuitem-_grouped\:closeTree, #tabcenter-reborn_ariasuni-menuitem-_contextMenuCloseTab, #sidebartabs_asamuzak_jp-menuitem-_closeTab { --menuitem-image: url("chrome://global/skin/icons/close.svg"); @@ -117,11 +126,19 @@ } #context_undoCloseTab, #treestyletab_piro_sakura_ne_jp-menuitem-_context_undoCloseTab, +#treestyletab_piro_sakura_ne_jp-menuitem-_noContextTab\:context_undoCloseTab, #tabcenter-reborn_ariasuni-menuitem-_contextMenuUndoCloseTab, #sidebartabs_asamuzak_jp-menuitem-_undoCloseTab { --menuitem-image: url("../icons/undo.svg"); } +#treestyletab_piro_sakura_ne_jp-menuitem-_grouped\:collapseTreeRecursively, +#treestyletab_piro_sakura_ne_jp-menuitem-_grouped\:collapseAll, +#treestyletab_piro_sakura_ne_jp-menuitem-_grouped\:expandTreeRecursively { +} +#treestyletab_piro_sakura_ne_jp-menuitem-_grouped\:expandAll { +} + /*= new-tab-button-popup =====================================================*/ #new-tab-button-popup > menuitem[command="Browser:NewUserContextTab"], .new-tab-popup > menuitem[command="Browser:NewUserContextTab"] { From 972b8892b86fc11745ebce539ac831c0676a687b Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 8 Aug 2022 01:52:25 +0900 Subject: [PATCH 61/89] Fix: Sidebar - Contextmenu position transform -> padding-inline-start --- css/leptonChrome.css | 53 ++++++++++++++---------------- src/autohide/sidebar/_overlap.scss | 29 ++++------------ src/sidebar/_overlap.scss | 26 ++++++++++----- 3 files changed, 48 insertions(+), 60 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index d3d826ec..52be5879 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6496,6 +6496,10 @@ box-shadow: -1px 0px 15px -10px var(--uc-sidebar-shadow-color); } + #sidebar { + display: block; + } + #sidebar-splitter { display: none !important; } @@ -6505,22 +6509,30 @@ direction: rtl; } + #sidebar-header { + background-color: var(--sidebar-background-color) !important; + color: var(--sidebar-text-color) !important; + overflow: hidden; + } + @supports not -moz-bool-pref("userChrome.autohide.sidebar") { - #sidebar-box { + #sidebar-box, + #sidebar { min-width: var(--uc-sidebar-activate-width) !important; max-width: var(--uc-sidebar-activate-width) !important; + } + + #sidebar-box { margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important; - will-change: transform; + will-change: padding-inline; } #sidebar-box:not([hidden="true"]) { - transform: translateX(var(--uc-sidebar-activate-width)); - } - #sidebar-box[positionend="true"]:not([hidden="true"]) { - transform: translateX(var(--uc-sidebar-activate-width-reverse)); + padding-inline-start: var(--uc-sidebar-activate-width); } @media (prefers-reduced-motion: no-preference) { #sidebar-box { - transition: transform 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, visibility 0s linear !important; + transition: padding-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, + visibility 0s linear !important; } } } @@ -7102,12 +7114,6 @@ } @supports -moz-bool-pref("userChrome.sidebar.overlap") { - #sidebar-header { - background-color: var(--sidebar-background-color) !important; - color: var(--sidebar-text-color) !important; - overflow: hidden; - } - #sidebar { min-width: var(--uc-sidebar-width) !important; max-width: var(--uc-sidebar-width) !important; @@ -7120,23 +7126,12 @@ } :root[inFullscreen="true"] #sidebar-box { - will-change: transform; - } - :root[inFullscreen="true"] #sidebar-box:not([positionend="true"]) { margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important; - transform: translateX(var(--uc-sidebar-fullscreen-width)) !important; + padding-inline-start: var(--uc-sidebar-fullscreen-width); + will-change: padding-inline-start; } - :root[inFullscreen="true"] #sidebar-box:not([positionend="true"]):hover { - transform: translateX(var(--uc-sidebar-activate-width)) !important; - } - :root[inFullscreen="true"] #sidebar-box[positionend="true"] { - margin-inline-end: var(--uc-sidebar-activate-width-reverse) !important; - transform: translateX( - calc(var(--uc-sidebar-activate-width) + -1 * var(--uc-sidebar-fullscreen-width)) - ) !important; - } - :root[inFullscreen="true"] #sidebar-box[positionend="true"]:hover { - transform: translateX(0) !important; + :root[inFullscreen="true"] #sidebar-box:hover { + padding-inline-start: var(--uc-sidebar-activate-width); } :root[inFullscreen="true"] #sidebar-box #sidebar-header, :root[inFullscreen="true"] #sidebar-box #sidebar { @@ -7155,7 +7150,7 @@ } :root[inFullscreen="true"] #sidebar-box { - transition: transform 1s var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; + transition: padding-inline-start 1s var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; } :root[inFullscreen="true"] #sidebar-box:hover { transition-delay: 0ms !important; diff --git a/src/autohide/sidebar/_overlap.scss b/src/autohide/sidebar/_overlap.scss index cad04cc6..0fa9c28c 100644 --- a/src/autohide/sidebar/_overlap.scss +++ b/src/autohide/sidebar/_overlap.scss @@ -1,9 +1,3 @@ -#sidebar-header { - background-color: var(--sidebar-background-color) !important; - color: var(--sidebar-text-color) !important; - overflow: hidden; -} - #sidebar { min-width: var(--uc-sidebar-width) !important; max-width: var(--uc-sidebar-width) !important; @@ -17,23 +11,12 @@ } :root[inFullscreen="true"] #sidebar-box { - will-change: transform; - - &:not([positionend="true"]) { - margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important; - transform: translateX(var(--uc-sidebar-fullscreen-width)) !important; + margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important; + padding-inline-start: var(--uc-sidebar-fullscreen-width); + will-change: padding-inline-start; - &:hover { - transform: translateX(var(--uc-sidebar-activate-width)) !important; - } - } - &[positionend="true"] { - margin-inline-end: var(--uc-sidebar-activate-width-reverse) !important; - transform: translateX(calc(var(--uc-sidebar-activate-width) + (-1 * var(--uc-sidebar-fullscreen-width)))) !important; - - &:hover { - transform: translateX(0) !important; - } + &:hover { + padding-inline-start: var(--uc-sidebar-activate-width); } #sidebar-header, @@ -55,7 +38,7 @@ } :root[inFullscreen="true"] #sidebar-box { - transition: transform 1s var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; + transition: padding-inline-start 1s var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; &:hover { transition-delay: 0ms !important; diff --git a/src/sidebar/_overlap.scss b/src/sidebar/_overlap.scss index 1cd575f6..f877334e 100644 --- a/src/sidebar/_overlap.scss +++ b/src/sidebar/_overlap.scss @@ -22,6 +22,10 @@ } } + #sidebar { + display: block; + } + #sidebar-splitter { display: none !important; } @@ -32,23 +36,29 @@ direction: rtl; } + #sidebar-header { + background-color: var(--sidebar-background-color) !important; + color: var(--sidebar-text-color) !important; + overflow: hidden; + } + @include NotOption("userChrome.autohide.sidebar") { - #sidebar-box { + #sidebar-box, + #sidebar { min-width: var(--uc-sidebar-activate-width) !important; max-width: var(--uc-sidebar-activate-width) !important; - margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important; + } - will-change: transform; + #sidebar-box { + margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important; + will-change: padding-inline; &:not([hidden="true"]) { - transform: translateX(var(--uc-sidebar-activate-width)); - } - &[positionend="true"]:not([hidden="true"]) { - transform: translateX(var(--uc-sidebar-activate-width-reverse)); + padding-inline-start: var(--uc-sidebar-activate-width); } @include Animate { - transition: transform 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, + transition: padding-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, visibility 0s linear !important; } } From 1b9a70e68eb3eac7b3a826d504120be52c7bb742 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 8 Aug 2022 09:15:00 +0900 Subject: [PATCH 62/89] Fix: Tab Bar - Container indicator hidden at titlebar mode --- css/leptonChrome.css | 186 ++++++++++++++++++++++--------------------- src/tab/_index.scss | 4 +- 2 files changed, 97 insertions(+), 93 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 52be5879..b6f6e531 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6255,113 +6255,115 @@ } /*= Container Tab - Color line at icon's bottom ==============================*/ @supports -moz-bool-pref("userChrome.tab.container") { - @supports not -moz-bool-pref("userChrome.tab.photon_like_contextline") { - .tab-context-line { - display: none; + @supports not -moz-bool-pref("userChrome.tabbar.as_titlebar") { + @supports not -moz-bool-pref("userChrome.tab.photon_like_contextline") { + .tab-context-line { + display: none; + } + } + .tabbrowser-tab { + --container-position-y: 11px; } - } - .tabbrowser-tab { - --container-position-y: 11px; - } - - :root[uidensity="compact"] .tabbrowser-tab { - --container-position-y: 10px; - } - :root[uidensity="touch"] .tabbrowser-tab { - --container-position-y: 12px; - } + :root[uidensity="compact"] .tabbrowser-tab { + --container-position-y: 10px; + } - .tab-content:not([titlechanged])::before { - /* Box Model */ - content: ""; - display: block; - position: absolute !important; - transform: translate(9px, var(--container-position-y)) !important; - /* Shape */ - border-bottom: 2px solid var(--identity-icon-color); - width: 25%; - opacity: 0.75; - } + :root[uidensity="touch"] .tabbrowser-tab { + --container-position-y: 12px; + } - .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before { - width: calc(100% - 30px); - opacity: 1; - } + .tab-content:not([titlechanged])::before { + /* Box Model */ + content: ""; + display: block; + position: absolute !important; + transform: translate(9px, var(--container-position-y)) !important; + /* Shape */ + border-bottom: 2px solid var(--identity-icon-color); + width: 25%; + opacity: 0.75; + } - #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before { - width: calc(100% - 33px); - } + .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before { + width: calc(100% - 30px); + opacity: 1; + } - /* Animate */ - @media (prefers-reduced-motion: no-preference) { - .tab-content:not([titlechanged])::before { - transition: 0.15s var(--animation-easing-function) !important; - transition-property: width, opacity; + #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before { + width: calc(100% - 33px); } - } - /* Pinned Tab */ - .tabbrowser-tab[pinned] .tab-content::before { - transform: translateY(var(--container-position-y)) !important; - width: 16px; - } - @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") { - .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before { - opacity: 0; + /* Animate */ + @media (prefers-reduced-motion: no-preference) { + .tab-content:not([titlechanged])::before { + transition: 0.15s var(--animation-easing-function) !important; + transition-property: width, opacity; + } + } + /* Pinned Tab */ + .tabbrowser-tab[pinned] .tab-content::before { + transform: translateY(var(--container-position-y)) !important; + width: 16px; } - } - /* Pinned Tab - Titlechanged Indicator override */ - .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected="true"]), - .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { - /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */ - --dotted-identity-image: radial-gradient( - circle, - var(--identity-icon-color), - var(--identity-icon-color) 2px, - transparent 2px - ); - background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image) !important; - background-position-x: 32%, 50%, 70% !important; - } - :root[uidensity="compact"] - .tabbrowser-tab:is([image], [pinned])[usercontextid] - > .tab-stack - > .tab-content[attention]:not([selected="true"]), - :root[uidensity="compact"] - .tabbrowser-tab[usercontextid] - > .tab-stack - > .tab-content[pinned][titlechanged]:not([selected="true"]) { - /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */ - background-position-x: 30%, 50%, 70% !important; - } + @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned") { + .tabbrowser-tab[pinned][visuallyselected]:not([busy]):hover .tab-content::before { + opacity: 0; + } + } + /* Pinned Tab - Titlechanged Indicator override */ + .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected="true"]), + .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { + /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */ + --dotted-identity-image: radial-gradient( + circle, + var(--identity-icon-color), + var(--identity-icon-color) 2px, + transparent 2px + ); + background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image) !important; + background-position-x: 32%, 50%, 70% !important; + } - .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), - .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { - /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ - background-position-y: top calc(0.5px + 50% + var(--container-position-y)) !important; - } + :root[uidensity="compact"] + .tabbrowser-tab:is([image], [pinned])[usercontextid] + > .tab-stack + > .tab-content[attention]:not([selected="true"]), + :root[uidensity="compact"] + .tabbrowser-tab[usercontextid] + > .tab-stack + > .tab-content[pinned][titlechanged]:not([selected="true"]) { + /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */ + background-position-x: 30%, 50%, 70% !important; + } - /* Pinned Tab - Titlechanged & soundplaying */ - .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) - > .tab-stack - > .tab-content[attention]:not([selected="true"]), - .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) - > .tab-stack - > .tab-content[pinned][titlechanged]:not([selected="true"]) { - background-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px) !important; - } + .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), + .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { + /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */ + background-position-y: top calc(0.5px + 50% + var(--container-position-y)) !important; + } - :root[uidensity="compact"] + /* Pinned Tab - Titlechanged & soundplaying */ .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) - > .tab-stack - > .tab-content[attention]:not([selected="true"]), - :root[uidensity="compact"] + > .tab-stack + > .tab-content[attention]:not([selected="true"]), .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) - > .tab-stack - > .tab-content[pinned][titlechanged]:not([selected="true"]) { - background-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px) !important; + > .tab-stack + > .tab-content[pinned][titlechanged]:not([selected="true"]) { + background-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px) !important; + } + + :root[uidensity="compact"] + .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[attention]:not([selected="true"]), + :root[uidensity="compact"] + .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) + > .tab-stack + > .tab-content[pinned][titlechanged]:not([selected="true"]) { + background-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px) !important; + } } } /*= Crashed Tab - Don't show Favicons ========================================*/ diff --git a/src/tab/_index.scss b/src/tab/_index.scss index 30a08d66..f83326c3 100644 --- a/src/tab/_index.scss +++ b/src/tab/_index.scss @@ -30,7 +30,9 @@ /*= Container Tab - Color line at icon's bottom ==============================*/ @include Option("userChrome.tab.container") { - @import "container_tab"; + @include NotOption("userChrome.tabbar.as_titlebar") { + @import "container_tab"; + } } /*= Crashed Tab - Don't show Favicons ========================================*/ From b6adcce94f85b6c1aec1df0b0bfd0daac1dfdd90 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 8 Aug 2022 11:10:55 +0900 Subject: [PATCH 63/89] Fix: Centered - Replace centered options - `userChrome.tab.centered_content` -> `userChrome.centered.tab` - `userChrome.tab.centered_label` -> `userChrome.centered.tab.label` - `userChrome.bookmarkbar.centered` -> `userChrome.centered.bookmarkbar` --- css/leptonChrome.css | 108 +++++++++--------- .../_bookmarkbar.scss} | 0 src/centered/_index.scss | 7 ++ src/centered/_tab.scss | 10 ++ .../centered => centered/tab}/_content.scss | 0 .../centered => centered/tab}/_label.scss | 0 .../centered => centered/tab}/_layout.scss | 0 src/leptonChrome.scss | 6 +- src/others/_index.scss | 4 - src/tab/_centered.scss | 10 -- src/tab/_index.scss | 3 - user.js | 8 +- 12 files changed, 78 insertions(+), 78 deletions(-) rename src/{others/_centered_bookmarkbar.scss => centered/_bookmarkbar.scss} (100%) create mode 100644 src/centered/_index.scss create mode 100644 src/centered/_tab.scss rename src/{tab/centered => centered/tab}/_content.scss (100%) rename src/{tab/centered => centered/tab}/_label.scss (100%) rename src/{tab/centered => centered/tab}/_layout.scss (100%) delete mode 100644 src/others/_index.scss delete mode 100644 src/tab/_centered.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index b6f6e531..18184467 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6372,52 +6372,6 @@ display: none !important; } } -/*= Tab Centered - Make to Center ============================================*/ -@supports -moz-bool-pref("userChrome.tab.centered_content") or -moz-bool-pref("userChrome.tab.centered_label") { - .tabbrowser-tab[selected]:not(:hover) .tab-label-container:not([textoverflow]), - .tabbrowser-tab:not(:hover, [pinned]) .tab-label-container:not([textoverflow]) { - margin-inline-end: 5px; - } - - @supports -moz-bool-pref("userChrome.tab.close_button_at_hover") { - #tabbrowser-tabs[closebuttons="activetab"] - .tabbrowser-tab:not(:hover, [pinned]) - .tab-label-container:not([textoverflow]) { - margin-inline-end: 1px; - } - - #tabbrowser-tabs[closebuttons="activetab"] - .tabbrowser-tab:not([selected]):not(:hover, [pinned]) - .tab-label-container - label { - padding-inline-end: 18px; - } - } -} -@supports -moz-bool-pref("userChrome.tab.centered_content") { - .tab-icon-stack { - -moz-box-flex: 1; - justify-content: end; - } -} -@supports -moz-bool-pref("userChrome.tab.centered_label") { - /* Based on https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/centered_tab_label.css */ - .tab-label-container { - display: grid; - justify-content: safe center; - align-items: safe center; - } - - .tab-label, - .tab-secondary-label { - overflow: hidden; - } - - .tabbrowser-tab[selected]:not(:hover) .tab-label-container:not([textoverflow]), - .tabbrowser-tab:not(:hover, [pinned]) .tab-label-container:not([textoverflow]) { - margin-inline-end: 5px; - } -} /** Url View UI ***************************************************************/ /*= Url View - Move icon to left =============================================*/ @supports -moz-bool-pref("userChrome.urlView.move_icon_to_left") { @@ -6539,14 +6493,6 @@ } } } -/** Other UI ******************************************************************/ -/*= Bookmark Bar - Centered ==================================================*/ -@supports -moz-bool-pref("userChrome.bookmarkbar.centered") { - #PlacesToolbarItems { - display: flex !important; - justify-content: safe center !important; - } -} /** Fullscreen - Overlap toolbar **********************************************/ @supports -moz-bool-pref("userChrome.fullscreen.overlap") { @supports -moz-bool-pref("browser.fullscreen.autohide") { @@ -6577,6 +6523,60 @@ /* Makes the bookmarks toolbar visible if enabled */ } } +/** Centered ******************************************************************/ +/*= Centered - Tab ===========================================================*/ +@supports -moz-bool-pref("userChrome.centered.tab") { + .tabbrowser-tab[selected]:not(:hover) .tab-label-container:not([textoverflow]), + .tabbrowser-tab:not(:hover, [pinned]) .tab-label-container:not([textoverflow]) { + margin-inline-end: 5px; + } + + @supports -moz-bool-pref("userChrome.tab.close_button_at_hover") { + #tabbrowser-tabs[closebuttons="activetab"] + .tabbrowser-tab:not(:hover, [pinned]) + .tab-label-container:not([textoverflow]) { + margin-inline-end: 1px; + } + + #tabbrowser-tabs[closebuttons="activetab"] + .tabbrowser-tab:not([selected]):not(:hover, [pinned]) + .tab-label-container + label { + padding-inline-end: 18px; + } + } + @supports not -moz-bool-pref("userChrome.centered.tab.label") { + .tab-icon-stack { + -moz-box-flex: 1; + justify-content: end; + } + } + @supports -moz-bool-pref("userChrome.centered.tab.label") { + /* Based on https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/centered_tab_label.css */ + .tab-label-container { + display: grid; + justify-content: safe center; + align-items: safe center; + } + + .tab-label, + .tab-secondary-label { + overflow: hidden; + } + + .tabbrowser-tab[selected]:not(:hover) .tab-label-container:not([textoverflow]), + .tabbrowser-tab:not(:hover, [pinned]) .tab-label-container:not([textoverflow]) { + margin-inline-end: 5px; + } + } +} +/*= Centered - Bookmark Bar ==================================================*/ +@supports -moz-bool-pref("userChrome.centered.bookmarkbar") { + #PlacesToolbarItems { + display: flex !important; + justify-content: safe center !important; + } +} /** Auto Hide *****************************************************************/ @supports -moz-bool-pref("userChrome.autohide.back_button") { #back-button[disabled="true"] { diff --git a/src/others/_centered_bookmarkbar.scss b/src/centered/_bookmarkbar.scss similarity index 100% rename from src/others/_centered_bookmarkbar.scss rename to src/centered/_bookmarkbar.scss diff --git a/src/centered/_index.scss b/src/centered/_index.scss new file mode 100644 index 00000000..b1b324ff --- /dev/null +++ b/src/centered/_index.scss @@ -0,0 +1,7 @@ +/*= Centered - Tab ===========================================================*/ +@import "tab"; + +/*= Centered - Bookmark Bar ==================================================*/ +@include Option("userChrome.centered.bookmarkbar") { + @import "bookmarkbar"; +} diff --git a/src/centered/_tab.scss b/src/centered/_tab.scss new file mode 100644 index 00000000..bfc038ea --- /dev/null +++ b/src/centered/_tab.scss @@ -0,0 +1,10 @@ +@include Option("userChrome.centered.tab") { + @import "tab/layout"; + + @include NotOption("userChrome.centered.tab.label") { + @import "tab/content"; + } + @include Option("userChrome.centered.tab.label") { + @import "tab/label"; + } +} diff --git a/src/tab/centered/_content.scss b/src/centered/tab/_content.scss similarity index 100% rename from src/tab/centered/_content.scss rename to src/centered/tab/_content.scss diff --git a/src/tab/centered/_label.scss b/src/centered/tab/_label.scss similarity index 100% rename from src/tab/centered/_label.scss rename to src/centered/tab/_label.scss diff --git a/src/tab/centered/_layout.scss b/src/centered/tab/_layout.scss similarity index 100% rename from src/tab/centered/_layout.scss rename to src/centered/tab/_layout.scss diff --git a/src/leptonChrome.scss b/src/leptonChrome.scss index dc2ae085..66f55ae7 100644 --- a/src/leptonChrome.scss +++ b/src/leptonChrome.scss @@ -75,12 +75,12 @@ /** Sidebar UI ****************************************************************/ @import "sidebar/index"; -/** Other UI ******************************************************************/ -@import "others/index"; - /** Fullscreen - Overlap toolbar **********************************************/ @import "fullscreen/index"; +/** Centered ******************************************************************/ +@import "centered/index"; + /** Auto Hide *****************************************************************/ @import "autohide/index"; diff --git a/src/others/_index.scss b/src/others/_index.scss deleted file mode 100644 index ca2d0e56..00000000 --- a/src/others/_index.scss +++ /dev/null @@ -1,4 +0,0 @@ -/*= Bookmark Bar - Centered ==================================================*/ -@include Option("userChrome.bookmarkbar.centered") { - @import "centered_bookmarkbar"; -} diff --git a/src/tab/_centered.scss b/src/tab/_centered.scss deleted file mode 100644 index dc90af52..00000000 --- a/src/tab/_centered.scss +++ /dev/null @@ -1,10 +0,0 @@ -@include Option("userChrome.tab.centered_content", "userChrome.tab.centered_label") { - @import "centered/layout"; -} - -@include Option("userChrome.tab.centered_content") { - @import "centered/content"; -} -@include Option("userChrome.tab.centered_label") { - @import "centered/label"; -} diff --git a/src/tab/_index.scss b/src/tab/_index.scss index f83326c3..ec088a5d 100644 --- a/src/tab/_index.scss +++ b/src/tab/_index.scss @@ -39,6 +39,3 @@ @include Option("userChrome.tab.crashed") { @import "crashed_tab"; } - -/*= Tab Centered - Make to Center ============================================*/ -@import "centered"; diff --git a/user.js b/user.js index 31c0823d..d34419c4 100644 --- a/user.js +++ b/user.js @@ -93,6 +93,10 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.hidden.selected_tab", true); // user_pref("userChrome.hidden.disabled_menu", true); +// user_pref("userChrome.centered.tab", true); +// user_pref("userChrome.centered.tab.label", true); +// user_pref("userChrome.centered.bookmarkbar", true); + // user_pref("userChrome.rounding.square_button", true); // user_pref("userChrome.rounding.square_panel", true); // user_pref("userChrome.rounding.square_panelitem", true); @@ -130,10 +134,6 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.tab.close_button_at_pinned.background", true); // user_pref("userChrome.tab.close_button_at_hover.always", true); // Need close_button_at_hover // user_pref("userChrome.tab.sound_show_label", true); // Need remove sound_hide_label -// user_pref("userChrome.tab.centered_content", true); -// user_pref("userChrome.tab.centered_label", true); - -// user_pref("userChrome.bookmarkbar.centered", true); // user_pref("userChrome.panel.remove_strip", true); // user_pref("userChrome.panel.full_width_separator", true); From 3099488ed3b0dfdb9fe33b9556aa1049c8576c74 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 8 Aug 2022 13:38:39 +0900 Subject: [PATCH 64/89] Add: Centered - URL bar --- css/leptonChrome.css | 7 +++++++ src/centered/_index.scss | 5 +++++ src/centered/_urlbar.scss | 9 +++++++++ user.js | 1 + 4 files changed, 22 insertions(+) create mode 100644 src/centered/_urlbar.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 18184467..69e5b1b1 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6570,6 +6570,13 @@ } } } +/*= Centered - URL Bar =======================================================*/ +@supports -moz-bool-pref("userChrome.centered.urlbar") { + #urlbar:not([focused]) #urlbar-input, + #urlbar:not([focused]) .urlbar-input { + text-align: center !important; + } +} /*= Centered - Bookmark Bar ==================================================*/ @supports -moz-bool-pref("userChrome.centered.bookmarkbar") { #PlacesToolbarItems { diff --git a/src/centered/_index.scss b/src/centered/_index.scss index b1b324ff..9a5b244c 100644 --- a/src/centered/_index.scss +++ b/src/centered/_index.scss @@ -1,6 +1,11 @@ /*= Centered - Tab ===========================================================*/ @import "tab"; +/*= Centered - URL Bar =======================================================*/ +@include Option("userChrome.centered.urlbar") { + @import "urlbar"; +} + /*= Centered - Bookmark Bar ==================================================*/ @include Option("userChrome.centered.bookmarkbar") { @import "bookmarkbar"; diff --git a/src/centered/_urlbar.scss b/src/centered/_urlbar.scss new file mode 100644 index 00000000..5d8cfc17 --- /dev/null +++ b/src/centered/_urlbar.scss @@ -0,0 +1,9 @@ +// Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/urlbar_centered_text.css made available under Mozilla Public License v. 2.0 +// See the above repository for updates as well as full license text. + +#urlbar:not([focused]) { + #urlbar-input, + .urlbar-input { + text-align: center !important; + } +} diff --git a/user.js b/user.js index d34419c4..afdd896d 100644 --- a/user.js +++ b/user.js @@ -95,6 +95,7 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.centered.tab", true); // user_pref("userChrome.centered.tab.label", true); +// user_pref("userChrome.centered.urlbar", true); // user_pref("userChrome.centered.bookmarkbar", true); // user_pref("userChrome.rounding.square_button", true); From 878ca3fa9580e2c9285e3c017d5b71ad8a809a10 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 8 Aug 2022 13:42:52 +0900 Subject: [PATCH 65/89] Fix: Utils - typo --- src/hidden/_index.scss | 2 +- src/utils/_one_liner.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/hidden/_index.scss b/src/hidden/_index.scss index 8cf48308..070be4c0 100644 --- a/src/hidden/_index.scss +++ b/src/hidden/_index.scss @@ -5,7 +5,7 @@ } @include Option("userChrome.hidden.navbar") { - @include OneLinerNabarContent() { + @include OneLinerNavbarContent() { #nav-bar { visibility: collapse; /* display: none is not work */ } diff --git a/src/utils/_one_liner.scss b/src/utils/_one_liner.scss index 92753219..55dab408 100644 --- a/src/utils/_one_liner.scss +++ b/src/utils/_one_liner.scss @@ -46,7 +46,7 @@ } } -@mixin OneLinerNabarContent() { +@mixin OneLinerNavbarContent() { @include NotOption("userChrome.tabbar.one_liner") { @content; } @@ -61,7 +61,7 @@ @mixin OneLinerNavbar() { @include Option("userChrome.autohide.navbar") { - @include OneLinerNabarContent() { + @include OneLinerNavbarContent() { @content; } } From b629d988fb8948a760e1f4de4e3c7d0b29da0b7e Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 9 Aug 2022 09:10:12 +0900 Subject: [PATCH 66/89] Fix: Auto Hide - with Hidden tabbar --- css/leptonChrome.css | 48 ++++++++++++++++++-------- src/autohide/_common.scss | 4 ++- src/hidden/_index.scss | 12 +++---- src/tabbar/_layout.scss | 2 +- src/tabbar/layout/_navbar_padding.scss | 4 +-- 5 files changed, 45 insertions(+), 25 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 69e5b1b1..dea6392d 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4633,7 +4633,7 @@ } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { @media screen and (max-width: 1100px) { /*= Windows Control - Move to toolbar ========================================*/ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0 @@ -4983,7 +4983,7 @@ } @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (max-width: 1100px) { - @supports not -moz-bool-pref("userChrome.tabbar.on_bottom") { + @supports not -moz-bool-pref("userChrome.tabbar.on_bottom") or not -moz-bool-pref("userChrome.hidden.tabbar") { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { /* Don't need pre spacer */ --uc-window-drag-space-pre: 0px; @@ -5028,7 +5028,7 @@ } } @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { - @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { + @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); @@ -5092,7 +5092,7 @@ } } @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { - @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { @media screen and (max-width: 1100px) { :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { border-inline-start-width: var(--uc-widow-control-space); @@ -6713,8 +6713,19 @@ --uc-bm-hide-height: calc(-1 * var(--uc-bm-height)); } @supports -moz-bool-pref("userChrome.hidden.tabbar") { - :root { - --uc-tabbar-height: 0px; + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { + :root { + --uc-tabbar-height: 0px; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (max-width: 1100px) { + :root { + --uc-tabbar-height: 0px; + } + } + } } } @supports -moz-bool-pref("userChrome.hidden.navbar") { @@ -7215,21 +7226,28 @@ } } /** Hidden ********************************************************************/ -@supports -moz-bool-pref("userChrome.hidden.tabbar") { - #TabsToolbar { - display: none !important; +@supports not -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.hidden.tabbar") { + #TabsToolbar { + display: none !important; + } } -} -@supports -moz-bool-pref("userChrome.hidden.navbar") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.hidden.navbar") { #nav-bar { visibility: collapse; /* display: none is not work */ } } - @supports -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @media screen and (max-width: 1100px) { +} +@supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (max-width: 1100px) { + @supports -moz-bool-pref("userChrome.hidden.tabbar") { + #TabsToolbar { + display: none !important; + } + } + @supports -moz-bool-pref("userChrome.hidden.navbar") { #nav-bar { visibility: collapse; /* display: none is not work */ diff --git a/src/autohide/_common.scss b/src/autohide/_common.scss index 3ddf4ad5..2212c5fb 100644 --- a/src/autohide/_common.scss +++ b/src/autohide/_common.scss @@ -8,7 +8,9 @@ --uc-bm-hide-height: calc(-1 * var(--uc-bm-height)); @include Option("userChrome.hidden.tabbar") { - --uc-tabbar-height: 0px; + @include OneLinerNavbarContent() { + --uc-tabbar-height: 0px; + } } @include Option("userChrome.hidden.navbar") { --uc-navbar-height: 0px; diff --git a/src/hidden/_index.scss b/src/hidden/_index.scss index 070be4c0..631c1622 100644 --- a/src/hidden/_index.scss +++ b/src/hidden/_index.scss @@ -1,11 +1,11 @@ -@include Option("userChrome.hidden.tabbar") { - #TabsToolbar { - display: none !important; +@include OneLinerNavbarContent() { + @include Option("userChrome.hidden.tabbar") { + #TabsToolbar { + display: none !important; + } } -} -@include Option("userChrome.hidden.navbar") { - @include OneLinerNavbarContent() { + @include Option("userChrome.hidden.navbar") { #nav-bar { visibility: collapse; /* display: none is not work */ } diff --git a/src/tabbar/_layout.scss b/src/tabbar/_layout.scss index 99a8b8f8..b6fed2cd 100644 --- a/src/tabbar/_layout.scss +++ b/src/tabbar/_layout.scss @@ -10,7 +10,7 @@ } } @include Option("userChrome.tabbar.one_liner.responsive") { - @include Option("userChrome.tabbar.on_bottom") { + @include Option("userChrome.tabbar.on_bottom", "userChrome.hidden.tabbar") { @media screen and (max-width: 1100px) { @import "layout/window_control"; } diff --git a/src/tabbar/layout/_navbar_padding.scss b/src/tabbar/layout/_navbar_padding.scss index 31968150..9ac3d628 100644 --- a/src/tabbar/layout/_navbar_padding.scss +++ b/src/tabbar/layout/_navbar_padding.scss @@ -46,7 +46,7 @@ @content; } @include NotOption("userChrome.tabbar.one_liner.combine_navbar") { - @include Option("userChrome.tabbar.on_bottom") { + @include Option("userChrome.tabbar.on_bottom", "userChrome.hidden.tabbar") { @media screen and (max-width: 1100px) { @content; } @@ -74,7 +74,7 @@ } @include Option("userChrome.tabbar.one_liner.responsive") { @media screen and (max-width: 1100px) { - @include NotOption("userChrome.tabbar.on_bottom") { + @include NotOption("userChrome.tabbar.on_bottom", "userChrome.hidden.tabbar") { @include _remove_spacer_pre; @include _remove_spacer_post; } From 73a2366f9e9b4109c01d986cc541ea69b4708fb1 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 9 Aug 2022 10:29:24 +0900 Subject: [PATCH 67/89] Add: Hidden - Tab icon --- css/leptonChrome.css | 5 +++++ src/hidden/_index.scss | 6 ++++++ user.js | 1 + 3 files changed, 12 insertions(+) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index dea6392d..ac13dfcf 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -7256,6 +7256,11 @@ } } } +@supports -moz-bool-pref("userChrome.hidden.tab_icon") { + .tabbrowser-tab:not([pinned="true"]) .tab-icon-stack { + display: none; + } +} @supports -moz-bool-pref("userChrome.hidden.sidebar_header") { @supports not -moz-bool-pref("userChrome.hidden.sidebar_header.vertical_tab_only") { #sidebar-header { diff --git a/src/hidden/_index.scss b/src/hidden/_index.scss index 631c1622..6bffbbde 100644 --- a/src/hidden/_index.scss +++ b/src/hidden/_index.scss @@ -12,6 +12,12 @@ } } +@include Option("userChrome.hidden.tab_icon") { + .tabbrowser-tab:not([pinned="true"]) .tab-icon-stack { + display: none; + } +} + @include Option("userChrome.hidden.sidebar_header") { @include NotOption("userChrome.hidden.sidebar_header.vertical_tab_only") { #sidebar-header { diff --git a/user.js b/user.js index afdd896d..38135d17 100644 --- a/user.js +++ b/user.js @@ -90,6 +90,7 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.hidden.sidebar_header", true); // user_pref("userChrome.hidden.sidebar_header.vertical_tab_only", true); // user_pref("userChrome.hidden.urlbar_iconbox", true); +// user_pref("userChrome.hidden.tab_icon", true); // user_pref("userChrome.hidden.selected_tab", true); // user_pref("userChrome.hidden.disabled_menu", true); From e1d9f43e5653d405a22d22e546846c8fe5c86861 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 10 Aug 2022 13:36:15 +0900 Subject: [PATCH 68/89] Add: Theme - Monospace --- css/leptonChrome.css | 6 ++++++ src/leptonChrome.scss | 5 +++++ src/theme/_monospace.scss | 3 +++ user.js | 1 + 4 files changed, 15 insertions(+) create mode 100644 src/theme/_monospace.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index ac13dfcf..25fd34ec 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -2771,6 +2771,12 @@ } } } +/* Monospace ******************************************************************/ +@supports -moz-bool-pref("userChrome.theme.monospace") { + * { + font-family: -moz-fixed; + } +} /** Decoration ****************************************************************/ /*= Cursor Types =============================================================*/ @supports -moz-bool-pref("userChrome.decoration.cursor") { diff --git a/src/leptonChrome.scss b/src/leptonChrome.scss index 66f55ae7..8b2e6815 100644 --- a/src/leptonChrome.scss +++ b/src/leptonChrome.scss @@ -51,6 +51,11 @@ @import "theme/proton_chrome"; } +/* Monospace ******************************************************************/ +@include Option("userChrome.theme.monospace") { + @import "theme/monospace"; +} + /** Decoration ****************************************************************/ @import "decoration/index"; diff --git a/src/theme/_monospace.scss b/src/theme/_monospace.scss new file mode 100644 index 00000000..690a2c0b --- /dev/null +++ b/src/theme/_monospace.scss @@ -0,0 +1,3 @@ +* { + font-family: -moz-fixed; +} diff --git a/user.js b/user.js index 38135d17..bd637e21 100644 --- a/user.js +++ b/user.js @@ -72,6 +72,7 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.decoration.disable_sidebar_animate", true); // user_pref("userChrome.theme.proton_color.dark_blue_accent", true); +// user_pref("userChrome.theme.monospace", true); // user_pref("userChrome.autohide.tab", true); // user_pref("userChrome.autohide.tab.opacity", true); From 73e47dbdc39b2d1951702ef7ea8d6e9882599870 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 10 Aug 2022 13:38:55 +0900 Subject: [PATCH 69/89] Add: Contents - Monospace --- css/leptonContent.css | 11 +++++++++++ src/contents/_monospace.scss | 5 +++++ src/leptonContent.scss | 5 +++++ user.js | 1 + 4 files changed, 22 insertions(+) create mode 100644 src/contents/_monospace.scss diff --git a/css/leptonContent.css b/css/leptonContent.css index 209a3795..10cf40b5 100644 --- a/css/leptonContent.css +++ b/css/leptonContent.css @@ -2988,6 +2988,17 @@ } } } +/** Monospace *****************************************************************/ +@supports -moz-bool-pref("userContent.page.monospace") { + @-moz-document url-prefix("about:"), + url-prefix("chrome://browser/content/places/places.xhtml"), + regexp("^(((jar:)?file:///)|(chrome://)).*/$") + { + * { + font-family: -moz-fixed; + } + } +} /** Menu - Icons Layout *******************************************************/ @supports -moz-bool-pref("userChrome.icon.menu") { @-moz-document url("chrome://browser/content/places/places.xhtml"), diff --git a/src/contents/_monospace.scss b/src/contents/_monospace.scss new file mode 100644 index 00000000..30a2c559 --- /dev/null +++ b/src/contents/_monospace.scss @@ -0,0 +1,5 @@ +@-moz-document url-prefix("about:"), + url-prefix("chrome://browser/content/places/places.xhtml"), + regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") { + @import "../theme/monospace"; +} diff --git a/src/leptonContent.scss b/src/leptonContent.scss index 1fcf8e23..01e47c29 100644 --- a/src/leptonContent.scss +++ b/src/leptonContent.scss @@ -34,6 +34,11 @@ @import "contents/proton_contents"; } +/** Monospace *****************************************************************/ +@include Option("userContent.page.monospace") { + @import "contents/monospace"; +} + /** Menu - Icons Layout *******************************************************/ @include Option("userChrome.icon.menu") { @import "contents/context_menu"; diff --git a/user.js b/user.js index bd637e21..913416e1 100644 --- a/user.js +++ b/user.js @@ -154,6 +154,7 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userContent.page.proton_color.dark_blue_accent", true); // user_pref("userContent.page.proton_color.system_accent", true); +// user_pref("userContent.page.monospace", true); // == Theme Default Settings =================================================== // -- User Chrome -------------------------------------------------------------- From da23a8007bb1b2d07dd61e7df43aadcdb50da3aa Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 11 Aug 2022 09:31:46 +0900 Subject: [PATCH 70/89] Fix: One Liner - Drag space --- css/leptonChrome.css | 24 ++++++++++++++++++++++++ src/tabbar/layout/_navbar_padding.scss | 3 +++ 2 files changed, 27 insertions(+) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 25fd34ec..a5e32a7b 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5046,6 +5046,18 @@ } @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-widow-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") { @@ -5110,6 +5122,18 @@ } @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") { + :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { + margin-inline-start: var(--uc-window-drag-space-pre, 0px) !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar { + margin-inline-end: var(--uc-widow-control-space, 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") { diff --git a/src/tabbar/layout/_navbar_padding.scss b/src/tabbar/layout/_navbar_padding.scss index 9ac3d628..ac068f95 100644 --- a/src/tabbar/layout/_navbar_padding.scss +++ b/src/tabbar/layout/_navbar_padding.scss @@ -57,6 +57,9 @@ @mixin _oneLiner_navBar_marginGap() { @include NotOption("userChrome.tabbar.one_liner.combine_navbar") { + @include NotOption("userChrome.tabbar.one_liner.responsive") { + @content; + } @include Option("userChrome.tabbar.one_liner.responsive") { @media screen and (min-width: 1100px) { @content; From d3735aadf74dfbe440345fdb28a6a3a4f86a6cc9 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 11 Aug 2022 09:34:31 +0900 Subject: [PATCH 71/89] Add: Auto Hide - Fill URL bar --- css/leptonChrome.css | 95 ++++++++++++++++++++++++++++++---- src/autohide/_fill_urlbar.scss | 30 +++++++++++ src/autohide/_index.scss | 4 ++ src/tabbar/_one_liner.scss | 16 ++++-- user.js | 1 + 5 files changed, 131 insertions(+), 15 deletions(-) create mode 100644 src/autohide/_fill_urlbar.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index a5e32a7b..526e257e 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4144,9 +4144,16 @@ @supports -moz-bool-pref("userChrome.tabbar.one_liner") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { :root { - --uc-navbar-size: 40vw; - --uc-tabbar-size: calc(100vw - var(--uc-navbar-size)); - --uc-navbar-margin: calc(var(--uc-navbar-size) + var(--uc-navbar-gap, 0px)); + --uc-navbar-width-origin: 40vw; + --uc-navbar-width: var(--uc-navbar-width-origin); + --uc-tabbar-width: calc(100vw - var(--uc-navbar-width)); + --uc-navbar-margin: calc(var(--uc-navbar-width) + var(--uc-navbar-gap, 0px)); + } + @supports -moz-bool-pref("userChrome.autohide.fill_urlbar") { + :root { + --uc-navbar-width-origin: 50vw; + --uc-navbar-width: 24em; + } } #nav-bar { @@ -4223,7 +4230,7 @@ } #nav-bar { - margin-inline-end: var(--uc-tabbar-size) !important; + margin-inline-end: var(--uc-tabbar-width) !important; } .titlebar-spacer[type="pre-tabs"] { @@ -4236,7 +4243,7 @@ } #nav-bar { - margin-inline-start: var(--uc-tabbar-size) !important; + margin-inline-start: var(--uc-tabbar-width) !important; } .titlebar-spacer[type="post-tabs"] { @@ -4247,9 +4254,16 @@ @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (min-width: 1100px) { :root { - --uc-navbar-size: 40vw; - --uc-tabbar-size: calc(100vw - var(--uc-navbar-size)); - --uc-navbar-margin: calc(var(--uc-navbar-size) + var(--uc-navbar-gap, 0px)); + --uc-navbar-width-origin: 40vw; + --uc-navbar-width: var(--uc-navbar-width-origin); + --uc-tabbar-width: calc(100vw - var(--uc-navbar-width)); + --uc-navbar-margin: calc(var(--uc-navbar-width) + var(--uc-navbar-gap, 0px)); + } + @supports -moz-bool-pref("userChrome.autohide.fill_urlbar") { + :root { + --uc-navbar-width-origin: 50vw; + --uc-navbar-width: 24em; + } } #nav-bar { @@ -4326,7 +4340,7 @@ } #nav-bar { - margin-inline-end: var(--uc-tabbar-size) !important; + margin-inline-end: var(--uc-tabbar-width) !important; } .titlebar-spacer[type="pre-tabs"] { @@ -4339,7 +4353,7 @@ } #nav-bar { - margin-inline-start: var(--uc-tabbar-size) !important; + margin-inline-start: var(--uc-tabbar-width) !important; } .titlebar-spacer[type="post-tabs"] { @@ -7255,6 +7269,67 @@ } } } +@supports -moz-bool-pref("userChrome.autohide.fill_urlbar") { + #nav-bar:not(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container { + -moz-box-ordinal-group: 0; + min-width: calc( + var(--uc-navbar-width, 100vw) - + (2 * var(--urlbar-margin-inline) + var(--uc-window-drag-space-pre, 0px) + var(--uc-navbar-gap, 0px)) + ) !important; + } + + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) { + --uc-tabbar-width: calc(100vw - var(--uc-navbar-width-origin)); + } + } + @media (prefers-reduced-motion: no-preference) { + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + #nav-bar { + transition: margin-inline 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + } + + #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) { + transition-delay: 0s !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (prefers-reduced-motion: no-preference) and (min-width: 1100px) { + #nav-bar { + transition: margin-inline 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + } + + #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) { + transition-delay: 0s !important; + } + } + } + } + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { + #urlbar-container { + transition: min-width 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + } + + #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container { + transition-delay: 0s !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (prefers-reduced-motion: no-preference) and (max-width: 1100px) { + #urlbar-container { + transition: min-width 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + } + + #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container { + transition-delay: 0s !important; + } + } + } + } + } +} /** Hidden ********************************************************************/ @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { @supports -moz-bool-pref("userChrome.hidden.tabbar") { diff --git a/src/autohide/_fill_urlbar.scss b/src/autohide/_fill_urlbar.scss new file mode 100644 index 00000000..f7c51c51 --- /dev/null +++ b/src/autohide/_fill_urlbar.scss @@ -0,0 +1,30 @@ +#nav-bar:not(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container { + -moz-box-ordinal-group: 0; + min-width: calc(var(--uc-navbar-width, 100vw) - ((2 * var(--urlbar-margin-inline)) + var(--uc-window-drag-space-pre, 0px) + var(--uc-navbar-gap, 0px))) !important; +} + +@include Option("userChrome.tabbar.one_liner") { + #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) { + --uc-tabbar-width: calc(100vw - var(--uc-navbar-width-origin)); + } +} + +@include Animate { + @include OneLiner { + #nav-bar { + transition: margin-inline 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + } + #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) { + transition-delay: 0s !important; + } + } + + @include OneLinerNavbarContent { + #urlbar-container { + transition: min-width 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + } + #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container { + transition-delay: 0s !important; + } + } +} diff --git a/src/autohide/_index.scss b/src/autohide/_index.scss index cc4e956c..3864d5e8 100644 --- a/src/autohide/_index.scss +++ b/src/autohide/_index.scss @@ -29,3 +29,7 @@ } @import "sidebar"; + +@include Option("userChrome.autohide.fill_urlbar") { + @import "fill_urlbar"; +} diff --git a/src/tabbar/_one_liner.scss b/src/tabbar/_one_liner.scss index a07508c9..2824363c 100644 --- a/src/tabbar/_one_liner.scss +++ b/src/tabbar/_one_liner.scss @@ -1,8 +1,14 @@ :root { - --uc-navbar-size: 40vw; - --uc-tabbar-size: calc(100vw - var(--uc-navbar-size)); + --uc-navbar-width-origin: 40vw; + --uc-navbar-width: var(--uc-navbar-width-origin); + --uc-tabbar-width: calc(100vw - var(--uc-navbar-width)); - --uc-navbar-margin: calc(var(--uc-navbar-size) + var(--uc-navbar-gap, 0px)); + --uc-navbar-margin: calc(var(--uc-navbar-width) + var(--uc-navbar-gap, 0px)); + + @include Option("userChrome.autohide.fill_urlbar") { + --uc-navbar-width-origin: 50vw; + --uc-navbar-width: 24em; + } } #nav-bar { @@ -79,7 +85,7 @@ toolbarspring.chromeclass-toolbar-additional { margin-inline-start: var(--uc-navbar-margin) !important; } #nav-bar { - margin-inline-end: var(--uc-tabbar-size) !important; + margin-inline-end: var(--uc-tabbar-width) !important; } .titlebar-spacer[type="pre-tabs"] { display: none !important; @@ -90,7 +96,7 @@ toolbarspring.chromeclass-toolbar-additional { margin-inline-end: var(--uc-navbar-margin) !important; } #nav-bar { - margin-inline-start: var(--uc-tabbar-size) !important; + margin-inline-start: var(--uc-tabbar-width) !important; } .titlebar-spacer[type="post-tabs"] { display: none !important; diff --git a/user.js b/user.js index 913416e1..0c949727 100644 --- a/user.js +++ b/user.js @@ -81,6 +81,7 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.autohide.navbar", true); // user_pref("userChrome.autohide.bookmarkbar", true); // user_pref("userChrome.autohide.sidebar", true); +// user_pref("userChrome.autohide.fill_urlbar", true); // user_pref("userChrome.autohide.back_button", true); // user_pref("userChrome.autohide.forward_button", true); // user_pref("userChrome.autohide.page_action", true); From 7694e39448863458d95818732fe73832efe44cd0 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 12 Aug 2022 09:05:32 +0900 Subject: [PATCH 72/89] Clean: Theme, Icons - Folder structure --- css/leptonChrome.css | 21 +++-- src/contents/_activity_stream.scss | 2 +- src/contents/_context_menu.scss | 2 +- src/icons/_index.scss | 33 ++++++++ .../_activity_stream.scss} | 0 .../_bookmark_menu.scss} | 0 .../{_layout_menu.scss => layout/_menu.scss} | 2 +- .../_menu_common.scss} | 0 .../_menu_contents.scss} | 2 +- .../_panel.scss} | 0 src/leptonChrome.scss | 77 ++----------------- src/theme/_index.scss | 35 +++++++++ 12 files changed, 87 insertions(+), 87 deletions(-) create mode 100644 src/icons/_index.scss rename src/icons/{_layout_activity_stream.scss => layout/_activity_stream.scss} (100%) rename src/icons/{_layout_bookmark_menu.scss => layout/_bookmark_menu.scss} (100%) rename src/icons/{_layout_menu.scss => layout/_menu.scss} (98%) rename src/icons/{_layout_menu_common.scss => layout/_menu_common.scss} (100%) rename src/icons/{_layout_menu_contents.scss => layout/_menu_contents.scss} (98%) rename src/icons/{_layout_panel.scss => layout/_panel.scss} (100%) create mode 100644 src/theme/_index.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 526e257e..8a90fec3 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -355,7 +355,8 @@ box-shadow: none !important; } } -/** System Default Theme ******************************************************/ +/** Theme *********************************************************************/ +/*= System Default Theme =====================================================*/ @supports -moz-bool-pref("userChrome.theme.system_default") { /*= Common - URL Bar focus color =============================================*/ @media (-moz-windows-accent-color-in-titlebar), (-moz-gtk-csd-available) { @@ -1044,12 +1045,7 @@ } } } -/** Fully Theme Mode **********************************************************/ -/* Default Themes - https://github.com/mozilla/gecko-dev/blob/master/toolkit/mozapps/extensions/default-theme/manifest.json - https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/light/manifest.json - https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/dark/manifest.json - */ +/*= Fully Theme Mode =========================================================*/ @supports -moz-bool-pref("userChrome.theme.proton_color") { /*= Default Colors - Hard Coded ==============================================*/ /* Based on chrome://global/skin/in-content/common.css */ @@ -1491,7 +1487,7 @@ /* Original: hsla(0,0%,80%,.5), match arrowpanel-dimmed-further */ } } -/* Fully Dark Mode ************************************************************/ +/*= Fully Dark Mode ==========================================================*/ @supports -moz-bool-pref("userChrome.theme.fully_dark") { /*= Remove White Flash =======================================================*/ #tabbrowser-tabbox, @@ -1571,7 +1567,7 @@ } } } -/* Proton Theme Mode **********************************************************/ +/*= Proton Theme Mode ========================================================*/ @supports -moz-bool-pref("userChrome.theme.proton_chrome") { /*= Proton Commons ===========================================================*/ @-moz-document url("chrome://global/content/commonDialog.xhtml"), @@ -2771,7 +2767,7 @@ } } } -/* Monospace ******************************************************************/ +/*= Monospace ================================================================*/ @supports -moz-bool-pref("userChrome.theme.monospace") { * { font-family: -moz-fixed; @@ -7424,6 +7420,7 @@ } } } +/** Icons *********************************************************************/ /** Library - Icons Replace ***************************************************/ @supports -moz-bool-pref("userChrome.icon.library") { /*= Standard Folder - More Visible ===========================================*/ @@ -9921,7 +9918,7 @@ } } } -/*= Waterfox =================================================================*/ +/** Waterfox ******************************************************************/ @supports -moz-bool-pref("userChrome.icon.panel") { #appMenu-restart-button { list-style-image: url("../icons/refresh-cw.svg") !important; @@ -9960,7 +9957,7 @@ background-color: var(--button-active-bgcolor); } } -/*= Tor Browser ==============================================================*/ +/** Tor Browser ***************************************************************/ @supports -moz-bool-pref("userChrome.icon.panel") { #appMenuNewIdentity { list-style-image: url("chrome://browser/skin/new_identity.svg"); diff --git a/src/contents/_activity_stream.scss b/src/contents/_activity_stream.scss index 324e4acb..acc839e3 100644 --- a/src/contents/_activity_stream.scss +++ b/src/contents/_activity_stream.scss @@ -29,7 +29,7 @@ /** Activity Stream - Menu Icons ********************************************/ @include Option("userChrome.icon.context_menu") { - @import "../icons/layout_activity_stream"; + @import "../icons/layout/activity_stream"; @import "../icons/activity_stream"; } diff --git a/src/contents/_context_menu.scss b/src/contents/_context_menu.scss index 63b5e164..89f92ea8 100644 --- a/src/contents/_context_menu.scss +++ b/src/contents/_context_menu.scss @@ -1,6 +1,6 @@ @-moz-document url("chrome://browser/content/places/places.xhtml"), url("about:downloads") { - @import "../icons/layout_menu_contents"; + @import "../icons/layout/menu_contents"; /*= Context Menu ===========================================================*/ @include Option("userChrome.icon.context_menu") { diff --git a/src/icons/_index.scss b/src/icons/_index.scss new file mode 100644 index 00000000..90c2e29b --- /dev/null +++ b/src/icons/_index.scss @@ -0,0 +1,33 @@ +/** Library - Icons Replace ***************************************************/ +@include Option("userChrome.icon.library") { + @import "../library/chrome"; +} + +/** Panel - Icons *************************************************************/ +@include Option("userChrome.icon.panel") { + @import "layout/panel"; + @import "panel"; +} + +/** Menu - Icons Layout *******************************************************/ +@include Option("userChrome.icon.menu") { + @import "layout/menu"; + @import "layout/bookmark_menu"; + + @include Option("userChrome.icon.context_menu") { + @import "context_menu"; + } + @include Option("userChrome.icon.global_menubar") { + @import "global_menubar"; + } + @include Option("userChrome.icon.global_menu") { + @import "global_menu"; + } +} + +/** Libray Menu ***************************************************************/ +@include Option("userChrome.icon.library") { + @include Option("userChrome.icon.menu") { + @import "library"; + } +} diff --git a/src/icons/_layout_activity_stream.scss b/src/icons/layout/_activity_stream.scss similarity index 100% rename from src/icons/_layout_activity_stream.scss rename to src/icons/layout/_activity_stream.scss diff --git a/src/icons/_layout_bookmark_menu.scss b/src/icons/layout/_bookmark_menu.scss similarity index 100% rename from src/icons/_layout_bookmark_menu.scss rename to src/icons/layout/_bookmark_menu.scss diff --git a/src/icons/_layout_menu.scss b/src/icons/layout/_menu.scss similarity index 98% rename from src/icons/_layout_menu.scss rename to src/icons/layout/_menu.scss index 7493b61f..93aac39e 100644 --- a/src/icons/_layout_menu.scss +++ b/src/icons/layout/_menu.scss @@ -1,4 +1,4 @@ -@import "./layout_menu_common"; +@import "./menu_common"; //-- Mixin --------------------------------------------------------------------- // Components diff --git a/src/icons/_layout_menu_common.scss b/src/icons/layout/_menu_common.scss similarity index 100% rename from src/icons/_layout_menu_common.scss rename to src/icons/layout/_menu_common.scss diff --git a/src/icons/_layout_menu_contents.scss b/src/icons/layout/_menu_contents.scss similarity index 98% rename from src/icons/_layout_menu_contents.scss rename to src/icons/layout/_menu_contents.scss index 4c383a07..e10008d1 100644 --- a/src/icons/_layout_menu_contents.scss +++ b/src/icons/layout/_menu_contents.scss @@ -1,4 +1,4 @@ -@import "../icons/layout_menu_common"; +@import "./menu_common"; //-- Mixin --------------------------------------------------------------------- $_placesPopupSet: "menupopup:is(#placesContext, #placesColumnsContext, #downloadsContextMenu)"; diff --git a/src/icons/_layout_panel.scss b/src/icons/layout/_panel.scss similarity index 100% rename from src/icons/_layout_panel.scss rename to src/icons/layout/_panel.scss diff --git a/src/leptonChrome.scss b/src/leptonChrome.scss index 8b2e6815..762566e3 100644 --- a/src/leptonChrome.scss +++ b/src/leptonChrome.scss @@ -19,42 +19,8 @@ /** Compatibility Fixes *******************************************************/ @import "compatibility/index"; -/** System Default Theme ******************************************************/ -@include Option("userChrome.theme.system_default") { - @import "theme/system_default_theme"; -} - -/** Fully Theme Mode **********************************************************/ -/* Default Themes - https://github.com/mozilla/gecko-dev/blob/master/toolkit/mozapps/extensions/default-theme/manifest.json - https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/light/manifest.json - https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/dark/manifest.json - */ - -@include Option("userChrome.theme.proton_color") { - @import "theme/proton_color"; - @include Option("userChrome.theme.proton_color.dark_blue_accent") { - @import "theme/dark_blue_accent"; - } -} -@include Option("userChrome.theme.fully_color") { - @import "theme/fully_color"; -} - -/* Fully Dark Mode ************************************************************/ -@include Option("userChrome.theme.fully_dark") { - @import "theme/fully_dark"; -} - -/* Proton Theme Mode **********************************************************/ -@include Option("userChrome.theme.proton_chrome") { - @import "theme/proton_chrome"; -} - -/* Monospace ******************************************************************/ -@include Option("userChrome.theme.monospace") { - @import "theme/monospace"; -} +/** Theme *********************************************************************/ +@import "theme/index"; /** Decoration ****************************************************************/ @import "decoration/index"; @@ -92,45 +58,14 @@ /** Hidden ********************************************************************/ @import "hidden/index"; -/** Library - Icons Replace ***************************************************/ -@include Option("userChrome.icon.library") { - @import "library/chrome"; -} - -/** Panel - Icons *************************************************************/ -@include Option("userChrome.icon.panel") { - @import "icons/layout_panel"; - @import "icons/panel"; -} - -/** Menu - Icons Layout *******************************************************/ -@include Option("userChrome.icon.menu") { - @import "icons/layout_menu"; - @import "icons/layout_bookmark_menu"; - - @include Option("userChrome.icon.context_menu") { - @import "icons/context_menu"; - } - @include Option("userChrome.icon.global_menubar") { - @import "icons/global_menubar"; - } - @include Option("userChrome.icon.global_menu") { - @import "icons/global_menu"; - } -} - -/** Libray Menu ***************************************************************/ -@include Option("userChrome.icon.library") { - @include Option("userChrome.icon.menu") { - @import "icons/library"; - } -} +/** Icons *********************************************************************/ +@import "icons/index"; -/*= Waterfox =================================================================*/ +/** Waterfox ******************************************************************/ @import "icons/waterfox"; @include Option("userChrome.theme.fully_color") { @import "theme/waterfox"; } -/*= Tor Browser ==============================================================*/ +/** Tor Browser ***************************************************************/ @import "icons/tor_browser"; diff --git a/src/theme/_index.scss b/src/theme/_index.scss new file mode 100644 index 00000000..36f344e0 --- /dev/null +++ b/src/theme/_index.scss @@ -0,0 +1,35 @@ +/*= System Default Theme =====================================================*/ +@include Option("userChrome.theme.system_default") { + @import "system_default_theme"; +} + +/*= Fully Theme Mode =========================================================*/ +// Default Themes +// https://github.com/mozilla/gecko-dev/blob/master/toolkit/mozapps/extensions/default-theme/manifest.json +// https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/light/manifest.json +// https://github.com/mozilla/gecko-dev/blob/master/browser/themes/addons/dark/manifest.json + +@include Option("userChrome.theme.proton_color") { + @import "proton_color"; + @include Option("userChrome.theme.proton_color.dark_blue_accent") { + @import "dark_blue_accent"; + } +} +@include Option("userChrome.theme.fully_color") { + @import "fully_color"; +} + +/*= Fully Dark Mode ==========================================================*/ +@include Option("userChrome.theme.fully_dark") { + @import "fully_dark"; +} + +/*= Proton Theme Mode ========================================================*/ +@include Option("userChrome.theme.proton_chrome") { + @import "proton_chrome"; +} + +/*= Monospace ================================================================*/ +@include Option("userChrome.theme.monospace") { + @import "monospace"; +} From 4fd41702611927ce1ab8a5045c590c57dd671fd5 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 12 Aug 2022 09:06:22 +0900 Subject: [PATCH 73/89] Fix: Tab Bar - Border as transparent --- css/leptonChrome.css | 2 +- src/tabbar/layout/_navbar_padding.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 8a90fec3..a5e57f36 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5028,7 +5028,7 @@ } #nav-bar { border-inline-style: solid !important; - border-inline-color: var(--toolbar-bgcolor); + border-inline-color: transparent; } @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { #nav-bar { diff --git a/src/tabbar/layout/_navbar_padding.scss b/src/tabbar/layout/_navbar_padding.scss index ac068f95..555ab50b 100644 --- a/src/tabbar/layout/_navbar_padding.scss +++ b/src/tabbar/layout/_navbar_padding.scss @@ -91,7 +91,7 @@ #nav-bar { border-inline-style: solid !important; - border-inline-color: var(--toolbar-bgcolor); + border-inline-color: transparent; @include _oneLiner_navBar_borderPadding { border-inline-start-width: var(--uc-window-drag-space-pre); From 91869794299ef208ea294eef2e0b03be483072a5 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 12 Aug 2022 13:19:27 +0900 Subject: [PATCH 74/89] Add: Tabs on Bottom - Hidden at single tab option --- css/leptonChrome.css | 36 ++++++++++++++++++++++++++++++++++++ src/tabbar/_on_bottom.scss | 19 +++++++++++++++++++ user.js | 1 + 3 files changed, 56 insertions(+) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index a5e57f36..f2f76a9b 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -3913,6 +3913,24 @@ } } } + /*= Tabbar - Hidden at singgle tab ===========================================*/ + @supports -moz-bool-pref("userChrome.tabbar.on_bottom.hidden_single_tab") { + #tabbrowser-tabs .tabbrowser-tab:only-of-type { + display: none !important; + } + + #tabbrowser-tabs, + #tabbrowser-tabs arrowscrollbox { + height: auto !important; + min-height: auto !important; + } + + @media (prefers-reduced-motion: no-preference) { + #tabbrowser-tabs { + transition: height 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + } + } + } /*= Menubar - Always on top ==================================================*/ @supports -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") { /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0 @@ -4045,6 +4063,24 @@ } } } + /*= Tabbar - Hidden at singgle tab ===========================================*/ + @supports -moz-bool-pref("userChrome.tabbar.on_bottom.hidden_single_tab") { + #tabbrowser-tabs .tabbrowser-tab:only-of-type { + display: none !important; + } + + #tabbrowser-tabs, + #tabbrowser-tabs arrowscrollbox { + height: auto !important; + min-height: auto !important; + } + + @media screen and (max-width: 1100px) and (prefers-reduced-motion: no-preference) { + #tabbrowser-tabs { + transition: height 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + } + } + } /*= Menubar - Always on top ==================================================*/ @supports -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") { /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0 diff --git a/src/tabbar/_on_bottom.scss b/src/tabbar/_on_bottom.scss index a43cdfd9..60117486 100644 --- a/src/tabbar/_on_bottom.scss +++ b/src/tabbar/_on_bottom.scss @@ -36,6 +36,25 @@ See the above repository for updates as well as full license text. */ } } +/*= Tabbar - Hidden at singgle tab ===========================================*/ +@include Option("userChrome.tabbar.on_bottom.hidden_single_tab") { + #tabbrowser-tabs .tabbrowser-tab:only-of-type { + display: none !important; + } + + #tabbrowser-tabs, + #tabbrowser-tabs arrowscrollbox { + height: auto !important; + min-height: auto !important; + } + + @include Animate { + #tabbrowser-tabs { + transition: height 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + } + } +} + /*= Menubar - Always on top ==================================================*/ @include Option("userChrome.tabbar.on_bottom.menubar_on_top") { /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0 diff --git a/user.js b/user.js index 0c949727..57fc7f1d 100644 --- a/user.js +++ b/user.js @@ -127,6 +127,7 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.tabbar.on_bottom", true); // user_pref("userChrome.tabbar.on_bottom.above_bookmark", true); // Need on_bottom // user_pref("userChrome.tabbar.on_bottom.menubar_on_top", true); // Need on_bottom +// user_pref("userChrome.tabbar.on_bottom.hidden_single_tab", true); // Need on_bottom // user_pref("userChrome.tabbar.one_liner", true); // user_pref("userChrome.tabbar.one_liner.combine_navbar", true); // Need one_liner // user_pref("userChrome.tabbar.one_liner.tabbar_first", true); // Need one_liner From 800388f44c60c6b254fad5c1230ec638b83fa0e1 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 13 Aug 2022 09:04:45 +0900 Subject: [PATCH 75/89] Fix: Auto Hide - Trigers, Start positions --- css/leptonChrome.css | 66 ++++++++++++++++++------------ src/autohide/_common.scss | 15 ++++++- src/autohide/_page_action.scss | 4 +- src/autohide/_tab.scss | 2 +- src/autohide/_toolbar_overlap.scss | 6 +-- src/autohide/sidebar/_overlap.scss | 8 ++-- src/autohide/sidebar/_static.scss | 10 ++--- 7 files changed, 67 insertions(+), 44 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index f2f76a9b..2b8606b0 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6703,7 +6703,7 @@ opacity: 0; } - #urlbar-container:hover #page-action-buttons > .urlbar-page-action, + #urlbar-container:is(:hover, :focus-within) #page-action-buttons > .urlbar-page-action, .urlbar-page-action[open], .urlbar-page-action[open] ~ .urlbar-page-action { margin-inline-end: 0px !important; @@ -6722,7 +6722,7 @@ } } - #urlbar-container:hover #page-action-buttons > .urlbar-page-action, + #urlbar-container:is(:hover, :focus-within) #page-action-buttons > .urlbar-page-action, .urlbar-page-action[open], .urlbar-page-action[open] ~ .urlbar-page-action { transition-delay: 0s !important; @@ -6753,7 +6753,7 @@ transition-duration: 0.2s; transition-delay: 600ms; } - .tabbrowser-tab:not([multiselected]) .tab-content:not(:hover):not([selected]):hover { + .tabbrowser-tab:not([multiselected]) .tab-content:not(:hover):not([selected]):is(:hover, :focus-within) { transition-delay: 0s; } @supports not -moz-bool-pref("userChrome.autohide.tab.opacity") { @@ -6823,9 +6823,21 @@ z-index: 2; } - #TabsToolbar { + #navigator-toolbox:not(:hover) { + animation: 1s keepfront; + } + + @keyframes keepfront { + from { + z-index: 3; + } + to { + z-index: 3; + } + } + #sidebar-box:is(:hover, :focus-within) { position: relative; - z-index: 3; + z-index: 2 !important; } @supports -moz-bool-pref("userChrome.autohide.toolbar_overlap") { @@ -6839,7 +6851,7 @@ transition: margin-top 1s ease, margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); } - #navigator-toolbox:hover { + #navigator-toolbox:is(:hover, :focus-within) { transition-delay: 0s !important; } #navigator-toolbox[inFullscreen="true"] { @@ -6851,19 +6863,19 @@ #navigator-toolbox { transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); } - #navigator-toolbox:hover { + #navigator-toolbox:is(:hover, :focus-within) { transition-delay: 0s !important; } } } @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.autohide.navbar") { @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.tabbar.one_liner") { - #navigator-toolbox:hover { + #navigator-toolbox:is(:hover, :focus-within) { --uc-toolbar-height: var(--uc-tabbar-height); } @supports not -moz-bool-pref("userChrome.autohide.navbar") { @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { - #navigator-toolbox:hover { + #navigator-toolbox:is(:hover, :focus-within) { --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-bm-height)); } } @@ -6871,12 +6883,12 @@ @supports -moz-bool-pref("userChrome.autohide.navbar") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { @supports not -moz-bool-pref("userChrome.autohide.bookmarkbar") { - #navigator-toolbox:hover { + #navigator-toolbox:is(:hover, :focus-within) { --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height)); } } @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { - #navigator-toolbox:hover { + #navigator-toolbox:is(:hover, :focus-within) { --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height) + var(--uc-bm-height)); } } @@ -6885,12 +6897,12 @@ @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (max-width: 1100px) { @supports not -moz-bool-pref("userChrome.autohide.bookmarkbar") { - #navigator-toolbox:hover { + #navigator-toolbox:is(:hover, :focus-within) { --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height)); } } @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { - #navigator-toolbox:hover { + #navigator-toolbox:is(:hover, :focus-within) { --uc-toolbar-height: calc(var(--uc-tabbar-height) + var(--uc-navbar-height) + var(--uc-bm-height)); } } @@ -6903,7 +6915,7 @@ @supports not -moz-bool-pref("userChrome.autohide.tabbar") { @supports not -moz-bool-pref("userChrome.autohide.navbar") { @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { - #navigator-toolbox:hover { + #navigator-toolbox:is(:hover, :focus-within) { --uc-toolbar-height: var(--uc-bm-height); } } @@ -6912,12 +6924,12 @@ @supports -moz-bool-pref("userChrome.autohide.navbar") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { @supports not -moz-bool-pref("userChrome.autohide.bookmarkbar") { - #navigator-toolbox:hover { + #navigator-toolbox:is(:hover, :focus-within) { --uc-toolbar-height: var(--uc-navbar-height); } } @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { - #navigator-toolbox:hover { + #navigator-toolbox:is(:hover, :focus-within) { --uc-toolbar-height: calc(var(--uc-navbar-height) + var(--uc-bm-height)); } } @@ -6926,12 +6938,12 @@ @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (max-width: 1100px) { @supports not -moz-bool-pref("userChrome.autohide.bookmarkbar") { - #navigator-toolbox:hover { + #navigator-toolbox:is(:hover, :focus-within) { --uc-toolbar-height: var(--uc-navbar-height); } } @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { - #navigator-toolbox:hover { + #navigator-toolbox:is(:hover, :focus-within) { --uc-toolbar-height: calc(var(--uc-navbar-height) + var(--uc-bm-height)); } } @@ -7216,7 +7228,7 @@ will-change: min-width, max-width; } - #sidebar-box:hover > #sidebar { + #sidebar-box:is(:hover, :focus-within) > #sidebar { min-width: var(--uc-sidebar-activate-width) !important; max-width: var(--uc-sidebar-activate-width) !important; } @@ -7226,7 +7238,7 @@ padding-inline-start: var(--uc-sidebar-fullscreen-width); will-change: padding-inline-start; } - :root[inFullscreen="true"] #sidebar-box:hover { + :root[inFullscreen="true"] #sidebar-box:is(:hover, :focus-within) { padding-inline-start: var(--uc-sidebar-activate-width); } :root[inFullscreen="true"] #sidebar-box #sidebar-header, @@ -7241,14 +7253,14 @@ transition: min-width 750ms var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; } - #sidebar-box:hover > #sidebar { + #sidebar-box:is(:hover, :focus-within) > #sidebar { transition-delay: 0ms !important; } :root[inFullscreen="true"] #sidebar-box { transition: padding-inline-start 1s var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; } - :root[inFullscreen="true"] #sidebar-box:hover { + :root[inFullscreen="true"] #sidebar-box:is(:hover, :focus-within) { transition-delay: 0ms !important; } } @@ -7261,7 +7273,7 @@ overflow: hidden; will-change: min-width, max-width; } - #sidebar-box:hover { + #sidebar-box:is(:hover, :focus-within) { min-width: var(--uc-sidebar-activate-width) !important; max-width: var(--uc-sidebar-activate-width) !important; } @@ -7270,14 +7282,14 @@ margin-inline-start: var(--uc-sidebar-fullscreen-margin) !important; will-change: margin-inline-start; } - :root[inFullscreen="true"] #sidebar-box:not([positionend="true"]):hover { + :root[inFullscreen="true"] #sidebar-box:not([positionend="true"]):is(:hover, :focus-within) { margin-inline-start: 0 !important; } :root[inFullscreen="true"] #sidebar-box[positionend="true"] { margin-inline-end: var(--uc-sidebar-fullscreen-margin) !important; will-change: margin-inline-end; } - :root[inFullscreen="true"] #sidebar-box[positionend="true"]:hover { + :root[inFullscreen="true"] #sidebar-box[positionend="true"]:is(:hover, :focus-within) { margin-inline-end: 0 !important; } @@ -7285,7 +7297,7 @@ #sidebar-box { transition: min-width 750ms var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; } - #sidebar-box:hover { + #sidebar-box:is(:hover, :focus-within) { transition-delay: 0ms !important; } @@ -7295,7 +7307,7 @@ :root[inFullscreen="true"] #sidebar-box[positionend="true"] { transition-property: margin-inline-end !important; } - :root[inFullscreen="true"] #sidebar-box:hover { + :root[inFullscreen="true"] #sidebar-box:is(:hover, :focus-within) { transition-delay: 0ms !important; } } diff --git a/src/autohide/_common.scss b/src/autohide/_common.scss index 2212c5fb..8347e8a9 100644 --- a/src/autohide/_common.scss +++ b/src/autohide/_common.scss @@ -27,10 +27,21 @@ position: relative; z-index: 2; } + #navigator-toolbox:not(:hover) { + animation: 1s keepfront; + } + @keyframes keepfront { + from { + z-index: 3; + } + to { + z-index: 3; + } + } - #TabsToolbar { + #sidebar-box:is(:hover, :focus-within) { position: relative; - z-index: 3; + z-index: 2 !important; } @include Option("userChrome.autohide.toolbar_overlap") { diff --git a/src/autohide/_page_action.scss b/src/autohide/_page_action.scss index 67ff7926..7ccd65c1 100644 --- a/src/autohide/_page_action.scss +++ b/src/autohide/_page_action.scss @@ -3,7 +3,7 @@ opacity: 0; } -#urlbar-container:hover #page-action-buttons > .urlbar-page-action, +#urlbar-container:is(:hover, :focus-within) #page-action-buttons > .urlbar-page-action, .urlbar-page-action[open], .urlbar-page-action[open] ~ .urlbar-page-action { margin-inline-end: 0px !important; @@ -21,7 +21,7 @@ background-color 2.5s var(--animation-easing-function) !important; } } - #urlbar-container:hover #page-action-buttons > .urlbar-page-action, + #urlbar-container:is(:hover, :focus-within) #page-action-buttons > .urlbar-page-action, .urlbar-page-action[open], .urlbar-page-action[open] ~ .urlbar-page-action{ transition-delay: 0s !important; diff --git a/src/autohide/_tab.scss b/src/autohide/_tab.scss index e9e3e411..3a000c5d 100644 --- a/src/autohide/_tab.scss +++ b/src/autohide/_tab.scss @@ -15,7 +15,7 @@ transition-timing-function: var(--animation-easing-function); transition-duration: 0.2s; transition-delay: 600ms; - &:hover { + &:is(:hover, :focus-within) { transition-delay: 0s; } diff --git a/src/autohide/_toolbar_overlap.scss b/src/autohide/_toolbar_overlap.scss index 258684d8..be1ea04e 100644 --- a/src/autohide/_toolbar_overlap.scss +++ b/src/autohide/_toolbar_overlap.scss @@ -7,7 +7,7 @@ transition: margin-top 1s ease, margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); - &:hover { + &:is(:hover, :focus-within) { transition-delay: 0s !important; } @@ -19,13 +19,13 @@ @include NotOption("userChrome.decoration.animate") { transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); - &:hover { + &:is(:hover, :focus-within) { transition-delay: 0s !important; } } } - &:hover { + &:is(:hover, :focus-within) { @include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar") { @include Option("userChrome.autohide.tabbar", "userChrome.tabbar.one_liner") { --uc-toolbar-height: var(--uc-tabbar-height); diff --git a/src/autohide/sidebar/_overlap.scss b/src/autohide/sidebar/_overlap.scss index 0fa9c28c..c2827019 100644 --- a/src/autohide/sidebar/_overlap.scss +++ b/src/autohide/sidebar/_overlap.scss @@ -5,7 +5,7 @@ will-change: min-width, max-width; } -#sidebar-box:hover > #sidebar { +#sidebar-box:is(:hover, :focus-within) > #sidebar { min-width: var(--uc-sidebar-activate-width) !important; max-width: var(--uc-sidebar-activate-width) !important; } @@ -15,7 +15,7 @@ padding-inline-start: var(--uc-sidebar-fullscreen-width); will-change: padding-inline-start; - &:hover { + &:is(:hover, :focus-within) { padding-inline-start: var(--uc-sidebar-activate-width); } @@ -33,14 +33,14 @@ transition: min-width 750ms var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; } - #sidebar-box:hover > #sidebar { + #sidebar-box:is(:hover, :focus-within) > #sidebar { transition-delay: 0ms !important; } :root[inFullscreen="true"] #sidebar-box { transition: padding-inline-start 1s var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; - &:hover { + &:is(:hover, :focus-within) { transition-delay: 0ms !important; } } diff --git a/src/autohide/sidebar/_static.scss b/src/autohide/sidebar/_static.scss index 22f2986a..c1756c25 100644 --- a/src/autohide/sidebar/_static.scss +++ b/src/autohide/sidebar/_static.scss @@ -3,7 +3,7 @@ overflow: hidden; will-change: min-width, max-width; - &:hover { + &:is(:hover, :focus-within) { min-width: var(--uc-sidebar-activate-width) !important; max-width: var(--uc-sidebar-activate-width) !important; } @@ -14,7 +14,7 @@ margin-inline-start: var(--uc-sidebar-fullscreen-margin) !important; will-change: margin-inline-start; - &:hover { + &:is(:hover, :focus-within) { margin-inline-start: 0 !important; } } @@ -23,7 +23,7 @@ margin-inline-end: var(--uc-sidebar-fullscreen-margin) !important; will-change: margin-inline-end; - &:hover { + &:is(:hover, :focus-within) { margin-inline-end: 0 !important; } } @@ -34,7 +34,7 @@ #sidebar-box { transition: min-width 750ms var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; - &:hover { + &:is(:hover, :focus-within) { transition-delay: 0ms !important; } } @@ -45,7 +45,7 @@ &[positionend="true"] { transition-property: margin-inline-end !important; } - &:hover { + &:is(:hover, :focus-within) { transition-delay: 0ms !important; } } From 43d93610936460ed242a0769b036e648da80dd77 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 14 Aug 2022 22:44:01 +0900 Subject: [PATCH 76/89] Add: Install - Ghostery Browser --- install.ps1 | 1 + install.sh | 2 ++ 2 files changed, 3 insertions(+) diff --git a/install.ps1 b/install.ps1 index c16e4496..af21842a 100644 --- a/install.ps1 +++ b/install.ps1 @@ -390,6 +390,7 @@ $firefoxProfileDirPaths = @( "${HOME}\AppData\Roaming\Mozilla\Firefox", "${HOME}\AppData\Roaming\Waterfox", "${HOME}\AppData\Roaming\librewolf", + "${HOME}\AppData\Roaming\Ghostery Browser", "${HOME}\Desktop\Tor Browser\Browser\TorBrowser\Data\Browser" ) diff --git a/install.sh b/install.sh index ad9823f5..994d470f 100755 --- a/install.sh +++ b/install.sh @@ -338,6 +338,7 @@ firefoxProfileDirPaths=( "${HOME}/.mozilla/firefox" "${HOME}/.waterfox" "${HOME}/.librewolf" + "${HOME}/.ghostery browser" "${HOME}/.pulse-browser" "${HOME}/.firedragon" "${HOME}/.local/opt/tor-browser/app/Browser/TorBrowser/Data/Browser" @@ -346,6 +347,7 @@ firefoxProfileDirPaths=( "${HOME}/Library/Application Support/Firefox" "${HOME}/Library/Application Support/Waterfox" "${HOME}/Library/Application Support/libreWolf" + "${HOME}/Library/Application Support/Ghostery Browser" "${HOME}/Library/Application Support/pulse-browser" "${HOME}/Library/Application Support/TorBrowser/Browser" ) From 097fcedd4fbc2d0d83bd7fe3563490a5a06239b8 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 15 Aug 2022 22:34:13 +0900 Subject: [PATCH 77/89] Doc: README - Feature update --- README.org | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/README.org b/README.org index 31f36c08..1380fc86 100644 --- a/README.org +++ b/README.org @@ -66,6 +66,10 @@ Some settings [[https://github.com/black7375/Firefox-UI-Fix/wiki/Options#using-u - Menu - Density - Others... + - *Tabbar Layouts* + - Tabs on Bottom + - One Liner + - Vertical Tab Support - *Tab Design* - General: - Connect with toolbar(Buttons like tabs) @@ -104,6 +108,7 @@ Some settings [[https://github.com/black7375/Firefox-UI-Fix/wiki/Options#using-u - Overlap mode - *Others* - Animations + - Hidden & Auto Hide - Activate calculator at address bar - Mouse pointer for each context From 5195e8187e9da4cd95faf020056034555f2fd8ad Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 16 Aug 2022 17:14:41 +0900 Subject: [PATCH 78/89] Add: Hidden - Bookmarkbar icon --- css/leptonChrome.css | 5 +++++ src/hidden/_index.scss | 6 ++++++ user.js | 1 + 3 files changed, 12 insertions(+) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 2b8606b0..800d9cc9 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -7448,6 +7448,11 @@ /* Original: 8px */ } } +@supports -moz-bool-pref("userChrome.hidden.bookmarkbar_icon") { + #PlacesToolbarItems .bookmark-item > .toolbarbutton-icon { + display: none; + } +} @supports -moz-bool-pref("userChrome.hidden.selected_tab") { .tabbrowser-tab[selected="true"] { -moz-box-flex: 0 !important; diff --git a/src/hidden/_index.scss b/src/hidden/_index.scss index 6bffbbde..46bbbb26 100644 --- a/src/hidden/_index.scss +++ b/src/hidden/_index.scss @@ -52,6 +52,12 @@ } } +@include Option("userChrome.hidden.bookmarkbar_icon") { + #PlacesToolbarItems .bookmark-item > .toolbarbutton-icon { + display: none; + } +} + @include Option("userChrome.hidden.selected_tab") { .tabbrowser-tab[selected="true"] { -moz-box-flex: 0 !important; diff --git a/user.js b/user.js index 57fc7f1d..0f6fcee5 100644 --- a/user.js +++ b/user.js @@ -92,6 +92,7 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.hidden.sidebar_header", true); // user_pref("userChrome.hidden.sidebar_header.vertical_tab_only", true); // user_pref("userChrome.hidden.urlbar_iconbox", true); +// user_pref("userChrome.hidden.bookmarkbar_icon", true); // user_pref("userChrome.hidden.tab_icon", true); // user_pref("userChrome.hidden.selected_tab", true); // user_pref("userChrome.hidden.disabled_menu", true); From a7a260c6d50142b41aeb8aaf54f9eb9613f04333 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 17 Aug 2022 11:16:14 +0900 Subject: [PATCH 79/89] Clean: Config - Order --- user.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/user.js b/user.js index 0f6fcee5..42731e9d 100644 --- a/user.js +++ b/user.js @@ -68,12 +68,12 @@ user_pref("userChrome.rounding.square_tab", false); // == Theme Custom Settings ==================================================== // -- User Chrome -------------------------------------------------------------- -// user_pref("userChrome.decoration.disable_panel_animate", true); -// user_pref("userChrome.decoration.disable_sidebar_animate", true); - // user_pref("userChrome.theme.proton_color.dark_blue_accent", true); // user_pref("userChrome.theme.monospace", true); +// user_pref("userChrome.decoration.disable_panel_animate", true); +// user_pref("userChrome.decoration.disable_sidebar_animate", true); + // user_pref("userChrome.autohide.tab", true); // user_pref("userChrome.autohide.tab.opacity", true); // user_pref("userChrome.autohide.tab.blur", true); From f6cd9de1807716be5d17632735432717d6d8404b Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 18 Aug 2022 11:15:55 +0900 Subject: [PATCH 80/89] Fix: URL View options --- css/leptonChrome.css | 5 +++-- src/urlview/_always_show_page_actions.scss | 3 ++- src/urlview/_move_icon_to_left.scss | 2 +- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 800d9cc9..296a570b 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6454,7 +6454,7 @@ .urlbarView-type-icon { min-width: 16px !important; height: 16px !important; - margin-bottom: 0 !important; + margin-block: 0 !important; margin-inline-start: 0 !important; } @@ -6470,8 +6470,9 @@ } /*= Url View - Always show page actions ======================================*/ @supports -moz-bool-pref("userChrome.urlView.always_show_page_actions") { - #pageActionButton { + #urlbar:not([breakout-extend="true"]) #pageActionButton { display: block !important; + visibility: visible !important; } } /** Panel UI ******************************************************************/ diff --git a/src/urlview/_always_show_page_actions.scss b/src/urlview/_always_show_page_actions.scss index 11ba6c6b..d489f800 100644 --- a/src/urlview/_always_show_page_actions.scss +++ b/src/urlview/_always_show_page_actions.scss @@ -1,3 +1,4 @@ -#pageActionButton { +#urlbar:not([breakout-extend="true"]) #pageActionButton { display: block !important; + visibility: visible !important; } diff --git a/src/urlview/_move_icon_to_left.scss b/src/urlview/_move_icon_to_left.scss index 27ddfb3c..bbb4353f 100644 --- a/src/urlview/_move_icon_to_left.scss +++ b/src/urlview/_move_icon_to_left.scss @@ -1,7 +1,7 @@ .urlbarView-type-icon { min-width: 16px !important; height: 16px !important; - margin-bottom: 0 !important; + margin-block: 0 !important; margin-inline-start: 0 !important; } From e2d71ebc18077783864de4b964f838386f98c55e Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 18 Aug 2022 16:11:05 +0900 Subject: [PATCH 81/89] Fix: Rounding - Menu --- css/leptonChrome.css | 1 + src/rounding/_square.scss | 1 + 2 files changed, 2 insertions(+) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 296a570b..6bf39224 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -3113,6 +3113,7 @@ } @supports -moz-bool-pref("userChrome.rounding.square_menupopup") { xul|menupopup { + --panel-border-radius: 0px !important; border-radius: 0 !important; } } diff --git a/src/rounding/_square.scss b/src/rounding/_square.scss index 5ca97b2c..10d9ab70 100644 --- a/src/rounding/_square.scss +++ b/src/rounding/_square.scss @@ -35,6 +35,7 @@ @include Option("userChrome.rounding.square_menupopup") { xul|menupopup { + --panel-border-radius: 0px !important; border-radius: 0 !important; } } From 0e11b2858ede41146453ea1e394b759c1bce4109 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 19 Aug 2022 09:20:21 +0900 Subject: [PATCH 82/89] Fix: Hidden - URL icon box --- css/leptonChrome.css | 22 ++++------------------ src/hidden/_index.scss | 6 ++---- 2 files changed, 6 insertions(+), 22 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 6bf39224..e001f48d 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -7426,26 +7426,12 @@ } } @supports -moz-bool-pref("userChrome.hidden.urlbar_iconbox") { - #identity-box[pageproxystate="valid"] - #identity-box[pageproxystate="valid"] - #identity-box[pageproxystate="valid"] - .notSecureText - #identity-icon-label, - #identity-box[pageproxystate="valid"] - #identity-box[pageproxystate="valid"] - #identity-box[pageproxystate="valid"] - .chromeUI - #identity-icon-box, - #identity-box[pageproxystate="valid"] - #identity-box[pageproxystate="valid"] - #identity-box[pageproxystate="valid"].extensionPage - #identity-icon-box { + #identity-box[pageproxystate="valid"].notSecureText #identity-icon-label, + #identity-box[pageproxystate="valid"].chromeUI #identity-icon-box, + #identity-box[pageproxystate="valid"].extensionPage #identity-icon-box { display: none; } - #identity-box[pageproxystate="valid"] - #identity-box[pageproxystate="valid"] - #identity-box[pageproxystate="valid"].notSecureText - #identity-icon-box { + #identity-box[pageproxystate="valid"].notSecureText #identity-icon-box { padding-inline-end: 5px; /* Original: 8px */ } diff --git a/src/hidden/_index.scss b/src/hidden/_index.scss index 46bbbb26..0597823a 100644 --- a/src/hidden/_index.scss +++ b/src/hidden/_index.scss @@ -37,11 +37,9 @@ } @include Option("userChrome.hidden.urlbar_iconbox") { - #identity-box[pageproxystate="valid"] - #identity-box[pageproxystate="valid"] #identity-box[pageproxystate="valid"] { - .notSecureText #identity-icon-label, - .chromeUI #identity-icon-box, + &.notSecureText #identity-icon-label, + &.chromeUI #identity-icon-box, &.extensionPage #identity-icon-box { display: none; } From 76e37ffeafbb40346ab3c2357b3e72ae5964eaa4 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 19 Aug 2022 13:20:40 +0900 Subject: [PATCH 83/89] Add: Hidden - Bookmarkbar Label --- css/leptonChrome.css | 7 +++++++ src/hidden/_index.scss | 13 ++++++++++--- user.js | 1 + 3 files changed, 18 insertions(+), 3 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index e001f48d..2456f179 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -7441,6 +7441,13 @@ display: none; } } +@supports -moz-bool-pref("userChrome.hidden.bookmarkbar_label") { + #PlacesToolbarItems .bookmark-item > .toolbarbutton-text { + visibility: collapse; + /* display: none is not work */ + } +} + @supports -moz-bool-pref("userChrome.hidden.selected_tab") { .tabbrowser-tab[selected="true"] { -moz-box-flex: 0 !important; diff --git a/src/hidden/_index.scss b/src/hidden/_index.scss index 0597823a..75a49fd7 100644 --- a/src/hidden/_index.scss +++ b/src/hidden/_index.scss @@ -50,9 +50,16 @@ } } -@include Option("userChrome.hidden.bookmarkbar_icon") { - #PlacesToolbarItems .bookmark-item > .toolbarbutton-icon { - display: none; +#PlacesToolbarItems .bookmark-item { + @include Option("userChrome.hidden.bookmarkbar_icon") { + > .toolbarbutton-icon { + display: none; + } + } + @include Option("userChrome.hidden.bookmarkbar_label") { + > .toolbarbutton-text { + visibility: collapse; /* display: none is not work */ + } } } diff --git a/user.js b/user.js index 42731e9d..abbef0a4 100644 --- a/user.js +++ b/user.js @@ -93,6 +93,7 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.hidden.sidebar_header.vertical_tab_only", true); // user_pref("userChrome.hidden.urlbar_iconbox", true); // user_pref("userChrome.hidden.bookmarkbar_icon", true); +// user_pref("userChrome.hidden.bookmarkbar_label", true); // user_pref("userChrome.hidden.tab_icon", true); // user_pref("userChrome.hidden.selected_tab", true); // user_pref("userChrome.hidden.disabled_menu", true); From ccd1a8e7a798bb392f54c9cfcc9d042b35da3940 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 20 Aug 2022 19:09:29 +0900 Subject: [PATCH 84/89] Fix: Tab Bar - As titlebar with pinned tab --- css/leptonChrome.css | 131 ++++++++++++-------- src/tabbar/_as_titlebar.scss | 27 ++-- src/tabbar/_index.scss | 3 + src/tabbar/layout/_navbar_padding.scss | 43 ++----- src/tabbar/layout/_window_control_size.scss | 27 ++++ 5 files changed, 131 insertions(+), 100 deletions(-) create mode 100644 src/tabbar/layout/_window_control_size.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 2456f179..08058118 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 40ef1a8f..77f51753 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 7fa84a8d..0f5909d2 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 555ab50b..41f22b51 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 00000000..c3bb0509 --- /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 */ +} From e0827fdec1fe64f69931cda8afe35136775c2f4f Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 21 Aug 2022 01:03:14 +0900 Subject: [PATCH 85/89] Fix: Tab Bar - As titlebar pre space --- css/leptonChrome.css | 30 +++++++++++++------ src/tabbar/_as_titlebar.scss | 58 ++++++++++++++---------------------- 2 files changed, 44 insertions(+), 44 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 08058118..154f0a28 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5279,6 +5279,27 @@ width: unset !important; } + /* Padding */ + @supports not -moz-bool-pref("userChrome.centered.tab") { + #tabbrowser-arrowscrollbox { + margin-inline: 2px !important; + } + + :root[sizemode="normal"] #tabbrowser-arrowscrollbox { + margin-inline: 6px !important; + } + } + @supports -moz-bool-pref("userChrome.centered.tab") { + @supports -moz-bool-pref("userChrome.centered.tab.label") { + #tabbrowser-arrowscrollbox { + margin-inline: 2px !important; + } + + :root[sizemode="normal"] #tabbrowser-arrowscrollbox { + margin-inline: 6px !important; + } + } + } @supports -moz-bool-pref("browser.tabs.tabmanager.enabled") { :root:not([tabsintitlebar="true"]) #tabbrowser-tabs:not([overflow="true"], [hashiddentabs]) ~ #alltabs-button, :root:not([tabsintitlebar="true"]) @@ -5287,15 +5308,6 @@ display: -moz-box !important; } } - #tabbrowser-tabs:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox { - padding-inline: 12.5px !important; - } - - #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) - > #tabbrowser-arrowscrollbox - > .tabbrowser-tab[first-visible-unpinned-tab] { - --inline-tab-padding: 0 !important; - } } /** Tab UI ****************************************************************/ /*= Tab - Connect to window ==============================================*/ diff --git a/src/tabbar/_as_titlebar.scss b/src/tabbar/_as_titlebar.scss index 77f51753..433e6ec7 100644 --- a/src/tabbar/_as_titlebar.scss +++ b/src/tabbar/_as_titlebar.scss @@ -1,3 +1,17 @@ +//-- Mixin --------------------------------------------------------------------- +@mixin _asTitlebar_preSpacer() { + @include NotOption("userChrome.centered.tab") { + @content; + } + @include Option("userChrome.centered.tab") { + @include Option("userChrome.centered.tab.label") { + @content; + } + } +} + +//------------------------------------------------------------------------------ + :root:not([tabsintitlebar="true"]) #tabbrowser-tabs, /* Show only */ #scrollbutton-up, /* Defaults */ #scrollbutton-down, @@ -33,7 +47,6 @@ spacer:is([part="overflow-start-indicator"], [part="overflow-end-indicator"]), width: 100%; } - /* Pinned */ #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned][selected="true"] { position: relative !important; @@ -55,44 +68,19 @@ spacer:is([part="overflow-start-indicator"], [part="overflow-end-indicator"]), width: unset !important; } +/* Padding */ +@include _asTitlebar_preSpacer { + #tabbrowser-arrowscrollbox { + margin-inline: 2px !important; + } + :root[sizemode="normal"] #tabbrowser-arrowscrollbox { + margin-inline: 6px !important; + } + -// @supports not -moz-bool-pref("browser.tabs.tabmanager.enabled") { -// #tabbrowser-tabs:not([overflow="true"], [hashiddentabs]) ~ #alltabs-button { -// display: none; -// } -// #tabbrowser-tabs:not([overflow="true"])[using-closing-tabs-spacer] ~ #alltabs-button { -// // temporary space to keep a tab's close button under the cursor -// display: -moz-box; -// visibility: hidden; -// } -// } -// -// #tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow="true"]) ~ #new-tab-button, -// #tabbrowser-tabs[overflow="true"] > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button, -// #tabbrowser-tabs:not([hasadjacentnewtabbutton]) > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button, -// #TabsToolbar[customizing="true"] #tabs-newtab-button { -// display: none; -// } -// -// #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox::part(scrollbox) { -// // Add padding to match the shadow's blur radius so the -// // shadow doesn't get clipped when either the first or -// // last tab is selected -// padding-inline: var(--tab-shadow-max-size); // 6px -// } -// -// #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] { -// margin-inline-start: 12px !important; -// } @include Option("browser.tabs.tabmanager.enabled") { :root:not([tabsintitlebar="true"]) #tabbrowser-tabs:not([overflow="true"], [hashiddentabs]) ~ #alltabs-button, :root:not([tabsintitlebar="true"]) #tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow="true"]) ~ #new-tab-button { display: -moz-box !important; } } -#tabbrowser-tabs:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox { - padding-inline: 12.5px !important; -} -#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] { - --inline-tab-padding: 0 !important; -} From 2589147981be10b432c31027bf00639b946e842a Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 21 Aug 2022 19:12:13 +0900 Subject: [PATCH 86/89] Fix: Hidden - Remove `userChrome.hidden.selected_tab` --- css/leptonChrome.css | 7 ------- src/hidden/_index.scss | 8 -------- src/tabbar/_as_titlebar.scss | 1 + user.js | 1 - 4 files changed, 1 insertion(+), 16 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 154f0a28..7dea0378 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -7481,13 +7481,6 @@ } } -@supports -moz-bool-pref("userChrome.hidden.selected_tab") { - .tabbrowser-tab[selected="true"] { - -moz-box-flex: 0 !important; - min-width: 0 !important; - max-width: 0 !important; - } -} @supports -moz-bool-pref("userChrome.hidden.disabled_menu") { menu[disabled="true"], menuitem:not(#context-back, #context-forward)[disabled="true"] { diff --git a/src/hidden/_index.scss b/src/hidden/_index.scss index 75a49fd7..9260a34a 100644 --- a/src/hidden/_index.scss +++ b/src/hidden/_index.scss @@ -63,14 +63,6 @@ } } -@include Option("userChrome.hidden.selected_tab") { - .tabbrowser-tab[selected="true"] { - -moz-box-flex: 0 !important; - min-width: 0 !important; - max-width: 0 !important; - } -} - @include Option("userChrome.hidden.disabled_menu") { menu, menuitem:not(#context-back, #context-forward) { diff --git a/src/tabbar/_as_titlebar.scss b/src/tabbar/_as_titlebar.scss index 433e6ec7..2bdacab2 100644 --- a/src/tabbar/_as_titlebar.scss +++ b/src/tabbar/_as_titlebar.scss @@ -76,6 +76,7 @@ spacer:is([part="overflow-start-indicator"], [part="overflow-end-indicator"]), :root[sizemode="normal"] #tabbrowser-arrowscrollbox { margin-inline: 6px !important; } +} @include Option("browser.tabs.tabmanager.enabled") { diff --git a/user.js b/user.js index abbef0a4..15e9494b 100644 --- a/user.js +++ b/user.js @@ -95,7 +95,6 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.hidden.bookmarkbar_icon", true); // user_pref("userChrome.hidden.bookmarkbar_label", true); // user_pref("userChrome.hidden.tab_icon", true); -// user_pref("userChrome.hidden.selected_tab", true); // user_pref("userChrome.hidden.disabled_menu", true); // user_pref("userChrome.centered.tab", true); From 839357cf5b9a362017fbee07cdc74b2de7690032 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 22 Aug 2022 04:27:54 +0900 Subject: [PATCH 87/89] Fix: Autoh Hide - Fill URL Bar Animate --- css/leptonChrome.css | 14 ++++++++++++-- src/autohide/_fill_urlbar.scss | 3 ++- src/autohide/_navbar.scss | 7 +++++++ 3 files changed, 21 insertions(+), 3 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 7dea0378..67f7e5de 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -7167,6 +7167,14 @@ opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), var(--ext-theme-background-transition) !important; } + @supports -moz-bool-pref("userChrome.autohide.fill_urlbar") { + #nav-bar:not([customizing]) { + transition: margin-inline 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + var(--ext-theme-background-transition) !important; + } + } #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { transition-delay: 0s !important; @@ -7366,7 +7374,8 @@ @supports -moz-bool-pref("userChrome.tabbar.one_liner") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { #nav-bar { - transition: margin-inline 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + transition: margin-inline 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + var(--ext-theme-background-transition) !important; } #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) { @@ -7376,7 +7385,8 @@ @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (prefers-reduced-motion: no-preference) and (min-width: 1100px) { #nav-bar { - transition: margin-inline 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + transition: margin-inline 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + var(--ext-theme-background-transition) !important; } #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) { diff --git a/src/autohide/_fill_urlbar.scss b/src/autohide/_fill_urlbar.scss index f7c51c51..6101b6be 100644 --- a/src/autohide/_fill_urlbar.scss +++ b/src/autohide/_fill_urlbar.scss @@ -12,7 +12,8 @@ @include Animate { @include OneLiner { #nav-bar { - transition: margin-inline 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay); + transition: margin-inline 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + var(--ext-theme-background-transition) !important; } #nav-bar:is(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) { transition-delay: 0s !important; diff --git a/src/autohide/_navbar.scss b/src/autohide/_navbar.scss index b7c5f69a..43a11026 100644 --- a/src/autohide/_navbar.scss +++ b/src/autohide/_navbar.scss @@ -15,6 +15,13 @@ transition: margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), var(--ext-theme-background-transition) !important; + + @include Option("userChrome.autohide.fill_urlbar") { + transition: margin-inline 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + margin-bottom 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + var(--ext-theme-background-transition) !important; + } } #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { transition-delay: 0s !important; From d9685ac6bd9c63b7b42262fc04ffc0721b70b441 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 22 Aug 2022 14:57:50 +0900 Subject: [PATCH 88/89] Fix: Sound Tab - Apply `userChrome.tab.sound_show_label` preferentially --- css/leptonChrome.css | 6 ++++-- src/tab/_sound_tab.scss | 4 +++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 67f7e5de..bf32cc03 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6208,8 +6208,10 @@ /*= Sound Tab ================================================================*/ /*= Sound Tab - Hide Label ===================================================*/ @supports -moz-bool-pref("userChrome.tab.sound_hide_label") { - .tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]) { - display: none !important; + @supports not -moz-bool-pref("userChrome.tab.sound_show_label") { + .tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]) { + display: none !important; + } } } /*= Sound Tab - Show Label ===================================================*/ diff --git a/src/tab/_sound_tab.scss b/src/tab/_sound_tab.scss index 23ca831d..6adad7b9 100644 --- a/src/tab/_sound_tab.scss +++ b/src/tab/_sound_tab.scss @@ -1,6 +1,8 @@ /*= Sound Tab - Hide Label ===================================================*/ @include Option("userChrome.tab.sound_hide_label") { - @import "sound_tab/hide_label"; + @include NotOption("userChrome.tab.sound_show_label") { + @import "sound_tab/hide_label"; + } } /*= Sound Tab - Show Label ===================================================*/ From 3a1510d1630068a37ce9a95acfd2738b000420d3 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 22 Aug 2022 15:43:00 +0900 Subject: [PATCH 89/89] Add: Hidden - Tab icon always --- css/leptonChrome.css | 73 ++++++++++++++++------ src/hidden/_index.scss | 13 +++- src/tab/sound_tab/_show_with_favicons.scss | 63 ++++++++++++++----- user.js | 3 +- 4 files changed, 116 insertions(+), 36 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index bf32cc03..06f3a6ca 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6251,10 +6251,20 @@ opacity: 1 !important; } - .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label { - transform: translateX(4px); + /* Label */ + @supports not -moz-bool-pref("userChrome.hidden.tab_icon") { + .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label { + transform: translateX(4px); + } + } + @supports -moz-bool-pref("userChrome.hidden.tab_icon") { + @supports not -moz-bool-pref("userChrome.hidden.tab_icon.always") { + .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) + .tab-label { + transform: translateX(4px); + } + } } - /* Animate */ @media (prefers-reduced-motion: no-preference) { .tab-icon-overlay:not([crashed]), @@ -6268,21 +6278,39 @@ } /* None exist favicon - Size bigger */ @supports not -moz-bool-pref("userChrome.tab.always_show_tab_icon") { - .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]) { - transform: translateX(-0.5px) translateY(-1px); - inset-inline-end: 0 !important; - margin-inline-end: 0 !important; - padding: 0 !important; - } - - .tabbrowser-tab:not([image]):is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-image:not([pinned]) { - opacity: 0 !important; - /* Favicon hidden */ + @supports not -moz-bool-pref("userChrome.hidden.tab_icon") { + .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]) { + transform: translateX(-0.5px) translateY(-1px); + inset-inline-end: 0 !important; + margin-inline-end: 0 !important; + padding: 0 !important; + } + .tabbrowser-tab:not([image]):is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-image:not([pinned]) { + opacity: 0 !important; + /* Favicon hidden */ + } + .tabbrowser-tab:not([image]):not([image]):not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) + .tab-label { + transform: translateX(3px); + } } - - .tabbrowser-tab:not([image]):not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) - .tab-label { - transform: translateX(3px); + @supports -moz-bool-pref("userChrome.hidden.tab_icon") { + @supports not -moz-bool-pref("userChrome.hidden.tab_icon.always") { + .tabbrowser-tab .tab-icon-overlay:not([pinned], [sharing], [crashed]) { + transform: translateX(-0.5px) translateY(-1px); + inset-inline-end: 0 !important; + margin-inline-end: 0 !important; + padding: 0 !important; + } + .tabbrowser-tab:is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-image:not([pinned]) { + opacity: 0 !important; + /* Favicon hidden */ + } + .tabbrowser-tab:not([image]):not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) + .tab-label { + transform: translateX(3px); + } + } } } /* Busy - Show */ @@ -7453,8 +7481,15 @@ } } @supports -moz-bool-pref("userChrome.hidden.tab_icon") { - .tabbrowser-tab:not([pinned="true"]) .tab-icon-stack { - display: none; + @supports not -moz-bool-pref("userChrome.hidden.tab_icon.always") { + .tabbrowser-tab:not([pinned="true"]) .tab-icon-image { + display: none; + } + } + @supports -moz-bool-pref("userChrome.hidden.tab_icon.always") { + .tabbrowser-tab:not([pinned="true"]) .tab-icon-stack { + display: none; + } } } @supports -moz-bool-pref("userChrome.hidden.sidebar_header") { diff --git a/src/hidden/_index.scss b/src/hidden/_index.scss index 9260a34a..8b38239b 100644 --- a/src/hidden/_index.scss +++ b/src/hidden/_index.scss @@ -13,8 +13,17 @@ } @include Option("userChrome.hidden.tab_icon") { - .tabbrowser-tab:not([pinned="true"]) .tab-icon-stack { - display: none; + .tabbrowser-tab:not([pinned="true"]) { + @include NotOption("userChrome.hidden.tab_icon.always") { + .tab-icon-image { + display: none; + } + } + @include Option("userChrome.hidden.tab_icon.always") { + .tab-icon-stack { + display: none; + } + } } } diff --git a/src/tab/sound_tab/_show_with_favicons.scss b/src/tab/sound_tab/_show_with_favicons.scss index bfbb5651..8427e965 100644 --- a/src/tab/sound_tab/_show_with_favicons.scss +++ b/src/tab/sound_tab/_show_with_favicons.scss @@ -1,3 +1,30 @@ +//-- Mixin --------------------------------------------------------------------- +@mixin _hidden_tabIcon_soundTabLabel() { + @include NotOption("userChrome.hidden.tab_icon") { + @content; + } + @include Option("userChrome.hidden.tab_icon") { + @include NotOption("userChrome.hidden.tab_icon.always") { + @content; + } + } +} + +@mixin _hidden_tabIcon_soundTabIcon() { + @include NotOption("userChrome.hidden.tab_icon") { + &:not([image]) { + @content; + } + } + @include Option("userChrome.hidden.tab_icon") { + @include NotOption("userChrome.hidden.tab_icon.always") { + @content; + } + } +} + +//------------------------------------------------------------------------------ + /* Makes the favicons always visible (also on hover) */ .tab-icon-image:not([pinned]) { opacity: 1 !important; @@ -26,8 +53,12 @@ fill-opacity: 0.8 !important; opacity: 1 !important; } -.tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label { - transform: translateX(4px); + +/* Label */ +@include _hidden_tabIcon_soundTabLabel { + .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label { + transform: translateX(4px); + } } /* Animate */ @@ -44,18 +75,22 @@ /* None exist favicon - Size bigger */ @include NotOption("userChrome.tab.always_show_tab_icon") { - .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]) { - transform: translateX(-0.5px) translateY(-1px); - inset-inline-end: 0 !important; - margin-inline-end: 0 !important; - padding: 0 !important; - } - .tabbrowser-tab:not([image]):is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-image:not([pinned]) { - opacity: 0 !important; /* Favicon hidden */ - } - .tabbrowser-tab:not([image]):not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) - .tab-label { - transform: translateX(3px); + .tabbrowser-tab { + @include _hidden_tabIcon_soundTabIcon { + .tab-icon-overlay:not([pinned], [sharing], [crashed]) { + transform: translateX(-0.5px) translateY(-1px); + inset-inline-end: 0 !important; + margin-inline-end: 0 !important; + padding: 0 !important; + } + &:is([soundplaying], [muted], [activemedia-blocked]) .tab-icon-image:not([pinned]) { + opacity: 0 !important; /* Favicon hidden */ + } + &:not([image]):not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) + .tab-label { + transform: translateX(3px); + } + } } } diff --git a/user.js b/user.js index 15e9494b..beb50434 100644 --- a/user.js +++ b/user.js @@ -87,6 +87,8 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.autohide.page_action", true); // user_pref("userChrome.autohide.toolbar_overlap", true); +// user_pref("userChrome.hidden.tab_icon", true); +// user_pref("userChrome.hidden.tab_icon.always", true); // user_pref("userChrome.hidden.tabbar", true); // user_pref("userChrome.hidden.navbar", true); // user_pref("userChrome.hidden.sidebar_header", true); @@ -94,7 +96,6 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.hidden.urlbar_iconbox", true); // user_pref("userChrome.hidden.bookmarkbar_icon", true); // user_pref("userChrome.hidden.bookmarkbar_label", true); -// user_pref("userChrome.hidden.tab_icon", true); // user_pref("userChrome.hidden.disabled_menu", true); // user_pref("userChrome.centered.tab", true);