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 534436d..e1f4c4e 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 353bd45..19a9b83 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 0000000..816d2d2 --- /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 0000000..ca2d0e5 --- /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 c5d9fa4..6498ef9 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 e1f4c4e..26e5930 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 4b18055..0456f43 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 0000000..4ea9ff8 --- /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 6498ef9..1817006 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 | 49 ++++++++++++++++++--------------- src/padding/_tabbar_width.scss | 8 ++++-- src/tabbar/_one_line.scss | 30 ++++++++++---------- src/tabbar/_tabs_on_bottom.scss | 4 +-- 4 files changed, 49 insertions(+), 42 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 26e5930..b20429e 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") { + :root { + --uc-navbar-size: 40vw; + } + #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; + 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 52b2b7e..a0e58bd 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 4ea9ff8..695e224 100644 --- a/src/tabbar/_one_line.scss +++ b/src/tabbar/_one_line.scss @@ -1,25 +1,16 @@ +:root { + --uc-navbar-size: 40vw; +} + #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; + 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 f197f8a..4b06545 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 b20429e..70f0ca8 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 0456f43..b59becc 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 0000000..37c5c81 --- /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 695e224..1508165 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 4b06545..4e7943a 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 0000000..9926444 --- /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 0000000..c309d49 --- /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 1817006..ff540d0 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 70f0ca8..cb5c5b7 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 0000000..5024524 --- /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 0000000..312f689 --- /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 19a9b83..fbce8b1 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 ff540d0..ed9b9b6 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 cb5c5b7..8e0c925 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 c7ebae4..6537d2f 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 0000000..dc90af5 --- /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 b59becc..e6d0096 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 0000000..e735af6 --- /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 0000000..b5b25d0 --- /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 6537d2f..bbeb6b7 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 ed9b9b6..1694895 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 8e0c925..ebfad75 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 e735af6..1549e6e 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 bbeb6b7..a26f220 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 ebfad75..5908513 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; + @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:not([busy]) .tab-icon-stack { - width: 0 !important; - position: absolute; - bottom: 8px; + @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-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 0000000..b9b7459 --- /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 8b237a8..0762caf 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 e6d0096..fe5808f 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 1694895..811031f 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 5908513..b5fe956 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 b9b7459..40ef1a8 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 b5fe956..5fd99a8 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 312f689..5d3c652 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 0000000..8e395d6 --- /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 0000000..95ecff0 --- /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 811031f..d405c49 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 5fd99a8..0458363 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 95ecff0..d9af518 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; + + &: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:hover { - transform: translateX(var(--uc-sidebar-hover-width)) !important; - transition-delay: 0ms !important; -} +@include Animate { + #sidebar { + transition: min-width 750ms var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !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); + #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 | 129 ++++++++++++++++++----------- src/autohide/_sidebar.scss | 38 ++++++++- src/autohide/sidebar/_overlay.scss | 33 +------- src/autohide/sidebar/_static.scss | 38 +++++++++ user.js | 1 + 5 files changed, 159 insertions(+), 80 deletions(-) create mode 100644 src/autohide/sidebar/_static.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 0458363..b95df9a 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; + 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; } - #sidebar-header, - #sidebar { - box-shadow: 1px 5px 15px -5px var(--uc-sidebar-shadow-color); - } + @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-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; - } - - :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; - } - - @media (prefers-reduced-motion: no-preference) { #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 { - transition: transform 1s var(--animation-easing-function) var(--uc-autohide-sidebar-delay) !important; + 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 { - transition-delay: 0ms !important; + 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 { + 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 { + 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 8e395d6..f066eb6 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 d9af518..571ada8 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 0000000..c00f98b --- /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 d405c49..382efb8 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 b95df9a..40cf40c 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; + } - @supports -moz-bool-pref("userChrome.autohide.sidebar.overlap") { + :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.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 f066eb6..8247184 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; - @include Option("userChrome.autohide.sidebar.overlap") { + 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.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 571ada8..cd3ec0b 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 c00f98b..01516f1 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 25997a7..6b969fe 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 382efb8..b158b79 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 40cf40c..9e49a65 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 8247184..ba58cd8 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 fbce8b1..1a5717b 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 9e49a65..1bccfa0 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 fe5808f..4914d4a 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 1508165..8eed94d 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 b158b79..fbaa1f5 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 1bccfa0..11b4889 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 0000000..94f6001 --- /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 0000000..27c61d0 --- /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 0000000..59c0a22 --- /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 fbaa1f5..6d46603 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 11b4889..5e5c3e4 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 2f55da5..453f405 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 b82fe30..66a92fe 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 5e5c3e4..d1e630e 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 5d3c652..152d2ec 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 6d46603..5d6eea5 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 d1e630e..c2f7ccd 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 0000000..cc5a718 --- /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 59c0a22..baa0157 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 c2f7ccd..324ad49 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 cc5a718..2bdf17b 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 0000000..6bcb448 --- /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 152d2ec..e59b95e 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 0000000..73ef4c1 --- /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 5d6eea5..08e2d74 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 | 48 ++++++------ 4 files changed, 98 insertions(+), 108 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 324ad49..a4c1682 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 2bdf17b..dc7a774 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 6bcb448..be28607 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 73ef4c1..43602d0 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; -} - -/* 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); } + +: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), + 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 a4c1682..3651f27 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 e59b95e..50de57d 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 0000000..a55060e --- /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 08e2d74..588804e 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 3651f27..c3c3283 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 a55060e..d28c48b 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 | 198 ++++++++++++--------------------- src/autohide/_bookmarkbar.scss | 41 ++----- src/autohide/_common.scss | 17 ++- src/autohide/_navbar.scss | 40 ++----- src/autohide/_tabbar.scss | 50 ++------- 5 files changed, 108 insertions(+), 238 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index c3c3283..4a284cb 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") { - :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)); - } - - #PersonalToolbar:not([customizing]) { - position: relative; - z-index: 2; - } -} -@supports -moz-bool-pref("userChrome.autohide.tabbar") { +@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-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))); - } + --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; } - :root:not([customizing]) #navigator-toolbox { + #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); - } - @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]) { - 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, - background-color 1s var(--animation-easing-function) !important; - } - - #TabsToolbar:not([customizing]) { - transition: opacity 0.25s var(--animation-easing-function) 600ms !important; - } - - #navigator-toolbox:hover { - transition-delay: 0s !important; - } - #navigator-toolbox:hover > #titlebar { - transition-delay: 0s !important; - } - #navigator-toolbox:hover #TabsToolbar { - 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; - opacity: 0; - } - #TabsToolbar { position: relative; z-index: 3; } +} +@supports -moz-bool-pref("userChrome.autohide.tabbar") { + #navigator-toolbox:not(:hover) > #titlebar { + -moz-window-dragging: no-drag !important; + pointer-events: none; + } - #navigator-toolbox:is(:hover, :focus-within) > .browser-toolbar { - transform: translateY(0); + :root:not([customizing]) #titlebar { + margin-bottom: var(--uc-titlebar-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; } - /* Move up the content view */ - :root[sessionrestored]:not([inFullscreen]) > body > #browser { - margin-top: var(--uc-navbar-hide-height); + @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-titlebar-hide-height); + opacity: 0; + will-change: margin-bottom, opacity; } - :root[sessionrestored] #nav-bar:-moz-lwtheme { - transition: var(--ext-theme-background-transition); + #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { + margin-bottom: 0; + opacity: 1; } @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 dc7a774..24de7f5 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 be28607..69da7b2 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; } - #PersonalToolbar:not([customizing]) { + #navigator-toolbox { position: relative; - z-index: 2; + z-index: 1; + } + + #TabsToolbar { + position: relative; + z-index: 3; } } diff --git a/src/autohide/_navbar.scss b/src/autohide/_navbar.scss index 43602d0..d5bd632 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 d28c48b..6fd6e04 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 4a284cb..ea214b9 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 69da7b2..28a1de9 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 588804e..a262092 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 ea214b9..296b27c 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 cd3ec0b..cad04cc 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 01516f1..22f2986 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 baa0157..1cd575f 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 296b27c..aeea15e 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 9633b1b..4088c02 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 aeea15e..f227a0d 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 37c5c81..bfab821 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 9926444..10f7c1a 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 f227a0d..4b37108 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 28a1de9..e6df5b6 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 d5bd632..74e2d27 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 6fd6e04..38f9ae6 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 0000000..bf9555d --- /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 8eed94d..59ad438 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 | 156 +++++++++++++++-------------- src/autohide/_index.scss | 12 ++- src/autohide/_navbar.scss | 12 ++- src/autohide/_tabbar.scss | 5 - src/autohide/_toolbar_overlap.scss | 34 +++---- 5 files changed, 113 insertions(+), 106 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 4b37108..702d8e6 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; - } - } -} -@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; - } - #navigator-toolbox:is(:hover, :focus-within) #nav-bar:not([customizing]) { - margin-bottom: 0; - 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; + } - @media (prefers-reduced-motion: no-preference) { + #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") or -moz-bool-pref("userChrome.tab.one_liner") { #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; + opacity: 0; + will-change: margin-bottom, opacity; } - #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]) { + opacity: 1; + } + + @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, :active, :focus-within) #nav-bar:not([customizing]) { + transition-delay: 0s !important; + } } } } diff --git a/src/autohide/_index.scss b/src/autohide/_index.scss index 50de57d..3d0dca6 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 74e2d27..e7e624e 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 38f9ae6..c013cbf 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 bf9555d..03be1f3 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 b007c19..5925f01 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 66a92fe..08beab9 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 94f6001..be69a27 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 5925f01..77886f9 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 a0e58bd..5b429ab 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 a2cc636..6830bfa 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 77886f9..3276ba3 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 3d0dca6..6cbd007 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 0000000..e9e3e41 --- /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 68dc912..603091d 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 3276ba3..bc450ce 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 0000000..beab781 --- /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 6cbd007..bc69cc0 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 603091d..6b75de4 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 bc450ce..89601c5 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 c013cbf..125a769 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 4e7943a..94fc61f 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 c309d49..9a66be7 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 | 74 ++++++++++++++++++++++++++++---------- src/autohide/_common.scss | 2 +- src/autohide/_index.scss | 3 ++ src/autohide/_infobar.scss | 27 ++++++++++++++ src/padding/_info_bar.scss | 41 +++++++++++++-------- 5 files changed, 114 insertions(+), 33 deletions(-) create mode 100644 src/autohide/_infobar.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 89601c5..f9e4e04 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; - } - - :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; - } - - :root:not([uidensity]) notification-message[message-bar-type="infobar"] { + --infobar-message-vertical-margin: 3px; --infobar-vertical-margin: 7px; --infobar-button-vertical-margin: 3px; } - :root[uidensity="compact"] notification-message[message-bar-type="infobar"] { + :root[uidensity="compact"] #tab-notification-deck { + --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 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 e6df5b6..a4a46d4 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 bc69cc0..8ea7d1a 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 0000000..77536b7 --- /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 409550c..098e5b2 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; -} -: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: 3px; -:root:not([uidensity]) notification-message[message-bar-type="infobar"] { --infobar-vertical-margin: 7px; --infobar-button-vertical-margin: 3px; } -:root[uidensity="compact"] notification-message[message-bar-type="infobar"] { +:root[uidensity="compact"] #tab-notification-deck { + --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 var(--infobar-message-vertical-margin)) !important; +} + +:root:not([uidensity]) #tab-notification-deck, +:root:not([uidensity]) notification-message[message-bar-type="infobar"] { +} +:root[uidensity="compact"] #tab-notification-deck, +:root[uidensity="compact"] notification-message[message-bar-type="infobar"] { +} +: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 f9e4e04..71fb119 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 77536b7..39c9fb8 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 b4872dc..4d6776a 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 098e5b2..9697bc6 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 4d6776a..6acdb09 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 71fb119..d993d07 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 8ea7d1a..874609f 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 0000000..67ff792 --- /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 6b75de4..273d3eb 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 d993d07..da67094 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 59ad438..0e35b38 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 da67094..ef21972 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 24de7f5..af0f9e4 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 ef21972..7a252a2 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 03be1f3..03a3f65 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 | 622 +++++++++++++----- 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, 456 insertions(+), 187 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 7a252a2..2464350 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)); - } + @supports not -moz-bool-pref("userChrome.tab.one_liner.responsive") { + :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)); - } - - #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; + #navigator-toolbox { + background-color: var(--toolbar-bgcolor) !important; } #nav-bar { - margin-inline-end: var(--uc-tabbar-size) !important; + margin-top: var(--uc-tabbar-hide-height) !important; + height: var(--uc-tabbar-height) !important; } - .titlebar-spacer[type="pre-tabs"] { + #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; + } + } } - @supports -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { - #TabsToolbar { - margin-inline-end: var(--uc-navbar-size) !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)); + } - #nav-bar { - margin-inline-start: var(--uc-tabbar-size) !important; - } + #navigator-toolbox { + background-color: var(--toolbar-bgcolor) !important; + } - .titlebar-spacer[type="post-tabs"] { - display: none !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; - } - - @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") { + @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 !important; + --uc-titlebar-padding: 0px; } - .titlebar-buttonbox-container { - left: 0; - right: unset !important; + @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; } - } - #navigator-toolbox { - padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; - } - :root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container { - height: 32px; - } + /* where window controls are on left */ + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + :root { + --uc-titlebar-padding: 0px !important; + } - #toolbar-menubar[inactive] > .titlebar-buttonbox-container { - opacity: 0; - } + .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; + 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; - } + /* 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; - } + :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 { + @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; } } - /* At Activated Menubar */ - :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) - #toolbar-menubar:not([autohide="true"]) - + #TabsToolbar - > .titlebar-buttonbox-container { - display: block !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:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { - visibility: hidden; + :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); } - } - /*= 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 */ + } - :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); + } - @supports -moz-bool-pref("userChrome.tab.one_liner") { - @supports not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { + /* 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"]) { - /* Don't need window control */ + --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") { + /*= 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: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; - --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 */ + /* 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"] */ } - } - } - #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: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[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:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) { + --uc-window-drag-space-pre: 0px; + /* Remove pre space */ + } - :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, - :root[sizemode="fullscreen"] #window-controls { - right: unset; + @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; + } + } } } } @@ -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 e7e624e..21a59c7 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 03a3f65..dc6dca0 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 8448e64..d8db42e 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 5b429ab..62bdbfd 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 4914d4a..4a7aafa 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 bc40d37..f4f4447 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 273d3eb..de2ebf9 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 2464350..0dd37f6 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 0e35b38..96d535a 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 | 148 +++++++++++++++++++++++++--------- src/autohide/_navbar.scss | 13 +-- src/autohide/_tabbar.scss | 34 ++++---- src/utils/_one_liner.scss | 49 +++++++++++ 5 files changed, 275 insertions(+), 65 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 0000000..2cd0a92 --- /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 0dd37f6..4559bdc 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; - } - } - @supports -moz-bool-pref("userChrome.tab.on_bottom") { - #navigator-toolbox:is(:hover, :focus-within) #TabsToolbar > *:not(.titlebar-buttonbox-container) { - opacity: 1; + #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.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 21a59c7..b7c5f69 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 125a769..ab632ad 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; +@include OneLinerTabbar { + :root:not([customizing]) #titlebar { + margin-bottom: var(--uc-tabbar-hide-height); + will-change: margin-bottom; } -} - -#navigator-toolbox:is(:hover, :focus-within) { - > #titlebar { - margin-bottom: 0px; - } - #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 0000000..3995dcd --- /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 4559bdc..87b53df 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 96d535a..77dc709 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 87b53df..ea976ad 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 dc6dca0..4765e8c 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 | 770 +++++++++++++++++-------- src/tabbar/_index.scss | 8 +- src/tabbar/_layout.scss | 25 +- src/tabbar/_tabs_on_bottom.scss | 2 +- src/tabbar/layout/_navbar_padding.scss | 49 +- src/tabbar/layout/_window_control.scss | 3 +- src/utils/_one_liner.scss | 13 + 8 files changed, 627 insertions(+), 265 deletions(-) diff --git a/__tests__/one_liner.test.scss b/__tests__/one_liner.test.scss index 2cd0a92..ad96749 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 ea976ad..d02fcc8 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; - } + @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; + --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 { + #tab-notification-deck { 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); */ + + #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"], [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; + } + } } - /*= 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))); - } + @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; + } - :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; + } + } + @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[sizemode="fullscreen"] #navigator-toolbox { - padding-top: 0px !important; - } + :root[tabsintitlebar] { + /* height when native titlebar is disabled, more roomy so can fit buttons etc. */ + --uc-menubar-height: 30px; + } - #toolbar-menubar { - position: fixed; - display: flex; - top: var(--uc-titlebar-padding); - height: var(--uc-menubar-height); - width: 100%; - overflow: hidden; - } + /* 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; + } - :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)) */ - } + /* 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 > .titlebar-buttonbox-container { - height: 100%; - order: 100; - } + #navigator-toolbox { + -moz-window-dragging: drag; + } - #toolbar-menubar > [flex] { - flex-grow: 100; - } + :root[sizemode="fullscreen"] #navigator-toolbox { + padding-top: 0px !important; + } - #toolbar-menubar > spacer[flex] { - order: 99; - flex-grow: 1; - min-width: var(--uc-window-drag-space-post); - } + #toolbar-menubar { + position: fixed; + display: flex; + top: var(--uc-titlebar-padding); + height: var(--uc-menubar-height); + width: 100%; + overflow: hidden; + } - #toolbar-menubar .toolbarbutton-1 { - --toolbarbutton-inner-padding: 3px; - } + :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[autohide="true"] > .titlebar-buttonbox-container, - #TabsToolbar > .titlebar-buttonbox-container { - height: var(--uc-menubar-container-height); - } + #toolbar-menubar > .titlebar-buttonbox-container { + height: 100%; + order: 100; + } - :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) - #toolbar-menubar:not([autohide="true"]) - + #TabsToolbar - > .titlebar-buttonbox-container { - visibility: collapse !important; - } + #toolbar-menubar > [flex] { + flex-grow: 100; + } - :root:not([chromehidden~="menubar"]):not([sizemode="fullscreen"]) - #toolbar-menubar:not([autohide="true"]) - .titlebar-buttonbox-container { - visibility: visible; + #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; + } + } + } } } } @@ -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,30 +4447,252 @@ 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; + } - :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") { + .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: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_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; + } + } @supports not -moz-bool-pref("userChrome.tab.one_liner.tabbar_first") { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { /* Don't need window control */ @@ -4416,51 +4700,45 @@ --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); } + } + } + #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; - } + /* 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[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; } } } diff --git a/src/tabbar/_index.scss b/src/tabbar/_index.scss index 4a7aafa..e312b71 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 bfab821..72b42d3 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 94fc61f..73b9c67 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 10f7c1a..92da540 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") { - @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; - } - } + +//-- 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") { - :root:is([tabsintitlebar], [sizemode="fullscreen"]) { - /* Don't need pre spacer */ - --uc-window-drag-space-pre: 0px; + @include _remove_spacer_pre; + } + @include NotOption("userChrome.tab.one_liner.tabbar_first") { + @include _remove_spacer_post; + } +} + +//------------------------------------------------------------------------------ + +@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 9a66be7..f6d813a 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 3995dcd..ccf6aa2 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 d02fcc8..6d878bd 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 a4a46d4..b9c7298 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 71fc4be..02456f7 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 77dc709..210dc4b 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 | 223 +++++++++++++++++++++---- src/tabbar/_layout.scss | 2 - src/tabbar/_one_liner.scss | 64 +++++-- src/tabbar/layout/_navbar_padding.scss | 66 +++++++- user.js | 1 + 5 files changed, 310 insertions(+), 46 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 6d878bd..f3c7de6 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)); - } - - #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; - --lwt-tabs-border-color: transparent; - background-color: unset !important; - background-image: unset !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))); + } + + @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)); - } - - #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; - --lwt-tabs-border-color: transparent; - background-color: unset !important; - background-image: unset !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))); + } + + @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 72b42d3..56ad3f1 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 210dc4b..3d9c380 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))); +} - --lwt-tabs-border-color: transparent; // box-shadow - background-color: unset !important; // var(--toolbar-bgcolor) - background-image: unset !important; // var(--toolbar-bgimage) +#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; + } + + #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 92da540..4d4663b 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 de2ebf9..fe7fe37 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 f3c7de6..288fb3c 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 d8db42e..9ac881e 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 0000000..30a08d6 --- /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 e312b71..0de1dae 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 ad96749..74b8f96 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 288fb3c..bfab5b0 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 b9c7298..ce7b3d9 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 874609f..cc4e956 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 ab632ad..5781a34 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 4765e8c..258684d 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 0762caf..b08982f 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 f4f4447..e997567 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 0de1dae..0581a97 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 56ad3f1..13b4c7e 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 73b9c67..a43cdfd 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 3d9c380..a07508c 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 4d4663b..3196815 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 ccf6aa2..169d0e9 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 fe7fe37..f6ea755 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 | 78 +++++++++++++++++------------------ src/utils/_one_liner.scss | 12 +++--- 3 files changed, 51 insertions(+), 51 deletions(-) diff --git a/__tests__/one_liner.test.scss b/__tests__/one_liner.test.scss index 74b8f96..e59f49d 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 bfab5b0..4d68707 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 169d0e9..40ae98d 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 4d68707..91e0603 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 ce7b3d9..047cd39 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 9ac881e..dc2ae08 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 0581a97..7fa84a8 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 13b4c7e..99a8b8f 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 f6d813a..c0d4b91 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 f6ea755..4b64e03 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 | 26 ++-- user.js | 1 + 6 files changed, 237 insertions(+), 28 deletions(-) create mode 100644 src/hidden/_index.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 91e0603..f5d91f1 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 047cd39..3ddf4ad 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 0000000..68e405b --- /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 c0d4b91..eef3fc9 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 40ae98d..9275321 100644 --- a/src/utils/_one_liner.scss +++ b/src/utils/_one_liner.scss @@ -46,17 +46,23 @@ } } -@mixin OneLinerNavbar() { - @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; - } +@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 OneLinerNabarContent() { + @content; + } + } +} diff --git a/user.js b/user.js index 4b64e03..ec7cd16 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 f5d91f1..9c21a91 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 68e405b..07cb5fa 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 ec7cd16..7476ef8 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 9c21a91..127adce 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 07cb5fa..a9bef35 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 7476ef8..7409dcc 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 127adce..297a1d6 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 a9bef35..8cf4830 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 be69a27..0000000 --- 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 27c61d0..adf19ab 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 7409dcc..31c0823 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 297a1d6..cd32671 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 08beab9..2a38cb3 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 d3d826e..52be587 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 cad04cc..0fa9c28 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; + margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important; + padding-inline-start: var(--uc-sidebar-fullscreen-width); + will-change: padding-inline-start; - &: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; - } + &: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 1cd575f..f877334 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 | 188 ++++++++++++++++++++++--------------------- src/tab/_index.scss | 4 +- 2 files changed, 98 insertions(+), 94 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 52be587..b6f6e53 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="compact"] .tabbrowser-tab { + --container-position-y: 10px; + } - :root[uidensity="touch"] .tabbrowser-tab { - --container-position-y: 12px; - } + :root[uidensity="touch"] .tabbrowser-tab { + --container-position-y: 12px; + } - .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-tab[visuallyselected]:not([pinned]) .tab-content::before { - width: calc(100% - 30px); - opacity: 1; - } - - #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before { - width: calc(100% - 33px); - } - - /* Animate */ - @media (prefers-reduced-motion: no-preference) { .tab-content:not([titlechanged])::before { - transition: 0.15s var(--animation-easing-function) !important; - transition-property: width, opacity; + /* 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; } - } - /* 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; + .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before { + width: calc(100% - 30px); + opacity: 1; } - } - /* 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; - } + #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab[visuallyselected]:not([pinned]) .tab-content::before { + width: calc(100% - 33px); + } - .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; - } + /* 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 & 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; - } + @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; + } - :root[uidensity="compact"] + :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; + } + + .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; + } + + /* 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 30a08d6..f83326c 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 b6f6e53..1818446 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 0000000..b1b324f --- /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 0000000..bfc038e --- /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 dc2ae08..66f55ae 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 ca2d0e5..0000000 --- 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 dc90af5..0000000 --- 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 f83326c..ec088a5 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 31c0823..d34419c 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 1818446..69e5b1b 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 b1b324f..9a5b244 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 0000000..5d8cfc1 --- /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 d34419c..afdd896 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 8cf4830..070be4c 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 9275321..55dab40 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 69e5b1b..dea6392 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 3ddf4ad..2212c5f 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 070be4c..631c162 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 99a8b8f..b6fed2c 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 3196815..9ac3d62 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 dea6392..ac13dfc 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 631c162..6bffbbd 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 afdd896..38135d1 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 ac13dfc..25fd34e 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 66f55ae..8b2e681 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 0000000..690a2c0 --- /dev/null +++ b/src/theme/_monospace.scss @@ -0,0 +1,3 @@ +* { + font-family: -moz-fixed; +} diff --git a/user.js b/user.js index 38135d1..bd637e2 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 209a379..10cf40b 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 0000000..30a2c55 --- /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 1fcf8e2..01e47c2 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 bd637e2..913416e 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 25fd34e..a5e32a7 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 9ac3d62..ac068f9 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 a5e32a7..526e257 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 0000000..f7c51c5 --- /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 cc4e956..3864d5e 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 a07508c..2824363 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 913416e..0c94972 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 526e257..8a90fec 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 324e4ac..acc839e 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 63b5e16..89f92ea 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 0000000..90c2e29 --- /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 7493b61..93aac39 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 4c383a0..e10008d 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 8b2e681..762566e 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"; -} +/** Icons *********************************************************************/ +@import "icons/index"; -/** 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"; - } -} - -/*= 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 0000000..36f344e --- /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 8a90fec..a5e57f3 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 ac068f9..555ab50 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 a5e57f3..f2f76a9 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 a43cdfd..6011748 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 0c94972..57fc7f1 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 f2f76a9..2b8606b 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 2212c5f..8347e8a 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 67ff792..7ccd65c 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 e9e3e41..3a000c5 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 258684d..be1ea04 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 0fa9c28..c282701 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 22f2986..c1756c2 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 c16e449..af21842 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 ad9823f..994d470 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 31f36c0..1380fc8 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 2b8606b..800d9cc 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 6bffbbd..46bbbb2 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 57fc7f1..0f6fcee 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 0f6fcee..42731e9 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 800d9cc..296a570 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 11ba6c6..d489f80 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 27ddfb3..bbb4353 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 296a570..6bf3922 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 5ca97b2..10d9ab7 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 6bf3922..e001f48 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 46bbbb2..0597823 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 e001f48..2456f17 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 0597823..75a49fd 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 42731e9..abbef0a 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 2456f17..0805811 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 40ef1a8..77f5175 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 7fa84a8..0f5909d 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 555ab50..41f22b5 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 0000000..c3bb050 --- /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 0805811..154f0a2 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 77f5175..433e6ec 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 154f0a2..7dea037 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 75a49fd..9260a34 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 433e6ec..2bdacab 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 abbef0a..15e9494 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 7dea037..67f7e5d 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 f7c51c5..6101b6b 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 b7c5f69..43a1102 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 67f7e5d..bf32cc0 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 23ca831..6adad7b 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 bf32cc0..06f3a6c 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; + @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]):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); + @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 9260a34..8b38239 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 bfbb565..8427e96 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 15e9494..beb5043 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);