From 4beeab67e2942c9ab58959752817ff3ec288b5d4 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 4 Sep 2022 20:42:04 +0900 Subject: [PATCH 01/88] Add: Tabbar - Fill width #458 --- css/leptonChrome.css | 8 ++++++++ src/tabbar/_index.scss | 5 +++++ user.js | 1 + 3 files changed, 14 insertions(+) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index d1e3c16..2f26a50 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5989,6 +5989,14 @@ } } } +/*= Tab Bar - Show only current tab ==========================================*/ +@supports -moz-bool-pref("userChrome.tabbar.fill_width") { + /* Why 100vw? Tab closing requires width animation to end and "none" can't be animated */ + .tabbrowser-tab[fadein]:not([style^="max-width"]) { + --tab-max-width: 100vw; + max-width: var(--tab-max-width) !important; + } +} /** Tab UI ****************************************************************/ /*= Tab - Connect to window ==============================================*/ @supports -moz-bool-pref("userChrome.tab.connect_to_window") { diff --git a/src/tabbar/_index.scss b/src/tabbar/_index.scss index 0f5909d..748a60f 100644 --- a/src/tabbar/_index.scss +++ b/src/tabbar/_index.scss @@ -42,3 +42,8 @@ @include Option("userChrome.tabbar.as_titlebar") { @import "as_titlebar"; } + +/*= Tab Bar - Show only current tab ==========================================*/ +@include Option("userChrome.tabbar.fill_width") { + @import "fill_width"; +} diff --git a/user.js b/user.js index ba7b19f..5f43245 100644 --- a/user.js +++ b/user.js @@ -129,6 +129,7 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.urlView.always_show_page_actions", true); // user_pref("userChrome.tabbar.as_titlebar", true); +// user_pref("userChrome.tabbar.fill_width", 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 From 81c1a2e25a77e3aeedb4199242f109d6b83ec54d Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 16 Sep 2022 18:04:54 +0900 Subject: [PATCH 02/88] Add: Tab - Counter --- css/leptonChrome.css | 28 ++++++++++++++++++++++++++++ src/tab/_counter.scss | 24 ++++++++++++++++++++++++ src/tab/_index.scss | 5 +++++ user.js | 1 + 4 files changed, 58 insertions(+) create mode 100644 src/tab/_counter.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 2f26a50..4cbd0bf 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; @namespace html "http://www.w3.org/1999/xhtml"; /** Default Thme - Contrast ***************************************************/ @@ -7200,6 +7201,33 @@ display: none !important; } } +/*= Counter for Tab ==========================================================*/ +@supports -moz-bool-pref("userChrome.tab.counter") { + #tabbrowser-tabs { + counter-reset: tab-counts; + } + + .tabbrowser-tab:not([hidden="true"]) { + counter-increment: tab-counts; + } + + .tabbrowser-tab:not([hidden="true"]) .tab-label-container::before { + display: inline-block; + grid-row: 1; + } + + .tabbrowser-tab:not([hidden="true"]) .tab-label-container > .tab-text { + grid-row: 1; + } + + .tabbrowser-tab:not([hidden="true"])[pinned="true"] .tab-label-container::before { + content: " " counter(tab-counts); + } + + .tabbrowser-tab:not([hidden="true"]):not([pinned="true"]) .tab-label-container::before { + content: counter(tab-counts) ": "; + } +} /** Url View UI ***************************************************************/ /*= Url View - Move icon to left =============================================*/ @supports -moz-bool-pref("userChrome.urlView.move_icon_to_left") { diff --git a/src/tab/_counter.scss b/src/tab/_counter.scss new file mode 100644 index 0000000..a3d312d --- /dev/null +++ b/src/tab/_counter.scss @@ -0,0 +1,24 @@ +#tabbrowser-tabs { + counter-reset: tab-counts; +} + +.tabbrowser-tab:not([hidden="true"]) { + counter-increment: tab-counts; +} + +.tabbrowser-tab:not([hidden="true"]) .tab-label-container::before { + display: inline-block; + grid-row: 1; +} +.tabbrowser-tab:not([hidden="true"]) .tab-label-container > .tab-text { + grid-row: 1; +} + +// https://www.designcise.com/web/tutorial/how-to-add-space-before-or-after-an-element-using-css-pseudo-elements +.tabbrowser-tab:not([hidden="true"])[pinned="true"] .tab-label-container::before { + content: "\00a0" counter(tab-counts); +} + +.tabbrowser-tab:not([hidden="true"]):not([pinned="true"]) .tab-label-container::before { + content: counter(tab-counts) ":\00a0"; +} diff --git a/src/tab/_index.scss b/src/tab/_index.scss index ec088a5..3d3ee00 100644 --- a/src/tab/_index.scss +++ b/src/tab/_index.scss @@ -39,3 +39,8 @@ @include Option("userChrome.tab.crashed") { @import "crashed_tab"; } + +/*= Counter for Tab ==========================================================*/ +@include Option("userChrome.tab.counter") { + @import "counter"; +} diff --git a/user.js b/user.js index 5f43245..d4425e8 100644 --- a/user.js +++ b/user.js @@ -145,6 +145,7 @@ 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.counter", true); // user_pref("userChrome.panel.remove_strip", true); // user_pref("userChrome.panel.full_width_separator", true); From bca287e5946cc5d36e11b1c1d9d6c578f240a93f Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 17 Sep 2022 20:57:44 +0900 Subject: [PATCH 03/88] Fix: Tab - Counter inline --- css/leptonChrome.css | 42 +++++++++++++++++++++----- src/tab/_counter.scss | 69 +++++++++++++++++++++++++++++++++---------- 2 files changed, 89 insertions(+), 22 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 4cbd0bf..c17421b 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -7210,22 +7210,50 @@ .tabbrowser-tab:not([hidden="true"]) { counter-increment: tab-counts; } - + .tabbrowser-tab:not([hidden="true"])[pinned="true"] .tab-label-container::before { + content: " " counter(tab-counts); + } + .tabbrowser-tab:not([hidden="true"]):not([pinned="true"]) .tab-label-container::before { + content: counter(tab-counts) ": "; + } + .tabbrowser-tab:not([hidden="true"]) .tab-label-container { + display: grid; + align-content: safe center; + align-items: safe center; + } + @supports -moz-bool-pref("userChrome.centered.tab") { + @supports not -moz-bool-pref("userChrome.centered.tab.label") { + .tabbrowser-tab:not([hidden="true"]) .tab-label-container { + justify-content: start; + justify-items: start; + } + } + } + @supports not -moz-bool-pref("userChrome.centered.tab") { + .tabbrowser-tab:not([hidden="true"]) .tab-label-container { + justify-content: start; + justify-items: start; + } + } .tabbrowser-tab:not([hidden="true"]) .tab-label-container::before { display: inline-block; grid-row: 1; } - .tabbrowser-tab:not([hidden="true"]) .tab-label-container > .tab-text { grid-row: 1; } - - .tabbrowser-tab:not([hidden="true"])[pinned="true"] .tab-label-container::before { - content: " " counter(tab-counts); + .tabbrowser-tab:not([hidden="true"]) .tab-label-container[pinned] { + width: unset !important; + /* Original: 0 */ + } + .tabbrowser-tab:not([hidden="true"]) .tab-label-container[pinned] > .tab-text, + .tabbrowser-tab:not([hidden="true"]) .tab-label-container[pinned] > .tab-secondary-label { + width: 0; } - .tabbrowser-tab:not([hidden="true"]):not([pinned="true"]) .tab-label-container::before { - content: counter(tab-counts) ": "; + .tab-label, + .tab-secondary-label { + overflow: hidden; } } /** Url View UI ***************************************************************/ diff --git a/src/tab/_counter.scss b/src/tab/_counter.scss index a3d312d..108793c 100644 --- a/src/tab/_counter.scss +++ b/src/tab/_counter.scss @@ -1,24 +1,63 @@ +//-- Mixin --------------------------------------------------------------------- +@mixin _tab_counter_without_centered() { + @include Option("userChrome.centered.tab") { + @include NotOption("userChrome.centered.tab.label") { + @content; + } + } + @include NotOption("userChrome.centered.tab") { + @content; + } +} + +//------------------------------------------------------------------------------ + #tabbrowser-tabs { counter-reset: tab-counts; } .tabbrowser-tab:not([hidden="true"]) { counter-increment: tab-counts; + + // https://www.designcise.com/web/tutorial/how-to-add-space-before-or-after-an-element-using-css-pseudo-elements + &[pinned="true"] .tab-label-container::before { + content: "\00a0" counter(tab-counts); + } + &:not([pinned="true"]) .tab-label-container::before { + content: counter(tab-counts) ":\00a0"; + } + + .tab-label-container { + display: grid; + + align-content: safe center; + align-items: safe center; + + @include _tab_counter_without_centered { + justify-content: start; + justify-items: start; + } + + &::before { + display: inline-block; + grid-row: 1; + } + > .tab-text { + grid-row: 1; + } + + &[pinned] { + width: unset !important; /* Original: 0 */ + > .tab-text, + > .tab-secondary-label { + width: 0; + } + } + } } -.tabbrowser-tab:not([hidden="true"]) .tab-label-container::before { - display: inline-block; - grid-row: 1; -} -.tabbrowser-tab:not([hidden="true"]) .tab-label-container > .tab-text { - grid-row: 1; -} - -// https://www.designcise.com/web/tutorial/how-to-add-space-before-or-after-an-element-using-css-pseudo-elements -.tabbrowser-tab:not([hidden="true"])[pinned="true"] .tab-label-container::before { - content: "\00a0" counter(tab-counts); -} - -.tabbrowser-tab:not([hidden="true"]):not([pinned="true"]) .tab-label-container::before { - content: counter(tab-counts) ":\00a0"; +// Like centered label +.tab-label, +.tab-secondary-label { + overflow: hidden; } From 6edb9421ccfbb0499d392a94cd40a888db41ebdf Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 19 Sep 2022 09:04:57 +0900 Subject: [PATCH 04/88] Add: Counter - Bookmark menu --- css/leptonChrome.css | 132 +++++++++++-------- src/counter/_bookmark_menu.scss | 17 +++ src/counter/_index.scss | 9 ++ src/{tab/_counter.scss => counter/_tab.scss} | 0 src/leptonChrome.scss | 3 + src/tab/_index.scss | 5 - user.js | 4 +- 7 files changed, 109 insertions(+), 61 deletions(-) create mode 100644 src/counter/_bookmark_menu.scss create mode 100644 src/counter/_index.scss rename src/{tab/_counter.scss => counter/_tab.scss} (100%) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 7afb1cf..9da505d 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -7316,61 +7316,6 @@ display: none !important; } } -/*= Counter for Tab ==========================================================*/ -@supports -moz-bool-pref("userChrome.tab.counter") { - #tabbrowser-tabs { - counter-reset: tab-counts; - } - - .tabbrowser-tab:not([hidden="true"]) { - counter-increment: tab-counts; - } - .tabbrowser-tab:not([hidden="true"])[pinned="true"] .tab-label-container::before { - content: " " counter(tab-counts); - } - .tabbrowser-tab:not([hidden="true"]):not([pinned="true"]) .tab-label-container::before { - content: counter(tab-counts) ": "; - } - .tabbrowser-tab:not([hidden="true"]) .tab-label-container { - display: grid; - align-content: safe center; - align-items: safe center; - } - @supports -moz-bool-pref("userChrome.centered.tab") { - @supports not -moz-bool-pref("userChrome.centered.tab.label") { - .tabbrowser-tab:not([hidden="true"]) .tab-label-container { - justify-content: start; - justify-items: start; - } - } - } - @supports not -moz-bool-pref("userChrome.centered.tab") { - .tabbrowser-tab:not([hidden="true"]) .tab-label-container { - justify-content: start; - justify-items: start; - } - } - .tabbrowser-tab:not([hidden="true"]) .tab-label-container::before { - display: inline-block; - grid-row: 1; - } - .tabbrowser-tab:not([hidden="true"]) .tab-label-container > .tab-text { - grid-row: 1; - } - .tabbrowser-tab:not([hidden="true"]) .tab-label-container[pinned] { - width: unset !important; - /* Original: 0 */ - } - .tabbrowser-tab:not([hidden="true"]) .tab-label-container[pinned] > .tab-text, - .tabbrowser-tab:not([hidden="true"]) .tab-label-container[pinned] > .tab-secondary-label { - width: 0; - } - - .tab-label, - .tab-secondary-label { - overflow: hidden; - } -} /** Url View UI ***************************************************************/ /*= Url View - Move icon to left =============================================*/ @supports -moz-bool-pref("userChrome.urlView.move_icon_to_left") { @@ -7494,6 +7439,83 @@ } } } +/** Others UI **************************************************************/ +/*= Counter for Tab ==========================================================*/ +@supports -moz-bool-pref("userChrome.counter.tab") { + #tabbrowser-tabs { + counter-reset: tab-counts; + } + + .tabbrowser-tab:not([hidden="true"]) { + counter-increment: tab-counts; + } + .tabbrowser-tab:not([hidden="true"])[pinned="true"] .tab-label-container::before { + content: " " counter(tab-counts); + } + .tabbrowser-tab:not([hidden="true"]):not([pinned="true"]) .tab-label-container::before { + content: counter(tab-counts) ": "; + } + .tabbrowser-tab:not([hidden="true"]) .tab-label-container { + display: grid; + align-content: safe center; + align-items: safe center; + } + @supports -moz-bool-pref("userChrome.centered.tab") { + @supports not -moz-bool-pref("userChrome.centered.tab.label") { + .tabbrowser-tab:not([hidden="true"]) .tab-label-container { + justify-content: start; + justify-items: start; + } + } + } + @supports not -moz-bool-pref("userChrome.centered.tab") { + .tabbrowser-tab:not([hidden="true"]) .tab-label-container { + justify-content: start; + justify-items: start; + } + } + .tabbrowser-tab:not([hidden="true"]) .tab-label-container::before { + display: inline-block; + grid-row: 1; + } + .tabbrowser-tab:not([hidden="true"]) .tab-label-container > .tab-text { + grid-row: 1; + } + .tabbrowser-tab:not([hidden="true"]) .tab-label-container[pinned] { + width: unset !important; + /* Original: 0 */ + } + .tabbrowser-tab:not([hidden="true"]) .tab-label-container[pinned] > .tab-text, + .tabbrowser-tab:not([hidden="true"]) .tab-label-container[pinned] > .tab-secondary-label { + width: 0; + } + + .tab-label, + .tab-secondary-label { + overflow: hidden; + } +} +/*= Counter for Bookmark menu ================================================*/ +@supports -moz-bool-pref("userChrome.counter.bookmark_menu") { + menupopup[placespopup="true"] > menu.bookmark-item > .menu-right { + counter-reset: bookmark-counts 0; + } + + menupopup[placespopup="true"] > menu.bookmark-item::after { + display: -moz-inline-box; + content: "(" counter(bookmark-counts) ")"; + } + + menupopup[placespopup="true"] > menu.bookmark-item > .menu-iconic-highlightable-text, + menupopup[placespopup="true"] > menu.bookmark-item > .menu-accel-container, + menupopup[placespopup="true"] > menu.bookmark-item > .menu-right { + -moz-box-ordinal-group: 2; + } + + menu.bookmark-item > menupopup[placespopup="true"] > .bookmark-item { + counter-increment: bookmark-counts; + } +} /** Fullscreen - Overlap toolbar **********************************************/ @supports -moz-bool-pref("userChrome.fullscreen.overlap") { @supports -moz-bool-pref("browser.fullscreen.autohide") { diff --git a/src/counter/_bookmark_menu.scss b/src/counter/_bookmark_menu.scss new file mode 100644 index 0000000..62359f8 --- /dev/null +++ b/src/counter/_bookmark_menu.scss @@ -0,0 +1,17 @@ +menupopup[placespopup="true"] > menu.bookmark-item > .menu-right { + counter-reset: bookmark-counts 0; +} +menupopup[placespopup="true"] > menu.bookmark-item::after { + display: -moz-inline-box; + content: "(" counter(bookmark-counts) ")"; +} + +menupopup[placespopup="true"] > menu.bookmark-item > .menu-iconic-highlightable-text, +menupopup[placespopup="true"] > menu.bookmark-item > .menu-accel-container, +menupopup[placespopup="true"] > menu.bookmark-item > .menu-right { + -moz-box-ordinal-group: 2; +} + +menu.bookmark-item > menupopup[placespopup="true"] > .bookmark-item { + counter-increment: bookmark-counts; +} diff --git a/src/counter/_index.scss b/src/counter/_index.scss new file mode 100644 index 0000000..2fea34a --- /dev/null +++ b/src/counter/_index.scss @@ -0,0 +1,9 @@ +/*= Counter for Tab ==========================================================*/ +@include Option("userChrome.counter.tab") { + @import "tab"; +} + +/*= Counter for Bookmark menu ================================================*/ +@include Option("userChrome.counter.bookmark_menu") { + @import "bookmark_menu"; +} diff --git a/src/tab/_counter.scss b/src/counter/_tab.scss similarity index 100% rename from src/tab/_counter.scss rename to src/counter/_tab.scss diff --git a/src/leptonChrome.scss b/src/leptonChrome.scss index dc06906..d0b793e 100644 --- a/src/leptonChrome.scss +++ b/src/leptonChrome.scss @@ -48,6 +48,9 @@ /** Sidebar UI ****************************************************************/ @import "sidebar/index"; +/** Others UI **************************************************************/ +@import "counter/index"; + /** Fullscreen - Overlap toolbar **********************************************/ @import "fullscreen/index"; diff --git a/src/tab/_index.scss b/src/tab/_index.scss index 3d3ee00..ec088a5 100644 --- a/src/tab/_index.scss +++ b/src/tab/_index.scss @@ -39,8 +39,3 @@ @include Option("userChrome.tab.crashed") { @import "crashed_tab"; } - -/*= Counter for Tab ==========================================================*/ -@include Option("userChrome.tab.counter") { - @import "counter"; -} diff --git a/user.js b/user.js index 4401261..5c0525a 100644 --- a/user.js +++ b/user.js @@ -107,6 +107,9 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.centered.urlbar", true); // user_pref("userChrome.centered.bookmarkbar", true); +// user_pref("userChrome.counter.tab", true); +// user_pref("userChrome.counter.bookmark_menu", true); + // user_pref("userChrome.rounding.square_button", true); // user_pref("userChrome.rounding.square_panel", true); // user_pref("userChrome.rounding.square_panelitem", true); @@ -146,7 +149,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.counter", true); // user_pref("userChrome.panel.remove_strip", true); // user_pref("userChrome.panel.full_width_separator", true); From f68fe01013d130d665c89c336e16179a3c2dabb4 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 30 Sep 2022 21:12:00 +0900 Subject: [PATCH 05/88] Add: Combined - Urlbar with reload --- css/leptonChrome.css | 159 ++++++++++++++++++++++++++++++ src/combined/_index.scss | 31 ++++++ src/combined/_reload.scss | 28 ++++++ src/decoration/_animate.scss | 9 ++ src/decoration/_field_border.scss | 6 ++ src/leptonChrome.scss | 3 + user.js | 2 + 7 files changed, 238 insertions(+) create mode 100644 src/combined/_index.scss create mode 100644 src/combined/_reload.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 9da505d..51af55f 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -2865,6 +2865,15 @@ --toolbar-field-border-color: var(--toolbar-field-focus-border-color); } + @supports -moz-bool-pref("userChrome.combined.urlbar_with_reload") { + #nav-bar-customization-target + > #stop-reload-button:hover + ~ #urlbar-container + #urlbar:not([focused="true"]) + > #urlbar-background { + --toolbar-field-border-color: var(--toolbar-field-focus-border-color); + } + } /*- Other Fields -----------------------------------------------------------*/ /* Sidebar */ .sidebar-panel[lwt-sidebar] #search-box:hover, @@ -3004,6 +3013,14 @@ transition: background-color 1.25s var(--animation-easing-function) !important; } + @supports -moz-bool-pref("userChrome.combined.urlbar_with_reload") { + #nav-bar-customization-target > #stop-reload-button .toolbarbutton-icon { + transition: background-color 2.5s var(--animation-easing-function) !important; + } + #nav-bar-customization-target > #stop-reload-button .toolbarbutton-icon:hover { + transition: background-color 1.25s var(--animation-easing-function) !important; + } + } /*- Border - Other Fields --------------------------------------------------*/ #search-box, xul|search-textbox.tabsFilter, @@ -7607,6 +7624,148 @@ justify-content: safe center !important; } } +/** Combined ******************************************************************/ +@supports -moz-bool-pref("userChrome.combined.urlbar_with_reload") { + #nav-bar-customization-target > * { + -moz-box-ordinal-group: 1; + } + + #nav-bar-customization-target > #urlbar-container { + -moz-box-ordinal-group: 5; + } + + #nav-bar-customization-target > #urlbar-container ~ * { + -moz-box-ordinal-group: 7; + } +} +@supports -moz-bool-pref("userChrome.combined.urlbar_with_reload") { + #nav-bar-customization-target > #stop-reload-button { + -moz-box-ordinal-group: 6; + } + + #nav-bar { + --uc-toolbarbutton-padding: 2 * (var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding)); + } + + #urlbar { + padding-right: calc(12px + var(--uc-toolbarbutton-padding)); + } + + #nav-bar-customization-target > #stop-reload-button { + z-index: 3; + position: relative; + --toolbarbutton-hover-background: var(--urlbar-box-hover-bgcolor); + color: var(--urlbar-box-hover-text-color) !important; + margin-left: calc(-1 * (15px + var(--urlbar-margin-inline) + var(--uc-toolbarbutton-padding))); + } + + #nav-bar-customization-target > #stop-reload-button > .toolbarbutton-1 > .toolbarbutton-icon { + --uc-reload-icon-size: calc(16px + 2 * var(--urlbar-icon-padding)); + width: var(--uc-reload-icon-size) !important; + height: var(--uc-reload-icon-size) !important; + padding: var(--urlbar-icon-padding) !important; + } +} +@supports -moz-bool-pref("userChrome.combined.urlbar_with_back_forward") { + #nav-bar-customization-target > #back-button { + -moz-box-ordinal-group: 2; + } + + #nav-bar-customization-target > #forward-button { + -moz-box-ordinal-group: 4; + } + + #nav-bar { + --uc-backbutton-background: var(--toolbarbutton-hover-background, hsla(0, 100%, 100%, 0.5)); + --uc-backbutton-hover-background: var(--toolbarbutton-active-background); + --uc-backbutton-active-background: color-mix(in srgb, currentColor 20%, transparent); + --uc-toolbar-button-boundary: calc(var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding)); + --uc-toolbar-button-size: calc(12px + 2 * var(--uc-toolbar-button-boundary)); + --uc-urlbar-icon-size: calc(16px + 2 * var(--urlbar-icon-padding)); + } + + #back-button { + z-index: 3 !important; + background-color: var(--toolbar-bgcolor) !important; + background-clip: content-box !important; + border-radius: 100%; + padding-block: 0 !important; + padding-inline-end: 0 !important; + } + + #back-button > menupopup { + margin-top: -1px !important; + } + + #back-button > .toolbarbutton-icon { + background-color: var(--uc-backbutton-background); + background-origin: padding-box; + background-clip: padding-box; + border: 1px solid var(--uc-backbutton-border-color); + border-radius: 10000px !important; + padding-inline-end: var(--urlbar-icon-padding) !important; + height: auto !important; + } + + #back-button:not([disabled], [open]):hover > .toolbarbutton-icon { + background-color: var(--uc-backbutton-hover-background) !important; + box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); + border-color: rgba(12, 12, 13, 0.35); + } + + #back-button[open] > .toolbarbutton-icon, + #back-button:not([disabled]):hover:active > .toolbarbutton-icon { + background-color: var(--uc-backbutton-active-background) !important; + border-color: rgba(12, 12, 13, 0.4); + } + + #nav-bar-customization-target > #back-button, + #nav-bar-customization-target > #forward-button { + position: relative; + } + + #nav-bar-customization-target > #back-button > .toolbarbutton-icon { + padding-inline-end: var(--urlbar-icon-padding) !important; + height: auto !important; + } + + #nav-bar-customization-target > #back-button[disabled="true"] { + opacity: 1 !important; + /* Original: 0.4 */ + } + + #nav-bar-customization-target > #back-button[disabled="true"] > .toolbarbutton-icon { + fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); + background-color: color-mix( + in srgb, + var(--toolbarbutton-hover-background), + var(--toolbar-field-background-color) 40% + ) !important; + } + + #nav-bar-customization-target > #forward-button { + z-index: 2; + margin-inline-start: calc(-1 * var(--uc-toolbar-button-boundary) + 1px) !important; + padding-inline-end: 0px !important; + /* Original: var(--toolbarbutton-outer-padding) */ + } + + #nav-bar-customization-target > #forward-button > .toolbarbutton-icon { + padding-inline-end: var(--urlbar-icon-padding) !important; + /* Original: var(--toolbarbutton-inner-padding) */ + padding-block: var(--urlbar-icon-padding) !important; + height: var(--uc-urlbar-icon-size) !important; + } + + #nav-bar-customization-target > #urlbar-container { + /* var(--urlbar-margin-inline) */ + margin-inline-start: calc(-1 * var(--uc-toolbar-button-size)) !important; + } + + #nav-bar-customization-target > #urlbar-container > #urlbar:not([breakout][breakout-extend]) { + padding-left: var(--uc-toolbar-button-size); + } +} /** Auto Hide *****************************************************************/ @supports -moz-bool-pref("userChrome.autohide.back_button") { #back-button[disabled="true"] { diff --git a/src/combined/_index.scss b/src/combined/_index.scss new file mode 100644 index 0000000..36ae0d2 --- /dev/null +++ b/src/combined/_index.scss @@ -0,0 +1,31 @@ +// Init +@include Option("userChrome.combined.urlbar_with_reload") { + #nav-bar-customization-target > * { + -moz-box-ordinal-group: 1; + } + #nav-bar-customization-target > #urlbar-container { + -moz-box-ordinal-group: 5; + } + #nav-bar-customization-target > #urlbar-container ~ * { + -moz-box-ordinal-group: 7; + } +} + +@include Option("userChrome.combined.urlbar_with_reload") { + #nav-bar-customization-target > #stop-reload-button { + -moz-box-ordinal-group: 6; + } + + @import "reload"; +} + +@include Option("userChrome.combined.urlbar_with_back_forward") { + #nav-bar-customization-target > #back-button { + -moz-box-ordinal-group: 2; + } + #nav-bar-customization-target > #forward-button { + -moz-box-ordinal-group: 4; + } + + @import "back_forward"; +} diff --git a/src/combined/_reload.scss b/src/combined/_reload.scss new file mode 100644 index 0000000..ddc9e57 --- /dev/null +++ b/src/combined/_reload.scss @@ -0,0 +1,28 @@ +// Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/reload_button_in_urlbar.css made available under Mozilla Public License v. 2.0 +// See the above repository for updates as well as full license text. + +#nav-bar { + --uc-toolbarbutton-padding: 2 * (var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding)); +} + +#urlbar { + padding-right: calc(12px + var(--uc-toolbarbutton-padding)); +} + +#nav-bar-customization-target > #stop-reload-button { + z-index: 3; + position: relative; + + --toolbarbutton-hover-background: var(--urlbar-box-hover-bgcolor); + color: var(--urlbar-box-hover-text-color) !important; + + margin-left: calc( -1 * ( #{ 16px - 1px } + var(--urlbar-margin-inline) + var(--uc-toolbarbutton-padding))); +} + +#nav-bar-customization-target > #stop-reload-button > .toolbarbutton-1 > .toolbarbutton-icon { + --uc-reload-icon-size: calc(16px + 2 * var(--urlbar-icon-padding)); + width: var(--uc-reload-icon-size) !important; + height: var(--uc-reload-icon-size) !important; + + padding: var(--urlbar-icon-padding) !important; +} diff --git a/src/decoration/_animate.scss b/src/decoration/_animate.scss index 6b969fe..a231631 100644 --- a/src/decoration/_animate.scss +++ b/src/decoration/_animate.scss @@ -81,6 +81,15 @@ } } +@include Option("userChrome.combined.urlbar_with_reload") { + #nav-bar-customization-target > #stop-reload-button .toolbarbutton-icon { + transition: background-color 2.5s var(--animation-easing-function) !important; + &:hover { + transition: background-color 1.25s var(--animation-easing-function) !important; + } + } +} + /*- Border - Other Fields --------------------------------------------------*/ #search-box, xul|search-textbox.tabsFilter, diff --git a/src/decoration/_field_border.scss b/src/decoration/_field_border.scss index 2198c57..6f88223 100644 --- a/src/decoration/_field_border.scss +++ b/src/decoration/_field_border.scss @@ -4,6 +4,12 @@ --toolbar-field-border-color: var(--toolbar-field-focus-border-color); } +@include Option("userChrome.combined.urlbar_with_reload") { + #nav-bar-customization-target > #stop-reload-button:hover ~ #urlbar-container #urlbar:not([focused="true"]) > #urlbar-background { + --toolbar-field-border-color: var(--toolbar-field-focus-border-color); + } +} + /*- Other Fields -----------------------------------------------------------*/ /* Sidebar */ .sidebar-panel[lwt-sidebar] #search-box:hover, diff --git a/src/leptonChrome.scss b/src/leptonChrome.scss index d0b793e..ccee2d4 100644 --- a/src/leptonChrome.scss +++ b/src/leptonChrome.scss @@ -57,6 +57,9 @@ /** Centered ******************************************************************/ @import "centered/index"; +/** Combined ******************************************************************/ +@import "combined/index"; + /** Auto Hide *****************************************************************/ @import "autohide/index"; diff --git a/user.js b/user.js index 5c0525a..4693c3e 100644 --- a/user.js +++ b/user.js @@ -110,6 +110,8 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.counter.tab", true); // user_pref("userChrome.counter.bookmark_menu", true); +// user_pref("userChrome.combined.urlbar_with_reload", true); + // user_pref("userChrome.rounding.square_button", true); // user_pref("userChrome.rounding.square_panel", true); // user_pref("userChrome.rounding.square_panelitem", true); From 09285cc1aa58f7f00c9a5181c91d0003e40f3c4f Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 2 Oct 2022 22:18:38 +0900 Subject: [PATCH 06/88] Add: Combined - Back, Forward with urlbar --- css/leptonChrome.css | 97 +++++++++++++-------------------- src/combined/_back_forward.scss | 77 ++++++++++++++++++++++++++ src/combined/_index.scss | 15 ++++- src/combined/_reload.scss | 12 +--- user.js | 1 + 5 files changed, 134 insertions(+), 68 deletions(-) create mode 100644 src/combined/_back_forward.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 51af55f..387319c 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -7625,7 +7625,14 @@ } } /** Combined ******************************************************************/ -@supports -moz-bool-pref("userChrome.combined.urlbar_with_reload") { +@supports -moz-bool-pref("userChrome.combined.urlbar_with_reload") or -moz-bool-pref("userChrome.combined.urlbar_with_back_forward") { + #nav-bar { + --uc-toolbarbutton-boundary: calc(var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding)); + --uc-toolbarbutton-padding: calc(2 * var(--uc-toolbarbutton-boundary)); + --uc-toolbarbutton-size: calc(12px + var(--uc-toolbarbutton-padding)); + --uc-urlbar-icon-size: calc(16px + 2 * var(--urlbar-icon-padding)); + } + #nav-bar-customization-target > * { -moz-box-ordinal-group: 1; } @@ -7643,12 +7650,8 @@ -moz-box-ordinal-group: 6; } - #nav-bar { - --uc-toolbarbutton-padding: 2 * (var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding)); - } - #urlbar { - padding-right: calc(12px + var(--uc-toolbarbutton-padding)); + padding-right: var(--uc-toolbarbutton-size); } #nav-bar-customization-target > #stop-reload-button { @@ -7660,9 +7663,8 @@ } #nav-bar-customization-target > #stop-reload-button > .toolbarbutton-1 > .toolbarbutton-icon { - --uc-reload-icon-size: calc(16px + 2 * var(--urlbar-icon-padding)); - width: var(--uc-reload-icon-size) !important; - height: var(--uc-reload-icon-size) !important; + width: var(--uc-urlbar-icon-size) !important; + height: var(--uc-urlbar-icon-size) !important; padding: var(--urlbar-icon-padding) !important; } } @@ -7679,12 +7681,30 @@ --uc-backbutton-background: var(--toolbarbutton-hover-background, hsla(0, 100%, 100%, 0.5)); --uc-backbutton-hover-background: var(--toolbarbutton-active-background); --uc-backbutton-active-background: color-mix(in srgb, currentColor 20%, transparent); - --uc-toolbar-button-boundary: calc(var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding)); - --uc-toolbar-button-size: calc(12px + 2 * var(--uc-toolbar-button-boundary)); - --uc-urlbar-icon-size: calc(16px + 2 * var(--urlbar-icon-padding)); } - #back-button { + #nav-bar-customization-target > #urlbar-container { + /* var(--urlbar-margin-inline) */ + margin-inline-start: calc(-1 * var(--uc-toolbarbutton-size)) !important; + } + #nav-bar-customization-target > #urlbar-container > #urlbar:not([breakout][breakout-extend]) { + padding-left: var(--uc-toolbarbutton-size); + } + #nav-bar-customization-target > #forward-button { + z-index: 2; + position: relative; + margin-inline-start: calc(-1 * var(--uc-toolbarbutton-boundary) + 1px) !important; + padding-inline-end: 0px !important; + /* Original: var(--toolbarbutton-outer-padding) */ + } + #nav-bar-customization-target > #forward-button > .toolbarbutton-icon { + padding-inline-end: var(--urlbar-icon-padding) !important; + /* Original: var(--toolbarbutton-inner-padding) */ + padding-block: var(--urlbar-icon-padding) !important; + height: var(--uc-urlbar-icon-size) !important; + } + #nav-bar-customization-target > #back-button { + position: relative; z-index: 3 !important; background-color: var(--toolbar-bgcolor) !important; background-clip: content-box !important; @@ -7692,12 +7712,10 @@ padding-block: 0 !important; padding-inline-end: 0 !important; } - - #back-button > menupopup { + #nav-bar-customization-target > #back-button > menupopup { margin-top: -1px !important; } - - #back-button > .toolbarbutton-icon { + #nav-bar-customization-target > #back-button > .toolbarbutton-icon { background-color: var(--uc-backbutton-background); background-origin: padding-box; background-clip: padding-box; @@ -7706,64 +7724,27 @@ padding-inline-end: var(--urlbar-icon-padding) !important; height: auto !important; } - - #back-button:not([disabled], [open]):hover > .toolbarbutton-icon { + #nav-bar-customization-target > #back-button:not([disabled], [open]):hover > .toolbarbutton-icon { background-color: var(--uc-backbutton-hover-background) !important; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); border-color: rgba(12, 12, 13, 0.35); } - - #back-button[open] > .toolbarbutton-icon, - #back-button:not([disabled]):hover:active > .toolbarbutton-icon { + #nav-bar-customization-target > #back-button[open] > .toolbarbutton-icon, + #nav-bar-customization-target > #back-button:not([disabled]):hover:active > .toolbarbutton-icon { background-color: var(--uc-backbutton-active-background) !important; border-color: rgba(12, 12, 13, 0.4); } - - #nav-bar-customization-target > #back-button, - #nav-bar-customization-target > #forward-button { - position: relative; - } - - #nav-bar-customization-target > #back-button > .toolbarbutton-icon { - padding-inline-end: var(--urlbar-icon-padding) !important; - height: auto !important; - } - #nav-bar-customization-target > #back-button[disabled="true"] { opacity: 1 !important; /* Original: 0.4 */ } - #nav-bar-customization-target > #back-button[disabled="true"] > .toolbarbutton-icon { - fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); background-color: color-mix( in srgb, var(--toolbarbutton-hover-background), var(--toolbar-field-background-color) 40% ) !important; - } - - #nav-bar-customization-target > #forward-button { - z-index: 2; - margin-inline-start: calc(-1 * var(--uc-toolbar-button-boundary) + 1px) !important; - padding-inline-end: 0px !important; - /* Original: var(--toolbarbutton-outer-padding) */ - } - - #nav-bar-customization-target > #forward-button > .toolbarbutton-icon { - padding-inline-end: var(--urlbar-icon-padding) !important; - /* Original: var(--toolbarbutton-inner-padding) */ - padding-block: var(--urlbar-icon-padding) !important; - height: var(--uc-urlbar-icon-size) !important; - } - - #nav-bar-customization-target > #urlbar-container { - /* var(--urlbar-margin-inline) */ - margin-inline-start: calc(-1 * var(--uc-toolbar-button-size)) !important; - } - - #nav-bar-customization-target > #urlbar-container > #urlbar:not([breakout][breakout-extend]) { - padding-left: var(--uc-toolbar-button-size); + fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); } } /** Auto Hide *****************************************************************/ diff --git a/src/combined/_back_forward.scss b/src/combined/_back_forward.scss new file mode 100644 index 0000000..a67bb00 --- /dev/null +++ b/src/combined/_back_forward.scss @@ -0,0 +1,77 @@ +#nav-bar { + --uc-backbutton-background: var(--toolbarbutton-hover-background, hsla(0,100%,100%,.5)); + --uc-backbutton-hover-background: var(--toolbarbutton-active-background); + --uc-backbutton-active-background: color-mix(in srgb, currentColor 20%, transparent); +} + +#nav-bar-customization-target > { + #urlbar-container { + /* var(--urlbar-margin-inline) */ + margin-inline-start: calc(-1 * var(--uc-toolbarbutton-size)) !important; + + > #urlbar:not([breakout][breakout-extend]) { + padding-left: var(--uc-toolbarbutton-size); + } + } + + #forward-button { + z-index: 2; + position: relative; + + margin-inline-start: calc(-1 * var(--uc-toolbarbutton-boundary) + 1px) !important; + padding-inline-end: 0px !important; /* Original: var(--toolbarbutton-outer-padding) */ + + > .toolbarbutton-icon { + padding-inline-end: var(--urlbar-icon-padding) !important; /* Original: var(--toolbarbutton-inner-padding) */ + padding-block: var(--urlbar-icon-padding) !important; + height: var(--uc-urlbar-icon-size) !important; + } + } + + #back-button { + position: relative; + + z-index: 3 !important; + background-color: var(--toolbar-bgcolor) !important; + background-clip: content-box !important; + border-radius: 100%; + + padding-block: 0 !important; + padding-inline-end: 0 !important; + + > menupopup { + margin-top: -1px !important; + } + + > .toolbarbutton-icon { + background-color: var(--uc-backbutton-background); + background-origin: padding-box; + background-clip: padding-box; + border: 1px solid var(--uc-backbutton-border-color); + border-radius: 10000px !important; + + padding-inline-end: var(--urlbar-icon-padding) !important; + height: auto !important + } + + &:not([disabled], [open]):hover > .toolbarbutton-icon { + background-color: var(--uc-backbutton-hover-background) !important; + box-shadow: 0 1px 6px hsla(0,0%,0%,.1); + border-color: hsla(240,5%,5%,.35); + } + &[open] > .toolbarbutton-icon, + &:not([disabled]):hover:active > .toolbarbutton-icon { + background-color: var(--uc-backbutton-active-background) !important; + border-color: hsla(240,5%,5%,.40); + } + + &[disabled="true"] { + opacity: 1 !important; /* Original: 0.4 */ + + > .toolbarbutton-icon { + background-color: color-mix(in srgb, var(--toolbarbutton-hover-background), var(--toolbar-field-background-color) 40%) !important; + fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); + } + } + } +} diff --git a/src/combined/_index.scss b/src/combined/_index.scss index 36ae0d2..afaffe5 100644 --- a/src/combined/_index.scss +++ b/src/combined/_index.scss @@ -1,11 +1,24 @@ // Init -@include Option("userChrome.combined.urlbar_with_reload") { +@include Option("userChrome.combined.urlbar_with_reload", "userChrome.combined.urlbar_with_back_forward") { + #nav-bar { + --uc-toolbarbutton-boundary: calc(var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding)); + --uc-toolbarbutton-padding: calc(2 * var(--uc-toolbarbutton-boundary)); + --uc-toolbarbutton-size: calc(12px + var(--uc-toolbarbutton-padding)); + + --uc-urlbar-icon-size: calc(16px + 2 * var(--urlbar-icon-padding)); + } + #nav-bar-customization-target > * { -moz-box-ordinal-group: 1; } + // Preserve + // `back` -> 2 + // `home` -> 3 + // `forward` -> 4 #nav-bar-customization-target > #urlbar-container { -moz-box-ordinal-group: 5; } + // `reload` -> 6 #nav-bar-customization-target > #urlbar-container ~ * { -moz-box-ordinal-group: 7; } diff --git a/src/combined/_reload.scss b/src/combined/_reload.scss index ddc9e57..471375f 100644 --- a/src/combined/_reload.scss +++ b/src/combined/_reload.scss @@ -1,12 +1,7 @@ // Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/reload_button_in_urlbar.css made available under Mozilla Public License v. 2.0 // See the above repository for updates as well as full license text. - -#nav-bar { - --uc-toolbarbutton-padding: 2 * (var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding)); -} - #urlbar { - padding-right: calc(12px + var(--uc-toolbarbutton-padding)); + padding-right: var(--uc-toolbarbutton-size); } #nav-bar-customization-target > #stop-reload-button { @@ -20,9 +15,8 @@ } #nav-bar-customization-target > #stop-reload-button > .toolbarbutton-1 > .toolbarbutton-icon { - --uc-reload-icon-size: calc(16px + 2 * var(--urlbar-icon-padding)); - width: var(--uc-reload-icon-size) !important; - height: var(--uc-reload-icon-size) !important; + width: var(--uc-urlbar-icon-size) !important; + height: var(--uc-urlbar-icon-size) !important; padding: var(--urlbar-icon-padding) !important; } diff --git a/user.js b/user.js index 4693c3e..55d9a66 100644 --- a/user.js +++ b/user.js @@ -111,6 +111,7 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.counter.bookmark_menu", true); // user_pref("userChrome.combined.urlbar_with_reload", true); +// user_pref("userChrome.combined.urlbar_with_back_forward", true); // user_pref("userChrome.rounding.square_button", true); // user_pref("userChrome.rounding.square_panel", true); From bc39e2bcfea0898d7efec28fa2b3365131786e27 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 3 Oct 2022 01:04:18 +0900 Subject: [PATCH 07/88] Clean: `Combined` -> `URL Bar` --- css/leptonChrome.css | 261 +++++++++--------- src/leptonChrome.scss | 6 +- .../_always_show_page_actions.scss | 0 .../_back_forward_button.scss} | 0 src/{combined => urlbar}/_index.scss | 18 +- .../_reload_button.scss} | 0 src/urlview/_index.scss | 5 - user.js | 8 +- 8 files changed, 150 insertions(+), 148 deletions(-) rename src/{urlview => urlbar}/_always_show_page_actions.scss (100%) rename src/{combined/_back_forward.scss => urlbar/_back_forward_button.scss} (100%) rename src/{combined => urlbar}/_index.scss (63%) rename src/{combined/_reload.scss => urlbar/_reload_button.scss} (100%) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 387319c..c5ac344 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -7333,6 +7333,137 @@ display: none !important; } } +/** urlbar ********************************************************************/ +/*= Url Bar - Always show page actions =======================================*/ +@supports -moz-bool-pref("userChrome.urlbar.always_show_page_actions") { + #urlbar:not([breakout-extend="true"]) #pageActionButton { + display: block !important; + visibility: visible !important; + } +} +/*= Url Bar - Combined buttons ===============================================*/ +@supports -moz-bool-pref("userChrome.urlbar.combined_with_reload") or -moz-bool-pref("userChrome.urlbar.combined_with_back_forward") { + #nav-bar { + --uc-toolbarbutton-boundary: calc(var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding)); + --uc-toolbarbutton-padding: calc(2 * var(--uc-toolbarbutton-boundary)); + --uc-toolbarbutton-size: calc(12px + var(--uc-toolbarbutton-padding)); + --uc-urlbar-icon-size: calc(16px + 2 * var(--urlbar-icon-padding)); + } + + #nav-bar-customization-target > * { + -moz-box-ordinal-group: 1; + } + + #nav-bar-customization-target > #urlbar-container { + -moz-box-ordinal-group: 5; + } + + #nav-bar-customization-target > #urlbar-container ~ * { + -moz-box-ordinal-group: 7; + } +} +@supports -moz-bool-pref("userChrome.urlbar.combined_with_reload") { + #nav-bar-customization-target > #stop-reload-button { + -moz-box-ordinal-group: 6; + } + + #urlbar { + padding-right: var(--uc-toolbarbutton-size); + } + + #nav-bar-customization-target > #stop-reload-button { + z-index: 3; + position: relative; + --toolbarbutton-hover-background: var(--urlbar-box-hover-bgcolor); + color: var(--urlbar-box-hover-text-color) !important; + margin-left: calc(-1 * (15px + var(--urlbar-margin-inline) + var(--uc-toolbarbutton-padding))); + } + + #nav-bar-customization-target > #stop-reload-button > .toolbarbutton-1 > .toolbarbutton-icon { + width: var(--uc-urlbar-icon-size) !important; + height: var(--uc-urlbar-icon-size) !important; + padding: var(--urlbar-icon-padding) !important; + } +} +@supports -moz-bool-pref("userChrome.urlbar.combined_with_back_forward") { + #nav-bar-customization-target > #back-button { + -moz-box-ordinal-group: 2; + } + + #nav-bar-customization-target > #forward-button { + -moz-box-ordinal-group: 4; + } + + #nav-bar { + --uc-backbutton-background: var(--toolbarbutton-hover-background, hsla(0, 100%, 100%, 0.5)); + --uc-backbutton-hover-background: var(--toolbarbutton-active-background); + --uc-backbutton-active-background: color-mix(in srgb, currentColor 20%, transparent); + } + + #nav-bar-customization-target > #urlbar-container { + /* var(--urlbar-margin-inline) */ + margin-inline-start: calc(-1 * var(--uc-toolbarbutton-size)) !important; + } + #nav-bar-customization-target > #urlbar-container > #urlbar:not([breakout][breakout-extend]) { + padding-left: var(--uc-toolbarbutton-size); + } + #nav-bar-customization-target > #forward-button { + z-index: 2; + position: relative; + margin-inline-start: calc(-1 * var(--uc-toolbarbutton-boundary) + 1px) !important; + padding-inline-end: 0px !important; + /* Original: var(--toolbarbutton-outer-padding) */ + } + #nav-bar-customization-target > #forward-button > .toolbarbutton-icon { + padding-inline-end: var(--urlbar-icon-padding) !important; + /* Original: var(--toolbarbutton-inner-padding) */ + padding-block: var(--urlbar-icon-padding) !important; + height: var(--uc-urlbar-icon-size) !important; + } + #nav-bar-customization-target > #back-button { + position: relative; + z-index: 3 !important; + background-color: var(--toolbar-bgcolor) !important; + background-clip: content-box !important; + border-radius: 100%; + padding-block: 0 !important; + padding-inline-end: 0 !important; + } + #nav-bar-customization-target > #back-button > menupopup { + margin-top: -1px !important; + } + #nav-bar-customization-target > #back-button > .toolbarbutton-icon { + background-color: var(--uc-backbutton-background); + background-origin: padding-box; + background-clip: padding-box; + border: 1px solid var(--uc-backbutton-border-color); + border-radius: 10000px !important; + padding-inline-end: var(--urlbar-icon-padding) !important; + height: auto !important; + } + #nav-bar-customization-target > #back-button:not([disabled], [open]):hover > .toolbarbutton-icon { + background-color: var(--uc-backbutton-hover-background) !important; + box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); + border-color: rgba(12, 12, 13, 0.35); + } + #nav-bar-customization-target > #back-button[open] > .toolbarbutton-icon, + #nav-bar-customization-target > #back-button:not([disabled]):hover:active > .toolbarbutton-icon { + background-color: var(--uc-backbutton-active-background) !important; + border-color: rgba(12, 12, 13, 0.4); + } + #nav-bar-customization-target > #back-button[disabled="true"] { + opacity: 1 !important; + /* Original: 0.4 */ + } + #nav-bar-customization-target > #back-button[disabled="true"] > .toolbarbutton-icon { + background-color: color-mix( + in srgb, + var(--toolbarbutton-hover-background), + var(--toolbar-field-background-color) 40% + ) !important; + fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); + } +} /** Url View UI ***************************************************************/ /*= Url View - Move icon to left =============================================*/ @supports -moz-bool-pref("userChrome.urlView.move_icon_to_left") { @@ -7353,13 +7484,6 @@ display: block !important; } } -/*= Url View - Always show page actions ======================================*/ -@supports -moz-bool-pref("userChrome.urlView.always_show_page_actions") { - #urlbar:not([breakout-extend="true"]) #pageActionButton { - display: block !important; - visibility: visible !important; - } -} /** Panel UI ******************************************************************/ @supports -moz-bool-pref("userChrome.panel.remove_strip") { #appMenu-fxa-separator { @@ -7624,129 +7748,6 @@ justify-content: safe center !important; } } -/** Combined ******************************************************************/ -@supports -moz-bool-pref("userChrome.combined.urlbar_with_reload") or -moz-bool-pref("userChrome.combined.urlbar_with_back_forward") { - #nav-bar { - --uc-toolbarbutton-boundary: calc(var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding)); - --uc-toolbarbutton-padding: calc(2 * var(--uc-toolbarbutton-boundary)); - --uc-toolbarbutton-size: calc(12px + var(--uc-toolbarbutton-padding)); - --uc-urlbar-icon-size: calc(16px + 2 * var(--urlbar-icon-padding)); - } - - #nav-bar-customization-target > * { - -moz-box-ordinal-group: 1; - } - - #nav-bar-customization-target > #urlbar-container { - -moz-box-ordinal-group: 5; - } - - #nav-bar-customization-target > #urlbar-container ~ * { - -moz-box-ordinal-group: 7; - } -} -@supports -moz-bool-pref("userChrome.combined.urlbar_with_reload") { - #nav-bar-customization-target > #stop-reload-button { - -moz-box-ordinal-group: 6; - } - - #urlbar { - padding-right: var(--uc-toolbarbutton-size); - } - - #nav-bar-customization-target > #stop-reload-button { - z-index: 3; - position: relative; - --toolbarbutton-hover-background: var(--urlbar-box-hover-bgcolor); - color: var(--urlbar-box-hover-text-color) !important; - margin-left: calc(-1 * (15px + var(--urlbar-margin-inline) + var(--uc-toolbarbutton-padding))); - } - - #nav-bar-customization-target > #stop-reload-button > .toolbarbutton-1 > .toolbarbutton-icon { - width: var(--uc-urlbar-icon-size) !important; - height: var(--uc-urlbar-icon-size) !important; - padding: var(--urlbar-icon-padding) !important; - } -} -@supports -moz-bool-pref("userChrome.combined.urlbar_with_back_forward") { - #nav-bar-customization-target > #back-button { - -moz-box-ordinal-group: 2; - } - - #nav-bar-customization-target > #forward-button { - -moz-box-ordinal-group: 4; - } - - #nav-bar { - --uc-backbutton-background: var(--toolbarbutton-hover-background, hsla(0, 100%, 100%, 0.5)); - --uc-backbutton-hover-background: var(--toolbarbutton-active-background); - --uc-backbutton-active-background: color-mix(in srgb, currentColor 20%, transparent); - } - - #nav-bar-customization-target > #urlbar-container { - /* var(--urlbar-margin-inline) */ - margin-inline-start: calc(-1 * var(--uc-toolbarbutton-size)) !important; - } - #nav-bar-customization-target > #urlbar-container > #urlbar:not([breakout][breakout-extend]) { - padding-left: var(--uc-toolbarbutton-size); - } - #nav-bar-customization-target > #forward-button { - z-index: 2; - position: relative; - margin-inline-start: calc(-1 * var(--uc-toolbarbutton-boundary) + 1px) !important; - padding-inline-end: 0px !important; - /* Original: var(--toolbarbutton-outer-padding) */ - } - #nav-bar-customization-target > #forward-button > .toolbarbutton-icon { - padding-inline-end: var(--urlbar-icon-padding) !important; - /* Original: var(--toolbarbutton-inner-padding) */ - padding-block: var(--urlbar-icon-padding) !important; - height: var(--uc-urlbar-icon-size) !important; - } - #nav-bar-customization-target > #back-button { - position: relative; - z-index: 3 !important; - background-color: var(--toolbar-bgcolor) !important; - background-clip: content-box !important; - border-radius: 100%; - padding-block: 0 !important; - padding-inline-end: 0 !important; - } - #nav-bar-customization-target > #back-button > menupopup { - margin-top: -1px !important; - } - #nav-bar-customization-target > #back-button > .toolbarbutton-icon { - background-color: var(--uc-backbutton-background); - background-origin: padding-box; - background-clip: padding-box; - border: 1px solid var(--uc-backbutton-border-color); - border-radius: 10000px !important; - padding-inline-end: var(--urlbar-icon-padding) !important; - height: auto !important; - } - #nav-bar-customization-target > #back-button:not([disabled], [open]):hover > .toolbarbutton-icon { - background-color: var(--uc-backbutton-hover-background) !important; - box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); - border-color: rgba(12, 12, 13, 0.35); - } - #nav-bar-customization-target > #back-button[open] > .toolbarbutton-icon, - #nav-bar-customization-target > #back-button:not([disabled]):hover:active > .toolbarbutton-icon { - background-color: var(--uc-backbutton-active-background) !important; - border-color: rgba(12, 12, 13, 0.4); - } - #nav-bar-customization-target > #back-button[disabled="true"] { - opacity: 1 !important; - /* Original: 0.4 */ - } - #nav-bar-customization-target > #back-button[disabled="true"] > .toolbarbutton-icon { - background-color: color-mix( - in srgb, - var(--toolbarbutton-hover-background), - var(--toolbar-field-background-color) 40% - ) !important; - fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); - } -} /** Auto Hide *****************************************************************/ @supports -moz-bool-pref("userChrome.autohide.back_button") { #back-button[disabled="true"] { diff --git a/src/leptonChrome.scss b/src/leptonChrome.scss index ccee2d4..e3b63ef 100644 --- a/src/leptonChrome.scss +++ b/src/leptonChrome.scss @@ -39,6 +39,9 @@ /** Tab UI ****************************************************************/ @import "tab/index"; +/** urlbar ********************************************************************/ +@import "urlbar/index"; + /** Url View UI ***************************************************************/ @import "urlview/index"; @@ -57,9 +60,6 @@ /** Centered ******************************************************************/ @import "centered/index"; -/** Combined ******************************************************************/ -@import "combined/index"; - /** Auto Hide *****************************************************************/ @import "autohide/index"; diff --git a/src/urlview/_always_show_page_actions.scss b/src/urlbar/_always_show_page_actions.scss similarity index 100% rename from src/urlview/_always_show_page_actions.scss rename to src/urlbar/_always_show_page_actions.scss diff --git a/src/combined/_back_forward.scss b/src/urlbar/_back_forward_button.scss similarity index 100% rename from src/combined/_back_forward.scss rename to src/urlbar/_back_forward_button.scss diff --git a/src/combined/_index.scss b/src/urlbar/_index.scss similarity index 63% rename from src/combined/_index.scss rename to src/urlbar/_index.scss index afaffe5..82d362f 100644 --- a/src/combined/_index.scss +++ b/src/urlbar/_index.scss @@ -1,5 +1,11 @@ -// Init -@include Option("userChrome.combined.urlbar_with_reload", "userChrome.combined.urlbar_with_back_forward") { +/*= Url Bar - Always show page actions =======================================*/ +@include Option("userChrome.urlbar.always_show_page_actions") { + @import "always_show_page_actions"; +} + +/*= Url Bar - Combined buttons ===============================================*/ +@include Option("userChrome.urlbar.combined_with_reload", "userChrome.urlbar.combined_with_back_forward") { + // Init #nav-bar { --uc-toolbarbutton-boundary: calc(var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding)); --uc-toolbarbutton-padding: calc(2 * var(--uc-toolbarbutton-boundary)); @@ -24,15 +30,15 @@ } } -@include Option("userChrome.combined.urlbar_with_reload") { +@include Option("userChrome.urlbar.combined_with_reload") { #nav-bar-customization-target > #stop-reload-button { -moz-box-ordinal-group: 6; } - @import "reload"; + @import "reload_button"; } -@include Option("userChrome.combined.urlbar_with_back_forward") { +@include Option("userChrome.urlbar.combined_with_back_forward") { #nav-bar-customization-target > #back-button { -moz-box-ordinal-group: 2; } @@ -40,5 +46,5 @@ -moz-box-ordinal-group: 4; } - @import "back_forward"; + @import "back_forward_button"; } diff --git a/src/combined/_reload.scss b/src/urlbar/_reload_button.scss similarity index 100% rename from src/combined/_reload.scss rename to src/urlbar/_reload_button.scss diff --git a/src/urlview/_index.scss b/src/urlview/_index.scss index bfb6922..2a2fd78 100644 --- a/src/urlview/_index.scss +++ b/src/urlview/_index.scss @@ -7,8 +7,3 @@ @include Option("userChrome.urlView.go_button_when_typing") { @import "go_button_when_typing"; } - -/*= Url View - Always show page actions ======================================*/ -@include Option("userChrome.urlView.always_show_page_actions") { - @import "always_show_page_actions"; -} diff --git a/user.js b/user.js index 55d9a66..58d0b49 100644 --- a/user.js +++ b/user.js @@ -110,9 +110,6 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.counter.tab", true); // user_pref("userChrome.counter.bookmark_menu", true); -// user_pref("userChrome.combined.urlbar_with_reload", true); -// user_pref("userChrome.combined.urlbar_with_back_forward", true); - // user_pref("userChrome.rounding.square_button", true); // user_pref("userChrome.rounding.square_panel", true); // user_pref("userChrome.rounding.square_panelitem", true); @@ -131,9 +128,12 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.padding.urlView_result", true); // user_pref("userChrome.padding.panel_header", true); +// user_pref("userChrome.urlbar.always_show_page_actions", true); +// user_pref("userChrome.urlbar.combined_with_reload", true); +// user_pref("userChrome.urlbar.combined_with_back_forward", true); + // user_pref("userChrome.urlView.move_icon_to_left", true); // user_pref("userChrome.urlView.go_button_when_typing", true); -// user_pref("userChrome.urlView.always_show_page_actions", true); // user_pref("userChrome.tabbar.as_titlebar", true); // user_pref("userChrome.tabbar.fill_width", true); From 79fdf7380e5aa558530f8ce9ff6f1d3b4f02b6aa Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 3 Oct 2022 19:35:10 +0900 Subject: [PATCH 08/88] Fix: URL Bar - Reload button padding --- css/leptonChrome.css | 4 ++-- src/urlbar/_reload_button.scss | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index c5ac344..0172471 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -7368,7 +7368,7 @@ } #urlbar { - padding-right: var(--uc-toolbarbutton-size); + padding-right: calc(var(--uc-toolbarbutton-size) - var(--urlbar-margin-inline) / 2); } #nav-bar-customization-target > #stop-reload-button { @@ -7376,7 +7376,7 @@ position: relative; --toolbarbutton-hover-background: var(--urlbar-box-hover-bgcolor); color: var(--urlbar-box-hover-text-color) !important; - margin-left: calc(-1 * (15px + var(--urlbar-margin-inline) + var(--uc-toolbarbutton-padding))); + margin-left: calc(-1 * (var(--uc-toolbarbutton-size) + var(--urlbar-margin-inline))); } #nav-bar-customization-target > #stop-reload-button > .toolbarbutton-1 > .toolbarbutton-icon { diff --git a/src/urlbar/_reload_button.scss b/src/urlbar/_reload_button.scss index 471375f..011eae7 100644 --- a/src/urlbar/_reload_button.scss +++ b/src/urlbar/_reload_button.scss @@ -1,7 +1,7 @@ // Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/reload_button_in_urlbar.css made available under Mozilla Public License v. 2.0 // See the above repository for updates as well as full license text. #urlbar { - padding-right: var(--uc-toolbarbutton-size); + padding-right: calc(var(--uc-toolbarbutton-size) - (var(--urlbar-margin-inline) / 2)); } #nav-bar-customization-target > #stop-reload-button { @@ -9,9 +9,9 @@ position: relative; --toolbarbutton-hover-background: var(--urlbar-box-hover-bgcolor); - color: var(--urlbar-box-hover-text-color) !important; + color: var(--urlbar-box-hover-text-color) !important; - margin-left: calc( -1 * ( #{ 16px - 1px } + var(--urlbar-margin-inline) + var(--uc-toolbarbutton-padding))); + margin-left: calc( -1 * (var(--uc-toolbarbutton-size) + var(--urlbar-margin-inline))); } #nav-bar-customization-target > #stop-reload-button > .toolbarbutton-1 > .toolbarbutton-icon { From 9a0aa09c07d66d7dbd5e7f18cf2ca9fd9493ba02 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 4 Oct 2022 00:57:34 +0900 Subject: [PATCH 09/88] Add: URL Bar - Combined Home button --- css/leptonChrome.css | 108 ++++++++++++++++++++------- src/urlbar/_back_forward_button.scss | 69 ++++++++++------- src/urlbar/_index.scss | 23 +++++- user.js | 3 +- 4 files changed, 147 insertions(+), 56 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 0172471..d3722c0 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -7342,13 +7342,24 @@ } } /*= Url Bar - Combined buttons ===============================================*/ -@supports -moz-bool-pref("userChrome.urlbar.combined_with_reload") or -moz-bool-pref("userChrome.urlbar.combined_with_back_forward") { +@supports -moz-bool-pref("userChrome.urlbar.combined_with_reload") or -moz-bool-pref( + "userChrome.urlbar.combined_with_back_forward" + ) or -moz-bool-pref("userChrome.urlbar.combined_with_home") { #nav-bar { + --uc-combined-circlebutton-background: hsla(0, 100%, 100%, 0.5); + --uc-combined-circlebutton-hover-background: var(--uc-combined-circlebutton-background); + --uc-combined-circlebutton-active-background: var(--toolbarbutton-active-background); + --uc-combined-circlebutton-border-color: hsla(240, 5%, 5%, 0.3); --uc-toolbarbutton-boundary: calc(var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding)); --uc-toolbarbutton-padding: calc(2 * var(--uc-toolbarbutton-boundary)); --uc-toolbarbutton-size: calc(12px + var(--uc-toolbarbutton-padding)); --uc-urlbar-icon-size: calc(16px + 2 * var(--urlbar-icon-padding)); } + #nav-bar[brighttext] { + --uc-combined-circlebutton-background: var(--toolbarbutton-hover-background); + --uc-combined-circlebutton-hover-background: var(--toolbarbutton-active-background); + --uc-combined-circlebutton-active-background: color-mix(in srgb, currentColor 20%, transparent); + } #nav-bar-customization-target > * { -moz-box-ordinal-group: 1; @@ -7394,12 +7405,6 @@ -moz-box-ordinal-group: 4; } - #nav-bar { - --uc-backbutton-background: var(--toolbarbutton-hover-background, hsla(0, 100%, 100%, 0.5)); - --uc-backbutton-hover-background: var(--toolbarbutton-active-background); - --uc-backbutton-active-background: color-mix(in srgb, currentColor 20%, transparent); - } - #nav-bar-customization-target > #urlbar-container { /* var(--urlbar-margin-inline) */ margin-inline-start: calc(-1 * var(--uc-toolbarbutton-size)) !important; @@ -7422,33 +7427,18 @@ } #nav-bar-customization-target > #back-button { position: relative; - z-index: 3 !important; - background-color: var(--toolbar-bgcolor) !important; - background-clip: content-box !important; - border-radius: 100%; - padding-block: 0 !important; - padding-inline-end: 0 !important; - } - #nav-bar-customization-target > #back-button > menupopup { - margin-top: -1px !important; } #nav-bar-customization-target > #back-button > .toolbarbutton-icon { - background-color: var(--uc-backbutton-background); - background-origin: padding-box; - background-clip: padding-box; - border: 1px solid var(--uc-backbutton-border-color); - border-radius: 10000px !important; - padding-inline-end: var(--urlbar-icon-padding) !important; - height: auto !important; + background-color: var(--uc-combined-circlebutton-background); } #nav-bar-customization-target > #back-button:not([disabled], [open]):hover > .toolbarbutton-icon { - background-color: var(--uc-backbutton-hover-background) !important; + background-color: var(--uc-combined-circlebutton-hover-background) !important; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); border-color: rgba(12, 12, 13, 0.35); } #nav-bar-customization-target > #back-button[open] > .toolbarbutton-icon, #nav-bar-customization-target > #back-button:not([disabled]):hover:active > .toolbarbutton-icon { - background-color: var(--uc-backbutton-active-background) !important; + background-color: var(--uc-combined-circlebutton-active-background) !important; border-color: rgba(12, 12, 13, 0.4); } #nav-bar-customization-target > #back-button[disabled="true"] { @@ -7463,6 +7453,74 @@ ) !important; fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); } + @supports -moz-bool-pref("userChrome.urlbar.combined_with_home") { + #nav-bar-customization-target > #back-button { + z-index: 2; + margin-inline-end: calc(-1 * var(--uc-toolbarbutton-boundary) - 1px) !important; + padding-inline-start: 0px !important; + /* Original: var(--toolbarbutton-outer-padding) */ + } + #nav-bar-customization-target > #back-button > .toolbarbutton-icon { + padding-inline-start: var(--urlbar-icon-padding) !important; + /* Original: var(--toolbarbutton-inner-padding) */ + padding-block: var(--urlbar-icon-padding) !important; + height: var(--uc-urlbar-icon-size) !important; + } + } + @supports not -moz-bool-pref("userChrome.urlbar.combined_with_home") { + #nav-bar-customization-target > #back-button { + z-index: 3 !important; + background-color: var(--toolbar-bgcolor) !important; + background-clip: content-box !important; + border-radius: 100%; + padding-block: 0 !important; + padding-inline-end: 0 !important; + } + #nav-bar-customization-target > #back-button > menupopup { + margin-top: -1px !important; + } + #nav-bar-customization-target > #back-button > .toolbarbutton-icon { + background-origin: padding-box; + background-clip: padding-box; + border: 1px solid var(--uc-combined-circlebutton-border-color); + border-radius: 10000px !important; + padding-inline-end: var(--urlbar-icon-padding) !important; + height: auto !important; + } + } +} +@supports -moz-bool-pref("userChrome.urlbar.combined_with_home") { + #nav-bar-customization-target > #home-button { + -moz-box-ordinal-group: 3; + } + + #nav-bar-customization-target > #home-button { + z-index: 3; + position: relative; + background-color: var(--toolbar-bgcolor) !important; + background-clip: content-box !important; + border-radius: 100%; + padding-block: 0 !important; + padding-inline-end: 0 !important; + } + #nav-bar-customization-target > #home-button > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-background); + background-origin: padding-box; + background-clip: padding-box; + border: 1px solid var(--uc-combined-circlebutton-border-color); + border-radius: 10000px !important; + padding-inline-end: var(--urlbar-icon-padding) !important; + height: auto !important; + } + #nav-bar-customization-target > #home-button:hover > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-hover-background) !important; + box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); + border-color: rgba(12, 12, 13, 0.35); + } + #nav-bar-customization-target > #home-button:hover:active > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-active-background) !important; + border-color: rgba(12, 12, 13, 0.4); + } } /** Url View UI ***************************************************************/ /*= Url View - Move icon to left =============================================*/ diff --git a/src/urlbar/_back_forward_button.scss b/src/urlbar/_back_forward_button.scss index a67bb00..4a5af94 100644 --- a/src/urlbar/_back_forward_button.scss +++ b/src/urlbar/_back_forward_button.scss @@ -1,9 +1,3 @@ -#nav-bar { - --uc-backbutton-background: var(--toolbarbutton-hover-background, hsla(0,100%,100%,.5)); - --uc-backbutton-hover-background: var(--toolbarbutton-active-background); - --uc-backbutton-active-background: color-mix(in srgb, currentColor 20%, transparent); -} - #nav-bar-customization-target > { #urlbar-container { /* var(--urlbar-margin-inline) */ @@ -31,37 +25,17 @@ #back-button { position: relative; - z-index: 3 !important; - background-color: var(--toolbar-bgcolor) !important; - background-clip: content-box !important; - border-radius: 100%; - - padding-block: 0 !important; - padding-inline-end: 0 !important; - - > menupopup { - margin-top: -1px !important; - } - > .toolbarbutton-icon { - background-color: var(--uc-backbutton-background); - background-origin: padding-box; - background-clip: padding-box; - border: 1px solid var(--uc-backbutton-border-color); - border-radius: 10000px !important; - - padding-inline-end: var(--urlbar-icon-padding) !important; - height: auto !important + background-color: var(--uc-combined-circlebutton-background); } - &:not([disabled], [open]):hover > .toolbarbutton-icon { - background-color: var(--uc-backbutton-hover-background) !important; + background-color: var(--uc-combined-circlebutton-hover-background) !important; box-shadow: 0 1px 6px hsla(0,0%,0%,.1); border-color: hsla(240,5%,5%,.35); } &[open] > .toolbarbutton-icon, &:not([disabled]):hover:active > .toolbarbutton-icon { - background-color: var(--uc-backbutton-active-background) !important; + background-color: var(--uc-combined-circlebutton-active-background) !important; border-color: hsla(240,5%,5%,.40); } @@ -73,5 +47,42 @@ fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); } } + + @include Option("userChrome.urlbar.combined_with_home") { + z-index: 2; + + margin-inline-end: calc(-1 * var(--uc-toolbarbutton-boundary) - 1px) !important; + padding-inline-start: 0px !important; /* Original: var(--toolbarbutton-outer-padding) */ + + > .toolbarbutton-icon { + padding-inline-start: var(--urlbar-icon-padding) !important; /* Original: var(--toolbarbutton-inner-padding) */ + padding-block: var(--urlbar-icon-padding) !important; + height: var(--uc-urlbar-icon-size) !important; + } + } + + @include NotOption("userChrome.urlbar.combined_with_home") { + z-index: 3 !important; + background-color: var(--toolbar-bgcolor) !important; + background-clip: content-box !important; + border-radius: 100%; + + padding-block: 0 !important; + padding-inline-end: 0 !important; + + > menupopup { + margin-top: -1px !important; + } + + > .toolbarbutton-icon { + background-origin: padding-box; + background-clip: padding-box; + border: 1px solid var(--uc-combined-circlebutton-border-color); + border-radius: 10000px !important; + + padding-inline-end: var(--urlbar-icon-padding) !important; + height: auto !important + } + } } } diff --git a/src/urlbar/_index.scss b/src/urlbar/_index.scss index 82d362f..a857213 100644 --- a/src/urlbar/_index.scss +++ b/src/urlbar/_index.scss @@ -4,9 +4,22 @@ } /*= Url Bar - Combined buttons ===============================================*/ -@include Option("userChrome.urlbar.combined_with_reload", "userChrome.urlbar.combined_with_back_forward") { +@include Option("userChrome.urlbar.combined_with_reload", "userChrome.urlbar.combined_with_back_forward", "userChrome.urlbar.combined_with_home") { // Init #nav-bar { + // Color + --uc-combined-circlebutton-background: hsla(0,100%,100%,.5); + --uc-combined-circlebutton-hover-background: var(--uc-combined-circlebutton-background); + --uc-combined-circlebutton-active-background: var(--toolbarbutton-active-background); + --uc-combined-circlebutton-border-color: hsla(240,5%,5%,.3); + &[brighttext] { + // Original: Using :-moz-lwtheme + --uc-combined-circlebutton-background: var(--toolbarbutton-hover-background); + --uc-combined-circlebutton-hover-background: var(--toolbarbutton-active-background); + --uc-combined-circlebutton-active-background: color-mix(in srgb, currentColor 20%, transparent); + } + + // Padding & Size --uc-toolbarbutton-boundary: calc(var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding)); --uc-toolbarbutton-padding: calc(2 * var(--uc-toolbarbutton-boundary)); --uc-toolbarbutton-size: calc(12px + var(--uc-toolbarbutton-padding)); @@ -48,3 +61,11 @@ @import "back_forward_button"; } + +@include Option("userChrome.urlbar.combined_with_home") { + #nav-bar-customization-target > #home-button { + -moz-box-ordinal-group: 3; + } + + @import "home_button"; +} diff --git a/user.js b/user.js index 58d0b49..85ff362 100644 --- a/user.js +++ b/user.js @@ -128,9 +128,10 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.padding.urlView_result", true); // user_pref("userChrome.padding.panel_header", true); -// user_pref("userChrome.urlbar.always_show_page_actions", true); +// user_pref("userChrome.urlbar.always_show_page_actions", true); // user_pref("userChrome.urlbar.combined_with_reload", true); // user_pref("userChrome.urlbar.combined_with_back_forward", true); +// user_pref("userChrome.urlbar.combined_with_home", true); // user_pref("userChrome.urlView.move_icon_to_left", true); // user_pref("userChrome.urlView.go_button_when_typing", true); From 94aaace7ded7b693ff00deaf4569361f79575cd8 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 4 Oct 2022 05:34:17 +0900 Subject: [PATCH 10/88] Fix: Build - #468 --- src/tabbar/_fill_width.scss | 8 ++++++++ src/urlbar/_home_button.scss | 31 +++++++++++++++++++++++++++++++ 2 files changed, 39 insertions(+) create mode 100644 src/tabbar/_fill_width.scss create mode 100644 src/urlbar/_home_button.scss diff --git a/src/tabbar/_fill_width.scss b/src/tabbar/_fill_width.scss new file mode 100644 index 0000000..2da94c5 --- /dev/null +++ b/src/tabbar/_fill_width.scss @@ -0,0 +1,8 @@ +// Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_fill_available_width.css made available under Mozilla Public License v. 2.0 +// See the above repository for updates as well as full license text. + +/* Why 100vw? Tab closing requires width animation to end and "none" can't be animated */ +.tabbrowser-tab[fadein]:not([style^="max-width"]) { + --tab-max-width: 100vw; + max-width: var(--tab-max-width) !important; +} diff --git a/src/urlbar/_home_button.scss b/src/urlbar/_home_button.scss new file mode 100644 index 0000000..3fb5a18 --- /dev/null +++ b/src/urlbar/_home_button.scss @@ -0,0 +1,31 @@ +#nav-bar-customization-target > #home-button { + z-index: 3; + position: relative; + + background-color: var(--toolbar-bgcolor) !important; + background-clip: content-box !important; + border-radius: 100%; + + padding-block: 0 !important; + padding-inline-end: 0 !important; + + > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-background); + background-origin: padding-box; + background-clip: padding-box; + border: 1px solid var(--uc-combined-circlebutton-border-color); + border-radius: 10000px !important; + + padding-inline-end: var(--urlbar-icon-padding) !important; + height: auto !important + } + &:hover > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-hover-background) !important; + box-shadow: 0 1px 6px hsla(0,0%,0%,.1); + border-color: hsla(240,5%,5%,.35); + } + &:hover:active > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-active-background) !important; + border-color: hsla(240,5%,5%,.40); + } +} From 42d5758f269925876c4aa9148c863c139f90c174 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 4 Oct 2022 18:51:06 +0900 Subject: [PATCH 11/88] Fix: URL Bar - Works separated combine options --- css/leptonChrome.css | 27 ++++++++++++++++++++------- src/urlbar/_back_forward_button.scss | 9 --------- src/urlbar/_index.scss | 19 +++++++++++++++++++ 3 files changed, 39 insertions(+), 16 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 779f900..dfd158e 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -7430,6 +7430,7 @@ --uc-toolbarbutton-boundary: calc(var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding)); --uc-toolbarbutton-padding: calc(2 * var(--uc-toolbarbutton-boundary)); --uc-toolbarbutton-size: calc(12px + var(--uc-toolbarbutton-padding)); + --uc-toolbarbutton-halfsize: calc(6px + var(--uc-toolbarbutton-boundary)); --uc-urlbar-icon-size: calc(16px + 2 * var(--urlbar-icon-padding)); } #nav-bar[brighttext] { @@ -7450,6 +7451,25 @@ -moz-box-ordinal-group: 7; } } +@supports -moz-bool-pref("userChrome.urlbar.combined_with_back_forward") or -moz-bool-pref("userChrome.urlbar.combined_with_home") { + #nav-bar-customization-target > #urlbar-container { + /* var(--urlbar-margin-inline) */ + margin-inline-start: calc(-1 * var(--uc-urlbar-combined-margin)) !important; + } + #nav-bar-customization-target > #urlbar-container > #urlbar:not([breakout][breakout-extend]) { + padding-left: var(--uc-urlbar-combined-margin); + } + @supports -moz-bool-pref("userChrome.urlbar.combined_with_back_forward") { + #nav-bar-customization-target > #urlbar-container { + --uc-urlbar-combined-margin: var(--uc-toolbarbutton-size); + } + } + @supports not -moz-bool-pref("userChrome.urlbar.combined_with_back_forward") { + #nav-bar-customization-target > #urlbar-container { + --uc-urlbar-combined-margin: var(--uc-toolbarbutton-halfsize); + } + } +} @supports -moz-bool-pref("userChrome.urlbar.combined_with_reload") { #nav-bar-customization-target > #stop-reload-button { -moz-box-ordinal-group: 6; @@ -7482,13 +7502,6 @@ -moz-box-ordinal-group: 4; } - #nav-bar-customization-target > #urlbar-container { - /* var(--urlbar-margin-inline) */ - margin-inline-start: calc(-1 * var(--uc-toolbarbutton-size)) !important; - } - #nav-bar-customization-target > #urlbar-container > #urlbar:not([breakout][breakout-extend]) { - padding-left: var(--uc-toolbarbutton-size); - } #nav-bar-customization-target > #forward-button { z-index: 2; position: relative; diff --git a/src/urlbar/_back_forward_button.scss b/src/urlbar/_back_forward_button.scss index 4a5af94..5273816 100644 --- a/src/urlbar/_back_forward_button.scss +++ b/src/urlbar/_back_forward_button.scss @@ -1,13 +1,4 @@ #nav-bar-customization-target > { - #urlbar-container { - /* var(--urlbar-margin-inline) */ - margin-inline-start: calc(-1 * var(--uc-toolbarbutton-size)) !important; - - > #urlbar:not([breakout][breakout-extend]) { - padding-left: var(--uc-toolbarbutton-size); - } - } - #forward-button { z-index: 2; position: relative; diff --git a/src/urlbar/_index.scss b/src/urlbar/_index.scss index a857213..8be76d1 100644 --- a/src/urlbar/_index.scss +++ b/src/urlbar/_index.scss @@ -23,6 +23,7 @@ --uc-toolbarbutton-boundary: calc(var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding)); --uc-toolbarbutton-padding: calc(2 * var(--uc-toolbarbutton-boundary)); --uc-toolbarbutton-size: calc(12px + var(--uc-toolbarbutton-padding)); + --uc-toolbarbutton-halfsize: calc(6px + var(--uc-toolbarbutton-boundary)); --uc-urlbar-icon-size: calc(16px + 2 * var(--urlbar-icon-padding)); } @@ -43,6 +44,24 @@ } } +@include Option("userChrome.urlbar.combined_with_back_forward", "userChrome.urlbar.combined_with_home") { + #nav-bar-customization-target > #urlbar-container { + /* var(--urlbar-margin-inline) */ + margin-inline-start: calc(-1 * var(--uc-urlbar-combined-margin)) !important; + + > #urlbar:not([breakout][breakout-extend]) { + padding-left: var(--uc-urlbar-combined-margin); + } + + @include Option("userChrome.urlbar.combined_with_back_forward") { + --uc-urlbar-combined-margin: var(--uc-toolbarbutton-size); + } + @include NotOption("userChrome.urlbar.combined_with_back_forward") { + --uc-urlbar-combined-margin: var(--uc-toolbarbutton-halfsize); + } + } +} + @include Option("userChrome.urlbar.combined_with_reload") { #nav-bar-customization-target > #stop-reload-button { -moz-box-ordinal-group: 6; From acddc3711f9e32650ed299f9fb47e5f78168deba Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 5 Oct 2022 01:45:20 +0900 Subject: [PATCH 12/88] Fix: Combined - Interaction each combined options --- css/leptonChrome.css | 240 +++++++++++++++++++++------ src/urlbar/_back_forward_button.scss | 121 +++++++++----- src/urlbar/_index.scss | 45 +++-- 3 files changed, 296 insertions(+), 110 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index dfd158e..aea14dc 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -7419,9 +7419,11 @@ } } /*= Url Bar - Combined buttons ===============================================*/ -@supports -moz-bool-pref("userChrome.urlbar.combined_with_reload") or -moz-bool-pref( - "userChrome.urlbar.combined_with_back_forward" - ) or -moz-bool-pref("userChrome.urlbar.combined_with_home") { +@supports -moz-bool-pref("userChrome.combined.nav_button") or -moz-bool-pref( + "userChrome.combined.nav_button.home_button" + ) or -moz-bool-pref("userChrome.combined.urlbar.nav_button") or -moz-bool-pref( + "userChrome.combined.urlbar.home_button" + ) or -moz-bool-pref("userChrome.combined.urlbar.reload_button") { #nav-bar { --uc-combined-circlebutton-background: hsla(0, 100%, 100%, 0.5); --uc-combined-circlebutton-hover-background: var(--uc-combined-circlebutton-background); @@ -7451,7 +7453,7 @@ -moz-box-ordinal-group: 7; } } -@supports -moz-bool-pref("userChrome.urlbar.combined_with_back_forward") or -moz-bool-pref("userChrome.urlbar.combined_with_home") { +@supports -moz-bool-pref("userChrome.combined.urlbar.nav_button") or -moz-bool-pref("userChrome.combined.urlbar.home_button") { #nav-bar-customization-target > #urlbar-container { /* var(--urlbar-margin-inline) */ margin-inline-start: calc(-1 * var(--uc-urlbar-combined-margin)) !important; @@ -7459,55 +7461,31 @@ #nav-bar-customization-target > #urlbar-container > #urlbar:not([breakout][breakout-extend]) { padding-left: var(--uc-urlbar-combined-margin); } - @supports -moz-bool-pref("userChrome.urlbar.combined_with_back_forward") { + @supports -moz-bool-pref("userChrome.combined.urlbar.nav_button") { #nav-bar-customization-target > #urlbar-container { --uc-urlbar-combined-margin: var(--uc-toolbarbutton-size); } } - @supports not -moz-bool-pref("userChrome.urlbar.combined_with_back_forward") { + @supports not -moz-bool-pref("userChrome.combined.urlbar.nav_button") { #nav-bar-customization-target > #urlbar-container { --uc-urlbar-combined-margin: var(--uc-toolbarbutton-halfsize); } + @supports -moz-bool-pref("userChrome.combined.nav_button") { + @supports -moz-bool-pref("userChrome.combined.nav_button.home_button") { + @supports -moz-bool-pref("userChrome.combined.urlbar.home_button") { + #nav-bar-customization-target > #urlbar-container { + --uc-urlbar-combined-margin: var(--uc-toolbarbutton-size); + } + } + } + } } } -@supports -moz-bool-pref("userChrome.urlbar.combined_with_reload") { - #nav-bar-customization-target > #stop-reload-button { - -moz-box-ordinal-group: 6; - } - - #urlbar { - padding-right: calc(var(--uc-toolbarbutton-size) - var(--urlbar-margin-inline) / 2); - } - - #nav-bar-customization-target > #stop-reload-button { - z-index: 3; - position: relative; - --toolbarbutton-hover-background: var(--urlbar-box-hover-bgcolor); - color: var(--urlbar-box-hover-text-color) !important; - margin-left: calc(-1 * (var(--uc-toolbarbutton-size) + var(--urlbar-margin-inline))); - } - - #nav-bar-customization-target > #stop-reload-button > .toolbarbutton-1 > .toolbarbutton-icon { - width: var(--uc-urlbar-icon-size) !important; - height: var(--uc-urlbar-icon-size) !important; - padding: var(--urlbar-icon-padding) !important; - } -} -@supports -moz-bool-pref("userChrome.urlbar.combined_with_back_forward") { - #nav-bar-customization-target > #back-button { - -moz-box-ordinal-group: 2; - } - - #nav-bar-customization-target > #forward-button { - -moz-box-ordinal-group: 4; - } - +@supports -moz-bool-pref("userChrome.combined.nav_button") or -moz-bool-pref("userChrome.combined.urlbar.nav_button") { #nav-bar-customization-target > #forward-button { z-index: 2; position: relative; margin-inline-start: calc(-1 * var(--uc-toolbarbutton-boundary) + 1px) !important; - padding-inline-end: 0px !important; - /* Original: var(--toolbarbutton-outer-padding) */ } #nav-bar-customization-target > #forward-button > .toolbarbutton-icon { padding-inline-end: var(--urlbar-icon-padding) !important; @@ -7515,6 +7493,70 @@ padding-block: var(--urlbar-icon-padding) !important; height: var(--uc-urlbar-icon-size) !important; } + @supports -moz-bool-pref("userChrome.combined.urlbar.nav_button") { + #nav-bar-customization-target > #forward-button { + padding-inline-end: 0px !important; + /* Original: var(--toolbarbutton-outer-padding) */ + } + } + @supports not -moz-bool-pref("userChrome.combined.urlbar.nav_button") { + @supports -moz-bool-pref("userChrome.combined.urlbar.home_button") { + @supports not -moz-bool-pref("userChrome.combined.nav_button.home_button") { + #nav-bar-customization-target > #forward-button > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-background); + } + #nav-bar-customization-target > #forward-button:not([disabled], [open]):hover > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-hover-background) !important; + box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); + border-color: rgba(12, 12, 13, 0.35); + } + #nav-bar-customization-target > #forward-button[open] > .toolbarbutton-icon, + #nav-bar-customization-target > #forward-button:not([disabled]):hover:active > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-active-background) !important; + border-color: rgba(12, 12, 13, 0.4); + } + #nav-bar-customization-target > #forward-button[disabled="true"] { + opacity: 1 !important; + /* Original: 0.4 */ + } + #nav-bar-customization-target > #forward-button[disabled="true"] > .toolbarbutton-icon { + background-color: color-mix( + in srgb, + var(--toolbarbutton-hover-background), + var(--toolbar-field-background-color) 40% + ) !important; + fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); + } + } + } + @supports not -moz-bool-pref("userChrome.combined.urlbar.home_button") { + #nav-bar-customization-target > #forward-button > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-background); + } + #nav-bar-customization-target > #forward-button:not([disabled], [open]):hover > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-hover-background) !important; + box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); + border-color: rgba(12, 12, 13, 0.35); + } + #nav-bar-customization-target > #forward-button[open] > .toolbarbutton-icon, + #nav-bar-customization-target > #forward-button:not([disabled]):hover:active > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-active-background) !important; + border-color: rgba(12, 12, 13, 0.4); + } + #nav-bar-customization-target > #forward-button[disabled="true"] { + opacity: 1 !important; + /* Original: 0.4 */ + } + #nav-bar-customization-target > #forward-button[disabled="true"] > .toolbarbutton-icon { + background-color: color-mix( + in srgb, + var(--toolbarbutton-hover-background), + var(--toolbar-field-background-color) 40% + ) !important; + fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); + } + } + } #nav-bar-customization-target > #back-button { position: relative; } @@ -7543,7 +7585,7 @@ ) !important; fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); } - @supports -moz-bool-pref("userChrome.urlbar.combined_with_home") { + @supports -moz-bool-pref("userChrome.combined.nav_button.home_button") or -moz-bool-pref("userChrome.combined.urlbar.home_button") { #nav-bar-customization-target > #back-button { z-index: 2; margin-inline-end: calc(-1 * var(--uc-toolbarbutton-boundary) - 1px) !important; @@ -7557,19 +7599,66 @@ height: var(--uc-urlbar-icon-size) !important; } } - @supports not -moz-bool-pref("userChrome.urlbar.combined_with_home") { - #nav-bar-customization-target > #back-button { - z-index: 3 !important; + @supports not -moz-bool-pref("userChrome.combined.nav_button.home_button") { + @supports -moz-bool-pref("userChrome.combined.urlbar.nav_button") { + @supports not -moz-bool-pref("userChrome.combined.urlbar.home_button") { + #nav-bar-customization-target > #back-button { + z-index: 3 !important; + background-color: var(--toolbar-bgcolor) !important; + background-clip: content-box !important; + border-radius: 100%; + padding-block: 0 !important; + padding-inline-end: 0 !important; + } + #nav-bar-customization-target > #back-button > menupopup { + margin-top: -1px !important; + } + #nav-bar-customization-target > #back-button > .toolbarbutton-icon { + background-origin: padding-box; + background-clip: padding-box; + border: 1px solid var(--uc-combined-circlebutton-border-color); + border-radius: 10000px !important; + padding-inline-end: var(--urlbar-icon-padding) !important; + height: auto !important; + } + } + } + @supports not -moz-bool-pref("userChrome.combined.urlbar.nav_button") { + #nav-bar-customization-target > #back-button { + z-index: 3 !important; + background-color: var(--toolbar-bgcolor) !important; + background-clip: content-box !important; + border-radius: 100%; + padding-block: 0 !important; + padding-inline-end: 0 !important; + } + #nav-bar-customization-target > #back-button > menupopup { + margin-top: -1px !important; + } + #nav-bar-customization-target > #back-button > .toolbarbutton-icon { + background-origin: padding-box; + background-clip: padding-box; + border: 1px solid var(--uc-combined-circlebutton-border-color); + border-radius: 10000px !important; + padding-inline-end: var(--urlbar-icon-padding) !important; + height: auto !important; + } + } + } +} +@supports -moz-bool-pref("userChrome.combined.nav_button") { + @supports -moz-bool-pref("userChrome.combined.nav_button.home_button") { + #nav-bar-customization-target > #home-button { + z-index: 3; + position: relative; background-color: var(--toolbar-bgcolor) !important; background-clip: content-box !important; border-radius: 100%; padding-block: 0 !important; padding-inline-end: 0 !important; } - #nav-bar-customization-target > #back-button > menupopup { - margin-top: -1px !important; - } - #nav-bar-customization-target > #back-button > .toolbarbutton-icon { + #nav-bar-customization-target > #home-button > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-background); background-origin: padding-box; background-clip: padding-box; border: 1px solid var(--uc-combined-circlebutton-border-color); @@ -7577,9 +7666,27 @@ padding-inline-end: var(--urlbar-icon-padding) !important; height: auto !important; } + #nav-bar-customization-target > #home-button:hover > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-hover-background) !important; + box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); + border-color: rgba(12, 12, 13, 0.35); + } + #nav-bar-customization-target > #home-button:hover:active > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-active-background) !important; + border-color: rgba(12, 12, 13, 0.4); + } } } -@supports -moz-bool-pref("userChrome.urlbar.combined_with_home") { +@supports -moz-bool-pref("userChrome.combined.urlbar.nav_button") { + #nav-bar-customization-target > #back-button { + -moz-box-ordinal-group: 2; + } + + #nav-bar-customization-target > #forward-button { + -moz-box-ordinal-group: 4; + } +} +@supports -moz-bool-pref("userChrome.combined.urlbar.home_button") { #nav-bar-customization-target > #home-button { -moz-box-ordinal-group: 3; } @@ -7612,6 +7719,41 @@ border-color: rgba(12, 12, 13, 0.4); } } +@supports -moz-bool-pref("userChrome.combined.urlbar.reload_button") { + #nav-bar-customization-target > #stop-reload-button { + -moz-box-ordinal-group: 6; + } + + #urlbar { + padding-right: calc(var(--uc-toolbarbutton-size) - var(--urlbar-margin-inline) / 2); + } + + #nav-bar-customization-target > #stop-reload-button { + z-index: 3; + position: relative; + --toolbarbutton-hover-background: var(--urlbar-box-hover-bgcolor); + color: var(--urlbar-box-hover-text-color) !important; + margin-left: calc(-1 * (var(--uc-toolbarbutton-size) + var(--urlbar-margin-inline))); + } + + #nav-bar-customization-target > #stop-reload-button > .toolbarbutton-1 > .toolbarbutton-icon { + width: var(--uc-urlbar-icon-size) !important; + height: var(--uc-urlbar-icon-size) !important; + padding: var(--urlbar-icon-padding) !important; + } +} +#nav-bar-customization-target > #back-button { + -moz-box-ordinal-group: 2; +} + +#nav-bar-customization-target > #forward-button { + -moz-box-ordinal-group: 4; +} + +#nav-bar-customization-target > #home-button { + -moz-box-ordinal-group: 3; +} + /** Url View UI ***************************************************************/ /*= Url View - Move icon to left =============================================*/ @supports -moz-bool-pref("userChrome.urlView.move_icon_to_left") { diff --git a/src/urlbar/_back_forward_button.scss b/src/urlbar/_back_forward_button.scss index 5273816..4eb81af 100644 --- a/src/urlbar/_back_forward_button.scss +++ b/src/urlbar/_back_forward_button.scss @@ -1,45 +1,87 @@ +//-- Mixin --------------------------------------------------------------------- +@mixin _combined_nav_button_background() { + > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-background); + } + &:not([disabled], [open]):hover > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-hover-background) !important; + box-shadow: 0 1px 6px hsla(0,0%,0%,.1); + border-color: hsla(240,5%,5%,.35); + } + &[open] > .toolbarbutton-icon, + &:not([disabled]):hover:active > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-active-background) !important; + border-color: hsla(240,5%,5%,.40); + } + + &[disabled="true"] { + opacity: 1 !important; /* Original: 0.4 */ + + > .toolbarbutton-icon { + background-color: color-mix(in srgb, var(--toolbarbutton-hover-background), var(--toolbar-field-background-color) 40%) !important; + fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); + } + } +} + +@mixin _back_button_circle_shape() { + z-index: 3 !important; + background-color: var(--toolbar-bgcolor) !important; + background-clip: content-box !important; + border-radius: 100%; + + padding-block: 0 !important; + padding-inline-end: 0 !important; + + > menupopup { + margin-top: -1px !important; + } + + > .toolbarbutton-icon { + background-origin: padding-box; + background-clip: padding-box; + border: 1px solid var(--uc-combined-circlebutton-border-color); + border-radius: 10000px !important; + + padding-inline-end: var(--urlbar-icon-padding) !important; + height: auto !important + } +} + +//------------------------------------------------------------------------------ + #nav-bar-customization-target > { #forward-button { z-index: 2; position: relative; margin-inline-start: calc(-1 * var(--uc-toolbarbutton-boundary) + 1px) !important; - padding-inline-end: 0px !important; /* Original: var(--toolbarbutton-outer-padding) */ - > .toolbarbutton-icon { padding-inline-end: var(--urlbar-icon-padding) !important; /* Original: var(--toolbarbutton-inner-padding) */ padding-block: var(--urlbar-icon-padding) !important; height: var(--uc-urlbar-icon-size) !important; } + + @include Option("userChrome.combined.urlbar.nav_button") { + padding-inline-end: 0px !important; /* Original: var(--toolbarbutton-outer-padding) */ + } + @include NotOption("userChrome.combined.urlbar.nav_button") { + @include Option("userChrome.combined.urlbar.home_button") { + @include NotOption("userChrome.combined.nav_button.home_button") { + @include _combined_nav_button_background; + } + } + @include NotOption("userChrome.combined.urlbar.home_button") { + @include _combined_nav_button_background; + } + } } #back-button { position: relative; - > .toolbarbutton-icon { - background-color: var(--uc-combined-circlebutton-background); - } - &:not([disabled], [open]):hover > .toolbarbutton-icon { - background-color: var(--uc-combined-circlebutton-hover-background) !important; - box-shadow: 0 1px 6px hsla(0,0%,0%,.1); - border-color: hsla(240,5%,5%,.35); - } - &[open] > .toolbarbutton-icon, - &:not([disabled]):hover:active > .toolbarbutton-icon { - background-color: var(--uc-combined-circlebutton-active-background) !important; - border-color: hsla(240,5%,5%,.40); - } - - &[disabled="true"] { - opacity: 1 !important; /* Original: 0.4 */ - - > .toolbarbutton-icon { - background-color: color-mix(in srgb, var(--toolbarbutton-hover-background), var(--toolbar-field-background-color) 40%) !important; - fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); - } - } - - @include Option("userChrome.urlbar.combined_with_home") { + @include _combined_nav_button_background; + @include Option("userChrome.combined.nav_button.home_button", "userChrome.combined.urlbar.home_button") { z-index: 2; margin-inline-end: calc(-1 * var(--uc-toolbarbutton-boundary) - 1px) !important; @@ -52,27 +94,14 @@ } } - @include NotOption("userChrome.urlbar.combined_with_home") { - z-index: 3 !important; - background-color: var(--toolbar-bgcolor) !important; - background-clip: content-box !important; - border-radius: 100%; - - padding-block: 0 !important; - padding-inline-end: 0 !important; - - > menupopup { - margin-top: -1px !important; + @include NotOption("userChrome.combined.nav_button.home_button") { + @include Option("userChrome.combined.urlbar.nav_button") { + @include NotOption("userChrome.combined.urlbar.home_button") { + @include _back_button_circle_shape; + } } - - > .toolbarbutton-icon { - background-origin: padding-box; - background-clip: padding-box; - border: 1px solid var(--uc-combined-circlebutton-border-color); - border-radius: 10000px !important; - - padding-inline-end: var(--urlbar-icon-padding) !important; - height: auto !important + @include NotOption("userChrome.combined.urlbar.nav_button") { + @include _back_button_circle_shape; } } } diff --git a/src/urlbar/_index.scss b/src/urlbar/_index.scss index 8be76d1..f9e8775 100644 --- a/src/urlbar/_index.scss +++ b/src/urlbar/_index.scss @@ -4,7 +4,10 @@ } /*= Url Bar - Combined buttons ===============================================*/ -@include Option("userChrome.urlbar.combined_with_reload", "userChrome.urlbar.combined_with_back_forward", "userChrome.urlbar.combined_with_home") { +@include Option( + "userChrome.combined.nav_button", "userChrome.combined.nav_button.home_button", + "userChrome.combined.urlbar.nav_button", "userChrome.combined.urlbar.home_button", "userChrome.combined.urlbar.reload_button" +) { // Init #nav-bar { // Color @@ -44,7 +47,7 @@ } } -@include Option("userChrome.urlbar.combined_with_back_forward", "userChrome.urlbar.combined_with_home") { +@include Option("userChrome.combined.urlbar.nav_button", "userChrome.combined.urlbar.home_button") { #nav-bar-customization-target > #urlbar-container { /* var(--urlbar-margin-inline) */ margin-inline-start: calc(-1 * var(--uc-urlbar-combined-margin)) !important; @@ -53,38 +56,50 @@ padding-left: var(--uc-urlbar-combined-margin); } - @include Option("userChrome.urlbar.combined_with_back_forward") { + @include Option("userChrome.combined.urlbar.nav_button") { --uc-urlbar-combined-margin: var(--uc-toolbarbutton-size); } - @include NotOption("userChrome.urlbar.combined_with_back_forward") { + @include NotOption("userChrome.combined.urlbar.nav_button") { --uc-urlbar-combined-margin: var(--uc-toolbarbutton-halfsize); + + @include Option("userChrome.combined.nav_button") { + @include Option("userChrome.combined.nav_button.home_button") { + @include Option("userChrome.combined.urlbar.home_button") { + --uc-urlbar-combined-margin: var(--uc-toolbarbutton-size); + } + } + } } } } -@include Option("userChrome.urlbar.combined_with_reload") { - #nav-bar-customization-target > #stop-reload-button { - -moz-box-ordinal-group: 6; +@include Option("userChrome.combined.nav_button", "userChrome.combined.urlbar.nav_button") { + @import "back_forward_button"; +} +@include Option("userChrome.combined.nav_button") { + @include Option("userChrome.combined.nav_button.home_button") { + @import "home_button"; } - - @import "reload_button"; } -@include Option("userChrome.urlbar.combined_with_back_forward") { +@include Option("userChrome.combined.urlbar.nav_button") { #nav-bar-customization-target > #back-button { -moz-box-ordinal-group: 2; } #nav-bar-customization-target > #forward-button { -moz-box-ordinal-group: 4; } - - @import "back_forward_button"; } - -@include Option("userChrome.urlbar.combined_with_home") { +@include Option("userChrome.combined.urlbar.home_button") { #nav-bar-customization-target > #home-button { -moz-box-ordinal-group: 3; } - @import "home_button"; } +@include Option("userChrome.combined.urlbar.reload_button") { + #nav-bar-customization-target > #stop-reload-button { + -moz-box-ordinal-group: 6; + } + + @import "reload_button"; +} From fdbca947d72697ec09562fff2ea502a31c06c21e Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 5 Oct 2022 16:50:01 +0900 Subject: [PATCH 13/88] Clean: URL Bar -> Combined --- css/leptonChrome.css | 254 +++++++++--------- .../_back_forward_button.scss | 0 src/{urlbar => combined}/_home_button.scss | 0 src/{urlbar => combined}/_index.scss | 7 +- src/{urlbar => combined}/_reload_button.scss | 0 src/leptonChrome.scss | 6 +- .../_always_show_page_actions.scss | 0 src/urlview/_index.scss | 5 + user.js | 12 +- 9 files changed, 137 insertions(+), 147 deletions(-) rename src/{urlbar => combined}/_back_forward_button.scss (100%) rename src/{urlbar => combined}/_home_button.scss (100%) rename src/{urlbar => combined}/_index.scss (93%) rename src/{urlbar => combined}/_reload_button.scss (100%) rename src/{urlbar => urlview}/_always_show_page_actions.scss (100%) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index aea14dc..0fe5939 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -7410,15 +7410,133 @@ display: none !important; } } -/** urlbar ********************************************************************/ -/*= Url Bar - Always show page actions =======================================*/ +/** Url View UI ***************************************************************/ +/*= Url View - Always show page actions ======================================*/ @supports -moz-bool-pref("userChrome.urlbar.always_show_page_actions") { #urlbar:not([breakout-extend="true"]) #pageActionButton { display: block !important; visibility: visible !important; } } -/*= Url Bar - Combined buttons ===============================================*/ +/*= Url View - Move icon to left =============================================*/ +@supports -moz-bool-pref("userChrome.urlView.move_icon_to_left") { + .urlbarView-type-icon { + min-width: 16px !important; + height: 16px !important; + margin-block: 0 !important; + margin-inline-start: 0 !important; + } + + .urlbarView-favicon { + margin-inline-start: 20px !important; + } +} +/*= Url View - Go button when typing =========================================*/ +@supports -moz-bool-pref("userChrome.urlView.go_button_when_typing") { + #urlbar-input-container[pageproxystate="invalid"] #urlbar-go-button { + display: block !important; + } +} +/** Panel UI ******************************************************************/ +@supports -moz-bool-pref("userChrome.panel.remove_strip") { + #appMenu-fxa-separator { + --panel-separator-zap-gradient: none; + /* Original: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%) */ + } +} +@supports -moz-bool-pref("userChrome.panel.full_width_separator") { + /* Full width separators */ + :root { + /* Original + --panel-separator-margin-vertical: 4px; + --panel-separator-margin-horizontal: 8px; + --panel-separator-margin: var(--panel-separator-margin-vertical) var(--panel-separator-margin-horizontal); + */ + --panel-separator-margin-horizontal: 0 !important; + } +} +@supports -moz-bool-pref("userChrome.panel.full_width_padding") { + /* Original + --arrowpanel-menuitem-margin: 0 8px; + --arrowpanel-menuitem-padding-block: 8px; + --arrowpanel-menuitem-padding-inline: 8px; + --arrowpanel-menuitem-padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline); + */ + :root, + :root:is([uidensity="compact"], [uidensity="touch"]) { + --arrowpanel-menuitem-margin: 0 !important; + --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-activate-width-reverse: calc(-1 * var(--uc-sidebar-activate-width)); + --uc-sidebar-fullscreen-width: 4px; + --uc-sidebar-shadow-color: #28282f; + --uc-autohide-sidebar-speed: 750ms; + --uc-autohide-fullscreen-sidebar-speed: 1s; + --uc-autohide-sidebar-delay: 600ms; + /* Wait 0.6s before hiding sidebar */ + z-index: 1 !important; + 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 { + display: block; + } + + #sidebar-splitter { + display: none !important; + } +} +@supports -moz-bool-pref("userChrome.sidebar.overlap") { + #sidebar-box[positionend="true"] { + direction: rtl; + } + + #sidebar-header, + #sidebar { + 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 { + 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: padding-inline; + } + #sidebar-box:not([hidden="true"]) { + padding-inline-start: var(--uc-sidebar-activate-width); + } + @media (prefers-reduced-motion: no-preference) { + #sidebar-box { + transition: padding-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, + visibility 0s linear !important; + } + } + } +} +/** Combined UI ***************************************************************/ +/*= Combined - At URL bar ====================================================*/ @supports -moz-bool-pref("userChrome.combined.nav_button") or -moz-bool-pref( "userChrome.combined.nav_button.home_button" ) or -moz-bool-pref("userChrome.combined.urlbar.nav_button") or -moz-bool-pref( @@ -7742,136 +7860,6 @@ padding: var(--urlbar-icon-padding) !important; } } -#nav-bar-customization-target > #back-button { - -moz-box-ordinal-group: 2; -} - -#nav-bar-customization-target > #forward-button { - -moz-box-ordinal-group: 4; -} - -#nav-bar-customization-target > #home-button { - -moz-box-ordinal-group: 3; -} - -/** Url View UI ***************************************************************/ -/*= Url View - Move icon to left =============================================*/ -@supports -moz-bool-pref("userChrome.urlView.move_icon_to_left") { - .urlbarView-type-icon { - min-width: 16px !important; - height: 16px !important; - margin-block: 0 !important; - margin-inline-start: 0 !important; - } - - .urlbarView-favicon { - margin-inline-start: 20px !important; - } -} -/*= Url View - Go button when typing =========================================*/ -@supports -moz-bool-pref("userChrome.urlView.go_button_when_typing") { - #urlbar-input-container[pageproxystate="invalid"] #urlbar-go-button { - display: block !important; - } -} -/** Panel UI ******************************************************************/ -@supports -moz-bool-pref("userChrome.panel.remove_strip") { - #appMenu-fxa-separator { - --panel-separator-zap-gradient: none; - /* Original: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%) */ - } -} -@supports -moz-bool-pref("userChrome.panel.full_width_separator") { - /* Full width separators */ - :root { - /* Original - --panel-separator-margin-vertical: 4px; - --panel-separator-margin-horizontal: 8px; - --panel-separator-margin: var(--panel-separator-margin-vertical) var(--panel-separator-margin-horizontal); - */ - --panel-separator-margin-horizontal: 0 !important; - } -} -@supports -moz-bool-pref("userChrome.panel.full_width_padding") { - /* Original - --arrowpanel-menuitem-margin: 0 8px; - --arrowpanel-menuitem-padding-block: 8px; - --arrowpanel-menuitem-padding-inline: 8px; - --arrowpanel-menuitem-padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline); - */ - :root, - :root:is([uidensity="compact"], [uidensity="touch"]) { - --arrowpanel-menuitem-margin: 0 !important; - --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-activate-width-reverse: calc(-1 * var(--uc-sidebar-activate-width)); - --uc-sidebar-fullscreen-width: 4px; - --uc-sidebar-shadow-color: #28282f; - --uc-autohide-sidebar-speed: 750ms; - --uc-autohide-fullscreen-sidebar-speed: 1s; - --uc-autohide-sidebar-delay: 600ms; - /* Wait 0.6s before hiding sidebar */ - z-index: 1 !important; - 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 { - display: block; - } - - #sidebar-splitter { - display: none !important; - } -} -@supports -moz-bool-pref("userChrome.sidebar.overlap") { - #sidebar-box[positionend="true"] { - direction: rtl; - } - - #sidebar-header, - #sidebar { - 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 { - 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: padding-inline; - } - #sidebar-box:not([hidden="true"]) { - padding-inline-start: var(--uc-sidebar-activate-width); - } - @media (prefers-reduced-motion: no-preference) { - #sidebar-box { - transition: padding-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, - visibility 0s linear !important; - } - } - } -} /** Others UI **************************************************************/ /*= Counter for Tab ==========================================================*/ @supports -moz-bool-pref("userChrome.counter.tab") { diff --git a/src/urlbar/_back_forward_button.scss b/src/combined/_back_forward_button.scss similarity index 100% rename from src/urlbar/_back_forward_button.scss rename to src/combined/_back_forward_button.scss diff --git a/src/urlbar/_home_button.scss b/src/combined/_home_button.scss similarity index 100% rename from src/urlbar/_home_button.scss rename to src/combined/_home_button.scss diff --git a/src/urlbar/_index.scss b/src/combined/_index.scss similarity index 93% rename from src/urlbar/_index.scss rename to src/combined/_index.scss index f9e8775..f88f4bd 100644 --- a/src/urlbar/_index.scss +++ b/src/combined/_index.scss @@ -1,9 +1,4 @@ -/*= Url Bar - Always show page actions =======================================*/ -@include Option("userChrome.urlbar.always_show_page_actions") { - @import "always_show_page_actions"; -} - -/*= Url Bar - Combined buttons ===============================================*/ +/*= Combined - At URL bar ====================================================*/ @include Option( "userChrome.combined.nav_button", "userChrome.combined.nav_button.home_button", "userChrome.combined.urlbar.nav_button", "userChrome.combined.urlbar.home_button", "userChrome.combined.urlbar.reload_button" diff --git a/src/urlbar/_reload_button.scss b/src/combined/_reload_button.scss similarity index 100% rename from src/urlbar/_reload_button.scss rename to src/combined/_reload_button.scss diff --git a/src/leptonChrome.scss b/src/leptonChrome.scss index e3b63ef..636117c 100644 --- a/src/leptonChrome.scss +++ b/src/leptonChrome.scss @@ -39,9 +39,6 @@ /** Tab UI ****************************************************************/ @import "tab/index"; -/** urlbar ********************************************************************/ -@import "urlbar/index"; - /** Url View UI ***************************************************************/ @import "urlview/index"; @@ -51,6 +48,9 @@ /** Sidebar UI ****************************************************************/ @import "sidebar/index"; +/** Combined UI ***************************************************************/ +@import "combined/index"; + /** Others UI **************************************************************/ @import "counter/index"; diff --git a/src/urlbar/_always_show_page_actions.scss b/src/urlview/_always_show_page_actions.scss similarity index 100% rename from src/urlbar/_always_show_page_actions.scss rename to src/urlview/_always_show_page_actions.scss diff --git a/src/urlview/_index.scss b/src/urlview/_index.scss index 2a2fd78..229704b 100644 --- a/src/urlview/_index.scss +++ b/src/urlview/_index.scss @@ -1,3 +1,8 @@ +/*= Url View - Always show page actions ======================================*/ +@include Option("userChrome.urlbar.always_show_page_actions") { + @import "always_show_page_actions"; +} + /*= Url View - Move icon to left =============================================*/ @include Option("userChrome.urlView.move_icon_to_left") { @import "move_icon_to_left"; diff --git a/user.js b/user.js index a5f6693..a7380a7 100644 --- a/user.js +++ b/user.js @@ -110,6 +110,12 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.counter.tab", true); // user_pref("userChrome.counter.bookmark_menu", true); +// user_pref("userChrome.combined.nav_button", true); +// user_pref("userChrome.combined.nav_button.home_button", true); +// user_pref("userChrome.combined.urlbar.nav_button", true); +// user_pref("userChrome.combined.urlbar.home_button", true); +// user_pref("userChrome.combined.urlbar.reload_button", true); + // user_pref("userChrome.rounding.square_button", true); // user_pref("userChrome.rounding.square_panel", true); // user_pref("userChrome.rounding.square_panelitem", true); @@ -129,11 +135,7 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.padding.urlView_result", true); // user_pref("userChrome.padding.panel_header", true); -// user_pref("userChrome.urlbar.always_show_page_actions", true); -// user_pref("userChrome.urlbar.combined_with_reload", true); -// user_pref("userChrome.urlbar.combined_with_back_forward", true); -// user_pref("userChrome.urlbar.combined_with_home", true); - +// user_pref("userChrome.urlView.always_show_page_actions", true); // user_pref("userChrome.urlView.move_icon_to_left", true); // user_pref("userChrome.urlView.go_button_when_typing", true); From cfa94d4955f07ad371ea7bb9135d5bdbca600de7 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 6 Oct 2022 02:50:40 +0900 Subject: [PATCH 14/88] Add: Tab Bar - Multi row #315 --- css/leptonChrome.css | 119 +++++++++++++++--- src/padding/_tabbar_height.scss | 18 +-- src/padding/_tabbar_width.scss | 6 +- src/tab/_connect_to_window.scss | 6 +- .../unselected_tab/_dynamic_separator.scss | 6 +- src/tabbar/_index.scss | 7 +- src/tabbar/_multi_row.scss | 76 +++++++++++ user.js | 1 + 8 files changed, 205 insertions(+), 34 deletions(-) create mode 100644 src/tabbar/_multi_row.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 0fe5939..5bb798c 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -3460,8 +3460,10 @@ padding-inline: 1px !important; } } - .tabbrowser-tab:not([last-visible-tab]) { - margin-inline-end: -1px !important; + @supports not -moz-bool-pref("userChrome.tabbar.multi_row") { + .tabbrowser-tab:not([last-visible-tab]) { + margin-inline-end: -1px !important; + } } } @supports -moz-bool-pref("userChrome.tab.photon_like_padding") { @@ -3591,16 +3593,18 @@ /* Prevent overflow pinned tab bottom margin */ } - :root:not([uidensity="compact"]) #tabbrowser-arrowscrollbox, - #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"], - #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-stack, - #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-content { - max-height: var(--tab-min-height) !important; - /* Force apply height */ - } + @supports not -moz-bool-pref("userChrome.tabbar.multi_row") { + :root:not([uidensity="compact"]) #tabbrowser-arrowscrollbox, + #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"], + #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-stack, + #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-content { + max-height: var(--tab-min-height) !important; + /* Force apply height */ + } - :root[uidensity="compact"] #tabbrowser-arrowscrollbox { - height: var(--tab-min-height) !important; + :root[uidensity="compact"] #tabbrowser-arrowscrollbox { + height: var(--tab-min-height) !important; + } } } /* Scroll Button - Size Fix */ @@ -6135,7 +6139,82 @@ } } } -/*= Tab Bar - Show only current tab ==========================================*/ +/*= Tab Bar - Multi Row ======================================================*/ +@supports -moz-bool-pref("userChrome.tabbar.multi_row") { + /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_tabs.css made available under Mozilla Public License v. 2.0 + See the above repository for updates as well as full license text. */ + :root { + --uc-multirow-tabbar-rows: 3; + --uc-multirow-tab-dynamic-width: 1; + /* Change to 0 for fixed-width tabs using the above width. */ + } + + #tabbrowser-tabs { + min-height: unset !important; + padding-inline-start: 0px !important; + } + + @-moz-document url(chrome://browser/content/browser.xhtml) + { + #scrollbutton-up ~ spacer, + #scrollbutton-up, + #scrollbutton-down { + display: var(--scrollbutton-display-model, initial); + } + + scrollbox[part][orient="horizontal"] { + display: flex; + flex-wrap: wrap; + overflow-y: scroll; + max-height: calc((var(--tab-min-height) + 2 * var(--tab-block-margin, 0px)) * var(--uc-multirow-tabbar-rows)); + scroll-snap-type: y mandatory; + } + } + .scrollbox-clip[orient="horizontal"], + #tabbrowser-arrowscrollbox { + overflow: -moz-hidden-unscrollable; + display: block; + --scrollbutton-display-model: none; + } + + .tabbrowser-tab { + scroll-snap-align: start; + } + + #tabbrowser-tabs .tabbrowser-tab[pinned] { + position: static !important; + margin-inline-start: 0px !important; + } + + .tabbrowser-tab[fadein]:not([pinned]) { + flex-grow: var(--uc-multirow-tab-dynamic-width); + } + + .tabbrowser-tab > stack { + width: 100%; + height: 100%; + } + + /* remove bottom margin so it doesn't throw off row height computation */ + #tabs-newtab-button { + margin-bottom: 0 !important; + } + + #tabbrowser-tabs[hasadjacentnewtabbutton][overflow="true"] + > #tabbrowser-arrowscrollbox + > #tabbrowser-arrowscrollbox-periphery + > #tabs-newtab-button { + display: -moz-box !important; + } + + #alltabs-button, + :root:not([customizing]) #TabsToolbar #new-tab-button, + #tabbrowser-arrowscrollbox > spacer, + .tabbrowser-tab::after { + display: none !important; + } +} +/*= Tab Bar - Fill width tab =================================================*/ @supports -moz-bool-pref("userChrome.tabbar.fill_width") { /* Why 100vw? Tab closing requires width animation to end and "none" can't be animated */ .tabbrowser-tab[fadein]:not([style^="max-width"]) { @@ -6165,11 +6244,12 @@ z-index: 1 !important; } - #TabsToolbar { - overflow: hidden; - /* Prevent toolbar area over */ + @supports not -moz-bool-pref("userChrome.tabbar.multi_row") { + #TabsToolbar { + overflow: hidden; + /* Prevent toolbar area over */ + } } - /* Pinned Tab - tabbrowser-arrowscrollbox overflowing */ #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { z-index: 0 !important; @@ -6496,10 +6576,11 @@ } @supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { - #tabbrowser-arrowscrollbox { - position: absolute; + @supports not -moz-bool-pref("userChrome.tabbar.multi_row") { + #tabbrowser-arrowscrollbox { + position: absolute; + } } - .tab-background::before, #tabs-newtab-button::before { /* Box Model */ diff --git a/src/padding/_tabbar_height.scss b/src/padding/_tabbar_height.scss index 02456f7..f6d72af 100644 --- a/src/padding/_tabbar_height.scss +++ b/src/padding/_tabbar_height.scss @@ -48,14 +48,16 @@ --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 18px) / 2) !important; /* Prevent overflow pinned tab bottom margin */ } - :root:not([uidensity="compact"]) #tabbrowser-arrowscrollbox, - #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"], - #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-stack, - #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-content { - max-height: var(--tab-min-height) !important; /* Force apply height */ - } - :root[uidensity="compact"] #tabbrowser-arrowscrollbox { - height: var(--tab-min-height) !important; + @include NotOption("userChrome.tabbar.multi_row") { + :root:not([uidensity="compact"]) #tabbrowser-arrowscrollbox, + #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"], + #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-stack, + #tabbrowser-arrowscrollbox[overflowing="true"] > .tabbrowser-tab[pinned="true"] .tab-content { + max-height: var(--tab-min-height) !important; /* Force apply height */ + } + :root[uidensity="compact"] #tabbrowser-arrowscrollbox { + height: var(--tab-min-height) !important; + } } } diff --git a/src/padding/_tabbar_width.scss b/src/padding/_tabbar_width.scss index 6797e88..49d79aa 100644 --- a/src/padding/_tabbar_width.scss +++ b/src/padding/_tabbar_width.scss @@ -95,8 +95,10 @@ padding-inline: 1px !important; } } - .tabbrowser-tab:not([last-visible-tab]) { - margin-inline-end: -1px !important; + @include NotOption("userChrome.tabbar.multi_row") { + .tabbrowser-tab:not([last-visible-tab]) { + margin-inline-end: -1px !important; + } } } @include Option("userChrome.tab.photon_like_padding") { diff --git a/src/tab/_connect_to_window.scss b/src/tab/_connect_to_window.scss index e163495..efccfb8 100644 --- a/src/tab/_connect_to_window.scss +++ b/src/tab/_connect_to_window.scss @@ -16,8 +16,10 @@ #tabbrowser-tabs { z-index: 1 !important; } -#TabsToolbar { - overflow: hidden; /* Prevent toolbar area over */ +@include NotOption("userChrome.tabbar.multi_row") { + #TabsToolbar { + overflow: hidden; /* Prevent toolbar area over */ + } } /* Pinned Tab - tabbrowser-arrowscrollbox overflowing */ diff --git a/src/tab/unselected_tab/_dynamic_separator.scss b/src/tab/unselected_tab/_dynamic_separator.scss index f1a8ed7..464c7f0 100644 --- a/src/tab/unselected_tab/_dynamic_separator.scss +++ b/src/tab/unselected_tab/_dynamic_separator.scss @@ -36,8 +36,10 @@ } @include Option("userChrome.tab.newtab_button_like_tab") { - #tabbrowser-arrowscrollbox { - position: absolute; + @include NotOption("userChrome.tabbar.multi_row") { + #tabbrowser-arrowscrollbox { + position: absolute; + } } .tab-background::before, diff --git a/src/tabbar/_index.scss b/src/tabbar/_index.scss index 748a60f..35a5f01 100644 --- a/src/tabbar/_index.scss +++ b/src/tabbar/_index.scss @@ -43,7 +43,12 @@ @import "as_titlebar"; } -/*= Tab Bar - Show only current tab ==========================================*/ +/*= Tab Bar - Multi Row ======================================================*/ +@include Option("userChrome.tabbar.multi_row") { + @import "multi_row"; +} + +/*= Tab Bar - Fill width tab =================================================*/ @include Option("userChrome.tabbar.fill_width") { @import "fill_width"; } diff --git a/src/tabbar/_multi_row.scss b/src/tabbar/_multi_row.scss new file mode 100644 index 0000000..f56039c --- /dev/null +++ b/src/tabbar/_multi_row.scss @@ -0,0 +1,76 @@ +/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_tabs.css made available under Mozilla Public License v. 2.0 +See the above repository for updates as well as full license text. */ + +:root { + --uc-multirow-tabbar-rows: 3; + --uc-multirow-tab-dynamic-width: 1; /* Change to 0 for fixed-width tabs using the above width. */ +} + +// Scrollbar can't be clicked but the rows can be scrolled with mouse wheel +// Uncomment the next line if you want to be able to use the scrollbar with mouse clicks +// #tabbrowser-arrowscrollbox{ -moz-window-dragging: no-drag } + +// Uncommenting the above makes you unable to drag the window from empty space in the tab strip but normal draggable spaces will continue to work + +#tabbrowser-tabs { + min-height: unset !important; + padding-inline-start: 0px !important; +} + +@-moz-document url(chrome://browser/content/browser.xhtml) { + #scrollbutton-up ~ spacer, + #scrollbutton-up, + #scrollbutton-down { + display: var(--scrollbutton-display-model, initial); + } + + scrollbox[part][orient="horizontal"] { + display: flex; + flex-wrap: wrap; + overflow-y: scroll; + max-height: calc((var(--tab-min-height) + 2 * var(--tab-block-margin, 0px)) * var(--uc-multirow-tabbar-rows)); + // scrollbar-color: currentColor transparent; + // scrollbar-width: thin; + scroll-snap-type: y mandatory; + } +} + +.scrollbox-clip[orient="horizontal"], +#tabbrowser-arrowscrollbox { + overflow: -moz-hidden-unscrollable; + display: block; + --scrollbutton-display-model: none; +} + +.tabbrowser-tab { + scroll-snap-align: start; +} + +#tabbrowser-tabs .tabbrowser-tab[pinned] { + position: static !important; + margin-inline-start: 0px !important; +} + +.tabbrowser-tab[fadein]:not([pinned]) { + flex-grow: var(--uc-multirow-tab-dynamic-width); +} + +.tabbrowser-tab > stack { + width: 100%; + height: 100%; +} + +/* remove bottom margin so it doesn't throw off row height computation */ +#tabs-newtab-button { + margin-bottom: 0 !important; +} +#tabbrowser-tabs[hasadjacentnewtabbutton][overflow="true"] > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button { + display: -moz-box !important; +} + +#alltabs-button, +:root:not([customizing]) #TabsToolbar #new-tab-button, +#tabbrowser-arrowscrollbox > spacer, +.tabbrowser-tab::after { + display: none !important; +} diff --git a/user.js b/user.js index a7380a7..58b2852 100644 --- a/user.js +++ b/user.js @@ -141,6 +141,7 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.tabbar.as_titlebar", true); // user_pref("userChrome.tabbar.fill_width", true); +// user_pref("userChrome.tabbar.multi_row", 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 From d1114905489edba04e9af679f24c1240caca7e71 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 7 Oct 2022 09:10:15 +0900 Subject: [PATCH 15/88] Fix: Tab Bar - New button compatibility for Multirow #315 --- css/leptonChrome.css | 8 ++++---- src/tab/newtab_button/_looks_like_tab.scss | 2 +- src/tab/unselected_tab/_dynamic_separator.scss | 2 +- src/tabbar/_multi_row.scss | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 5bb798c..d6ccb31 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6165,7 +6165,7 @@ scrollbox[part][orient="horizontal"] { display: flex; flex-wrap: wrap; - overflow-y: scroll; + overflow-y: auto; max-height: calc((var(--tab-min-height) + 2 * var(--tab-block-margin, 0px)) * var(--uc-multirow-tabbar-rows)); scroll-snap-type: y mandatory; } @@ -6588,7 +6588,7 @@ display: block; position: absolute; /* Position */ - top: 50%; + bottom: 0%; /* Bar shape */ width: 1px; height: 20px; @@ -6615,7 +6615,7 @@ display: block; position: absolute; /* Position */ - top: 50%; + bottom: 0%; /* Bar shape */ width: 1px; height: 20px; @@ -6801,7 +6801,7 @@ */ --tabs-navbar-shadow-size: -1px; /* Original: 1px */ - --tabs-navbar-original-shadow-size: 1px; + --tabs-navbar-original-shadow-size: 0.5px; --tab-corner-rounding: 4px; /* Hardcorded */ /* Size */ diff --git a/src/tab/newtab_button/_looks_like_tab.scss b/src/tab/newtab_button/_looks_like_tab.scss index bdda2a6..ed9fdf2 100644 --- a/src/tab/newtab_button/_looks_like_tab.scss +++ b/src/tab/newtab_button/_looks_like_tab.scss @@ -4,7 +4,7 @@ => Can't ovrride style. Therefore, we should approach it by bypass. */ --tabs-navbar-shadow-size: -1px; /* Original: 1px */ - --tabs-navbar-original-shadow-size: 1px; + --tabs-navbar-original-shadow-size: 0.5px; --tab-corner-rounding: 4px; /* Hardcorded */ /* Size */ diff --git a/src/tab/unselected_tab/_dynamic_separator.scss b/src/tab/unselected_tab/_dynamic_separator.scss index 464c7f0..1107f59 100644 --- a/src/tab/unselected_tab/_dynamic_separator.scss +++ b/src/tab/unselected_tab/_dynamic_separator.scss @@ -6,7 +6,7 @@ position: absolute; /* Position */ - top: 50%; + bottom: 0%; /* Bar shape */ width: 1px; diff --git a/src/tabbar/_multi_row.scss b/src/tabbar/_multi_row.scss index f56039c..fa3f498 100644 --- a/src/tabbar/_multi_row.scss +++ b/src/tabbar/_multi_row.scss @@ -27,7 +27,7 @@ See the above repository for updates as well as full license text. */ scrollbox[part][orient="horizontal"] { display: flex; flex-wrap: wrap; - overflow-y: scroll; + overflow-y: auto; max-height: calc((var(--tab-min-height) + 2 * var(--tab-block-margin, 0px)) * var(--uc-multirow-tabbar-rows)); // scrollbar-color: currentColor transparent; // scrollbar-width: thin; From 1a4eed6bd97712392478d9b6ff17fb54b74712f4 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 8 Oct 2022 21:56:36 +0900 Subject: [PATCH 16/88] Add: Bookmark Bar - Multirow #315 --- css/leptonChrome.css | 40 ++++++++++++++++++++++++++++++++++++++-- src/leptonChrome.scss | 7 +++++-- user.js | 2 ++ 3 files changed, 45 insertions(+), 4 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index d6ccb31..1f0e2f2 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6222,7 +6222,7 @@ max-width: var(--tab-max-width) !important; } } -/** Tab UI ****************************************************************/ +/** Tab UI ********************************************************************/ /*= Tab - Connect to window ==============================================*/ @supports -moz-bool-pref("userChrome.tab.connect_to_window") { .tab-background { @@ -7491,6 +7491,42 @@ display: none !important; } } +/** Bookark Bar UI ************************************************************/ +@supports -moz-bool-pref("userChrome.bookmarkbar.multi_row") { + #PersonalToolbar { + --uc-multirow-bookmark-rows: 3; + --uc-multirow-bookmark-row-margin: 2px; + max-height: none !important; + } + + #PlacesToolbar > hbox { + display: block; + width: 100vw; + } + + #PlacesToolbarItems { + display: flex; + flex-wrap: wrap; + overflow-y: auto; + scroll-snap-type: y mandatory; + max-height: calc( + var(--uc-multirow-bookmark-rows) * + ( + var(--uc-bm-height, calc(20px + 2 * var(--bookmark-block-padding, 4px))) + 2 * + var(--uc-multirow-bookmark-row-margin) + ) + ) !important; + } + + #PlacesChevron { + display: none; + } + + #PlacesToolbarItems > .bookmark-item { + scroll-snap-align: start; + margin-block: var(--uc-multirow-bookmark-row-margin) !important; + } +} /** Url View UI ***************************************************************/ /*= Url View - Always show page actions ======================================*/ @supports -moz-bool-pref("userChrome.urlbar.always_show_page_actions") { @@ -7941,7 +7977,7 @@ padding: var(--urlbar-icon-padding) !important; } } -/** Others UI **************************************************************/ +/** Others UI *****************************************************************/ /*= Counter for Tab ==========================================================*/ @supports -moz-bool-pref("userChrome.counter.tab") { #tabbrowser-tabs { diff --git a/src/leptonChrome.scss b/src/leptonChrome.scss index 636117c..60eb3cc 100644 --- a/src/leptonChrome.scss +++ b/src/leptonChrome.scss @@ -36,9 +36,12 @@ /** Tab Bar UI ****************************************************************/ @import "tabbar/index"; -/** Tab UI ****************************************************************/ +/** Tab UI ********************************************************************/ @import "tab/index"; +/** Bookark Bar UI ************************************************************/ +@import "bookmarkbar/index"; + /** Url View UI ***************************************************************/ @import "urlview/index"; @@ -51,7 +54,7 @@ /** Combined UI ***************************************************************/ @import "combined/index"; -/** Others UI **************************************************************/ +/** Others UI *****************************************************************/ @import "counter/index"; /** Fullscreen - Overlap toolbar **********************************************/ diff --git a/user.js b/user.js index 58b2852..a22bbed 100644 --- a/user.js +++ b/user.js @@ -158,6 +158,8 @@ user_pref("userChrome.rounding.square_tab", false); // 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.bookmarkbar.multi_row", 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 fc892fa2db5fab56e881ee62534cd264378cf7e5 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 8 Oct 2022 23:51:56 +0900 Subject: [PATCH 17/88] Add: Combined - None forward background option #399 --- css/leptonChrome.css | 60 +++++++++++++------------- src/combined/_back_forward_button.scss | 12 +++--- user.js | 1 + 3 files changed, 39 insertions(+), 34 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 1f0e2f2..bf370fb 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -7735,8 +7735,37 @@ } } @supports not -moz-bool-pref("userChrome.combined.urlbar.nav_button") { - @supports -moz-bool-pref("userChrome.combined.urlbar.home_button") { - @supports not -moz-bool-pref("userChrome.combined.nav_button.home_button") { + @supports not -moz-bool-pref("userChrome.combined.nav_button.none_forward_background") { + @supports -moz-bool-pref("userChrome.combined.urlbar.home_button") { + @supports not -moz-bool-pref("userChrome.combined.nav_button.home_button") { + #nav-bar-customization-target > #forward-button > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-background); + } + #nav-bar-customization-target > #forward-button:not([disabled], [open]):hover > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-hover-background) !important; + box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); + border-color: rgba(12, 12, 13, 0.35); + } + #nav-bar-customization-target > #forward-button[open] > .toolbarbutton-icon, + #nav-bar-customization-target > #forward-button:not([disabled]):hover:active > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-active-background) !important; + border-color: rgba(12, 12, 13, 0.4); + } + #nav-bar-customization-target > #forward-button[disabled="true"] { + opacity: 1 !important; + /* Original: 0.4 */ + } + #nav-bar-customization-target > #forward-button[disabled="true"] > .toolbarbutton-icon { + background-color: color-mix( + in srgb, + var(--toolbarbutton-hover-background), + var(--toolbar-field-background-color) 40% + ) !important; + fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); + } + } + } + @supports not -moz-bool-pref("userChrome.combined.urlbar.home_button") { #nav-bar-customization-target > #forward-button > .toolbarbutton-icon { background-color: var(--uc-combined-circlebutton-background); } @@ -7764,33 +7793,6 @@ } } } - @supports not -moz-bool-pref("userChrome.combined.urlbar.home_button") { - #nav-bar-customization-target > #forward-button > .toolbarbutton-icon { - background-color: var(--uc-combined-circlebutton-background); - } - #nav-bar-customization-target > #forward-button:not([disabled], [open]):hover > .toolbarbutton-icon { - background-color: var(--uc-combined-circlebutton-hover-background) !important; - box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); - border-color: rgba(12, 12, 13, 0.35); - } - #nav-bar-customization-target > #forward-button[open] > .toolbarbutton-icon, - #nav-bar-customization-target > #forward-button:not([disabled]):hover:active > .toolbarbutton-icon { - background-color: var(--uc-combined-circlebutton-active-background) !important; - border-color: rgba(12, 12, 13, 0.4); - } - #nav-bar-customization-target > #forward-button[disabled="true"] { - opacity: 1 !important; - /* Original: 0.4 */ - } - #nav-bar-customization-target > #forward-button[disabled="true"] > .toolbarbutton-icon { - background-color: color-mix( - in srgb, - var(--toolbarbutton-hover-background), - var(--toolbar-field-background-color) 40% - ) !important; - fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); - } - } } #nav-bar-customization-target > #back-button { position: relative; diff --git a/src/combined/_back_forward_button.scss b/src/combined/_back_forward_button.scss index 4eb81af..a9b1f95 100644 --- a/src/combined/_back_forward_button.scss +++ b/src/combined/_back_forward_button.scss @@ -66,14 +66,16 @@ padding-inline-end: 0px !important; /* Original: var(--toolbarbutton-outer-padding) */ } @include NotOption("userChrome.combined.urlbar.nav_button") { - @include Option("userChrome.combined.urlbar.home_button") { - @include NotOption("userChrome.combined.nav_button.home_button") { + @include NotOption("userChrome.combined.nav_button.none_forward_background") { + @include Option("userChrome.combined.urlbar.home_button") { + @include NotOption("userChrome.combined.nav_button.home_button") { + @include _combined_nav_button_background; + } + } + @include NotOption("userChrome.combined.urlbar.home_button") { @include _combined_nav_button_background; } } - @include NotOption("userChrome.combined.urlbar.home_button") { - @include _combined_nav_button_background; - } } } diff --git a/user.js b/user.js index a22bbed..6ef124d 100644 --- a/user.js +++ b/user.js @@ -112,6 +112,7 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.combined.nav_button", true); // user_pref("userChrome.combined.nav_button.home_button", true); +// user_pref("userChrome.combined.nav_button.none_forward_background", true); // user_pref("userChrome.combined.urlbar.nav_button", true); // user_pref("userChrome.combined.urlbar.home_button", true); // user_pref("userChrome.combined.urlbar.reload_button", true); From 237a9eb4f5a3b16ebfbab69e939d51663864fde1 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 9 Oct 2022 18:07:54 +0900 Subject: [PATCH 18/88] Add: Decoration - Panel UI Button Separator #399 --- css/leptonChrome.css | 18 +++++++++++++++++- src/compatibility/_theme.scss | 3 ++- src/decoration/_index.scss | 5 +++++ src/decoration/_panel_button_separator.scss | 13 +++++++++++++ user.js | 1 + 5 files changed, 38 insertions(+), 2 deletions(-) create mode 100644 src/decoration/_panel_button_separator.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index bf370fb..8151e00 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -103,7 +103,8 @@ } } /*= Tab Separator Color ======================================================*/ - #TabsToolbar { + #TabsToolbar, + #nav-bar { --toolbarseparator-color: color-mix(in srgb, currentColor 20%, transparent); /* 60% at v105 */ } @@ -2919,6 +2920,21 @@ } */ } +/*= Panel UI Button Separator ================================================*/ +@supports -moz-bool-pref("userChrome.decoration.panel_button_separator") { + :root:not([chromehidden~="toolbar"]) #PanelUI-button { + margin-inline-start: 3px; + padding-inline-start: 2px; + border-inline-start: 1px solid; + border-image: linear-gradient( + transparent 4px, + var(--toolbarseparator-color) 4px, + var(--toolbarseparator-color) calc(100% - 4px), + transparent calc(100% - 4px) + ); + border-image-slice: 1; + } +} @media (prefers-reduced-motion: no-preference) { /*= Field Border ===========================================================*/ @supports -moz-bool-pref("userChrome.decoration.field_border") { diff --git a/src/compatibility/_theme.scss b/src/compatibility/_theme.scss index ff7e352..24eecba 100644 --- a/src/compatibility/_theme.scss +++ b/src/compatibility/_theme.scss @@ -83,7 +83,8 @@ menu { } /*= Tab Separator Color ======================================================*/ -#TabsToolbar { +#TabsToolbar, +#nav-bar { --toolbarseparator-color: color-mix(in srgb, currentColor 20%, transparent); /* 60% at v105 */ } diff --git a/src/decoration/_index.scss b/src/decoration/_index.scss index 711e9b2..e159b0a 100644 --- a/src/decoration/_index.scss +++ b/src/decoration/_index.scss @@ -3,6 +3,11 @@ @import "cursor"; } +/*= Panel UI Button Separator ================================================*/ +@include Option("userChrome.decoration.panel_button_separator") { + @import "panel_button_separator"; +} + @include Animate { /*= Field Border ===========================================================*/ @include Option("userChrome.decoration.field_border") { diff --git a/src/decoration/_panel_button_separator.scss b/src/decoration/_panel_button_separator.scss new file mode 100644 index 0000000..e236267 --- /dev/null +++ b/src/decoration/_panel_button_separator.scss @@ -0,0 +1,13 @@ +:root:not([chromehidden~="toolbar"]) #PanelUI-button { + // Original: not include at [uidensity=compact] + margin-inline-start: 3px; + padding-inline-start: 2px; + border-inline-start: 1px solid; + border-image: linear-gradient( + transparent 4px, + var(--toolbarseparator-color) 4px, + var(--toolbarseparator-color) calc(100% - 4px), + transparent calc(100% - 4px) + ); + border-image-slice: 1; +} diff --git a/user.js b/user.js index 6ef124d..4f16ffc 100644 --- a/user.js +++ b/user.js @@ -76,6 +76,7 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.decoration.disable_panel_animate", true); // user_pref("userChrome.decoration.disable_sidebar_animate", true); +// user_pref("userChrome.decoration.panel_button_separator", true); // user_pref("userChrome.autohide.tab", true); // user_pref("userChrome.autohide.tab.opacity", true); From 0103a3208af62f3922249cfecc4bdcf1f8be4638 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 11 Oct 2022 09:49:17 +0900 Subject: [PATCH 19/88] Add: Decoration - Panel arrow #399 --- css/leptonChrome.css | 14 ++++++++++++++ icons/panelarrow-vertical.svg | 7 +++++++ src/decoration/_index.scss | 5 +++++ src/decoration/_panel_arrow.scss | 12 ++++++++++++ user.js | 1 + 5 files changed, 39 insertions(+) create mode 100644 icons/panelarrow-vertical.svg create mode 100644 src/decoration/_panel_arrow.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 8151e00..fb0e05b 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -2935,6 +2935,20 @@ border-image-slice: 1; } } +/*= Panel UI Arrow ===========================================================*/ +@supports -moz-bool-pref("userChrome.decoration.panel_arrow") { + #appMenu-popup { + margin-top: -8px !important; + /* Original: -4px */ + padding-top: 4px; + background-image: url("../icons/panelarrow-vertical.svg"); + background-repeat: no-repeat; + background-position: top right 10px; + -moz-context-properties: fill, stroke; + fill: var(--panel-background); + stroke: var(--panel-border-color); + } +} @media (prefers-reduced-motion: no-preference) { /*= Field Border ===========================================================*/ @supports -moz-bool-pref("userChrome.decoration.field_border") { diff --git a/icons/panelarrow-vertical.svg b/icons/panelarrow-vertical.svg new file mode 100644 index 0000000..3e38a73 --- /dev/null +++ b/icons/panelarrow-vertical.svg @@ -0,0 +1,7 @@ + + + + + \ No newline at end of file diff --git a/src/decoration/_index.scss b/src/decoration/_index.scss index e159b0a..e7f33d5 100644 --- a/src/decoration/_index.scss +++ b/src/decoration/_index.scss @@ -8,6 +8,11 @@ @import "panel_button_separator"; } +/*= Panel UI Arrow ===========================================================*/ +@include Option("userChrome.decoration.panel_arrow") { + @import "panel_arrow"; +} + @include Animate { /*= Field Border ===========================================================*/ @include Option("userChrome.decoration.field_border") { diff --git a/src/decoration/_panel_arrow.scss b/src/decoration/_panel_arrow.scss new file mode 100644 index 0000000..93a5bbd --- /dev/null +++ b/src/decoration/_panel_arrow.scss @@ -0,0 +1,12 @@ +#appMenu-popup { + margin-top: -8px !important; /* Original: -4px */ + padding-top: 4px; + + background-image: url("../icons/panelarrow-vertical.svg"); + background-repeat: no-repeat; + background-position: top right 10px; + + -moz-context-properties: fill, stroke; + fill: var(--panel-background); + stroke: var(--panel-border-color); +} diff --git a/user.js b/user.js index 4f16ffc..8e383db 100644 --- a/user.js +++ b/user.js @@ -77,6 +77,7 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.decoration.disable_panel_animate", true); // user_pref("userChrome.decoration.disable_sidebar_animate", true); // user_pref("userChrome.decoration.panel_button_separator", true); +// user_pref("userChrome.decoration.panel_arrow", true); // user_pref("userChrome.autohide.tab", true); // user_pref("userChrome.autohide.tab.opacity", true); From cea08cb60641e88c96f24b5117350076edc10674 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 13 Oct 2022 04:25:08 +0900 Subject: [PATCH 20/88] Fix: Build fix --- src/bookmarkbar/_index.scss | 3 +++ src/bookmarkbar/_multi_row.scss | 34 +++++++++++++++++++++++++++++++++ 2 files changed, 37 insertions(+) create mode 100644 src/bookmarkbar/_index.scss create mode 100644 src/bookmarkbar/_multi_row.scss diff --git a/src/bookmarkbar/_index.scss b/src/bookmarkbar/_index.scss new file mode 100644 index 0000000..360dee0 --- /dev/null +++ b/src/bookmarkbar/_index.scss @@ -0,0 +1,3 @@ +@include Option("userChrome.bookmarkbar.multi_row") { + @import "_multi_row"; +} diff --git a/src/bookmarkbar/_multi_row.scss b/src/bookmarkbar/_multi_row.scss new file mode 100644 index 0000000..06dbd38 --- /dev/null +++ b/src/bookmarkbar/_multi_row.scss @@ -0,0 +1,34 @@ +// Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_bookmarks.css made available under Mozilla Public License v. 2.0 +// See the above repository for updates as well as full license text. + +#PersonalToolbar { + --uc-multirow-bookmark-rows: 3; + --uc-multirow-bookmark-row-margin: 2px; + max-height: none !important; +} + +#PlacesToolbar > hbox { + display: block; + width: 100vw; +} + +#PlacesToolbarItems { + display: flex; + flex-wrap: wrap; + overflow-y: auto; + scroll-snap-type: y mandatory; + max-height: calc(var(--uc-multirow-bookmark-rows) * + (var(--uc-bm-height, calc(20px + (2 * var(--bookmark-block-padding, 4px)))) + + (2 * var(--uc-multirow-bookmark-row-margin)))) !important; +} + +// Hide the all-bookmarks button +#PlacesChevron { + display: none; +} + +// Add some spacing between rows +#PlacesToolbarItems > .bookmark-item { + scroll-snap-align: start; + margin-block: var(--uc-multirow-bookmark-row-margin) !important; +} From a1a1b9e80741ca17a15ae35739845f467c8c04c4 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 13 Oct 2022 09:18:28 +0900 Subject: [PATCH 21/88] Add: Bottom Rounded Corner - For all tabs --- css/leptonChrome.css | 142 +++++++------ .../selected_tab/_bottom_rounded_corner.scss | 187 +++++++++++------- user.js | 1 + 3 files changed, 204 insertions(+), 126 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index fb0e05b..0955641 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6417,85 +6417,117 @@ --tab-corner-position: calc(var(--tab-corner-padding) - var(--tab-corner-rounding)); } - :root:not([customizing="true"]) tab[visuallyselected] > stack::before, - :root:not([customizing="true"]) tab[visuallyselected] > stack::after { - content: "" !important; + :root:not([customizing="true"]) .tabbrowser-tab > stack::before, + :root:not([customizing="true"]) .tabbrowser-tab > stack::after { /* Box */ - display: block !important; - position: absolute !important; - z-index: 1 !important; + display: block; + position: absolute; + z-index: 1; /* Shape */ - width: var(--tab-corner-rounding) !important; - height: 100% !important; + width: var(--tab-corner-rounding); + height: 100%; /* Color */ - fill: var(--toolbar-bgcolor) !important; - stroke: var(--tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9))) !important; - -moz-context-properties: fill, stroke !important; + fill: transparent; + stroke: transparent; + -moz-context-properties: fill, stroke; /* Image */ background-size: var(--tab-corner-rounding); background-repeat: no-repeat; background-position-y: bottom; } - - :root:not([customizing="true"]):is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) - #TabsToolbar[brighttext] - #tabbrowser-tabs:not([noshadowfortests]) - tab[visuallyselected] - > stack:-moz-lwtheme::before, - :root:not([customizing="true"]):is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) - #TabsToolbar[brighttext] - #tabbrowser-tabs:not([noshadowfortests]) - tab[visuallyselected] - > stack:-moz-lwtheme::after { - /* As Selected Tab - Box Shadow */ - stroke: var(--toolbar-color) !important; + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") { + :root:not([customizing="true"]) .tabbrowser-tab > stack::before, + :root:not([customizing="true"]) .tabbrowser-tab > stack::after { + content: ""; + } } + @supports not -moz-bool-pref("userChrome.tab.color_like_toolbar") { + :root:not([customizing="true"]) .tabbrowser-tab > stack::before, + :root:not([customizing="true"]) .tabbrowser-tab > stack::after { + /* Based on tab background + background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none); - tab[visuallyselected] > stack::before { + defaults + background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); + background-image: var(--tab-selected-bgimage, var(--toolbar-bgimage)); + */ + fill: var(--lwt-selected-tab-background-color, var(--tab-selected-bgcolor, var(--toolbar-bgcolor))) !important; + } + } + :root:not([customizing="true"]) .tabbrowser-tab > stack::before { left: var(--tab-corner-position) !important; background-image: url("../icons/tab-bottom-corner-left.svg"); } - - tab[visuallyselected] > stack::after { + :root:not([customizing="true"]) .tabbrowser-tab > stack::after { left: auto; right: var(--tab-corner-position); background-image: url("../icons/tab-bottom-corner-right.svg"); } - - @media (-moz-gtk-csd-available) { - /* Fill color for GTK */ - :root:not([customizing="true"]):not([lwtheme="true"]) tab[visuallyselected] > stack::before, - :root:not([customizing="true"]):not([lwtheme="true"]) tab[visuallyselected] > stack::after { - /* As GTK Toolbar's background-color + backround-image - * --toolbar-non-lwt-bgcolor: -moz-dialog; - * --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15)); - */ - fill: color-mix(in srgb, white 15%, -moz-dialog) !important; - stroke: transparent !important; + :root:not([customizing="true"]) .tabbrowser-tab[selected] > stack::before, + :root:not([customizing="true"]) .tabbrowser-tab[selected] > stack::after { + fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); + stroke: var(--tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9))); + } + @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") { + :root:not([customizing="true"]) .tabbrowser-tab[selected] > stack::before, + :root:not([customizing="true"]) .tabbrowser-tab[selected] > stack::after { + content: ""; + } + } + :root:not([customizing="true"]) .tabbrowser-tab[multiselected] > stack::before, + :root:not([customizing="true"]) .tabbrowser-tab[multiselected] > stack::after { + fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); + } + :root:not([customizing="true"]) .tabbrowser-tab:hover:not([selected], [multiselected]) > stack::before, + :root:not([customizing="true"]) .tabbrowser-tab:hover:not([selected], [multiselected]) > stack::after { + fill: color-mix(in srgb, currentColor 11%, transparent); + } + @supports -moz-bool-pref("userChrome.tab.multi_selected") { + :root:not([customizing="true"]) .tabbrowser-tab[multiselected] > stack::before, + :root:not([customizing="true"]) .tabbrowser-tab[multiselected] > stack::after { + fill: color-mix(in srgb, currentColor 65%, transparent); + opacity: 0.3; + } + :root:not([customizing="true"]) #TabsToolbar[brighttext] .tabbrowser-tab[multiselected] > stack::before, + :root:not([customizing="true"]) #TabsToolbar[brighttext] .tabbrowser-tab[multiselected] > stack::after { + opacity: 0.15; + } + } + :root:not([customizing="true"])::is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) + #TabsToolbar[brighttext] + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab[selected] + > stack:-moz-lwtheme::before, + :root:not([customizing="true"])::is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) + #TabsToolbar[brighttext] + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab[selected] + > stack:-moz-lwtheme::after { + /* As Selected Tab - Box Shadow */ + stroke: var(--toolbar-color); + } + @media (-moz-gtk-csd-available) { + :root:not([customizing="true"]) { + /* Fill color for GTK */ + } + :root:not([customizing="true"]):not([lwtheme="true"]) .tabbrowser-tab[selected] > stack::before, + :root:not([customizing="true"]):not([lwtheme="true"]) .tabbrowser-tab[selected] > stack::after { + /* As GTK Toolbar's background-color + backround-image + * --toolbar-non-lwt-bgcolor: -moz-dialog; + * --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15)); + */ + fill: color-mix(in srgb, white 15%, -moz-dialog); + stroke: transparent; } - :root:not([customizing="true"]):not([lwtheme="true"]) #TabsToolbar[brighttext] - tab[visuallyselected] + .tabbrowser-tab[selected] > stack::before, :root:not([customizing="true"]):not([lwtheme="true"]) #TabsToolbar[brighttext] - tab[visuallyselected] + .tabbrowser-tab[selected] > stack::after { - stroke: transparent !important; - } - } - @supports not -moz-bool-pref("userChrome.tab.color_like_toolbar") { - :root:not([customizing="true"]) tab[visuallyselected] > stack::before, - :root:not([customizing="true"]) tab[visuallyselected] > stack::after { - /* Based on tab background - background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none); - - defaults - background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); - background-image: var(--tab-selected-bgimage, var(--toolbar-bgimage)); - */ - fill: var(--lwt-selected-tab-background-color, var(--tab-selected-bgcolor, var(--toolbar-bgcolor))) !important; + stroke: transparent; } } } diff --git a/src/tab/selected_tab/_bottom_rounded_corner.scss b/src/tab/selected_tab/_bottom_rounded_corner.scss index ff0bec3..2c7c9a7 100644 --- a/src/tab/selected_tab/_bottom_rounded_corner.scss +++ b/src/tab/selected_tab/_bottom_rounded_corner.scss @@ -4,83 +4,128 @@ --tab-corner-position: calc(var(--tab-corner-padding) - var(--tab-corner-rounding)); } -:root:not([customizing="true"]) tab[visuallyselected] > stack::before, -:root:not([customizing="true"]) tab[visuallyselected] > stack::after { - content: "" !important; +:root:not([customizing="true"]) { + .tabbrowser-tab { + > stack { + &::before, + &::after { + /* Box */ + display: block; + position: absolute; + z-index: 1; - /* Box */ - display: block !important; - position: absolute !important; - z-index: 1 !important; + /* Shape */ + width: var(--tab-corner-rounding); + height: 100%; - /* Shape */ - width: var(--tab-corner-rounding) !important; - height: 100% !important; + /* Color */ + fill: transparent; + stroke: transparent; + -moz-context-properties: fill, stroke; - /* Color */ - fill: var(--toolbar-bgcolor) !important; - stroke: var( - --tab-line-color, - var(--tabs-border-color, rgba(128, 128, 142, 0.9)) - ) !important; - -moz-context-properties: fill, stroke !important; + /* Image */ + background-size: var(--tab-corner-rounding); + background-repeat: no-repeat; + background-position-y: bottom; - /* Image */ - background-size: var(--tab-corner-rounding); - background-repeat: no-repeat; - background-position-y: bottom; -} -:root:not([customizing="true"]):is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) - #TabsToolbar[brighttext] - #tabbrowser-tabs:not([noshadowfortests]) - tab[visuallyselected] - > stack:-moz-lwtheme::before, -:root:not([customizing="true"]):is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) - #TabsToolbar[brighttext] - #tabbrowser-tabs:not([noshadowfortests]) - tab[visuallyselected] - > stack:-moz-lwtheme::after { - /* As Selected Tab - Box Shadow */ - stroke: var(--toolbar-color) !important; -} + @include Option("userChrome.tab.bottom_rounded_corner.all") { + content: ""; + } + @include NotOption("userChrome.tab.color_like_toolbar") { + /* Based on tab background + background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none); -tab[visuallyselected] > stack::before { - left: var(--tab-corner-position) !important; - background-image: url("../icons/tab-bottom-corner-left.svg"); -} -tab[visuallyselected] > stack::after { - left: auto; - right: var(--tab-corner-position); - background-image: url("../icons/tab-bottom-corner-right.svg"); -} + defaults + background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); + background-image: var(--tab-selected-bgimage, var(--toolbar-bgimage)); + */ + fill: var(--lwt-selected-tab-background-color, var(--tab-selected-bgcolor, var(--toolbar-bgcolor))) !important; + } + } -@include OS($linux) { - /* Fill color for GTK */ - :root:not([customizing="true"]):not([lwtheme="true"]) tab[visuallyselected] > stack::before, - :root:not([customizing="true"]):not([lwtheme="true"]) tab[visuallyselected] > stack::after { - /* As GTK Toolbar's background-color + backround-image - * --toolbar-non-lwt-bgcolor: -moz-dialog; - * --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15)); - */ - fill: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog) !important; - stroke: transparent !important; + &::before { + left: var(--tab-corner-position) !important; + background-image: url("../icons/tab-bottom-corner-left.svg"); + } + &::after { + left: auto; + right: var(--tab-corner-position); + background-image: url("../icons/tab-bottom-corner-right.svg"); + } + } + + &[selected] > stack { + &::before, + &::after { + @include NotOption("userChrome.tab.bottom_rounded_corner.all") { + content: ""; + } + + fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); + stroke: var( + --tab-line-color, + var(--tabs-border-color, rgba(128, 128, 142, 0.9)) + ); + } + } + &[multiselected] > stack { + &::before, + &::after { + fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); + } + } + &:hover:not([selected], [multiselected]) > stack { + &::before, + &::after { + fill: color-mix(in srgb, currentColor 11%, transparent); + } + } } - :root:not([customizing="true"]):not([lwtheme="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::before, - :root:not([customizing="true"]):not([lwtheme="true"]) #TabsToolbar[brighttext] tab[visuallyselected] > stack::after { - stroke: transparent !important; - } -} - -@include NotOption("userChrome.tab.color_like_toolbar") { - :root:not([customizing="true"]) tab[visuallyselected] > stack::before, - :root:not([customizing="true"]) tab[visuallyselected] > stack::after { - /* Based on tab background - background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none); - - defaults - background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); - background-image: var(--tab-selected-bgimage, var(--toolbar-bgimage)); - */ - fill: var(--lwt-selected-tab-background-color, var(--tab-selected-bgcolor, var(--toolbar-bgcolor))) !important; + @include Option("userChrome.tab.multi_selected") { + .tabbrowser-tab[multiselected] > stack { + &::before, + &::after { + fill: color-mix(in srgb, currentColor 65%, transparent); + opacity: 0.3; + } + } + #TabsToolbar[brighttext] .tabbrowser-tab[multiselected] > stack { + &::before, + &::after { + opacity: 0.15; + } + } + } + + &::is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) + #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[selected] > stack:-moz-lwtheme { + &::before, + &::after { + /* As Selected Tab - Box Shadow */ + stroke: var(--toolbar-color); + } + } + + @include OS($linux) { + /* Fill color for GTK */ + &:not([lwtheme="true"]) { + .tabbrowser-tab[selected] > stack { + &::before, + &::after { + /* As GTK Toolbar's background-color + backround-image + * --toolbar-non-lwt-bgcolor: -moz-dialog; + * --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15)); + */ + fill: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog); + stroke: transparent; + } + } + #TabsToolbar[brighttext] .tabbrowser-tab[selected] > stack { + &::before, + &::after { + stroke: transparent; + } + } + } } } diff --git a/user.js b/user.js index 8e383db..094f04b 100644 --- a/user.js +++ b/user.js @@ -154,6 +154,7 @@ user_pref("userChrome.rounding.square_tab", false); // 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.bottom_rounded_corner.all", 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 891029a96df085ee40a392ca13f022896791040b Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 13 Oct 2022 09:31:56 +0900 Subject: [PATCH 22/88] Fix: Tab Bar - New tab button's separator vertical algin #315 --- css/leptonChrome.css | 8 ++++++-- src/tab/unselected_tab/_dynamic_separator.scss | 6 +++++- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 0955641..08e0472 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6637,6 +6637,10 @@ --tab-separator-position-x: 2.5px; } + #tabbrowser-arrowscrollbox-periphery { + position: relative; + } + @supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { @supports not -moz-bool-pref("userChrome.tabbar.multi_row") { #tabbrowser-arrowscrollbox { @@ -6650,7 +6654,7 @@ display: block; position: absolute; /* Position */ - bottom: 0%; + top: 50%; /* Bar shape */ width: 1px; height: 20px; @@ -6677,7 +6681,7 @@ display: block; position: absolute; /* Position */ - bottom: 0%; + top: 50%; /* Bar shape */ width: 1px; height: 20px; diff --git a/src/tab/unselected_tab/_dynamic_separator.scss b/src/tab/unselected_tab/_dynamic_separator.scss index 1107f59..352b872 100644 --- a/src/tab/unselected_tab/_dynamic_separator.scss +++ b/src/tab/unselected_tab/_dynamic_separator.scss @@ -6,7 +6,7 @@ position: absolute; /* Position */ - bottom: 0%; + top: 50%; /* Bar shape */ width: 1px; @@ -35,6 +35,10 @@ } } +#tabbrowser-arrowscrollbox-periphery { + position: relative; +} + @include Option("userChrome.tab.newtab_button_like_tab") { @include NotOption("userChrome.tabbar.multi_row") { #tabbrowser-arrowscrollbox { From 9cc874b5e8c3a75bdd8653a9db85cd7c6d00c764 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 18 Oct 2022 10:00:42 +0900 Subject: [PATCH 23/88] Fix: Bottom Rounded Corner - selected's color --- css/leptonChrome.css | 14 ++++++++++---- src/tab/selected_tab/_bottom_rounded_corner.scss | 4 ++-- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 7a8482c..5e2187f 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6538,13 +6538,19 @@ fill: color-mix(in srgb, currentColor 11%, transparent); } @supports -moz-bool-pref("userChrome.tab.multi_selected") { - :root:not([customizing="true"]) .tabbrowser-tab[multiselected] > stack::before, - :root:not([customizing="true"]) .tabbrowser-tab[multiselected] > stack::after { + :root:not([customizing="true"]) .tabbrowser-tab[multiselected]:not([selected]) > stack::before, + :root:not([customizing="true"]) .tabbrowser-tab[multiselected]:not([selected]) > stack::after { fill: color-mix(in srgb, currentColor 65%, transparent); opacity: 0.3; } - :root:not([customizing="true"]) #TabsToolbar[brighttext] .tabbrowser-tab[multiselected] > stack::before, - :root:not([customizing="true"]) #TabsToolbar[brighttext] .tabbrowser-tab[multiselected] > stack::after { + :root:not([customizing="true"]) + #TabsToolbar[brighttext] + .tabbrowser-tab[multiselected]:not([selected]) + > stack::before, + :root:not([customizing="true"]) + #TabsToolbar[brighttext] + .tabbrowser-tab[multiselected]:not([selected]) + > stack::after { opacity: 0.15; } } diff --git a/src/tab/selected_tab/_bottom_rounded_corner.scss b/src/tab/selected_tab/_bottom_rounded_corner.scss index be6b2f6..f9861ef 100644 --- a/src/tab/selected_tab/_bottom_rounded_corner.scss +++ b/src/tab/selected_tab/_bottom_rounded_corner.scss @@ -82,14 +82,14 @@ } } @include Option("userChrome.tab.multi_selected") { - .tabbrowser-tab[multiselected] > stack { + .tabbrowser-tab[multiselected]:not([selected]) > stack { &::before, &::after { fill: color-mix(in srgb, currentColor 65%, transparent); opacity: 0.3; } } - #TabsToolbar[brighttext] .tabbrowser-tab[multiselected] > stack { + #TabsToolbar[brighttext] .tabbrowser-tab[multiselected]:not([selected]) > stack { &::before, &::after { opacity: 0.15; From 487a5371f61d4f002b0996e9a65ceb6c277a7937 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 18 Oct 2022 14:48:14 +0900 Subject: [PATCH 24/88] Fix: Tab - Change position of bottom rounded corner and separator --- css/leptonChrome.css | 145 +++++++++--------- .../selected_tab/_bottom_rounded_corner.scss | 27 ++-- .../unselected_tab/_dynamic_separator.scss | 32 ++-- src/tab/unselected_tab/_static_separator.scss | 20 +-- 4 files changed, 109 insertions(+), 115 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 5e2187f..e19d8ff 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6472,12 +6472,13 @@ --tab-corner-position: calc(var(--tab-corner-padding) - var(--tab-corner-rounding)); } - :root:not([customizing="true"]) .tabbrowser-tab > stack::before, - :root:not([customizing="true"]) .tabbrowser-tab > stack::after { + :root:not([customizing="true"]) .tabbrowser-tab .tab-background::before, + :root:not([customizing="true"]) .tabbrowser-tab .tab-background::after { /* Box */ display: block; position: absolute; z-index: 1; + bottom: 0; /* Shape */ width: var(--tab-corner-rounding); height: 100%; @@ -6491,14 +6492,14 @@ background-position-y: bottom; } @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") { - :root:not([customizing="true"]) .tabbrowser-tab > stack::before, - :root:not([customizing="true"]) .tabbrowser-tab > stack::after { + :root:not([customizing="true"]) .tabbrowser-tab .tab-background::before, + :root:not([customizing="true"]) .tabbrowser-tab .tab-background::after { content: ""; } } @supports not -moz-bool-pref("userChrome.tab.color_like_toolbar") { - :root:not([customizing="true"]) .tabbrowser-tab > stack::before, - :root:not([customizing="true"]) .tabbrowser-tab > stack::after { + :root:not([customizing="true"]) .tabbrowser-tab .tab-background::before, + :root:not([customizing="true"]) .tabbrowser-tab .tab-background::after { /* Based on tab background background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none); @@ -6509,61 +6510,54 @@ fill: var(--lwt-selected-tab-background-color, var(--tab-selected-bgcolor, var(--toolbar-bgcolor))) !important; } } - :root:not([customizing="true"]) .tabbrowser-tab > stack::before { - left: var(--tab-corner-position) !important; + :root:not([customizing="true"]) .tabbrowser-tab .tab-background::before { + left: var(--tab-corner-position); background-image: url("../icons/tab-bottom-corner-left.svg"); } - :root:not([customizing="true"]) .tabbrowser-tab > stack::after { - left: auto; + :root:not([customizing="true"]) .tabbrowser-tab .tab-background::after { right: var(--tab-corner-position); background-image: url("../icons/tab-bottom-corner-right.svg"); } - :root:not([customizing="true"]) .tabbrowser-tab[selected] > stack::before, - :root:not([customizing="true"]) .tabbrowser-tab[selected] > stack::after { + :root:not([customizing="true"]) .tabbrowser-tab[visuallyselected] .tab-background::before, + :root:not([customizing="true"]) .tabbrowser-tab[visuallyselected] .tab-background::after { fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); stroke: var(--tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9))); } @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") { - :root:not([customizing="true"]) .tabbrowser-tab[selected] > stack::before, - :root:not([customizing="true"]) .tabbrowser-tab[selected] > stack::after { + :root:not([customizing="true"]) .tabbrowser-tab[visuallyselected] .tab-background::before, + :root:not([customizing="true"]) .tabbrowser-tab[visuallyselected] .tab-background::after { content: ""; } } - :root:not([customizing="true"]) .tabbrowser-tab[multiselected] > stack::before, - :root:not([customizing="true"]) .tabbrowser-tab[multiselected] > stack::after { + :root:not([customizing="true"]) .tabbrowser-tab[multiselected] .tab-background::before, + :root:not([customizing="true"]) .tabbrowser-tab[multiselected] .tab-background::after { fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); } - :root:not([customizing="true"]) .tabbrowser-tab:hover:not([selected], [multiselected]) > stack::before, - :root:not([customizing="true"]) .tabbrowser-tab:hover:not([selected], [multiselected]) > stack::after { + :root:not([customizing="true"]) + .tabbrowser-tab:hover:not([visuallyselected], [multiselected]) + .tab-background::before, + :root:not([customizing="true"]) + .tabbrowser-tab:hover:not([visuallyselected], [multiselected]) + .tab-background::after { fill: color-mix(in srgb, currentColor 11%, transparent); } @supports -moz-bool-pref("userChrome.tab.multi_selected") { - :root:not([customizing="true"]) .tabbrowser-tab[multiselected]:not([selected]) > stack::before, - :root:not([customizing="true"]) .tabbrowser-tab[multiselected]:not([selected]) > stack::after { + :root:not([customizing="true"]) .tabbrowser-tab[multiselected]:not([visuallyselected]) .tab-background::before, + :root:not([customizing="true"]) .tabbrowser-tab[multiselected]:not([visuallyselected]) .tab-background::after { fill: color-mix(in srgb, currentColor 65%, transparent); opacity: 0.3; } - :root:not([customizing="true"]) - #TabsToolbar[brighttext] - .tabbrowser-tab[multiselected]:not([selected]) - > stack::before, - :root:not([customizing="true"]) - #TabsToolbar[brighttext] - .tabbrowser-tab[multiselected]:not([selected]) - > stack::after { - opacity: 0.15; - } } :root:not([customizing="true"])::is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab[selected] - > stack:-moz-lwtheme::before, + .tabbrowser-tab[visuallyselected] + .tab-background:-moz-lwtheme::before, :root:not([customizing="true"])::is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab[selected] - > stack:-moz-lwtheme::after { + .tabbrowser-tab[visuallyselected] + .tab-background:-moz-lwtheme::after { /* As Selected Tab - Box Shadow */ stroke: var(--toolbar-color); } @@ -6571,23 +6565,28 @@ :root:not([customizing="true"]) { /* Fill color for GTK */ } - :root:not([customizing="true"]):not([lwtheme="true"]) .tabbrowser-tab[selected] > stack::before, - :root:not([customizing="true"]):not([lwtheme="true"]) .tabbrowser-tab[selected] > stack::after { + :root:not([customizing="true"]):not([lwtheme="true"]) + .tabbrowser-tab:is([visuallyselected], [multiselected]) + .tab-background::before, + :root:not([customizing="true"]):not([lwtheme="true"]) + .tabbrowser-tab:is([visuallyselected], [multiselected]) + .tab-background::after { /* As GTK Toolbar's background-color + background-image * --toolbar-non-lwt-bgcolor: -moz-dialog; * --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15)); */ fill: color-mix(in srgb, white 15%, -moz-dialog); stroke: transparent; + opacity: 1; } :root:not([customizing="true"]):not([lwtheme="true"]) #TabsToolbar[brighttext] - .tabbrowser-tab[selected] - > stack::before, + .tabbrowser-tab[visuallyselected] + .tab-background::before, :root:not([customizing="true"]):not([lwtheme="true"]) #TabsToolbar[brighttext] - .tabbrowser-tab[selected] - > stack::after { + .tabbrowser-tab[visuallyselected] + .tab-background::after { stroke: transparent; } } @@ -6708,7 +6707,7 @@ position: absolute; } } - .tab-background::before, + .tab-stack::before, #tabs-newtab-button::before { /* Box Model */ content: ""; @@ -6726,17 +6725,17 @@ transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y)); } @supports -moz-bool-pref("userChrome.compatibility.dynamic_separator") { - .tab-background::before, + .tab-stack::before, #tabs-newtab-button::before { background-color: var(--tabs-border-color); } } } @supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { - .tab-background::before, + .tab-stack::before, #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] - .tab-background::after { + .tab-stack::after { /* Box Model */ content: ""; display: block; @@ -6751,38 +6750,38 @@ background-color: var(--toolbarseparator-color); } @supports -moz-bool-pref("userChrome.compatibility.dynamic_separator") { - .tab-background::before, + .tab-stack::before, #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] - .tab-background::after { + .tab-stack::after { background-color: var(--tabs-border-color); } } - .tab-background::before { + .tab-stack::before { transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; } - .tabbrowser-tab[last-visible-tab] .tab-background::after { + .tabbrowser-tab[last-visible-tab] .tab-stack::after { right: 0; transform: translateX(var(--end-tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; } } - .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before { + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-stack::before { opacity: var(--tab-separator-opacity); } @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 { + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-stack::before { opacity: var(--tab-separator-opacity); transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y)); } } @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 { + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-stack::before { opacity: var(--tab-separator-opacity); transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y)); } @@ -6796,20 +6795,20 @@ } } @supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { - #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before, + #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[first-visible-unpinned-tab] .tab-stack::before, #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] - .tab-background::after { + .tab-stack::after { opacity: var(--tab-separator-opacity); } } #navigator-toolbox:not([movingtab]) .tabbrowser-tab[first-visible-unpinned-tab]:is([visuallyselected], [multiselected], :hover) - .tab-background::before, + .tab-stack::before, #navigator-toolbox:not([movingtab]) #tabbrowser-arrowscrollbox[overflowing] tab.tabbrowser-tab[first-visible-unpinned-tab] - .tab-background::before { + .tab-stack::before { opacity: 0 !important; } @@ -6817,11 +6816,11 @@ #navigator-toolbox:not([movingtab]) .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + .tabbrowser-tab - .tab-background::before, + .tab-stack::before, #navigator-toolbox:not([movingtab]) .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) ~ .tabbrowser-tab[afterhovered] - .tab-background::before, + .tab-stack::before, #navigator-toolbox:not([movingtab]) .tabbrowser-tab[last-visible-tab]:is([visuallyselected], [multiselected], :hover) ~ #tabs-newtab-button::before, @@ -6835,13 +6834,13 @@ @supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + .tabbrowser-tab:not([visuallyselected]) - .tab-background::before { + .tab-stack::before { opacity: 0 !important; } } /* Animate */ @media (prefers-reduced-motion: no-preference) { - .tab-background::before { + .tab-stack::before { transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ } @@ -6855,7 +6854,7 @@ @supports not -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] - .tab-background::after { + .tab-stack::after { transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ } @@ -6868,13 +6867,13 @@ } /*= Unselected Tab - Static Separator ========================================*/ @supports -moz-bool-pref("userChrome.tab.static_separator") { - .tabbrowser-tab[first-visible-tab="true"] .tab-background::before, - .tab-background::after { + .tabbrowser-tab[first-visible-tab="true"] .tab-stack::before, + .tab-stack::after { content: ""; } - .tab-background::before, - .tab-background::after { + .tab-stack::before, + .tab-stack::after { /* Box Model */ display: block; position: absolute; @@ -6889,30 +6888,30 @@ border-right: 1px solid var(--lwt-background-tab-separator-color, currentColor) !important; } - .tab-background::after { + .tab-stack::after { right: 0; } @supports -moz-bool-pref("userChrome.tab.static_separator.selected_accent") { - .tabbrowser-tab[visuallyselected] .tab-background::before, - .tabbrowser-tab[visuallyselected] .tab-background::after, - .tabbrowser-tab[beforeselected-visible] .tab-background::after { + .tabbrowser-tab[visuallyselected] .tab-stack::before, + .tabbrowser-tab[visuallyselected] .tab-stack::after, + .tabbrowser-tab[beforeselected-visible] .tab-stack::after { --lwt-background-tab-separator-color: var(--tab-line-color, var(--lwt-tab-line-color, rgb(10, 132, 255))); opacity: 1; } } @supports not -moz-bool-pref("userChrome.tab.static_separator.selected_accent") { - .tabbrowser-tab[visuallyselected] .tab-background::before, - .tabbrowser-tab[visuallyselected] .tab-background::after, - .tabbrowser-tab[beforeselected-visible] .tab-background::after { + .tabbrowser-tab[visuallyselected] .tab-stack::before, + .tabbrowser-tab[visuallyselected] .tab-stack::after, + .tabbrowser-tab[beforeselected-visible] .tab-stack::after { opacity: 0; } } /* Animate */ @media (prefers-reduced-motion: no-preference) { - .tab-background::before, - .tab-background::after { + .tab-stack::before, + .tab-stack::after { transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ } diff --git a/src/tab/selected_tab/_bottom_rounded_corner.scss b/src/tab/selected_tab/_bottom_rounded_corner.scss index f9861ef..6cb2fcf 100644 --- a/src/tab/selected_tab/_bottom_rounded_corner.scss +++ b/src/tab/selected_tab/_bottom_rounded_corner.scss @@ -6,13 +6,14 @@ :root:not([customizing="true"]) { .tabbrowser-tab { - > stack { + .tab-background { &::before, &::after { /* Box */ display: block; position: absolute; z-index: 1; + bottom: 0; /* Shape */ width: var(--tab-corner-rounding); @@ -44,17 +45,16 @@ } &::before { - left: var(--tab-corner-position) !important; + left: var(--tab-corner-position); background-image: url("../icons/tab-bottom-corner-left.svg"); } &::after { - left: auto; right: var(--tab-corner-position); background-image: url("../icons/tab-bottom-corner-right.svg"); } } - &[selected] > stack { + &[visuallyselected] .tab-background { &::before, &::after { @include NotOption("userChrome.tab.bottom_rounded_corner.all") { @@ -68,13 +68,13 @@ ); } } - &[multiselected] > stack { + &[multiselected] .tab-background { &::before, &::after { fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); } } - &:hover:not([selected], [multiselected]) > stack { + &:hover:not([visuallyselected], [multiselected]) .tab-background { &::before, &::after { fill: color-mix(in srgb, currentColor 11%, transparent); @@ -82,23 +82,17 @@ } } @include Option("userChrome.tab.multi_selected") { - .tabbrowser-tab[multiselected]:not([selected]) > stack { + .tabbrowser-tab[multiselected]:not([visuallyselected]) .tab-background { &::before, &::after { fill: color-mix(in srgb, currentColor 65%, transparent); opacity: 0.3; } } - #TabsToolbar[brighttext] .tabbrowser-tab[multiselected]:not([selected]) > stack { - &::before, - &::after { - opacity: 0.15; - } - } } &::is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) - #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[selected] > stack:-moz-lwtheme { + #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected] .tab-background:-moz-lwtheme { &::before, &::after { /* As Selected Tab - Box Shadow */ @@ -109,7 +103,7 @@ @include OS($linux) { /* Fill color for GTK */ &:not([lwtheme="true"]) { - .tabbrowser-tab[selected] > stack { + .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background { &::before, &::after { /* As GTK Toolbar's background-color + background-image @@ -118,9 +112,10 @@ */ fill: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog); stroke: transparent; + opacity: 1; } } - #TabsToolbar[brighttext] .tabbrowser-tab[selected] > stack { + #TabsToolbar[brighttext] .tabbrowser-tab[visuallyselected] .tab-background { &::before, &::after { stroke: transparent; diff --git a/src/tab/unselected_tab/_dynamic_separator.scss b/src/tab/unselected_tab/_dynamic_separator.scss index 0b48d0d..2133f96 100644 --- a/src/tab/unselected_tab/_dynamic_separator.scss +++ b/src/tab/unselected_tab/_dynamic_separator.scss @@ -46,7 +46,7 @@ } } - .tab-background::before, + .tab-stack::before, #tabs-newtab-button::before { @include _dynamicSeparatorShape; @@ -56,29 +56,29 @@ } @include NotOption("userChrome.tab.newtab_button_like_tab") { - .tab-background::before, + .tab-stack::before, #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] - .tab-background::after { + .tab-stack::after { @include _dynamicSeparatorShape; } - .tab-background::before { + .tab-stack::before { transform: translateX(var(--tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; } - .tabbrowser-tab[last-visible-tab] .tab-background::after { + .tabbrowser-tab[last-visible-tab] .tab-stack::after { right: 0; transform: translateX(var(--end-tab-separator-position-x)) translateY(var(--tab-separator-position-y)) !important; } } -.tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-background::before { +.tabbrowser-tab:not([visuallyselected], [multiselected], :hover, :first-child) .tab-stack::before { opacity: var(--tab-separator-opacity); } @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 { + .tabbrowser-tab:not([visuallyselected], [multiselected], :hover):first-child .tab-stack::before { opacity: var(--tab-separator-opacity); transform: translateX(var(--start-tab-separator-position-x)) translateY(var(--tab-separator-position-y)); } @@ -91,32 +91,32 @@ } } @include NotOption("userChrome.tab.newtab_button_like_tab") { - #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before, + #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab[first-visible-unpinned-tab] .tab-stack::before, #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] - .tab-background::after { + .tab-stack::after { opacity: var(--tab-separator-opacity); } } #navigator-toolbox:not([movingtab]) .tabbrowser-tab[first-visible-unpinned-tab]:is([visuallyselected], [multiselected], :hover) - .tab-background::before, + .tab-stack::before, #navigator-toolbox:not([movingtab]) #tabbrowser-arrowscrollbox[overflowing] tab.tabbrowser-tab[first-visible-unpinned-tab] - .tab-background::before { + .tab-stack::before { opacity: 0 !important; } @include Option("userChrome.tab.newtab_button_like_tab") { #navigator-toolbox:not([movingtab]) .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + .tabbrowser-tab - .tab-background::before, + .tab-stack::before, #navigator-toolbox:not([movingtab]) .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) ~ .tabbrowser-tab[afterhovered] - .tab-background::before, + .tab-stack::before, #navigator-toolbox:not([movingtab]) .tabbrowser-tab[last-visible-tab]:is([visuallyselected], [multiselected], :hover) ~ #tabs-newtab-button::before, /* Legacy - v103 */ @@ -129,14 +129,14 @@ @include NotOption("userChrome.tab.newtab_button_like_tab") { .tabbrowser-tab:is([visuallyselected], [multiselected], :hover) + .tabbrowser-tab:not([visuallyselected]) - .tab-background::before { + .tab-stack::before { opacity: 0 !important; } } /* Animate */ @include Animate { - .tab-background::before { + .tab-stack::before { transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ } @include Option("userChrome.tab.newtab_button_like_tab") { @@ -147,7 +147,7 @@ @include NotOption("userChrome.tab.newtab_button_like_tab") { #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] - .tab-background::after { + .tab-stack::after { transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ } } diff --git a/src/tab/unselected_tab/_static_separator.scss b/src/tab/unselected_tab/_static_separator.scss index 2e7e625..0111a18 100644 --- a/src/tab/unselected_tab/_static_separator.scss +++ b/src/tab/unselected_tab/_static_separator.scss @@ -1,10 +1,10 @@ -.tabbrowser-tab[first-visible-tab="true"] .tab-background::before, -.tab-background::after { +.tabbrowser-tab[first-visible-tab="true"] .tab-stack::before, +.tab-stack::after { content: ""; } -.tab-background::before, -.tab-background::after { +.tab-stack::before, +.tab-stack::after { /* Box Model */ display: block; position: absolute; @@ -21,13 +21,13 @@ opacity: 0.3; border-right: 1px solid var(--lwt-background-tab-separator-color, currentColor) !important; } -.tab-background::after { +.tab-stack::after { right: 0; } -.tabbrowser-tab[visuallyselected] .tab-background::before, -.tabbrowser-tab[visuallyselected] .tab-background::after, -.tabbrowser-tab[beforeselected-visible] .tab-background::after { +.tabbrowser-tab[visuallyselected] .tab-stack::before, +.tabbrowser-tab[visuallyselected] .tab-stack::after, +.tabbrowser-tab[beforeselected-visible] .tab-stack::after { @include Option("userChrome.tab.static_separator.selected_accent") { --lwt-background-tab-separator-color: var(--tab-line-color, var(--lwt-tab-line-color, rgb(10, 132, 255))); opacity: 1; @@ -39,8 +39,8 @@ /* Animate */ @include Animate { - .tab-background::before, - .tab-background::after { + .tab-stack::before, + .tab-stack::after { transition: opacity 0.2s var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ } } From e804ca676877d3e1928ba6897cec1eebbfa7c0cd Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 19 Oct 2022 04:22:33 +0900 Subject: [PATCH 25/88] Fix: Tab Bar - Phenomenon of decreasing size at FF`v108` --- css/leptonChrome.css | 5 ----- src/tab/unselected_tab/_dynamic_separator.scss | 6 ------ 2 files changed, 11 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index e19d8ff..af07a2a 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6702,11 +6702,6 @@ } @supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { - @supports not -moz-bool-pref("userChrome.tabbar.multi_row") { - #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox { - position: absolute; - } - } .tab-stack::before, #tabs-newtab-button::before { /* Box Model */ diff --git a/src/tab/unselected_tab/_dynamic_separator.scss b/src/tab/unselected_tab/_dynamic_separator.scss index 2133f96..7d9f7bf 100644 --- a/src/tab/unselected_tab/_dynamic_separator.scss +++ b/src/tab/unselected_tab/_dynamic_separator.scss @@ -40,12 +40,6 @@ } @include Option("userChrome.tab.newtab_button_like_tab") { - @include NotOption("userChrome.tabbar.multi_row") { - #TabsToolbar:not([multibar]) #tabbrowser-arrowscrollbox { - position: absolute; - } - } - .tab-stack::before, #tabs-newtab-button::before { @include _dynamicSeparatorShape; From efc89eb3fd9bb768c63704b20610e37594b46929 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 20 Oct 2022 14:44:13 +0900 Subject: [PATCH 26/88] Revert "Fix: Tab - Compatibility for dynamic separator #479" This reverts commit be059f29605d8d2488328d8627599604dda1a56e. --- css/leptonChrome.css | 2 +- src/tab/_unselected_tab.scss | 5 +---- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index af07a2a..875118a 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6684,7 +6684,7 @@ } /*= Unselected Tab - Divide line =============================================*/ /*= Unselected Tab - Dynamic Separator =======================================*/ -@supports -moz-bool-pref("userChrome.tab.dynamic_separator") or -moz-bool-pref("userChrome.tab.dynamic_separtor") { +@supports -moz-bool-pref("userChrome.tab.dynamic_separator") { #tabbrowser-arrowscrollbox { --start-tab-separator-position-x: -1.5px; --end-tab-separator-position-x: 1.5px; diff --git a/src/tab/_unselected_tab.scss b/src/tab/_unselected_tab.scss index ba0a587..6332380 100644 --- a/src/tab/_unselected_tab.scss +++ b/src/tab/_unselected_tab.scss @@ -1,8 +1,5 @@ /*= Unselected Tab - Dynamic Separator =======================================*/ -@include Option( - "userChrome.tab.dynamic_separator", - "userChrome.tab.dynamic_separtor" -) { +@include Option("userChrome.tab.dynamic_separator") { @import "unselected_tab/dynamic_separator"; } From f75da40f05464437cccbbaa79a623bd778332b27 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 24 Oct 2022 10:44:09 +0900 Subject: [PATCH 27/88] Add: Bottom Rounded Corner - Wavefox resources --- icons/tab-bottom-corner-left-australis-clipped.svg | 1 + icons/tab-bottom-corner-left-australis.svg | 1 + icons/tab-bottom-corner-left-chrome-clipped.svg | 1 + icons/tab-bottom-corner-left-chrome.svg | 1 + icons/tab-bottom-corner-left-chromeLegacy-clipped.svg | 1 + icons/tab-bottom-corner-left-chromeLegacy.svg | 1 + icons/tab-bottom-corner-left-edge-clipped.svg | 1 + icons/tab-bottom-corner-left-edge.svg | 1 + icons/tab-bottom-corner-left-wave-clipped.svg | 1 + icons/tab-bottom-corner-left-wave.svg | 1 + icons/tab-bottom-corner-right-australis-cilpped.svg | 1 + icons/tab-bottom-corner-right-australis.svg | 1 + icons/tab-bottom-corner-right-chrome-clipped.svg | 1 + icons/tab-bottom-corner-right-chrome.svg | 1 + icons/tab-bottom-corner-right-chromeLegacy-clipped.svg | 1 + icons/tab-bottom-corner-right-chromeLegacy.svg | 1 + icons/tab-bottom-corner-right-edge-clipped.svg | 1 + icons/tab-bottom-corner-right-edge.svg | 1 + icons/tab-bottom-corner-right-wave-clipped.svg | 1 + icons/tab-bottom-corner-right-wave.svg | 1 + 20 files changed, 20 insertions(+) create mode 100644 icons/tab-bottom-corner-left-australis-clipped.svg create mode 100644 icons/tab-bottom-corner-left-australis.svg create mode 100644 icons/tab-bottom-corner-left-chrome-clipped.svg create mode 100644 icons/tab-bottom-corner-left-chrome.svg create mode 100644 icons/tab-bottom-corner-left-chromeLegacy-clipped.svg create mode 100644 icons/tab-bottom-corner-left-chromeLegacy.svg create mode 100644 icons/tab-bottom-corner-left-edge-clipped.svg create mode 100644 icons/tab-bottom-corner-left-edge.svg create mode 100644 icons/tab-bottom-corner-left-wave-clipped.svg create mode 100644 icons/tab-bottom-corner-left-wave.svg create mode 100644 icons/tab-bottom-corner-right-australis-cilpped.svg create mode 100644 icons/tab-bottom-corner-right-australis.svg create mode 100644 icons/tab-bottom-corner-right-chrome-clipped.svg create mode 100644 icons/tab-bottom-corner-right-chrome.svg create mode 100644 icons/tab-bottom-corner-right-chromeLegacy-clipped.svg create mode 100644 icons/tab-bottom-corner-right-chromeLegacy.svg create mode 100644 icons/tab-bottom-corner-right-edge-clipped.svg create mode 100644 icons/tab-bottom-corner-right-edge.svg create mode 100644 icons/tab-bottom-corner-right-wave-clipped.svg create mode 100644 icons/tab-bottom-corner-right-wave.svg diff --git a/icons/tab-bottom-corner-left-australis-clipped.svg b/icons/tab-bottom-corner-left-australis-clipped.svg new file mode 100644 index 0000000..5777e0f --- /dev/null +++ b/icons/tab-bottom-corner-left-australis-clipped.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icons/tab-bottom-corner-left-australis.svg b/icons/tab-bottom-corner-left-australis.svg new file mode 100644 index 0000000..395ba72 --- /dev/null +++ b/icons/tab-bottom-corner-left-australis.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icons/tab-bottom-corner-left-chrome-clipped.svg b/icons/tab-bottom-corner-left-chrome-clipped.svg new file mode 100644 index 0000000..88a7af2 --- /dev/null +++ b/icons/tab-bottom-corner-left-chrome-clipped.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icons/tab-bottom-corner-left-chrome.svg b/icons/tab-bottom-corner-left-chrome.svg new file mode 100644 index 0000000..e627789 --- /dev/null +++ b/icons/tab-bottom-corner-left-chrome.svg @@ -0,0 +1 @@ + diff --git a/icons/tab-bottom-corner-left-chromeLegacy-clipped.svg b/icons/tab-bottom-corner-left-chromeLegacy-clipped.svg new file mode 100644 index 0000000..a68e94a --- /dev/null +++ b/icons/tab-bottom-corner-left-chromeLegacy-clipped.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icons/tab-bottom-corner-left-chromeLegacy.svg b/icons/tab-bottom-corner-left-chromeLegacy.svg new file mode 100644 index 0000000..d2e61df --- /dev/null +++ b/icons/tab-bottom-corner-left-chromeLegacy.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icons/tab-bottom-corner-left-edge-clipped.svg b/icons/tab-bottom-corner-left-edge-clipped.svg new file mode 100644 index 0000000..a0ad796 --- /dev/null +++ b/icons/tab-bottom-corner-left-edge-clipped.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icons/tab-bottom-corner-left-edge.svg b/icons/tab-bottom-corner-left-edge.svg new file mode 100644 index 0000000..e771b3c --- /dev/null +++ b/icons/tab-bottom-corner-left-edge.svg @@ -0,0 +1 @@ + diff --git a/icons/tab-bottom-corner-left-wave-clipped.svg b/icons/tab-bottom-corner-left-wave-clipped.svg new file mode 100644 index 0000000..4d392a8 --- /dev/null +++ b/icons/tab-bottom-corner-left-wave-clipped.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icons/tab-bottom-corner-left-wave.svg b/icons/tab-bottom-corner-left-wave.svg new file mode 100644 index 0000000..b49157d --- /dev/null +++ b/icons/tab-bottom-corner-left-wave.svg @@ -0,0 +1 @@ + diff --git a/icons/tab-bottom-corner-right-australis-cilpped.svg b/icons/tab-bottom-corner-right-australis-cilpped.svg new file mode 100644 index 0000000..bba43f8 --- /dev/null +++ b/icons/tab-bottom-corner-right-australis-cilpped.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icons/tab-bottom-corner-right-australis.svg b/icons/tab-bottom-corner-right-australis.svg new file mode 100644 index 0000000..8e83aac --- /dev/null +++ b/icons/tab-bottom-corner-right-australis.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icons/tab-bottom-corner-right-chrome-clipped.svg b/icons/tab-bottom-corner-right-chrome-clipped.svg new file mode 100644 index 0000000..74fafb5 --- /dev/null +++ b/icons/tab-bottom-corner-right-chrome-clipped.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icons/tab-bottom-corner-right-chrome.svg b/icons/tab-bottom-corner-right-chrome.svg new file mode 100644 index 0000000..8b32862 --- /dev/null +++ b/icons/tab-bottom-corner-right-chrome.svg @@ -0,0 +1 @@ + diff --git a/icons/tab-bottom-corner-right-chromeLegacy-clipped.svg b/icons/tab-bottom-corner-right-chromeLegacy-clipped.svg new file mode 100644 index 0000000..4a189aa --- /dev/null +++ b/icons/tab-bottom-corner-right-chromeLegacy-clipped.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icons/tab-bottom-corner-right-chromeLegacy.svg b/icons/tab-bottom-corner-right-chromeLegacy.svg new file mode 100644 index 0000000..656b743 --- /dev/null +++ b/icons/tab-bottom-corner-right-chromeLegacy.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icons/tab-bottom-corner-right-edge-clipped.svg b/icons/tab-bottom-corner-right-edge-clipped.svg new file mode 100644 index 0000000..c3eac03 --- /dev/null +++ b/icons/tab-bottom-corner-right-edge-clipped.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icons/tab-bottom-corner-right-edge.svg b/icons/tab-bottom-corner-right-edge.svg new file mode 100644 index 0000000..e9f3fc2 --- /dev/null +++ b/icons/tab-bottom-corner-right-edge.svg @@ -0,0 +1 @@ + diff --git a/icons/tab-bottom-corner-right-wave-clipped.svg b/icons/tab-bottom-corner-right-wave-clipped.svg new file mode 100644 index 0000000..0ac21f3 --- /dev/null +++ b/icons/tab-bottom-corner-right-wave-clipped.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icons/tab-bottom-corner-right-wave.svg b/icons/tab-bottom-corner-right-wave.svg new file mode 100644 index 0000000..f4b81db --- /dev/null +++ b/icons/tab-bottom-corner-right-wave.svg @@ -0,0 +1 @@ + \ No newline at end of file From 24c5747b6f094a7d819f6d9cbe70d3935c3cc16f Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 26 Oct 2022 17:05:29 +0900 Subject: [PATCH 28/88] Add: Bottom Rounded Conrer - Proof of concepts --- css/leptonChrome.css | 503 +++++++++++++----- icons/tab-bottom-corner-left-australis.svg | 4 +- icons/tab-bottom-corner-left-chrome.svg | 4 +- icons/tab-bottom-corner-left-chromeLegacy.svg | 4 +- icons/tab-bottom-corner-left-edge.svg | 4 +- icons/tab-bottom-corner-left-wave.svg | 4 +- icons/tab-bottom-corner-right-australis.svg | 4 +- icons/tab-bottom-corner-right-chrome.svg | 4 +- .../tab-bottom-corner-right-chromeLegacy.svg | 4 +- icons/tab-bottom-corner-right-edge.svg | 4 +- icons/tab-bottom-corner-right-wave.svg | 4 +- src/tab/_selected_tab.scss | 21 +- .../_bottom_rounded_corner_others.scss | 196 +++++++ src/tab/selected_tab/_box_shadow.scss | 30 +- src/tab/selected_tab/_multi_selected.scss | 43 +- 15 files changed, 672 insertions(+), 161 deletions(-) create mode 100644 src/tab/selected_tab/_bottom_rounded_corner_others.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index a419915..540ee70 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6364,24 +6364,35 @@ } /*= Multi Selected Color - More Contrast =====================================*/ @supports -moz-bool-pref("userChrome.tab.multi_selected") { + #TabsToolbar { + --uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 28%, var(--toolbar-bgcolor, transparent)); + } + #TabsToolbar[brighttext] { + --uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 16%, var(--toolbar-bgcolor, transparent)); + } + #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack - > .tab-background[multiselected]:not([selected]):-moz-lwtheme { - background-image: linear-gradient(var(--toolbar-bgcolor, transparent), var(--toolbar-bgcolor, transparent)), - linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important; - } - - .tab-background[multiselected="true"]:not([selected="true"]) > .tab-loading-burst:not([bursting]) { - background: color-mix(in srgb, currentColor 65%, transparent); - opacity: 0.3; - } - - #TabsToolbar[brighttext] - .tab-background[multiselected="true"]:not([selected="true"]) - > .tab-loading-burst:not([bursting]) { - opacity: 0.15; + > .tab-background[multiselected]:not([selected]) { + /* Original: + background-attachment: scroll, scroll, fixed; + background-color: transparent; + background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), + linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), + var(--lwt-header-image, none); + background-position: 0 0, 0 0, right top; + background-repeat: repeat-x, repeat-x, no-repeat; + background-size: auto 100%, auto 100%, auto auto; + */ + background-attachment: scroll, fixed !important; + background-color: transparent !important; + background-image: linear-gradient(var(--uc-multiselected-tab-bgcolor), var(--uc-multiselected-tab-bgcolor)), + var(--lwt-header-image, none) !important; + background-position: 0 0, right top !important; + background-repeat: repeat-x, no-repeat !important; + background-size: auto 100%, auto auto !important; } @supports -moz-bool-pref("userChrome.tab.connect_to_window") { @@ -6404,6 +6415,23 @@ } /*= Selected Tab - Box Shadow ================================================*/ @supports -moz-bool-pref("userChrome.tab.box_shadow") { + .tab-background { + --uc-tab-background-shadow-soft: 0 0 1px; + --uc-tab-background-shadow-hard: 0 0 0 1px; + } + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner") { + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-bool-pref( + "userChrome.tab.bottom_rounded_corner.australis" + ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref( + "userChrome.tab.bottom_rounded_corner.chrome" + ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { + .tab-background { + --uc-tab-background-shadow-soft: 0 -1px 0; + --uc-tab-background-shadow-hard: 0 -1px 0; + } + } + } + #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected="true"]:not(:focus) @@ -6411,7 +6439,7 @@ > .tab-background:-moz-lwtheme { /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)) Bright: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */ - box-shadow: 0 0 1px var(--toolbar-color) !important; + box-shadow: var(--uc-tab-background-shadow-soft) var(--toolbar-color) !important; } #TabsToolbar[brighttext] @@ -6419,7 +6447,7 @@ .tabbrowser-tab[multiselected]:not([visuallyselected]) > .tab-stack > .tab-background:-moz-lwtheme { - box-shadow: 0 0 1px color-mix(in srgb, var(--toolbar-color) 80%, transparent) !important; + box-shadow: var(--uc-tab-background-shadow-soft) color-mix(in srgb, var(--toolbar-color) 80%, transparent) !important; } /* Consider 0 0 4px rgba(128,128,142,0.9) -> 0 0 4px rgba(0,0,0,.4) new default */ @@ -6428,7 +6456,8 @@ .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background { - box-shadow: 0 0 1px var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))), + box-shadow: var(--uc-tab-background-shadow-soft) + var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))), 0 0 4px rgba(128, 128, 142, 0.5) !important; } @@ -6437,7 +6466,8 @@ .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background:-moz-lwtheme { - box-shadow: 0 0 1px var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))) !important; + box-shadow: var(--uc-tab-background-shadow-soft) + var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))) !important; } /* For themes outside of Light and Dark (which are curated by Mozilla), show a thicker border @@ -6448,7 +6478,7 @@ .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background:-moz-lwtheme { - box-shadow: 0 0 0 1px + box-shadow: var(--uc-tab-background-shadow-hard) var(--tab-line-color, var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9)))), 0 0 4px rgba(128, 128, 142, 0.5) !important; } @@ -6459,135 +6489,348 @@ .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background:-moz-lwtheme { - box-shadow: 0 0 0 1px + box-shadow: var(--uc-tab-background-shadow-hard) var(--tab-line-color, var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9)))) !important; } } /*= Selected Tab - Bottom Rounded Corner =====================================*/ @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner") { - #tabbrowser-tabs { - --tab-corner-rounding: 3px; - /* 10px looks about like chromium - 17px looks close to Australis tabs */ - --tab-corner-padding: 0px; - --tab-corner-position: calc(var(--tab-corner-padding) - var(--tab-corner-rounding)); - } + @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") { + @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.australis") { + @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome") { + @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") { + @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { + #tabbrowser-tabs { + --tab-corner-rounding: 3px; + /* 10px looks about like chromium - 17px looks close to Australis tabs */ + --tab-corner-padding: 0px; + --tab-corner-position: calc(var(--tab-corner-padding) - var(--tab-corner-rounding)); + } - :root:not([customizing="true"]) .tabbrowser-tab .tab-background::before, - :root:not([customizing="true"]) .tabbrowser-tab .tab-background::after { - /* Box */ - display: block; - position: absolute; - z-index: 1; - bottom: 0; - /* Shape */ - width: var(--tab-corner-rounding); - height: 100%; - /* Color */ - fill: transparent; - stroke: transparent; - -moz-context-properties: fill, stroke; - /* Image */ - background-size: var(--tab-corner-rounding); - background-repeat: no-repeat; - background-position-y: bottom; - } - @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") { - :root:not([customizing="true"]) .tabbrowser-tab .tab-background::before, - :root:not([customizing="true"]) .tabbrowser-tab .tab-background::after { - content: ""; - } - } - @supports not -moz-bool-pref("userChrome.tab.color_like_toolbar") { - :root:not([customizing="true"]) .tabbrowser-tab .tab-background::before, - :root:not([customizing="true"]) .tabbrowser-tab .tab-background::after { - /* Based on tab background - background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none); + :root:not([customizing="true"]) .tabbrowser-tab .tab-background::before, + :root:not([customizing="true"]) .tabbrowser-tab .tab-background::after { + /* Box */ + display: block; + position: absolute; + z-index: 1; + bottom: 0; + /* Shape */ + width: var(--tab-corner-rounding); + height: 100%; + /* Color */ + fill: transparent; + stroke: transparent; + -moz-context-properties: fill, stroke; + /* Image */ + background-size: var(--tab-corner-rounding); + background-repeat: no-repeat; + background-position-y: bottom; + } + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") { + :root:not([customizing="true"]) .tabbrowser-tab .tab-background::before, + :root:not([customizing="true"]) .tabbrowser-tab .tab-background::after { + content: ""; + } + } + @supports not -moz-bool-pref("userChrome.tab.color_like_toolbar") { + :root:not([customizing="true"]) .tabbrowser-tab .tab-background::before, + :root:not([customizing="true"]) .tabbrowser-tab .tab-background::after { + /* Based on tab background + background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none); - defaults - background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); - background-image: var(--tab-selected-bgimage, var(--toolbar-bgimage)); - */ - fill: var(--lwt-selected-tab-background-color, var(--tab-selected-bgcolor, var(--toolbar-bgcolor))) !important; + defaults + background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); + background-image: var(--tab-selected-bgimage, var(--toolbar-bgimage)); + */ + fill: var( + --lwt-selected-tab-background-color, + var(--tab-selected-bgcolor, var(--toolbar-bgcolor)) + ) !important; + } + } + :root:not([customizing="true"]) .tabbrowser-tab .tab-background::before { + left: var(--tab-corner-position); + background-image: url("../icons/tab-bottom-corner-left.svg"); + } + :root:not([customizing="true"]) .tabbrowser-tab .tab-background::after { + right: var(--tab-corner-position); + background-image: url("../icons/tab-bottom-corner-right.svg"); + } + :root:not([customizing="true"]) .tabbrowser-tab[visuallyselected] .tab-background::before, + :root:not([customizing="true"]) .tabbrowser-tab[visuallyselected] .tab-background::after { + fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); + stroke: var(--tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9))); + } + @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") { + :root:not([customizing="true"]) .tabbrowser-tab[visuallyselected] .tab-background::before, + :root:not([customizing="true"]) .tabbrowser-tab[visuallyselected] .tab-background::after { + content: ""; + } + } + :root:not([customizing="true"]) .tabbrowser-tab[multiselected] .tab-background::before, + :root:not([customizing="true"]) .tabbrowser-tab[multiselected] .tab-background::after { + fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); + } + :root:not([customizing="true"]) + .tabbrowser-tab:hover:not([visuallyselected], [multiselected]) + .tab-background::before, + :root:not([customizing="true"]) + .tabbrowser-tab:hover:not([visuallyselected], [multiselected]) + .tab-background::after { + fill: color-mix(in srgb, currentColor 11%, transparent); + } + @supports -moz-bool-pref("userChrome.tab.multi_selected") { + :root:not([customizing="true"]) + .tabbrowser-tab[multiselected]:not([visuallyselected]) + .tab-background::before, + :root:not([customizing="true"]) + .tabbrowser-tab[multiselected]:not([visuallyselected]) + .tab-background::after { + fill: color-mix(in srgb, currentColor 65%, transparent); + opacity: 0.3; + } + } + :root:not([customizing="true"])::is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) + #TabsToolbar[brighttext] + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab[visuallyselected] + .tab-background:-moz-lwtheme::before, + :root:not([customizing="true"])::is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) + #TabsToolbar[brighttext] + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab[visuallyselected] + .tab-background:-moz-lwtheme::after { + /* As Selected Tab - Box Shadow */ + stroke: var(--toolbar-color); + } + @media (-moz-gtk-csd-available) { + :root:not([customizing="true"]) { + /* Fill color for GTK */ + } + :root:not([customizing="true"]):not([lwtheme="true"]) + .tabbrowser-tab:is([visuallyselected], [multiselected]) + .tab-background::before, + :root:not([customizing="true"]):not([lwtheme="true"]) + .tabbrowser-tab:is([visuallyselected], [multiselected]) + .tab-background::after { + /* As GTK Toolbar's background-color + background-image + * --toolbar-non-lwt-bgcolor: -moz-dialog; + * --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15)); + */ + fill: color-mix(in srgb, white 15%, -moz-dialog); + stroke: transparent; + opacity: 1; + } + :root:not([customizing="true"]):not([lwtheme="true"]) + #TabsToolbar[brighttext] + .tabbrowser-tab[visuallyselected] + .tab-background::before, + :root:not([customizing="true"]):not([lwtheme="true"]) + #TabsToolbar[brighttext] + .tabbrowser-tab[visuallyselected] + .tab-background::after { + stroke: transparent; + } + } + } + } + } } } - :root:not([customizing="true"]) .tabbrowser-tab .tab-background::before { - left: var(--tab-corner-position); - background-image: url("../icons/tab-bottom-corner-left.svg"); - } - :root:not([customizing="true"]) .tabbrowser-tab .tab-background::after { - right: var(--tab-corner-position); - background-image: url("../icons/tab-bottom-corner-right.svg"); - } - :root:not([customizing="true"]) .tabbrowser-tab[visuallyselected] .tab-background::before, - :root:not([customizing="true"]) .tabbrowser-tab[visuallyselected] .tab-background::after { - fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); - stroke: var(--tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9))); - } - @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") { - :root:not([customizing="true"]) .tabbrowser-tab[visuallyselected] .tab-background::before, - :root:not([customizing="true"]) .tabbrowser-tab[visuallyselected] .tab-background::after { - content: ""; + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-bool-pref( + "userChrome.tab.bottom_rounded_corner.australis" + ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref( + "userChrome.tab.bottom_rounded_corner.chrome" + ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { + #tabbrowser-tabs { + --uc-tab-corner-size: calc(var(--tab-min-height) / 2); + --uc-tab-corner-half-size: calc(var(--uc-tab-corner-size) / 2); + --uc-tab-corner-margin: calc(var(--uc-tab-corner-half-size) + 1px); + --uc-tab-corner-height: calc(var(--tab-min-height) - var(--tab-block-margin) + 1px); } - } - :root:not([customizing="true"]) .tabbrowser-tab[multiselected] .tab-background::before, - :root:not([customizing="true"]) .tabbrowser-tab[multiselected] .tab-background::after { - fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); - } - :root:not([customizing="true"]) - .tabbrowser-tab:hover:not([visuallyselected], [multiselected]) - .tab-background::before, - :root:not([customizing="true"]) - .tabbrowser-tab:hover:not([visuallyselected], [multiselected]) - .tab-background::after { - fill: color-mix(in srgb, currentColor 11%, transparent); - } - @supports -moz-bool-pref("userChrome.tab.multi_selected") { - :root:not([customizing="true"]) .tabbrowser-tab[multiselected]:not([visuallyselected]) .tab-background::before, - :root:not([customizing="true"]) .tabbrowser-tab[multiselected]:not([visuallyselected]) .tab-background::after { - fill: color-mix(in srgb, currentColor 65%, transparent); - opacity: 0.3; + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-bool-pref( + "userChrome.tab.bottom_rounded_corner.australis" + ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") { + #tabbrowser-tabs { + --uc-tab-corner-size: var(--tab-min-height); + } } - } - :root:not([customizing="true"])::is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) - #TabsToolbar[brighttext] - #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab[visuallyselected] - .tab-background:-moz-lwtheme::before, - :root:not([customizing="true"])::is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) - #TabsToolbar[brighttext] - #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab[visuallyselected] - .tab-background:-moz-lwtheme::after { - /* As Selected Tab - Box Shadow */ - stroke: var(--toolbar-color); - } - @media (-moz-gtk-csd-available) { - :root:not([customizing="true"]) { - /* Fill color for GTK */ + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") { + #tabbrowser-tabs { + --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-wave.svg"); + --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-wave.svg"); + --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-wave-clipped.svg"); + --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-wave-clipped.svg"); + } } - :root:not([customizing="true"]):not([lwtheme="true"]) - .tabbrowser-tab:is([visuallyselected], [multiselected]) - .tab-background::before, - :root:not([customizing="true"]):not([lwtheme="true"]) - .tabbrowser-tab:is([visuallyselected], [multiselected]) - .tab-background::after { - /* As GTK Toolbar's background-color + background-image - * --toolbar-non-lwt-bgcolor: -moz-dialog; - * --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15)); - */ - fill: color-mix(in srgb, white 15%, -moz-dialog); + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.australis") { + #tabbrowser-tabs { + --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-australis.svg"); + --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-australis.svg"); + --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-australis-clipped.svg"); + --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-australis-cilpped.svg"); + } + } + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome") { + #tabbrowser-tabs { + --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-chrome.svg"); + --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-chrome.svg"); + --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chrome-clipped.svg"); + --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-chrome-clipped.svg"); + } + } + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") { + #tabbrowser-tabs { + --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-chromeLegacy.svg"); + --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-chromeLegacy.svg"); + --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chromeLegacy-clipped.svg"); + --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-chromeLegacy-clipped.svg"); + } + } + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { + #tabbrowser-tabs { + --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-edge.svg"); + --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-edge.svg"); + --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-edge-clipped.svg"); + --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-edge-clipped.svg"); + } + } + + .tabbrowser-tab { + padding-inline: 0 !important; + overflow-clip-margin: var(--uc-tab-corner-half-size) !important; + } + .tabbrowser-tab .tab-background { + --tab-border-radius: 0px; + margin-inline: var(--uc-tab-corner-half-size) !important; + } + .tabbrowser-tab .tab-background::before, + .tabbrowser-tab .tab-background::after { + /* Box */ + display: block; + position: absolute; + z-index: -1; + bottom: 0; + /* Shape */ + width: var(--uc-tab-corner-size); + height: var(--uc-tab-corner-height); + /* Color */ + fill: transparent; stroke: transparent; - opacity: 1; + -moz-context-properties: fill, stroke; + /* Image */ + background-size: var(--uc-tab-corner-size) var(--uc-tab-corner-height); + background-repeat: no-repeat; + background-position-y: bottom; } - :root:not([customizing="true"]):not([lwtheme="true"]) + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") { + .tabbrowser-tab .tab-background::before, + .tabbrowser-tab .tab-background::after { + content: ""; + } + } + @supports not -moz-bool-pref("userChrome.tab.color_like_toolbar") { + .tabbrowser-tab .tab-background::before, + .tabbrowser-tab .tab-background::after { + /* Based on tab background + background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none); + + defaults + background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); + background-image: var(--tab-selected-bgimage, var(--toolbar-bgimage)); + */ + fill: var(--lwt-selected-tab-background-color, var(--tab-selected-bgcolor, var(--toolbar-bgcolor))) !important; + } + } + .tabbrowser-tab .tab-background::before { + right: calc(100% - var(--uc-tab-corner-margin)); + background-image: var(--uc-tab-corner-left-side-svg); + } + .tabbrowser-tab .tab-background::after { + left: calc(100% - var(--uc-tab-corner-margin)); + background-image: var(--uc-tab-corner-right-side-svg); + } + .tabbrowser-tab[beforeselected-visible] .tab-background::after { + background-image: var(--uc-tab-corner-right-side-svg-clipped); + } + .tabbrowser-tab[visuallyselected] + .tabbrowser-tab .tab-background::before { + background-image: var(--uc-tab-corner-left-side-svg-clipped); + } + .tabbrowser-tab[positionpinnedtabs] .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before { + background-image: var(--uc-tab-corner-left-side-svg) !important; + } + .tabbrowser-tab[visuallyselected] .tab-background::before, + .tabbrowser-tab[visuallyselected] .tab-background::after { + fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); + stroke: var(--tab-line-color, var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9)))); + } + @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") { + .tabbrowser-tab[visuallyselected] .tab-background::before, + .tabbrowser-tab[visuallyselected] .tab-background::after { + content: ""; + } + } + .tabbrowser-tab[multiselected] .tab-background::before, + .tabbrowser-tab[multiselected] .tab-background::after { + fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); + } + .tabbrowser-tab:hover:not([visuallyselected], [multiselected]) .tab-background::before, + .tabbrowser-tab:hover:not([visuallyselected], [multiselected]) .tab-background::after { + fill: color-mix(in srgb, currentColor 11%, transparent); + } + + @supports -moz-bool-pref("userChrome.tab.multi_selected") { + .tabbrowser-tab[multiselected]:not([visuallyselected]) .tab-background::before, + .tabbrowser-tab[multiselected]:not([visuallyselected]) .tab-background::after { + fill: var(--uc-multiselected-tab-bgcolor); + } + } + :root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) #TabsToolbar[brighttext] + #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected] - .tab-background::before, - :root:not([customizing="true"]):not([lwtheme="true"]) + .tab-background:-moz-lwtheme::before, + :root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) #TabsToolbar[brighttext] + #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected] - .tab-background::after { - stroke: transparent; + .tab-background:-moz-lwtheme::after { + /* As Selected Tab - Box Shadow */ + stroke: var(--toolbar-color); + } + @media (-moz-gtk-csd-available) { + :root { + /* Fill color for GTK */ + } + :root:not([lwtheme="true"]) .tabbrowser-tab[visuallyselected] .tab-background::before, + :root:not([lwtheme="true"]) .tabbrowser-tab[visuallyselected] .tab-background::after { + /* As GTK Toolbar's background-color + background-image + * --toolbar-non-lwt-bgcolor: -moz-dialog; + * --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15)); + */ + stroke: transparent; + fill: rgba(255, 255, 255, 0.075); + } + @supports not -moz-bool-pref("userChrome.tab.color_like_toolbar") { + :root:not([lwtheme="true"]) .tabbrowser-tab[visuallyselected] .tab-background::before, + :root:not([lwtheme="true"]) .tabbrowser-tab[visuallyselected] .tab-background::after { + fill: rgba(255, 255, 255, 0.15); + } + } + :root:not([lwtheme="true"]) #TabsToolbar[brighttext] .tabbrowser-tab[selected] .tab-background::before, + :root:not([lwtheme="true"]) #TabsToolbar[brighttext] .tabbrowser-tab[selected] .tab-background::after { + stroke: transparent; + } + } + + #tabbrowser-tabs[positionpinnedtabs], + #tabbrowser-tabs:not([overflow]) .tabbrowser-tab[first-visible-tab], + #tabbrowser-tabs[overflow] .tabbrowser-tab[first-visible-unpinned-tab] { + margin-left: var(--uc-tab-corner-half-size) !important; + } + + .tabbrowser-tab[last-visible-tab] { + margin-right: vart(--uc-tab-corner-half-size) !important; } } } diff --git a/icons/tab-bottom-corner-left-australis.svg b/icons/tab-bottom-corner-left-australis.svg index 395ba72..a16786b 100644 --- a/icons/tab-bottom-corner-left-australis.svg +++ b/icons/tab-bottom-corner-left-australis.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/icons/tab-bottom-corner-left-chrome.svg b/icons/tab-bottom-corner-left-chrome.svg index e627789..12bbdf4 100644 --- a/icons/tab-bottom-corner-left-chrome.svg +++ b/icons/tab-bottom-corner-left-chrome.svg @@ -1 +1,3 @@ - + + + diff --git a/icons/tab-bottom-corner-left-chromeLegacy.svg b/icons/tab-bottom-corner-left-chromeLegacy.svg index d2e61df..01fd923 100644 --- a/icons/tab-bottom-corner-left-chromeLegacy.svg +++ b/icons/tab-bottom-corner-left-chromeLegacy.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/icons/tab-bottom-corner-left-edge.svg b/icons/tab-bottom-corner-left-edge.svg index e771b3c..c99d2d7 100644 --- a/icons/tab-bottom-corner-left-edge.svg +++ b/icons/tab-bottom-corner-left-edge.svg @@ -1 +1,3 @@ - + + + diff --git a/icons/tab-bottom-corner-left-wave.svg b/icons/tab-bottom-corner-left-wave.svg index b49157d..467efa9 100644 --- a/icons/tab-bottom-corner-left-wave.svg +++ b/icons/tab-bottom-corner-left-wave.svg @@ -1 +1,3 @@ - + + + diff --git a/icons/tab-bottom-corner-right-australis.svg b/icons/tab-bottom-corner-right-australis.svg index 8e83aac..367d660 100644 --- a/icons/tab-bottom-corner-right-australis.svg +++ b/icons/tab-bottom-corner-right-australis.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/icons/tab-bottom-corner-right-chrome.svg b/icons/tab-bottom-corner-right-chrome.svg index 8b32862..1a6b3ba 100644 --- a/icons/tab-bottom-corner-right-chrome.svg +++ b/icons/tab-bottom-corner-right-chrome.svg @@ -1 +1,3 @@ - + + + diff --git a/icons/tab-bottom-corner-right-chromeLegacy.svg b/icons/tab-bottom-corner-right-chromeLegacy.svg index 656b743..e4c0688 100644 --- a/icons/tab-bottom-corner-right-chromeLegacy.svg +++ b/icons/tab-bottom-corner-right-chromeLegacy.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/icons/tab-bottom-corner-right-edge.svg b/icons/tab-bottom-corner-right-edge.svg index e9f3fc2..90d37e0 100644 --- a/icons/tab-bottom-corner-right-edge.svg +++ b/icons/tab-bottom-corner-right-edge.svg @@ -1 +1,3 @@ - + + + diff --git a/icons/tab-bottom-corner-right-wave.svg b/icons/tab-bottom-corner-right-wave.svg index f4b81db..ccf0cbd 100644 --- a/icons/tab-bottom-corner-right-wave.svg +++ b/icons/tab-bottom-corner-right-wave.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/src/tab/_selected_tab.scss b/src/tab/_selected_tab.scss index 8ef7dd8..86403cb 100644 --- a/src/tab/_selected_tab.scss +++ b/src/tab/_selected_tab.scss @@ -15,7 +15,26 @@ /*= Selected Tab - Bottom Rounded Corner =====================================*/ @include Option("userChrome.tab.bottom_rounded_corner") { - @import "selected_tab/bottom_rounded_corner"; + @include NotOption("userChrome.tab.bottom_rounded_corner.wave") { + @include NotOption("userChrome.tab.bottom_rounded_corner.australis") { + @include NotOption("userChrome.tab.bottom_rounded_corner.chrome") { + @include NotOption("userChrome.tab.bottom_rounded_corner.chrome_legacy") { + @include NotOption("userChrome.tab.bottom_rounded_corner.edge") { + @import "selected_tab/bottom_rounded_corner"; + } + } + } + } + } + @include Option( + "userChrome.tab.bottom_rounded_corner.wave", + "userChrome.tab.bottom_rounded_corner.australis", + "userChrome.tab.bottom_rounded_corner.chrome_legacy", + "userChrome.tab.bottom_rounded_corner.chrome", + "userChrome.tab.bottom_rounded_corner.edge" + ) { + @import "selected_tab/bottom_rounded_corner_others"; + } } /*= Selected Tab - Photon like contextline ===================================*/ diff --git a/src/tab/selected_tab/_bottom_rounded_corner_others.scss b/src/tab/selected_tab/_bottom_rounded_corner_others.scss new file mode 100644 index 0000000..edfc2fa --- /dev/null +++ b/src/tab/selected_tab/_bottom_rounded_corner_others.scss @@ -0,0 +1,196 @@ +#tabbrowser-tabs { + --uc-tab-corner-size: calc(var(--tab-min-height) / 2); + --uc-tab-corner-half-size: calc(var(--uc-tab-corner-size) / 2); + --uc-tab-corner-margin: calc(var(--uc-tab-corner-half-size) + 1px); + --uc-tab-corner-height: calc(var(--tab-min-height) - var(--tab-block-margin) + 1px); + + @include Option( + "userChrome.tab.bottom_rounded_corner.wave", + "userChrome.tab.bottom_rounded_corner.australis", + "userChrome.tab.bottom_rounded_corner.chrome_legacy" + ) { + --uc-tab-corner-size: var(--tab-min-height); + } + + @include Option("userChrome.tab.bottom_rounded_corner.wave") { + --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-wave.svg"); + --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-wave.svg"); + --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-wave-clipped.svg"); + --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-wave-clipped.svg"); + } + @include Option("userChrome.tab.bottom_rounded_corner.australis") { + --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-australis.svg"); + --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-australis.svg"); + --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-australis-clipped.svg"); + --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-australis-cilpped.svg"); + } + @include Option("userChrome.tab.bottom_rounded_corner.chrome") { + --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-chrome.svg"); + --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-chrome.svg"); + --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chrome-clipped.svg"); + --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-chrome-clipped.svg"); + } + @include Option("userChrome.tab.bottom_rounded_corner.chrome_legacy") { + --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-chromeLegacy.svg"); + --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-chromeLegacy.svg"); + --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chromeLegacy-clipped.svg"); + --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-chromeLegacy-clipped.svg"); + } + @include Option("userChrome.tab.bottom_rounded_corner.edge") { + --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-edge.svg"); + --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-edge.svg"); + --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-edge-clipped.svg"); + --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-edge-clipped.svg"); + } +} + +.tabbrowser-tab { + padding-inline: 0 !important; + overflow-clip-margin: var(--uc-tab-corner-half-size) !important; + + .tab-background { + --tab-border-radius: 0px; + margin-inline: var(--uc-tab-corner-half-size) !important; + + &::before, + &::after { + /* Box */ + display: block; + position: absolute; + z-index: -1; + bottom: 0; + + /* Shape */ + width: var(--uc-tab-corner-size); + height: var(--uc-tab-corner-height); + + /* Color */ + fill: transparent; + stroke: transparent; + -moz-context-properties: fill, stroke; + // For stroke + // box-shadow: 0 0 4px rgba(0,0,0,.4); + // box-shadow: 0 0 1px var(--toolbar-color) !important; + // box-shadow: 0 0 1px var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))) !important + + /* Image */ + // background-size: var(--tab-corner-rounding); + background-size: var(--uc-tab-corner-size) var(--uc-tab-corner-height); + background-repeat: no-repeat; + background-position-y: bottom; + + @include Option("userChrome.tab.bottom_rounded_corner.all") { + content: ""; + } + @include NotOption("userChrome.tab.color_like_toolbar") { + /* Based on tab background + background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none); + + defaults + background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); + background-image: var(--tab-selected-bgimage, var(--toolbar-bgimage)); + */ + fill: var(--lwt-selected-tab-background-color, var(--tab-selected-bgcolor, var(--toolbar-bgcolor))) !important; + } + } + + &::before { + right: calc(100% - var(--uc-tab-corner-margin)); + background-image: var(--uc-tab-corner-left-side-svg); + } + &::after { + left: calc(100% - var(--uc-tab-corner-margin)); + background-image: var(--uc-tab-corner-right-side-svg); + } + } + &[beforeselected-visible] .tab-background::after { + background-image: var(--uc-tab-corner-right-side-svg-clipped); + } + &[visuallyselected] + .tabbrowser-tab .tab-background::before { + background-image: var(--uc-tab-corner-left-side-svg-clipped); + } + &[positionpinnedtabs] .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before { + background-image: var(--uc-tab-corner-left-side-svg) !important; + } + + &[visuallyselected] .tab-background { + &::before, + &::after { + @include NotOption("userChrome.tab.bottom_rounded_corner.all") { + content: ""; + } + + fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); + stroke: var( + --tab-line-color, var(--lwt-tab-line-color, + var(--tabs-border-color, rgba(128, 128, 142, 0.9))) + ); + } + } + &[multiselected] .tab-background { + &::before, + &::after { + fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); + } + } + &:hover:not([visuallyselected], [multiselected]) .tab-background { + &::before, + &::after { + fill: color-mix(in srgb, currentColor 11%, transparent); + } + } +} +@include Option("userChrome.tab.multi_selected") { + .tabbrowser-tab[multiselected]:not([visuallyselected]) .tab-background { + &::before, + &::after { + fill: var(--uc-multiselected-tab-bgcolor); + } + } +} +:root { + &:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) + #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected] .tab-background:-moz-lwtheme { + &::before, + &::after { + /* As Selected Tab - Box Shadow */ + stroke: var(--toolbar-color); + } + } + @include OS($linux) { + /* Fill color for GTK */ + &:not([lwtheme="true"]) { + .tabbrowser-tab[visuallyselected] .tab-background { + &::before, + &::after { + /* As GTK Toolbar's background-color + background-image + * --toolbar-non-lwt-bgcolor: -moz-dialog; + * --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15)); + */ + stroke: transparent; + fill: rgba(255, 255, 255, .075); + @include NotOption("userChrome.tab.color_like_toolbar") { + fill: rgba(255, 255, 255, .15); + } + } + } + #TabsToolbar[brighttext] .tabbrowser-tab[selected] .tab-background { + &::before, + &::after { + stroke: transparent; + } + } + } + } +} + +#tabbrowser-tabs { + &[positionpinnedtabs], + &:not([overflow]) .tabbrowser-tab[first-visible-tab], + &[overflow] .tabbrowser-tab[first-visible-unpinned-tab] { + margin-left: var(--uc-tab-corner-half-size) !important; + } +} +.tabbrowser-tab[last-visible-tab] { + margin-right: vart(--uc-tab-corner-half-size) !important; +} diff --git a/src/tab/selected_tab/_box_shadow.scss b/src/tab/selected_tab/_box_shadow.scss index 1c29fc7..8c511ec 100644 --- a/src/tab/selected_tab/_box_shadow.scss +++ b/src/tab/selected_tab/_box_shadow.scss @@ -1,3 +1,21 @@ +.tab-background { + --uc-tab-background-shadow-soft: 0 0 1px; + --uc-tab-background-shadow-hard: 0 0 0 1px; + + @include Option("userChrome.tab.bottom_rounded_corner") { + @include Option( + "userChrome.tab.bottom_rounded_corner.wave", + "userChrome.tab.bottom_rounded_corner.australis", + "userChrome.tab.bottom_rounded_corner.chrome_legacy", + "userChrome.tab.bottom_rounded_corner.chrome", + "userChrome.tab.bottom_rounded_corner.edge" + ) { + --uc-tab-background-shadow-soft: 0 -1px 0; + --uc-tab-background-shadow-hard: 0 -1px 0; + } + } +} + #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected="true"]:not(:focus) @@ -5,14 +23,14 @@ > .tab-background:-moz-lwtheme { /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)) Bright: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */ - box-shadow: 0 0 1px var(--toolbar-color) !important; + box-shadow: var(--uc-tab-background-shadow-soft) var(--toolbar-color) !important; } #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[multiselected]:not([visuallyselected]) > .tab-stack > .tab-background:-moz-lwtheme { - box-shadow: 0 0 1px color-mix(in srgb, var(--toolbar-color) 80%, transparent) !important; + box-shadow: var(--uc-tab-background-shadow-soft) color-mix(in srgb, var(--toolbar-color) 80%, transparent) !important; } /* Consider 0 0 4px rgba(128,128,142,0.9) -> 0 0 4px rgba(0,0,0,.4) new default */ @@ -21,7 +39,7 @@ .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background { - box-shadow: 0 0 1px var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))), + box-shadow: var(--uc-tab-background-shadow-soft) var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))), 0 0 4px rgba(128, 128, 142, 0.5) !important; } @@ -30,7 +48,7 @@ .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background:-moz-lwtheme { - box-shadow: 0 0 1px var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))) !important; + box-shadow: var(--uc-tab-background-shadow-soft) var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))) !important; } /* For themes outside of Light and Dark (which are curated by Mozilla), show a thicker border @@ -41,7 +59,7 @@ .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background:-moz-lwtheme { - box-shadow: 0 0 0 1px + box-shadow: var(--uc-tab-background-shadow-hard) var(--tab-line-color, var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9)))), 0 0 4px rgba(128, 128, 142, 0.5) !important; } @@ -52,6 +70,6 @@ .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background:-moz-lwtheme { - box-shadow: 0 0 0 1px + box-shadow: var(--uc-tab-background-shadow-hard) var(--tab-line-color, var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9)))) !important; } diff --git a/src/tab/selected_tab/_multi_selected.scss b/src/tab/selected_tab/_multi_selected.scss index 12c93c4..225d5c3 100644 --- a/src/tab/selected_tab/_multi_selected.scss +++ b/src/tab/selected_tab/_multi_selected.scss @@ -1,22 +1,37 @@ - #tabbrowser-tabs:not([movingtab]) +#TabsToolbar { + --uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 28%, var(--toolbar-bgcolor, transparent)); + + &[brighttext] { + --uc-multiselected-tab-bgcolor: color-mix(in srgb, currentColor 16%, var(--toolbar-bgcolor, transparent)); + } +} + +#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack - > .tab-background[multiselected]:not([selected]):-moz-lwtheme { - background-image: linear-gradient(var(--toolbar-bgcolor, transparent), var(--toolbar-bgcolor, transparent)), - linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important; -} + > .tab-background[multiselected]:not([selected]) { + /* Original: + background-attachment: scroll, scroll, fixed; + background-color: transparent; + background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), + linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), + var(--lwt-header-image, none); + background-position: 0 0, 0 0, right top; + background-repeat: repeat-x, repeat-x, no-repeat; + background-size: auto 100%, auto 100%, auto auto; + */ + // background-image: linear-gradient(var(--toolbar-bgcolor, transparent), var(--toolbar-bgcolor, transparent)), + // linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important; -.tab-background[multiselected="true"]:not([selected="true"]) > .tab-loading-burst:not([bursting]) { - background: color-mix(in srgb, currentColor 65%, transparent); - opacity: 0.3; + background-attachment: scroll, fixed !important; + background-color: transparent !important; + background-image: linear-gradient(var(--uc-multiselected-tab-bgcolor), var(--uc-multiselected-tab-bgcolor)), + var(--lwt-header-image, none) !important; + background-position: 0 0, right top !important; + background-repeat: repeat-x, no-repeat !important; + background-size: auto 100%, auto auto !important; } -#TabsToolbar[brighttext] - .tab-background[multiselected="true"]:not([selected="true"]) - > .tab-loading-burst:not([bursting]) { - opacity: 0.15; -} - @include Option("userChrome.tab.connect_to_window") { .tab-background[multiselected=true] { From 2efbd4601f0138365eb2ee9d9577ee482a97b99f Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 27 Oct 2022 13:29:41 +0900 Subject: [PATCH 29/88] Fix: Bottom Rounded Corner - Box shadow --- css/leptonChrome.css | 96 ++++++++++++++----- .../tab-bottom-corner-left-australis-soft.svg | 3 + icons/tab-bottom-corner-left-chrome-soft.svg | 3 + ...b-bottom-corner-left-chromeLegacy-soft.svg | 3 + icons/tab-bottom-corner-left-edge-soft.svg | 3 + icons/tab-bottom-corner-left-wave-soft.svg | 3 + ...tab-bottom-corner-right-australis-soft.svg | 3 + icons/tab-bottom-corner-right-chrome-soft.svg | 3 + ...-bottom-corner-right-chromeLegacy-soft.svg | 3 + icons/tab-bottom-corner-right-edge-soft.svg | 3 + icons/tab-bottom-corner-right-wave-soft.svg | 3 + .../_bottom_rounded_corner_others.scss | 95 +++++++++++++----- src/tab/selected_tab/_box_shadow.scss | 2 +- 13 files changed, 175 insertions(+), 48 deletions(-) create mode 100644 icons/tab-bottom-corner-left-australis-soft.svg create mode 100644 icons/tab-bottom-corner-left-chrome-soft.svg create mode 100644 icons/tab-bottom-corner-left-chromeLegacy-soft.svg create mode 100644 icons/tab-bottom-corner-left-edge-soft.svg create mode 100644 icons/tab-bottom-corner-left-wave-soft.svg create mode 100644 icons/tab-bottom-corner-right-australis-soft.svg create mode 100644 icons/tab-bottom-corner-right-chrome-soft.svg create mode 100644 icons/tab-bottom-corner-right-chromeLegacy-soft.svg create mode 100644 icons/tab-bottom-corner-right-edge-soft.svg create mode 100644 icons/tab-bottom-corner-right-wave-soft.svg diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 540ee70..9c2fcf3 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6426,7 +6426,7 @@ "userChrome.tab.bottom_rounded_corner.chrome" ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { .tab-background { - --uc-tab-background-shadow-soft: 0 -1px 0; + --uc-tab-background-shadow-soft: 0 -1px 1px -1px; --uc-tab-background-shadow-hard: 0 -1px 0; } } @@ -6643,56 +6643,63 @@ "userChrome.tab.bottom_rounded_corner.chrome" ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { #tabbrowser-tabs { - --uc-tab-corner-size: calc(var(--tab-min-height) / 2); --uc-tab-corner-half-size: calc(var(--uc-tab-corner-size) / 2); - --uc-tab-corner-margin: calc(var(--uc-tab-corner-half-size) + 1px); + --uc-tab-corner-half-size-reverse: calc(var(--uc-tab-corner-half-size) * -1); --uc-tab-corner-height: calc(var(--tab-min-height) - var(--tab-block-margin) + 1px); } - @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-bool-pref( - "userChrome.tab.bottom_rounded_corner.australis" - ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") { - #tabbrowser-tabs { - --uc-tab-corner-size: var(--tab-min-height); - } - } @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") { #tabbrowser-tabs { --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-wave.svg"); --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-wave.svg"); + --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-wave-soft.svg"); + --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-wave-soft.svg"); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-wave-clipped.svg"); --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-wave-clipped.svg"); + --uc-tab-corner-size: 30px; } } @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.australis") { #tabbrowser-tabs { --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-australis.svg"); --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-australis.svg"); + --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-australis-soft.svg"); + --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-australis-soft.svg"); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-australis-clipped.svg"); --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-australis-cilpped.svg"); + --uc-tab-corner-size: 30px; } } @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome") { #tabbrowser-tabs { --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-chrome.svg"); --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-chrome.svg"); + --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-chrome-soft.svg"); + --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-chrome-soft.svg"); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chrome-clipped.svg"); --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-chrome-clipped.svg"); + --uc-tab-corner-size: 16px; } } @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") { #tabbrowser-tabs { --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-chromeLegacy.svg"); --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-chromeLegacy.svg"); + --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-chromeLegacy-soft.svg"); + --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-chromeLegacy-soft.svg"); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chromeLegacy-clipped.svg"); --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-chromeLegacy-clipped.svg"); + --uc-tab-corner-size: 35px; } } @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { #tabbrowser-tabs { --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-edge.svg"); --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-edge.svg"); + --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-edge-soft.svg"); + --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-edge-soft.svg"); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-edge-clipped.svg"); --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-edge-clipped.svg"); + --uc-tab-corner-size: 16px; } } @@ -6701,8 +6708,30 @@ overflow-clip-margin: var(--uc-tab-corner-half-size) !important; } .tabbrowser-tab .tab-background { - --tab-border-radius: 0px; - margin-inline: var(--uc-tab-corner-half-size) !important; + padding-inline: var(--uc-tab-corner-half-size) !important; + background-clip: content-box; + } + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") { + .tabbrowser-tab .tab-background { + --tab-border-radius: 12.5px; + } + } + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.australis") { + .tabbrowser-tab .tab-background { + --tab-border-radius: 12.5px; + } + } + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome") { + .tabbrowser-tab .tab-background { + --tab-border-radius: 6px; + } + } + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") { + .tabbrowser-tab .tab-background { + --tab-border-radius: 0px; + } + } + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { } .tabbrowser-tab .tab-background::before, .tabbrowser-tab .tab-background::after { @@ -6719,7 +6748,7 @@ stroke: transparent; -moz-context-properties: fill, stroke; /* Image */ - background-size: var(--uc-tab-corner-size) var(--uc-tab-corner-height); + background-size: cover; background-repeat: no-repeat; background-position-y: bottom; } @@ -6743,11 +6772,11 @@ } } .tabbrowser-tab .tab-background::before { - right: calc(100% - var(--uc-tab-corner-margin)); + left: var(--uc-tab-corner-half-size-reverse); background-image: var(--uc-tab-corner-left-side-svg); } .tabbrowser-tab .tab-background::after { - left: calc(100% - var(--uc-tab-corner-margin)); + right: var(--uc-tab-corner-half-size-reverse); background-image: var(--uc-tab-corner-right-side-svg); } .tabbrowser-tab[beforeselected-visible] .tab-background::after { @@ -6759,10 +6788,8 @@ .tabbrowser-tab[positionpinnedtabs] .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before { background-image: var(--uc-tab-corner-left-side-svg) !important; } - .tabbrowser-tab[visuallyselected] .tab-background::before, - .tabbrowser-tab[visuallyselected] .tab-background::after { - fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); - stroke: var(--tab-line-color, var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9)))); + .tabbrowser-tab[visuallyselected] .tab-background { + background-clip: border-box; } @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") { .tabbrowser-tab[visuallyselected] .tab-background::before, @@ -6770,10 +6797,20 @@ content: ""; } } + .tabbrowser-tab[visuallyselected] .tab-background::before, + .tabbrowser-tab[visuallyselected] .tab-background::after, .tabbrowser-tab[multiselected] .tab-background::before, .tabbrowser-tab[multiselected] .tab-background::after { fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); } + @supports -moz-bool-pref("userChrome.tab.box_shadow") { + .tabbrowser-tab[visuallyselected] .tab-background::before, + .tabbrowser-tab[visuallyselected] .tab-background::after, + .tabbrowser-tab[multiselected] .tab-background::before, + .tabbrowser-tab[multiselected] .tab-background::after { + stroke: var(--tab-line-color, var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9)))); + } + } .tabbrowser-tab:hover:not([visuallyselected], [multiselected]) .tab-background::before, .tabbrowser-tab:hover:not([visuallyselected], [multiselected]) .tab-background::after { fill: color-mix(in srgb, currentColor 11%, transparent); @@ -6798,17 +6835,30 @@ /* As Selected Tab - Box Shadow */ stroke: var(--toolbar-color); } + @supports -moz-bool-pref("userChrome.tab.box_shadow") { + :root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) + #TabsToolbar[brighttext] + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab[visuallyselected] + .tab-background:-moz-lwtheme { + --uc-tab-corner-left-side-svg: var(--uc-tab-corner-left-side-svg-soft); + --uc-tab-corner-right-side-svg: var(--uc-tab-corner-right-side-svg-soft); + } + } @media (-moz-gtk-csd-available) { :root { /* Fill color for GTK */ } + :root:not([lwtheme="true"]) .tabbrowser-tab[visuallyselected] .tab-background { + background-clip: content-box; + background-color: unset !important; + } :root:not([lwtheme="true"]) .tabbrowser-tab[visuallyselected] .tab-background::before, :root:not([lwtheme="true"]) .tabbrowser-tab[visuallyselected] .tab-background::after { /* As GTK Toolbar's background-color + background-image * --toolbar-non-lwt-bgcolor: -moz-dialog; * --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15)); */ - stroke: transparent; fill: rgba(255, 255, 255, 0.075); } @supports not -moz-bool-pref("userChrome.tab.color_like_toolbar") { @@ -6817,8 +6867,10 @@ fill: rgba(255, 255, 255, 0.15); } } - :root:not([lwtheme="true"]) #TabsToolbar[brighttext] .tabbrowser-tab[selected] .tab-background::before, - :root:not([lwtheme="true"]) #TabsToolbar[brighttext] .tabbrowser-tab[selected] .tab-background::after { + :root:not([lwtheme="true"]) .tabbrowser-tab[multiselected] .tab-background::before, + :root:not([lwtheme="true"]) .tabbrowser-tab[multiselected] .tab-background::after, + :root:not([lwtheme="true"]) .tabbrowser-tab[visuallyselected] .tab-background::before, + :root:not([lwtheme="true"]) .tabbrowser-tab[visuallyselected] .tab-background::after { stroke: transparent; } } diff --git a/icons/tab-bottom-corner-left-australis-soft.svg b/icons/tab-bottom-corner-left-australis-soft.svg new file mode 100644 index 0000000..c50ba8b --- /dev/null +++ b/icons/tab-bottom-corner-left-australis-soft.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/tab-bottom-corner-left-chrome-soft.svg b/icons/tab-bottom-corner-left-chrome-soft.svg new file mode 100644 index 0000000..96dcac8 --- /dev/null +++ b/icons/tab-bottom-corner-left-chrome-soft.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/tab-bottom-corner-left-chromeLegacy-soft.svg b/icons/tab-bottom-corner-left-chromeLegacy-soft.svg new file mode 100644 index 0000000..4c0ca25 --- /dev/null +++ b/icons/tab-bottom-corner-left-chromeLegacy-soft.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/tab-bottom-corner-left-edge-soft.svg b/icons/tab-bottom-corner-left-edge-soft.svg new file mode 100644 index 0000000..2e14868 --- /dev/null +++ b/icons/tab-bottom-corner-left-edge-soft.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/tab-bottom-corner-left-wave-soft.svg b/icons/tab-bottom-corner-left-wave-soft.svg new file mode 100644 index 0000000..c3de938 --- /dev/null +++ b/icons/tab-bottom-corner-left-wave-soft.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/tab-bottom-corner-right-australis-soft.svg b/icons/tab-bottom-corner-right-australis-soft.svg new file mode 100644 index 0000000..8bb5c2f --- /dev/null +++ b/icons/tab-bottom-corner-right-australis-soft.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/tab-bottom-corner-right-chrome-soft.svg b/icons/tab-bottom-corner-right-chrome-soft.svg new file mode 100644 index 0000000..28cb86b --- /dev/null +++ b/icons/tab-bottom-corner-right-chrome-soft.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/tab-bottom-corner-right-chromeLegacy-soft.svg b/icons/tab-bottom-corner-right-chromeLegacy-soft.svg new file mode 100644 index 0000000..65b6e61 --- /dev/null +++ b/icons/tab-bottom-corner-right-chromeLegacy-soft.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/tab-bottom-corner-right-edge-soft.svg b/icons/tab-bottom-corner-right-edge-soft.svg new file mode 100644 index 0000000..991fe92 --- /dev/null +++ b/icons/tab-bottom-corner-right-edge-soft.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/tab-bottom-corner-right-wave-soft.svg b/icons/tab-bottom-corner-right-wave-soft.svg new file mode 100644 index 0000000..0f56bc9 --- /dev/null +++ b/icons/tab-bottom-corner-right-wave-soft.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/tab/selected_tab/_bottom_rounded_corner_others.scss b/src/tab/selected_tab/_bottom_rounded_corner_others.scss index edfc2fa..b8c7c19 100644 --- a/src/tab/selected_tab/_bottom_rounded_corner_others.scss +++ b/src/tab/selected_tab/_bottom_rounded_corner_others.scss @@ -1,46 +1,57 @@ #tabbrowser-tabs { - --uc-tab-corner-size: calc(var(--tab-min-height) / 2); --uc-tab-corner-half-size: calc(var(--uc-tab-corner-size) / 2); - --uc-tab-corner-margin: calc(var(--uc-tab-corner-half-size) + 1px); + --uc-tab-corner-half-size-reverse: calc(var(--uc-tab-corner-half-size) * -1); --uc-tab-corner-height: calc(var(--tab-min-height) - var(--tab-block-margin) + 1px); - @include Option( - "userChrome.tab.bottom_rounded_corner.wave", - "userChrome.tab.bottom_rounded_corner.australis", - "userChrome.tab.bottom_rounded_corner.chrome_legacy" - ) { - --uc-tab-corner-size: var(--tab-min-height); - } - @include Option("userChrome.tab.bottom_rounded_corner.wave") { --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-wave.svg"); --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-wave.svg"); + --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-wave-soft.svg"); + --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-wave-soft.svg"); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-wave-clipped.svg"); --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-wave-clipped.svg"); + + --uc-tab-corner-size: 30px; } @include Option("userChrome.tab.bottom_rounded_corner.australis") { --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-australis.svg"); --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-australis.svg"); + --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-australis-soft.svg"); + --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-australis-soft.svg"); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-australis-clipped.svg"); --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-australis-cilpped.svg"); + + --uc-tab-corner-size: 30px; } @include Option("userChrome.tab.bottom_rounded_corner.chrome") { --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-chrome.svg"); --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-chrome.svg"); + --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-chrome-soft.svg"); + --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-chrome-soft.svg"); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chrome-clipped.svg"); --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-chrome-clipped.svg"); + + --uc-tab-corner-size: 16px; // 18px; } @include Option("userChrome.tab.bottom_rounded_corner.chrome_legacy") { --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-chromeLegacy.svg"); --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-chromeLegacy.svg"); + --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-chromeLegacy-soft.svg"); + --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-chromeLegacy-soft.svg"); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chromeLegacy-clipped.svg"); --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-chromeLegacy-clipped.svg"); + + --uc-tab-corner-size: 35px; } @include Option("userChrome.tab.bottom_rounded_corner.edge") { --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-edge.svg"); --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-edge.svg"); + --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-edge-soft.svg"); + --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-edge-soft.svg"); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-edge-clipped.svg"); --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-edge-clipped.svg"); + + --uc-tab-corner-size: 16px; } } @@ -49,8 +60,24 @@ overflow-clip-margin: var(--uc-tab-corner-half-size) !important; .tab-background { - --tab-border-radius: 0px; - margin-inline: var(--uc-tab-corner-half-size) !important; + // --tab-border-radius: 0px; + padding-inline: var(--uc-tab-corner-half-size) !important; + background-clip: content-box; + + @include Option("userChrome.tab.bottom_rounded_corner.wave") { + --tab-border-radius: 12.5px; + } + @include Option("userChrome.tab.bottom_rounded_corner.australis") { + --tab-border-radius: 12.5px; + } + @include Option("userChrome.tab.bottom_rounded_corner.chrome") { + --tab-border-radius: 6px; + } + @include Option("userChrome.tab.bottom_rounded_corner.chrome_legacy") { + --tab-border-radius: 0px; + } + @include Option("userChrome.tab.bottom_rounded_corner.edge") { + } &::before, &::after { @@ -75,7 +102,7 @@ /* Image */ // background-size: var(--tab-corner-rounding); - background-size: var(--uc-tab-corner-size) var(--uc-tab-corner-height); + background-size: cover; background-repeat: no-repeat; background-position-y: bottom; @@ -95,11 +122,11 @@ } &::before { - right: calc(100% - var(--uc-tab-corner-margin)); + left: var(--uc-tab-corner-half-size-reverse); background-image: var(--uc-tab-corner-left-side-svg); } &::after { - left: calc(100% - var(--uc-tab-corner-margin)); + right: var(--uc-tab-corner-half-size-reverse); background-image: var(--uc-tab-corner-right-side-svg); } } @@ -114,23 +141,27 @@ } &[visuallyselected] .tab-background { + background-clip: border-box; + &::before, &::after { @include NotOption("userChrome.tab.bottom_rounded_corner.all") { content: ""; } - - fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); - stroke: var( - --tab-line-color, var(--lwt-tab-line-color, - var(--tabs-border-color, rgba(128, 128, 142, 0.9))) - ); } } + &[visuallyselected] .tab-background, &[multiselected] .tab-background { &::before, &::after { fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); + + @include Option("userChrome.tab.box_shadow") { + stroke: var( + --tab-line-color, var(--lwt-tab-line-color, + var(--tabs-border-color, rgba(128, 128, 142, 0.9))) + ); + } } } &:hover:not([visuallyselected], [multiselected]) .tab-background { @@ -148,6 +179,7 @@ } } } + :root { &:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected] .tab-background:-moz-lwtheme { @@ -157,24 +189,37 @@ stroke: var(--toolbar-color); } } + &:is( + [lwtheme-mozlightdark], + [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected] .tab-background:-moz-lwtheme { + @include Option("userChrome.tab.box_shadow") { + --uc-tab-corner-left-side-svg: var(--uc-tab-corner-left-side-svg-soft); + --uc-tab-corner-right-side-svg: var(--uc-tab-corner-right-side-svg-soft); + } + } @include OS($linux) { /* Fill color for GTK */ - &:not([lwtheme="true"]) { - .tabbrowser-tab[visuallyselected] .tab-background { + &:not([lwtheme="true"]) .tabbrowser-tab { + &[visuallyselected] .tab-background { + background-clip: content-box; + background-color: unset !important; // --toolbar-non-lwt-bgcolor: -moz-dialog; + &::before, &::after { /* As GTK Toolbar's background-color + background-image * --toolbar-non-lwt-bgcolor: -moz-dialog; * --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15)); */ - stroke: transparent; fill: rgba(255, 255, 255, .075); @include NotOption("userChrome.tab.color_like_toolbar") { fill: rgba(255, 255, 255, .15); } } } - #TabsToolbar[brighttext] .tabbrowser-tab[selected] .tab-background { + &[multiselected] .tab-background, + &[visuallyselected] .tab-background { &::before, &::after { stroke: transparent; diff --git a/src/tab/selected_tab/_box_shadow.scss b/src/tab/selected_tab/_box_shadow.scss index 8c511ec..d720c57 100644 --- a/src/tab/selected_tab/_box_shadow.scss +++ b/src/tab/selected_tab/_box_shadow.scss @@ -10,7 +10,7 @@ "userChrome.tab.bottom_rounded_corner.chrome", "userChrome.tab.bottom_rounded_corner.edge" ) { - --uc-tab-background-shadow-soft: 0 -1px 0; + --uc-tab-background-shadow-soft: 0 -1px 1px -1px; --uc-tab-background-shadow-hard: 0 -1px 0; } } From 0a0ca2820717b9bb8adfedc7ee7c2e4ab718cd9a Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 30 Oct 2022 21:31:31 +0900 Subject: [PATCH 30/88] Fix: Bottom Rounded Corner - Adjust box shadow --- css/leptonChrome.css | 137 +++++++----------- src/compatibility/_theme.scss | 4 +- .../_bottom_rounded_corner_others.scss | 48 +----- src/tab/selected_tab/_box_shadow.scss | 66 +++++---- 4 files changed, 97 insertions(+), 158 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 9c2fcf3..8913b23 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -137,9 +137,9 @@ /* Navbar Border */ #navigator-toolbox:-moz-lwtheme { - --tabs-border-color: rgba(0, 0, 0, 0.3); - /* Legacy: v96 */ - --lwt-tabs-border-color: rgba(0, 0, 0, 0.3); + --tabs-border-color: rgba(0, 0, 0, 0.4); + /* Legacy: v96, (0, 0, 0, 0.3) -> (0, 0, 0, 0.4) */ + --lwt-tabs-border-color: rgba(0, 0, 0, 0.4); } /*= Findbar Border Color =====================================================*/ @@ -6415,9 +6415,16 @@ } /*= Selected Tab - Box Shadow ================================================*/ @supports -moz-bool-pref("userChrome.tab.box_shadow") { - .tab-background { + #TabsToolbar { --uc-tab-background-shadow-soft: 0 0 1px; --uc-tab-background-shadow-hard: 0 0 0 1px; + --uc-tab-shadow-color: var( + --tab-line-color, + var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9))) + ); + --uc-tab-shadow-color-bundle: var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))); + --uc-tab-basic-shadow: 0 0 4px rgba(0, 0, 0, 0.4); + --uc-tab-additional-shadow: 0 0 4px rgba(128, 128, 142, 0.5); } @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner") { @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-bool-pref( @@ -6425,49 +6432,54 @@ ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref( "userChrome.tab.bottom_rounded_corner.chrome" ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { - .tab-background { + #TabsToolbar { --uc-tab-background-shadow-soft: 0 -1px 1px -1px; --uc-tab-background-shadow-hard: 0 -1px 0; + --uc-tab-basic-shadow: 0 -1px 0px rgba(0, 0, 0, 0.4); + --uc-tab-additional-shadow: 0 0 0 transparent; } } } - #TabsToolbar[brighttext] + #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { + box-shadow: var(--uc-tab-basic-shadow) !important; + } + + :root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) + #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab[visuallyselected="true"]:not(:focus) - > .tab-stack - > .tab-background:-moz-lwtheme { + .tabbrowser-tab { /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)) Bright: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */ - box-shadow: var(--uc-tab-background-shadow-soft) var(--toolbar-color) !important; + /* Consider 0 0 4px rgba(128,128,142,0.9) -> 0 0 4px rgba(0,0,0,.4) new default */ } - - #TabsToolbar[brighttext] + :root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) + #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab[multiselected]:not([visuallyselected]) + .tabbrowser-tab:is([selected], [multiselected]) > .tab-stack > .tab-background:-moz-lwtheme { - box-shadow: var(--uc-tab-background-shadow-soft) color-mix(in srgb, var(--toolbar-color) 80%, transparent) !important; + box-shadow: var(--uc-tab-background-shadow-soft) var(--uc-tab-shadow-color) !important; + } + :root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) + #TabsToolbar[brighttext] + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab[visuallyselected="true"]:not(:focus), + :root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) + #TabsToolbar[brighttext] + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab[multiselected]:not([visuallyselected]) { + --uc-tab-shadow-color: var(--toolbar-color); } - /* Consider 0 0 4px rgba(128,128,142,0.9) -> 0 0 4px rgba(0,0,0,.4) new default */ - #TabsToolbar:not([brighttext]) + :root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"]) + #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + .tabbrowser-tab:is([visuallyselected], [multiselected]) > .tab-stack > .tab-background { - box-shadow: var(--uc-tab-background-shadow-soft) - var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))), - 0 0 4px rgba(128, 128, 142, 0.5) !important; - } - - #TabsToolbar[brighttext] - #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) - > .tab-stack - > .tab-background:-moz-lwtheme { - box-shadow: var(--uc-tab-background-shadow-soft) - var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))) !important; + --uc-tab-shadow-color: var(--uc-tab-shadow-color-bundle); + box-shadow: var(--uc-tab-background-shadow-soft) var(--uc-tab-shadow-color), var(--uc-tab-additional-shadow) !important; } /* For themes outside of Light and Dark (which are curated by Mozilla), show a thicker border @@ -6478,9 +6490,7 @@ .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background:-moz-lwtheme { - box-shadow: var(--uc-tab-background-shadow-hard) - var(--tab-line-color, var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9)))), - 0 0 4px rgba(128, 128, 142, 0.5) !important; + box-shadow: var(--uc-tab-background-shadow-hard) var(--uc-tab-shadow-color), var(--uc-tab-additional-shadow) !important; } :root:not([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) @@ -6489,8 +6499,7 @@ .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background:-moz-lwtheme { - box-shadow: var(--uc-tab-background-shadow-hard) - var(--tab-line-color, var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9)))) !important; + box-shadow: var(--uc-tab-background-shadow-hard) var(--uc-tab-shadow-color) !important; } } /*= Selected Tab - Bottom Rounded Corner =====================================*/ @@ -6708,30 +6717,8 @@ overflow-clip-margin: var(--uc-tab-corner-half-size) !important; } .tabbrowser-tab .tab-background { - padding-inline: var(--uc-tab-corner-half-size) !important; - background-clip: content-box; - } - @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") { - .tabbrowser-tab .tab-background { - --tab-border-radius: 12.5px; - } - } - @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.australis") { - .tabbrowser-tab .tab-background { - --tab-border-radius: 12.5px; - } - } - @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome") { - .tabbrowser-tab .tab-background { - --tab-border-radius: 6px; - } - } - @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") { - .tabbrowser-tab .tab-background { - --tab-border-radius: 0px; - } - } - @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { + --tab-border-radius: 0px; + margin-inline: var(--uc-tab-corner-half-size) !important; } .tabbrowser-tab .tab-background::before, .tabbrowser-tab .tab-background::after { @@ -6750,7 +6737,7 @@ /* Image */ background-size: cover; background-repeat: no-repeat; - background-position-y: bottom; + background-position: bottom; } @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") { .tabbrowser-tab .tab-background::before, @@ -6788,9 +6775,6 @@ .tabbrowser-tab[positionpinnedtabs] .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before { background-image: var(--uc-tab-corner-left-side-svg) !important; } - .tabbrowser-tab[visuallyselected] .tab-background { - background-clip: border-box; - } @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") { .tabbrowser-tab[visuallyselected] .tab-background::before, .tabbrowser-tab[visuallyselected] .tab-background::after { @@ -6808,7 +6792,7 @@ .tabbrowser-tab[visuallyselected] .tab-background::after, .tabbrowser-tab[multiselected] .tab-background::before, .tabbrowser-tab[multiselected] .tab-background::after { - stroke: var(--tab-line-color, var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9)))); + stroke: var(--uc-tab-shadow-color); } } .tabbrowser-tab:hover:not([visuallyselected], [multiselected]) .tab-background::before, @@ -6822,25 +6806,11 @@ fill: var(--uc-multiselected-tab-bgcolor); } } - :root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) - #TabsToolbar[brighttext] - #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab[visuallyselected] - .tab-background:-moz-lwtheme::before, - :root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) - #TabsToolbar[brighttext] - #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab[visuallyselected] - .tab-background:-moz-lwtheme::after { - /* As Selected Tab - Box Shadow */ - stroke: var(--toolbar-color); - } @supports -moz-bool-pref("userChrome.tab.box_shadow") { :root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab[visuallyselected] - .tab-background:-moz-lwtheme { + .tabbrowser-tab { --uc-tab-corner-left-side-svg: var(--uc-tab-corner-left-side-svg-soft); --uc-tab-corner-right-side-svg: var(--uc-tab-corner-right-side-svg-soft); } @@ -6849,6 +6819,11 @@ :root { /* Fill color for GTK */ } + @supports -moz-bool-pref("userChrome.tab.box_shadow") { + :root:not([lwtheme="true"]) .tabbrowser-tab { + --uc-tab-shadow-color: rgba(0, 0, 0, 0.4); + } + } :root:not([lwtheme="true"]) .tabbrowser-tab[visuallyselected] .tab-background { background-clip: content-box; background-color: unset !important; @@ -6867,12 +6842,6 @@ fill: rgba(255, 255, 255, 0.15); } } - :root:not([lwtheme="true"]) .tabbrowser-tab[multiselected] .tab-background::before, - :root:not([lwtheme="true"]) .tabbrowser-tab[multiselected] .tab-background::after, - :root:not([lwtheme="true"]) .tabbrowser-tab[visuallyselected] .tab-background::before, - :root:not([lwtheme="true"]) .tabbrowser-tab[visuallyselected] .tab-background::after { - stroke: transparent; - } } #tabbrowser-tabs[positionpinnedtabs], diff --git a/src/compatibility/_theme.scss b/src/compatibility/_theme.scss index ac13907..99d713c 100644 --- a/src/compatibility/_theme.scss +++ b/src/compatibility/_theme.scss @@ -116,8 +116,8 @@ menu { /* Navbar Border */ #navigator-toolbox:-moz-lwtheme { - --tabs-border-color: rgba(0, 0, 0, 0.3); /* Legacy: v96 */ - --lwt-tabs-border-color: rgba(0, 0, 0, 0.3); + --tabs-border-color: rgba(0, 0, 0, 0.4); /* Legacy: v96, (0, 0, 0, 0.3) -> (0, 0, 0, 0.4) */ + --lwt-tabs-border-color: rgba(0, 0, 0, 0.4); } /*= Findbar Border Color =====================================================*/ diff --git a/src/tab/selected_tab/_bottom_rounded_corner_others.scss b/src/tab/selected_tab/_bottom_rounded_corner_others.scss index b8c7c19..cacc5e8 100644 --- a/src/tab/selected_tab/_bottom_rounded_corner_others.scss +++ b/src/tab/selected_tab/_bottom_rounded_corner_others.scss @@ -60,24 +60,8 @@ overflow-clip-margin: var(--uc-tab-corner-half-size) !important; .tab-background { - // --tab-border-radius: 0px; - padding-inline: var(--uc-tab-corner-half-size) !important; - background-clip: content-box; - - @include Option("userChrome.tab.bottom_rounded_corner.wave") { - --tab-border-radius: 12.5px; - } - @include Option("userChrome.tab.bottom_rounded_corner.australis") { - --tab-border-radius: 12.5px; - } - @include Option("userChrome.tab.bottom_rounded_corner.chrome") { - --tab-border-radius: 6px; - } - @include Option("userChrome.tab.bottom_rounded_corner.chrome_legacy") { - --tab-border-radius: 0px; - } - @include Option("userChrome.tab.bottom_rounded_corner.edge") { - } + --tab-border-radius: 0px; + margin-inline: var(--uc-tab-corner-half-size) !important; &::before, &::after { @@ -104,7 +88,7 @@ // background-size: var(--tab-corner-rounding); background-size: cover; background-repeat: no-repeat; - background-position-y: bottom; + background-position: bottom; @include Option("userChrome.tab.bottom_rounded_corner.all") { content: ""; @@ -141,7 +125,6 @@ } &[visuallyselected] .tab-background { - background-clip: border-box; &::before, &::after { @@ -157,10 +140,7 @@ fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); @include Option("userChrome.tab.box_shadow") { - stroke: var( - --tab-line-color, var(--lwt-tab-line-color, - var(--tabs-border-color, rgba(128, 128, 142, 0.9))) - ); + stroke: var(--uc-tab-shadow-color); } } } @@ -181,19 +161,11 @@ } :root { - &:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) - #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected] .tab-background:-moz-lwtheme { - &::before, - &::after { - /* As Selected Tab - Box Shadow */ - stroke: var(--toolbar-color); - } - } &:is( [lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected] .tab-background:-moz-lwtheme { + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab { @include Option("userChrome.tab.box_shadow") { --uc-tab-corner-left-side-svg: var(--uc-tab-corner-left-side-svg-soft); --uc-tab-corner-right-side-svg: var(--uc-tab-corner-right-side-svg-soft); @@ -202,6 +174,9 @@ @include OS($linux) { /* Fill color for GTK */ &:not([lwtheme="true"]) .tabbrowser-tab { + @include Option("userChrome.tab.box_shadow") { + --uc-tab-shadow-color: rgba(0,0,0, 0.4); + } &[visuallyselected] .tab-background { background-clip: content-box; background-color: unset !important; // --toolbar-non-lwt-bgcolor: -moz-dialog; @@ -218,13 +193,6 @@ } } } - &[multiselected] .tab-background, - &[visuallyselected] .tab-background { - &::before, - &::after { - stroke: transparent; - } - } } } } diff --git a/src/tab/selected_tab/_box_shadow.scss b/src/tab/selected_tab/_box_shadow.scss index d720c57..239bae1 100644 --- a/src/tab/selected_tab/_box_shadow.scss +++ b/src/tab/selected_tab/_box_shadow.scss @@ -1,6 +1,10 @@ -.tab-background { +#TabsToolbar { --uc-tab-background-shadow-soft: 0 0 1px; --uc-tab-background-shadow-hard: 0 0 0 1px; + --uc-tab-shadow-color: var(--tab-line-color, var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9)))); + --uc-tab-shadow-color-bundle: var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))); + --uc-tab-basic-shadow: 0 0 4px rgba(0,0,0, 0.4); + --uc-tab-additional-shadow: 0 0 4px rgba(128, 128, 142, 0.5); @include Option("userChrome.tab.bottom_rounded_corner") { @include Option( @@ -12,43 +16,43 @@ ) { --uc-tab-background-shadow-soft: 0 -1px 1px -1px; --uc-tab-background-shadow-hard: 0 -1px 0; + --uc-tab-basic-shadow: 0 -1px 0px rgba(0,0,0, 0.4); + --uc-tab-additional-shadow: 0 0 0 transparent; } } } -#TabsToolbar[brighttext] - #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab[visuallyselected="true"]:not(:focus) - > .tab-stack - > .tab-background:-moz-lwtheme { +#tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { + box-shadow: var(--uc-tab-basic-shadow) !important; +} + +:root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) + #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab { + &:is([selected], [multiselected]) { + > .tab-stack + > .tab-background:-moz-lwtheme { + box-shadow: var(--uc-tab-background-shadow-soft) var(--uc-tab-shadow-color) !important; + } + } + /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)) Bright: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */ - box-shadow: var(--uc-tab-background-shadow-soft) var(--toolbar-color) !important; -} -#TabsToolbar[brighttext] - #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab[multiselected]:not([visuallyselected]) - > .tab-stack - > .tab-background:-moz-lwtheme { - box-shadow: var(--uc-tab-background-shadow-soft) color-mix(in srgb, var(--toolbar-color) 80%, transparent) !important; + /* Consider 0 0 4px rgba(128,128,142,0.9) -> 0 0 4px rgba(0,0,0,.4) new default */ + &[visuallyselected="true"]:not(:focus), + &[multiselected]:not([visuallyselected]) { + --uc-tab-shadow-color: var(--toolbar-color); + } } -/* Consider 0 0 4px rgba(128,128,142,0.9) -> 0 0 4px rgba(0,0,0,.4) new default */ -#TabsToolbar:not([brighttext]) +:root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"]) + #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) + .tabbrowser-tab:is([visuallyselected], [multiselected]) > .tab-stack > .tab-background { - box-shadow: var(--uc-tab-background-shadow-soft) var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))), - 0 0 4px rgba(128, 128, 142, 0.5) !important; -} - -#TabsToolbar[brighttext] - #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) - > .tab-stack - > .tab-background:-moz-lwtheme { - box-shadow: var(--uc-tab-background-shadow-soft) var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))) !important; + --uc-tab-shadow-color: var(--uc-tab-shadow-color-bundle); + box-shadow: var(--uc-tab-background-shadow-soft) var(--uc-tab-shadow-color), + var(--uc-tab-additional-shadow) !important; } /* For themes outside of Light and Dark (which are curated by Mozilla), show a thicker border @@ -59,9 +63,8 @@ .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background:-moz-lwtheme { - box-shadow: var(--uc-tab-background-shadow-hard) - var(--tab-line-color, var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9)))), - 0 0 4px rgba(128, 128, 142, 0.5) !important; + box-shadow: var(--uc-tab-background-shadow-hard) var(--uc-tab-shadow-color), + var(--uc-tab-additional-shadow) !important; } :root:not([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) @@ -70,6 +73,5 @@ .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background:-moz-lwtheme { - box-shadow: var(--uc-tab-background-shadow-hard) - var(--tab-line-color, var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9)))) !important; + box-shadow: var(--uc-tab-background-shadow-hard) var(--uc-tab-shadow-color) !important; } From 250597bf95279cfa58ae5cfec221a3996f00ef67 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 30 Oct 2022 22:30:41 +0900 Subject: [PATCH 31/88] Fix: Bottom Rounded Corner - Not All --- css/leptonChrome.css | 34 ++++++++++++------- .../_bottom_rounded_corner_others.scss | 34 +++++++++++++------ 2 files changed, 46 insertions(+), 22 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 8913b23..62f70c9 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6712,13 +6712,29 @@ } } - .tabbrowser-tab { - padding-inline: 0 !important; - overflow-clip-margin: var(--uc-tab-corner-half-size) !important; + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") { + .tabbrowser-tab { + padding-inline: 0 !important; + overflow-clip-margin: var(--uc-tab-corner-half-size) !important; + } + .tabbrowser-tab .tab-background { + --tab-border-radius: 0px; + margin-inline: var(--uc-tab-corner-half-size) !important; + } } - .tabbrowser-tab .tab-background { - --tab-border-radius: 0px; - margin-inline: var(--uc-tab-corner-half-size) !important; + @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") { + .tabbrowser-tab[visuallyselected] { + padding-inline: 0 !important; + overflow-clip-margin: var(--uc-tab-corner-half-size) !important; + } + .tabbrowser-tab[visuallyselected] .tab-background { + --tab-border-radius: 0px; + margin-inline: var(--uc-tab-corner-half-size) !important; + } + .tabbrowser-tab[visuallyselected] .tab-background::before, + .tabbrowser-tab[visuallyselected] .tab-background::after { + content: ""; + } } .tabbrowser-tab .tab-background::before, .tabbrowser-tab .tab-background::after { @@ -6775,12 +6791,6 @@ .tabbrowser-tab[positionpinnedtabs] .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before { background-image: var(--uc-tab-corner-left-side-svg) !important; } - @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") { - .tabbrowser-tab[visuallyselected] .tab-background::before, - .tabbrowser-tab[visuallyselected] .tab-background::after { - content: ""; - } - } .tabbrowser-tab[visuallyselected] .tab-background::before, .tabbrowser-tab[visuallyselected] .tab-background::after, .tabbrowser-tab[multiselected] .tab-background::before, diff --git a/src/tab/selected_tab/_bottom_rounded_corner_others.scss b/src/tab/selected_tab/_bottom_rounded_corner_others.scss index cacc5e8..28aafb7 100644 --- a/src/tab/selected_tab/_bottom_rounded_corner_others.scss +++ b/src/tab/selected_tab/_bottom_rounded_corner_others.scss @@ -55,7 +55,8 @@ } } -.tabbrowser-tab { +//-- Mixin --------------------------------------------------------------------- +@mixin _bottomRoundedCornerOtherPadding() { padding-inline: 0 !important; overflow-clip-margin: var(--uc-tab-corner-half-size) !important; @@ -63,6 +64,28 @@ --tab-border-radius: 0px; margin-inline: var(--uc-tab-corner-half-size) !important; + @content; + } +} + +//------------------------------------------------------------------------------ + +.tabbrowser-tab { + @include Option("userChrome.tab.bottom_rounded_corner.all") { + @include _bottomRoundedCornerOtherPadding; + } + @include NotOption("userChrome.tab.bottom_rounded_corner.all") { + &[visuallyselected] { + @include _bottomRoundedCornerOtherPadding { + &::before, + &::after { + content: ""; + } + } + } + } + + .tab-background { &::before, &::after { /* Box */ @@ -124,15 +147,6 @@ background-image: var(--uc-tab-corner-left-side-svg) !important; } - &[visuallyselected] .tab-background { - - &::before, - &::after { - @include NotOption("userChrome.tab.bottom_rounded_corner.all") { - content: ""; - } - } - } &[visuallyselected] .tab-background, &[multiselected] .tab-background { &::before, From d4891892a959657e3e125a952eebb5e8c40a6506 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 31 Oct 2022 20:58:35 +0900 Subject: [PATCH 32/88] Add: Separator - Bar --- css/leptonChrome.css | 51 ++++++++++++++++- src/tab/_selected_tab.scss | 12 ++++ src/tab/_unselected_tab.scss | 5 ++ .../_photon_like_contextline.scss | 11 ---- src/tab/unselected_tab/_bar_separator.scss | 55 +++++++++++++++++++ user.js | 1 + 6 files changed, 123 insertions(+), 12 deletions(-) create mode 100644 src/tab/unselected_tab/_bar_separator.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index a419915..7ff911a 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6592,7 +6592,7 @@ } } /*= Selected Tab - Photon like contextline ===================================*/ -@supports -moz-bool-pref("userChrome.tab.photon_like_contextline") { +@supports -moz-bool-pref("userChrome.tab.photon_like_contextline") or -moz-bool-pref("userChrome.tab.bar_separator") { :root[lwtheme-mozlightdark] #tabbrowser-tabs, :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] { @@ -6605,6 +6605,8 @@ /* -moz-accent-color */ } } +} +@supports -moz-bool-pref("userChrome.tab.photon_like_contextline") { .tab-context-line { display: -moz-inline-box !important; height: 2px !important; @@ -6912,6 +6914,53 @@ } } } +/*= Unselected Tab - Bar Separator ===========================================*/ +@supports -moz-bool-pref("userChrome.tab.bar_separator") { + .tab-stack::before { + /* Box Model */ + content: ""; + display: block; + position: absolute; + /* Position */ + top: 50%; + left: 0%; + transform: translateX(calc((var(--inline-tab-padding) - 5px) / 2)) translateY(calc(-50% + var(--tab-block-margin))); + z-index: 1; + /* Bar shape */ + width: 3px; + height: 20px; + /* Bar Color */ + background-color: var(--uc-bar-separator-color, var(--tab-line-color, var(--lwt-tab-line-color, #0a84ff))); + } + @media (prefers-reduced-motion: no-preference) { + .tab-stack::before { + transition-property: opacity, background-color; + transition-duration: 0.2s; + transition-timing-function: var(--animation-easing-function); + /* cubic-bezier(.07, .95, 0, 1) */ + } + } + + :root[sessionrestored] .tabbrowser-tab[busy] .tab-stack::before { + --uc-bar-separator-color: currentColor; + opacity: 0.7; + } + :root[sessionrestored] .tabbrowser-tab[busy][progress] .tab-stack::before { + --uc-bar-separator-color: var(--tab-loading-fill); + opacity: 1; + } + :root[sessionrestored] + #TabsToolbar[brighttext] + .tabbrowser-tab[busy][progress]:not([selected="true"]) + .tab-stack::before { + --uc-bar-separator-color: var(--lwt-tab-loading-fill-inactive, #84c1ff); + } + @supports -moz-bool-pref("userChrome.tab.unloaded") { + :root[sessionrestored] .tabbrowser-tab[pending] .tab-stack::before { + opacity: 0.7; + } + } +} /*= New tab button ============================================================*/ /*= New tab button - Looks like tab ==========================================*/ @supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { diff --git a/src/tab/_selected_tab.scss b/src/tab/_selected_tab.scss index 8ef7dd8..c3d1e0a 100644 --- a/src/tab/_selected_tab.scss +++ b/src/tab/_selected_tab.scss @@ -19,6 +19,18 @@ } /*= Selected Tab - Photon like contextline ===================================*/ +@include Option("userChrome.tab.photon_like_contextline", "userChrome.tab.bar_separator") { + :root[lwtheme-mozlightdark] #tabbrowser-tabs, /* Legacy: v96 */ + :root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], + :root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] { + --tab-line-color: rgb(10, 132, 255) !important; + } + @media (-moz-gtk-csd-available) { + :root:not(:-moz-lwtheme) #tabbrowser-tabs { + --tab-line-color: Highlight !important; /* -moz-accent-color */ + } + } +} @include Option("userChrome.tab.photon_like_contextline") { @import "selected_tab/photon_like_contextline"; } diff --git a/src/tab/_unselected_tab.scss b/src/tab/_unselected_tab.scss index 6332380..b0e4b4d 100644 --- a/src/tab/_unselected_tab.scss +++ b/src/tab/_unselected_tab.scss @@ -7,3 +7,8 @@ @include Option("userChrome.tab.static_separator") { @import "unselected_tab/static_separator"; } + +/*= Unselected Tab - Bar Separator ===========================================*/ +@include Option("userChrome.tab.bar_separator") { + @import "unselected_tab/bar_separator"; +} diff --git a/src/tab/selected_tab/_photon_like_contextline.scss b/src/tab/selected_tab/_photon_like_contextline.scss index fd1d26b..13d7644 100644 --- a/src/tab/selected_tab/_photon_like_contextline.scss +++ b/src/tab/selected_tab/_photon_like_contextline.scss @@ -1,14 +1,3 @@ -:root[lwtheme-mozlightdark] #tabbrowser-tabs, /* Legacy: v96 */ -:root[style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], -:root[style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] { - --tab-line-color: rgb(10, 132, 255) !important; -} -@media (-moz-gtk-csd-available) { - :root:not(:-moz-lwtheme) #tabbrowser-tabs { - --tab-line-color: Highlight !important; /* -moz-accent-color */ - } -} - .tab-context-line { display: -moz-inline-box !important; height: 2px !important; diff --git a/src/tab/unselected_tab/_bar_separator.scss b/src/tab/unselected_tab/_bar_separator.scss new file mode 100644 index 0000000..ebd2b52 --- /dev/null +++ b/src/tab/unselected_tab/_bar_separator.scss @@ -0,0 +1,55 @@ +// Using --tab-line-color at photon_line_contextline + +.tab-stack::before { + $barWidth: 3px; + $barMargin: $barWidth + 2px; + + /* Box Model */ + content: ""; + display: block; + position: absolute; + + /* Position */ + top: 50%; + left: 0%; + transform: translateX(calc((var(--inline-tab-padding) - #{ $barMargin }) / 2)) translateY(calc(-50% + var(--tab-block-margin))); + z-index: 1; + + /* Bar shape */ + width: $barWidth; + height: 20px; + + /* Bar Color */ + background-color: var(--uc-bar-separator-color, var(--tab-line-color, var(--lwt-tab-line-color, rgb(10, 132, 255)))); + + @include Animate { + transition-property: opacity, background-color; + transition-duration: 0.2s; + transition-timing-function: var(--animation-easing-function); /* cubic-bezier(.07, .95, 0, 1) */ + } +} + +:root[sessionrestored] { + .tabbrowser-tab[busy] { + .tab-stack::before { + --uc-bar-separator-color: currentColor; + opacity: 0.7; + } + + &[progress] .tab-stack::before { + --uc-bar-separator-color: var(--tab-loading-fill); + opacity: 1; + } + } + #TabsToolbar[brighttext] .tabbrowser-tab[busy] { + &[progress]:not([selected=true]) .tab-stack::before { + --uc-bar-separator-color: var(--lwt-tab-loading-fill-inactive, #84c1ff); + } + } + + @include Option("userChrome.tab.unloaded") { + .tabbrowser-tab[pending] .tab-stack::before { + opacity: 0.7; + } + } +} diff --git a/user.js b/user.js index 6082a5a..c15571f 100644 --- a/user.js +++ b/user.js @@ -42,6 +42,7 @@ user_pref("userChrome.tab.photon_like_padding", false); // Photon user_pref("userChrome.tab.dynamic_separator", true); // Original, Proton user_pref("userChrome.tab.static_separator", false); // Photon user_pref("userChrome.tab.static_separator.selected_accent", false); // Just option +user_pref("userChrome.tab.bar_separator", false); // Just option user_pref("userChrome.tab.newtab_button_like_tab", true); // Original user_pref("userChrome.tab.newtab_button_smaller", false); // Photon From 12d75219cea3c766911531f446c05b372f85900d Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 1 Nov 2022 17:39:20 +0900 Subject: [PATCH 33/88] Fix: Bottom Rounded Corner - New tab button --- css/leptonChrome.css | 85 +++++++++++++------ src/tab/newtab_button/_looks_like_tab.scss | 79 +++++++++++++---- .../selected_tab/_bottom_rounded_corner.scss | 7 +- 3 files changed, 127 insertions(+), 44 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 62f70c9..cd9eb72 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6514,6 +6514,8 @@ /* 10px looks about like chromium - 17px looks close to Australis tabs */ --tab-corner-padding: 0px; --tab-corner-position: calc(var(--tab-corner-padding) - var(--tab-corner-rounding)); + --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left.svg"); + --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right.svg"); } :root:not([customizing="true"]) .tabbrowser-tab .tab-background::before, @@ -6559,11 +6561,11 @@ } :root:not([customizing="true"]) .tabbrowser-tab .tab-background::before { left: var(--tab-corner-position); - background-image: url("../icons/tab-bottom-corner-left.svg"); + background-image: var(--uc-tab-corner-left-side-svg); } :root:not([customizing="true"]) .tabbrowser-tab .tab-background::after { right: var(--tab-corner-position); - background-image: url("../icons/tab-bottom-corner-right.svg"); + background-image: var(var(--uc-tab-corner-right-side-svg)); } :root:not([customizing="true"]) .tabbrowser-tab[visuallyselected] .tab-background::before, :root:not([customizing="true"]) .tabbrowser-tab[visuallyselected] .tab-background::after { @@ -7189,29 +7191,51 @@ /*= New tab button ============================================================*/ /*= New tab button - Looks like tab ==========================================*/ @supports -moz-bool-pref("userChrome.tab.newtab_button_like_tab") { - #tabs-newtab-button { - /* Original: - margin: 0 0 var(--tabs-navbar-shadow-size) !important - => Can't override style. Therefore, we should approach it by bypass. + @supports -moz-bool-pref("userChrome.tab.connect_to_window") { + #tabs-newtab-button { + /* Size */ + -moz-box-align: stretch !important; + padding-top: var(--tab-block-margin) !important; + } + } + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner") { + #tabs-newtab-button { + /* Original: + margin: 0 0 var(--tabs-navbar-shadow-size) !important + => Can't override style. Therefore, we should approach it by bypass. */ - --tabs-navbar-shadow-size: -1px; - /* Original: 1px */ - --tabs-navbar-original-shadow-size: 0.5px; - --tab-corner-rounding: 4px; - /* Hardcoded */ - /* Size */ - -moz-box-align: stretch !important; - padding-top: var(--tab-block-margin) !important; - /* Corner Rounding Image */ - --newtab-position: calc((var(--tab-corner-rounding) / 2) * -1); - background-image: url("../icons/tab-bottom-corner-left.svg"), url("../icons/tab-bottom-corner-right.svg"); - background-repeat: no-repeat; - background-position: left var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size), - right var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size); - background-size: var(--tab-corner-rounding); - /* Corner Rounding Color */ - fill: transparent !important; - -moz-context-properties: fill !important; + --tabs-navbar-shadow-size: -1px; + /* Original: 1px */ + --tabs-navbar-original-shadow-size: 0.5px; + --tab-corner-rounding: 4px; + /* Hardcoded */ + /* Corner Rounding Image */ + --newtab-position: calc((var(--tab-corner-rounding) / 2) * -1); + background-image: var(--uc-tab-corner-left-side-svg), var(--uc-tab-corner-right-side-svg); + background-repeat: no-repeat; + background-position: left var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size), + right var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size); + background-size: var(--tab-corner-rounding); + /* Corner Rounding Color */ + fill: transparent !important; + -moz-context-properties: fill !important; + } + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-bool-pref( + "userChrome.tab.bottom_rounded_corner.australis" + ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref( + "userChrome.tab.bottom_rounded_corner.chrome" + ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { + #tabs-newtab-button { + --newtab-position: 0px; + --uc-tab-corner-half-height: calc(var(--uc-tab-corner-height) / 2); + --uc-tab-corner-half-height-reverse: calc(var(--uc-tab-corner-half-height) * -1); + margin-inline: var(--uc-tab-corner-half-height-reverse) !important; + padding-inline: var(--uc-tab-corner-half-height) !important; + overflow-clip-margin: var(--uc-tab-corner-half-height) !important; + background-size: var(--uc-tab-corner-height); + background-origin: padding-box; + } + } } /* Corner Rounding Color */ @@ -7261,6 +7285,19 @@ fill: var(--toolbarbutton-icon-fill); fill-opacity: var(--toolbarbutton-icon-fill-opacity); } + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-bool-pref( + "userChrome.tab.bottom_rounded_corner.australis" + ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref( + "userChrome.tab.bottom_rounded_corner.chrome" + ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { + #tabs-newtab-button .toolbarbutton-icon { + --tab-border-radius: 0px; + width: unset !important; + padding-inline: 0px !important; + margin-inline: calc(var(--uc-tab-corner-half-height) - 7.75px) !important; + background-color: transparent !important; + } + } } /*= New tab button - Smaller button ==========================================*/ @supports -moz-bool-pref("userChrome.tab.newtab_button_smaller") { diff --git a/src/tab/newtab_button/_looks_like_tab.scss b/src/tab/newtab_button/_looks_like_tab.scss index 9c0edcc..70d3e2e 100644 --- a/src/tab/newtab_button/_looks_like_tab.scss +++ b/src/tab/newtab_button/_looks_like_tab.scss @@ -1,27 +1,52 @@ #tabs-newtab-button { - /* Original: + @include Option("userChrome.tab.connect_to_window") { + /* Size */ + -moz-box-align: stretch !important; + padding-top: var(--tab-block-margin) !important; + } + + @include Option("userChrome.tab.bottom_rounded_corner") { + /* Original: margin: 0 0 var(--tabs-navbar-shadow-size) !important => Can't override style. Therefore, we should approach it by bypass. - */ - --tabs-navbar-shadow-size: -1px; /* Original: 1px */ - --tabs-navbar-original-shadow-size: 0.5px; - --tab-corner-rounding: 4px; /* Hardcoded */ + */ + --tabs-navbar-shadow-size: -1px; /* Original: 1px */ + --tabs-navbar-original-shadow-size: 0.5px; + --tab-corner-rounding: 4px; /* Hardcoded */ - /* Size */ - -moz-box-align: stretch !important; - padding-top: var(--tab-block-margin) !important; + /* Corner Rounding Image */ + --newtab-position: calc((var(--tab-corner-rounding) / 2) * -1); + background-image: var(--uc-tab-corner-left-side-svg), var(--uc-tab-corner-right-side-svg); + background-repeat: no-repeat; + background-position: left var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size), + right var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size); + background-size: var(--tab-corner-rounding); - /* Corner Rounding Image */ - --newtab-position: calc((var(--tab-corner-rounding) / 2) * -1); - background-image: url("../icons/tab-bottom-corner-left.svg"), url("../icons/tab-bottom-corner-right.svg"); - background-repeat: no-repeat; - background-position: left var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size), - right var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size); - background-size: var(--tab-corner-rounding); + /* Corner Rounding Color */ + fill: transparent !important; + -moz-context-properties: fill !important; - /* Corner Rounding Color */ - fill: transparent !important; - -moz-context-properties: fill !important; + @include Option( + "userChrome.tab.bottom_rounded_corner.wave", + "userChrome.tab.bottom_rounded_corner.australis", + "userChrome.tab.bottom_rounded_corner.chrome_legacy", + "userChrome.tab.bottom_rounded_corner.chrome", + "userChrome.tab.bottom_rounded_corner.edge" + ) { + --newtab-position: 0px; + --uc-tab-corner-half-height: calc(var(--uc-tab-corner-height) / 2); + --uc-tab-corner-half-height-reverse: calc(var(--uc-tab-corner-half-height) * -1); + + margin-inline: var(--uc-tab-corner-half-height-reverse) !important; + padding-inline: var(--uc-tab-corner-half-height) !important; + overflow-clip-margin: var(--uc-tab-corner-half-height) !important; + background-size: var(--uc-tab-corner-height); + background-origin: padding-box; + + .toolbarbutton-icon { + } + } + } } /* Corner Rounding Color */ @@ -61,4 +86,22 @@ -moz-context-properties: fill, fill-opacity; fill: var(--toolbarbutton-icon-fill); fill-opacity: var(--toolbarbutton-icon-fill-opacity); + + @include Option( + "userChrome.tab.bottom_rounded_corner.wave", + "userChrome.tab.bottom_rounded_corner.australis", + "userChrome.tab.bottom_rounded_corner.chrome_legacy", + "userChrome.tab.bottom_rounded_corner.chrome", + "userChrome.tab.bottom_rounded_corner.edge" + ) { + --tab-border-radius: 0px; + width: unset !important; + padding-inline: 0px !important; + margin-inline: calc(var(--uc-tab-corner-half-height) - #{( 15.5px / 2 )}) !important; + + background-color: transparent !important; + // background-size: calc((var(--toolbarbutton-inner-padding) * 2 + 16px) - var(--uc-tab-corner-size)) 100%; + // background-repeat: no-repeat; + // background-position: center; + } } diff --git a/src/tab/selected_tab/_bottom_rounded_corner.scss b/src/tab/selected_tab/_bottom_rounded_corner.scss index 6cb2fcf..7b590b2 100644 --- a/src/tab/selected_tab/_bottom_rounded_corner.scss +++ b/src/tab/selected_tab/_bottom_rounded_corner.scss @@ -2,6 +2,9 @@ --tab-corner-rounding: 3px; /* 10px looks about like chromium - 17px looks close to Australis tabs */ --tab-corner-padding: 0px; --tab-corner-position: calc(var(--tab-corner-padding) - var(--tab-corner-rounding)); + + --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left.svg"); + --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right.svg"); } :root:not([customizing="true"]) { @@ -46,11 +49,11 @@ &::before { left: var(--tab-corner-position); - background-image: url("../icons/tab-bottom-corner-left.svg"); + background-image: var(--uc-tab-corner-left-side-svg); } &::after { right: var(--tab-corner-position); - background-image: url("../icons/tab-bottom-corner-right.svg"); + background-image: var(var(--uc-tab-corner-right-side-svg)); } } From 44e8d5018a957b62e530c4e413939f50a2753f5a Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 3 Nov 2022 12:39:44 +0900 Subject: [PATCH 34/88] Fix: Counter - Tab with sound tab --- css/leptonChrome.css | 50 ++++++++++++++++++++-- src/counter/_tab.scss | 37 ++++++++++++++++ src/tab/sound_tab/_show_with_favicons.scss | 2 +- 3 files changed, 84 insertions(+), 5 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 7ff911a..5647d70 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -7367,8 +7367,7 @@ .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container[labeldirection="rtl"], .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) - .tab-label-container - :not([labeldirection]):-moz-locale-dir(rtl) { + .tab-label-container:not([labeldirection]):-moz-locale-dir(rtl) { --uc-sound-tab-label-position-x: -4px; } .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) @@ -7388,8 +7387,7 @@ .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) .tab-label-container[labeldirection="rtl"], .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) - .tab-label-container - :not([labeldirection]):-moz-locale-dir(rtl) { + .tab-label-container:not([labeldirection]):-moz-locale-dir(rtl) { --uc-sound-tab-label-position-x: -4px; } .tabbrowser-tab:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) @@ -8214,6 +8212,50 @@ .tab-secondary-label { overflow: hidden; } + + @supports -moz-bool-pref("userChrome.tab.sound_with_favicons") { + @supports not -moz-bool-pref("userChrome.hidden.tab_icon") { + .tabbrowser-tab:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])[pinned] + .tab-label-container[labeldirection="ltr"], + .tabbrowser-tab:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])[pinned] + .tab-label-container:not([labeldirection]):-moz-locale-dir(ltr) { + --uc-sound-tab-label-position-x: 2px; + } + .tabbrowser-tab:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])[pinned] + .tab-label-container[labeldirection="rtl"], + .tabbrowser-tab:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])[pinned] + .tab-label-container:not([labeldirection]):-moz-locale-dir(rtl) { + --uc-sound-tab-label-position-x: -2px; + } + .tabbrowser-tab:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) + .tab-label-container::before { + transform: translateX(var(--uc-sound-tab-label-position-x, 0px)); + } + } + @supports -moz-bool-pref("userChrome.hidden.tab_icon") { + @supports not -moz-bool-pref("userChrome.hidden.tab_icon.always") { + .tabbrowser-tab:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])[pinned] + .tab-label-container[labeldirection="ltr"], + .tabbrowser-tab:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])[pinned] + .tab-label-container:not([labeldirection]):-moz-locale-dir(ltr) { + --uc-sound-tab-label-position-x: 2px; + } + .tabbrowser-tab:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])[pinned] + .tab-label-container[labeldirection="rtl"], + .tabbrowser-tab:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked])[pinned] + .tab-label-container:not([labeldirection]):-moz-locale-dir(rtl) { + --uc-sound-tab-label-position-x: -2px; + } + .tabbrowser-tab:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) + .tab-label-container::before { + transform: translateX(var(--uc-sound-tab-label-position-x, 0px)); + } + } + } + .tab-label-container::beforee { + transition: transform 0.25s var(--animation-easing-function); + } + } } /*= Counter for Bookmark menu ================================================*/ @supports -moz-bool-pref("userChrome.counter.bookmark_menu") { diff --git a/src/counter/_tab.scss b/src/counter/_tab.scss index 108793c..baeae33 100644 --- a/src/counter/_tab.scss +++ b/src/counter/_tab.scss @@ -10,6 +10,18 @@ } } +// Copy from "../tab/sound_tab/show_with_favicons" +@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; + } + } +} + //------------------------------------------------------------------------------ #tabbrowser-tabs { @@ -61,3 +73,28 @@ .tab-secondary-label { overflow: hidden; } + +// Compatibility with sound tab +@include Option("userChrome.tab.sound_with_favicons") { + @include _hidden_tabIcon_soundTabLabel { + .tabbrowser-tab:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) { + &[pinned] .tab-label-container { + &[labeldirection=ltr], + &:not([labeldirection]):-moz-locale-dir(ltr) { + --uc-sound-tab-label-position-x: 2px; + } + &[labeldirection=rtl], + &:not([labeldirection]):-moz-locale-dir(rtl) { + --uc-sound-tab-label-position-x: -2px; + } + } + .tab-label-container::before { + transform: translateX(var(--uc-sound-tab-label-position-x, 0px)); + } + } + } + + .tab-label-container::beforee { + transition: transform 0.25s var(--animation-easing-function); + } +} diff --git a/src/tab/sound_tab/_show_with_favicons.scss b/src/tab/sound_tab/_show_with_favicons.scss index a521b62..e38ae5c 100644 --- a/src/tab/sound_tab/_show_with_favicons.scss +++ b/src/tab/sound_tab/_show_with_favicons.scss @@ -69,7 +69,7 @@ --uc-sound-tab-label-position-x: 4px; } &[labeldirection=rtl], - :not([labeldirection]):-moz-locale-dir(rtl) { + &:not([labeldirection]):-moz-locale-dir(rtl) { --uc-sound-tab-label-position-x: -4px; } From e64e54b67f3a96a8ccbb3878bf5cb68a0dc32dfe Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 4 Nov 2022 05:41:30 +0900 Subject: [PATCH 35/88] Add: URL View - Focus Item Border --- css/leptonChrome.css | 7 +++++++ src/urlview/_focus_item_border.scss | 4 ++++ src/urlview/_index.scss | 5 +++++ user.js | 1 + 4 files changed, 17 insertions(+) create mode 100644 src/urlview/_focus_item_border.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 5647d70..b63ac83 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -7724,6 +7724,13 @@ display: block !important; } } +/*= Url View - Item Focus Border =============================================*/ +@supports -moz-bool-pref("userChrome.urlView.focus_item_border") { + .urlbarView-row:not([type="tip"], [type="dynamic"])[selected] > .urlbarView-row-inner, + .urlbarView-row-inner[selected] { + box-shadow: 3px 0 var(--toolbar-field-focus-border-color) inset !important; + } +} /** Panel UI ******************************************************************/ @supports -moz-bool-pref("userChrome.panel.remove_strip") { #appMenu-fxa-separator { diff --git a/src/urlview/_focus_item_border.scss b/src/urlview/_focus_item_border.scss new file mode 100644 index 0000000..0d608ba --- /dev/null +++ b/src/urlview/_focus_item_border.scss @@ -0,0 +1,4 @@ +.urlbarView-row:not([type="tip"], [type="dynamic"])[selected] > .urlbarView-row-inner, +.urlbarView-row-inner[selected] { + box-shadow: 3px 0 var(--toolbar-field-focus-border-color) inset !important; +} diff --git a/src/urlview/_index.scss b/src/urlview/_index.scss index 229704b..2f19fb1 100644 --- a/src/urlview/_index.scss +++ b/src/urlview/_index.scss @@ -12,3 +12,8 @@ @include Option("userChrome.urlView.go_button_when_typing") { @import "go_button_when_typing"; } + +/*= Url View - Item Focus Border =============================================*/ +@include Option("userChrome.urlView.focus_item_border") { + @import "focus_item_border"; +} diff --git a/user.js b/user.js index c15571f..8c1b616 100644 --- a/user.js +++ b/user.js @@ -142,6 +142,7 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.urlView.always_show_page_actions", true); // user_pref("userChrome.urlView.move_icon_to_left", true); // user_pref("userChrome.urlView.go_button_when_typing", true); +// user_pref("userChrome.urlView.focus_item_border", true); // user_pref("userChrome.tabbar.as_titlebar", true); // user_pref("userChrome.tabbar.fill_width", true); From 196fb4c23e61e33e81fe4a77141046aaa3309966 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 4 Nov 2022 07:27:52 +0900 Subject: [PATCH 36/88] Add: Rounding - URL View Item --- css/leptonChrome.css | 32 +++++++++++++++++++++++++------- src/rounding/_square.scss | 32 +++++++++++++++++++++++++------- user.js | 1 + 3 files changed, 51 insertions(+), 14 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index fc1b1c9..a6279f1 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -3273,22 +3273,34 @@ } @supports -moz-bool-pref("userChrome.rounding.square_button") { :root { - --toolbarbutton-border-radius: 0 !important; + --urlbar-icon-border-radius: 0 !important; + /* Original: calc(var(--toolbarbutton-border-radius) - 1px); */ + } + + .toolbarbutton-1, + .toolbarbutton-icon, + .panel-info-button, + .searchbar-engine-one-off-item, + .urlbarView-button, + .urlbarView-tip-button, + .urlbarView-action, + toolbarbutton.bookmark-item:not(.subviewbutton), + #sidebar-switcher-target { + --toolbarbutton-border-radius: 0; /* Original: 4px */ } button, - findbar toolbarbutton { + findbar toolbarbutton, + .notification-button { border-radius: 0 !important; } } -@supports -moz-bool-pref("userChrome.rounding.square_tab") or -moz-bool-pref("userChrome.round.square_button") { +@supports -moz-bool-pref("userChrome.rounding.square_tab") or -moz-bool-pref("userChrome.rounding.square_button") { /* Fix Tab bar button radius */ - #TabsToolbar .toolbarbutton-1:not(#tabs-newtab-button) > .toolbarbutton-icon, - #TabsToolbar .toolbarbutton-1:not(#tabs-newtab-button) > .toolbarbutton-text, - #TabsToolbar .toolbarbutton-1:not(#tabs-newtab-button) > .toolbarbutton-badge-stack, + #TabsToolbar .toolbarbutton-1:not(#tabs-newtab-button), .tab-close-button { - --tab-border-radius: var(--toolbarbutton-border-radius) !important; + --tab-border-radius: var(--toolbarbutton-border-radius); } } @supports -moz-bool-pref("userChrome.rounding.square_panel") { @@ -3323,11 +3335,17 @@ border-radius: 0 !important; } + #urlbar-input-container, #urlbar-background, #searchbar { --toolbarbutton-border-radius: 0; } } +@supports -moz-bool-pref("userChrome.rounding.square_urlView_item") { + .urlbarView-row-inner { + --toolbarbutton-border-radius: 0; + } +} @supports -moz-bool-pref("userChrome.rounding.square_checklabel") { .checkbox-check, xul|*.radio-check { diff --git a/src/rounding/_square.scss b/src/rounding/_square.scss index fa92deb..9c86f15 100644 --- a/src/rounding/_square.scss +++ b/src/rounding/_square.scss @@ -5,21 +5,32 @@ } @include Option("userChrome.rounding.square_button") { :root { - --toolbarbutton-border-radius: 0 !important; /* Original: 4px */ + --urlbar-icon-border-radius: 0 !important; /* Original: calc(var(--toolbarbutton-border-radius) - 1px); */ + } + + .toolbarbutton-1, + .toolbarbutton-icon, + .panel-info-button, + .searchbar-engine-one-off-item, + .urlbarView-button, + .urlbarView-tip-button, + .urlbarView-action, + toolbarbutton.bookmark-item:not(.subviewbutton), + #sidebar-switcher-target { + --toolbarbutton-border-radius: 0; /* Original: 4px */ } button, - findbar toolbarbutton { + findbar toolbarbutton, + .notification-button { border-radius: 0 !important; } } -@include Option("userChrome.rounding.square_tab", "userChrome.round.square_button") { +@include Option("userChrome.rounding.square_tab", "userChrome.rounding.square_button") { /* Fix Tab bar button radius */ - #TabsToolbar .toolbarbutton-1:not(#tabs-newtab-button) > .toolbarbutton-icon, - #TabsToolbar .toolbarbutton-1:not(#tabs-newtab-button) > .toolbarbutton-text, - #TabsToolbar .toolbarbutton-1:not(#tabs-newtab-button) > .toolbarbutton-badge-stack, + #TabsToolbar .toolbarbutton-1:not(#tabs-newtab-button), .tab-close-button { - --tab-border-radius: var(--toolbarbutton-border-radius) !important; + --tab-border-radius: var(--toolbarbutton-border-radius); } } @@ -57,12 +68,19 @@ border-radius: 0 !important; } + #urlbar-input-container, #urlbar-background, #searchbar { --toolbarbutton-border-radius: 0; } } +@include Option("userChrome.rounding.square_urlView_item") { + .urlbarView-row-inner { + --toolbarbutton-border-radius: 0; + } +} + @include Option("userChrome.rounding.square_checklabel") { .checkbox-check, xul|*.radio-check { diff --git a/user.js b/user.js index 8c1b616..b82ade6 100644 --- a/user.js +++ b/user.js @@ -126,6 +126,7 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.rounding.square_menupopup", true); // user_pref("userChrome.rounding.square_menuitem", true); // user_pref("userChrome.rounding.square_field", true); +// user_pref("userChrome.rounding.square_urlView_item", true); // user_pref("userChrome.rounding.square_checklabel", true); // user_pref("userChrome.padding.first_tab", true); From 64c2c4ce353104a93ec0860ef7c5bfa14f15c228 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 11 Nov 2022 11:28:23 +0900 Subject: [PATCH 37/88] Fix: Bottom Rounded Corner - Australis & Wave background --- css/leptonChrome.css | 44 +++-- icons/tab-bottom-corner-left-australis.svg | 8 +- icons/tab-bottom-corner-left-wave.svg | 8 +- icons/tab-bottom-corner-right-australis.svg | 8 +- icons/tab-bottom-corner-right-wave.svg | 8 +- .../_bottom_rounded_corner_others.scss | 166 +++++++++++------- 6 files changed, 154 insertions(+), 88 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index bd3c231..f66ee00 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6684,11 +6684,14 @@ --uc-tab-corner-half-size: calc(var(--uc-tab-corner-size) / 2); --uc-tab-corner-half-size-reverse: calc(var(--uc-tab-corner-half-size) * -1); --uc-tab-corner-height: calc(var(--tab-min-height) - var(--tab-block-margin) + 1px); + --uc-tab-corner-bgimage: none; } @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") { #tabbrowser-tabs { --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-wave.svg"); + --uc-tab-corner-left-side-clipPath: url("../icons/tab-bottom-corner-left-wave.svg#svgClipPath"); --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-wave.svg"); + --uc-tab-corner-right-side-clipPath: url("../icons/tab-bottom-corner-right-wave.svg#svgClipPath"); --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-wave-soft.svg"); --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-wave-soft.svg"); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-wave-clipped.svg"); @@ -6699,7 +6702,9 @@ @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.australis") { #tabbrowser-tabs { --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-australis.svg"); + --uc-tab-corner-left-side-clipPath: url("../icons/tab-bottom-corner-left-australis.svg#svgClipPath"); --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-australis.svg"); + --uc-tab-corner-right-side-clipPath: url("../icons/tab-bottom-corner-right-australis.svg#svgClipPath"); --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-australis-soft.svg"); --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-australis-soft.svg"); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-australis-clipped.svg"); @@ -6710,7 +6715,9 @@ @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome") { #tabbrowser-tabs { --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-chrome.svg"); + --uc-tab-corner-left-side-clipPath: url("../icons/tab-bottom-corner-left-chrome.svg#svgClipPath"); --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-chrome.svg"); + --uc-tab-corner-right-side-clipPath: url("../icons/tab-bottom-corner-right-chrome.svg#svgClipPath"); --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-chrome-soft.svg"); --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-chrome-soft.svg"); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chrome-clipped.svg"); @@ -6721,7 +6728,9 @@ @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") { #tabbrowser-tabs { --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-chromeLegacy.svg"); + --uc-tab-corner-left-side-clipPath: url("../icons/tab-bottom-corner-left-chromeLegacy.svg#svgClipPath"); --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-chromeLegacy.svg"); + --uc-tab-corner-right-side-clipPath: url("../icons/tab-bottom-corner-right-chromeLegacy.svg#svgClipPath"); --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-chromeLegacy-soft.svg"); --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-chromeLegacy-soft.svg"); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chromeLegacy-clipped.svg"); @@ -6732,7 +6741,9 @@ @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { #tabbrowser-tabs { --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-edge.svg"); + --uc-tab-corner-left-side-clipPath: url("../icons/tab-bottom-corner-left-edge.svg#svgClipPath"); --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-edge.svg"); + --uc-tab-corner-right-side-clipPath: url("../icons/tab-bottom-corner-right-edge.svg#svgClipPath"); --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-edge-soft.svg"); --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-edge-soft.svg"); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-edge-clipped.svg"); @@ -6780,9 +6791,10 @@ stroke: transparent; -moz-context-properties: fill, stroke; /* Image */ - background-size: cover; - background-repeat: no-repeat; - background-position: bottom; + background-size: cover, auto auto; + background-repeat: no-repeat, no-repeat; + background-position: bottom, right top; + background-attachment: scroll, fixed; } @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") { .tabbrowser-tab .tab-background::before, @@ -6805,32 +6817,28 @@ } .tabbrowser-tab .tab-background::before { left: var(--uc-tab-corner-half-size-reverse); - background-image: var(--uc-tab-corner-left-side-svg); + background-image: var(--uc-tab-corner-left-side-svg), var(--uc-tab-corner-bgimage); + clip-path: var(--uc-tab-corner-left-side-clipPath); } .tabbrowser-tab .tab-background::after { right: var(--uc-tab-corner-half-size-reverse); - background-image: var(--uc-tab-corner-right-side-svg); + background-image: var(--uc-tab-corner-right-side-svg), var(--uc-tab-corner-bgimage); + clip-path: var(--uc-tab-corner-right-side-clipPath); } .tabbrowser-tab[beforeselected-visible] .tab-background::after { - background-image: var(--uc-tab-corner-right-side-svg-clipped); + --uc-tab-corner-right-side-svg: var(--uc-tab-corner-right-side-svg-clipped); } .tabbrowser-tab[visuallyselected] + .tabbrowser-tab .tab-background::before { - background-image: var(--uc-tab-corner-left-side-svg-clipped); + --uc-tab-corner-left-side-svg: var(--uc-tab-corner-left-side-svg-clipped); } - .tabbrowser-tab[positionpinnedtabs] .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before { - background-image: var(--uc-tab-corner-left-side-svg) !important; - } - .tabbrowser-tab[visuallyselected] .tab-background::before, - .tabbrowser-tab[visuallyselected] .tab-background::after, - .tabbrowser-tab[multiselected] .tab-background::before, - .tabbrowser-tab[multiselected] .tab-background::after { + .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::before, + .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::after { + --uc-tab-corner-bgimage: var(--lwt-header-image, none); fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); } @supports -moz-bool-pref("userChrome.tab.box_shadow") { - .tabbrowser-tab[visuallyselected] .tab-background::before, - .tabbrowser-tab[visuallyselected] .tab-background::after, - .tabbrowser-tab[multiselected] .tab-background::before, - .tabbrowser-tab[multiselected] .tab-background::after { + .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::before, + .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::after { stroke: var(--uc-tab-shadow-color); } } diff --git a/icons/tab-bottom-corner-left-australis.svg b/icons/tab-bottom-corner-left-australis.svg index a16786b..d8b9e26 100644 --- a/icons/tab-bottom-corner-left-australis.svg +++ b/icons/tab-bottom-corner-left-australis.svg @@ -1,3 +1,9 @@ - + + + + + + + diff --git a/icons/tab-bottom-corner-left-wave.svg b/icons/tab-bottom-corner-left-wave.svg index 467efa9..9a0cdd0 100644 --- a/icons/tab-bottom-corner-left-wave.svg +++ b/icons/tab-bottom-corner-left-wave.svg @@ -1,3 +1,9 @@ - + + + + + + + diff --git a/icons/tab-bottom-corner-right-australis.svg b/icons/tab-bottom-corner-right-australis.svg index 367d660..c41499b 100644 --- a/icons/tab-bottom-corner-right-australis.svg +++ b/icons/tab-bottom-corner-right-australis.svg @@ -1,3 +1,9 @@ - + + + + + + + diff --git a/icons/tab-bottom-corner-right-wave.svg b/icons/tab-bottom-corner-right-wave.svg index ccf0cbd..7faf843 100644 --- a/icons/tab-bottom-corner-right-wave.svg +++ b/icons/tab-bottom-corner-right-wave.svg @@ -1,3 +1,9 @@ - + + + + + + + diff --git a/src/tab/selected_tab/_bottom_rounded_corner_others.scss b/src/tab/selected_tab/_bottom_rounded_corner_others.scss index 28aafb7..ad1e7ad 100644 --- a/src/tab/selected_tab/_bottom_rounded_corner_others.scss +++ b/src/tab/selected_tab/_bottom_rounded_corner_others.scss @@ -1,61 +1,24 @@ -#tabbrowser-tabs { - --uc-tab-corner-half-size: calc(var(--uc-tab-corner-size) / 2); - --uc-tab-corner-half-size-reverse: calc(var(--uc-tab-corner-half-size) * -1); - --uc-tab-corner-height: calc(var(--tab-min-height) - var(--tab-block-margin) + 1px); +//-- Mixin --------------------------------------------------------------------- +@function _clipPathURL($svg) { + @return url($svg + "#svgClipPath"); +} +@mixin _clipPath($svg, $position) { + $result: _clipPathURL($svg); - @include Option("userChrome.tab.bottom_rounded_corner.wave") { - --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-wave.svg"); - --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-wave.svg"); - --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-wave-soft.svg"); - --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-wave-soft.svg"); - --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-wave-clipped.svg"); - --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-wave-clipped.svg"); - - --uc-tab-corner-size: 30px; + @if $position == "left" { + --uc-tab-corner-left-side-svg: #{ url($svg) }; + --uc-tab-corner-left-side-clipPath: #{ $result }; } - @include Option("userChrome.tab.bottom_rounded_corner.australis") { - --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-australis.svg"); - --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-australis.svg"); - --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-australis-soft.svg"); - --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-australis-soft.svg"); - --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-australis-clipped.svg"); - --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-australis-cilpped.svg"); - - --uc-tab-corner-size: 30px; - } - @include Option("userChrome.tab.bottom_rounded_corner.chrome") { - --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-chrome.svg"); - --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-chrome.svg"); - --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-chrome-soft.svg"); - --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-chrome-soft.svg"); - --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chrome-clipped.svg"); - --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-chrome-clipped.svg"); - - --uc-tab-corner-size: 16px; // 18px; - } - @include Option("userChrome.tab.bottom_rounded_corner.chrome_legacy") { - --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-chromeLegacy.svg"); - --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-chromeLegacy.svg"); - --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-chromeLegacy-soft.svg"); - --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-chromeLegacy-soft.svg"); - --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chromeLegacy-clipped.svg"); - --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-chromeLegacy-clipped.svg"); - - --uc-tab-corner-size: 35px; - } - @include Option("userChrome.tab.bottom_rounded_corner.edge") { - --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-edge.svg"); - --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-edge.svg"); - --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-edge-soft.svg"); - --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-edge-soft.svg"); - --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-edge-clipped.svg"); - --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-edge-clipped.svg"); - - --uc-tab-corner-size: 16px; + @else if $position == "right" { + --uc-tab-corner-right-side-svg: #{ url($svg) }; + --uc-tab-corner-right-side-clipPath: #{ $result }; } } +@mixin _tabCornerSVG($left, $right) { + @include _clipPath($left, "left" ); + @include _clipPath($right, "right"); +} -//-- Mixin --------------------------------------------------------------------- @mixin _bottomRoundedCornerOtherPadding() { padding-inline: 0 !important; overflow-clip-margin: var(--uc-tab-corner-half-size) !important; @@ -70,6 +33,74 @@ //------------------------------------------------------------------------------ +#tabbrowser-tabs { + --uc-tab-corner-half-size: calc(var(--uc-tab-corner-size) / 2); + --uc-tab-corner-half-size-reverse: calc(var(--uc-tab-corner-half-size) * -1); + --uc-tab-corner-height: calc(var(--tab-min-height) - var(--tab-block-margin) + 1px); + --uc-tab-corner-bgimage: none; + + @include Option("userChrome.tab.bottom_rounded_corner.wave") { + @include _tabCornerSVG( + "../icons/tab-bottom-corner-left-wave.svg", + "../icons/tab-bottom-corner-right-wave.svg" + ); + --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-wave-soft.svg"); + --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-wave-soft.svg"); + --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-wave-clipped.svg"); + --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-wave-clipped.svg"); + + --uc-tab-corner-size: 30px; + } + @include Option("userChrome.tab.bottom_rounded_corner.australis") { + @include _tabCornerSVG( + "../icons/tab-bottom-corner-left-australis.svg", + "../icons/tab-bottom-corner-right-australis.svg" + ); + --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-australis-soft.svg"); + --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-australis-soft.svg"); + --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-australis-clipped.svg"); + --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-australis-cilpped.svg"); + + --uc-tab-corner-size: 30px; + } + @include Option("userChrome.tab.bottom_rounded_corner.chrome") { + @include _tabCornerSVG( + "../icons/tab-bottom-corner-left-chrome.svg", + "../icons/tab-bottom-corner-right-chrome.svg" + ); + --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-chrome-soft.svg"); + --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-chrome-soft.svg"); + --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chrome-clipped.svg"); + --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-chrome-clipped.svg"); + + --uc-tab-corner-size: 16px; // 18px; + } + @include Option("userChrome.tab.bottom_rounded_corner.chrome_legacy") { + @include _tabCornerSVG( + "../icons/tab-bottom-corner-left-chromeLegacy.svg", + "../icons/tab-bottom-corner-right-chromeLegacy.svg" + ); + --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-chromeLegacy-soft.svg"); + --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-chromeLegacy-soft.svg"); + --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chromeLegacy-clipped.svg"); + --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-chromeLegacy-clipped.svg"); + + --uc-tab-corner-size: 35px; + } + @include Option("userChrome.tab.bottom_rounded_corner.edge") { + @include _tabCornerSVG( + "../icons/tab-bottom-corner-left-edge.svg", + "../icons/tab-bottom-corner-right-edge.svg" + ); + --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-edge-soft.svg"); + --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-edge-soft.svg"); + --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-edge-clipped.svg"); + --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-edge-clipped.svg"); + + --uc-tab-corner-size: 16px; + } +} + .tabbrowser-tab { @include Option("userChrome.tab.bottom_rounded_corner.all") { @include _bottomRoundedCornerOtherPadding; @@ -109,9 +140,10 @@ /* Image */ // background-size: var(--tab-corner-rounding); - background-size: cover; - background-repeat: no-repeat; - background-position: bottom; + background-size: cover, auto auto; + background-repeat: no-repeat, no-repeat; + background-position: bottom, right top; + background-attachment: scroll, fixed; @include Option("userChrome.tab.bottom_rounded_corner.all") { content: ""; @@ -127,30 +159,32 @@ fill: var(--lwt-selected-tab-background-color, var(--tab-selected-bgcolor, var(--toolbar-bgcolor))) !important; } } - &::before { left: var(--uc-tab-corner-half-size-reverse); - background-image: var(--uc-tab-corner-left-side-svg); + background-image: var(--uc-tab-corner-left-side-svg), var(--uc-tab-corner-bgimage); + clip-path: var(--uc-tab-corner-left-side-clipPath); } &::after { right: var(--uc-tab-corner-half-size-reverse); - background-image: var(--uc-tab-corner-right-side-svg); + background-image: var(--uc-tab-corner-right-side-svg), var(--uc-tab-corner-bgimage); + clip-path: var(--uc-tab-corner-right-side-clipPath); } } + &[beforeselected-visible] .tab-background::after { - background-image: var(--uc-tab-corner-right-side-svg-clipped); + --uc-tab-corner-right-side-svg: var(--uc-tab-corner-right-side-svg-clipped); } &[visuallyselected] + .tabbrowser-tab .tab-background::before { - background-image: var(--uc-tab-corner-left-side-svg-clipped); - } - &[positionpinnedtabs] .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before { - background-image: var(--uc-tab-corner-left-side-svg) !important; + --uc-tab-corner-left-side-svg: var(--uc-tab-corner-left-side-svg-clipped); } + // &[positionpinnedtabs] .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before { + // background-image: var(--uc-tab-corner-left-side-svg), var(--lwt-header-image, none) !important; + // } - &[visuallyselected] .tab-background, - &[multiselected] .tab-background { + &:is([visuallyselected], [multiselected]) .tab-background { &::before, &::after { + --uc-tab-corner-bgimage: var(--lwt-header-image, none); fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); @include Option("userChrome.tab.box_shadow") { From 776e148df97f0aad78fbc277823fca036ebb0a5b Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 12 Nov 2022 18:18:08 +0900 Subject: [PATCH 38/88] Fix: Bottom Rounded Corner - Edge, Chrome, Chrome Legacy background clip --- css/leptonChrome.css | 2 +- icons/tab-bottom-corner-left-chrome.svg | 8 +++++++- icons/tab-bottom-corner-left-chromeLegacy.svg | 8 +++++++- icons/tab-bottom-corner-left-edge.svg | 8 +++++++- icons/tab-bottom-corner-right-chrome.svg | 8 +++++++- icons/tab-bottom-corner-right-chromeLegacy.svg | 8 +++++++- icons/tab-bottom-corner-right-edge.svg | 8 +++++++- src/tab/selected_tab/_bottom_rounded_corner_others.scss | 2 +- 8 files changed, 44 insertions(+), 8 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index f66ee00..13f96c6 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6748,7 +6748,7 @@ --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-edge-soft.svg"); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-edge-clipped.svg"); --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-edge-clipped.svg"); - --uc-tab-corner-size: 16px; + --uc-tab-corner-size: 8px; } } diff --git a/icons/tab-bottom-corner-left-chrome.svg b/icons/tab-bottom-corner-left-chrome.svg index 12bbdf4..987117d 100644 --- a/icons/tab-bottom-corner-left-chrome.svg +++ b/icons/tab-bottom-corner-left-chrome.svg @@ -1,3 +1,9 @@ - + + + + + + + diff --git a/icons/tab-bottom-corner-left-chromeLegacy.svg b/icons/tab-bottom-corner-left-chromeLegacy.svg index 01fd923..489aca2 100644 --- a/icons/tab-bottom-corner-left-chromeLegacy.svg +++ b/icons/tab-bottom-corner-left-chromeLegacy.svg @@ -1,3 +1,9 @@ - + + + + + + + diff --git a/icons/tab-bottom-corner-left-edge.svg b/icons/tab-bottom-corner-left-edge.svg index c99d2d7..85f2837 100644 --- a/icons/tab-bottom-corner-left-edge.svg +++ b/icons/tab-bottom-corner-left-edge.svg @@ -1,3 +1,9 @@ - + + + + + + + diff --git a/icons/tab-bottom-corner-right-chrome.svg b/icons/tab-bottom-corner-right-chrome.svg index 1a6b3ba..3085046 100644 --- a/icons/tab-bottom-corner-right-chrome.svg +++ b/icons/tab-bottom-corner-right-chrome.svg @@ -1,3 +1,9 @@ - + + + + + + + diff --git a/icons/tab-bottom-corner-right-chromeLegacy.svg b/icons/tab-bottom-corner-right-chromeLegacy.svg index e4c0688..2aa36f6 100644 --- a/icons/tab-bottom-corner-right-chromeLegacy.svg +++ b/icons/tab-bottom-corner-right-chromeLegacy.svg @@ -1,3 +1,9 @@ - + + + + + + + diff --git a/icons/tab-bottom-corner-right-edge.svg b/icons/tab-bottom-corner-right-edge.svg index 90d37e0..c386c8f 100644 --- a/icons/tab-bottom-corner-right-edge.svg +++ b/icons/tab-bottom-corner-right-edge.svg @@ -1,3 +1,9 @@ - + + + + + + + diff --git a/src/tab/selected_tab/_bottom_rounded_corner_others.scss b/src/tab/selected_tab/_bottom_rounded_corner_others.scss index ad1e7ad..8902594 100644 --- a/src/tab/selected_tab/_bottom_rounded_corner_others.scss +++ b/src/tab/selected_tab/_bottom_rounded_corner_others.scss @@ -97,7 +97,7 @@ --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-edge-clipped.svg"); --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-edge-clipped.svg"); - --uc-tab-corner-size: 16px; + --uc-tab-corner-size: 8px; // 16px } } From 94ac9bd408ede9ce5c9aa124af5414d412cf42fd Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 13 Nov 2022 14:56:57 +0900 Subject: [PATCH 39/88] Fix: Bottom Rounded Corner - Linux's selected background --- css/leptonChrome.css | 2 +- src/tab/selected_tab/_bottom_rounded_corner_others.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 13f96c6..44a744c 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6873,7 +6873,6 @@ } :root:not([lwtheme="true"]) .tabbrowser-tab[visuallyselected] .tab-background { background-clip: content-box; - background-color: unset !important; } :root:not([lwtheme="true"]) .tabbrowser-tab[visuallyselected] .tab-background::before, :root:not([lwtheme="true"]) .tabbrowser-tab[visuallyselected] .tab-background::after { @@ -6881,6 +6880,7 @@ * --toolbar-non-lwt-bgcolor: -moz-dialog; * --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15)); */ + --uc-tab-corner-bgimage: linear-gradient(var(--toolbar-non-lwt-bgcolor), var(--toolbar-non-lwt-bgcolor)); fill: rgba(255, 255, 255, 0.075); } @supports not -moz-bool-pref("userChrome.tab.color_like_toolbar") { diff --git a/src/tab/selected_tab/_bottom_rounded_corner_others.scss b/src/tab/selected_tab/_bottom_rounded_corner_others.scss index 8902594..23f484f 100644 --- a/src/tab/selected_tab/_bottom_rounded_corner_others.scss +++ b/src/tab/selected_tab/_bottom_rounded_corner_others.scss @@ -227,7 +227,6 @@ } &[visuallyselected] .tab-background { background-clip: content-box; - background-color: unset !important; // --toolbar-non-lwt-bgcolor: -moz-dialog; &::before, &::after { @@ -235,6 +234,7 @@ * --toolbar-non-lwt-bgcolor: -moz-dialog; * --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15)); */ + --uc-tab-corner-bgimage: linear-gradient(var(--toolbar-non-lwt-bgcolor), var(--toolbar-non-lwt-bgcolor)); fill: rgba(255, 255, 255, .075); @include NotOption("userChrome.tab.color_like_toolbar") { fill: rgba(255, 255, 255, .15); From dc3e65a14174e186494998330779da41568de9c3 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 13 Nov 2022 17:41:27 +0900 Subject: [PATCH 40/88] Fix: Bottom Rounded Corner - Moving with header image --- css/leptonChrome.css | 8 +++++++- src/tab/selected_tab/_bottom_rounded_corner_others.scss | 6 +++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 44a744c..43e63e4 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6831,9 +6831,11 @@ .tabbrowser-tab[visuallyselected] + .tabbrowser-tab .tab-background::before { --uc-tab-corner-left-side-svg: var(--uc-tab-corner-left-side-svg-clipped); } + .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background { + --uc-tab-corner-bgimage: var(--lwt-header-image, none); + } .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::before, .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::after { - --uc-tab-corner-bgimage: var(--lwt-header-image, none); fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); } @supports -moz-bool-pref("userChrome.tab.box_shadow") { @@ -6853,6 +6855,10 @@ fill: var(--uc-multiselected-tab-bgcolor); } } + #tabbrowser-tabs[movingtab] .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background:-moz-lwtheme { + --uc-tab-corner-bgimage: none; + } + @supports -moz-bool-pref("userChrome.tab.box_shadow") { :root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) #TabsToolbar[brighttext] diff --git a/src/tab/selected_tab/_bottom_rounded_corner_others.scss b/src/tab/selected_tab/_bottom_rounded_corner_others.scss index 23f484f..20bdc4e 100644 --- a/src/tab/selected_tab/_bottom_rounded_corner_others.scss +++ b/src/tab/selected_tab/_bottom_rounded_corner_others.scss @@ -182,9 +182,10 @@ // } &:is([visuallyselected], [multiselected]) .tab-background { + --uc-tab-corner-bgimage: var(--lwt-header-image, none); + &::before, &::after { - --uc-tab-corner-bgimage: var(--lwt-header-image, none); fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); @include Option("userChrome.tab.box_shadow") { @@ -207,6 +208,9 @@ } } } +#tabbrowser-tabs[movingtab] .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background:-moz-lwtheme { + --uc-tab-corner-bgimage: none; +} :root { &:is( From 702fa356e949a4d043abcc5cb116bf66dcf820d0 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 14 Nov 2022 18:03:31 +0900 Subject: [PATCH 41/88] Fix: Bottom Rounded Corner - Soft stroke with opacity --- css/leptonChrome.css | 23 ++++++++----------- .../tab-bottom-corner-left-australis-soft.svg | 3 --- icons/tab-bottom-corner-left-australis.svg | 2 +- icons/tab-bottom-corner-left-chrome-soft.svg | 3 --- icons/tab-bottom-corner-left-chrome.svg | 2 +- ...b-bottom-corner-left-chromeLegacy-soft.svg | 3 --- icons/tab-bottom-corner-left-chromeLegacy.svg | 2 +- icons/tab-bottom-corner-left-edge-soft.svg | 3 --- icons/tab-bottom-corner-left-edge.svg | 2 +- icons/tab-bottom-corner-left-wave-soft.svg | 3 --- icons/tab-bottom-corner-left-wave.svg | 2 +- ...tab-bottom-corner-right-australis-soft.svg | 3 --- icons/tab-bottom-corner-right-australis.svg | 2 +- icons/tab-bottom-corner-right-chrome-soft.svg | 3 --- icons/tab-bottom-corner-right-chrome.svg | 2 +- ...-bottom-corner-right-chromeLegacy-soft.svg | 3 --- .../tab-bottom-corner-right-chromeLegacy.svg | 2 +- icons/tab-bottom-corner-right-edge-soft.svg | 3 --- icons/tab-bottom-corner-right-edge.svg | 2 +- icons/tab-bottom-corner-right-wave-soft.svg | 3 --- icons/tab-bottom-corner-right-wave.svg | 2 +- .../_bottom_rounded_corner_others.scss | 20 +++++----------- 22 files changed, 25 insertions(+), 68 deletions(-) delete mode 100644 icons/tab-bottom-corner-left-australis-soft.svg delete mode 100644 icons/tab-bottom-corner-left-chrome-soft.svg delete mode 100644 icons/tab-bottom-corner-left-chromeLegacy-soft.svg delete mode 100644 icons/tab-bottom-corner-left-edge-soft.svg delete mode 100644 icons/tab-bottom-corner-left-wave-soft.svg delete mode 100644 icons/tab-bottom-corner-right-australis-soft.svg delete mode 100644 icons/tab-bottom-corner-right-chrome-soft.svg delete mode 100644 icons/tab-bottom-corner-right-chromeLegacy-soft.svg delete mode 100644 icons/tab-bottom-corner-right-edge-soft.svg delete mode 100644 icons/tab-bottom-corner-right-wave-soft.svg diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 43e63e4..0d4dfa6 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6692,8 +6692,6 @@ --uc-tab-corner-left-side-clipPath: url("../icons/tab-bottom-corner-left-wave.svg#svgClipPath"); --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-wave.svg"); --uc-tab-corner-right-side-clipPath: url("../icons/tab-bottom-corner-right-wave.svg#svgClipPath"); - --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-wave-soft.svg"); - --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-wave-soft.svg"); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-wave-clipped.svg"); --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-wave-clipped.svg"); --uc-tab-corner-size: 30px; @@ -6705,8 +6703,6 @@ --uc-tab-corner-left-side-clipPath: url("../icons/tab-bottom-corner-left-australis.svg#svgClipPath"); --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-australis.svg"); --uc-tab-corner-right-side-clipPath: url("../icons/tab-bottom-corner-right-australis.svg#svgClipPath"); - --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-australis-soft.svg"); - --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-australis-soft.svg"); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-australis-clipped.svg"); --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-australis-cilpped.svg"); --uc-tab-corner-size: 30px; @@ -6718,8 +6714,6 @@ --uc-tab-corner-left-side-clipPath: url("../icons/tab-bottom-corner-left-chrome.svg#svgClipPath"); --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-chrome.svg"); --uc-tab-corner-right-side-clipPath: url("../icons/tab-bottom-corner-right-chrome.svg#svgClipPath"); - --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-chrome-soft.svg"); - --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-chrome-soft.svg"); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chrome-clipped.svg"); --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-chrome-clipped.svg"); --uc-tab-corner-size: 16px; @@ -6731,8 +6725,6 @@ --uc-tab-corner-left-side-clipPath: url("../icons/tab-bottom-corner-left-chromeLegacy.svg#svgClipPath"); --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-chromeLegacy.svg"); --uc-tab-corner-right-side-clipPath: url("../icons/tab-bottom-corner-right-chromeLegacy.svg#svgClipPath"); - --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-chromeLegacy-soft.svg"); - --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-chromeLegacy-soft.svg"); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chromeLegacy-clipped.svg"); --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-chromeLegacy-clipped.svg"); --uc-tab-corner-size: 35px; @@ -6744,8 +6736,6 @@ --uc-tab-corner-left-side-clipPath: url("../icons/tab-bottom-corner-left-edge.svg#svgClipPath"); --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-edge.svg"); --uc-tab-corner-right-side-clipPath: url("../icons/tab-bottom-corner-right-edge.svg#svgClipPath"); - --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-edge-soft.svg"); - --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-edge-soft.svg"); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-edge-clipped.svg"); --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-edge-clipped.svg"); --uc-tab-corner-size: 8px; @@ -6789,7 +6779,7 @@ /* Color */ fill: transparent; stroke: transparent; - -moz-context-properties: fill, stroke; + -moz-context-properties: fill, stroke, stroke-opacity; /* Image */ background-size: cover, auto auto; background-repeat: no-repeat, no-repeat; @@ -6863,9 +6853,14 @@ :root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab { - --uc-tab-corner-left-side-svg: var(--uc-tab-corner-left-side-svg-soft); - --uc-tab-corner-right-side-svg: var(--uc-tab-corner-right-side-svg-soft); + .tabbrowser-tab:is([visuallyselected], [multiselected]) + .tab-background::before, + :root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) + #TabsToolbar[brighttext] + #tabbrowser-tabs:not([noshadowfortests]) + .tabbrowser-tab:is([visuallyselected], [multiselected]) + .tab-background::after { + stroke-opacity: 0.3; } } @media (-moz-gtk-csd-available) { diff --git a/icons/tab-bottom-corner-left-australis-soft.svg b/icons/tab-bottom-corner-left-australis-soft.svg deleted file mode 100644 index c50ba8b..0000000 --- a/icons/tab-bottom-corner-left-australis-soft.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/icons/tab-bottom-corner-left-australis.svg b/icons/tab-bottom-corner-left-australis.svg index d8b9e26..25ea18d 100644 --- a/icons/tab-bottom-corner-left-australis.svg +++ b/icons/tab-bottom-corner-left-australis.svg @@ -1,6 +1,6 @@ - + diff --git a/icons/tab-bottom-corner-left-chrome-soft.svg b/icons/tab-bottom-corner-left-chrome-soft.svg deleted file mode 100644 index 96dcac8..0000000 --- a/icons/tab-bottom-corner-left-chrome-soft.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/icons/tab-bottom-corner-left-chrome.svg b/icons/tab-bottom-corner-left-chrome.svg index 987117d..5c422be 100644 --- a/icons/tab-bottom-corner-left-chrome.svg +++ b/icons/tab-bottom-corner-left-chrome.svg @@ -1,6 +1,6 @@ - + diff --git a/icons/tab-bottom-corner-left-chromeLegacy-soft.svg b/icons/tab-bottom-corner-left-chromeLegacy-soft.svg deleted file mode 100644 index 4c0ca25..0000000 --- a/icons/tab-bottom-corner-left-chromeLegacy-soft.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/icons/tab-bottom-corner-left-chromeLegacy.svg b/icons/tab-bottom-corner-left-chromeLegacy.svg index 489aca2..b497437 100644 --- a/icons/tab-bottom-corner-left-chromeLegacy.svg +++ b/icons/tab-bottom-corner-left-chromeLegacy.svg @@ -1,6 +1,6 @@ - + diff --git a/icons/tab-bottom-corner-left-edge-soft.svg b/icons/tab-bottom-corner-left-edge-soft.svg deleted file mode 100644 index 2e14868..0000000 --- a/icons/tab-bottom-corner-left-edge-soft.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/icons/tab-bottom-corner-left-edge.svg b/icons/tab-bottom-corner-left-edge.svg index 85f2837..077f0fc 100644 --- a/icons/tab-bottom-corner-left-edge.svg +++ b/icons/tab-bottom-corner-left-edge.svg @@ -1,6 +1,6 @@ - + diff --git a/icons/tab-bottom-corner-left-wave-soft.svg b/icons/tab-bottom-corner-left-wave-soft.svg deleted file mode 100644 index c3de938..0000000 --- a/icons/tab-bottom-corner-left-wave-soft.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/icons/tab-bottom-corner-left-wave.svg b/icons/tab-bottom-corner-left-wave.svg index 9a0cdd0..d01467e 100644 --- a/icons/tab-bottom-corner-left-wave.svg +++ b/icons/tab-bottom-corner-left-wave.svg @@ -1,6 +1,6 @@ - + diff --git a/icons/tab-bottom-corner-right-australis-soft.svg b/icons/tab-bottom-corner-right-australis-soft.svg deleted file mode 100644 index 8bb5c2f..0000000 --- a/icons/tab-bottom-corner-right-australis-soft.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/icons/tab-bottom-corner-right-australis.svg b/icons/tab-bottom-corner-right-australis.svg index c41499b..3e10743 100644 --- a/icons/tab-bottom-corner-right-australis.svg +++ b/icons/tab-bottom-corner-right-australis.svg @@ -1,6 +1,6 @@ - + diff --git a/icons/tab-bottom-corner-right-chrome-soft.svg b/icons/tab-bottom-corner-right-chrome-soft.svg deleted file mode 100644 index 28cb86b..0000000 --- a/icons/tab-bottom-corner-right-chrome-soft.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/icons/tab-bottom-corner-right-chrome.svg b/icons/tab-bottom-corner-right-chrome.svg index 3085046..2466185 100644 --- a/icons/tab-bottom-corner-right-chrome.svg +++ b/icons/tab-bottom-corner-right-chrome.svg @@ -1,6 +1,6 @@ - + diff --git a/icons/tab-bottom-corner-right-chromeLegacy-soft.svg b/icons/tab-bottom-corner-right-chromeLegacy-soft.svg deleted file mode 100644 index 65b6e61..0000000 --- a/icons/tab-bottom-corner-right-chromeLegacy-soft.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/icons/tab-bottom-corner-right-chromeLegacy.svg b/icons/tab-bottom-corner-right-chromeLegacy.svg index 2aa36f6..c8ad1de 100644 --- a/icons/tab-bottom-corner-right-chromeLegacy.svg +++ b/icons/tab-bottom-corner-right-chromeLegacy.svg @@ -1,6 +1,6 @@ - + diff --git a/icons/tab-bottom-corner-right-edge-soft.svg b/icons/tab-bottom-corner-right-edge-soft.svg deleted file mode 100644 index 991fe92..0000000 --- a/icons/tab-bottom-corner-right-edge-soft.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/icons/tab-bottom-corner-right-edge.svg b/icons/tab-bottom-corner-right-edge.svg index c386c8f..4787865 100644 --- a/icons/tab-bottom-corner-right-edge.svg +++ b/icons/tab-bottom-corner-right-edge.svg @@ -1,6 +1,6 @@ - + diff --git a/icons/tab-bottom-corner-right-wave-soft.svg b/icons/tab-bottom-corner-right-wave-soft.svg deleted file mode 100644 index 0f56bc9..0000000 --- a/icons/tab-bottom-corner-right-wave-soft.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/icons/tab-bottom-corner-right-wave.svg b/icons/tab-bottom-corner-right-wave.svg index 7faf843..138b5b3 100644 --- a/icons/tab-bottom-corner-right-wave.svg +++ b/icons/tab-bottom-corner-right-wave.svg @@ -1,6 +1,6 @@ - + diff --git a/src/tab/selected_tab/_bottom_rounded_corner_others.scss b/src/tab/selected_tab/_bottom_rounded_corner_others.scss index 20bdc4e..529b814 100644 --- a/src/tab/selected_tab/_bottom_rounded_corner_others.scss +++ b/src/tab/selected_tab/_bottom_rounded_corner_others.scss @@ -44,8 +44,6 @@ "../icons/tab-bottom-corner-left-wave.svg", "../icons/tab-bottom-corner-right-wave.svg" ); - --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-wave-soft.svg"); - --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-wave-soft.svg"); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-wave-clipped.svg"); --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-wave-clipped.svg"); @@ -56,8 +54,6 @@ "../icons/tab-bottom-corner-left-australis.svg", "../icons/tab-bottom-corner-right-australis.svg" ); - --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-australis-soft.svg"); - --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-australis-soft.svg"); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-australis-clipped.svg"); --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-australis-cilpped.svg"); @@ -68,8 +64,6 @@ "../icons/tab-bottom-corner-left-chrome.svg", "../icons/tab-bottom-corner-right-chrome.svg" ); - --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-chrome-soft.svg"); - --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-chrome-soft.svg"); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chrome-clipped.svg"); --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-chrome-clipped.svg"); @@ -80,8 +74,6 @@ "../icons/tab-bottom-corner-left-chromeLegacy.svg", "../icons/tab-bottom-corner-right-chromeLegacy.svg" ); - --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-chromeLegacy-soft.svg"); - --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-chromeLegacy-soft.svg"); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chromeLegacy-clipped.svg"); --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-chromeLegacy-clipped.svg"); @@ -92,8 +84,6 @@ "../icons/tab-bottom-corner-left-edge.svg", "../icons/tab-bottom-corner-right-edge.svg" ); - --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-edge-soft.svg"); - --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-edge-soft.svg"); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-edge-clipped.svg"); --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-edge-clipped.svg"); @@ -132,7 +122,7 @@ /* Color */ fill: transparent; stroke: transparent; - -moz-context-properties: fill, stroke; + -moz-context-properties: fill, stroke, stroke-opacity; // For stroke // box-shadow: 0 0 4px rgba(0,0,0,.4); // box-shadow: 0 0 1px var(--toolbar-color) !important; @@ -217,10 +207,12 @@ [lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab { + ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background { @include Option("userChrome.tab.box_shadow") { - --uc-tab-corner-left-side-svg: var(--uc-tab-corner-left-side-svg-soft); - --uc-tab-corner-right-side-svg: var(--uc-tab-corner-right-side-svg-soft); + &::before, + &::after { + stroke-opacity: 0.3; + } } } @include OS($linux) { From 92c6ecdba392f25d044e41269e46913845568012 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 15 Nov 2022 10:29:34 +0900 Subject: [PATCH 42/88] Fix: Bottom Rounded Corner - Clipped stroke & Optimize Images --- CREDITS | 5 +++++ icons/tab-bottom-corner-left-australis-clipped.svg | 4 +++- icons/tab-bottom-corner-left-australis.svg | 2 +- icons/tab-bottom-corner-left-chrome-clipped.svg | 4 +++- icons/tab-bottom-corner-left-chrome.svg | 2 +- icons/tab-bottom-corner-left-chromeLegacy-clipped.svg | 4 +++- icons/tab-bottom-corner-left-chromeLegacy.svg | 2 +- icons/tab-bottom-corner-left-edge-clipped.svg | 4 +++- icons/tab-bottom-corner-left-edge.svg | 2 +- icons/tab-bottom-corner-left-wave-clipped.svg | 4 +++- icons/tab-bottom-corner-left-wave.svg | 2 +- icons/tab-bottom-corner-right-australis-cilpped.svg | 4 +++- icons/tab-bottom-corner-right-australis.svg | 4 ++-- icons/tab-bottom-corner-right-chrome-clipped.svg | 4 +++- icons/tab-bottom-corner-right-chrome.svg | 2 +- icons/tab-bottom-corner-right-chromeLegacy-clipped.svg | 4 +++- icons/tab-bottom-corner-right-chromeLegacy.svg | 2 +- icons/tab-bottom-corner-right-edge-clipped.svg | 4 +++- icons/tab-bottom-corner-right-edge.svg | 2 +- icons/tab-bottom-corner-right-wave-clipped.svg | 4 +++- icons/tab-bottom-corner-right-wave.svg | 2 +- 21 files changed, 46 insertions(+), 21 deletions(-) diff --git a/CREDITS b/CREDITS index 6c59f6d..e946331 100644 --- a/CREDITS +++ b/CREDITS @@ -233,3 +233,8 @@ N: Waterfox W: https://github.com/WaterfoxCo/Waterfox C: Copyright (c) 2012 Waterfox Limited L: MPL 2.0 + +N: WaveFox +W: https://github.com/QNetITQ/WaveFox +C: Copyright (c) 2021 QNetITQ +L: MIT diff --git a/icons/tab-bottom-corner-left-australis-clipped.svg b/icons/tab-bottom-corner-left-australis-clipped.svg index 5777e0f..6467247 100644 --- a/icons/tab-bottom-corner-left-australis-clipped.svg +++ b/icons/tab-bottom-corner-left-australis-clipped.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/icons/tab-bottom-corner-left-australis.svg b/icons/tab-bottom-corner-left-australis.svg index 25ea18d..24471fb 100644 --- a/icons/tab-bottom-corner-left-australis.svg +++ b/icons/tab-bottom-corner-left-australis.svg @@ -1,6 +1,6 @@ - + diff --git a/icons/tab-bottom-corner-left-chrome-clipped.svg b/icons/tab-bottom-corner-left-chrome-clipped.svg index 88a7af2..24ae50b 100644 --- a/icons/tab-bottom-corner-left-chrome-clipped.svg +++ b/icons/tab-bottom-corner-left-chrome-clipped.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/icons/tab-bottom-corner-left-chrome.svg b/icons/tab-bottom-corner-left-chrome.svg index 5c422be..150321a 100644 --- a/icons/tab-bottom-corner-left-chrome.svg +++ b/icons/tab-bottom-corner-left-chrome.svg @@ -1,6 +1,6 @@ - + diff --git a/icons/tab-bottom-corner-left-chromeLegacy-clipped.svg b/icons/tab-bottom-corner-left-chromeLegacy-clipped.svg index a68e94a..da5e1b8 100644 --- a/icons/tab-bottom-corner-left-chromeLegacy-clipped.svg +++ b/icons/tab-bottom-corner-left-chromeLegacy-clipped.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/icons/tab-bottom-corner-left-chromeLegacy.svg b/icons/tab-bottom-corner-left-chromeLegacy.svg index b497437..74cde0e 100644 --- a/icons/tab-bottom-corner-left-chromeLegacy.svg +++ b/icons/tab-bottom-corner-left-chromeLegacy.svg @@ -1,6 +1,6 @@ - + diff --git a/icons/tab-bottom-corner-left-edge-clipped.svg b/icons/tab-bottom-corner-left-edge-clipped.svg index a0ad796..e92817e 100644 --- a/icons/tab-bottom-corner-left-edge-clipped.svg +++ b/icons/tab-bottom-corner-left-edge-clipped.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/icons/tab-bottom-corner-left-edge.svg b/icons/tab-bottom-corner-left-edge.svg index 077f0fc..8fefb73 100644 --- a/icons/tab-bottom-corner-left-edge.svg +++ b/icons/tab-bottom-corner-left-edge.svg @@ -1,6 +1,6 @@ - + diff --git a/icons/tab-bottom-corner-left-wave-clipped.svg b/icons/tab-bottom-corner-left-wave-clipped.svg index 4d392a8..5d70865 100644 --- a/icons/tab-bottom-corner-left-wave-clipped.svg +++ b/icons/tab-bottom-corner-left-wave-clipped.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/icons/tab-bottom-corner-left-wave.svg b/icons/tab-bottom-corner-left-wave.svg index d01467e..ff8d2bf 100644 --- a/icons/tab-bottom-corner-left-wave.svg +++ b/icons/tab-bottom-corner-left-wave.svg @@ -1,6 +1,6 @@ - + diff --git a/icons/tab-bottom-corner-right-australis-cilpped.svg b/icons/tab-bottom-corner-right-australis-cilpped.svg index bba43f8..409e3bd 100644 --- a/icons/tab-bottom-corner-right-australis-cilpped.svg +++ b/icons/tab-bottom-corner-right-australis-cilpped.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/icons/tab-bottom-corner-right-australis.svg b/icons/tab-bottom-corner-right-australis.svg index 3e10743..3ec3a0e 100644 --- a/icons/tab-bottom-corner-right-australis.svg +++ b/icons/tab-bottom-corner-right-australis.svg @@ -1,6 +1,6 @@ - + - + diff --git a/icons/tab-bottom-corner-right-chrome-clipped.svg b/icons/tab-bottom-corner-right-chrome-clipped.svg index 74fafb5..96baab9 100644 --- a/icons/tab-bottom-corner-right-chrome-clipped.svg +++ b/icons/tab-bottom-corner-right-chrome-clipped.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/icons/tab-bottom-corner-right-chrome.svg b/icons/tab-bottom-corner-right-chrome.svg index 2466185..ace5206 100644 --- a/icons/tab-bottom-corner-right-chrome.svg +++ b/icons/tab-bottom-corner-right-chrome.svg @@ -1,6 +1,6 @@ - + diff --git a/icons/tab-bottom-corner-right-chromeLegacy-clipped.svg b/icons/tab-bottom-corner-right-chromeLegacy-clipped.svg index 4a189aa..1e4b049 100644 --- a/icons/tab-bottom-corner-right-chromeLegacy-clipped.svg +++ b/icons/tab-bottom-corner-right-chromeLegacy-clipped.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/icons/tab-bottom-corner-right-chromeLegacy.svg b/icons/tab-bottom-corner-right-chromeLegacy.svg index c8ad1de..e715b7d 100644 --- a/icons/tab-bottom-corner-right-chromeLegacy.svg +++ b/icons/tab-bottom-corner-right-chromeLegacy.svg @@ -1,6 +1,6 @@ - + diff --git a/icons/tab-bottom-corner-right-edge-clipped.svg b/icons/tab-bottom-corner-right-edge-clipped.svg index c3eac03..20bde7c 100644 --- a/icons/tab-bottom-corner-right-edge-clipped.svg +++ b/icons/tab-bottom-corner-right-edge-clipped.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/icons/tab-bottom-corner-right-edge.svg b/icons/tab-bottom-corner-right-edge.svg index 4787865..6ef4b84 100644 --- a/icons/tab-bottom-corner-right-edge.svg +++ b/icons/tab-bottom-corner-right-edge.svg @@ -1,6 +1,6 @@ - + diff --git a/icons/tab-bottom-corner-right-wave-clipped.svg b/icons/tab-bottom-corner-right-wave-clipped.svg index 0ac21f3..6bbb9ac 100644 --- a/icons/tab-bottom-corner-right-wave-clipped.svg +++ b/icons/tab-bottom-corner-right-wave-clipped.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/icons/tab-bottom-corner-right-wave.svg b/icons/tab-bottom-corner-right-wave.svg index 138b5b3..09df93a 100644 --- a/icons/tab-bottom-corner-right-wave.svg +++ b/icons/tab-bottom-corner-right-wave.svg @@ -1,6 +1,6 @@ - + From 2fa495ed8b253e880a0a6236596890a57b8791ef Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 15 Nov 2022 12:45:54 +0900 Subject: [PATCH 43/88] Fix: Bottom Rounded Corner - Chrome, Edge new tab button shape --- css/leptonChrome.css | 84 ++++++++++++++++++++-- src/tab/newtab_button/_looks_like_tab.scss | 48 +++++++++++-- 2 files changed, 123 insertions(+), 9 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 0d4dfa6..7defae7 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -7304,6 +7304,7 @@ --tabs-navbar-original-shadow-size: 0.5px; --tab-corner-rounding: 4px; /* Hardcoded */ + --uc-newtab-bgcolor: transparent; /* Corner Rounding Image */ --newtab-position: calc((var(--tab-corner-rounding) / 2) * -1); background-image: var(--uc-tab-corner-left-side-svg), var(--uc-tab-corner-right-side-svg); @@ -7312,7 +7313,7 @@ right var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size); background-size: var(--tab-corner-rounding); /* Corner Rounding Color */ - fill: transparent !important; + fill: var(--uc-newtab-bgcolor) !important; -moz-context-properties: fill !important; } @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-bool-pref( @@ -7322,24 +7323,38 @@ ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { #tabs-newtab-button { --newtab-position: 0px; + --uc-newtab-non-corner-bgwidth: 0px; --uc-tab-corner-half-height: calc(var(--uc-tab-corner-height) / 2); --uc-tab-corner-half-height-reverse: calc(var(--uc-tab-corner-half-height) * -1); margin-inline: var(--uc-tab-corner-half-height-reverse) !important; padding-inline: var(--uc-tab-corner-half-height) !important; overflow-clip-margin: var(--uc-tab-corner-half-height) !important; - background-size: var(--uc-tab-corner-height); + background-image: var(--uc-tab-corner-left-side-svg), + linear-gradient(to left, var(--uc-newtab-bgcolor), var(--uc-newtab-bgcolor)), + var(--uc-tab-corner-right-side-svg); + background-position: left var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size), + center bottom var(--tabs-navbar-original-shadow-size), + right var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size); + background-size: var(--uc-tab-corner-height) var(--uc-tab-corner-height), + var(--uc-newtab-non-corner-bgwidth) var(--uc-tab-corner-height), + var(--uc-tab-corner-height) var(--uc-tab-corner-height); background-origin: padding-box; } + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome") or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { + #tabs-newtab-button { + --uc-newtab-non-corner-bgwidth: calc(2 * var(--toolbarbutton-inner-padding)); + } + } } } /* Corner Rounding Color */ #tabs-newtab-button:hover { - fill: var(--toolbarbutton-hover-background) !important; + --uc-newtab-bgcolor: var(--toolbarbutton-hover-background); } #tabs-newtab-button:hover:active { - fill: var(--toolbarbutton-active-background) !important; + --uc-newtab-bgcolor: var(--toolbarbutton-active-background); } @media (-moz-windows-accent-color-in-titlebar) { @@ -7355,6 +7370,36 @@ /* Hardcoded for compatibility */ } + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner") { + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-bool-pref( + "userChrome.tab.bottom_rounded_corner.australis" + ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref( + "userChrome.tab.bottom_rounded_corner.chrome" + ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover, + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover { + background-image: var(--uc-tab-corner-left-side-svg), + linear-gradient( + to left, + color-mix(in srgb, AccentColorText 10%, transparent), + color-mix(in srgb, AccentColorText 10%, transparent) + ), + var(--uc-tab-corner-right-side-svg); + } + + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover:active, + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) + #tabs-newtab-button:hover:active { + background-image: var(--uc-tab-corner-left-side-svg), + linear-gradient( + to left, + color-mix(in srgb, AccentColorText 15%, transparent), + color-mix(in srgb, AccentColorText 15%, transparent) + ), + var(--uc-tab-corner-right-side-svg); + } + } + } @supports -moz-bool-pref("userChrome.compatibility.accent_color") { :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover, :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover { @@ -7368,6 +7413,37 @@ fill: color-mix(in srgb, -moz-accent-color-foreground 15%, transparent) !important; /* Hardcoded for compatibility */ } + + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner") { + @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-bool-pref( + "userChrome.tab.bottom_rounded_corner.australis" + ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref( + "userChrome.tab.bottom_rounded_corner.chrome" + ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover, + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover { + background-image: var(--uc-tab-corner-left-side-svg), + linear-gradient( + to left, + color-mix(in srgb, -moz-accent-color-foreground 10%, transparent), + color-mix(in srgb, -moz-accent-color-foreground 10%, transparent) + ), + var(--uc-tab-corner-right-side-svg); + } + + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover:active, + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) + #tabs-newtab-button:hover:active { + background-image: var(--uc-tab-corner-left-side-svg), + linear-gradient( + to left, + color-mix(in srgb, -moz-accent-color-foreground 15%, transparent), + color-mix(in srgb, -moz-accent-color-foreground 15%, transparent) + ), + var(--uc-tab-corner-right-side-svg); + } + } + } } } /* '+'Icon */ diff --git a/src/tab/newtab_button/_looks_like_tab.scss b/src/tab/newtab_button/_looks_like_tab.scss index 70d3e2e..0358d91 100644 --- a/src/tab/newtab_button/_looks_like_tab.scss +++ b/src/tab/newtab_button/_looks_like_tab.scss @@ -13,6 +13,7 @@ --tabs-navbar-shadow-size: -1px; /* Original: 1px */ --tabs-navbar-original-shadow-size: 0.5px; --tab-corner-rounding: 4px; /* Hardcoded */ + --uc-newtab-bgcolor: transparent; /* Corner Rounding Image */ --newtab-position: calc((var(--tab-corner-rounding) / 2) * -1); @@ -23,7 +24,7 @@ background-size: var(--tab-corner-rounding); /* Corner Rounding Color */ - fill: transparent !important; + fill: var(--uc-newtab-bgcolor) !important; -moz-context-properties: fill !important; @include Option( @@ -34,16 +35,30 @@ "userChrome.tab.bottom_rounded_corner.edge" ) { --newtab-position: 0px; + --uc-newtab-non-corner-bgwidth: 0px; --uc-tab-corner-half-height: calc(var(--uc-tab-corner-height) / 2); --uc-tab-corner-half-height-reverse: calc(var(--uc-tab-corner-half-height) * -1); margin-inline: var(--uc-tab-corner-half-height-reverse) !important; padding-inline: var(--uc-tab-corner-half-height) !important; overflow-clip-margin: var(--uc-tab-corner-half-height) !important; - background-size: var(--uc-tab-corner-height); + + background-image: var(--uc-tab-corner-left-side-svg), + linear-gradient(to left, var(--uc-newtab-bgcolor), var(--uc-newtab-bgcolor)), + var(--uc-tab-corner-right-side-svg); + background-position: left var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size), + center bottom var(--tabs-navbar-original-shadow-size), + right var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size); + background-size: var(--uc-tab-corner-height) var(--uc-tab-corner-height), + var(--uc-newtab-non-corner-bgwidth) var(--uc-tab-corner-height), + var(--uc-tab-corner-height) var(--uc-tab-corner-height); background-origin: padding-box; - .toolbarbutton-icon { + @include Option( + "userChrome.tab.bottom_rounded_corner.chrome", + "userChrome.tab.bottom_rounded_corner.edge" + ) { + --uc-newtab-non-corner-bgwidth: calc(2 * var(--toolbarbutton-inner-padding)); } } } @@ -51,10 +66,10 @@ /* Corner Rounding Color */ #tabs-newtab-button:hover { - fill: var(--toolbarbutton-hover-background) !important; + --uc-newtab-bgcolor: var(--toolbarbutton-hover-background); } #tabs-newtab-button:hover:active { - fill: var(--toolbarbutton-active-background) !important; + --uc-newtab-bgcolor: var(--toolbarbutton-active-background); } @media (-moz-windows-accent-color-in-titlebar) { @include AccentColor { @@ -74,6 +89,29 @@ transparent ) !important; /* Hardcoded for compatibility */ } + + @include Option("userChrome.tab.bottom_rounded_corner") { + @include Option( + "userChrome.tab.bottom_rounded_corner.wave", + "userChrome.tab.bottom_rounded_corner.australis", + "userChrome.tab.bottom_rounded_corner.chrome_legacy", + "userChrome.tab.bottom_rounded_corner.chrome", + "userChrome.tab.bottom_rounded_corner.edge" + ) { + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover, + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover { + background-image: var(--uc-tab-corner-left-side-svg), + linear-gradient(to left, color-mix(in srgb, $accentTextColor 10%, transparent), color-mix(in srgb, $accentTextColor 10%, transparent)), + var(--uc-tab-corner-right-side-svg); + } + :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) #tabs-newtab-button:hover:active, + :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) #tabs-newtab-button:hover:active { + background-image: var(--uc-tab-corner-left-side-svg), + linear-gradient(to left, color-mix(in srgb, $accentTextColor 15%, transparent), color-mix(in srgb, $accentTextColor 15%, transparent)), + var(--uc-tab-corner-right-side-svg); + } + } + } } } From 97dfd556e0584ff9887255ee8b97b4eb36822317 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 15 Nov 2022 13:04:56 +0900 Subject: [PATCH 44/88] Fix: Bottom Rounded Corner - Boxshadow at darktheme --- css/leptonChrome.css | 2 +- src/tab/selected_tab/_bottom_rounded_corner_others.scss | 1 + src/tab/selected_tab/_box_shadow.scss | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 7defae7..ed59d06 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6460,7 +6460,6 @@ "userChrome.tab.bottom_rounded_corner.chrome" ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { #TabsToolbar { - --uc-tab-background-shadow-soft: 0 -1px 1px -1px; --uc-tab-background-shadow-hard: 0 -1px 0; --uc-tab-basic-shadow: 0 -1px 0px rgba(0, 0, 0, 0.4); --uc-tab-additional-shadow: 0 0 0 transparent; @@ -6809,6 +6808,7 @@ left: var(--uc-tab-corner-half-size-reverse); background-image: var(--uc-tab-corner-left-side-svg), var(--uc-tab-corner-bgimage); clip-path: var(--uc-tab-corner-left-side-clipPath); + transform: translateX(0.5px); } .tabbrowser-tab .tab-background::after { right: var(--uc-tab-corner-half-size-reverse); diff --git a/src/tab/selected_tab/_bottom_rounded_corner_others.scss b/src/tab/selected_tab/_bottom_rounded_corner_others.scss index 529b814..1e0bcaa 100644 --- a/src/tab/selected_tab/_bottom_rounded_corner_others.scss +++ b/src/tab/selected_tab/_bottom_rounded_corner_others.scss @@ -153,6 +153,7 @@ left: var(--uc-tab-corner-half-size-reverse); background-image: var(--uc-tab-corner-left-side-svg), var(--uc-tab-corner-bgimage); clip-path: var(--uc-tab-corner-left-side-clipPath); + transform: translateX(0.5px); } &::after { right: var(--uc-tab-corner-half-size-reverse); diff --git a/src/tab/selected_tab/_box_shadow.scss b/src/tab/selected_tab/_box_shadow.scss index 239bae1..642c700 100644 --- a/src/tab/selected_tab/_box_shadow.scss +++ b/src/tab/selected_tab/_box_shadow.scss @@ -14,7 +14,7 @@ "userChrome.tab.bottom_rounded_corner.chrome", "userChrome.tab.bottom_rounded_corner.edge" ) { - --uc-tab-background-shadow-soft: 0 -1px 1px -1px; + // --uc-tab-background-shadow-soft: 0 -1px 1px -1px; --uc-tab-background-shadow-hard: 0 -1px 0; --uc-tab-basic-shadow: 0 -1px 0px rgba(0,0,0, 0.4); --uc-tab-additional-shadow: 0 0 0 transparent; From b2f07ce0f0a509e8bcccff57680e7a9657bb73aa Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 16 Nov 2022 02:15:26 +0900 Subject: [PATCH 45/88] Fix: Bottom Rounded Tab - Layout & Newtab sideeffect --- css/leptonChrome.css | 31 +++++++++---------- icons/tab-bottom-corner-left-australis.svg | 2 +- icons/tab-bottom-corner-left-chrome.svg | 2 +- icons/tab-bottom-corner-left-chromeLegacy.svg | 2 +- icons/tab-bottom-corner-left-edge.svg | 2 +- icons/tab-bottom-corner-left-wave.svg | 2 +- icons/tab-bottom-corner-right-australis.svg | 2 +- .../tab-bottom-corner-right-chromeLegacy.svg | 2 +- icons/tab-bottom-corner-right-edge.svg | 2 +- icons/tab-bottom-corner-right-wave.svg | 2 +- src/tab/newtab_button/_looks_like_tab.scss | 2 +- .../selected_tab/_bottom_rounded_corner.scss | 2 +- .../_bottom_rounded_corner_others.scss | 20 +++++------- 13 files changed, 34 insertions(+), 39 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index ed59d06..751864e 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6535,7 +6535,7 @@ @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome") { @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") { @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { - #tabbrowser-tabs { + #TabsToolbar { --tab-corner-rounding: 3px; /* 10px looks about like chromium - 17px looks close to Australis tabs */ --tab-corner-padding: 0px; @@ -6679,36 +6679,35 @@ ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref( "userChrome.tab.bottom_rounded_corner.chrome" ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { - #tabbrowser-tabs { + #TabsToolbar { + --uc-tab-corner-height: calc(var(--tab-min-height) + 1px); + --uc-tab-corner-size: var(--uc-tab-corner-height); --uc-tab-corner-half-size: calc(var(--uc-tab-corner-size) / 2); --uc-tab-corner-half-size-reverse: calc(var(--uc-tab-corner-half-size) * -1); - --uc-tab-corner-height: calc(var(--tab-min-height) - var(--tab-block-margin) + 1px); --uc-tab-corner-bgimage: none; } @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") { - #tabbrowser-tabs { + #TabsToolbar { --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-wave.svg"); --uc-tab-corner-left-side-clipPath: url("../icons/tab-bottom-corner-left-wave.svg#svgClipPath"); --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-wave.svg"); --uc-tab-corner-right-side-clipPath: url("../icons/tab-bottom-corner-right-wave.svg#svgClipPath"); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-wave-clipped.svg"); --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-wave-clipped.svg"); - --uc-tab-corner-size: 30px; } } @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.australis") { - #tabbrowser-tabs { + #TabsToolbar { --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-australis.svg"); --uc-tab-corner-left-side-clipPath: url("../icons/tab-bottom-corner-left-australis.svg#svgClipPath"); --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-australis.svg"); --uc-tab-corner-right-side-clipPath: url("../icons/tab-bottom-corner-right-australis.svg#svgClipPath"); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-australis-clipped.svg"); --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-australis-cilpped.svg"); - --uc-tab-corner-size: 30px; } } @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome") { - #tabbrowser-tabs { + #TabsToolbar { --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-chrome.svg"); --uc-tab-corner-left-side-clipPath: url("../icons/tab-bottom-corner-left-chrome.svg#svgClipPath"); --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-chrome.svg"); @@ -6719,25 +6718,24 @@ } } @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") { - #tabbrowser-tabs { + #TabsToolbar { --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-chromeLegacy.svg"); --uc-tab-corner-left-side-clipPath: url("../icons/tab-bottom-corner-left-chromeLegacy.svg#svgClipPath"); --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-chromeLegacy.svg"); --uc-tab-corner-right-side-clipPath: url("../icons/tab-bottom-corner-right-chromeLegacy.svg#svgClipPath"); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chromeLegacy-clipped.svg"); --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-chromeLegacy-clipped.svg"); - --uc-tab-corner-size: 35px; } } @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { - #tabbrowser-tabs { + #TabsToolbar { --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-edge.svg"); --uc-tab-corner-left-side-clipPath: url("../icons/tab-bottom-corner-left-edge.svg#svgClipPath"); --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-edge.svg"); --uc-tab-corner-right-side-clipPath: url("../icons/tab-bottom-corner-right-edge.svg#svgClipPath"); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-edge-clipped.svg"); --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-edge-clipped.svg"); - --uc-tab-corner-size: 8px; + --uc-tab-corner-size: 14px; } } @@ -6749,6 +6747,7 @@ .tabbrowser-tab .tab-background { --tab-border-radius: 0px; margin-inline: var(--uc-tab-corner-half-size) !important; + position: relative; } } @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") { @@ -6759,6 +6758,7 @@ .tabbrowser-tab[visuallyselected] .tab-background { --tab-border-radius: 0px; margin-inline: var(--uc-tab-corner-half-size) !important; + position: relative; } .tabbrowser-tab[visuallyselected] .tab-background::before, .tabbrowser-tab[visuallyselected] .tab-background::after { @@ -6805,13 +6805,12 @@ } } .tabbrowser-tab .tab-background::before { - left: var(--uc-tab-corner-half-size-reverse); + right: 100%; background-image: var(--uc-tab-corner-left-side-svg), var(--uc-tab-corner-bgimage); clip-path: var(--uc-tab-corner-left-side-clipPath); - transform: translateX(0.5px); } .tabbrowser-tab .tab-background::after { - right: var(--uc-tab-corner-half-size-reverse); + left: 100%; background-image: var(--uc-tab-corner-right-side-svg), var(--uc-tab-corner-bgimage); clip-path: var(--uc-tab-corner-right-side-clipPath); } @@ -7326,7 +7325,7 @@ --uc-newtab-non-corner-bgwidth: 0px; --uc-tab-corner-half-height: calc(var(--uc-tab-corner-height) / 2); --uc-tab-corner-half-height-reverse: calc(var(--uc-tab-corner-half-height) * -1); - margin-inline: var(--uc-tab-corner-half-height-reverse) !important; + transform: translateX(var(--uc-tab-corner-half-height-reverse)); padding-inline: var(--uc-tab-corner-half-height) !important; overflow-clip-margin: var(--uc-tab-corner-half-height) !important; background-image: var(--uc-tab-corner-left-side-svg), diff --git a/icons/tab-bottom-corner-left-australis.svg b/icons/tab-bottom-corner-left-australis.svg index 24471fb..955e390 100644 --- a/icons/tab-bottom-corner-left-australis.svg +++ b/icons/tab-bottom-corner-left-australis.svg @@ -3,7 +3,7 @@ - + diff --git a/icons/tab-bottom-corner-left-chrome.svg b/icons/tab-bottom-corner-left-chrome.svg index 150321a..fda2f96 100644 --- a/icons/tab-bottom-corner-left-chrome.svg +++ b/icons/tab-bottom-corner-left-chrome.svg @@ -3,7 +3,7 @@ - + diff --git a/icons/tab-bottom-corner-left-chromeLegacy.svg b/icons/tab-bottom-corner-left-chromeLegacy.svg index 74cde0e..5b71bd8 100644 --- a/icons/tab-bottom-corner-left-chromeLegacy.svg +++ b/icons/tab-bottom-corner-left-chromeLegacy.svg @@ -3,7 +3,7 @@ - + diff --git a/icons/tab-bottom-corner-left-edge.svg b/icons/tab-bottom-corner-left-edge.svg index 8fefb73..d24d02c 100644 --- a/icons/tab-bottom-corner-left-edge.svg +++ b/icons/tab-bottom-corner-left-edge.svg @@ -3,7 +3,7 @@ - + diff --git a/icons/tab-bottom-corner-left-wave.svg b/icons/tab-bottom-corner-left-wave.svg index ff8d2bf..32e0c1b 100644 --- a/icons/tab-bottom-corner-left-wave.svg +++ b/icons/tab-bottom-corner-left-wave.svg @@ -3,7 +3,7 @@ - + diff --git a/icons/tab-bottom-corner-right-australis.svg b/icons/tab-bottom-corner-right-australis.svg index 3ec3a0e..aef6e0e 100644 --- a/icons/tab-bottom-corner-right-australis.svg +++ b/icons/tab-bottom-corner-right-australis.svg @@ -3,7 +3,7 @@ - + diff --git a/icons/tab-bottom-corner-right-chromeLegacy.svg b/icons/tab-bottom-corner-right-chromeLegacy.svg index e715b7d..9749ab7 100644 --- a/icons/tab-bottom-corner-right-chromeLegacy.svg +++ b/icons/tab-bottom-corner-right-chromeLegacy.svg @@ -3,7 +3,7 @@ - + diff --git a/icons/tab-bottom-corner-right-edge.svg b/icons/tab-bottom-corner-right-edge.svg index 6ef4b84..a9de51f 100644 --- a/icons/tab-bottom-corner-right-edge.svg +++ b/icons/tab-bottom-corner-right-edge.svg @@ -3,7 +3,7 @@ - + diff --git a/icons/tab-bottom-corner-right-wave.svg b/icons/tab-bottom-corner-right-wave.svg index 09df93a..343b26d 100644 --- a/icons/tab-bottom-corner-right-wave.svg +++ b/icons/tab-bottom-corner-right-wave.svg @@ -3,7 +3,7 @@ - + diff --git a/src/tab/newtab_button/_looks_like_tab.scss b/src/tab/newtab_button/_looks_like_tab.scss index 0358d91..f1e3d69 100644 --- a/src/tab/newtab_button/_looks_like_tab.scss +++ b/src/tab/newtab_button/_looks_like_tab.scss @@ -39,7 +39,7 @@ --uc-tab-corner-half-height: calc(var(--uc-tab-corner-height) / 2); --uc-tab-corner-half-height-reverse: calc(var(--uc-tab-corner-half-height) * -1); - margin-inline: var(--uc-tab-corner-half-height-reverse) !important; + transform: translateX(var(--uc-tab-corner-half-height-reverse)); padding-inline: var(--uc-tab-corner-half-height) !important; overflow-clip-margin: var(--uc-tab-corner-half-height) !important; diff --git a/src/tab/selected_tab/_bottom_rounded_corner.scss b/src/tab/selected_tab/_bottom_rounded_corner.scss index 7b590b2..e985e48 100644 --- a/src/tab/selected_tab/_bottom_rounded_corner.scss +++ b/src/tab/selected_tab/_bottom_rounded_corner.scss @@ -1,4 +1,4 @@ -#tabbrowser-tabs { +#TabsToolbar { --tab-corner-rounding: 3px; /* 10px looks about like chromium - 17px looks close to Australis tabs */ --tab-corner-padding: 0px; --tab-corner-position: calc(var(--tab-corner-padding) - var(--tab-corner-rounding)); diff --git a/src/tab/selected_tab/_bottom_rounded_corner_others.scss b/src/tab/selected_tab/_bottom_rounded_corner_others.scss index 1e0bcaa..c8d7a11 100644 --- a/src/tab/selected_tab/_bottom_rounded_corner_others.scss +++ b/src/tab/selected_tab/_bottom_rounded_corner_others.scss @@ -26,6 +26,7 @@ .tab-background { --tab-border-radius: 0px; margin-inline: var(--uc-tab-corner-half-size) !important; + position: relative; @content; } @@ -33,10 +34,12 @@ //------------------------------------------------------------------------------ -#tabbrowser-tabs { +#TabsToolbar { + --uc-tab-corner-height: calc(var(--tab-min-height) + 1px); + --uc-tab-corner-size: var(--uc-tab-corner-height); --uc-tab-corner-half-size: calc(var(--uc-tab-corner-size) / 2); --uc-tab-corner-half-size-reverse: calc(var(--uc-tab-corner-half-size) * -1); - --uc-tab-corner-height: calc(var(--tab-min-height) - var(--tab-block-margin) + 1px); + --uc-tab-corner-bgimage: none; @include Option("userChrome.tab.bottom_rounded_corner.wave") { @@ -46,8 +49,6 @@ ); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-wave-clipped.svg"); --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-wave-clipped.svg"); - - --uc-tab-corner-size: 30px; } @include Option("userChrome.tab.bottom_rounded_corner.australis") { @include _tabCornerSVG( @@ -56,8 +57,6 @@ ); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-australis-clipped.svg"); --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-australis-cilpped.svg"); - - --uc-tab-corner-size: 30px; } @include Option("userChrome.tab.bottom_rounded_corner.chrome") { @include _tabCornerSVG( @@ -76,8 +75,6 @@ ); --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chromeLegacy-clipped.svg"); --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-chromeLegacy-clipped.svg"); - - --uc-tab-corner-size: 35px; } @include Option("userChrome.tab.bottom_rounded_corner.edge") { @include _tabCornerSVG( @@ -87,7 +84,7 @@ --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-edge-clipped.svg"); --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-edge-clipped.svg"); - --uc-tab-corner-size: 8px; // 16px + --uc-tab-corner-size: 14px; } } @@ -150,13 +147,12 @@ } } &::before { - left: var(--uc-tab-corner-half-size-reverse); + right: 100%; background-image: var(--uc-tab-corner-left-side-svg), var(--uc-tab-corner-bgimage); clip-path: var(--uc-tab-corner-left-side-clipPath); - transform: translateX(0.5px); } &::after { - right: var(--uc-tab-corner-half-size-reverse); + left: 100%; background-image: var(--uc-tab-corner-right-side-svg), var(--uc-tab-corner-bgimage); clip-path: var(--uc-tab-corner-right-side-clipPath); } From 341c760a4ae5895d5dc47d731b065d44be7a5217 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 17 Nov 2022 20:18:28 +0900 Subject: [PATCH 46/88] Fix: Bottom Rounded Corner - Right corner image --- css/leptonChrome.css | 2 +- src/tab/selected_tab/_bottom_rounded_corner.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 751864e..6dcadab 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6591,7 +6591,7 @@ } :root:not([customizing="true"]) .tabbrowser-tab .tab-background::after { right: var(--tab-corner-position); - background-image: var(var(--uc-tab-corner-right-side-svg)); + background-image: var(--uc-tab-corner-right-side-svg); } :root:not([customizing="true"]) .tabbrowser-tab[visuallyselected] .tab-background::before, :root:not([customizing="true"]) .tabbrowser-tab[visuallyselected] .tab-background::after { diff --git a/src/tab/selected_tab/_bottom_rounded_corner.scss b/src/tab/selected_tab/_bottom_rounded_corner.scss index e985e48..27bff67 100644 --- a/src/tab/selected_tab/_bottom_rounded_corner.scss +++ b/src/tab/selected_tab/_bottom_rounded_corner.scss @@ -53,7 +53,7 @@ } &::after { right: var(--tab-corner-position); - background-image: var(var(--uc-tab-corner-right-side-svg)); + background-image: var(--uc-tab-corner-right-side-svg); } } From 3b9be39cb61c684a93fef406e91f1a69808bdc87 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 17 Nov 2022 21:02:45 +0900 Subject: [PATCH 47/88] Clean: Bottom Rounded Corner - variable --- css/leptonChrome.css | 36 +++++++++---------- src/tab/newtab_button/_looks_like_tab.scss | 22 ++++++------ .../selected_tab/_bottom_rounded_corner.scss | 14 ++++---- 3 files changed, 36 insertions(+), 36 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 6dcadab..10b2465 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6536,10 +6536,10 @@ @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") { @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { #TabsToolbar { - --tab-corner-rounding: 3px; + --uc-tab-corner-rounding: 3px; /* 10px looks about like chromium - 17px looks close to Australis tabs */ - --tab-corner-padding: 0px; - --tab-corner-position: calc(var(--tab-corner-padding) - var(--tab-corner-rounding)); + --uc-tab-corner-padding: 0px; + --uc-tab-corner-position: calc(var(--uc-tab-corner-padding) - var(--uc-tab-corner-rounding)); --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left.svg"); --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right.svg"); } @@ -6552,14 +6552,14 @@ z-index: 1; bottom: 0; /* Shape */ - width: var(--tab-corner-rounding); + width: var(--uc-tab-corner-rounding); height: 100%; /* Color */ fill: transparent; stroke: transparent; -moz-context-properties: fill, stroke; /* Image */ - background-size: var(--tab-corner-rounding); + background-size: var(--uc-tab-corner-rounding); background-repeat: no-repeat; background-position-y: bottom; } @@ -6586,11 +6586,11 @@ } } :root:not([customizing="true"]) .tabbrowser-tab .tab-background::before { - left: var(--tab-corner-position); + left: var(--uc-tab-corner-position); background-image: var(--uc-tab-corner-left-side-svg); } :root:not([customizing="true"]) .tabbrowser-tab .tab-background::after { - right: var(--tab-corner-position); + right: var(--uc-tab-corner-position); background-image: var(--uc-tab-corner-right-side-svg); } :root:not([customizing="true"]) .tabbrowser-tab[visuallyselected] .tab-background::before, @@ -7300,17 +7300,17 @@ */ --tabs-navbar-shadow-size: -1px; /* Original: 1px */ - --tabs-navbar-original-shadow-size: 0.5px; - --tab-corner-rounding: 4px; + --uc-tabs-navbar-shadow-size: 0.5px; + --uc-tab-corner-rounding: 4px; /* Hardcoded */ --uc-newtab-bgcolor: transparent; /* Corner Rounding Image */ - --newtab-position: calc((var(--tab-corner-rounding) / 2) * -1); + --uc-newtab-position: calc((var(--uc-tab-corner-rounding) / 2) * -1); background-image: var(--uc-tab-corner-left-side-svg), var(--uc-tab-corner-right-side-svg); background-repeat: no-repeat; - background-position: left var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size), - right var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size); - background-size: var(--tab-corner-rounding); + background-position: left var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size), + right var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size); + background-size: var(--uc-tab-corner-rounding); /* Corner Rounding Color */ fill: var(--uc-newtab-bgcolor) !important; -moz-context-properties: fill !important; @@ -7321,7 +7321,7 @@ "userChrome.tab.bottom_rounded_corner.chrome" ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { #tabs-newtab-button { - --newtab-position: 0px; + --uc-newtab-position: 0px; --uc-newtab-non-corner-bgwidth: 0px; --uc-tab-corner-half-height: calc(var(--uc-tab-corner-height) / 2); --uc-tab-corner-half-height-reverse: calc(var(--uc-tab-corner-half-height) * -1); @@ -7331,9 +7331,9 @@ background-image: var(--uc-tab-corner-left-side-svg), linear-gradient(to left, var(--uc-newtab-bgcolor), var(--uc-newtab-bgcolor)), var(--uc-tab-corner-right-side-svg); - background-position: left var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size), - center bottom var(--tabs-navbar-original-shadow-size), - right var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size); + background-position: left var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size), + center bottom var(--uc-tabs-navbar-shadow-size), + right var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size); background-size: var(--uc-tab-corner-height) var(--uc-tab-corner-height), var(--uc-newtab-non-corner-bgwidth) var(--uc-tab-corner-height), var(--uc-tab-corner-height) var(--uc-tab-corner-height); @@ -7450,7 +7450,7 @@ border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */ padding: calc(var(--toolbarbutton-inner-padding) - var(--tab-block-margin) / 4) var(--toolbarbutton-inner-padding) - calc(var(--toolbarbutton-inner-padding) + var(--tab-block-margin) / 4 + var(--tabs-navbar-original-shadow-size)) !important; + calc(var(--toolbarbutton-inner-padding) + var(--tab-block-margin) / 4 + var(--uc-tabs-navbar-shadow-size)) !important; -moz-context-properties: fill, fill-opacity; fill: var(--toolbarbutton-icon-fill); fill-opacity: var(--toolbarbutton-icon-fill-opacity); diff --git a/src/tab/newtab_button/_looks_like_tab.scss b/src/tab/newtab_button/_looks_like_tab.scss index f1e3d69..6f64617 100644 --- a/src/tab/newtab_button/_looks_like_tab.scss +++ b/src/tab/newtab_button/_looks_like_tab.scss @@ -11,17 +11,17 @@ => Can't override style. Therefore, we should approach it by bypass. */ --tabs-navbar-shadow-size: -1px; /* Original: 1px */ - --tabs-navbar-original-shadow-size: 0.5px; - --tab-corner-rounding: 4px; /* Hardcoded */ + --uc-tabs-navbar-shadow-size: 0.5px; + --uc-tab-corner-rounding: 4px; /* Hardcoded */ --uc-newtab-bgcolor: transparent; /* Corner Rounding Image */ - --newtab-position: calc((var(--tab-corner-rounding) / 2) * -1); + --uc-newtab-position: calc((var(--uc-tab-corner-rounding) / 2) * -1); background-image: var(--uc-tab-corner-left-side-svg), var(--uc-tab-corner-right-side-svg); background-repeat: no-repeat; - background-position: left var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size), - right var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size); - background-size: var(--tab-corner-rounding); + background-position: left var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size), + right var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size); + background-size: var(--uc-tab-corner-rounding); /* Corner Rounding Color */ fill: var(--uc-newtab-bgcolor) !important; @@ -34,7 +34,7 @@ "userChrome.tab.bottom_rounded_corner.chrome", "userChrome.tab.bottom_rounded_corner.edge" ) { - --newtab-position: 0px; + --uc-newtab-position: 0px; --uc-newtab-non-corner-bgwidth: 0px; --uc-tab-corner-half-height: calc(var(--uc-tab-corner-height) / 2); --uc-tab-corner-half-height-reverse: calc(var(--uc-tab-corner-half-height) * -1); @@ -46,9 +46,9 @@ background-image: var(--uc-tab-corner-left-side-svg), linear-gradient(to left, var(--uc-newtab-bgcolor), var(--uc-newtab-bgcolor)), var(--uc-tab-corner-right-side-svg); - background-position: left var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size), - center bottom var(--tabs-navbar-original-shadow-size), - right var(--newtab-position) bottom var(--tabs-navbar-original-shadow-size); + background-position: left var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size), + center bottom var(--uc-tabs-navbar-shadow-size), + right var(--uc-newtab-position) bottom var(--uc-tabs-navbar-shadow-size); background-size: var(--uc-tab-corner-height) var(--uc-tab-corner-height), var(--uc-newtab-non-corner-bgwidth) var(--uc-tab-corner-height), var(--uc-tab-corner-height) var(--uc-tab-corner-height); @@ -120,7 +120,7 @@ border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Original: var(--tab-border-radius) */ padding: calc(var(--toolbarbutton-inner-padding) - (var(--tab-block-margin) / 4)) var(--toolbarbutton-inner-padding) - calc(var(--toolbarbutton-inner-padding) + (var(--tab-block-margin) / 4) + var(--tabs-navbar-original-shadow-size)) !important; + calc(var(--toolbarbutton-inner-padding) + (var(--tab-block-margin) / 4) + var(--uc-tabs-navbar-shadow-size)) !important; -moz-context-properties: fill, fill-opacity; fill: var(--toolbarbutton-icon-fill); fill-opacity: var(--toolbarbutton-icon-fill-opacity); diff --git a/src/tab/selected_tab/_bottom_rounded_corner.scss b/src/tab/selected_tab/_bottom_rounded_corner.scss index 27bff67..33c396f 100644 --- a/src/tab/selected_tab/_bottom_rounded_corner.scss +++ b/src/tab/selected_tab/_bottom_rounded_corner.scss @@ -1,7 +1,7 @@ #TabsToolbar { - --tab-corner-rounding: 3px; /* 10px looks about like chromium - 17px looks close to Australis tabs */ - --tab-corner-padding: 0px; - --tab-corner-position: calc(var(--tab-corner-padding) - var(--tab-corner-rounding)); + --uc-tab-corner-rounding: 3px; /* 10px looks about like chromium - 17px looks close to Australis tabs */ + --uc-tab-corner-padding: 0px; + --uc-tab-corner-position: calc(var(--uc-tab-corner-padding) - var(--uc-tab-corner-rounding)); --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left.svg"); --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right.svg"); @@ -19,7 +19,7 @@ bottom: 0; /* Shape */ - width: var(--tab-corner-rounding); + width: var(--uc-tab-corner-rounding); height: 100%; /* Color */ @@ -28,7 +28,7 @@ -moz-context-properties: fill, stroke; /* Image */ - background-size: var(--tab-corner-rounding); + background-size: var(--uc-tab-corner-rounding); background-repeat: no-repeat; background-position-y: bottom; @@ -48,11 +48,11 @@ } &::before { - left: var(--tab-corner-position); + left: var(--uc-tab-corner-position); background-image: var(--uc-tab-corner-left-side-svg); } &::after { - right: var(--tab-corner-position); + right: var(--uc-tab-corner-position); background-image: var(--uc-tab-corner-right-side-svg); } } From 667878ec9a83f567dac651036ff8851d0a3a8192 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Thu, 17 Nov 2022 21:13:06 +0900 Subject: [PATCH 48/88] Add: Options - Bottom Rounded Corner #326 --- user.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/user.js b/user.js index b9ea595..9d4f7e4 100644 --- a/user.js +++ b/user.js @@ -155,6 +155,11 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.tabbar.one_liner.responsive", true); // Need one_liner // user_pref("userChrome.tab.bottom_rounded_corner.all", true); +// user_pref("userChrome.tab.bottom_rounded_corner.australis", true); +// user_pref("userChrome.tab.bottom_rounded_corner.edge", true); +// user_pref("userChrome.tab.bottom_rounded_corner.chrome", true); +// user_pref("userChrome.tab.bottom_rounded_corner.chrome_legacy", true); +// user_pref("userChrome.tab.bottom_rounded_corner.wave", 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 33f8184c5d4fe5c838496e425070890276f94a88 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 18 Nov 2022 16:51:09 +0900 Subject: [PATCH 49/88] Add: Tabbar - Unscroll Mode --- css/leptonChrome.css | 48 ++++++++++++++++++++++++++++++++++++ src/tabbar/_index.scss | 5 ++++ src/tabbar/_unscroll.scss | 51 +++++++++++++++++++++++++++++++++++++++ user.js | 1 + 4 files changed, 105 insertions(+) create mode 100644 src/tabbar/_unscroll.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 10b2465..6018128 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6327,6 +6327,54 @@ } } /*= Tab Bar - Fill width tab =================================================*/ +@supports -moz-bool-pref("userChrome.tabbar.unscroll") { + /* Disable scrollbox */ + spacer[part="overflow-start-indicator"] + .scrollbox-clip > scrollbox { + overflow: -moz-hidden-unscrollable !important; + } + + #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([pinned]):not([visuallyselected]) { + /* Set minimum width below which tabs will not shrink */ + --tab-min-width: 16px; + container-type: inline-size; + container-name: backgroundTab; + } + @container backgroundTab (max-width: 46px) { + #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([pinned]):not([visuallyselected]) .tab-content { + --inline-tab-padding: 0px; + justify-self: center; + } + #tabbrowser-tabs[closebuttons="activetab"] + .tabbrowser-tab:not([pinned]):not([visuallyselected]) + .tab-icon-stack + > * { + margin-inline-end: 0 !important; + } + #tabbrowser-tabs[closebuttons="activetab"] + .tabbrowser-tab:not([pinned]):not([visuallyselected]) + .tab-label-container, + #tabbrowser-tabs[closebuttons="activetab"] + .tabbrowser-tab:not([pinned]):not([visuallyselected]):hover + .tab-close-button { + visibility: collapse !important; + } + } + #tabbrowser-tabs[closebuttons="activetab"][hasadjacentnewtabbutton="true"] #tabbrowser-arrowscrollbox-periphery { + position: absolute !important; + right: 0; + } + #tabbrowser-tabs[closebuttons="activetab"][hasadjacentnewtabbutton="true"] + #tabbrowser-arrowscrollbox-periphery + > #tabs-newtab-button { + z-index: 2 !important; + } + #tabbrowser-tabs[closebuttons="activetab"][hasadjacentnewtabbutton="true"] #tabbrowser-arrowscrollbox { + padding-inline-end: calc( + 16px + (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) * 2 + ) !important; + } +} +/*= Tab Bar - Fill width tab =================================================*/ @supports -moz-bool-pref("userChrome.tabbar.fill_width") { /* Why 100vw? Tab closing requires width animation to end and "none" can't be animated */ .tabbrowser-tab[fadein]:not([style^="max-width"]) { diff --git a/src/tabbar/_index.scss b/src/tabbar/_index.scss index 35a5f01..0fc9db9 100644 --- a/src/tabbar/_index.scss +++ b/src/tabbar/_index.scss @@ -48,6 +48,11 @@ @import "multi_row"; } +/*= Tab Bar - Fill width tab =================================================*/ +@include Option("userChrome.tabbar.unscroll") { + @import "unscroll"; +} + /*= Tab Bar - Fill width tab =================================================*/ @include Option("userChrome.tabbar.fill_width") { @import "fill_width"; diff --git a/src/tabbar/_unscroll.scss b/src/tabbar/_unscroll.scss new file mode 100644 index 0000000..4a6f649 --- /dev/null +++ b/src/tabbar/_unscroll.scss @@ -0,0 +1,51 @@ +// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries +// https://bugzilla.mozilla.org/show_bug.cgi?id=1744221 + +// `layout.css.container-queries.enabled` to `true` +// `layout.css.overflow-moz-hidden-unscrollable.enabled` to `true` +// `browser.tabs.tabMinWidth` to `0` + +/* Disable scrollbox */ +spacer[part="overflow-start-indicator"] + .scrollbox-clip > scrollbox { + overflow: -moz-hidden-unscrollable !important; +} + +#tabbrowser-tabs[closebuttons="activetab"] { + .tabbrowser-tab:not([pinned]):not([visuallyselected]) { + /* Set minimum width below which tabs will not shrink */ + --tab-min-width: 16px; // or calc(16px + (var(--inline-tab-padding) * 2)) + + container-type: inline-size; + container-name: backgroundTab; + + @container backgroundTab (max-width: 46px) { + .tab-content { + --inline-tab-padding: 0px; + justify-self: center; + } + .tab-icon-stack > * { + margin-inline-end: 0 !important; + } + .tab-label-container, + &:hover .tab-close-button { + visibility: collapse !important; + } + } + } + + // New tab button + &[hasadjacentnewtabbutton="true"] { + #tabbrowser-arrowscrollbox-periphery { + position: absolute !important; + right: 0; + + > #tabs-newtab-button { + z-index: 2 !important; + } + } + + #tabbrowser-arrowscrollbox { + padding-inline-end: calc(16px + (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) * 2) !important; + } + } +} diff --git a/user.js b/user.js index 9d4f7e4..e09dcbc 100644 --- a/user.js +++ b/user.js @@ -145,6 +145,7 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.tabbar.as_titlebar", true); // user_pref("userChrome.tabbar.fill_width", true); // user_pref("userChrome.tabbar.multi_row", true); +// user_pref("userChrome.tabbar.unscroll", 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 From 73e1733a23e85dd18c4c6dc3a4ec24193804de6a Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 18 Nov 2022 17:17:47 +0900 Subject: [PATCH 50/88] Add: Tab - Closed hover button with selected --- css/leptonChrome.css | 31 +++++----- .../_show_close_button_at_hover.scss | 60 +++++++++---------- user.js | 1 + 3 files changed, 43 insertions(+), 49 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 6018128..6e2eb2c 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -7604,51 +7604,48 @@ > .tab-close-button:not([selected="true"]) { display: -moz-inline-box !important; } - #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([visuallyselected]) .tab-close-button { visibility: collapse !important; opacity: 0; } - #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:hover .tab-close-button { visibility: visible !important; opacity: 1; } + @supports -moz-bool-pref("userChrome.tab.close_button_at_hover.with_selected") { + #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([pinned]):not(:hover) .tab-close-button { + visibility: collapse !important; + opacity: 0; + } + } @supports -moz-bool-pref("userChrome.tab.close_button_at_hover.always") { .tabbrowser-tab:not([visuallyselected]) .tab-close-button { visibility: collapse !important; opacity: 0; } - .tabbrowser-tab:hover .tab-close-button { visibility: visible !important; opacity: 1; } + @supports -moz-bool-pref("userChrome.tab.close_button_at_hover.with_selected") { + .tabbrowser-tab:not([pinned]):not(:hover) .tab-close-button { + visibility: collapse !important; + opacity: 0; + } + } } /* Animate */ @media (prefers-reduced-motion: no-preference) { /* Fade out */ - #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([visuallyselected]) .tab-close-button { + .tabbrowser-tab .tab-close-button { transition: opacity 0.1s var(--animation-easing-function) !important; } /* Fade in */ - #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:hover .tab-close-button { + .tabbrowser-tab:hover .tab-close-button { transition: opacity 0.25s var(--animation-easing-function) !important; } - - @supports -moz-bool-pref("userChrome.tab.close_button_at_hover.always") { - /* Fade out */ - .tabbrowser-tab:not([visuallyselected]) .tab-close-button { - transition: opacity 0.1s var(--animation-easing-function) !important; - } - - /* Fade in */ - .tabbrowser-tab:hover .tab-close-button { - transition: opacity 0.25s var(--animation-easing-function) !important; - } - } } /* Closed Button's icon thicker */ .tabbrowser-tab .tab-content > .close-icon { diff --git a/src/tab/clipped_tab/_show_close_button_at_hover.scss b/src/tab/clipped_tab/_show_close_button_at_hover.scss index 8751528..7f82d84 100644 --- a/src/tab/clipped_tab/_show_close_button_at_hover.scss +++ b/src/tab/clipped_tab/_show_close_button_at_hover.scss @@ -1,54 +1,50 @@ -#tabbrowser-tabs[closebuttons="activetab"] +@mixin _closeButtonAtHover() { + .tabbrowser-tab { + &:not([visuallyselected]) .tab-close-button { + visibility: collapse !important; + opacity: 0; + } + &:hover .tab-close-button { + visibility: visible !important; + opacity: 1; + } + + @include Option("userChrome.tab.close_button_at_hover.with_selected") { + &:not([pinned]):not(:hover) .tab-close-button { + visibility: collapse !important; + opacity: 0; + } + } + } +} + +#tabbrowser-tabs[closebuttons="activetab"] { > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([pinned]) > .tab-stack > .tab-content > .tab-close-button:not([selected="true"]) { - display: -moz-inline-box !important; + display: -moz-inline-box !important; + } + + @include _closeButtonAtHover; } -#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([visuallyselected]) .tab-close-button { - visibility: collapse !important; - opacity: 0; -} -#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:hover .tab-close-button { - visibility: visible !important; - opacity: 1; -} @include Option("userChrome.tab.close_button_at_hover.always") { - .tabbrowser-tab:not([visuallyselected]) .tab-close-button { - visibility: collapse !important; - opacity: 0; - } - .tabbrowser-tab:hover .tab-close-button { - visibility: visible !important; - opacity: 1; - } + @include _closeButtonAtHover; } /* Animate */ @include Animate { /* Fade out */ - #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([visuallyselected]) .tab-close-button { + .tabbrowser-tab .tab-close-button { transition: opacity 0.1s var(--animation-easing-function) !important; } /* Fade in */ - #tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:hover .tab-close-button { + .tabbrowser-tab:hover .tab-close-button { transition: opacity 0.25s var(--animation-easing-function) !important; } - - @include Option("userChrome.tab.close_button_at_hover.always") { - /* Fade out */ - .tabbrowser-tab:not([visuallyselected]) .tab-close-button { - transition: opacity 0.1s var(--animation-easing-function) !important; - } - - /* Fade in */ - .tabbrowser-tab:hover .tab-close-button { - transition: opacity 0.25s var(--animation-easing-function) !important; - } - } } /* Closed Button's icon thicker */ diff --git a/user.js b/user.js index e09dcbc..eb54d54 100644 --- a/user.js +++ b/user.js @@ -166,6 +166,7 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.tab.close_button_at_pinned.always", 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.close_button_at_hover.with_selected", true); // Need close_button_at_hover // user_pref("userChrome.tab.sound_show_label", true); // Need remove sound_hide_label // user_pref("userChrome.bookmarkbar.multi_row", true); From 012d38552d294aa9030e19a9436643ef65b03cf0 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 19 Nov 2022 05:22:29 +0900 Subject: [PATCH 51/88] Fix: Decoration - Panel Arrow at bottom --- css/leptonChrome.css | 18 ++++++++++++++---- icons/panelarrow-vertical-reverse.svg | 4 ++++ icons/panelarrow-vertical.svg | 6 +++--- src/decoration/_panel_arrow.scss | 18 ++++++++++++++---- 4 files changed, 35 insertions(+), 11 deletions(-) create mode 100644 icons/panelarrow-vertical-reverse.svg diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 6e2eb2c..ddc3986 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -2972,16 +2972,26 @@ /*= Panel UI Arrow ===========================================================*/ @supports -moz-bool-pref("userChrome.decoration.panel_arrow") { #appMenu-popup { - margin-top: -8px !important; - /* Original: -4px */ - padding-top: 4px; background-image: url("../icons/panelarrow-vertical.svg"); background-repeat: no-repeat; - background-position: top right 10px; + background-position-x: right 10px; + background-position-y: top; -moz-context-properties: fill, stroke; fill: var(--panel-background); stroke: var(--panel-border-color); } + #appMenu-popup[side="top"] { + margin-top: -8px !important; + /* Original: -4px */ + padding-top: 4px; + } + #appMenu-popup[side="bottom"] { + background-image: url("../icons/panelarrow-vertical-reverse.svg"); + background-position-y: bottom; + margin-bottom: -8px !important; + /* Original: -4px */ + padding-bottom: 4px; + } } @media (prefers-reduced-motion: no-preference) { /*= Field Border ===========================================================*/ diff --git a/icons/panelarrow-vertical-reverse.svg b/icons/panelarrow-vertical-reverse.svg new file mode 100644 index 0000000..d274759 --- /dev/null +++ b/icons/panelarrow-vertical-reverse.svg @@ -0,0 +1,4 @@ + + + + diff --git a/icons/panelarrow-vertical.svg b/icons/panelarrow-vertical.svg index 3e38a73..55d016c 100644 --- a/icons/panelarrow-vertical.svg +++ b/icons/panelarrow-vertical.svg @@ -2,6 +2,6 @@ - License, v. 2.0. If a copy of the MPL was not distributed with this - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> - - - \ No newline at end of file + + + diff --git a/src/decoration/_panel_arrow.scss b/src/decoration/_panel_arrow.scss index 93a5bbd..ff3587b 100644 --- a/src/decoration/_panel_arrow.scss +++ b/src/decoration/_panel_arrow.scss @@ -1,12 +1,22 @@ #appMenu-popup { - margin-top: -8px !important; /* Original: -4px */ - padding-top: 4px; - background-image: url("../icons/panelarrow-vertical.svg"); background-repeat: no-repeat; - background-position: top right 10px; + background-position-x: right 10px; + background-position-y: top; -moz-context-properties: fill, stroke; fill: var(--panel-background); stroke: var(--panel-border-color); + + &[side="top"] { + margin-top: -8px !important; /* Original: -4px */ + padding-top: 4px; + } + &[side="bottom"] { + background-image: url("../icons/panelarrow-vertical-reverse.svg"); + background-position-y: bottom; + + margin-bottom: -8px !important; /* Original: -4px */ + padding-bottom: 4px; + } } From 044ea2073354bff6de4003b15363d8082f0b1121 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 19 Nov 2022 08:44:50 +0900 Subject: [PATCH 52/88] Add: NavBar - As sidebar Looks liek Arc Browser - https://thebrowser.company/ --- css/leptonChrome.css | 526 ++++++++++++++++++++++++------------ src/autohide/_common.scss | 61 ++++- src/leptonChrome.scss | 3 + src/navbar/_as_sidebar.scss | 125 +++++++++ src/navbar/_index.scss | 4 + src/sidebar/_overlap.scss | 22 +- src/tabbar/_index.scss | 2 +- src/tabbar/_layout.scss | 4 +- user.js | 2 + 9 files changed, 561 insertions(+), 188 deletions(-) create mode 100644 src/navbar/_as_sidebar.scss create mode 100644 src/navbar/_index.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index ddc3986..78ab784 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5856,75 +5856,19 @@ } } } - /*= Navbar - Padding for window controls =====================================*/ - /* Customized https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/window_control_placeholder_support.css */ - #nav-bar { - border-inline-style: solid !important; - border-inline-color: transparent; - } - @media (-moz-os-version: windows-win7), - (-moz-platform: windows-win7), - (-moz-os-version: windows-win8), - (-moz-platform: windows-win8), - (-moz-os-version: windows-win10), - (-moz-platform: windows-win10) { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { - #nav-bar { - border-inline-start-width: var(--uc-window-drag-space-pre); - border-inline-end-width: var(--uc-window-control-space); - } + @supports not -moz-bool-pref("userChrome.navbar.as_sidebar") { + /*= Navbar - Padding for window controls =====================================*/ + /* Customized https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/window_control_placeholder_support.css */ + #nav-bar { + border-inline-style: solid !important; + border-inline-color: transparent; } - @supports -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { - #nav-bar { - border-inline-start-width: var(--uc-window-drag-space-pre); - border-inline-end-width: var(--uc-window-control-space); - } - } - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { - @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { - @media screen and (max-width: 1100px) { - #nav-bar { - border-inline-start-width: var(--uc-window-drag-space-pre); - border-inline-end-width: var(--uc-window-control-space); - } - } - } - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #nav-bar { - margin-inline-start: var(--uc-window-drag-space-pre) !important; - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #nav-bar { - margin-inline-end: var(--uc-window-control-space) !important; - } - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @media screen and (min-width: 1100px) { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #nav-bar { - margin-inline-start: var(--uc-window-drag-space-pre) !important; - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #nav-bar { - margin-inline-end: var(--uc-window-control-space) !important; - } - } - } - } - } - } - } - @media (-moz-gtk-csd-available) { - @media (-moz-gtk-csd-reversed-placement: 0) { + @media (-moz-os-version: windows-win7), + (-moz-platform: windows-win7), + (-moz-os-version: windows-win8), + (-moz-platform: windows-win8), + (-moz-os-version: windows-win10), + (-moz-platform: windows-win10) { @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { #nav-bar { border-inline-start-width: var(--uc-window-drag-space-pre); @@ -5940,7 +5884,7 @@ } @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { - @media screen and (-moz-gtk-csd-reversed-placement: 0) and (max-width: 1100px) { + @media screen and (max-width: 1100px) { #nav-bar { border-inline-start-width: var(--uc-window-drag-space-pre); border-inline-end-width: var(--uc-window-control-space); @@ -5964,7 +5908,7 @@ } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @media screen and (-moz-gtk-csd-reversed-placement: 0) and (min-width: 1100px) { + @media screen and (min-width: 1100px) { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #nav-bar { margin-inline-start: var(--uc-window-drag-space-pre) !important; @@ -5980,57 +5924,58 @@ } } } - } - - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { - #nav-bar { - border-inline-start-width: var(--uc-window-control-space); - border-inline-end-width: var(--uc-window-drag-space-pre); - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { - #nav-bar { - border-inline-start-width: var(--uc-window-control-space); - border-inline-end-width: var(--uc-window-drag-space-pre); - } - } - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { - @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { - @media screen and (max-width: 1100px) { - #nav-bar { - border-inline-start-width: var(--uc-window-control-space); - border-inline-end-width: var(--uc-window-drag-space-pre); - } + @media (-moz-gtk-csd-available) { + @media (-moz-gtk-csd-reversed-placement: 0) { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { + #nav-bar { + border-inline-start-width: var(--uc-window-drag-space-pre); + border-inline-end-width: var(--uc-window-control-space); } } - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { #nav-bar { - margin-inline-start: var(--uc-window-control-space, 0px) !important; + border-inline-start-width: var(--uc-window-drag-space-pre); + border-inline-end-width: var(--uc-window-control-space); } } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #nav-bar { - margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; - } - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @media screen and (min-width: 1100px) { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #nav-bar { - margin-inline-start: var(--uc-window-control-space, 0px) !important; + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { + @media screen and (-moz-gtk-csd-reversed-placement: 0) and (max-width: 1100px) { + #nav-bar { + border-inline-start-width: var(--uc-window-drag-space-pre); + border-inline-end-width: var(--uc-window-control-space); + } } } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #nav-bar { - margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-start: var(--uc-window-drag-space-pre) !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-end: var(--uc-window-control-space) !important; + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (-moz-gtk-csd-reversed-placement: 0) and (min-width: 1100px) { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-start: var(--uc-window-drag-space-pre) !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-end: var(--uc-window-control-space) !important; + } + } } } } @@ -6038,43 +5983,7 @@ } } - @supports -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #TabsToolbar { - margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; - } - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @media screen and (min-width: 1100px) { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #TabsToolbar { - margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; - } - } - } - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - #TabsToolbar { - margin-inline-start: var(--uc-window-control-width, 0px) !important; - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @media screen and (min-width: 1100px) { - #TabsToolbar { - margin-inline-start: var(--uc-window-control-width, 0px) !important; - } - } - } - } - } - } - @media (-moz-gtk-csd-available) { - @media (-moz-gtk-csd-reversed-placement) { + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { #nav-bar { border-inline-start-width: var(--uc-window-control-space); @@ -6090,7 +5999,7 @@ } @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { - @media screen and (-moz-gtk-csd-reversed-placement) and (max-width: 1100px) { + @media screen and (max-width: 1100px) { #nav-bar { border-inline-start-width: var(--uc-window-control-space); border-inline-end-width: var(--uc-window-drag-space-pre); @@ -6114,7 +6023,7 @@ } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @media screen and (-moz-gtk-csd-reversed-placement) and (min-width: 1100px) { + @media screen and (min-width: 1100px) { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #nav-bar { margin-inline-start: var(--uc-window-control-space, 0px) !important; @@ -6140,7 +6049,7 @@ } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @media screen and (-moz-gtk-csd-reversed-placement) and (min-width: 1100px) { + @media screen and (min-width: 1100px) { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #TabsToolbar { margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; @@ -6156,7 +6065,7 @@ } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @media screen and (-moz-gtk-csd-reversed-placement) and (min-width: 1100px) { + @media screen and (min-width: 1100px) { #TabsToolbar { margin-inline-start: var(--uc-window-control-width, 0px) !important; } @@ -6165,11 +6074,104 @@ } } } - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, - :root[sizemode="fullscreen"] #window-controls { - right: unset; + @media (-moz-gtk-csd-available) { + @media (-moz-gtk-csd-reversed-placement) { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { + #nav-bar { + border-inline-start-width: var(--uc-window-control-space); + border-inline-end-width: var(--uc-window-drag-space-pre); + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + #nav-bar { + border-inline-start-width: var(--uc-window-control-space); + border-inline-end-width: var(--uc-window-drag-space-pre); + } + } + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { + @media screen and (-moz-gtk-csd-reversed-placement) and (max-width: 1100px) { + #nav-bar { + border-inline-start-width: var(--uc-window-control-space); + border-inline-end-width: var(--uc-window-drag-space-pre); + } + } + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-start: var(--uc-window-control-space, 0px) !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (-moz-gtk-csd-reversed-placement) and (min-width: 1100px) { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-start: var(--uc-window-control-space, 0px) !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; + } + } + } + } + } + } + + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #TabsToolbar { + margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (-moz-gtk-csd-reversed-placement) and (min-width: 1100px) { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #TabsToolbar { + margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; + } + } + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + #TabsToolbar { + margin-inline-start: var(--uc-window-control-width, 0px) !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (-moz-gtk-csd-reversed-placement) and (min-width: 1100px) { + #TabsToolbar { + margin-inline-start: var(--uc-window-control-width, 0px) !important; + } + } + } + } + } + } + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, + :root[sizemode="fullscreen"] #window-controls { + right: unset; + } } } } @@ -6336,7 +6338,7 @@ display: none !important; } } -/*= Tab Bar - Fill width tab =================================================*/ +/*= Tab Bar - Scollmode disabled =============================================*/ @supports -moz-bool-pref("userChrome.tabbar.unscroll") { /* Disable scrollbox */ spacer[part="overflow-start-indicator"] + .scrollbox-clip > scrollbox { @@ -8140,6 +8142,130 @@ display: none !important; } } +/** Nav Bar UI ****************************************************************/ +/*= Nav Bar - Navbar comabine with sidebar===================================*/ +@supports -moz-bool-pref("userChrome.navbar.as_sidebar") { + :root { + --uc-navbar-margin-block: var(--toolbarbutton-inner-padding); + --uc-urlbar-margin-top: calc(var(--uc-navbar-height) + var(--uc-navbar-margin-block)); + --uc-urlbar-container-height: 36px; + --uc-navbar-sideblock-height: calc(var(--uc-urlbar-margin-top) + var(--uc-urlbar-container-height)); + } + + #nav-bar, + #sidebar-box, + #sidebar-header, + #sidebar { + min-width: var(--uc-sidebar-activate-width) !important; + max-width: var(--uc-sidebar-activate-width) !important; + } + + #nav-bar, + #wrapper-urlbar-container, + #urlbar-container { + position: absolute !important; + } + + #nav-bar { + --toolbarbutton-outer-padding: 0px !important; + z-index: 1; + margin-top: calc( + var(--uc-tabbar-height) + var(--uc-bm-height) + var(--uc-menubar-height) + var(--uc-navbar-margin-block) + ); + overflow-y: visible !important; + background: none !important; + box-shadow: none !important; + -moz-window-dragging: drag; + } + + @supports selector(:has(a)) { + :root:has(#sidebar-box[hidden="true"]) #nav-bar { + margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important; + opacity: 0; + visibility: collapse; + } + + :root:has(#sidebar-box[positionend="true"]) #nav-bar { + right: 0; + } + } + @media (prefers-reduced-motion: no-preference) { + @supports -moz-bool-pref("userChrome.decoration.animate") { + @supports not -moz-bool-pref("userChrome.decoration.disable_sidebar_animate") { + #nav-bar { + transition: margin-inline-start 0.25s var(--animation-easing-function), opacity 0.25s ease-in-out, + visibility 0s linear, + margin-top var(--uc-autohide-toolbar-speed) var(--animation-easing-function) + var(--uc-autohide-toolbar-delay), + var(--ext-theme-background-transition) !important; + will-change: margin-inline-start, opacity, visibility, margin-top; + } + + :root:has(#sidebar-box[hidden="true"]) #nav-bar, + #navigator-toolbox:is(:hover, :focus-within) #nav-bar { + transition-delay: 0s, 0s, 0.25s, 0s, 0s !important; + } + } + @supports -moz-bool-pref("userChrome.decoration.disable_sidebar_animate") { + #nav-bar { + transition: margin-top var(--uc-autohide-toolbar-speed) var(--animation-easing-function) + var(--uc-autohide-toolbar-delay), + var(--ext-theme-background-transition) !important; + will-change: margin-top; + } + + #navigator-toolbox:is(:hover, :focus-within) #nav-bar { + transition-delay: 0s !important; + } + } + } + } + #urlbar-container { + top: var(--uc-urlbar-margin-top); + min-width: calc(var(--uc-sidebar-activate-width) - 2 * var(--toolbarbutton-inner-padding)) !important; + } + + #sidebar-header { + margin-top: var(--uc-navbar-sideblock-height) !important; + -moz-window-dragging: drag; + } + + :root[customizing="true"] #browser[collapsed="true"] { + visibility: visible !important; + } + :root[customizing="true"] #browser[collapsed="true"] #appcontent { + visibility: collapse; + } + :root[customizing="true"] #browser[collapsed="true"] #sidebar-box { + position: absolute; + height: 100%; + } + :root[customizing="true"] #browser[collapsed="true"] #sidebar-box[positionend="true"] { + right: 0; + } + :root[customizing="true"] #customization-container { + --uc-customization-conatiner-margin: var(--uc-navbar-height-default); + width: calc(100% - var(--uc-sidebar-activate-width)); + height: calc(100% - var(--uc-customization-conatiner-margin)); + } + @supports -moz-bool-pref("userChrome.hidden.tabbar") { + :root[customizing="true"] #customization-container { + --uc-customization-conatiner-margin: calc(var(--uc-navbar-height-default) - var(--uc-tabbar-height-default)); + } + } + :root[customizing="true"]:has(#sidebar-box:not([positionend="true"])) #customization-container { + margin-inline-start: var(--uc-sidebar-activate-width); + } + :root[customizing="true"]:has(#sidebar-box[positionend="true"]) #customization-container { + margin-inline-end: var(--uc-sidebar-activate-width); + } + :root[customizing="true"] #customization-palette-container { + flex-shrink: 0.35 !important; + } + :root[customizing="true"] #customization-panel-container { + flex-shrink: 0.5 !important; + } +} /** Bookark Bar UI ************************************************************/ @supports -moz-bool-pref("userChrome.bookmarkbar.multi_row") { #PersonalToolbar { @@ -8242,22 +8368,32 @@ } } /** Sidebar UI ****************************************************************/ -@supports -moz-bool-pref("userChrome.sidebar.overlap") or -moz-bool-pref("userChrome.autohide.sidebar") { - #sidebar-box { +@supports -moz-bool-pref("userChrome.sidebar.overlap") or -moz-bool-pref("userChrome.autohide.sidebar") or -moz-bool-pref( + "userChrome.navbar.as_sidebar" + ) { + :root { /* Original min-width: 14em; width: 18em; max-width: 36em; */ --uc-sidebar-width: 40px; - --uc-sidebar-activate-width: 18em; + --uc-sidebar-activate-width: 18rem; --uc-sidebar-activate-width-reverse: calc(-1 * var(--uc-sidebar-activate-width)); --uc-sidebar-fullscreen-width: 4px; - --uc-sidebar-shadow-color: #28282f; --uc-autohide-sidebar-speed: 750ms; --uc-autohide-fullscreen-sidebar-speed: 1s; --uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */ + } + + #sidebar-splitter { + display: none !important; + } +} +@supports -moz-bool-pref("userChrome.sidebar.overlap") or -moz-bool-pref("userChrome.autohide.sidebar") { + #sidebar-box { + --uc-sidebar-shadow-color: #28282f; z-index: 1 !important; position: relative !important; box-shadow: 1px 0px 15px -10px var(--uc-sidebar-shadow-color); @@ -8269,10 +8405,6 @@ #sidebar { display: block; } - - #sidebar-splitter { - display: none !important; - } } @supports -moz-bool-pref("userChrome.sidebar.overlap") { #sidebar-box[positionend="true"] { @@ -8978,15 +9110,22 @@ @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.autohide.navbar") or -moz-bool-pref( "userChrome.autohide.bookmarkbar" ) - or -moz-bool-pref("userChrome.tabbar.one_liner") or -moz-bool-pref("userChrome.hidden.tabbar") { + or -moz-bool-pref("userChrome.tabbar.one_liner") or -moz-bool-pref("userChrome.hidden.tabbar") or -moz-bool-pref("userChrome.navbar.as_sidebar") { :root { - --uc-tabbar-height: var(--tab-min-height); + --uc-tabbar-height: var(--uc-tabbar-height-default); + --uc-tabbar-height-default: var(--tab-min-height); --uc-tabbar-hide-height: calc(-1 * var(--uc-tabbar-height)); - --uc-navbar-height: calc(16px + 2 * (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding))); + --uc-navbar-height: var(--uc-navbar-height-default); + --uc-navbar-height-default: calc( + 16px + 2 * (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding)) + ); --uc-navbar-hide-height: calc(-1 * var(--uc-navbar-height)); - --uc-bm-height: calc(20px + (2 * var(--bookmark-block-padding, 4px))); + --uc-bm-height: var(--uc-bm-height-default); + --uc-bm-height-default: calc(20px + (2 * var(--bookmark-block-padding, 4px))); /* 20px = 16px + (2px * 2) [margin block] */ --uc-bm-hide-height: calc(-1 * var(--uc-bm-height)); + --uc-titlebar-buttonbox-height: 34px; + --uc-menubar-height: 0px; } @supports -moz-bool-pref("userChrome.hidden.tabbar") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { @@ -9011,9 +9150,50 @@ } @supports selector(:has(a)) { + :root:not([tabsintitlebar]):has(#toolbar-menubar) #nav-bar { + --uc-menubar-height: 1.6rem; + } + @media (-moz-gtk-csd-available) { + :root[tabsintitlebar]:has(#toolbar-menubar[autohide="true"]) #nav-bar { + --uc-menubar-height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin)); + } + } + @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { + :root[tabsintitlebar]:has(#toolbar-menubar[autohide="true"]) #nav-bar { + --uc-menubar-height: calc(var(--tab-min-height) - var(--tabs-navbar-shadow-size)); + } + } + @media (-moz-os-version: windows-win7), + (-moz-platform: windows-win7), + (-moz-os-version: windows-win8), + (-moz-platform: windows-win8) { + :root[tabsintitlebar]:has(#toolbar-menubar[autohide="true"]) #nav-bar { + --uc-menubar-height: calc(var(--tab-min-height) + var(--tab-block-margin)); + } + } + :root[tabsintitlebar]:has(#toolbar-menubar[autohide="false"]) #nav-bar { + --uc-menubar-height: var(--uc-titlebar-buttonbox-height); + } + :root:not([tabsintitlebar]):has(#toolbar-menubar[autohide="true"][inactive="true"]) #nav-bar, + :root[tabsintitlebar]:has(#toolbar-menubar[autohide="true"][inactive="true"]) #nav-bar { + --uc-menubar-height: 0px; + } + #navigator-toolbox:has(#PersonalToolbar[collapsed="true"]) { --uc-bm-height: 0px; } + + @supports -moz-bool-pref("userChrome.navbar.as_sidebar") { + #navigator-toolbox:has(#PersonalToolbar[collapsed="false"]) #nav-bar { + --uc-bm-height: var(--uc-bm-height-default); + } + + @supports -moz-bool-pref("userChrome.autohide.bookmarkbar") { + #navigator-toolbox:has(#PersonalToolbar[collapsed="false"]):not(:hover) #nav-bar { + --uc-bm-height: 0px; + } + } + } } } @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.autohide.navbar") or -moz-bool-pref( diff --git a/src/autohide/_common.scss b/src/autohide/_common.scss index 1fde6d6..5b8f2ee 100644 --- a/src/autohide/_common.scss +++ b/src/autohide/_common.scss @@ -3,15 +3,29 @@ --uc-autohide-toolbar-delay: 600ms; } -@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar", "userChrome.tabbar.one_liner", "userChrome.hidden.tabbar") { +@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar", "userChrome.tabbar.one_liner", "userChrome.hidden.tabbar", "userChrome.navbar.as_sidebar") { :root { - --uc-tabbar-height: var(--tab-min-height); // calc((var(--tab-block-margin) * 2) + var(--tab-min-height)); + --uc-tabbar-height: var(--uc-tabbar-height-default); + --uc-tabbar-height-default: var(--tab-min-height); // calc((var(--tab-block-margin) * 2) + var(--tab-min-height)); --uc-tabbar-hide-height: calc(-1 * var(--uc-tabbar-height)); - --uc-navbar-height: calc(16px + 2 * (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding))); + + --uc-navbar-height: var(--uc-navbar-height-default); + --uc-navbar-height-default: calc(16px + 2 * (var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding))); --uc-navbar-hide-height: calc(-1 * var(--uc-navbar-height)); - --uc-bm-height: calc(20px + (2 * var(--bookmark-block-padding, 4px))); /* 20px = 16px + (2px * 2) [margin block] */ + + --uc-bm-height: var(--uc-bm-height-default); + --uc-bm-height-default: calc(20px + (2 * var(--bookmark-block-padding, 4px))); /* 20px = 16px + (2px * 2) [margin block] */ --uc-bm-hide-height: calc(-1 * var(--uc-bm-height)); + // Mac - None exist + // https://github.com/mozilla/gecko-dev/blob/92d3050ecbbdd077ffa4cb78e0dffc4bd5021109/browser/base/content/browser.css#L131 + // https://github.com/mozilla/gecko-dev/blob/92d3050ecbbdd077ffa4cb78e0dffc4bd5021109/browser/themes/linux/browser.css#L327 + // https://github.com/mozilla/gecko-dev/blob/92d3050ecbbdd077ffa4cb78e0dffc4bd5021109/browser/themes/windows/browser-aero.css#L14 + // https://github.com/mozilla/gecko-dev/blob/92d3050ecbbdd077ffa4cb78e0dffc4bd5021109/browser/themes/windows/browser.css#L65 + $_menubarPadding: 2px; // menubar padding block 1px + --uc-titlebar-buttonbox-height: #{ 32px + $_menubarPadding }; + --uc-menubar-height: 0px; + @include Option("userChrome.hidden.tabbar") { @include OneLinerNavbarContent() { --uc-tabbar-height: 0px; @@ -22,9 +36,48 @@ } } @include Has { + :root { + &:not([tabsintitlebar]):has(#toolbar-menubar) #nav-bar { + --uc-menubar-height: #{ 1rem + 0.3rem * 2 }; // text 1rem, menu padding 0.3em + } + + &[tabsintitlebar]:has(#toolbar-menubar[autohide="true"]) #nav-bar { + @include OS($linux) { + --uc-menubar-height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin)); + } + @include OS($win10) { + --uc-menubar-height: calc(var(--tab-min-height) - var(--tabs-navbar-shadow-size)); + } + @include OS($win7, $win8) { + --uc-menubar-height: calc(var(--tab-min-height) + var(--tab-block-margin)); + } + } + &[tabsintitlebar]:has(#toolbar-menubar[autohide="false"]) #nav-bar { + --uc-menubar-height: var(--uc-titlebar-buttonbox-height); + } + + &:not([tabsintitlebar]), + &[tabsintitlebar] { + &:has(#toolbar-menubar[autohide="true"][inactive="true"]) #nav-bar { + --uc-menubar-height: 0px; + } + } + } + #navigator-toolbox:has(#PersonalToolbar[collapsed="true"]) { --uc-bm-height: 0px; } + + @include Option("userChrome.navbar.as_sidebar") { + #navigator-toolbox:has(#PersonalToolbar[collapsed="false"]) #nav-bar { + --uc-bm-height: var(--uc-bm-height-default); // Re-calculate to force!! + } + @include Option("userChrome.autohide.bookmarkbar") { + #navigator-toolbox:has(#PersonalToolbar[collapsed="false"]):not(:hover) #nav-bar { + --uc-bm-height: 0px; + } + } + } } } diff --git a/src/leptonChrome.scss b/src/leptonChrome.scss index 66ff8ad..24cbca3 100644 --- a/src/leptonChrome.scss +++ b/src/leptonChrome.scss @@ -39,6 +39,9 @@ /** Tab UI ********************************************************************/ @import "tab/index"; +/** Nav Bar UI ****************************************************************/ +@import "navbar/index"; + /** Bookark Bar UI ************************************************************/ @import "bookmarkbar/index"; diff --git a/src/navbar/_as_sidebar.scss b/src/navbar/_as_sidebar.scss new file mode 100644 index 0000000..7191049 --- /dev/null +++ b/src/navbar/_as_sidebar.scss @@ -0,0 +1,125 @@ +:root { + --uc-navbar-margin-block: var(--toolbarbutton-inner-padding); + --uc-urlbar-margin-top: calc(var(--uc-navbar-height) + var(--uc-navbar-margin-block)); + + --uc-urlbar-container-height: 36px; + --uc-navbar-sideblock-height: calc(var(--uc-urlbar-margin-top) + var(--uc-urlbar-container-height)); +} + +#nav-bar, +#sidebar-box, +#sidebar-header, +#sidebar { + min-width: var(--uc-sidebar-activate-width) !important; + max-width: var(--uc-sidebar-activate-width) !important; +} + +#nav-bar, +#wrapper-urlbar-container, +#urlbar-container { + position: absolute !important; +} + +#nav-bar { + --toolbarbutton-outer-padding: 0px !important; + z-index: 1; + + margin-top: calc(var(--uc-tabbar-height) + var(--uc-bm-height) + var(--uc-menubar-height) + var(--uc-navbar-margin-block)); // drag space + overflow-y: visible !important; // show urlbar + + background: none !important; + box-shadow: none !important; + + -moz-window-dragging: drag; +} +@include Has { + :root:has(#sidebar-box[hidden="true"]) #nav-bar { + margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important; + opacity: 0; + visibility: collapse; + } + :root:has(#sidebar-box[positionend="true"]) #nav-bar { + right: 0; + } +} +@include Animate { + @include Option("userChrome.decoration.animate") { + @include NotOption("userChrome.decoration.disable_sidebar_animate") { + #nav-bar { + transition: margin-inline-start 0.25s var(--animation-easing-function), + opacity 0.25s ease-in-out, + visibility 0s linear, + margin-top var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), + var(--ext-theme-background-transition)!important; + will-change: margin-inline-start, opacity, visibility, margin-top; + } + :root:has(#sidebar-box[hidden="true"]) #nav-bar, + #navigator-toolbox:is(:hover, :focus-within) #nav-bar { + transition-delay: 0s, 0s, 0.25s, 0s, 0s !important; + } + } + @include Option("userChrome.decoration.disable_sidebar_animate") { + #nav-bar { + transition: margin-top var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay), var(--ext-theme-background-transition) !important; + will-change: margin-top; + } + #navigator-toolbox:is(:hover, :focus-within) #nav-bar { + transition-delay: 0s !important; + } + } + } +} + +#urlbar-container { + top: var(--uc-urlbar-margin-top); + min-width: calc(var(--uc-sidebar-activate-width) - (2 * var(--toolbarbutton-inner-padding))) !important; +} + +#sidebar-header { + margin-top: var(--uc-navbar-sideblock-height) !important; + -moz-window-dragging: drag; +} + +:root[customizing="true"] { + #browser[collapsed="true"] { + visibility: visible !important; + + #appcontent { + visibility: collapse; + } + + #sidebar-box { + position: absolute; + height: 100%; + + &[positionend="true"] { + right: 0; + } + } + } + + #customization-container { + --uc-customization-conatiner-margin: var(--uc-navbar-height-default); + @include Option("userChrome.hidden.tabbar") { + --uc-customization-conatiner-margin: calc(var(--uc-navbar-height-default) - var(--uc-tabbar-height-default)); + } + + width: calc(100% - var(--uc-sidebar-activate-width)); + height: calc(100% - var(--uc-customization-conatiner-margin)); + } + + &:has(#sidebar-box:not([positionend="true"])) #customization-container { + margin-inline-start: var(--uc-sidebar-activate-width); + } + &:has(#sidebar-box[positionend="true"]) #customization-container { + margin-inline-end: var(--uc-sidebar-activate-width); + } + + #customization-palette-container { + flex-shrink: 0.35 !important; + } + #customization-panel-container { + flex-shrink: 0.5 !important; + } +} + diff --git a/src/navbar/_index.scss b/src/navbar/_index.scss new file mode 100644 index 0000000..6d9b9fe --- /dev/null +++ b/src/navbar/_index.scss @@ -0,0 +1,4 @@ +/*= Nav Bar - Navbar comabine with sidebar===================================*/ +@include Option("userChrome.navbar.as_sidebar") { + @import "as_sidebar"; +} diff --git a/src/sidebar/_overlap.scss b/src/sidebar/_overlap.scss index 953cb48..797e026 100644 --- a/src/sidebar/_overlap.scss +++ b/src/sidebar/_overlap.scss @@ -1,20 +1,28 @@ -@include Option("userChrome.sidebar.overlap", "userChrome.autohide.sidebar") { - #sidebar-box { +@include Option("userChrome.sidebar.overlap", "userChrome.autohide.sidebar", "userChrome.navbar.as_sidebar") { + :root { /* Original min-width: 14em; width: 18em; max-width: 36em; */ - --uc-sidebar-width: 40px; - --uc-sidebar-activate-width: 18em; + --uc-sidebar-activate-width: 18rem; --uc-sidebar-activate-width-reverse: calc(-1 * var(--uc-sidebar-activate-width)); --uc-sidebar-fullscreen-width: 4px; - --uc-sidebar-shadow-color: #28282F; --uc-autohide-sidebar-speed: 750ms; --uc-autohide-fullscreen-sidebar-speed: 1s; --uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */ + } + + #sidebar-splitter { + display: none !important; + } +} + +@include Option("userChrome.sidebar.overlap", "userChrome.autohide.sidebar") { + #sidebar-box { + --uc-sidebar-shadow-color: #28282F; z-index: 1 !important; position: relative !important; @@ -28,10 +36,6 @@ #sidebar { display: block; } - - #sidebar-splitter { - display: none !important; - } } @include Option("userChrome.sidebar.overlap") { diff --git a/src/tabbar/_index.scss b/src/tabbar/_index.scss index 0fc9db9..a6691c4 100644 --- a/src/tabbar/_index.scss +++ b/src/tabbar/_index.scss @@ -48,7 +48,7 @@ @import "multi_row"; } -/*= Tab Bar - Fill width tab =================================================*/ +/*= Tab Bar - Scollmode disabled =============================================*/ @include Option("userChrome.tabbar.unscroll") { @import "unscroll"; } diff --git a/src/tabbar/_layout.scss b/src/tabbar/_layout.scss index 9c78c6a..3a57631 100644 --- a/src/tabbar/_layout.scss +++ b/src/tabbar/_layout.scss @@ -35,4 +35,6 @@ } } -@import "layout/navbar_padding"; +@include NotOption("userChrome.navbar.as_sidebar") { + @import "layout/navbar_padding"; +} diff --git a/user.js b/user.js index eb54d54..fe624b4 100644 --- a/user.js +++ b/user.js @@ -169,6 +169,8 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.tab.close_button_at_hover.with_selected", true); // Need close_button_at_hover // user_pref("userChrome.tab.sound_show_label", true); // Need remove sound_hide_label +// user_pref("userChrome.navbar.as_sidebar", true); + // user_pref("userChrome.bookmarkbar.multi_row", true); // user_pref("userChrome.panel.remove_strip", true); From 45901c6a7383fb9717782fa39f223317975bb7ee Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 19 Nov 2022 21:48:13 +0900 Subject: [PATCH 53/88] Fix: Navbar - As Sidebar's urlbar toolbar height calculated to small --- css/leptonChrome.css | 2 +- src/navbar/_as_sidebar.scss | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 78ab784..2312931 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -8182,7 +8182,7 @@ :root:has(#sidebar-box[hidden="true"]) #nav-bar { margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important; opacity: 0; - visibility: collapse; + visibility: hidden; } :root:has(#sidebar-box[positionend="true"]) #nav-bar { diff --git a/src/navbar/_as_sidebar.scss b/src/navbar/_as_sidebar.scss index 7191049..8b0f1fb 100644 --- a/src/navbar/_as_sidebar.scss +++ b/src/navbar/_as_sidebar.scss @@ -36,7 +36,7 @@ :root:has(#sidebar-box[hidden="true"]) #nav-bar { margin-inline-start: var(--uc-sidebar-activate-width-reverse) !important; opacity: 0; - visibility: collapse; + visibility: hidden; // If use `collapse`, inline `--urlbar-toolbar-height` variable is calculated strangely small. } :root:has(#sidebar-box[positionend="true"]) #nav-bar { right: 0; @@ -122,4 +122,3 @@ flex-shrink: 0.5 !important; } } - From 56b89e65415c2dda32a6dda7be952a6877a8e11a Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 19 Nov 2022 22:26:22 +0900 Subject: [PATCH 54/88] Add: Hidden - URLbar Iconbox Label --- css/leptonChrome.css | 29 ++++++++++++++++++++++------- src/hidden/_index.scss | 29 ++++++++++++++++++++++------- user.js | 1 + 3 files changed, 45 insertions(+), 14 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 2312931..e05b3ee 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -9866,14 +9866,29 @@ } } @supports -moz-bool-pref("userChrome.hidden.urlbar_iconbox") { - #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; + @supports not -moz-bool-pref("userChrome.hidden.urlbar_iconbox.label_only") { + #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"].notSecureText #identity-icon-box { + padding-inline-end: 5px; + /* Original: 8px */ + } } - #identity-box[pageproxystate="valid"].notSecureText #identity-icon-box { - padding-inline-end: 5px; - /* Original: 8px */ + @supports -moz-bool-pref("userChrome.hidden.urlbar_iconbox.label_only") { + #identity-box[pageproxystate="valid"].chromeUI #identity-icon-box, + #identity-box[pageproxystate="valid"].extensionPage #identity-icon-box { + padding-inline: var(--urlbar-icon-padding) !important; + } + #identity-box[pageproxystate="valid"].chromeUI #identity-icon-box:not(:hover), + #identity-box[pageproxystate="valid"].extensionPage #identity-icon-box:not(:hover) { + background-color: transparent !important; + } + #identity-box[pageproxystate="valid"] #identity-icon-label { + display: none !important; + } } } @supports -moz-bool-pref("userChrome.hidden.bookmarkbar_icon") { diff --git a/src/hidden/_index.scss b/src/hidden/_index.scss index 8b38239..56e0de4 100644 --- a/src/hidden/_index.scss +++ b/src/hidden/_index.scss @@ -47,14 +47,29 @@ @include Option("userChrome.hidden.urlbar_iconbox") { #identity-box[pageproxystate="valid"] { - &.notSecureText #identity-icon-label, - &.chromeUI #identity-icon-box, - &.extensionPage #identity-icon-box { - display: none; - } + @include NotOption("userChrome.hidden.urlbar_iconbox.label_only") { + &.notSecureText #identity-icon-label, + &.chromeUI #identity-icon-box, + &.extensionPage #identity-icon-box { + display: none; + } - &.notSecureText #identity-icon-box { - padding-inline-end: 5px; /* Original: 8px */ + &.notSecureText #identity-icon-box { + padding-inline-end: 5px; /* Original: 8px */ + } + } + @include Option("userChrome.hidden.urlbar_iconbox.label_only") { + &.chromeUI #identity-icon-box, + &.extensionPage #identity-icon-box { + padding-inline: var(--urlbar-icon-padding) !important; + &:not(:hover) { + background-color: transparent !important; + } + } + + #identity-icon-label { + display: none !important; + } } } } diff --git a/user.js b/user.js index fe624b4..3fb14fc 100644 --- a/user.js +++ b/user.js @@ -98,6 +98,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.urlbar_iconbox.label_only", true); // user_pref("userChrome.hidden.bookmarkbar_icon", true); // user_pref("userChrome.hidden.bookmarkbar_label", true); // user_pref("userChrome.hidden.disabled_menu", true); From eedc04dd755fd75cd5a7da491308f4686583f574 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 19 Nov 2022 23:06:47 +0900 Subject: [PATCH 55/88] Fix: NavBar - As sidebar's urlbar horizontal center` --- css/leptonChrome.css | 9 +++++++-- src/navbar/_as_sidebar.scss | 8 ++++++++ src/padding/_urlbar.scss | 1 - 3 files changed, 15 insertions(+), 3 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index e05b3ee..8c42869 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -3774,8 +3774,6 @@ :root:not([uidensity="touch"]) #search-container { padding-block: 3px !important; /* Original: 4px */ - margin-inline: 5px !important; - /* Original: 5px */ } :root:not([uidensity="compact"]) #urlbar-container, @@ -8223,6 +8221,10 @@ #urlbar-container { top: var(--uc-urlbar-margin-top); min-width: calc(var(--uc-sidebar-activate-width) - 2 * var(--toolbarbutton-inner-padding)) !important; + margin-inline: auto !important; + /* Original: var(--urlbar-margin-inline) */ + left: 50%; + transform: translateX(-50%); } #sidebar-header { @@ -8230,6 +8232,9 @@ -moz-window-dragging: drag; } + :root[customizing="true"] #wrapper-urlbar-container { + left: 50%; + } :root[customizing="true"] #browser[collapsed="true"] { visibility: visible !important; } diff --git a/src/navbar/_as_sidebar.scss b/src/navbar/_as_sidebar.scss index 8b0f1fb..3b3c31b 100644 --- a/src/navbar/_as_sidebar.scss +++ b/src/navbar/_as_sidebar.scss @@ -73,6 +73,10 @@ #urlbar-container { top: var(--uc-urlbar-margin-top); min-width: calc(var(--uc-sidebar-activate-width) - (2 * var(--toolbarbutton-inner-padding))) !important; + + margin-inline: auto !important; /* Original: var(--urlbar-margin-inline) */ + left: 50%; + transform: translateX(-50%); } #sidebar-header { @@ -81,6 +85,10 @@ } :root[customizing="true"] { + #wrapper-urlbar-container { + left: 50%; + } + #browser[collapsed="true"] { visibility: visible !important; diff --git a/src/padding/_urlbar.scss b/src/padding/_urlbar.scss index b5cd2bc..d167c05 100644 --- a/src/padding/_urlbar.scss +++ b/src/padding/_urlbar.scss @@ -1,7 +1,6 @@ :root:not([uidensity="touch"]) #urlbar-container, :root:not([uidensity="touch"]) #search-container { padding-block: 3px !important; /* Original: 4px */ - margin-inline: 5px !important; /* Original: 5px */ } :root:not([uidensity="compact"]) #urlbar-container, :root:not([uidensity="compact"]) #search-container { From 050f06d867eea7917dbe6973732b45006127c858 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 20 Nov 2022 00:23:31 +0900 Subject: [PATCH 56/88] Clean: Menubar - Height provide by autohide --- css/leptonChrome.css | 124 +++++++++++++++---------- src/autohide/_common.scss | 17 ++-- src/tabbar/_on_bottom.scss | 15 --- src/tabbar/layout/_window_control.scss | 8 +- 4 files changed, 90 insertions(+), 74 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 8c42869..52a40c6 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4235,19 +4235,6 @@ @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 { - /* 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"]) { @@ -4300,11 +4287,6 @@ --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 @@ -4385,19 +4367,6 @@ @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 { - /* 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"]) { @@ -4450,11 +4419,6 @@ --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 @@ -4928,7 +4892,16 @@ } #navigator-toolbox { - padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; + padding-top: var(--uc-titlebar-padding) !important; + } + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") { + #navigator-toolbox { + padding-top: calc( + max(var(--uc-menubar-height), var(--uc-menubar-height-default)) + var(--uc-titlebar-padding) + ) !important; + } + } } #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, @@ -5084,7 +5057,16 @@ } #navigator-toolbox { - padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; + padding-top: var(--uc-titlebar-padding) !important; + } + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") { + #navigator-toolbox { + padding-top: calc( + max(var(--uc-menubar-height), var(--uc-menubar-height-default)) + var(--uc-titlebar-padding) + ) !important; + } + } } #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, @@ -5237,7 +5219,16 @@ } #navigator-toolbox { - padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; + padding-top: var(--uc-titlebar-padding) !important; + } + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") { + #navigator-toolbox { + padding-top: calc( + max(var(--uc-menubar-height), var(--uc-menubar-height-default)) + var(--uc-titlebar-padding) + ) !important; + } + } } #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, @@ -5393,7 +5384,16 @@ } #navigator-toolbox { - padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; + padding-top: var(--uc-titlebar-padding) !important; + } + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") { + #navigator-toolbox { + padding-top: calc( + max(var(--uc-menubar-height), var(--uc-menubar-height-default)) + var(--uc-titlebar-padding) + ) !important; + } + } } #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, @@ -5555,7 +5555,16 @@ } #navigator-toolbox { - padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; + padding-top: var(--uc-titlebar-padding) !important; + } + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") { + #navigator-toolbox { + padding-top: calc( + max(var(--uc-menubar-height), var(--uc-menubar-height-default)) + var(--uc-titlebar-padding) + ) !important; + } + } } #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, @@ -5708,7 +5717,16 @@ } #navigator-toolbox { - padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; + padding-top: var(--uc-titlebar-padding) !important; + } + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") { + #navigator-toolbox { + padding-top: calc( + max(var(--uc-menubar-height), var(--uc-menubar-height-default)) + var(--uc-titlebar-padding) + ) !important; + } + } } #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, @@ -9115,7 +9133,9 @@ @supports -moz-bool-pref("userChrome.autohide.tabbar") or -moz-bool-pref("userChrome.autohide.navbar") or -moz-bool-pref( "userChrome.autohide.bookmarkbar" ) - or -moz-bool-pref("userChrome.tabbar.one_liner") or -moz-bool-pref("userChrome.hidden.tabbar") or -moz-bool-pref("userChrome.navbar.as_sidebar") { + or -moz-bool-pref("userChrome.tabbar.one_liner") or -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") or -moz-bool-pref( + "userChrome.hidden.tabbar" + ) or -moz-bool-pref("userChrome.navbar.as_sidebar") { :root { --uc-tabbar-height: var(--uc-tabbar-height-default); --uc-tabbar-height-default: var(--tab-min-height); @@ -9131,6 +9151,8 @@ --uc-bm-hide-height: calc(-1 * var(--uc-bm-height)); --uc-titlebar-buttonbox-height: 34px; --uc-menubar-height: 0px; + --uc-menubar-height-default: calc(1.6rem + 2px); + --uc-menubar-inner-height: calc(1.6rem - 2px); } @supports -moz-bool-pref("userChrome.hidden.tabbar") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { @@ -9155,16 +9177,16 @@ } @supports selector(:has(a)) { - :root:not([tabsintitlebar]):has(#toolbar-menubar) #nav-bar { - --uc-menubar-height: 1.6rem; + :root:not([tabsintitlebar]):has(#toolbar-menubar) { + --uc-menubar-height: var(--uc-menubar-height-default); } @media (-moz-gtk-csd-available) { - :root[tabsintitlebar]:has(#toolbar-menubar[autohide="true"]) #nav-bar { + :root[tabsintitlebar]:has(#toolbar-menubar[autohide="true"]) { --uc-menubar-height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin)); } } @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { - :root[tabsintitlebar]:has(#toolbar-menubar[autohide="true"]) #nav-bar { + :root[tabsintitlebar]:has(#toolbar-menubar[autohide="true"]) { --uc-menubar-height: calc(var(--tab-min-height) - var(--tabs-navbar-shadow-size)); } } @@ -9172,15 +9194,15 @@ (-moz-platform: windows-win7), (-moz-os-version: windows-win8), (-moz-platform: windows-win8) { - :root[tabsintitlebar]:has(#toolbar-menubar[autohide="true"]) #nav-bar { + :root[tabsintitlebar]:has(#toolbar-menubar[autohide="true"]) { --uc-menubar-height: calc(var(--tab-min-height) + var(--tab-block-margin)); } } - :root[tabsintitlebar]:has(#toolbar-menubar[autohide="false"]) #nav-bar { + :root[tabsintitlebar]:has(#toolbar-menubar[autohide="false"]) { --uc-menubar-height: var(--uc-titlebar-buttonbox-height); } - :root:not([tabsintitlebar]):has(#toolbar-menubar[autohide="true"][inactive="true"]) #nav-bar, - :root[tabsintitlebar]:has(#toolbar-menubar[autohide="true"][inactive="true"]) #nav-bar { + :root:not([tabsintitlebar]):has(#toolbar-menubar[autohide="true"][inactive="true"]), + :root[tabsintitlebar]:has(#toolbar-menubar[autohide="true"][inactive="true"]) { --uc-menubar-height: 0px; } diff --git a/src/autohide/_common.scss b/src/autohide/_common.scss index 5b8f2ee..98a4cb8 100644 --- a/src/autohide/_common.scss +++ b/src/autohide/_common.scss @@ -3,7 +3,7 @@ --uc-autohide-toolbar-delay: 600ms; } -@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar", "userChrome.tabbar.one_liner", "userChrome.hidden.tabbar", "userChrome.navbar.as_sidebar") { +@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar", "userChrome.tabbar.one_liner", "userChrome.tabbar.on_bottom.menubar_on_top", "userChrome.hidden.tabbar", "userChrome.navbar.as_sidebar") { :root { --uc-tabbar-height: var(--uc-tabbar-height-default); --uc-tabbar-height-default: var(--tab-min-height); // calc((var(--tab-block-margin) * 2) + var(--tab-min-height)); @@ -22,9 +22,12 @@ // https://github.com/mozilla/gecko-dev/blob/92d3050ecbbdd077ffa4cb78e0dffc4bd5021109/browser/themes/linux/browser.css#L327 // https://github.com/mozilla/gecko-dev/blob/92d3050ecbbdd077ffa4cb78e0dffc4bd5021109/browser/themes/windows/browser-aero.css#L14 // https://github.com/mozilla/gecko-dev/blob/92d3050ecbbdd077ffa4cb78e0dffc4bd5021109/browser/themes/windows/browser.css#L65 - $_menubarPadding: 2px; // menubar padding block 1px + $_menubarPadding: 1px * 2; // menubar padding block 1px + $_menubarHeightDefault: 1rem + 0.3rem * 2; // text 1rem, menu padding 0.3em --uc-titlebar-buttonbox-height: #{ 32px + $_menubarPadding }; --uc-menubar-height: 0px; + --uc-menubar-height-default: #{ calc($_menubarHeightDefault + $_menubarPadding) }; + --uc-menubar-inner-height: #{ calc($_menubarHeightDefault - $_menubarPadding) }; @include Option("userChrome.hidden.tabbar") { @include OneLinerNavbarContent() { @@ -37,11 +40,11 @@ } @include Has { :root { - &:not([tabsintitlebar]):has(#toolbar-menubar) #nav-bar { - --uc-menubar-height: #{ 1rem + 0.3rem * 2 }; // text 1rem, menu padding 0.3em + &:not([tabsintitlebar]):has(#toolbar-menubar) { + --uc-menubar-height: var(--uc-menubar-height-default); // text 1rem, menu padding 0.3em } - &[tabsintitlebar]:has(#toolbar-menubar[autohide="true"]) #nav-bar { + &[tabsintitlebar]:has(#toolbar-menubar[autohide="true"]) { @include OS($linux) { --uc-menubar-height: calc(var(--tab-min-height) + 2 * var(--tab-block-margin)); } @@ -52,13 +55,13 @@ --uc-menubar-height: calc(var(--tab-min-height) + var(--tab-block-margin)); } } - &[tabsintitlebar]:has(#toolbar-menubar[autohide="false"]) #nav-bar { + &[tabsintitlebar]:has(#toolbar-menubar[autohide="false"]) { --uc-menubar-height: var(--uc-titlebar-buttonbox-height); } &:not([tabsintitlebar]), &[tabsintitlebar] { - &:has(#toolbar-menubar[autohide="true"][inactive="true"]) #nav-bar { + &:has(#toolbar-menubar[autohide="true"][inactive="true"]) { --uc-menubar-height: 0px; } } diff --git a/src/tabbar/_on_bottom.scss b/src/tabbar/_on_bottom.scss index 0bcf567..b8095b0 100644 --- a/src/tabbar/_on_bottom.scss +++ b/src/tabbar/_on_bottom.scss @@ -60,17 +60,6 @@ See the above repository for updates as well as full license text. */ /* 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"]) { @@ -117,10 +106,6 @@ See the above repository for updates as well as full license text. */ --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; } diff --git a/src/tabbar/layout/_window_control.scss b/src/tabbar/layout/_window_control.scss index 6b3279b..3e9e576 100644 --- a/src/tabbar/layout/_window_control.scss +++ b/src/tabbar/layout/_window_control.scss @@ -8,7 +8,13 @@ See the above repository for updates as well as full license text. */ } #navigator-toolbox { - padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important; + padding-top: var(--uc-titlebar-padding) !important; + + @include Option("userChrome.tabbar.on_bottom") { + @include Option("userChrome.tabbar.on_bottom.menubar_on_top") { + padding-top: calc(max(var(--uc-menubar-height), var(--uc-menubar-height-default)) + var(--uc-titlebar-padding)) !important; + } + } } #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, From f9d71cc02997023c21333b53a99c69bdf3fb18ef Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 20 Nov 2022 06:05:11 +0900 Subject: [PATCH 57/88] Fix: URL View - As Launcher - https://alternativeto.net/category/utilities/application-launcher/ --- css/leptonChrome.css | 154 +++++++++++++++++++++++----- src/padding/_index.scss | 19 +++- src/padding/_urlview_expanding.scss | 12 --- src/urlview/_as_launcher.scss | 134 ++++++++++++++++++++++++ src/urlview/_index.scss | 5 + user.js | 1 + 6 files changed, 285 insertions(+), 40 deletions(-) create mode 100644 src/urlview/_as_launcher.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 52a40c6..71bb002 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -3769,38 +3769,40 @@ } } /*= URL Bar - Reduce Padding =================================================*/ -@supports -moz-bool-pref("userChrome.padding.urlbar") { - :root:not([uidensity="touch"]) #urlbar-container, - :root:not([uidensity="touch"]) #search-container { - padding-block: 3px !important; - /* Original: 4px */ - } +@supports not -moz-bool-pref("userChrome.urlView.as_launcher") { + @supports -moz-bool-pref("userChrome.padding.urlbar") { + :root:not([uidensity="touch"]) #urlbar-container, + :root:not([uidensity="touch"]) #search-container { + padding-block: 3px !important; + /* Original: 4px */ + } - :root:not([uidensity="compact"]) #urlbar-container, - :root:not([uidensity="compact"]) #search-container { - padding-block: 2px !important; - } + :root:not([uidensity="compact"]) #urlbar-container, + :root:not([uidensity="compact"]) #search-container { + padding-block: 2px !important; + } - /* spread menu */ - :root:not([uidensity]) .urlbarView-row { - padding-block: 1px !important; - /* Original: 2px */ - } + /* spread menu */ + :root:not([uidensity]) .urlbarView-row { + padding-block: 1px !important; + /* Original: 2px */ + } - :root[uidensity="compact"] .urlbarView-row { - padding-block: 0px !important; - } + :root[uidensity="compact"] .urlbarView-row { + padding-block: 0px !important; + } - :root:not([uidensity]) #urlbar .search-one-offs:not([hidden]) { - padding-block: 8px !important; - /* Original: 10px */ - } + :root:not([uidensity]) #urlbar .search-one-offs:not([hidden]) { + padding-block: 8px !important; + /* Original: 10px */ + } - :root[uidensity="compact"] #urlbar .search-one-offs:not([hidden]) { - padding-block: 2px !important; + :root[uidensity="compact"] #urlbar .search-one-offs:not([hidden]) { + padding-block: 2px !important; + } } } -@supports -moz-bool-pref("userChrome.padding.urlView_expanding") { +@supports -moz-bool-pref("userChrome.padding.urlView_expanding") or -moz-bool-pref("userChrome.urlView.as_launcher") { #urlbar[breakout][breakout-extend] { top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important; left: 0 !important; @@ -3812,7 +3814,8 @@ padding-block: 0 !important; padding-inline: var(--urlbar-container-padding, 0px) !important; } - +} +@supports -moz-bool-pref("userChrome.padding.urlView_expanding") { #urlbar[breakout][breakout-extend] > #urlbar-background { animation-name: none !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important; @@ -8326,6 +8329,105 @@ } } /** Url View UI ***************************************************************/ +/*= Url View - Looks like Launcher ===========================================*/ +@supports -moz-bool-pref("userChrome.urlView.as_launcher") { + /* Init & Base Layout */ + .urlbarView { + --urlbarView-favicon-width: 32px; + /* Original: 16px */ + --uc-urlView-typeIcon-size: 18px; + --uc-urlView-icon-size-differ: 14px; + --uc-searchBar-icon-size: 20px; + --uc-searchBar-button-size: 32px; + --uc-urlView-row-padding: 8px; + --uc-urlView-row-bottom: 2px; + --uc-urlView-margin: calc(var(--uc-sidebar-activate-width, 18rem) + var(--toolbarbutton-inner-padding)); + position: fixed !important; + left: 50%; + transform: translateX(-50%); + top: 12vh !important; + width: calc(100% - (var(--uc-urlView-margin) + var(--toolbarbutton-inner-padding))) !important; + /* paddding as margin */ + margin-inline: 0 !important; + padding-inline: calc(5px + var(--urlbar-container-padding)) !important; + /* background */ + background-color: var(--toolbar-field-focus-background-color) !important; + background-clip: border-box; + border: 1px solid var(--arrowpanel-border-color) !important; + border-radius: var(--toolbarbutton-border-radius) !important; + box-shadow: 0 2px 14px rgba(0, 0, 0, 0.13); + } + + .urlbarView-body-inner { + border-top: none !important; + } + + /* Big icons */ + :root[uidensity="compact"] .urlbarView { + --urlbarView-favicon-width: 24px; + /* Original: 16px */ + --uc-urlView-typeIcon-size: 16px; + --uc-urlView-icon-size-differ: 8px; + --uc-searchBar-icon-size: 18px; + --uc-searchBar-button-size: 30px; + } + + :root[uidensity="touch"] .urlbarView { + --uc-urlView-row-padding: 17px; + --uc-urlView-row-bottom: 11px; + } + + .urlbarView-row:not([type="tip"], [type="dynamic"]) { + position: relative; + min-height: calc(var(--urlbarView-favicon-width) + var(--uc-urlView-row-padding)) !important; + } + .urlbarView-row:not([type="tip"], [type="dynamic"]) .urlbarView-row-inner { + height: var(--urlbarView-favicon-width) !important; + } + .urlbarView-row:not([type="tip"], [type="dynamic"]) .urlbarView-favicon { + position: absolute; + } + .urlbarView-row:not([type="tip"], [type="dynamic"]) .urlbarView-title { + padding-inline-start: calc( + var(--urlbarView-item-inline-padding) + var(--identity-box-margin-inline) + var(--urlbarView-favicon-width) + ) !important; + } + .urlbarView-row:not([type="tip"], [type="dynamic"]) .urlbarView-type-icon { + width: var(--uc-urlView-typeIcon-size) !important; + height: var(--uc-urlView-typeIcon-size) !important; + margin-inline-start: calc(var(--uc-urlView-icon-size-differ) + var(--urlbarView-item-inline-padding)) !important; + /* Original: 8px */ + bottom: var(--uc-urlView-row-bottom); + } + .urlbarView-row[dynamicType="quickactions"] .urlbarView-favicon-img { + width: var(--urlbarView-favicon-width) !important; + /* Original: 16px */ + height: var(--urlbarView-favicon-width) !important; + /* Original: 16px */ + } + .urlbarView-row[dynamicType="quickactions"] .urlbarView-label { + font-size: 0.95em !important; + /* Original: 11px */ + } + + :root[uidensity="touch"] .urlbarView-row { + padding-block: 6px !important; + } + :root[uidensity="touch"] .urlbarView-row-inner { + padding-block: 11px !important; + } + + #urlbar .searchbar-engine-one-off-item { + min-width: var(--uc-searchBar-button-size) !important; + /* Original: 28px */ + height: var(--uc-searchBar-button-size) !important; + } + #urlbar .searchbar-engine-one-off-item > .button-box > .button-icon { + width: var(--uc-searchBar-icon-size) !important; + /* Original: 16px */ + height: var(--uc-searchBar-icon-size) !important; + } +} /*= Url View - Always show page actions ======================================*/ @supports -moz-bool-pref("userChrome.urlbar.always_show_page_actions") { #urlbar:not([breakout-extend="true"]) #pageActionButton { diff --git a/src/padding/_index.scss b/src/padding/_index.scss index 6acdb09..1ea3349 100644 --- a/src/padding/_index.scss +++ b/src/padding/_index.scss @@ -30,8 +30,23 @@ } /*= URL Bar - Reduce Padding =================================================*/ -@include Option("userChrome.padding.urlbar") { - @import "urlbar"; +@include NotOption("userChrome.urlView.as_launcher") { + @include Option("userChrome.padding.urlbar") { + @import "urlbar"; + } +} +@include Option("userChrome.padding.urlView_expanding", "userChrome.urlView.as_launcher") { + #urlbar[breakout][breakout-extend] { + top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important; + left: 0 !important; + width: 100% !important; + } + + #urlbar[breakout][breakout-extend] > #urlbar-input-container { + height: var(--urlbar-height) !important; + padding-block: 0 !important; + padding-inline: var(--urlbar-container-padding, 0px) !important; + } } @include Option("userChrome.padding.urlView_expanding") { @import "urlview_expanding"; diff --git a/src/padding/_urlview_expanding.scss b/src/padding/_urlview_expanding.scss index 0af7884..e541a24 100644 --- a/src/padding/_urlview_expanding.scss +++ b/src/padding/_urlview_expanding.scss @@ -1,15 +1,3 @@ -#urlbar[breakout][breakout-extend] { - top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important; - left: 0 !important; - width: 100% !important; -} - -#urlbar[breakout][breakout-extend] > #urlbar-input-container { - height: var(--urlbar-height) !important; - padding-block: 0 !important; - padding-inline: var(--urlbar-container-padding, 0px) !important; -} - #urlbar[breakout][breakout-extend] > #urlbar-background { animation-name: none !important; box-shadow: 0 1px 4px rgba(0, 0, 0, .05) !important; diff --git a/src/urlview/_as_launcher.scss b/src/urlview/_as_launcher.scss new file mode 100644 index 0000000..2cadf63 --- /dev/null +++ b/src/urlview/_as_launcher.scss @@ -0,0 +1,134 @@ +//-- Mixin --------------------------------------------------------------------- +$_URL_ROW_INNER_PADDING: 6px; // .urlbarView-row-inner + +$_urlViewIcon: 32px; +$_urlViewTypeIcon: 18px; +$_urlViewTypeIconMargin: 2px; +$_searchBarIcon: 20px; +$_searchBarButton: 32px; +@mixin _urlViewCompact() { + $_urlViewIcon: 24px; + $_urlViewTypeIcon: 16px; + $_urlViewTypeIconMargin: 0px; + $_searchBarIcon: 18px; + $_searchBarButton: 30px; + + :root[uidensity="compact"] { + @content; + } +} +@mixin _urlViewCompactInit() { + --urlbarView-favicon-width: #{ $_urlViewIcon }; /* Original: 16px */ + --uc-urlView-typeIcon-size: #{ $_urlViewTypeIcon }; + --uc-urlView-icon-size-differ: #{ $_urlViewIcon - $_urlViewTypeIcon }; + + --uc-searchBar-icon-size: #{ $_searchBarIcon }; + --uc-searchBar-button-size: #{ $_searchBarButton }; +} + +$_urlRowPadding: 2px; //.urlbarView-row +@mixin _urlViewTouch() { + $_urlRowPadding: 11px; + + :root[uidensity="touch"] { + @content; + } +} +@mixin _urlViewTouchInit() { + --uc-urlView-row-padding: #{ $_URL_ROW_INNER_PADDING + $_urlRowPadding }; + --uc-urlView-row-bottom: #{ $_urlRowPadding }; +} + +//------------------------------------------------------------------------------ + +/* Init & Base Layout */ +.urlbarView { + @include _urlViewCompactInit; + @include _urlViewTouchInit; + + --uc-urlView-margin: calc(var(--uc-sidebar-activate-width, 18rem) + var(--toolbarbutton-inner-padding)); + + position: fixed !important; + left: 50%; + transform: translateX(-50%); + top: 12vh !important; + width: calc(100% - (var(--uc-urlView-margin) + var(--toolbarbutton-inner-padding))) !important; + + /* paddding as margin */ + margin-inline: 0 !important; + padding-inline: calc(5px + var(--urlbar-container-padding)) !important;; + + /* background */ + background-color: var(--toolbar-field-focus-background-color) !important; + background-clip: border-box; + border: 1px solid var(--arrowpanel-border-color) !important; + border-radius: var(--toolbarbutton-border-radius) !important; + box-shadow: 0 2px 14px rgba(0, 0, 0, 0.13); +} +.urlbarView-body-inner { + border-top: none !important; +} + +/* Big icons */ +@include _urlViewCompact { + .urlbarView { + @include _urlViewCompactInit; + } +} +@include _urlViewTouch { + .urlbarView { + @include _urlViewTouchInit; + } +} + +.urlbarView-row { + &:not([type="tip"], [type="dynamic"]) { + position: relative; + min-height: #{ calc(var(--urlbarView-favicon-width) + var(--uc-urlView-row-padding)) } !important; + + .urlbarView-row-inner { + height: var(--urlbarView-favicon-width) !important; + } + .urlbarView-favicon { + position: absolute; + // padding-block: $_URL_ROW_INNER_PADDING; + } + .urlbarView-title { + padding-inline-start: calc(var(--urlbarView-item-inline-padding) + var(--identity-box-margin-inline) + var(--urlbarView-favicon-width)) !important; + } + .urlbarView-type-icon { + width: var(--uc-urlView-typeIcon-size) !important; + height: var(--uc-urlView-typeIcon-size) !important; + margin-inline-start: calc(var(--uc-urlView-icon-size-differ) + var(--urlbarView-item-inline-padding)) !important; /* Original: 8px */ + bottom: var(--uc-urlView-row-bottom); + } + } + + &[dynamicType="quickactions"] { + .urlbarView-favicon-img { + width: var(--urlbarView-favicon-width) !important; /* Original: 16px */ + height: var(--urlbarView-favicon-width) !important; /* Original: 16px */ + } + .urlbarView-label { + font-size: 0.95em !important; /* Original: 11px */ + } + } +} +@include _urlViewTouch { + .urlbarView-row { + padding-block: $_URL_ROW_INNER_PADDING !important; + } + .urlbarView-row-inner { + padding-block: $_urlRowPadding !important; + } +} + +#urlbar .searchbar-engine-one-off-item { + min-width: var(--uc-searchBar-button-size) !important; /* Original: 28px */ + height: var(--uc-searchBar-button-size) !important; + + > .button-box > .button-icon { + width: var(--uc-searchBar-icon-size) !important; /* Original: 16px */ + height: var(--uc-searchBar-icon-size) !important; + } +} diff --git a/src/urlview/_index.scss b/src/urlview/_index.scss index 2f19fb1..2eb2b0e 100644 --- a/src/urlview/_index.scss +++ b/src/urlview/_index.scss @@ -1,3 +1,8 @@ +/*= Url View - Looks like Launcher ===========================================*/ +@include Option("userChrome.urlView.as_launcher") { + @import "as_launcher"; +} + /*= Url View - Always show page actions ======================================*/ @include Option("userChrome.urlbar.always_show_page_actions") { @import "always_show_page_actions"; diff --git a/user.js b/user.js index 3fb14fc..adc097c 100644 --- a/user.js +++ b/user.js @@ -138,6 +138,7 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.padding.urlView_result", true); // user_pref("userChrome.padding.panel_header", true); +// user_pref("userChrome.urlView.as_launcher", true); // user_pref("userChrome.urlView.always_show_page_actions", true); // user_pref("userChrome.urlView.move_icon_to_left", true); // user_pref("userChrome.urlView.go_button_when_typing", true); From 822e48fcf7f5e112b3f74226ad20260f4784e830 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 20 Nov 2022 06:24:39 +0900 Subject: [PATCH 58/88] Add: URL View - Full Width Padding --- css/leptonChrome.css | 52 ++++++++++++++++++++++++++-- src/urlview/_as_launcher.scss | 5 +-- src/urlview/_full_width_padding.scss | 34 ++++++++++++++++++ src/urlview/_index.scss | 14 ++++++++ user.js | 1 + 5 files changed, 102 insertions(+), 4 deletions(-) create mode 100644 src/urlview/_full_width_padding.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 71bb002..37d84f4 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -8329,6 +8329,14 @@ } } /** Url View UI ***************************************************************/ +/*= Url View - Share Layout ==================================================*/ +@supports -moz-bool-pref("userChrome.urlView.as_launcher") or -moz-bool-pref("userChrome.urlView.full_width_padding") { + .urlbarView { + --uc-urlView-padding: calc(5px + var(--urlbar-container-padding)); + margin-inline: 0 !important; + /* Original: calc(5px + var(--urlbar-container-padding)) */ + } +} /*= Url View - Looks like Launcher ===========================================*/ @supports -moz-bool-pref("userChrome.urlView.as_launcher") { /* Init & Base Layout */ @@ -8348,8 +8356,6 @@ top: 12vh !important; width: calc(100% - (var(--uc-urlView-margin) + var(--toolbarbutton-inner-padding))) !important; /* paddding as margin */ - margin-inline: 0 !important; - padding-inline: calc(5px + var(--urlbar-container-padding)) !important; /* background */ background-color: var(--toolbar-field-focus-background-color) !important; background-clip: border-box; @@ -8357,6 +8363,11 @@ border-radius: var(--toolbarbutton-border-radius) !important; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.13); } + @supports not -moz-bool-pref("userChrome.urlView.full_width_padding") { + .urlbarView { + padding-inline: var(--uc-urlView-padding) !important; + } + } .urlbarView-body-inner { border-top: none !important; @@ -8428,6 +8439,43 @@ height: var(--uc-searchBar-icon-size) !important; } } +/*= Url View - Full Width Pddding ============================================*/ +@supports -moz-bool-pref("userChrome.urlView.full_width_padding") { + .urlbarView { + --uc-urlView-padding-double: calc(var(--uc-urlView-padding) * 2); + --uc-urlView-full-width-padding: var(--uc-urlView-padding-double); + } + @supports not -moz-bool-pref("userChrome.urlView.as_launcher") { + .urlbarView { + --uc-urlView-full-width-padding: var(--uc-urlView-padding); + width: 100% !important; + } + } + + #urlbar[open] > .urlbarView > .urlbarView-body-outer > .urlbarView-body-inner { + border-color: transparent !important; + } + #urlbar[open] > .urlbarView > .urlbarView-body-outer > .urlbarView-body-inner::before { + content: ""; + position: absolute; + border-top: 1px solid var(--autocomplete-popup-separator-color); + transform: translate(-50%, -1px); + left: 50%; + } + + #urlbar[open] > .urlbarView > .urlbarView-body-outer > .urlbarView-body-inner::before, + .urlbarView .search-one-offs { + width: calc(100% + 2px - var(--uc-urlView-padding-double)) !important; + } + + .urlbarView .search-one-offs { + margin-inline: var(--uc-urlView-full-width-padding) !important; + } + + .urlbarView-row-inner { + padding-inline: calc(var(--uc-urlView-full-width-padding) + var(--urlbarView-item-inline-padding)) !important; + } +} /*= Url View - Always show page actions ======================================*/ @supports -moz-bool-pref("userChrome.urlbar.always_show_page_actions") { #urlbar:not([breakout-extend="true"]) #pageActionButton { diff --git a/src/urlview/_as_launcher.scss b/src/urlview/_as_launcher.scss index 2cadf63..59786f4 100644 --- a/src/urlview/_as_launcher.scss +++ b/src/urlview/_as_launcher.scss @@ -55,8 +55,9 @@ $_urlRowPadding: 2px; //.urlbarView-row width: calc(100% - (var(--uc-urlView-margin) + var(--toolbarbutton-inner-padding))) !important; /* paddding as margin */ - margin-inline: 0 !important; - padding-inline: calc(5px + var(--urlbar-container-padding)) !important;; + @include NotOption("userChrome.urlView.full_width_padding") { + padding-inline: var(--uc-urlView-padding) !important; + } /* background */ background-color: var(--toolbar-field-focus-background-color) !important; diff --git a/src/urlview/_full_width_padding.scss b/src/urlview/_full_width_padding.scss new file mode 100644 index 0000000..4578448 --- /dev/null +++ b/src/urlview/_full_width_padding.scss @@ -0,0 +1,34 @@ +$_borderSize: 2px; + +.urlbarView { + --uc-urlView-padding-double: calc(var(--uc-urlView-padding) * 2); + --uc-urlView-full-width-padding: var(--uc-urlView-padding-double); + + @include NotOption("userChrome.urlView.as_launcher") { + --uc-urlView-full-width-padding: var(--uc-urlView-padding); + width: 100% !important; + } +} + +#urlbar[open] > .urlbarView > .urlbarView-body-outer > .urlbarView-body-inner { + border-color: transparent !important; + + &::before { + content: ""; + position: absolute; + border-top: 1px solid var(--autocomplete-popup-separator-color); + transform: translate(-50%, -1px); + left: 50%; + } +} + +#urlbar[open] > .urlbarView > .urlbarView-body-outer > .urlbarView-body-inner::before, +.urlbarView .search-one-offs { + width: calc(100% + $_borderSize - var(--uc-urlView-padding-double)) !important; +} +.urlbarView .search-one-offs { + margin-inline: var(--uc-urlView-full-width-padding) !important; +} +.urlbarView-row-inner { + padding-inline: calc(var(--uc-urlView-full-width-padding) + var(--urlbarView-item-inline-padding)) !important; +} diff --git a/src/urlview/_index.scss b/src/urlview/_index.scss index 2eb2b0e..bc70297 100644 --- a/src/urlview/_index.scss +++ b/src/urlview/_index.scss @@ -1,8 +1,22 @@ +/*= Url View - Share Layout ==================================================*/ +@include Option("userChrome.urlView.as_launcher", "userChrome.urlView.full_width_padding") { + .urlbarView { + --uc-urlView-padding: calc(5px + var(--urlbar-container-padding)); + + margin-inline: 0 !important; /* Original: calc(5px + var(--urlbar-container-padding)) */ + } +} + /*= Url View - Looks like Launcher ===========================================*/ @include Option("userChrome.urlView.as_launcher") { @import "as_launcher"; } +/*= Url View - Full Width Pddding ============================================*/ +@include Option("userChrome.urlView.full_width_padding") { + @import "full_width_padding"; +} + /*= Url View - Always show page actions ======================================*/ @include Option("userChrome.urlbar.always_show_page_actions") { @import "always_show_page_actions"; diff --git a/user.js b/user.js index adc097c..494098e 100644 --- a/user.js +++ b/user.js @@ -139,6 +139,7 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.padding.panel_header", true); // user_pref("userChrome.urlView.as_launcher", true); +// user_pref("userChrome.urlView.full_width_padding", true); // user_pref("userChrome.urlView.always_show_page_actions", true); // user_pref("userChrome.urlView.move_icon_to_left", true); // user_pref("userChrome.urlView.go_button_when_typing", true); From 5b1b94d76fd71555d767d7f6f154f6fcdaee3633 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 21 Nov 2022 04:04:52 +0900 Subject: [PATCH 59/88] Add: URL Bar - Iconbox as separator --- CREDITS | 5 +++ css/leptonChrome.css | 57 ++++++++++++++++++++++++-- src/hidden/_index.scss | 5 ++- src/urlview/_iconbox_as_separator.scss | 52 +++++++++++++++++++++++ src/urlview/_index.scss | 5 +++ user.js | 2 + 6 files changed, 121 insertions(+), 5 deletions(-) create mode 100644 src/urlview/_iconbox_as_separator.scss diff --git a/CREDITS b/CREDITS index e946331..c2be3bc 100644 --- a/CREDITS +++ b/CREDITS @@ -143,6 +143,11 @@ W: https://gist.github.com/mmis1000/08d8de4bbe70c04423f0b966bcc286b1 C: Copyright (c) 2021 Mmis1000 L: MIT +N: edge-frfox +W: https://github.com/bmFtZQ/edge-frfox +C: Copyright (c) 2021 bmFtZQ +L: MIT + N: Feather W: https://github.com/feathericons/feather C: Copyright (c) 2013-2017 Cole Bemis diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 37d84f4..c1a89e6 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -8329,6 +8329,53 @@ } } /** Url View UI ***************************************************************/ +/*= Url Bar - Icon box as Separator ==========================================*/ +@supports -moz-bool-pref("userChrome.urlbar.iconbox_as_separator") { + #identity-box { + /* separator */ + position: relative; + } + + #identity-box[pageproxystate="valid"].notSecureText > .identity-box-button:not(:hover, [open]), + #identity-box[pageproxystate="valid"].chromeUI > .identity-box-button:not(:hover, [open]), + #identity-box[pageproxystate="valid"].extensionPage > .identity-box-button:not(:hover, [open]) { + /* remove background from urlbar box */ + background-color: transparent !important; + } + #identity-box[pageproxystate="valid"].notSecureText > .identity-box-button:not(:hover, [open])::after, + #identity-box[pageproxystate="valid"].chromeUI > .identity-box-button:not(:hover, [open])::after, + #identity-box[pageproxystate="valid"].extensionPage > .identity-box-button:not(:hover, [open])::after { + opacity: 0.375; + } + #identity-box[pageproxystate="valid"].notSecureText > .identity-box-button::after, + #identity-box[pageproxystate="valid"].chromeUI > .identity-box-button::after, + #identity-box[pageproxystate="valid"].extensionPage > .identity-box-button::after { + /* Box Model */ + content: ""; + position: absolute; + display: block; + /* Position */ + right: 0; + top: 50%; + transform: translateY(-50%); + /* Bar shape */ + width: 1px; + height: 1em; + /* Bar Color */ + opacity: 0; + background-color: currentColor; + } + #identity-box[pageproxystate="valid"] #identity-icon-label { + /* increase space between icon and text - as identity box padding */ + padding-inline-start: 8px !important; + } + + @media (prefers-reduced-motion: no-preference) { + .identity-box-button::after { + transition: opacity 0.2s var(--animation-easing-function); + } + } +} /*= Url View - Share Layout ==================================================*/ @supports -moz-bool-pref("userChrome.urlView.as_launcher") or -moz-bool-pref("userChrome.urlView.full_width_padding") { .urlbarView { @@ -10055,14 +10102,16 @@ } } @supports -moz-bool-pref("userChrome.hidden.urlbar_iconbox.label_only") { - #identity-box[pageproxystate="valid"].chromeUI #identity-icon-box, - #identity-box[pageproxystate="valid"].extensionPage #identity-icon-box { - padding-inline: var(--urlbar-icon-padding) !important; - } #identity-box[pageproxystate="valid"].chromeUI #identity-icon-box:not(:hover), #identity-box[pageproxystate="valid"].extensionPage #identity-icon-box:not(:hover) { background-color: transparent !important; } + @supports not -moz-bool-pref("userChrome.urlbar.iconbox_as_separator") { + #identity-box[pageproxystate="valid"].chromeUI #identity-icon-box, + #identity-box[pageproxystate="valid"].extensionPage #identity-icon-box { + padding-inline: var(--urlbar-icon-padding) !important; + } + } #identity-box[pageproxystate="valid"] #identity-icon-label { display: none !important; } diff --git a/src/hidden/_index.scss b/src/hidden/_index.scss index 56e0de4..226c5e1 100644 --- a/src/hidden/_index.scss +++ b/src/hidden/_index.scss @@ -61,10 +61,13 @@ @include Option("userChrome.hidden.urlbar_iconbox.label_only") { &.chromeUI #identity-icon-box, &.extensionPage #identity-icon-box { - padding-inline: var(--urlbar-icon-padding) !important; &:not(:hover) { background-color: transparent !important; } + + @include NotOption("userChrome.urlbar.iconbox_as_separator") { + padding-inline: var(--urlbar-icon-padding) !important; + } } #identity-icon-label { diff --git a/src/urlview/_iconbox_as_separator.scss b/src/urlview/_iconbox_as_separator.scss new file mode 100644 index 0000000..20d09d7 --- /dev/null +++ b/src/urlview/_iconbox_as_separator.scss @@ -0,0 +1,52 @@ +#identity-box { + /* separator */ + position: relative; +} + +#identity-box[pageproxystate="valid"] { + &.notSecureText, + &.chromeUI, + &.extensionPage { + > .identity-box-button { + &:not(:hover, [open]) { + /* remove background from urlbar box */ + background-color: transparent !important; + + &::after { + opacity: 0.375; + } + } + + &::after { + /* Box Model */ + content: ""; + position: absolute; + display: block; + + /* Position */ + right: 0; + top: 50%; + transform: translateY(-50%); + + /* Bar shape */ + width: 1px; + height: 1em; + + /* Bar Color */ + opacity: 0; + background-color: currentColor; + } + } + } + + #identity-icon-label { + /* increase space between icon and text - as identity box padding */ + padding-inline-start: 8px !important; + } +} + +@include Animate { + .identity-box-button::after { + transition: opacity 0.2s var(--animation-easing-function); + } +} diff --git a/src/urlview/_index.scss b/src/urlview/_index.scss index bc70297..1233e93 100644 --- a/src/urlview/_index.scss +++ b/src/urlview/_index.scss @@ -1,3 +1,8 @@ +/*= Url Bar - Icon box as Separator ==========================================*/ +@include Option("userChrome.urlbar.iconbox_as_separator") { + @import "iconbox_as_separator"; +} + /*= Url View - Share Layout ==================================================*/ @include Option("userChrome.urlView.as_launcher", "userChrome.urlView.full_width_padding") { .urlbarView { diff --git a/user.js b/user.js index 494098e..0af7678 100644 --- a/user.js +++ b/user.js @@ -138,6 +138,8 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.padding.urlView_result", true); // user_pref("userChrome.padding.panel_header", true); +// user_pref("userChrome.urlbar.iconbox_as_separator", true); + // user_pref("userChrome.urlView.as_launcher", true); // user_pref("userChrome.urlView.full_width_padding", true); // user_pref("userChrome.urlView.always_show_page_actions", true); From 29509ef945ca9b8ccfae7122893fb5a1e15dfeab Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 21 Nov 2022 04:15:52 +0900 Subject: [PATCH 60/88] Fix: URL Bar & View option names --- css/leptonChrome.css | 14 +++++++------- src/hidden/_index.scss | 2 +- src/padding/_index.scss | 4 ++-- src/urlview/_full_width_padding.scss | 2 +- src/urlview/_index.scss | 6 +++--- user.js | 4 ++-- 6 files changed, 16 insertions(+), 16 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index c1a89e6..080efdb 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -3769,7 +3769,7 @@ } } /*= URL Bar - Reduce Padding =================================================*/ -@supports not -moz-bool-pref("userChrome.urlView.as_launcher") { +@supports not -moz-bool-pref("userChrome.urlView.as_commandbar") { @supports -moz-bool-pref("userChrome.padding.urlbar") { :root:not([uidensity="touch"]) #urlbar-container, :root:not([uidensity="touch"]) #search-container { @@ -3802,7 +3802,7 @@ } } } -@supports -moz-bool-pref("userChrome.padding.urlView_expanding") or -moz-bool-pref("userChrome.urlView.as_launcher") { +@supports -moz-bool-pref("userChrome.padding.urlView_expanding") or -moz-bool-pref("userChrome.urlView.as_commandbar") { #urlbar[breakout][breakout-extend] { top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important; left: 0 !important; @@ -8330,7 +8330,7 @@ } /** Url View UI ***************************************************************/ /*= Url Bar - Icon box as Separator ==========================================*/ -@supports -moz-bool-pref("userChrome.urlbar.iconbox_as_separator") { +@supports -moz-bool-pref("userChrome.urlbar.iconbox_with_separator") { #identity-box { /* separator */ position: relative; @@ -8377,7 +8377,7 @@ } } /*= Url View - Share Layout ==================================================*/ -@supports -moz-bool-pref("userChrome.urlView.as_launcher") or -moz-bool-pref("userChrome.urlView.full_width_padding") { +@supports -moz-bool-pref("userChrome.urlView.as_commandbar") or -moz-bool-pref("userChrome.urlView.full_width_padding") { .urlbarView { --uc-urlView-padding: calc(5px + var(--urlbar-container-padding)); margin-inline: 0 !important; @@ -8385,7 +8385,7 @@ } } /*= Url View - Looks like Launcher ===========================================*/ -@supports -moz-bool-pref("userChrome.urlView.as_launcher") { +@supports -moz-bool-pref("userChrome.urlView.as_commandbar") { /* Init & Base Layout */ .urlbarView { --urlbarView-favicon-width: 32px; @@ -8492,7 +8492,7 @@ --uc-urlView-padding-double: calc(var(--uc-urlView-padding) * 2); --uc-urlView-full-width-padding: var(--uc-urlView-padding-double); } - @supports not -moz-bool-pref("userChrome.urlView.as_launcher") { + @supports not -moz-bool-pref("userChrome.urlView.as_commandbar") { .urlbarView { --uc-urlView-full-width-padding: var(--uc-urlView-padding); width: 100% !important; @@ -10106,7 +10106,7 @@ #identity-box[pageproxystate="valid"].extensionPage #identity-icon-box:not(:hover) { background-color: transparent !important; } - @supports not -moz-bool-pref("userChrome.urlbar.iconbox_as_separator") { + @supports not -moz-bool-pref("userChrome.urlbar.iconbox_with_separator") { #identity-box[pageproxystate="valid"].chromeUI #identity-icon-box, #identity-box[pageproxystate="valid"].extensionPage #identity-icon-box { padding-inline: var(--urlbar-icon-padding) !important; diff --git a/src/hidden/_index.scss b/src/hidden/_index.scss index 226c5e1..27fffeb 100644 --- a/src/hidden/_index.scss +++ b/src/hidden/_index.scss @@ -65,7 +65,7 @@ background-color: transparent !important; } - @include NotOption("userChrome.urlbar.iconbox_as_separator") { + @include NotOption("userChrome.urlbar.iconbox_with_separator") { padding-inline: var(--urlbar-icon-padding) !important; } } diff --git a/src/padding/_index.scss b/src/padding/_index.scss index 1ea3349..c2089a9 100644 --- a/src/padding/_index.scss +++ b/src/padding/_index.scss @@ -30,12 +30,12 @@ } /*= URL Bar - Reduce Padding =================================================*/ -@include NotOption("userChrome.urlView.as_launcher") { +@include NotOption("userChrome.urlView.as_commandbar") { @include Option("userChrome.padding.urlbar") { @import "urlbar"; } } -@include Option("userChrome.padding.urlView_expanding", "userChrome.urlView.as_launcher") { +@include Option("userChrome.padding.urlView_expanding", "userChrome.urlView.as_commandbar") { #urlbar[breakout][breakout-extend] { top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important; left: 0 !important; diff --git a/src/urlview/_full_width_padding.scss b/src/urlview/_full_width_padding.scss index 4578448..201ef94 100644 --- a/src/urlview/_full_width_padding.scss +++ b/src/urlview/_full_width_padding.scss @@ -4,7 +4,7 @@ $_borderSize: 2px; --uc-urlView-padding-double: calc(var(--uc-urlView-padding) * 2); --uc-urlView-full-width-padding: var(--uc-urlView-padding-double); - @include NotOption("userChrome.urlView.as_launcher") { + @include NotOption("userChrome.urlView.as_commandbar") { --uc-urlView-full-width-padding: var(--uc-urlView-padding); width: 100% !important; } diff --git a/src/urlview/_index.scss b/src/urlview/_index.scss index 1233e93..64a4442 100644 --- a/src/urlview/_index.scss +++ b/src/urlview/_index.scss @@ -1,10 +1,10 @@ /*= Url Bar - Icon box as Separator ==========================================*/ -@include Option("userChrome.urlbar.iconbox_as_separator") { +@include Option("userChrome.urlbar.iconbox_with_separator") { @import "iconbox_as_separator"; } /*= Url View - Share Layout ==================================================*/ -@include Option("userChrome.urlView.as_launcher", "userChrome.urlView.full_width_padding") { +@include Option("userChrome.urlView.as_commandbar", "userChrome.urlView.full_width_padding") { .urlbarView { --uc-urlView-padding: calc(5px + var(--urlbar-container-padding)); @@ -13,7 +13,7 @@ } /*= Url View - Looks like Launcher ===========================================*/ -@include Option("userChrome.urlView.as_launcher") { +@include Option("userChrome.urlView.as_commandbar") { @import "as_launcher"; } diff --git a/user.js b/user.js index 0af7678..240bebd 100644 --- a/user.js +++ b/user.js @@ -138,9 +138,9 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.padding.urlView_result", true); // user_pref("userChrome.padding.panel_header", true); -// user_pref("userChrome.urlbar.iconbox_as_separator", true); +// user_pref("userChrome.urlbar.iconbox_with_separator", true); -// user_pref("userChrome.urlView.as_launcher", true); +// user_pref("userChrome.urlView.as_commandbar", true); // user_pref("userChrome.urlView.full_width_padding", true); // user_pref("userChrome.urlView.always_show_page_actions", true); // user_pref("userChrome.urlView.move_icon_to_left", true); From 8c43f407b1c2ba0ad174173595bb771aadcb2879 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 21 Nov 2022 07:37:31 +0900 Subject: [PATCH 61/88] Fix: Combined - With auto hide button --- css/leptonChrome.css | 103 ++++++++++++++++++++----- src/autohide/_back_button.scss | 2 +- src/autohide/_forward_button.scss | 2 +- src/autohide/_index.scss | 6 ++ src/combined/_back_forward_button.scss | 41 +++++++++- src/combined/_index.scss | 18 ++++- 6 files changed, 145 insertions(+), 27 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 080efdb..338f387 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -8707,10 +8707,10 @@ @supports -moz-bool-pref("userChrome.combined.urlbar.nav_button") or -moz-bool-pref("userChrome.combined.urlbar.home_button") { #nav-bar-customization-target > #urlbar-container { /* var(--urlbar-margin-inline) */ - margin-inline-start: calc(-1 * var(--uc-urlbar-combined-margin)) !important; + margin-inline-start: calc(-1 * var(--uc-urlbar-combined-margin, 0px)) !important; } #nav-bar-customization-target > #urlbar-container > #urlbar:not([breakout][breakout-extend]) { - padding-left: var(--uc-urlbar-combined-margin); + padding-left: var(--uc-urlbar-combined-margin, 0px); } @supports -moz-bool-pref("userChrome.combined.urlbar.nav_button") { #nav-bar-customization-target > #urlbar-container { @@ -8731,12 +8731,30 @@ } } } + + @supports -moz-bool-pref("userChrome.combined.urlbar.nav_button") { + @supports -moz-bool-pref("userChrome.autohide.forward_button") { + #nav-bar-customization-target + > #forward-button[disabled="true"] + ~ #urlbar-container + > #urlbar:not([breakout][breakout-extend]) { + padding-left: calc(var(--uc-urlbar-combined-margin, 0px) - var(--urlbar-icon-padding)); + } + } + @media (prefers-reduced-motion: no-preference) { + #nav-bar-customization-target > #forward-button[disabled="true"] ~ #urlbar-container > #urlbar { + transition-property: margin-left, padding-left; + transition-duration: 0.5s; + transition-timing-function: var(--animation-easing-function); + } + } + } } @supports -moz-bool-pref("userChrome.combined.nav_button") or -moz-bool-pref("userChrome.combined.urlbar.nav_button") { #nav-bar-customization-target > #forward-button { + --uc-forward-button-margin: calc(-1 * var(--uc-toolbarbutton-boundary) + 1px); z-index: 2; position: relative; - margin-inline-start: calc(-1 * var(--uc-toolbarbutton-boundary) + 1px) !important; } #nav-bar-customization-target > #forward-button > .toolbarbutton-icon { padding-inline-end: var(--urlbar-icon-padding) !important; @@ -8767,10 +8785,6 @@ background-color: var(--uc-combined-circlebutton-active-background) !important; border-color: rgba(12, 12, 13, 0.4); } - #nav-bar-customization-target > #forward-button[disabled="true"] { - opacity: 1 !important; - /* Original: 0.4 */ - } #nav-bar-customization-target > #forward-button[disabled="true"] > .toolbarbutton-icon { background-color: color-mix( in srgb, @@ -8779,6 +8793,12 @@ ) !important; fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); } + @supports not -moz-bool-pref("userChrome.autohide.forward_button") { + #nav-bar-customization-target > #forward-button[disabled="true"] { + opacity: 1 !important; + /* Original: 0.4 */ + } + } } } @supports not -moz-bool-pref("userChrome.combined.urlbar.home_button") { @@ -8795,10 +8815,6 @@ background-color: var(--uc-combined-circlebutton-active-background) !important; border-color: rgba(12, 12, 13, 0.4); } - #nav-bar-customization-target > #forward-button[disabled="true"] { - opacity: 1 !important; - /* Original: 0.4 */ - } #nav-bar-customization-target > #forward-button[disabled="true"] > .toolbarbutton-icon { background-color: color-mix( in srgb, @@ -8807,9 +8823,25 @@ ) !important; fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); } + @supports not -moz-bool-pref("userChrome.autohide.forward_button") { + #nav-bar-customization-target > #forward-button[disabled="true"] { + opacity: 1 !important; + /* Original: 0.4 */ + } + } } } } + @supports not -moz-bool-pref("userChrome.autohide.forward_button") { + #nav-bar-customization-target > #forward-button { + margin-inline-start: var(--uc-forward-button-margin) !important; + } + } + @supports -moz-bool-pref("userChrome.autohide.forward_button") { + #nav-bar-customization-target > #forward-button:not([disabled="true"]) { + margin-inline-start: var(--uc-forward-button-margin) !important; + } + } #nav-bar-customization-target > #back-button { position: relative; } @@ -8826,10 +8858,6 @@ background-color: var(--uc-combined-circlebutton-active-background) !important; border-color: rgba(12, 12, 13, 0.4); } - #nav-bar-customization-target > #back-button[disabled="true"] { - opacity: 1 !important; - /* Original: 0.4 */ - } #nav-bar-customization-target > #back-button[disabled="true"] > .toolbarbutton-icon { background-color: color-mix( in srgb, @@ -8838,6 +8866,12 @@ ) !important; fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); } + @supports not -moz-bool-pref("userChrome.autohide.back_button") { + #nav-bar-customization-target > #back-button[disabled="true"] { + opacity: 1 !important; + /* Original: 0.4 */ + } + } @supports -moz-bool-pref("userChrome.combined.nav_button.home_button") or -moz-bool-pref("userChrome.combined.urlbar.home_button") { #nav-bar-customization-target > #back-button { z-index: 2; @@ -8861,7 +8895,19 @@ background-clip: content-box !important; border-radius: 100%; padding-block: 0 !important; - padding-inline-end: 0 !important; + } + @supports not -moz-bool-pref("userChrome.autohide.back_button") { + #nav-bar-customization-target > #back-button { + padding-inline-end: 0 !important; + } + } + @supports -moz-bool-pref("userChrome.autohide.back_button") { + #nav-bar-customization-target > #back-button:not([disabled="true"]) { + padding-inline-end: 0 !important; + } + #nav-bar-customization-target > #back-button[disabled="true"] { + padding-inline-end: calc(var(--toolbarbutton-outer-padding) + 1px) !important; + } } #nav-bar-customization-target > #back-button > menupopup { margin-top: -1px !important; @@ -8883,7 +8929,19 @@ background-clip: content-box !important; border-radius: 100%; padding-block: 0 !important; - padding-inline-end: 0 !important; + } + @supports not -moz-bool-pref("userChrome.autohide.back_button") { + #nav-bar-customization-target > #back-button { + padding-inline-end: 0 !important; + } + } + @supports -moz-bool-pref("userChrome.autohide.back_button") { + #nav-bar-customization-target > #back-button:not([disabled="true"]) { + padding-inline-end: 0 !important; + } + #nav-bar-customization-target > #back-button[disabled="true"] { + padding-inline-end: calc(var(--toolbarbutton-outer-padding) + 1px) !important; + } } #nav-bar-customization-target > #back-button > menupopup { margin-top: -1px !important; @@ -9208,9 +9266,16 @@ } } /** Auto Hide *****************************************************************/ +@supports -moz-bool-pref("userChrome.autohide.back_button") or -moz-bool-pref("userChrome.autohide.forward_button") { + :root { + --uc-toolbarbutton-hide-size: calc( + -1 * (16px + (2 * var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding))) + ); + } +} @supports -moz-bool-pref("userChrome.autohide.back_button") { #back-button[disabled="true"] { - margin-left: -36px !important; + margin-left: var(--uc-toolbarbutton-hide-size) !important; opacity: 0 !important; pointer-events: none; } @@ -9228,7 +9293,7 @@ } @supports -moz-bool-pref("userChrome.autohide.forward_button") { #forward-button[disabled="true"] { - margin-left: -36px !important; + margin-left: var(--uc-toolbarbutton-hide-size) !important; opacity: 0 !important; pointer-events: none; } diff --git a/src/autohide/_back_button.scss b/src/autohide/_back_button.scss index beab781..21cc162 100644 --- a/src/autohide/_back_button.scss +++ b/src/autohide/_back_button.scss @@ -1,5 +1,5 @@ #back-button[disabled="true"] { - margin-left: -36px !important; + margin-left: var(--uc-toolbarbutton-hide-size) !important; opacity: 0 !important; pointer-events: none; } diff --git a/src/autohide/_forward_button.scss b/src/autohide/_forward_button.scss index 5024524..4e6e240 100644 --- a/src/autohide/_forward_button.scss +++ b/src/autohide/_forward_button.scss @@ -1,5 +1,5 @@ #forward-button[disabled="true"] { - margin-left: -36px !important; + margin-left: var(--uc-toolbarbutton-hide-size) !important; opacity: 0 !important; pointer-events: none; } diff --git a/src/autohide/_index.scss b/src/autohide/_index.scss index 3864d5e..805c44e 100644 --- a/src/autohide/_index.scss +++ b/src/autohide/_index.scss @@ -1,3 +1,9 @@ +@include Option("userChrome.autohide.back_button", "userChrome.autohide.forward_button") { + :root { + --uc-toolbarbutton-hide-size: calc(-1 * (16px + (2 * var(--toolbarbutton-outer-padding) + var(--toolbarbutton-inner-padding)))); + } +} + @include Option("userChrome.autohide.back_button") { @import "back_button"; } diff --git a/src/combined/_back_forward_button.scss b/src/combined/_back_forward_button.scss index a9b1f95..d99dcc3 100644 --- a/src/combined/_back_forward_button.scss +++ b/src/combined/_back_forward_button.scss @@ -15,8 +15,6 @@ } &[disabled="true"] { - opacity: 1 !important; /* Original: 0.4 */ - > .toolbarbutton-icon { background-color: color-mix(in srgb, var(--toolbarbutton-hover-background), var(--toolbar-field-background-color) 40%) !important; fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); @@ -31,7 +29,17 @@ border-radius: 100%; padding-block: 0 !important; - padding-inline-end: 0 !important; + @include NotOption("userChrome.autohide.back_button") { + padding-inline-end: 0 !important; + } + @include Option("userChrome.autohide.back_button") { + &:not([disabled="true"]) { + padding-inline-end: 0 !important; + } + &[disabled="true"] { + padding-inline-end: calc(var(--toolbarbutton-outer-padding) + 1px) !important; + } + } > menupopup { margin-top: -1px !important; @@ -52,10 +60,11 @@ #nav-bar-customization-target > { #forward-button { + --uc-forward-button-margin: calc(-1 * var(--uc-toolbarbutton-boundary) + 1px); + z-index: 2; position: relative; - margin-inline-start: calc(-1 * var(--uc-toolbarbutton-boundary) + 1px) !important; > .toolbarbutton-icon { padding-inline-end: var(--urlbar-icon-padding) !important; /* Original: var(--toolbarbutton-inner-padding) */ padding-block: var(--urlbar-icon-padding) !important; @@ -70,19 +79,43 @@ @include Option("userChrome.combined.urlbar.home_button") { @include NotOption("userChrome.combined.nav_button.home_button") { @include _combined_nav_button_background; + @include NotOption("userChrome.autohide.forward_button") { + &[disabled="true"] { + opacity: 1 !important; /* Original: 0.4 */ + } + } } } @include NotOption("userChrome.combined.urlbar.home_button") { @include _combined_nav_button_background; + @include NotOption("userChrome.autohide.forward_button") { + &[disabled="true"] { + opacity: 1 !important; /* Original: 0.4 */ + } + } } } } + + @include NotOption("userChrome.autohide.forward_button") { + margin-inline-start: var(--uc-forward-button-margin) !important; + } + @include Option("userChrome.autohide.forward_button") { + &:not([disabled="true"]) { + margin-inline-start: var(--uc-forward-button-margin) !important; + } + } } #back-button { position: relative; @include _combined_nav_button_background; + @include NotOption("userChrome.autohide.back_button") { + &[disabled="true"] { + opacity: 1 !important; /* Original: 0.4 */ + } + } @include Option("userChrome.combined.nav_button.home_button", "userChrome.combined.urlbar.home_button") { z-index: 2; diff --git a/src/combined/_index.scss b/src/combined/_index.scss index f88f4bd..1497da8 100644 --- a/src/combined/_index.scss +++ b/src/combined/_index.scss @@ -45,10 +45,10 @@ @include Option("userChrome.combined.urlbar.nav_button", "userChrome.combined.urlbar.home_button") { #nav-bar-customization-target > #urlbar-container { /* var(--urlbar-margin-inline) */ - margin-inline-start: calc(-1 * var(--uc-urlbar-combined-margin)) !important; + margin-inline-start: calc(-1 * var(--uc-urlbar-combined-margin, 0px)) !important; > #urlbar:not([breakout][breakout-extend]) { - padding-left: var(--uc-urlbar-combined-margin); + padding-left: var(--uc-urlbar-combined-margin, 0px); } @include Option("userChrome.combined.urlbar.nav_button") { @@ -66,6 +66,20 @@ } } } + #nav-bar-customization-target > #forward-button[disabled="true"] ~ #urlbar-container > #urlbar { + @include Option("userChrome.combined.urlbar.nav_button") { + @include Option("userChrome.autohide.forward_button") { + &:not([breakout][breakout-extend]) { + padding-left: calc(var(--uc-urlbar-combined-margin, 0px) - var(--urlbar-icon-padding)); + } + } + @include Animate { + transition-property: margin-left, padding-left; + transition-duration: 0.5s; + transition-timing-function: var(--animation-easing-function); + } + } + } } @include Option("userChrome.combined.nav_button", "userChrome.combined.urlbar.nav_button") { From e732b3e052c1f6d7330ca9756adc7ded28bae8e1 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 21 Nov 2022 08:56:45 +0900 Subject: [PATCH 62/88] Fix: As Commandbar - `%` -> `vw` --- css/leptonChrome.css | 4 ++-- src/urlview/_as_launcher.scss | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 338f387..b70f67e 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -8398,10 +8398,10 @@ --uc-urlView-row-bottom: 2px; --uc-urlView-margin: calc(var(--uc-sidebar-activate-width, 18rem) + var(--toolbarbutton-inner-padding)); position: fixed !important; - left: 50%; + left: 50vw; transform: translateX(-50%); top: 12vh !important; - width: calc(100% - (var(--uc-urlView-margin) + var(--toolbarbutton-inner-padding))) !important; + width: calc(100vw - (var(--uc-urlView-margin) + var(--toolbarbutton-inner-padding))) !important; /* paddding as margin */ /* background */ background-color: var(--toolbar-field-focus-background-color) !important; diff --git a/src/urlview/_as_launcher.scss b/src/urlview/_as_launcher.scss index 59786f4..5fe9542 100644 --- a/src/urlview/_as_launcher.scss +++ b/src/urlview/_as_launcher.scss @@ -49,10 +49,10 @@ $_urlRowPadding: 2px; //.urlbarView-row --uc-urlView-margin: calc(var(--uc-sidebar-activate-width, 18rem) + var(--toolbarbutton-inner-padding)); position: fixed !important; - left: 50%; + left: 50vw; transform: translateX(-50%); top: 12vh !important; - width: calc(100% - (var(--uc-urlView-margin) + var(--toolbarbutton-inner-padding))) !important; + width: calc(100vw - (var(--uc-urlView-margin) + var(--toolbarbutton-inner-padding))) !important; /* paddding as margin */ @include NotOption("userChrome.urlView.full_width_padding") { From 7c16a7b687651dbc5bb747f2b2cfd833829a8817 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 21 Nov 2022 09:39:02 +0900 Subject: [PATCH 63/88] Fix: Various alignment adjustment --- css/leptonChrome.css | 20 ++++++++++++++++---- src/navbar/_as_sidebar.scss | 15 +++++++++++---- src/tabbar/_unscroll.scss | 2 ++ src/urlview/_as_launcher.scss | 2 ++ 4 files changed, 31 insertions(+), 8 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index b70f67e..53efbe7 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6393,6 +6393,8 @@ #tabbrowser-tabs[closebuttons="activetab"][hasadjacentnewtabbutton="true"] #tabbrowser-arrowscrollbox-periphery { position: absolute !important; right: 0; + top: 50%; + transform: translateY(-50%); } #tabbrowser-tabs[closebuttons="activetab"][hasadjacentnewtabbutton="true"] #tabbrowser-arrowscrollbox-periphery @@ -8185,8 +8187,11 @@ position: absolute !important; } + #nav-bar-customization-target { + -moz-box-pack: justify; + } + #nav-bar { - --toolbarbutton-outer-padding: 0px !important; z-index: 1; margin-top: calc( var(--uc-tabbar-height) + var(--uc-bm-height) + var(--uc-menubar-height) + var(--uc-navbar-margin-block) @@ -8248,6 +8253,13 @@ transform: translateX(-50%); } + #customizableui-special-spring1, + #customizableui-special-spring2, + #wrapper-customizableui-special-spring1, + #wrapper-customizableui-special-spring2 { + display: none !important; + } + #sidebar-header { margin-top: var(--uc-navbar-sideblock-height) !important; -moz-window-dragging: drag; @@ -8285,9 +8297,7 @@ :root[customizing="true"]:has(#sidebar-box[positionend="true"]) #customization-container { margin-inline-end: var(--uc-sidebar-activate-width); } - :root[customizing="true"] #customization-palette-container { - flex-shrink: 0.35 !important; - } + :root[customizing="true"] #customization-palette-container, :root[customizing="true"] #customization-panel-container { flex-shrink: 0.5 !important; } @@ -8444,6 +8454,8 @@ } .urlbarView-row:not([type="tip"], [type="dynamic"]) .urlbarView-favicon { position: absolute; + top: 50%; + transform: translateY(-50%); } .urlbarView-row:not([type="tip"], [type="dynamic"]) .urlbarView-title { padding-inline-start: calc( diff --git a/src/navbar/_as_sidebar.scss b/src/navbar/_as_sidebar.scss index 3b3c31b..8d813d4 100644 --- a/src/navbar/_as_sidebar.scss +++ b/src/navbar/_as_sidebar.scss @@ -20,8 +20,11 @@ position: absolute !important; } +#nav-bar-customization-target { + -moz-box-pack: justify; +} #nav-bar { - --toolbarbutton-outer-padding: 0px !important; + // --toolbarbutton-outer-padding: 0px !important; z-index: 1; margin-top: calc(var(--uc-tabbar-height) + var(--uc-bm-height) + var(--uc-menubar-height) + var(--uc-navbar-margin-block)); // drag space @@ -78,6 +81,12 @@ left: 50%; transform: translateX(-50%); } +#customizableui-special-spring1, +#customizableui-special-spring2, +#wrapper-customizableui-special-spring1, +#wrapper-customizableui-special-spring2 { + display: none !important; +} #sidebar-header { margin-top: var(--uc-navbar-sideblock-height) !important; @@ -123,9 +132,7 @@ margin-inline-end: var(--uc-sidebar-activate-width); } - #customization-palette-container { - flex-shrink: 0.35 !important; - } + #customization-palette-container, #customization-panel-container { flex-shrink: 0.5 !important; } diff --git a/src/tabbar/_unscroll.scss b/src/tabbar/_unscroll.scss index 4a6f649..f343b0f 100644 --- a/src/tabbar/_unscroll.scss +++ b/src/tabbar/_unscroll.scss @@ -38,6 +38,8 @@ spacer[part="overflow-start-indicator"] + .scrollbox-clip > scrollbox { #tabbrowser-arrowscrollbox-periphery { position: absolute !important; right: 0; + top: 50%; + transform: translateY(-50%); > #tabs-newtab-button { z-index: 2 !important; diff --git a/src/urlview/_as_launcher.scss b/src/urlview/_as_launcher.scss index 5fe9542..adfee8c 100644 --- a/src/urlview/_as_launcher.scss +++ b/src/urlview/_as_launcher.scss @@ -93,6 +93,8 @@ $_urlRowPadding: 2px; //.urlbarView-row .urlbarView-favicon { position: absolute; // padding-block: $_URL_ROW_INNER_PADDING; + top: 50%; + transform: translateY(-50%); } .urlbarView-title { padding-inline-start: calc(var(--urlbarView-item-inline-padding) + var(--identity-box-margin-inline) + var(--urlbarView-favicon-width)) !important; From 04fa2f02505b39a2213186bcf005b747c6219d23 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 21 Nov 2022 09:39:54 +0900 Subject: [PATCH 64/88] Add: Findbar - Floating on top --- css/leptonChrome.css | 68 ++++++++++++++++++++++ src/leptonChrome.scss | 1 + src/others/_findbar_floating_on_top.scss | 74 ++++++++++++++++++++++++ src/others/_index.scss | 3 + user.js | 2 + 5 files changed, 148 insertions(+) create mode 100644 src/others/_findbar_floating_on_top.scss create mode 100644 src/others/_index.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 53efbe7..bfa5d3a 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -9186,6 +9186,74 @@ counter-increment: bookmark-counts; } } +@supports -moz-bool-pref("userChrome.findbar.floating_on_top") { + /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/floating_findbar_on_top.css made available under Mozilla Public License v. 2.0 + See the above repository for updates as well as full license text. */ + /* Note that privacy.resistFingerprinting.letterboxing prevents this from working properly */ + findbar { + -moz-box-ordinal-group: 0; + position: relative; + height: 0 !important; + overflow: visible; + border-top: none !important; + padding: 0 !important; + background: none !important; + pointer-events: none; + z-index: 1; + margin-right: 16px; + border-right: 1px solid var(--chrome-content-separator-color); + } + findbar::before { + content: ""; + display: -moz-box; + -moz-box-flex: 200; + } + + .findbar-container, + .findbar-closebutton { + border: 1px solid var(--chrome-content-separator-color); + border-width: 0 0 1px 0px; + background: var(--uc-light-bkgnd-color, var(--toolbar-bgcolor)) !important; + pointer-events: auto; + height: 33px !important; + } + + .findbar-container { + -moz-box-direction: reverse; + border-left-width: 1px; + border-bottom-left-radius: 4px; + } + .findbar-container > .findbar-find-fast { + padding: var(--toolbarbutton-inner-padding) 1px; + margin: 0 !important; + } + .findbar-container > .findbar-find-status { + display: -moz-box; + overflow: hidden; + text-overflow: ellipsis; + -moz-box-flex: 1; + } + .findbar-container > hbox { + margin-inline: 5px; + } + + .findbar-closebutton { + box-sizing: padding-box; + width: 30px !important; + /* Original: 24px */ + margin: 0 !important; + border-radius: 0 4px 4px 0 !important; + padding: 2px 5px 2px 3px !important; + overflow: clip; + } + .findbar-closebutton image { + padding: 4px; + border-radius: var(--toolbarbutton-border-radius); + } + .findbar-closebutton:hover > image { + background: var(--toolbarbutton-hover-background) !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 24cbca3..d9959d8 100644 --- a/src/leptonChrome.scss +++ b/src/leptonChrome.scss @@ -59,6 +59,7 @@ /** Others UI *****************************************************************/ @import "counter/index"; +@import "others/index"; /** Fullscreen - Overlap toolbar **********************************************/ @import "fullscreen/index"; diff --git a/src/others/_findbar_floating_on_top.scss b/src/others/_findbar_floating_on_top.scss new file mode 100644 index 0000000..0019efe --- /dev/null +++ b/src/others/_findbar_floating_on_top.scss @@ -0,0 +1,74 @@ +/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/floating_findbar_on_top.css made available under Mozilla Public License v. 2.0 +See the above repository for updates as well as full license text. */ + +/* Note that privacy.resistFingerprinting.letterboxing prevents this from working properly */ + +findbar { + -moz-box-ordinal-group: 0; + position: relative; + + height: 0 !important; + overflow: visible; + border-top: none !important; + padding: 0 !important; + background: none !important; + pointer-events: none; + z-index: 1; + + // Move findbar so it isn't over the scrollbar + // Delete if you want findbar to begin from right window edge + margin-right: 16px; + border-right: 1px solid var(--chrome-content-separator-color); + + &::before { + content:""; + display: -moz-box; + -moz-box-flex: 200; + } +} + +.findbar-container, +.findbar-closebutton { + border: 1px solid var(--chrome-content-separator-color); + border-width: 0 0 1px 0px; + background: var(--uc-light-bkgnd-color, var(--toolbar-bgcolor)) !important; + pointer-events: auto; + height: 33px !important; +} + +.findbar-container { + -moz-box-direction: reverse; + border-left-width: 1px; + border-bottom-left-radius: 4px; + + > .findbar-find-fast { + padding: var(--toolbarbutton-inner-padding) 1px; + margin: 0 !important; + } + > .findbar-find-status { + display: -moz-box; + overflow: hidden; + text-overflow: ellipsis; + -moz-box-flex: 1; + } + > hbox { + margin-inline: 5px; + } +} + +.findbar-closebutton { + box-sizing: padding-box; + width: 30px !important; /* Original: 24px */ + margin: 0 !important; + border-radius: 0 4px 4px 0 !important; + padding: 2px 5px 2px 3px !important; + overflow: clip; + + image { + padding: 4px; + border-radius: var(--toolbarbutton-border-radius); + } + &:hover > image{ + background: var(--toolbarbutton-hover-background) !important; + } +} diff --git a/src/others/_index.scss b/src/others/_index.scss new file mode 100644 index 0000000..d968582 --- /dev/null +++ b/src/others/_index.scss @@ -0,0 +1,3 @@ +@include Option("userChrome.findbar.floating_on_top") { + @import "findbar_floating_on_top"; +} diff --git a/user.js b/user.js index 240bebd..9c6073e 100644 --- a/user.js +++ b/user.js @@ -178,6 +178,8 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.bookmarkbar.multi_row", true); +// user_pref("userChrome.findbar.floating_on_top", 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 15240368d71f340105063161c477c03af896f5d4 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 23 Nov 2022 04:40:19 +0900 Subject: [PATCH 65/88] Add: Padding - Toolbar button compact --- css/leptonChrome.css | 22 +++++++++++++++------- src/combined/_back_forward_button.scss | 5 +++++ src/padding/_index.scss | 14 ++++++++++++++ src/padding/_toolbar_button.scss | 6 ++++++ src/tab/newtab_button/_smaller_button.scss | 8 +------- user.js | 1 + 6 files changed, 42 insertions(+), 14 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 40a3f0d..e8efffc 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6948,13 +6948,7 @@ --tab-border-radius: var(--toolbarbutton-border-radius); margin-left: 1px; /* Original: calc((var(--tab-min-height) - 16px) / 2) = 10px */ - --toolbarbutton-inner-padding: 6px; - } - :root[uidensity="compact"] #tabs-newtab-button > .toolbarbutton-icon { - --toolbarbutton-inner-padding: 4px; /* Photon: 6px */ - } - :root[uidensity="touch"] #tabs-newtab-button > .toolbarbutton-icon { - --toolbarbutton-inner-padding: 9px; /* Photon: 9px */ + --toolbarbutton-inner-padding: var(--uc-small-toolbarbutton-inner-padding); } } /*= New tab button - Proton like button ======================================*/ @@ -8190,6 +8184,13 @@ padding-inline-end: calc(var(--toolbarbutton-outer-padding) + 1px) !important; } } + @supports -moz-bool-pref("userChrome.padding.toolbar_button") { + @supports -moz-bool-pref("userChrome.padding.toolbar_button.compact") { + #nav-bar-customization-target > #back-button { + --toolbarbutton-inner-padding: var(--uc-toolbarbutton-inner-padding-default); + } + } + } #nav-bar-customization-target > #back-button > menupopup { margin-top: -1px !important; } @@ -8224,6 +8225,13 @@ padding-inline-end: calc(var(--toolbarbutton-outer-padding) + 1px) !important; } } + @supports -moz-bool-pref("userChrome.padding.toolbar_button") { + @supports -moz-bool-pref("userChrome.padding.toolbar_button.compact") { + #nav-bar-customization-target > #back-button { + --toolbarbutton-inner-padding: var(--uc-toolbarbutton-inner-padding-default); + } + } + } #nav-bar-customization-target > #back-button > menupopup { margin-top: -1px !important; } diff --git a/src/combined/_back_forward_button.scss b/src/combined/_back_forward_button.scss index d99dcc3..361f6d5 100644 --- a/src/combined/_back_forward_button.scss +++ b/src/combined/_back_forward_button.scss @@ -40,6 +40,11 @@ padding-inline-end: calc(var(--toolbarbutton-outer-padding) + 1px) !important; } } + @include Option("userChrome.padding.toolbar_button") { + @include Option("userChrome.padding.toolbar_button.compact") { + --toolbarbutton-inner-padding: var(--uc-toolbarbutton-inner-padding-default); + } + } > menupopup { margin-top: -1px !important; diff --git a/src/padding/_index.scss b/src/padding/_index.scss index c2089a9..542d889 100644 --- a/src/padding/_index.scss +++ b/src/padding/_index.scss @@ -20,6 +20,20 @@ } /*= Tool Bar - Button Padding ================================================*/ +@include Option("userChrome.padding.toolbar_button", "userChrome.tab.newtab_button_smaller") { + :root { + --uc-small-toolbarbutton-inner-padding: 6px; + --uc-toolbarbutton-inner-padding-default: 8px; + } + :root[uidensity="compact"] { + --uc-small-toolbarbutton-inner-padding: 4px; + --uc-toolbarbutton-inner-padding-default: 6px; + } + :root[uidensity="touch"] #tabs-newtab-button > .toolbarbutton-icon { + --uc-small-toolbarbutton-inner-padding: 9px; + --uc-toolbarbutton-inner-padding-default: 9px; + } +} @include Option("userChrome.padding.toolbar_button") { @import "toolbar_button"; } diff --git a/src/padding/_toolbar_button.scss b/src/padding/_toolbar_button.scss index 928fb05..18537f3 100644 --- a/src/padding/_toolbar_button.scss +++ b/src/padding/_toolbar_button.scss @@ -1,3 +1,9 @@ :root[uidensity="compact"] { --toolbarbutton-outer-padding: 2px !important; /* Original: 3px, General is 2px */ } + +@include Option("userChrome.padding.toolbar_button.compact") { + :root { + --toolbarbutton-inner-padding: var(--uc-small-toolbarbutton-inner-padding) !important; + } +} diff --git a/src/tab/newtab_button/_smaller_button.scss b/src/tab/newtab_button/_smaller_button.scss index 2d82a83..f49f95c 100644 --- a/src/tab/newtab_button/_smaller_button.scss +++ b/src/tab/newtab_button/_smaller_button.scss @@ -4,11 +4,5 @@ margin-left: 1px; /* Original: calc((var(--tab-min-height) - 16px) / 2) = 10px */ - --toolbarbutton-inner-padding: 6px; -} -:root[uidensity="compact"] #tabs-newtab-button > .toolbarbutton-icon { - --toolbarbutton-inner-padding: 4px; /* Photon: 6px */ -} -:root[uidensity="touch"] #tabs-newtab-button > .toolbarbutton-icon { - --toolbarbutton-inner-padding: 9px; /* Photon: 9px */ + --toolbarbutton-inner-padding: var(--uc-small-toolbarbutton-inner-padding); } diff --git a/user.js b/user.js index 025926e..a2a399b 100644 --- a/user.js +++ b/user.js @@ -131,6 +131,7 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.padding.drag_space", true); // user_pref("userChrome.padding.drag_space.maximized", true); +// user_pref("userChrome.padding.toolbar_button.compact", true); // user_pref("userChrome.padding.menu_compact", true); // user_pref("userChrome.padding.bookmark_menu.compact", true); // user_pref("userChrome.padding.urlView_expanding", true); From e231bc60a91a959fad9ed137c4e1f196e4ff176c Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 23 Nov 2022 06:20:26 +0900 Subject: [PATCH 66/88] Fix: Tab Bar - Remove scroll snap at multi row --- css/leptonChrome.css | 4 ---- src/tabbar/_multi_row.scss | 10 +++++----- 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index e8efffc..563cbf3 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -5771,7 +5771,6 @@ flex-wrap: wrap; overflow-y: auto; max-height: calc((var(--tab-min-height) + 2 * var(--tab-block-margin, 0px)) * var(--uc-multirow-tabbar-rows)); - scroll-snap-type: y mandatory; } } .scrollbox-clip[orient="horizontal"], @@ -5780,9 +5779,6 @@ display: block; --scrollbutton-display-model: none; } - .tabbrowser-tab { - scroll-snap-align: start; - } #tabbrowser-tabs .tabbrowser-tab[pinned] { position: static !important; margin-inline-start: 0px !important; diff --git a/src/tabbar/_multi_row.scss b/src/tabbar/_multi_row.scss index fa3f498..c29b7e5 100644 --- a/src/tabbar/_multi_row.scss +++ b/src/tabbar/_multi_row.scss @@ -31,7 +31,11 @@ See the above repository for updates as well as full license text. */ max-height: calc((var(--tab-min-height) + 2 * var(--tab-block-margin, 0px)) * var(--uc-multirow-tabbar-rows)); // scrollbar-color: currentColor transparent; // scrollbar-width: thin; - scroll-snap-type: y mandatory; + // scroll-snap-type: y mandatory; + + // .tabbrowser-tab { + // scroll-snap-align: start; + // } } } @@ -42,10 +46,6 @@ See the above repository for updates as well as full license text. */ --scrollbutton-display-model: none; } -.tabbrowser-tab { - scroll-snap-align: start; -} - #tabbrowser-tabs .tabbrowser-tab[pinned] { position: static !important; margin-inline-start: 0px !important; From b96890f7375c0ac4c379636d69a3ccab9fd01701 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 23 Nov 2022 06:22:58 +0900 Subject: [PATCH 67/88] Add: Combined - normal forward --- css/leptonChrome.css | 127 ++++++++++++++----------- src/combined/_back_forward_button.scss | 62 ++++++------ user.js | 1 + 3 files changed, 107 insertions(+), 83 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 563cbf3..b79568e 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -3462,10 +3462,29 @@ } } /*= Tool Bar - Button Padding ================================================*/ +@supports -moz-bool-pref("userChrome.padding.toolbar_button") or -moz-bool-pref("userChrome.tab.newtab_button_smaller") { + :root { + --uc-small-toolbarbutton-inner-padding: 6px; + --uc-toolbarbutton-inner-padding-default: 8px; + } + :root[uidensity="compact"] { + --uc-small-toolbarbutton-inner-padding: 4px; + --uc-toolbarbutton-inner-padding-default: 6px; + } + :root[uidensity="touch"] #tabs-newtab-button > .toolbarbutton-icon { + --uc-small-toolbarbutton-inner-padding: 9px; + --uc-toolbarbutton-inner-padding-default: 9px; + } +} @supports -moz-bool-pref("userChrome.padding.toolbar_button") { :root[uidensity="compact"] { --toolbarbutton-outer-padding: 2px !important; /* Original: 3px, General is 2px */ } + @supports -moz-bool-pref("userChrome.padding.toolbar_button.compact") { + :root { + --toolbarbutton-inner-padding: var(--uc-small-toolbarbutton-inner-padding) !important; + } + } } /*= Nav Bar - Reduce Width ===================================================*/ @supports -moz-bool-pref("userChrome.padding.navbar_width") { @@ -8029,25 +8048,55 @@ } } @supports -moz-bool-pref("userChrome.combined.nav_button") or -moz-bool-pref("userChrome.combined.urlbar.nav_button") { - #nav-bar-customization-target > #forward-button { - --uc-forward-button-margin: calc(-1 * var(--uc-toolbarbutton-boundary) + 1px); - z-index: 2; - position: relative; - } - #nav-bar-customization-target > #forward-button > .toolbarbutton-icon { - padding-inline-end: var(--urlbar-icon-padding) !important; /* Original: var(--toolbarbutton-inner-padding) */ - padding-block: var(--urlbar-icon-padding) !important; - height: var(--uc-urlbar-icon-size) !important; - } - @supports -moz-bool-pref("userChrome.combined.urlbar.nav_button") { + @supports not -moz-bool-pref("userChrome.combined.nav_button.normal_forward") { #nav-bar-customization-target > #forward-button { - padding-inline-end: 0px !important; /* Original: var(--toolbarbutton-outer-padding) */ + --uc-forward-button-margin: calc(-1 * var(--uc-toolbarbutton-boundary) + 1px); + z-index: 2; + position: relative; } - } - @supports not -moz-bool-pref("userChrome.combined.urlbar.nav_button") { - @supports not -moz-bool-pref("userChrome.combined.nav_button.none_forward_background") { - @supports -moz-bool-pref("userChrome.combined.urlbar.home_button") { - @supports not -moz-bool-pref("userChrome.combined.nav_button.home_button") { + #nav-bar-customization-target > #forward-button > .toolbarbutton-icon { + padding-inline-end: var(--urlbar-icon-padding) !important; /* Original: var(--toolbarbutton-inner-padding) */ + padding-block: var(--urlbar-icon-padding) !important; + height: var(--uc-urlbar-icon-size) !important; + } + @supports -moz-bool-pref("userChrome.combined.urlbar.nav_button") { + #nav-bar-customization-target > #forward-button { + padding-inline-end: 0px !important; /* Original: var(--toolbarbutton-outer-padding) */ + } + } + @supports not -moz-bool-pref("userChrome.combined.urlbar.nav_button") { + @supports not -moz-bool-pref("userChrome.combined.nav_button.none_forward_background") { + @supports -moz-bool-pref("userChrome.combined.urlbar.home_button") { + @supports not -moz-bool-pref("userChrome.combined.nav_button.home_button") { + #nav-bar-customization-target > #forward-button > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-background); + } + #nav-bar-customization-target > #forward-button:not([disabled], [open]):hover > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-hover-background) !important; + box-shadow: 0 1px 6px hsla(0deg, 0%, 0%, 0.1); + border-color: hsla(240deg, 5%, 5%, 0.35); + } + #nav-bar-customization-target > #forward-button[open] > .toolbarbutton-icon, + #nav-bar-customization-target > #forward-button:not([disabled]):hover:active > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-active-background) !important; + border-color: hsla(240deg, 5%, 5%, 0.4); + } + #nav-bar-customization-target > #forward-button[disabled="true"] > .toolbarbutton-icon { + background-color: color-mix( + in srgb, + var(--toolbarbutton-hover-background), + var(--toolbar-field-background-color) 40% + ) !important; + fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); + } + @supports not -moz-bool-pref("userChrome.autohide.forward_button") { + #nav-bar-customization-target > #forward-button[disabled="true"] { + opacity: 1 !important; /* Original: 0.4 */ + } + } + } + } + @supports not -moz-bool-pref("userChrome.combined.urlbar.home_button") { #nav-bar-customization-target > #forward-button > .toolbarbutton-icon { background-color: var(--uc-combined-circlebutton-background); } @@ -8076,44 +8125,16 @@ } } } - @supports not -moz-bool-pref("userChrome.combined.urlbar.home_button") { - #nav-bar-customization-target > #forward-button > .toolbarbutton-icon { - background-color: var(--uc-combined-circlebutton-background); - } - #nav-bar-customization-target > #forward-button:not([disabled], [open]):hover > .toolbarbutton-icon { - background-color: var(--uc-combined-circlebutton-hover-background) !important; - box-shadow: 0 1px 6px hsla(0deg, 0%, 0%, 0.1); - border-color: hsla(240deg, 5%, 5%, 0.35); - } - #nav-bar-customization-target > #forward-button[open] > .toolbarbutton-icon, - #nav-bar-customization-target > #forward-button:not([disabled]):hover:active > .toolbarbutton-icon { - background-color: var(--uc-combined-circlebutton-active-background) !important; - border-color: hsla(240deg, 5%, 5%, 0.4); - } - #nav-bar-customization-target > #forward-button[disabled="true"] > .toolbarbutton-icon { - background-color: color-mix( - in srgb, - var(--toolbarbutton-hover-background), - var(--toolbar-field-background-color) 40% - ) !important; - fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); - } - @supports not -moz-bool-pref("userChrome.autohide.forward_button") { - #nav-bar-customization-target > #forward-button[disabled="true"] { - opacity: 1 !important; /* Original: 0.4 */ - } - } + } + @supports not -moz-bool-pref("userChrome.autohide.forward_button") { + #nav-bar-customization-target > #forward-button { + margin-inline-start: var(--uc-forward-button-margin) !important; } } - } - @supports not -moz-bool-pref("userChrome.autohide.forward_button") { - #nav-bar-customization-target > #forward-button { - margin-inline-start: var(--uc-forward-button-margin) !important; - } - } - @supports -moz-bool-pref("userChrome.autohide.forward_button") { - #nav-bar-customization-target > #forward-button:not([disabled="true"]) { - margin-inline-start: var(--uc-forward-button-margin) !important; + @supports -moz-bool-pref("userChrome.autohide.forward_button") { + #nav-bar-customization-target > #forward-button:not([disabled="true"]) { + margin-inline-start: var(--uc-forward-button-margin) !important; + } } } #nav-bar-customization-target > #back-button { diff --git a/src/combined/_back_forward_button.scss b/src/combined/_back_forward_button.scss index 361f6d5..5801af8 100644 --- a/src/combined/_back_forward_button.scss +++ b/src/combined/_back_forward_button.scss @@ -64,25 +64,35 @@ //------------------------------------------------------------------------------ #nav-bar-customization-target > { - #forward-button { - --uc-forward-button-margin: calc(-1 * var(--uc-toolbarbutton-boundary) + 1px); + @include NotOption("userChrome.combined.nav_button.normal_forward") { + #forward-button { + --uc-forward-button-margin: calc(-1 * var(--uc-toolbarbutton-boundary) + 1px); - z-index: 2; - position: relative; + z-index: 2; + position: relative; - > .toolbarbutton-icon { - padding-inline-end: var(--urlbar-icon-padding) !important; /* Original: var(--toolbarbutton-inner-padding) */ - padding-block: var(--urlbar-icon-padding) !important; - height: var(--uc-urlbar-icon-size) !important; - } + > .toolbarbutton-icon { + padding-inline-end: var(--urlbar-icon-padding) !important; /* Original: var(--toolbarbutton-inner-padding) */ + padding-block: var(--urlbar-icon-padding) !important; + height: var(--uc-urlbar-icon-size) !important; + } - @include Option("userChrome.combined.urlbar.nav_button") { - padding-inline-end: 0px !important; /* Original: var(--toolbarbutton-outer-padding) */ - } - @include NotOption("userChrome.combined.urlbar.nav_button") { - @include NotOption("userChrome.combined.nav_button.none_forward_background") { - @include Option("userChrome.combined.urlbar.home_button") { - @include NotOption("userChrome.combined.nav_button.home_button") { + @include Option("userChrome.combined.urlbar.nav_button") { + padding-inline-end: 0px !important; /* Original: var(--toolbarbutton-outer-padding) */ + } + @include NotOption("userChrome.combined.urlbar.nav_button") { + @include NotOption("userChrome.combined.nav_button.none_forward_background") { + @include Option("userChrome.combined.urlbar.home_button") { + @include NotOption("userChrome.combined.nav_button.home_button") { + @include _combined_nav_button_background; + @include NotOption("userChrome.autohide.forward_button") { + &[disabled="true"] { + opacity: 1 !important; /* Original: 0.4 */ + } + } + } + } + @include NotOption("userChrome.combined.urlbar.home_button") { @include _combined_nav_button_background; @include NotOption("userChrome.autohide.forward_button") { &[disabled="true"] { @@ -91,24 +101,16 @@ } } } - @include NotOption("userChrome.combined.urlbar.home_button") { - @include _combined_nav_button_background; - @include NotOption("userChrome.autohide.forward_button") { - &[disabled="true"] { - opacity: 1 !important; /* Original: 0.4 */ - } - } - } } - } - @include NotOption("userChrome.autohide.forward_button") { - margin-inline-start: var(--uc-forward-button-margin) !important; - } - @include Option("userChrome.autohide.forward_button") { - &:not([disabled="true"]) { + @include NotOption("userChrome.autohide.forward_button") { margin-inline-start: var(--uc-forward-button-margin) !important; } + @include Option("userChrome.autohide.forward_button") { + &:not([disabled="true"]) { + margin-inline-start: var(--uc-forward-button-margin) !important; + } + } } } diff --git a/user.js b/user.js index a2a399b..b2911b1 100644 --- a/user.js +++ b/user.js @@ -112,6 +112,7 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.combined.nav_button", true); // user_pref("userChrome.combined.nav_button.home_button", true); +// user_pref("userChrome.combined.nav_button.normal_foward", true); // user_pref("userChrome.combined.nav_button.none_forward_background", true); // user_pref("userChrome.combined.urlbar.nav_button", true); // user_pref("userChrome.combined.urlbar.home_button", true); From 33d58866fd4e550defb21353d42555b366fab2bc Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 28 Nov 2022 23:48:43 +0900 Subject: [PATCH 68/88] Fix: Findbar - border radius, width --- css/leptonChrome.css | 11 ++++++----- src/others/_findbar_floating_on_top.scss | 11 ++++++----- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index b79568e..0b147ec 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -8492,16 +8492,16 @@ } .findbar-container, .findbar-closebutton { - border: 1px solid var(--chrome-content-separator-color); - border-width: 0 0 1px 0px; + border-style: solid; + border-color: var(--chrome-content-separator-color); background: var(--uc-light-bkgnd-color, var(--toolbar-bgcolor)) !important; pointer-events: auto; height: 33px !important; } .findbar-container { -moz-box-direction: reverse; - border-left-width: 1px; - border-bottom-left-radius: 4px; + border-width: 0 0 1px 1px; + border-radius: var(--toolbarbutton-border-radius) 0 0 var(--toolbarbutton-border-radius) !important; } .findbar-container > .findbar-find-fast { padding: var(--toolbarbutton-inner-padding) 1px; @@ -8520,7 +8520,8 @@ box-sizing: padding-box; width: 30px !important; /* Original: 24px */ margin: 0 !important; - border-radius: 0 4px 4px 0 !important; + border-width: 0 1px 1px 0px; + border-radius: 0 var(--toolbarbutton-border-radius) var(--toolbarbutton-border-radius) 0 !important; padding: 2px 5px 2px 3px !important; overflow: clip; } diff --git a/src/others/_findbar_floating_on_top.scss b/src/others/_findbar_floating_on_top.scss index 0019efe..7ef1cad 100644 --- a/src/others/_findbar_floating_on_top.scss +++ b/src/others/_findbar_floating_on_top.scss @@ -29,8 +29,8 @@ findbar { .findbar-container, .findbar-closebutton { - border: 1px solid var(--chrome-content-separator-color); - border-width: 0 0 1px 0px; + border-style: solid; + border-color: var(--chrome-content-separator-color); background: var(--uc-light-bkgnd-color, var(--toolbar-bgcolor)) !important; pointer-events: auto; height: 33px !important; @@ -38,8 +38,8 @@ findbar { .findbar-container { -moz-box-direction: reverse; - border-left-width: 1px; - border-bottom-left-radius: 4px; + border-width: 0 0 1px 1px; + border-radius: var(--toolbarbutton-border-radius) 0 0 var(--toolbarbutton-border-radius) !important; > .findbar-find-fast { padding: var(--toolbarbutton-inner-padding) 1px; @@ -60,7 +60,8 @@ findbar { box-sizing: padding-box; width: 30px !important; /* Original: 24px */ margin: 0 !important; - border-radius: 0 4px 4px 0 !important; + border-width: 0 1px 1px 0px; + border-radius: 0 var(--toolbarbutton-border-radius) var(--toolbarbutton-border-radius) 0 !important; padding: 2px 5px 2px 3px !important; overflow: clip; From 4fa6ec25ac4de5fc931880aafd64d451723fb3b2 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 30 Nov 2022 22:22:58 +0900 Subject: [PATCH 69/88] Fix: Findbar - Hide animation --- css/leptonChrome.css | 3 +++ src/others/_findbar_floating_on_top.scss | 5 +++++ 2 files changed, 8 insertions(+) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 0b147ec..7857d26 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -8472,6 +8472,9 @@ /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/floating_findbar_on_top.css made available under Mozilla Public License v. 2.0 See the above repository for updates as well as full license text. */ /* Note that privacy.resistFingerprinting.letterboxing prevents this from working properly */ + #main-window > body > box { + z-index: 1; + } findbar { -moz-box-ordinal-group: 0; position: relative; diff --git a/src/others/_findbar_floating_on_top.scss b/src/others/_findbar_floating_on_top.scss index 7ef1cad..7ee2440 100644 --- a/src/others/_findbar_floating_on_top.scss +++ b/src/others/_findbar_floating_on_top.scss @@ -3,6 +3,11 @@ See the above repository for updates as well as full license text. */ /* Note that privacy.resistFingerprinting.letterboxing prevents this from working properly */ +#main-window > body > box { + // #navigator-toolbox-background for compatibility + z-index: 1; +} + findbar { -moz-box-ordinal-group: 0; position: relative; From 25d2de6656ffcefd2c1e8d707c8153b25b9f5d5e Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 11 Dec 2022 22:58:50 +0900 Subject: [PATCH 70/88] Fix: Combined - `none_forward_background` -> `none_background` --- css/leptonChrome.css | 86 ++++++++++++++++++-------- src/combined/_back_forward_button.scss | 41 ++++++------ user.js | 2 +- 3 files changed, 84 insertions(+), 45 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 6aa3755..7e74d85 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -8076,7 +8076,7 @@ } } @supports not -moz-bool-pref("userChrome.combined.urlbar.nav_button") { - @supports not -moz-bool-pref("userChrome.combined.nav_button.none_forward_background") { + @supports not -moz-bool-pref("userChrome.combined.nav_button.none_background") { @supports -moz-bool-pref("userChrome.combined.urlbar.home_button") { @supports not -moz-bool-pref("userChrome.combined.nav_button.home_button") { #nav-bar-customization-target > #forward-button > .toolbarbutton-icon { @@ -8101,7 +8101,7 @@ fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); } @supports not -moz-bool-pref("userChrome.autohide.forward_button") { - #nav-bar-customization-target > #forward-button[disabled="true"] { + #nav-bar-customization-target > #forward-button[disabled="true"][disabled="true"] { opacity: 1 !important; /* Original: 0.4 */ } } @@ -8130,7 +8130,7 @@ fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); } @supports not -moz-bool-pref("userChrome.autohide.forward_button") { - #nav-bar-customization-target > #forward-button[disabled="true"] { + #nav-bar-customization-target > #forward-button[disabled="true"][disabled="true"] { opacity: 1 !important; /* Original: 0.4 */ } } @@ -8151,30 +8151,64 @@ #nav-bar-customization-target > #back-button { position: relative; } - #nav-bar-customization-target > #back-button > .toolbarbutton-icon { - background-color: var(--uc-combined-circlebutton-background); + @supports not -moz-bool-pref("userChrome.combined.urlbar.home_button") { + @supports not -moz-bool-pref("userChrome.combined.nav_button.home_button") { + #nav-bar-customization-target > #back-button > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-background); + } + #nav-bar-customization-target > #back-button:not([disabled], [open]):hover > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-hover-background) !important; + box-shadow: 0 1px 6px hsla(0deg, 0%, 0%, 0.1); + border-color: hsla(240deg, 5%, 5%, 0.35); + } + #nav-bar-customization-target > #back-button[open] > .toolbarbutton-icon, + #nav-bar-customization-target > #back-button:not([disabled]):hover:active > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-active-background) !important; + border-color: hsla(240deg, 5%, 5%, 0.4); + } + #nav-bar-customization-target > #back-button[disabled="true"] > .toolbarbutton-icon { + background-color: color-mix( + in srgb, + var(--toolbarbutton-hover-background), + var(--toolbar-field-background-color) 40% + ) !important; + fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); + } + @supports not -moz-bool-pref("userChrome.autohide.back_button") { + #nav-bar-customization-target > #back-button[disabled="true"][disabled="true"] { + opacity: 1 !important; /* Original: 0.4 */ + } + } + } } - #nav-bar-customization-target > #back-button:not([disabled], [open]):hover > .toolbarbutton-icon { - background-color: var(--uc-combined-circlebutton-hover-background) !important; - box-shadow: 0 1px 6px hsla(0deg, 0%, 0%, 0.1); - border-color: hsla(240deg, 5%, 5%, 0.35); - } - #nav-bar-customization-target > #back-button[open] > .toolbarbutton-icon, - #nav-bar-customization-target > #back-button:not([disabled]):hover:active > .toolbarbutton-icon { - background-color: var(--uc-combined-circlebutton-active-background) !important; - border-color: hsla(240deg, 5%, 5%, 0.4); - } - #nav-bar-customization-target > #back-button[disabled="true"] > .toolbarbutton-icon { - background-color: color-mix( - in srgb, - var(--toolbarbutton-hover-background), - var(--toolbar-field-background-color) 40% - ) !important; - fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); - } - @supports not -moz-bool-pref("userChrome.autohide.back_button") { - #nav-bar-customization-target > #back-button[disabled="true"] { - opacity: 1 !important; /* Original: 0.4 */ + @supports -moz-bool-pref("userChrome.combined.urlbar.home_button") or -moz-bool-pref("userChrome.combined.nav_button.home_button") { + @supports not -moz-bool-pref("userChrome.combined.nav_button.none_background") { + #nav-bar-customization-target > #back-button > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-background); + } + #nav-bar-customization-target > #back-button:not([disabled], [open]):hover > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-hover-background) !important; + box-shadow: 0 1px 6px hsla(0deg, 0%, 0%, 0.1); + border-color: hsla(240deg, 5%, 5%, 0.35); + } + #nav-bar-customization-target > #back-button[open] > .toolbarbutton-icon, + #nav-bar-customization-target > #back-button:not([disabled]):hover:active > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-active-background) !important; + border-color: hsla(240deg, 5%, 5%, 0.4); + } + #nav-bar-customization-target > #back-button[disabled="true"] > .toolbarbutton-icon { + background-color: color-mix( + in srgb, + var(--toolbarbutton-hover-background), + var(--toolbar-field-background-color) 40% + ) !important; + fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); + } + @supports not -moz-bool-pref("userChrome.autohide.back_button") { + #nav-bar-customization-target > #back-button[disabled="true"][disabled="true"] { + opacity: 1 !important; /* Original: 0.4 */ + } + } } } @supports -moz-bool-pref("userChrome.combined.nav_button.home_button") or -moz-bool-pref("userChrome.combined.urlbar.home_button") { diff --git a/src/combined/_back_forward_button.scss b/src/combined/_back_forward_button.scss index 5801af8..926a10a 100644 --- a/src/combined/_back_forward_button.scss +++ b/src/combined/_back_forward_button.scss @@ -1,5 +1,5 @@ //-- Mixin --------------------------------------------------------------------- -@mixin _combined_nav_button_background() { +@mixin _combined_nav_button_background($autohideOptionName) { > .toolbarbutton-icon { background-color: var(--uc-combined-circlebutton-background); } @@ -19,8 +19,19 @@ background-color: color-mix(in srgb, var(--toolbarbutton-hover-background), var(--toolbar-field-background-color) 40%) !important; fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); } + @include NotOption($autohideOptionName) { + &[disabled="true"] { + opacity: 1 !important; /* Original: 0.4 */ + } + } } } +@mixin _combined_forward_button_background() { + @include _combined_nav_button_background("userChrome.autohide.forward_button"); +} +@mixin _combined_back_button_background() { + @include _combined_nav_button_background("userChrome.autohide.back_button"); +} @mixin _back_button_circle_shape() { z-index: 3 !important; @@ -81,24 +92,14 @@ padding-inline-end: 0px !important; /* Original: var(--toolbarbutton-outer-padding) */ } @include NotOption("userChrome.combined.urlbar.nav_button") { - @include NotOption("userChrome.combined.nav_button.none_forward_background") { + @include NotOption("userChrome.combined.nav_button.none_background") { @include Option("userChrome.combined.urlbar.home_button") { @include NotOption("userChrome.combined.nav_button.home_button") { - @include _combined_nav_button_background; - @include NotOption("userChrome.autohide.forward_button") { - &[disabled="true"] { - opacity: 1 !important; /* Original: 0.4 */ - } - } + @include _combined_forward_button_background; } } @include NotOption("userChrome.combined.urlbar.home_button") { - @include _combined_nav_button_background; - @include NotOption("userChrome.autohide.forward_button") { - &[disabled="true"] { - opacity: 1 !important; /* Original: 0.4 */ - } - } + @include _combined_forward_button_background; } } } @@ -117,10 +118,14 @@ #back-button { position: relative; - @include _combined_nav_button_background; - @include NotOption("userChrome.autohide.back_button") { - &[disabled="true"] { - opacity: 1 !important; /* Original: 0.4 */ + @include NotOption("userChrome.combined.urlbar.home_button") { + @include NotOption("userChrome.combined.nav_button.home_button") { + @include _combined_back_button_background; + } + } + @include Option("userChrome.combined.urlbar.home_button", "userChrome.combined.nav_button.home_button") { + @include NotOption("userChrome.combined.nav_button.none_background") { + @include _combined_back_button_background; } } @include Option("userChrome.combined.nav_button.home_button", "userChrome.combined.urlbar.home_button") { diff --git a/user.js b/user.js index cbfc566..e6216d9 100644 --- a/user.js +++ b/user.js @@ -113,7 +113,7 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.combined.nav_button", true); // user_pref("userChrome.combined.nav_button.home_button", true); // user_pref("userChrome.combined.nav_button.normal_foward", true); -// user_pref("userChrome.combined.nav_button.none_forward_background", true); +// user_pref("userChrome.combined.nav_button.none_background", true); // user_pref("userChrome.combined.urlbar.nav_button", true); // user_pref("userChrome.combined.urlbar.home_button", true); // user_pref("userChrome.combined.urlbar.reload_button", true); From 54e25560a4a683d1e461b5fd3f31d1c2d2de21c3 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 12 Dec 2022 22:40:40 +0900 Subject: [PATCH 71/88] Fix: Combined - First toolbar button padding --- css/leptonChrome.css | 33 ++++++++++++++++++- src/combined/_back_forward_button.scss | 1 - src/combined/_index.scss | 45 +++++++++++++++++++++++--- 3 files changed, 72 insertions(+), 7 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 7e74d85..41e355c 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -8215,7 +8215,6 @@ #nav-bar-customization-target > #back-button { z-index: 2; margin-inline-end: calc(-1 * var(--uc-toolbarbutton-boundary) - 1px) !important; - padding-inline-start: 0px !important; /* Original: var(--toolbarbutton-outer-padding) */ } #nav-bar-customization-target > #back-button > .toolbarbutton-icon { padding-inline-start: var(--urlbar-icon-padding) !important; /* Original: var(--toolbarbutton-inner-padding) */ @@ -8346,11 +8345,43 @@ #nav-bar-customization-target > #forward-button { -moz-box-ordinal-group: 4; } + @supports -moz-bool-pref("userChrome.combined.urlbar.home_button") { + #nav-bar-customization-target + > :first-child:is(#back-button, #forward-button, #home-button) + + :is(toolbarbutton, toolbaritem):not(#back-button, #forward-button, #home-button), + #nav-bar-customization-target + > :first-child:is(#back-button, #forward-button, #home-button) + + :is(#back-button, #forward-button, #home-button) + + :is(toolbarbutton, toolbaritem):not(#back-button, #forward-button, #home-button), + #nav-bar-customization-target + > :first-child:is(#back-button, #forward-button, #home-button) + + :is(#back-button, #forward-button, #home-button) + + :is(#back-button, #forward-button, #home-button) + + :is(toolbarbutton, toolbaritem) { + padding-inline-start: var(--toolbar-start-end-padding) !important; + } + } + @supports not -moz-bool-pref("userChrome.combined.urlbar.home_button") { + #nav-bar-customization-target + > :first-child:is(#back-button, #forward-button) + + :is(toolbarbutton, toolbaritem):not(#back-button, #forward-button), + #nav-bar-customization-target + > :first-child:is(#back-button, #forward-button) + + :is(#back-button, #forward-button) + + :is(toolbarbutton, toolbaritem) { + padding-inline-start: var(--toolbar-start-end-padding) !important; + } + } } @supports -moz-bool-pref("userChrome.combined.urlbar.home_button") { #nav-bar-customization-target > #home-button { -moz-box-ordinal-group: 3; } + @supports not -moz-bool-pref("userChrome.combined.urlbar.nav_button") { + #nav-bar-customization-target > #home-button:is(:first-child) + :is(toolbarbutton, toolbaritem) { + padding-inline-start: var(--toolbar-start-end-padding) !important; + } + } #nav-bar-customization-target > #home-button { z-index: 3; position: relative; diff --git a/src/combined/_back_forward_button.scss b/src/combined/_back_forward_button.scss index 926a10a..b8c38ba 100644 --- a/src/combined/_back_forward_button.scss +++ b/src/combined/_back_forward_button.scss @@ -132,7 +132,6 @@ z-index: 2; margin-inline-end: calc(-1 * var(--uc-toolbarbutton-boundary) - 1px) !important; - padding-inline-start: 0px !important; /* Original: var(--toolbarbutton-outer-padding) */ > .toolbarbutton-icon { padding-inline-start: var(--urlbar-icon-padding) !important; /* Original: var(--toolbarbutton-inner-padding) */ diff --git a/src/combined/_index.scss b/src/combined/_index.scss index 1497da8..25f82e7 100644 --- a/src/combined/_index.scss +++ b/src/combined/_index.scss @@ -92,16 +92,51 @@ } @include Option("userChrome.combined.urlbar.nav_button") { - #nav-bar-customization-target > #back-button { - -moz-box-ordinal-group: 2; - } - #nav-bar-customization-target > #forward-button { - -moz-box-ordinal-group: 4; + #nav-bar-customization-target > { + #back-button { + -moz-box-ordinal-group: 2; + } + #forward-button { + -moz-box-ordinal-group: 4; + } + + $button: ":is(toolbarbutton, toolbaritem)"; + @include Option("userChrome.combined.urlbar.home_button") { + $combindButtons: "#back-button, #forward-button, #home-button"; + $target: ":is(#{$combindButtons})"; + $notTarget: "#{$button}:not(#{$combindButtons})"; + + :first-child#{$target} + { + #{$notTarget}, + #{$target} + #{$notTarget}, + #{$target} + #{$target} + #{$button} { + padding-inline-start: var(--toolbar-start-end-padding) !important; + } + } + } + @include NotOption("userChrome.combined.urlbar.home_button") { + $combindButtons: "#back-button, #forward-button"; + $target: ":is(#{$combindButtons})"; + $notTarget: "#{$button}:not(#{$combindButtons})"; + + :first-child#{$target} + { + #{$notTarget}, + #{$target} + #{$button} { + padding-inline-start: var(--toolbar-start-end-padding) !important; + } + } + } } } @include Option("userChrome.combined.urlbar.home_button") { #nav-bar-customization-target > #home-button { -moz-box-ordinal-group: 3; + + @include NotOption("userChrome.combined.urlbar.nav_button") { + &:is(:first-child) + :is(toolbarbutton, toolbaritem) { + padding-inline-start: var(--toolbar-start-end-padding) !important; + } + } } @import "home_button"; } From e45321ccf2a085bfa91941c65515431706ae32be Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 13 Dec 2022 00:07:30 +0900 Subject: [PATCH 72/88] Clean: Code - style --- src/autohide/_common.scss | 17 +++++++++++++++-- src/combined/_back_forward_button.scss | 10 ++++++++-- src/combined/_index.scss | 7 +++++-- src/sidebar/_overlap.scss | 6 +++++- 4 files changed, 33 insertions(+), 7 deletions(-) diff --git a/src/autohide/_common.scss b/src/autohide/_common.scss index 98a4cb8..35ed7d7 100644 --- a/src/autohide/_common.scss +++ b/src/autohide/_common.scss @@ -3,7 +3,15 @@ --uc-autohide-toolbar-delay: 600ms; } -@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar", "userChrome.tabbar.one_liner", "userChrome.tabbar.on_bottom.menubar_on_top", "userChrome.hidden.tabbar", "userChrome.navbar.as_sidebar") { +@include Option( + "userChrome.autohide.tabbar", + "userChrome.autohide.navbar", + "userChrome.autohide.bookmarkbar", + "userChrome.tabbar.one_liner", + "userChrome.tabbar.on_bottom.menubar_on_top", + "userChrome.hidden.tabbar", + "userChrome.navbar.as_sidebar" +) { :root { --uc-tabbar-height: var(--uc-tabbar-height-default); --uc-tabbar-height-default: var(--tab-min-height); // calc((var(--tab-block-margin) * 2) + var(--tab-min-height)); @@ -84,7 +92,12 @@ } } -@include Option("userChrome.autohide.tabbar", "userChrome.autohide.navbar", "userChrome.autohide.bookmarkbar", "userChrome.autohide.infobar") { +@include Option( + "userChrome.autohide.tabbar", + "userChrome.autohide.navbar", + "userChrome.autohide.bookmarkbar", + "userChrome.autohide.infobar" +) { #navigator-toolbox { position: relative; &:is(:hover, :focus-within) { diff --git a/src/combined/_back_forward_button.scss b/src/combined/_back_forward_button.scss index b8c38ba..a3468c8 100644 --- a/src/combined/_back_forward_button.scss +++ b/src/combined/_back_forward_button.scss @@ -123,12 +123,18 @@ @include _combined_back_button_background; } } - @include Option("userChrome.combined.urlbar.home_button", "userChrome.combined.nav_button.home_button") { + @include Option( + "userChrome.combined.urlbar.home_button", + "userChrome.combined.nav_button.home_button" + ) { @include NotOption("userChrome.combined.nav_button.none_background") { @include _combined_back_button_background; } } - @include Option("userChrome.combined.nav_button.home_button", "userChrome.combined.urlbar.home_button") { + @include Option( + "userChrome.combined.nav_button.home_button", + "userChrome.combined.urlbar.home_button" + ) { z-index: 2; margin-inline-end: calc(-1 * var(--uc-toolbarbutton-boundary) - 1px) !important; diff --git a/src/combined/_index.scss b/src/combined/_index.scss index 25f82e7..216b4b5 100644 --- a/src/combined/_index.scss +++ b/src/combined/_index.scss @@ -1,7 +1,10 @@ /*= Combined - At URL bar ====================================================*/ @include Option( - "userChrome.combined.nav_button", "userChrome.combined.nav_button.home_button", - "userChrome.combined.urlbar.nav_button", "userChrome.combined.urlbar.home_button", "userChrome.combined.urlbar.reload_button" + "userChrome.combined.nav_button", + "userChrome.combined.nav_button.home_button", + "userChrome.combined.urlbar.nav_button", + "userChrome.combined.urlbar.home_button", + "userChrome.combined.urlbar.reload_button" ) { // Init #nav-bar { diff --git a/src/sidebar/_overlap.scss b/src/sidebar/_overlap.scss index 516470c..e318acb 100644 --- a/src/sidebar/_overlap.scss +++ b/src/sidebar/_overlap.scss @@ -1,4 +1,8 @@ -@include Option("userChrome.sidebar.overlap", "userChrome.autohide.sidebar", "userChrome.navbar.as_sidebar") { +@include Option( + "userChrome.sidebar.overlap", + "userChrome.autohide.sidebar", + "userChrome.navbar.as_sidebar" +) { :root { /* Original min-width: 14em; From 51e234ae55a717dcb4520357f8fed31002888ce1 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 13 Dec 2022 21:52:36 +0900 Subject: [PATCH 73/88] Fix: Combined - `userChrome.combined.nav_button.normal_forward` -> `userChrome.combined.nav_button.normal` --- css/leptonChrome.css | 74 +++++++++++++------------- src/combined/_back_forward_button.scss | 25 ++++----- user.js | 2 +- 3 files changed, 50 insertions(+), 51 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 41e355c..41fa458 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -8059,7 +8059,7 @@ } } @supports -moz-bool-pref("userChrome.combined.nav_button") or -moz-bool-pref("userChrome.combined.urlbar.nav_button") { - @supports not -moz-bool-pref("userChrome.combined.nav_button.normal_forward") { + @supports not -moz-bool-pref("userChrome.combined.nav_button.normal") { #nav-bar-customization-target > #forward-button { --uc-forward-button-margin: calc(-1 * var(--uc-toolbarbutton-boundary) + 1px); z-index: 2; @@ -8181,45 +8181,47 @@ } } } - @supports -moz-bool-pref("userChrome.combined.urlbar.home_button") or -moz-bool-pref("userChrome.combined.nav_button.home_button") { - @supports not -moz-bool-pref("userChrome.combined.nav_button.none_background") { - #nav-bar-customization-target > #back-button > .toolbarbutton-icon { - background-color: var(--uc-combined-circlebutton-background); - } - #nav-bar-customization-target > #back-button:not([disabled], [open]):hover > .toolbarbutton-icon { - background-color: var(--uc-combined-circlebutton-hover-background) !important; - box-shadow: 0 1px 6px hsla(0deg, 0%, 0%, 0.1); - border-color: hsla(240deg, 5%, 5%, 0.35); - } - #nav-bar-customization-target > #back-button[open] > .toolbarbutton-icon, - #nav-bar-customization-target > #back-button:not([disabled]):hover:active > .toolbarbutton-icon { - background-color: var(--uc-combined-circlebutton-active-background) !important; - border-color: hsla(240deg, 5%, 5%, 0.4); - } - #nav-bar-customization-target > #back-button[disabled="true"] > .toolbarbutton-icon { - background-color: color-mix( - in srgb, - var(--toolbarbutton-hover-background), - var(--toolbar-field-background-color) 40% - ) !important; - fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); - } - @supports not -moz-bool-pref("userChrome.autohide.back_button") { - #nav-bar-customization-target > #back-button[disabled="true"][disabled="true"] { - opacity: 1 !important; /* Original: 0.4 */ - } - } - } - } @supports -moz-bool-pref("userChrome.combined.nav_button.home_button") or -moz-bool-pref("userChrome.combined.urlbar.home_button") { #nav-bar-customization-target > #back-button { z-index: 2; - margin-inline-end: calc(-1 * var(--uc-toolbarbutton-boundary) - 1px) !important; } - #nav-bar-customization-target > #back-button > .toolbarbutton-icon { - padding-inline-start: var(--urlbar-icon-padding) !important; /* Original: var(--toolbarbutton-inner-padding) */ - padding-block: var(--urlbar-icon-padding) !important; - height: var(--uc-urlbar-icon-size) !important; + @supports not -moz-bool-pref("userChrome.combined.nav_button.normal") { + #nav-bar-customization-target > #back-button { + margin-inline-end: calc(-1 * var(--uc-toolbarbutton-boundary) - 1px) !important; + } + @supports not -moz-bool-pref("userChrome.combined.nav_button.none_background") { + #nav-bar-customization-target > #back-button > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-background); + } + #nav-bar-customization-target > #back-button:not([disabled], [open]):hover > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-hover-background) !important; + box-shadow: 0 1px 6px hsla(0deg, 0%, 0%, 0.1); + border-color: hsla(240deg, 5%, 5%, 0.35); + } + #nav-bar-customization-target > #back-button[open] > .toolbarbutton-icon, + #nav-bar-customization-target > #back-button:not([disabled]):hover:active > .toolbarbutton-icon { + background-color: var(--uc-combined-circlebutton-active-background) !important; + border-color: hsla(240deg, 5%, 5%, 0.4); + } + #nav-bar-customization-target > #back-button[disabled="true"] > .toolbarbutton-icon { + background-color: color-mix( + in srgb, + var(--toolbarbutton-hover-background), + var(--toolbar-field-background-color) 40% + ) !important; + fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%); + } + @supports not -moz-bool-pref("userChrome.autohide.back_button") { + #nav-bar-customization-target > #back-button[disabled="true"][disabled="true"] { + opacity: 1 !important; /* Original: 0.4 */ + } + } + } + #nav-bar-customization-target > #back-button > .toolbarbutton-icon { + padding-inline-start: var(--urlbar-icon-padding) !important; /* Original: var(--toolbarbutton-inner-padding) */ + padding-block: var(--urlbar-icon-padding) !important; + height: var(--uc-urlbar-icon-size) !important; + } } } @supports not -moz-bool-pref("userChrome.combined.nav_button.home_button") { diff --git a/src/combined/_back_forward_button.scss b/src/combined/_back_forward_button.scss index a3468c8..6a92f8c 100644 --- a/src/combined/_back_forward_button.scss +++ b/src/combined/_back_forward_button.scss @@ -75,7 +75,7 @@ //------------------------------------------------------------------------------ #nav-bar-customization-target > { - @include NotOption("userChrome.combined.nav_button.normal_forward") { + @include NotOption("userChrome.combined.nav_button.normal") { #forward-button { --uc-forward-button-margin: calc(-1 * var(--uc-toolbarbutton-boundary) + 1px); @@ -123,26 +123,23 @@ @include _combined_back_button_background; } } - @include Option( - "userChrome.combined.urlbar.home_button", - "userChrome.combined.nav_button.home_button" - ) { - @include NotOption("userChrome.combined.nav_button.none_background") { - @include _combined_back_button_background; - } - } @include Option( "userChrome.combined.nav_button.home_button", "userChrome.combined.urlbar.home_button" ) { z-index: 2; - margin-inline-end: calc(-1 * var(--uc-toolbarbutton-boundary) - 1px) !important; + @include NotOption("userChrome.combined.nav_button.normal") { + margin-inline-end: calc(-1 * var(--uc-toolbarbutton-boundary) - 1px) !important; - > .toolbarbutton-icon { - padding-inline-start: var(--urlbar-icon-padding) !important; /* Original: var(--toolbarbutton-inner-padding) */ - padding-block: var(--urlbar-icon-padding) !important; - height: var(--uc-urlbar-icon-size) !important; + @include NotOption("userChrome.combined.nav_button.none_background") { + @include _combined_back_button_background; + } + > .toolbarbutton-icon { + padding-inline-start: var(--urlbar-icon-padding) !important; /* Original: var(--toolbarbutton-inner-padding) */ + padding-block: var(--urlbar-icon-padding) !important; + height: var(--uc-urlbar-icon-size) !important; + } } } diff --git a/user.js b/user.js index e6216d9..2d5351e 100644 --- a/user.js +++ b/user.js @@ -112,7 +112,7 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.combined.nav_button", true); // user_pref("userChrome.combined.nav_button.home_button", true); -// user_pref("userChrome.combined.nav_button.normal_foward", true); +// user_pref("userChrome.combined.nav_button.normal", true); // user_pref("userChrome.combined.nav_button.none_background", true); // user_pref("userChrome.combined.urlbar.nav_button", true); // user_pref("userChrome.combined.urlbar.home_button", true); From 26e0f1e24bc922819147d3d4a2b9fea24832e559 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 14 Dec 2022 20:19:19 +0900 Subject: [PATCH 74/88] Fix: Combined - Home button background size --- css/leptonChrome.css | 52 +++++++++++++------ src/combined/_back_forward_button.scss | 48 +++--------------- src/combined/_combined_circle_button.scss | 62 +++++++++++++++++++++++ src/combined/_home_button.scss | 28 ++-------- 4 files changed, 109 insertions(+), 81 deletions(-) create mode 100644 src/combined/_combined_circle_button.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 41fa458..1d8eba0 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -8234,6 +8234,13 @@ border-radius: 100%; padding-block: 0 !important; } + @supports -moz-bool-pref("userChrome.padding.toolbar_button") { + @supports -moz-bool-pref("userChrome.padding.toolbar_button.compact") { + #nav-bar-customization-target > #back-button { + --toolbarbutton-inner-padding: var(--uc-toolbarbutton-inner-padding-default); + } + } + } @supports not -moz-bool-pref("userChrome.autohide.back_button") { #nav-bar-customization-target > #back-button { padding-inline-end: 0 !important; @@ -8247,13 +8254,6 @@ padding-inline-end: calc(var(--toolbarbutton-outer-padding) + 1px) !important; } } - @supports -moz-bool-pref("userChrome.padding.toolbar_button") { - @supports -moz-bool-pref("userChrome.padding.toolbar_button.compact") { - #nav-bar-customization-target > #back-button { - --toolbarbutton-inner-padding: var(--uc-toolbarbutton-inner-padding-default); - } - } - } #nav-bar-customization-target > #back-button > menupopup { margin-top: -1px !important; } @@ -8275,6 +8275,13 @@ border-radius: 100%; padding-block: 0 !important; } + @supports -moz-bool-pref("userChrome.padding.toolbar_button") { + @supports -moz-bool-pref("userChrome.padding.toolbar_button.compact") { + #nav-bar-customization-target > #back-button { + --toolbarbutton-inner-padding: var(--uc-toolbarbutton-inner-padding-default); + } + } + } @supports not -moz-bool-pref("userChrome.autohide.back_button") { #nav-bar-customization-target > #back-button { padding-inline-end: 0 !important; @@ -8288,13 +8295,6 @@ padding-inline-end: calc(var(--toolbarbutton-outer-padding) + 1px) !important; } } - @supports -moz-bool-pref("userChrome.padding.toolbar_button") { - @supports -moz-bool-pref("userChrome.padding.toolbar_button.compact") { - #nav-bar-customization-target > #back-button { - --toolbarbutton-inner-padding: var(--uc-toolbarbutton-inner-padding-default); - } - } - } #nav-bar-customization-target > #back-button > menupopup { margin-top: -1px !important; } @@ -8312,14 +8312,24 @@ @supports -moz-bool-pref("userChrome.combined.nav_button") { @supports -moz-bool-pref("userChrome.combined.nav_button.home_button") { #nav-bar-customization-target > #home-button { - z-index: 3; position: relative; + z-index: 3 !important; background-color: var(--toolbar-bgcolor) !important; background-clip: content-box !important; border-radius: 100%; padding-block: 0 !important; padding-inline-end: 0 !important; } + @supports -moz-bool-pref("userChrome.padding.toolbar_button") { + @supports -moz-bool-pref("userChrome.padding.toolbar_button.compact") { + #nav-bar-customization-target > #home-button { + --toolbarbutton-inner-padding: var(--uc-toolbarbutton-inner-padding-default); + } + } + } + #nav-bar-customization-target > #home-button > menupopup { + margin-top: -1px !important; + } #nav-bar-customization-target > #home-button > .toolbarbutton-icon { background-color: var(--uc-combined-circlebutton-background); background-origin: padding-box; @@ -8385,14 +8395,24 @@ } } #nav-bar-customization-target > #home-button { - z-index: 3; position: relative; + z-index: 3 !important; background-color: var(--toolbar-bgcolor) !important; background-clip: content-box !important; border-radius: 100%; padding-block: 0 !important; padding-inline-end: 0 !important; } + @supports -moz-bool-pref("userChrome.padding.toolbar_button") { + @supports -moz-bool-pref("userChrome.padding.toolbar_button.compact") { + #nav-bar-customization-target > #home-button { + --toolbarbutton-inner-padding: var(--uc-toolbarbutton-inner-padding-default); + } + } + } + #nav-bar-customization-target > #home-button > menupopup { + margin-top: -1px !important; + } #nav-bar-customization-target > #home-button > .toolbarbutton-icon { background-color: var(--uc-combined-circlebutton-background); background-origin: padding-box; diff --git a/src/combined/_back_forward_button.scss b/src/combined/_back_forward_button.scss index 6a92f8c..cd15dcd 100644 --- a/src/combined/_back_forward_button.scss +++ b/src/combined/_back_forward_button.scss @@ -1,17 +1,16 @@ //-- Mixin --------------------------------------------------------------------- +@import "combined_circle_button"; + @mixin _combined_nav_button_background($autohideOptionName) { > .toolbarbutton-icon { - background-color: var(--uc-combined-circlebutton-background); + @include circle_button_background; } &:not([disabled], [open]):hover > .toolbarbutton-icon { - background-color: var(--uc-combined-circlebutton-hover-background) !important; - box-shadow: 0 1px 6px hsla(0,0%,0%,.1); - border-color: hsla(240,5%,5%,.35); + @include circle_button_background_hover; } &[open] > .toolbarbutton-icon, &:not([disabled]):hover:active > .toolbarbutton-icon { - background-color: var(--uc-combined-circlebutton-active-background) !important; - border-color: hsla(240,5%,5%,.40); + @include circle_button_background_active; } &[disabled="true"] { @@ -34,42 +33,7 @@ } @mixin _back_button_circle_shape() { - z-index: 3 !important; - background-color: var(--toolbar-bgcolor) !important; - background-clip: content-box !important; - border-radius: 100%; - - padding-block: 0 !important; - @include NotOption("userChrome.autohide.back_button") { - padding-inline-end: 0 !important; - } - @include Option("userChrome.autohide.back_button") { - &:not([disabled="true"]) { - padding-inline-end: 0 !important; - } - &[disabled="true"] { - padding-inline-end: calc(var(--toolbarbutton-outer-padding) + 1px) !important; - } - } - @include Option("userChrome.padding.toolbar_button") { - @include Option("userChrome.padding.toolbar_button.compact") { - --toolbarbutton-inner-padding: var(--uc-toolbarbutton-inner-padding-default); - } - } - - > menupopup { - margin-top: -1px !important; - } - - > .toolbarbutton-icon { - background-origin: padding-box; - background-clip: padding-box; - border: 1px solid var(--uc-combined-circlebutton-border-color); - border-radius: 10000px !important; - - padding-inline-end: var(--urlbar-icon-padding) !important; - height: auto !important - } + @include circle_button_shape($backButton: true); } //------------------------------------------------------------------------------ diff --git a/src/combined/_combined_circle_button.scss b/src/combined/_combined_circle_button.scss new file mode 100644 index 0000000..12bd1f4 --- /dev/null +++ b/src/combined/_combined_circle_button.scss @@ -0,0 +1,62 @@ +@mixin circle_button_shape($backButton: false) { + z-index: 3 !important; + + background-color: var(--toolbar-bgcolor) !important; + background-clip: content-box !important; + border-radius: 100%; + + padding-block: 0 !important; + + @include Option("userChrome.padding.toolbar_button") { + @include Option("userChrome.padding.toolbar_button.compact") { + --toolbarbutton-inner-padding: var(--uc-toolbarbutton-inner-padding-default); + } + } + + @if $backButton { + @include NotOption("userChrome.autohide.back_button") { + padding-inline-end: 0 !important; + } + @include Option("userChrome.autohide.back_button") { + &:not([disabled="true"]) { + padding-inline-end: 0 !important; + } + &[disabled="true"] { + padding-inline-end: calc(var(--toolbarbutton-outer-padding) + 1px) !important; + } + } + } + @else { + padding-inline-end: 0 !important; + } + + > menupopup { + margin-top: -1px !important; + } + + > .toolbarbutton-icon { + @if not $backButton { + @include circle_button_background; + } + background-origin: padding-box; + background-clip: padding-box; + border: 1px solid var(--uc-combined-circlebutton-border-color); + border-radius: 10000px !important; + + padding-inline-end: var(--urlbar-icon-padding) !important; + height: auto !important + } +} + +@mixin circle_button_background() { + background-color: var(--uc-combined-circlebutton-background); +} +@mixin circle_button_background_hover() { + background-color: var(--uc-combined-circlebutton-hover-background) !important; + box-shadow: 0 1px 6px hsla(0,0%,0%,.1); + border-color: hsla(240,5%,5%,.35); +} +@mixin circle_button_background_active() { + background-color: var(--uc-combined-circlebutton-active-background) !important; + border-color: hsla(240,5%,5%,.40); +} diff --git a/src/combined/_home_button.scss b/src/combined/_home_button.scss index 3fb5a18..e826c12 100644 --- a/src/combined/_home_button.scss +++ b/src/combined/_home_button.scss @@ -1,31 +1,13 @@ +@import "combined_circle_button"; + #nav-bar-customization-target > #home-button { - z-index: 3; position: relative; + @include circle_button_shape; - background-color: var(--toolbar-bgcolor) !important; - background-clip: content-box !important; - border-radius: 100%; - - padding-block: 0 !important; - padding-inline-end: 0 !important; - - > .toolbarbutton-icon { - background-color: var(--uc-combined-circlebutton-background); - background-origin: padding-box; - background-clip: padding-box; - border: 1px solid var(--uc-combined-circlebutton-border-color); - border-radius: 10000px !important; - - padding-inline-end: var(--urlbar-icon-padding) !important; - height: auto !important - } &:hover > .toolbarbutton-icon { - background-color: var(--uc-combined-circlebutton-hover-background) !important; - box-shadow: 0 1px 6px hsla(0,0%,0%,.1); - border-color: hsla(240,5%,5%,.35); + @include circle_button_background_hover; } &:hover:active > .toolbarbutton-icon { - background-color: var(--uc-combined-circlebutton-active-background) !important; - border-color: hsla(240,5%,5%,.40); + @include circle_button_background_active; } } From 0f01c5d42ddca916aee329c7f19e669a0a786fc2 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 16 Dec 2022 03:03:59 +0900 Subject: [PATCH 75/88] Clean: SASS - Warning --- css/leptonChrome.css | 18 ++++++++++++++++++ src/leptonChrome.scss | 1 + src/tab/newtab_button/_looks_like_tab.scss | 2 +- src/tabbar/layout/_window_control.scss | 2 +- src/tabbar/layout/_window_control_size.scss | 2 +- 5 files changed, 22 insertions(+), 3 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 1d8eba0..074cb37 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4498,6 +4498,9 @@ height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); } @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { + #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { + stroke: var(--toolbar-color, currentColor) !important; + } } .titlebar-buttonbox-container > .titlebar-buttonbox { height: 100%; @@ -4649,6 +4652,9 @@ height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); } @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { + #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { + stroke: var(--toolbar-color, currentColor) !important; + } } .titlebar-buttonbox-container > .titlebar-buttonbox { height: 100%; @@ -4797,6 +4803,9 @@ height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); } @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { + #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { + stroke: var(--toolbar-color, currentColor) !important; + } } .titlebar-buttonbox-container > .titlebar-buttonbox { height: 100%; @@ -4948,6 +4957,9 @@ height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); } @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { + #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { + stroke: var(--toolbar-color, currentColor) !important; + } } .titlebar-buttonbox-container > .titlebar-buttonbox { height: 100%; @@ -5106,6 +5118,9 @@ height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); } @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { + #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { + stroke: var(--toolbar-color, currentColor) !important; + } } .titlebar-buttonbox-container > .titlebar-buttonbox { height: 100%; @@ -5254,6 +5269,9 @@ height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); } @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { + #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { + stroke: var(--toolbar-color, currentColor) !important; + } } .titlebar-buttonbox-container > .titlebar-buttonbox { height: 100%; diff --git a/src/leptonChrome.scss b/src/leptonChrome.scss index d9959d8..6aa0c7f 100644 --- a/src/leptonChrome.scss +++ b/src/leptonChrome.scss @@ -9,6 +9,7 @@ @use "utils/has" as *; @use "utils/proton_elements" as Proton; @use "sass:selector"; +@use "sass:math"; @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; @namespace html "http://www.w3.org/1999/xhtml"; diff --git a/src/tab/newtab_button/_looks_like_tab.scss b/src/tab/newtab_button/_looks_like_tab.scss index 6f64617..34ba30c 100644 --- a/src/tab/newtab_button/_looks_like_tab.scss +++ b/src/tab/newtab_button/_looks_like_tab.scss @@ -135,7 +135,7 @@ --tab-border-radius: 0px; width: unset !important; padding-inline: 0px !important; - margin-inline: calc(var(--uc-tab-corner-half-height) - #{( 15.5px / 2 )}) !important; + margin-inline: calc(var(--uc-tab-corner-half-height) - #{math.div(15.5px, 2)}) !important; background-color: transparent !important; // background-size: calc((var(--toolbarbutton-inner-padding) * 2 + 16px) - var(--uc-tab-corner-size)) 100%; diff --git a/src/tabbar/layout/_window_control.scss b/src/tabbar/layout/_window_control.scss index 3e9e576..bcb07fc 100644 --- a/src/tabbar/layout/_window_control.scss +++ b/src/tabbar/layout/_window_control.scss @@ -32,7 +32,7 @@ See the above repository for updates as well as full license text. */ } @include OS($win10) { - &[inactive="true"] > > .titlebar-buttonbox-container .titlebar-button { + &[inactive="true"] > .titlebar-buttonbox-container .titlebar-button { stroke: var(--toolbar-color, currentColor) !important; } } diff --git a/src/tabbar/layout/_window_control_size.scss b/src/tabbar/layout/_window_control_size.scss index 5bcb3bf..6407d1b 100644 --- a/src/tabbar/layout/_window_control_size.scss +++ b/src/tabbar/layout/_window_control_size.scss @@ -51,7 +51,7 @@ --uc-window-control-width: 138px; } @include OS($linux) { - $linuxWindowControlWidth: 84px / 3; /* 84px is default value of linux */ + $linuxWindowControlWidth: math.div(84px, 3); /* 84px is default value of linux */ @media (-moz-gtk-csd-minimize-button), (-moz-gtk-csd-maximize-button), From 72c7521c89d5c373e074a4a7c8ed8ddf79646391 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 16 Dec 2022 23:01:29 +0900 Subject: [PATCH 76/88] Fix: Combined - API to sub_button --- css/leptonChrome.css | 8 ++++---- src/combined/_back_forward_button.scss | 8 ++++---- user.js | 4 ++-- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 074cb37..e500839 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -8077,7 +8077,7 @@ } } @supports -moz-bool-pref("userChrome.combined.nav_button") or -moz-bool-pref("userChrome.combined.urlbar.nav_button") { - @supports not -moz-bool-pref("userChrome.combined.nav_button.normal") { + @supports not -moz-bool-pref("userChrome.combined.sub_button.as_normal") { #nav-bar-customization-target > #forward-button { --uc-forward-button-margin: calc(-1 * var(--uc-toolbarbutton-boundary) + 1px); z-index: 2; @@ -8094,7 +8094,7 @@ } } @supports not -moz-bool-pref("userChrome.combined.urlbar.nav_button") { - @supports not -moz-bool-pref("userChrome.combined.nav_button.none_background") { + @supports not -moz-bool-pref("userChrome.combined.sub_button.none_background") { @supports -moz-bool-pref("userChrome.combined.urlbar.home_button") { @supports not -moz-bool-pref("userChrome.combined.nav_button.home_button") { #nav-bar-customization-target > #forward-button > .toolbarbutton-icon { @@ -8203,11 +8203,11 @@ #nav-bar-customization-target > #back-button { z-index: 2; } - @supports not -moz-bool-pref("userChrome.combined.nav_button.normal") { + @supports not -moz-bool-pref("userChrome.combined.sub_button.as_normal") { #nav-bar-customization-target > #back-button { margin-inline-end: calc(-1 * var(--uc-toolbarbutton-boundary) - 1px) !important; } - @supports not -moz-bool-pref("userChrome.combined.nav_button.none_background") { + @supports not -moz-bool-pref("userChrome.combined.sub_button.none_background") { #nav-bar-customization-target > #back-button > .toolbarbutton-icon { background-color: var(--uc-combined-circlebutton-background); } diff --git a/src/combined/_back_forward_button.scss b/src/combined/_back_forward_button.scss index cd15dcd..530cfd4 100644 --- a/src/combined/_back_forward_button.scss +++ b/src/combined/_back_forward_button.scss @@ -39,7 +39,7 @@ //------------------------------------------------------------------------------ #nav-bar-customization-target > { - @include NotOption("userChrome.combined.nav_button.normal") { + @include NotOption("userChrome.combined.sub_button.as_normal") { #forward-button { --uc-forward-button-margin: calc(-1 * var(--uc-toolbarbutton-boundary) + 1px); @@ -56,7 +56,7 @@ padding-inline-end: 0px !important; /* Original: var(--toolbarbutton-outer-padding) */ } @include NotOption("userChrome.combined.urlbar.nav_button") { - @include NotOption("userChrome.combined.nav_button.none_background") { + @include NotOption("userChrome.combined.sub_button.none_background") { @include Option("userChrome.combined.urlbar.home_button") { @include NotOption("userChrome.combined.nav_button.home_button") { @include _combined_forward_button_background; @@ -93,10 +93,10 @@ ) { z-index: 2; - @include NotOption("userChrome.combined.nav_button.normal") { + @include NotOption("userChrome.combined.sub_button.as_normal") { margin-inline-end: calc(-1 * var(--uc-toolbarbutton-boundary) - 1px) !important; - @include NotOption("userChrome.combined.nav_button.none_background") { + @include NotOption("userChrome.combined.sub_button.none_background") { @include _combined_back_button_background; } > .toolbarbutton-icon { diff --git a/user.js b/user.js index 2d5351e..9d69435 100644 --- a/user.js +++ b/user.js @@ -112,11 +112,11 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.combined.nav_button", true); // user_pref("userChrome.combined.nav_button.home_button", true); -// user_pref("userChrome.combined.nav_button.normal", true); -// user_pref("userChrome.combined.nav_button.none_background", true); // user_pref("userChrome.combined.urlbar.nav_button", true); // user_pref("userChrome.combined.urlbar.home_button", true); // user_pref("userChrome.combined.urlbar.reload_button", true); +// user_pref("userChrome.combined.sub_button.none_background", true); +// user_pref("userChrome.combined.sub_button.as_normal", true); // user_pref("userChrome.rounding.square_button", true); // user_pref("userChrome.rounding.square_panel", true); From ce55d265365085ea044d8c48c42d8169f4f3a423 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 17 Dec 2022 05:24:39 +0900 Subject: [PATCH 77/88] Clean: Tab - Box shadow --- css/leptonChrome.css | 18 +----------------- src/tab/selected_tab/_box_shadow.scss | 18 ++++-------------- 2 files changed, 5 insertions(+), 31 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index e500839..4aaf925 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6030,14 +6030,6 @@ #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { box-shadow: var(--uc-tab-basic-shadow) !important; } - :root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) - #TabsToolbar[brighttext] - #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab { - /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)) - Bright: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */ - /* Consider 0 0 4px rgba(128,128,142,0.9) -> 0 0 4px rgba(0,0,0,.4) new default */ - } :root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) @@ -6056,15 +6048,6 @@ .tabbrowser-tab[multiselected]:not([visuallyselected]) { --uc-tab-shadow-color: var(--toolbar-color); } - :root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"]) - #TabsToolbar:not([brighttext]) - #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab:is([visuallyselected], [multiselected]) - > .tab-stack - > .tab-background { - --uc-tab-shadow-color: var(--uc-tab-shadow-color-bundle); - box-shadow: var(--uc-tab-background-shadow-soft) var(--uc-tab-shadow-color), var(--uc-tab-additional-shadow) !important; - } /* For themes outside of Light and Dark (which are curated by Mozilla), show a thicker border around the tab to help themes that are dependent on tab_line to show the selected tab. */ :root:not([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"]) @@ -6073,6 +6056,7 @@ .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background:-moz-lwtheme { + --uc-tab-shadow-color: var(--uc-tab-shadow-color-bundle); box-shadow: var(--uc-tab-background-shadow-hard) var(--uc-tab-shadow-color), var(--uc-tab-additional-shadow) !important; } :root:not([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) diff --git a/src/tab/selected_tab/_box_shadow.scss b/src/tab/selected_tab/_box_shadow.scss index 642c700..74837e7 100644 --- a/src/tab/selected_tab/_box_shadow.scss +++ b/src/tab/selected_tab/_box_shadow.scss @@ -35,26 +35,15 @@ } } - /* Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)) - Bright: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */ - /* Consider 0 0 4px rgba(128,128,142,0.9) -> 0 0 4px rgba(0,0,0,.4) new default */ &[visuallyselected="true"]:not(:focus), &[multiselected]:not([visuallyselected]) { + // Original: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)) + // Bright: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */ + // Consider 0 0 4px rgba(128,128,142,0.9) -> 0 0 4px rgba(0,0,0,.4) new default */ --uc-tab-shadow-color: var(--toolbar-color); } } -:root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"]) - #TabsToolbar:not([brighttext]) - #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab:is([visuallyselected], [multiselected]) - > .tab-stack - > .tab-background { - --uc-tab-shadow-color: var(--uc-tab-shadow-color-bundle); - box-shadow: var(--uc-tab-background-shadow-soft) var(--uc-tab-shadow-color), - var(--uc-tab-additional-shadow) !important; -} - /* For themes outside of Light and Dark (which are curated by Mozilla), show a thicker border around the tab to help themes that are dependent on tab_line to show the selected tab. */ :root:not([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"]) @@ -63,6 +52,7 @@ .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background:-moz-lwtheme { + --uc-tab-shadow-color: var(--uc-tab-shadow-color-bundle); box-shadow: var(--uc-tab-background-shadow-hard) var(--uc-tab-shadow-color), var(--uc-tab-additional-shadow) !important; } From e10db8d9e7f1133bb7475b6e77dfcf72ff34c032 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 18 Dec 2022 06:51:48 +0900 Subject: [PATCH 78/88] Fix: Tab - Boxshadow -> Dropshadow The anti-aliasing of the SVG stroke is insufficient. --- css/leptonChrome.css | 57 ++++-------------- .../_bottom_rounded_corner_others.scss | 59 ++++++------------- src/tab/selected_tab/_box_shadow.scss | 36 ++++------- 3 files changed, 40 insertions(+), 112 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 4aaf925..5ca7432 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -6004,31 +6004,15 @@ /*= Selected Tab - Box Shadow ================================================*/ @supports -moz-bool-pref("userChrome.tab.box_shadow") { #TabsToolbar { - --uc-tab-background-shadow-soft: 0 0 1px; - --uc-tab-background-shadow-hard: 0 0 0 1px; --uc-tab-shadow-color: var( --tab-line-color, var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9))) ); --uc-tab-shadow-color-bundle: var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))); - --uc-tab-basic-shadow: 0 0 4px rgba(0, 0, 0, 0.4); - --uc-tab-additional-shadow: 0 0 4px rgba(128, 128, 142, 0.5); - } - @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner") { - @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") or -moz-bool-pref( - "userChrome.tab.bottom_rounded_corner.australis" - ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref( - "userChrome.tab.bottom_rounded_corner.chrome" - ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { - #TabsToolbar { - --uc-tab-background-shadow-hard: 0 -1px 0; - --uc-tab-basic-shadow: 0 -1px 0px rgba(0, 0, 0, 0.4); - --uc-tab-additional-shadow: 0 0 0 transparent; - } - } } #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { - box-shadow: var(--uc-tab-basic-shadow) !important; + box-shadow: unset !important; + filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4)); } :root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) #TabsToolbar[brighttext] @@ -6036,7 +6020,7 @@ .tabbrowser-tab:is([selected], [multiselected]) > .tab-stack > .tab-background:-moz-lwtheme { - box-shadow: var(--uc-tab-background-shadow-soft) var(--uc-tab-shadow-color) !important; + filter: drop-shadow(0 0 1px var(--uc-tab-shadow-color, transparent)); } :root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) #TabsToolbar[brighttext] @@ -6057,7 +6041,8 @@ > .tab-stack > .tab-background:-moz-lwtheme { --uc-tab-shadow-color: var(--uc-tab-shadow-color-bundle); - box-shadow: var(--uc-tab-background-shadow-hard) var(--uc-tab-shadow-color), var(--uc-tab-additional-shadow) !important; + filter: drop-shadow(-1px -0.5px 0px var(--uc-tab-shadow-color, transparent)) + drop-shadow(1px -1px 0px var(--uc-tab-shadow-color, transparent)) drop-shadow(0 0 2px rgba(128, 128, 142, 0.5)); } :root:not([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) #TabsToolbar[brighttext] @@ -6065,7 +6050,8 @@ .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background:-moz-lwtheme { - box-shadow: var(--uc-tab-background-shadow-hard) var(--uc-tab-shadow-color) !important; + filter: drop-shadow(-1px -0.5px 0px var(--uc-tab-shadow-color, transparent)) + drop-shadow(1px -1px 0px var(--uc-tab-shadow-color, transparent)); } } /*= Selected Tab - Bottom Rounded Corner =====================================*/ @@ -6308,14 +6294,13 @@ display: block; position: absolute; z-index: -1; - bottom: 0; + bottom: -1px; /* Shape */ width: var(--uc-tab-corner-size); height: var(--uc-tab-corner-height); /* Color */ fill: transparent; - stroke: transparent; - -moz-context-properties: fill, stroke, stroke-opacity; + -moz-context-properties: fill; /* Image */ background-size: cover, auto auto; background-repeat: no-repeat, no-repeat; @@ -6364,12 +6349,6 @@ .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::after { fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); } - @supports -moz-bool-pref("userChrome.tab.box_shadow") { - .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::before, - .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::after { - stroke: var(--uc-tab-shadow-color); - } - } .tabbrowser-tab:hover:not([visuallyselected], [multiselected]) .tab-background::before, .tabbrowser-tab:hover:not([visuallyselected], [multiselected]) .tab-background::after { fill: color-mix(in srgb, currentColor 11%, transparent); @@ -6383,24 +6362,8 @@ #tabbrowser-tabs[movingtab] .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background:-moz-lwtheme { --uc-tab-corner-bgimage: none; } - @supports -moz-bool-pref("userChrome.tab.box_shadow") { - :root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) - #TabsToolbar[brighttext] - #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab:is([visuallyselected], [multiselected]) - .tab-background::before, - :root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) - #TabsToolbar[brighttext] - #tabbrowser-tabs:not([noshadowfortests]) - .tabbrowser-tab:is([visuallyselected], [multiselected]) - .tab-background::after { - stroke-opacity: 0.3; - } - } @media (-moz-gtk-csd-available) { - :root { - /* Fill color for GTK */ - } + /* Fill color for GTK */ @supports -moz-bool-pref("userChrome.tab.box_shadow") { :root:not([lwtheme="true"]) .tabbrowser-tab { --uc-tab-shadow-color: rgba(0, 0, 0, 0.4); diff --git a/src/tab/selected_tab/_bottom_rounded_corner_others.scss b/src/tab/selected_tab/_bottom_rounded_corner_others.scss index c8d7a11..dff4907 100644 --- a/src/tab/selected_tab/_bottom_rounded_corner_others.scss +++ b/src/tab/selected_tab/_bottom_rounded_corner_others.scss @@ -110,7 +110,7 @@ display: block; position: absolute; z-index: -1; - bottom: 0; + bottom: -1px; /* Shape */ width: var(--uc-tab-corner-size); @@ -118,12 +118,7 @@ /* Color */ fill: transparent; - stroke: transparent; - -moz-context-properties: fill, stroke, stroke-opacity; - // For stroke - // box-shadow: 0 0 4px rgba(0,0,0,.4); - // box-shadow: 0 0 1px var(--toolbar-color) !important; - // box-shadow: 0 0 1px var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))) !important + -moz-context-properties: fill; /* Image */ // background-size: var(--tab-corner-rounding); @@ -174,10 +169,6 @@ &::before, &::after { fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); - - @include Option("userChrome.tab.box_shadow") { - stroke: var(--uc-tab-shadow-color); - } } } &:hover:not([visuallyselected], [multiselected]) .tab-background { @@ -199,39 +190,25 @@ --uc-tab-corner-bgimage: none; } -:root { - &:is( - [lwtheme-mozlightdark], - [style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], - [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"] - ) #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background { +@include OS($linux) { + /* Fill color for GTK */ + :root:not([lwtheme="true"]) .tabbrowser-tab { @include Option("userChrome.tab.box_shadow") { + --uc-tab-shadow-color: rgba(0,0,0, 0.4); + } + &[visuallyselected] .tab-background { + background-clip: content-box; + &::before, &::after { - stroke-opacity: 0.3; - } - } - } - @include OS($linux) { - /* Fill color for GTK */ - &:not([lwtheme="true"]) .tabbrowser-tab { - @include Option("userChrome.tab.box_shadow") { - --uc-tab-shadow-color: rgba(0,0,0, 0.4); - } - &[visuallyselected] .tab-background { - background-clip: content-box; - - &::before, - &::after { - /* As GTK Toolbar's background-color + background-image - * --toolbar-non-lwt-bgcolor: -moz-dialog; - * --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15)); - */ - --uc-tab-corner-bgimage: linear-gradient(var(--toolbar-non-lwt-bgcolor), var(--toolbar-non-lwt-bgcolor)); - fill: rgba(255, 255, 255, .075); - @include NotOption("userChrome.tab.color_like_toolbar") { - fill: rgba(255, 255, 255, .15); - } + /* As GTK Toolbar's background-color + background-image + * --toolbar-non-lwt-bgcolor: -moz-dialog; + * --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15)); + */ + --uc-tab-corner-bgimage: linear-gradient(var(--toolbar-non-lwt-bgcolor), var(--toolbar-non-lwt-bgcolor)); + fill: rgba(255, 255, 255, .075); + @include NotOption("userChrome.tab.color_like_toolbar") { + fill: rgba(255, 255, 255, .15); } } } diff --git a/src/tab/selected_tab/_box_shadow.scss b/src/tab/selected_tab/_box_shadow.scss index 74837e7..864d532 100644 --- a/src/tab/selected_tab/_box_shadow.scss +++ b/src/tab/selected_tab/_box_shadow.scss @@ -1,29 +1,17 @@ +$ucTabBasicShadow: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4)); +$ucTabAdditionalShadow: drop-shadow(0 0 2px rgba(128, 128, 142, 0.5)); +$ucTabBackgroundShadowSoft: drop-shadow(0 0 1px var(--uc-tab-shadow-color, transparent)); +$ucTabBackgroundShadowHard: drop-shadow(-1px -0.5px 0px var(--uc-tab-shadow-color, transparent)) + drop-shadow(1px -1px 0px var(--uc-tab-shadow-color, transparent)); + #TabsToolbar { - --uc-tab-background-shadow-soft: 0 0 1px; - --uc-tab-background-shadow-hard: 0 0 0 1px; --uc-tab-shadow-color: var(--tab-line-color, var(--lwt-tab-line-color, var(--tabs-border-color, rgba(128, 128, 142, 0.9)))); --uc-tab-shadow-color-bundle: var(--tab-line-color, var(--lwt-tab-line-color, rgba(128, 128, 142, 0.9))); - --uc-tab-basic-shadow: 0 0 4px rgba(0,0,0, 0.4); - --uc-tab-additional-shadow: 0 0 4px rgba(128, 128, 142, 0.5); - - @include Option("userChrome.tab.bottom_rounded_corner") { - @include Option( - "userChrome.tab.bottom_rounded_corner.wave", - "userChrome.tab.bottom_rounded_corner.australis", - "userChrome.tab.bottom_rounded_corner.chrome_legacy", - "userChrome.tab.bottom_rounded_corner.chrome", - "userChrome.tab.bottom_rounded_corner.edge" - ) { - // --uc-tab-background-shadow-soft: 0 -1px 1px -1px; - --uc-tab-background-shadow-hard: 0 -1px 0; - --uc-tab-basic-shadow: 0 -1px 0px rgba(0,0,0, 0.4); - --uc-tab-additional-shadow: 0 0 0 transparent; - } - } } #tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { - box-shadow: var(--uc-tab-basic-shadow) !important; + box-shadow: unset !important; + filter: $ucTabBasicShadow; } :root:is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) @@ -31,7 +19,7 @@ &:is([selected], [multiselected]) { > .tab-stack > .tab-background:-moz-lwtheme { - box-shadow: var(--uc-tab-background-shadow-soft) var(--uc-tab-shadow-color) !important; + filter: $ucTabBackgroundShadowSoft; } } @@ -53,8 +41,8 @@ > .tab-stack > .tab-background:-moz-lwtheme { --uc-tab-shadow-color: var(--uc-tab-shadow-color-bundle); - box-shadow: var(--uc-tab-background-shadow-hard) var(--uc-tab-shadow-color), - var(--uc-tab-additional-shadow) !important; + filter: $ucTabBackgroundShadowHard + $ucTabAdditionalShadow; } :root:not([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"]) @@ -63,5 +51,5 @@ .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background:-moz-lwtheme { - box-shadow: var(--uc-tab-background-shadow-hard) var(--uc-tab-shadow-color) !important; + filter: $ucTabBackgroundShadowHard; } From 300d3d9c77108520c3757a8898819d8af6a00c62 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 23 Dec 2022 14:17:06 +0900 Subject: [PATCH 79/88] Clean: Code - SCSS `-moz-document` warning Remove `-moz-document` warning to make other warnings visible. https://github.com/sass/sass/issues/3182#issuecomment-1358425926 There is also some improvement of compilation time by reducing the output. --- __tests__/each.test.scss | 4 +- __tests__/moz_document.test.scss | 59 +++++++++++++++++++ css/leptonChrome.css | 13 +--- css/leptonContent.css | 51 ++++------------ src/contents/_activity_stream.scss | 2 +- src/contents/_context_menu.scss | 6 +- src/contents/_downloads.scss | 2 +- src/contents/_error_page.scss | 56 ++++++++++-------- src/contents/_monospace.scss | 8 ++- src/contents/_proton_color.scss | 16 ++--- src/contents/dark_mode/_accounts_com.scss | 3 +- src/contents/dark_mode/_addons_org.scss | 3 +- src/contents/dark_mode/_support_org.scss | 3 +- .../proton_contents/_about_cache.scss | 2 +- .../proton_contents/_about_checkerboard.scss | 2 +- .../proton_contents/_about_memory.scss | 2 +- .../proton_contents/_about_plugins.scss | 2 +- .../proton_contents/_directory_view.scss | 6 +- .../proton_contents/_field_border.scss | 2 +- .../proton_contents/_proton_commons.scss | 28 +++++---- .../proton_contents/_view_source.scss | 2 +- src/decoration/_animate.scss | 6 +- src/leptonChrome.scss | 3 +- src/leptonContent.scss | 1 + src/library/_chrome.scss | 3 +- src/library/_contents.scss | 3 +- src/tabbar/_multi_row.scss | 2 +- src/theme/_fully_dark.scss | 3 +- src/theme/proton_chrome/_cert.scss | 6 +- src/theme/proton_chrome/_library_popup.scss | 3 +- src/theme/proton_chrome/_page_info.scss | 3 +- src/theme/proton_chrome/_proton_commons.scss | 17 +++--- src/utils/_moz_document.scss | 10 ++++ 33 files changed, 189 insertions(+), 143 deletions(-) create mode 100644 __tests__/moz_document.test.scss create mode 100644 src/utils/_moz_document.scss diff --git a/__tests__/each.test.scss b/__tests__/each.test.scss index 9838760..da35864 100644 --- a/__tests__/each.test.scss +++ b/__tests__/each.test.scss @@ -11,7 +11,7 @@ } } @include expect { - @-moz-document url(about:home) { + @#{-moz-document} url(about:home) { @include example; } } @@ -27,7 +27,7 @@ } } @include expect { - @-moz-document url(about:home), url(about:newtab) { + @#{-moz-document} url(about:home), url(about:newtab) { @include example; } } diff --git a/__tests__/moz_document.test.scss b/__tests__/moz_document.test.scss new file mode 100644 index 0000000..34f479a --- /dev/null +++ b/__tests__/moz_document.test.scss @@ -0,0 +1,59 @@ +@use "true" as *; +@use "example" as *; +@use "../src/utils/moz_document" as *; + +@include test-module("Moz Documents [mix]") { + @include test("simple") { + @include assert { + @include output { + @include moz-document(url "about:downloads") { + @include example; + } + @include moz-document(url-prefix "about:") { + @include example; + } + @include moz-document(regexp "^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") { + @include example; + } + } + @include expect { + @-moz-document url("about:downloads") { + @include example; + } + @-moz-document url-prefix("about:") { + @include example; + } + @-moz-document regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") { + @include example; + } + } + } + } + @include test("multiple") { + @include assert { + @include output { + @include moz-document( + url "about:downloads", + url-prefix "about:", + regexp "^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$" + ) { + @include example; + } + @include moz-document( + url-prefix "about:cache", + url-prefix "about:checkerboard" + ) { + @include example; + } + } + @include expect { + @-moz-document url("about:downloads"), url-prefix("about:"), regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") { + @include example; + } + @-moz-document url-prefix("about:cache"), url-prefix("about:checkerboard") { + @include example; + } + } + } + } +} diff --git a/css/leptonChrome.css b/css/leptonChrome.css index da2c648..af1d133 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -1626,13 +1626,7 @@ /*= Proton Theme Mode ========================================================*/ @supports -moz-bool-pref("userChrome.theme.proton_chrome") { /*= Proton Commons ===========================================================*/ - @-moz-document url("chrome://global/content/commonDialog.xhtml"), - url("chrome://pippki/content/editcacert.xhtml"), - url("chrome://pippki/content/deletecert.xhtml"), - url("chrome://pippki/content/exceptionDialog.xhtml"), - url("chrome://mozapps/content/downloads/unknownContentType.xhtml"), - url("chrome://global/content/appPicker.xhtml"), - url("chrome://browser/content/pageinfo/pageInfo.xhtml") + @-moz-document url("chrome://global/content/commonDialog.xhtml"), url("chrome://pippki/content/editcacert.xhtml"), url("chrome://pippki/content/deletecert.xhtml"), url("chrome://pippki/content/exceptionDialog.xhtml"), url("chrome://mozapps/content/downloads/unknownContentType.xhtml"), url("chrome://global/content/appPicker.xhtml"), url("chrome://browser/content/pageinfo/pageInfo.xhtml") { /*- Overwrite --------------------------------------------------------------*/ @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) { @@ -2198,8 +2192,7 @@ border: 1px solid var(--in-content-table-border-color) !important; border-radius: 4px !important; } - } - /*= Cert Exception Dialog ====================================================*/ + } /*= Cert Exception Dialog ====================================================*/ @-moz-document url("chrome://pippki/content/exceptionDialog.xhtml") { #locationTextBox { @@ -5819,7 +5812,7 @@ min-height: unset !important; padding-inline-start: 0px !important; } - @-moz-document url(chrome://browser/content/browser.xhtml) + @-moz-document url("chrome://browser/content/browser.xhtml") { #scrollbutton-up ~ spacer, #scrollbutton-up, diff --git a/css/leptonContent.css b/css/leptonContent.css index 906ddea..3c89e7e 100644 --- a/css/leptonContent.css +++ b/css/leptonContent.css @@ -458,9 +458,7 @@ } /** Error Page - Restore illustrations ****************************************/ @supports -moz-bool-pref("userContent.page.illustration") { - @-moz-document url-prefix("about:neterror"), - url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml"), - url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml") + @-moz-document url-prefix("about:neterror"), url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml"), url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml") { /* Illustrations Position */ #errorPageContainer, @@ -490,12 +488,7 @@ padding-inline-start: 38%; } } - @-moz-document url-prefix("about:neterror?e=connectionFailure"), - url-prefix("about:neterror?e=netInterrupt"), - url-prefix("about:neterror?e=netReset"), - url-prefix("about:neterror?e=netTimeout"), - url-prefix("about:neterror?e=netOffline"), - url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml") + @-moz-document url-prefix("about:neterror?e=connectionFailure"), url-prefix("about:neterror?e=netInterrupt"), url-prefix("about:neterror?e=netReset"), url-prefix("about:neterror?e=netTimeout"), url-prefix("about:neterror?e=netOffline"), url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml") { :root { --uc-error-llustration: url(../icons/error-connection-failure.svg); @@ -506,15 +499,12 @@ --uc-error-llustration: url(../icons/error-server-not-found.svg); } } - @-moz-document url-prefix("about:neterror?e=blockedByPolicy"), - url-prefix("about:neterror?e=deniedPortAccess"), - url-prefix("about:neterror?e=malformedURI") { + @-moz-document url-prefix("about:neterror?e=blockedByPolicy"), url-prefix("about:neterror?e=deniedPortAccess"), url-prefix("about:neterror?e=malformedURI") { :root { --uc-error-llustration: url(chrome://browser/skin/illustrations/error-malformed-url.svg); } } - @-moz-document url-prefix("about:neterror?e=clockSkewError"), - url-prefix("about:neterror?e=nssFailure") { + @-moz-document url-prefix("about:neterror?e=clockSkewError"), url-prefix("about:neterror?e=nssFailure") { :root { --uc-error-llustration: url(../icons/blue-berror.svg); } @@ -566,13 +556,7 @@ /** Fully Dark Mode ***********************************************************/ /*= Fully Dark Mode - Dark Mode Colors =======================================*/ @supports -moz-bool-pref("userContent.page.proton_color") { - @-moz-document url-prefix("about:"), - url-prefix("chrome://browser/content/places/places.xhtml"), - url-prefix("https://addons.mozilla.org"), - url-prefix("https://support.mozilla.org"), - url-prefix("https://accounts.firefox.com"), - url-prefix("view-source"), - regexp("^(((jar:)?file:///)|(chrome://)).*/$") + @-moz-document url-prefix("about:"), url-prefix("chrome://browser/content/places/places.xhtml"), url-prefix("https://addons.mozilla.org"), url-prefix("https://support.mozilla.org"), url-prefix("https://accounts.firefox.com"), url-prefix("view-source"), regexp("^(((jar:)?file:///)|(chrome://)).*/$") { /*= Default Colors - Hard Coded ==============================================*/ /* Based on chrome://global/skin/in-content/common.css */ @@ -1660,12 +1644,7 @@ /** Fully Proton Mode *********************************************************/ @supports -moz-bool-pref("userContent.page.proton") { /*= Common contents ==========================================================*/ /*= abouts' common ===========================================================*/ - @-moz-document url-prefix("about:plugins"), - url-prefix("about:cache"), - url-prefix("about:checkerboard"), - url-prefix("about:sync-log"), - url-prefix("about:memory"), - regexp("^(((jar:)?file:///)|(chrome://)).*/$") + @-moz-document url-prefix("about:plugins"), url-prefix("about:cache"), url-prefix("about:checkerboard"), url-prefix("about:sync-log"), url-prefix("about:memory"), regexp("^(((jar:)?file:///)|(chrome://)).*/$") { /* Base */ html, @@ -1866,16 +1845,13 @@ width: 100% !important; } } - @-moz-document url-prefix("about:plugins"), - url-prefix("about:cache"), - url-prefix("about:checkerboard") { + @-moz-document url-prefix("about:plugins"), url-prefix("about:cache"), url-prefix("about:checkerboard") { table { border: 1px solid var(--in-content-table-border-color) !important; border-radius: 0 !important; } } - @-moz-document url-prefix("about:cache"), - url-prefix("about:checkerboard") { + @-moz-document url-prefix("about:cache"), url-prefix("about:checkerboard") { th, td { border: 1px solid var(--in-content-table-border-color) !important; @@ -1957,8 +1933,7 @@ } } /*= Directory View ===========================================================*/ - @-moz-document url-prefix("about:sync-log"), - regexp("^(((jar:)?file:///)|(chrome://)).*/$") + @-moz-document url-prefix("about:sync-log"), regexp("^(((jar:)?file:///)|(chrome://)).*/$") { body { background-color: var(--in-content-box-background) !important; @@ -2738,9 +2713,7 @@ } /** 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://)).*/$") + @-moz-document url-prefix("about:"), url-prefix("chrome://browser/content/places/places.xhtml"), regexp("^(((jar:)?file:///)|(chrome://)).*/$") { * { font-family: -moz-fixed; @@ -2750,8 +2723,8 @@ /** Menu - Icons Layout *******************************************************/ @supports not -moz-bool-pref("userChrome.icon.disabled") { @supports -moz-bool-pref("userChrome.icon.menu") { - @-moz-document url("chrome://browser/content/places/places.xhtml"), - url("about:downloads") { + @-moz-document url("chrome://browser/content/places/places.xhtml"), url("about:downloads") + { menupopup menuitem:not([type="checkbox"][checked="true"], [type="radio"]), menupopup menu:not([type="checkbox"][checked="true"], [type="radio"]) { -moz-appearance: none !important; /* Linux: menulist */ diff --git a/src/contents/_activity_stream.scss b/src/contents/_activity_stream.scss index 094af08..a45a1cf 100644 --- a/src/contents/_activity_stream.scss +++ b/src/contents/_activity_stream.scss @@ -1,4 +1,4 @@ -@-moz-document url("about:home"), url("about:newtab") { +@include moz-document(url "about:home", url "about:newtab") { /** Activity Stream - Search Focus Border: like URL *************************/ @include Option("userContent.page.field_border") { /* At DarkMode, Color */ diff --git a/src/contents/_context_menu.scss b/src/contents/_context_menu.scss index 89f92ea..e219505 100644 --- a/src/contents/_context_menu.scss +++ b/src/contents/_context_menu.scss @@ -1,5 +1,7 @@ -@-moz-document url("chrome://browser/content/places/places.xhtml"), - url("about:downloads") { +@include moz-document( + url "chrome://browser/content/places/places.xhtml", + url "about:downloads" +) { @import "../icons/layout/menu_contents"; /*= Context Menu ===========================================================*/ diff --git a/src/contents/_downloads.scss b/src/contents/_downloads.scss index 8f12cce..c3dcb1c 100644 --- a/src/contents/_downloads.scss +++ b/src/contents/_downloads.scss @@ -1,4 +1,4 @@ -@-moz-document url-prefix("about:downloads") { +@include moz-document(url-prefix "about:downloads") { @include Animate { @include Option("userChrome.decoration.download_panel") { @import "../decoration/download_panel"; diff --git a/src/contents/_error_page.scss b/src/contents/_error_page.scss index 26283c9..73a1706 100644 --- a/src/contents/_error_page.scss +++ b/src/contents/_error_page.scss @@ -1,7 +1,10 @@ -@-moz-document url-prefix("about:neterror"), - url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml"), - url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml") -{ +@include moz-document( + url-prefix "about:neterror", + url "about:restartrequired", + url "chrome://browser/content/aboutRestartRequired.xhtml", + url "about:sessionrestore", + url "chrome://browser/content/aboutSessionRestore.xhtml" +) { /* Illustrations Position */ #errorPageContainer, .neterror > .container, @@ -66,50 +69,53 @@ //------------------------------------------------------------------------------ -@-moz-document url-prefix("about:neterror?e=connectionFailure"), - url-prefix("about:neterror?e=netInterrupt"), - url-prefix("about:neterror?e=netReset"), - url-prefix("about:neterror?e=netTimeout"), - url-prefix("about:neterror?e=netOffline"), - url("about:restartrequired"), url("chrome://browser/content/aboutRestartRequired.xhtml") -{ +@include moz-document( + url-prefix "about:neterror?e=connectionFailure", + url-prefix "about:neterror?e=netInterrupt", + url-prefix "about:neterror?e=netReset", + url-prefix "about:neterror?e=netTimeout", + url-prefix "about:neterror?e=netOffline", + url "about:restartrequired", + url "chrome://browser/content/aboutRestartRequired.xhtml" +) { @include _errorContainerImage("../icons/error-connection-failure.svg"); } -@-moz-document url-prefix("about:neterror?e=dnsNotFound") { +@include moz-document(url-prefix "about:neterror?e=dnsNotFound") { @include _errorContainerImage("../icons/error-server-not-found.svg"); } -@-moz-document url-prefix("about:neterror?e=blockedByPolicy"), - url-prefix("about:neterror?e=deniedPortAccess"), - url-prefix("about:neterror?e=malformedURI") { +@include moz-document( + url-prefix "about:neterror?e=blockedByPolicy", + url-prefix "about:neterror?e=deniedPortAccess", + url-prefix "about:neterror?e=malformedURI" +) { @include _errorContainerImage("chrome://browser/skin/illustrations/error-malformed-url.svg"); } -@-moz-document url-prefix("about:neterror?e=clockSkewError"), - url-prefix("about:neterror?e=nssFailure") { +@include moz-document( + url-prefix "about:neterror?e=clockSkewError", + url-prefix "about:neterror?e=nssFailure" +) { @include _errorContainerImage("../icons/blue-berror.svg") { background-size: 18.5em; } } -@-moz-document url("about:sessionrestore"), url("chrome://browser/content/aboutSessionRestore.xhtml") -{ +@include moz-document(url "about:sessionrestore" , url "chrome://browser/content/aboutSessionRestore.xhtml") { @include _errorDescriptionImage("../icons/error-session-restore.svg"); } -@-moz-document url-prefix("about:neterror?e=fileNotFound") { +@include moz-document(url-prefix "about:neterror?e=fileNotFound") { @include _errorTitleImage("chrome://global/skin/icons/info.svg"); #text-container { padding-inline-start: 0; } } -@-moz-document url-prefix("about:tabcrashed") { +@include moz-document(url-prefix "about:tabcrashed") { @include _errorTitleImage("chrome://browser/skin/tab-crashed.svg"); } -@-moz-document url("about:robots"), url("chrome://browser/content/aboutRobots.xhtml") -{ +@include moz-document(url "about:robots", url "chrome://browser/content/aboutRobots.xhtml") { @include _errorTitleImage("chrome://browser/content/aboutRobots-icon.png"); } -@-moz-document url("about:welcomeBack"), url("chrome://browser/content/aboutWelcomeBack.xhtml") -{ +@include moz-document(url "about:welcomeBack", url "chrome://browser/content/aboutWelcomeBack.xhtml") { @include _errorTitleImage("../icons/welcome-back.svg"); } diff --git a/src/contents/_monospace.scss b/src/contents/_monospace.scss index 30a2c55..ddd32d8 100644 --- a/src/contents/_monospace.scss +++ b/src/contents/_monospace.scss @@ -1,5 +1,7 @@ -@-moz-document url-prefix("about:"), - url-prefix("chrome://browser/content/places/places.xhtml"), - regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") { +@include moz-document( + url-prefix "about:", + url-prefix "chrome://browser/content/places/places.xhtml", + regexp "^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$" +) { @import "../theme/monospace"; } diff --git a/src/contents/_proton_color.scss b/src/contents/_proton_color.scss index 61a7ab8..97adcaf 100644 --- a/src/contents/_proton_color.scss +++ b/src/contents/_proton_color.scss @@ -1,10 +1,12 @@ -@-moz-document url-prefix("about:"), - url-prefix("chrome://browser/content/places/places.xhtml"), - url-prefix("https://addons.mozilla.org"), - url-prefix("https://support.mozilla.org"), - url-prefix("https://accounts.firefox.com"), - url-prefix("view-source"), - regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") { +@include moz-document( + url-prefix "about:", + url-prefix "chrome://browser/content/places/places.xhtml", + url-prefix "https://addons.mozilla.org", + url-prefix "https://support.mozilla.org", + url-prefix "https://accounts.firefox.com", + url-prefix "view-source", + regexp "^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$" +) { @import "../theme/proton_color"; @include Option("userContent.page.proton_color.dark_blue_accent") { diff --git a/src/contents/dark_mode/_accounts_com.scss b/src/contents/dark_mode/_accounts_com.scss index 9796370..9ae0afc 100644 --- a/src/contents/dark_mode/_accounts_com.scss +++ b/src/contents/dark_mode/_accounts_com.scss @@ -1,6 +1,5 @@ /*= Accounts.com ===========================================================*/ -@-moz-document url-prefix("https://accounts.firefox.com") -{ +@include moz-document(url-prefix "https://accounts.firefox.com") { /* Basic */ body { color: var(--in-content-page-color) !important; diff --git a/src/contents/dark_mode/_addons_org.scss b/src/contents/dark_mode/_addons_org.scss index d5de91c..01ff0c9 100644 --- a/src/contents/dark_mode/_addons_org.scss +++ b/src/contents/dark_mode/_addons_org.scss @@ -1,6 +1,5 @@ /*= Addons.org =============================================================*/ -@-moz-document url-prefix("https://addons.mozilla.org") -{ +@include moz-document(url-prefix "https://addons.mozilla.org") { /* Basic */ .Page-content, .SecondaryHero, diff --git a/src/contents/dark_mode/_support_org.scss b/src/contents/dark_mode/_support_org.scss index 41c9cd4..c1bd9b0 100644 --- a/src/contents/dark_mode/_support_org.scss +++ b/src/contents/dark_mode/_support_org.scss @@ -1,6 +1,5 @@ /*= Support.org ============================================================*/ -@-moz-document url-prefix("https://support.mozilla.org") -{ +@include moz-document(url-prefix "https://support.mozilla.org") { /* Basic */ :root { --color-blue-06: var(--in-content-link-color) !important; diff --git a/src/contents/proton_contents/_about_cache.scss b/src/contents/proton_contents/_about_cache.scss index 8e31b35..b9bf04c 100644 --- a/src/contents/proton_contents/_about_cache.scss +++ b/src/contents/proton_contents/_about_cache.scss @@ -1,4 +1,4 @@ -@-moz-document url-prefix("about:cache") { +@include moz-document(url-prefix "about:cache") { table { padding: 0 !important; } diff --git a/src/contents/proton_contents/_about_checkerboard.scss b/src/contents/proton_contents/_about_checkerboard.scss index 8d7fd20..f4eac3c 100644 --- a/src/contents/proton_contents/_about_checkerboard.scss +++ b/src/contents/proton_contents/_about_checkerboard.scss @@ -1,4 +1,4 @@ -@-moz-document url-prefix("about:checkerboard") { +@include moz-document(url-prefix "about:checkerboard") { #canvas { border: 1px solid var(--in-content-border-color) !important; } diff --git a/src/contents/proton_contents/_about_memory.scss b/src/contents/proton_contents/_about_memory.scss index a741846..873dd0a 100644 --- a/src/contents/proton_contents/_about_memory.scss +++ b/src/contents/proton_contents/_about_memory.scss @@ -1,4 +1,4 @@ -@-moz-document url-prefix("about:memory") { +@include moz-document(url-prefix "about:memory") { .opsRow, .section { background-color: var(--in-content-box-background) !important; diff --git a/src/contents/proton_contents/_about_plugins.scss b/src/contents/proton_contents/_about_plugins.scss index a499ab8..1a98d11 100644 --- a/src/contents/proton_contents/_about_plugins.scss +++ b/src/contents/proton_contents/_about_plugins.scss @@ -1,4 +1,4 @@ -@-moz-document url-prefix("about:plugins") { +@include moz-document(url-prefix "about:plugins") { .notice { background: var(--in-content-box-background) !important; border: 1px solid var(--in-content-border-color) !important; diff --git a/src/contents/proton_contents/_directory_view.scss b/src/contents/proton_contents/_directory_view.scss index bbe5ba3..b8feb48 100644 --- a/src/contents/proton_contents/_directory_view.scss +++ b/src/contents/proton_contents/_directory_view.scss @@ -1,5 +1,7 @@ -@-moz-document url-prefix("about:sync-log"), - regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") { +@include moz-document( + url-prefix "about:sync-log", + regexp "^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$" +) { body { background-color: var(--in-content-box-background) !important; margin: 4em auto !important; /* Override to default */ diff --git a/src/contents/proton_contents/_field_border.scss b/src/contents/proton_contents/_field_border.scss index 3b60cc4..19044c0 100644 --- a/src/contents/proton_contents/_field_border.scss +++ b/src/contents/proton_contents/_field_border.scss @@ -1,4 +1,4 @@ -@-moz-document url-prefix("about:") { +@include moz-document(url-prefix "about:") { html|input:is([type="email"], [type="tel"], [type="text"], [type="password"], [type="url"], [type="number"]):not(#newtab-search-text):hover, html|textarea:hover, xul|search-textbox:hover { diff --git a/src/contents/proton_contents/_proton_commons.scss b/src/contents/proton_contents/_proton_commons.scss index 757bc58..9be371a 100644 --- a/src/contents/proton_contents/_proton_commons.scss +++ b/src/contents/proton_contents/_proton_commons.scss @@ -1,10 +1,12 @@ /*= abouts' common ===========================================================*/ -@-moz-document url-prefix("about:plugins"), - url-prefix("about:cache"), - url-prefix("about:checkerboard"), - url-prefix("about:sync-log"), - url-prefix("about:memory"), - regexp("^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$") { +@include moz-document( + url-prefix "about:plugins", + url-prefix "about:cache", + url-prefix "about:checkerboard", + url-prefix "about:sync-log", + url-prefix "about:memory", + regexp "^(((jar:)?file:\/\/\/)|(chrome:\/\/)).*\/$" +) { /* Base */ html, body { @@ -211,16 +213,20 @@ } } -@-moz-document url-prefix("about:plugins"), - url-prefix("about:cache"), - url-prefix("about:checkerboard") { +@include moz-document( + url-prefix "about:plugins", + url-prefix "about:cache", + url-prefix "about:checkerboard" +) { table { border: 1px solid var(--in-content-table-border-color) !important; border-radius: 0 !important; } } -@-moz-document url-prefix("about:cache"), - url-prefix("about:checkerboard") { +@include moz-document( + url-prefix "about:cache", + url-prefix "about:checkerboard" +) { th, td { border: 1px solid var(--in-content-table-border-color) !important; diff --git a/src/contents/proton_contents/_view_source.scss b/src/contents/proton_contents/_view_source.scss index 3b6845e..564de5e 100644 --- a/src/contents/proton_contents/_view_source.scss +++ b/src/contents/proton_contents/_view_source.scss @@ -1,4 +1,4 @@ -@-moz-document url-prefix("view-source") { +@include moz-document(url-prefix "view-source") { :root { background-color: var(--in-content-page-background) !important; /* Original: white */ color: var(--in-content-page-color) !important; /* Original: black */ diff --git a/src/decoration/_animate.scss b/src/decoration/_animate.scss index 07deccc..341206c 100644 --- a/src/decoration/_animate.scss +++ b/src/decoration/_animate.scss @@ -155,8 +155,7 @@ xul|search-textbox.tabsFilter, } /*- Expand - Synced Tabs ---------------------------------------------------*/ -@-moz-document url("chrome://browser/content/syncedtabs/sidebar.xhtml") -{ +@include moz-document(url "chrome://browser/content/syncedtabs/sidebar.xhtml") { .item-tabs-list { transition: transform 0.2s ease-out, opacity 0.2s ease-out; transform: translateY(0%); @@ -177,8 +176,7 @@ xul|search-textbox.tabsFilter, } /*- Arrow - Synced Tabs ----------------------------------------------------*/ -@-moz-document url("chrome://browser/content/syncedtabs/sidebar.xhtml") -{ +@include moz-document(url "chrome://browser/content/syncedtabs/sidebar.xhtml") { /* treechildren::-moz-tree-twisty: Can't apply */ #template-container .item.client { .item-twisty-container { diff --git a/src/leptonChrome.scss b/src/leptonChrome.scss index 6aa0c7f..000d72e 100644 --- a/src/leptonChrome.scss +++ b/src/leptonChrome.scss @@ -1,9 +1,10 @@ @use "utils/os" as *; @use "utils/option" as *; @use "utils/color_scheme" as *; -@use "utils/theme" as *; @use "utils/accent_color" as *; @use "utils/native_menu" as *; +@use "utils/moz_document" as *; +@use "utils/theme" as *; @use "utils/one_liner" as *; @use "utils/window_control" as *; @use "utils/has" as *; diff --git a/src/leptonContent.scss b/src/leptonContent.scss index 50af254..2242f48 100644 --- a/src/leptonContent.scss +++ b/src/leptonContent.scss @@ -3,6 +3,7 @@ @use "utils/color_scheme" as *; @use "utils/accent_color" as *; @use "utils/native_menu" as *; +@use "utils/moz_document" as *; @use "utils/proton_elements" as Proton; @use "sass:selector"; diff --git a/src/library/_chrome.scss b/src/library/_chrome.scss index 9679e20..e368152 100644 --- a/src/library/_chrome.scss +++ b/src/library/_chrome.scss @@ -1,7 +1,6 @@ @import "folder_icons"; -@-moz-document url("chrome://browser/content/places/places.xhtml") -{ +@include moz-document(url "chrome://browser/content/places/places.xhtml") { @include OS($linux) { @import "menubar"; } diff --git a/src/library/_contents.scss b/src/library/_contents.scss index 5987c71..22cee05 100644 --- a/src/library/_contents.scss +++ b/src/library/_contents.scss @@ -1,5 +1,4 @@ -@-moz-document url("chrome://browser/content/places/places.xhtml") -{ +@include moz-document(url "chrome://browser/content/places/places.xhtml") { /** Library - Icons Replace *************************************************/ @include Option("userChrome.icon.library") { @import "folder_icons"; diff --git a/src/tabbar/_multi_row.scss b/src/tabbar/_multi_row.scss index c29b7e5..7fe90cf 100644 --- a/src/tabbar/_multi_row.scss +++ b/src/tabbar/_multi_row.scss @@ -17,7 +17,7 @@ See the above repository for updates as well as full license text. */ padding-inline-start: 0px !important; } -@-moz-document url(chrome://browser/content/browser.xhtml) { +@include moz-document(url "chrome://browser/content/browser.xhtml") { #scrollbutton-up ~ spacer, #scrollbutton-up, #scrollbutton-down { diff --git a/src/theme/_fully_dark.scss b/src/theme/_fully_dark.scss index f505451..585cda4 100644 --- a/src/theme/_fully_dark.scss +++ b/src/theme/_fully_dark.scss @@ -7,8 +7,7 @@ browser[type="content"] > html { } /*= Notification =============================================================*/ -@-moz-document url("chrome://global/content/alerts/alert.xhtml") -{ +@include moz-document(url "chrome://global/content/alerts/alert.xhtml") { /* Color */ :root { --menu-color: #15141a; diff --git a/src/theme/proton_chrome/_cert.scss b/src/theme/proton_chrome/_cert.scss index 6e10d2a..5d3dee8 100644 --- a/src/theme/proton_chrome/_cert.scss +++ b/src/theme/proton_chrome/_cert.scss @@ -1,6 +1,5 @@ /*= Delete Cert ==============================================================*/ -@-moz-document url("chrome://pippki/content/deletecert.xhtml") -{ +@include moz-document(url "chrome://pippki/content/deletecert.xhtml") { #certlist { border: 1px solid var(--in-content-table-border-color) !important; border-radius: 4px !important; @@ -8,8 +7,7 @@ } /*= Cert Exception Dialog ====================================================*/ -@-moz-document url("chrome://pippki/content/exceptionDialog.xhtml") -{ +@include moz-document(url "chrome://pippki/content/exceptionDialog.xhtml") { #locationTextBox { appearance: none !important; border: 1px solid var(--in-content-box-border-color) !important; diff --git a/src/theme/proton_chrome/_library_popup.scss b/src/theme/proton_chrome/_library_popup.scss index f7e2aa6..53f079d 100644 --- a/src/theme/proton_chrome/_library_popup.scss +++ b/src/theme/proton_chrome/_library_popup.scss @@ -1,6 +1,5 @@ /*= Library Popup ============================================================*/ -@-moz-document url("chrome://browser/content/places/places.xhtml") -{ +@include moz-document(url "chrome://browser/content/places/places.xhtml") { @include OS($linux) { @import "../../library/proton"; } diff --git a/src/theme/proton_chrome/_page_info.scss b/src/theme/proton_chrome/_page_info.scss index fe10741..26b5bc6 100644 --- a/src/theme/proton_chrome/_page_info.scss +++ b/src/theme/proton_chrome/_page_info.scss @@ -1,6 +1,5 @@ /*= Page Info ================================================================*/ -@-moz-document url("chrome://browser/content/pageinfo/pageInfo.xhtml") -{ +@include moz-document(url "chrome://browser/content/pageinfo/pageInfo.xhtml") { :root { --in-content-border-color: color-mix(in srgb, currentColor 41%, transparent) !important; } diff --git a/src/theme/proton_chrome/_proton_commons.scss b/src/theme/proton_chrome/_proton_commons.scss index d5688bd..e40c4b4 100644 --- a/src/theme/proton_chrome/_proton_commons.scss +++ b/src/theme/proton_chrome/_proton_commons.scss @@ -1,12 +1,13 @@ /*= Proton Commons ===========================================================*/ -@-moz-document url("chrome://global/content/commonDialog.xhtml"), - url("chrome://pippki/content/editcacert.xhtml"), - url("chrome://pippki/content/deletecert.xhtml"), - url("chrome://pippki/content/exceptionDialog.xhtml"), - url("chrome://mozapps/content/downloads/unknownContentType.xhtml"), - url("chrome://global/content/appPicker.xhtml"), - url("chrome://browser/content/pageinfo/pageInfo.xhtml") -{ +@include moz-document( + url "chrome://global/content/commonDialog.xhtml", + url "chrome://pippki/content/editcacert.xhtml", + url "chrome://pippki/content/deletecert.xhtml", + url "chrome://pippki/content/exceptionDialog.xhtml", + url "chrome://mozapps/content/downloads/unknownContentType.xhtml", + url "chrome://global/content/appPicker.xhtml", + url "chrome://browser/content/pageinfo/pageInfo.xhtml" +) { /*- Overwrite --------------------------------------------------------------*/ @include Dark { :root { diff --git a/src/utils/_moz_document.scss b/src/utils/_moz_document.scss new file mode 100644 index 0000000..002b0df --- /dev/null +++ b/src/utils/_moz_document.scss @@ -0,0 +1,10 @@ +@mixin moz-document($urlList...) { + $result: (); + @each $prefix, $urlPattern in $urlList { + $result: append($result, #{$prefix}("#{$urlPattern}"), $separator: comma); + } + + @#{-moz-document} #{$result} { + @content; + } +} From 6eb17094d48ae3cc0e515d147dee9c221eff16ff Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 24 Dec 2022 07:00:20 +0900 Subject: [PATCH 80/88] Doc: Restrictions - SCSS warning --- docs/Restrictions.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/docs/Restrictions.md b/docs/Restrictions.md index 3a678f2..6baa6a9 100644 --- a/docs/Restrictions.md +++ b/docs/Restrictions.md @@ -10,6 +10,7 @@ * [`-moz-accent-color`](#-moz-accent-color) * [Fork Browsers](#fork-browsers) * [Add-ons](#add-ons) + * [SCSS](#scss) - [Internals](#internals) * [CSS Loading Order](#css-loading-order) * [DOM structure cannot be modified](#dom-structure-cannot-be-modified) @@ -126,6 +127,14 @@ Legacy addons can be loaded by [Auto config's feature](./Preference.md#auto-conf List of legacy addons supported by this project: - [Tab Mix Plus](https://github.com/onemen/TabMixPlus) +### SCSS + +Due to [various compatibility](#firefox-version) and [option dependency](https://github.com/black7375/Firefox-UI-Fix/wiki/Options) requirements, we are using a CSS preprocessor, [SCSS](https://sass-lang.com/). + +[`-moz-document`](https://developer.mozilla.org/en-US/docs/Web/CSS/@document) has been [deprecated in SCSS](https://sass-lang.com/documentation/breaking-changes/moz-document), and displays a lot of warnings. + +Unlike normal cases, this project works because it is [at the UA sheet level](https://bugzilla.mozilla.org/show_bug.cgi?id=1035091), and we have to [hide warnings](https://github.com/black7375/Firefox-UI-Fix/commit/300d3d9c77108520c3757a8898819d8af6a00c62) to show other critical errors. + ## Internals ### CSS Loading Order User CSS (`userChrome.css`, `userContent.css`) is usually loaded first. From d0d545a50902293565bcdba7b9e9311e3ae7a9df Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 25 Dec 2022 10:01:16 +0900 Subject: [PATCH 81/88] Add: Option - `and` --- __tests__/option.test.scss | 100 ++++++++++++++++++++++++++++++++++++- css/leptonChrome.css | 6 ++- css/leptonContent.css | 3 +- src/utils/_option.scss | 49 ++++++++++++++++-- 4 files changed, 151 insertions(+), 7 deletions(-) diff --git a/__tests__/option.test.scss b/__tests__/option.test.scss index 5cf2a6d..c86389f 100644 --- a/__tests__/option.test.scss +++ b/__tests__/option.test.scss @@ -32,6 +32,48 @@ } } } + + @include test("simple `and`") { + @include assert { + @include output { + @include option.Option("userChrome.tab.photon" "userChrome.padding.photon") { + @include example; + } + } + @include expect { + @supports (-moz-bool-pref("userChrome.tab.photon") and -moz-bool-pref("userChrome.padding.photon")) { + @include example; + } + } + } + } + + @include test("multiple `and`") { + @include assert { + @include output { + @include option.Option("userChrome.tab.photon" "userChrome.padding.photon", "userChrome.tab.box_shadow") { + @include example; + } + @include option.Option("userChrome.tab.photon" "userChrome.padding.photon", "userChrome.tab.box_shadow", "userChrome.icon.panel_full") { + @include example; + } + @include option.Option("userChrome.tab.photon" "userChrome.padding.photon", "userChrome.tab.box_shadow" "userChrome.icon.panel_full") { + @include example; + } + } + @include expect { + @supports (-moz-bool-pref("userChrome.tab.photon") and -moz-bool-pref("userChrome.padding.photon")) or -moz-bool-pref("userChrome.tab.box_shadow") { + @include example; + } + @supports (-moz-bool-pref("userChrome.tab.photon") and -moz-bool-pref("userChrome.padding.photon")) or -moz-bool-pref("userChrome.tab.box_shadow") or -moz-bool-pref("userChrome.icon.panel_full") { + @include example; + } + @supports (-moz-bool-pref("userChrome.tab.photon") and -moz-bool-pref("userChrome.padding.photon")) or (-moz-bool-pref("userChrome.tab.box_shadow") and -moz-bool-pref("userChrome.icon.panel_full")) { + @include example; + } + } + } + } } @include test-module("If not exist pref [mx]") { @@ -50,5 +92,61 @@ } } - // Need multiple test + @include test("multiple") { + @include assert { + @include output { + @include option.NotOption("userChrome.tab.photon", "userChrome.padding.photon") { + @include example; + } + } + @include expect { + @supports (not -moz-bool-pref("userChrome.tab.photon")) or (not -moz-bool-pref("userChrome.padding.photon")) { + @include example; + } + } + } + } + + // @include test("simple `and`") { + // @include assert { + // @include output { + // @include option.NotOption("userChrome.tab.photon" "userChrome.padding.photon") { + // @include example; + // } + // } + // @include expect { + // // top level parens + // @supports ((not -moz-bool-pref("userChrome.tab.photon")) and (not -moz-bool-pref("userChrome.padding.photon"))) { + // @include example; + // } + // } + // } + // } + + @include test("multiple `and`") { + @include assert { + @include output { + @include option.NotOption("userChrome.tab.photon" "userChrome.padding.photon", "userChrome.tab.box_shadow") { + @include example; + } + @include option.NotOption("userChrome.tab.photon" "userChrome.padding.photon", "userChrome.tab.box_shadow", "userChrome.icon.panel_full") { + @include example; + } + @include option.NotOption("userChrome.tab.photon" "userChrome.padding.photon", "userChrome.tab.box_shadow" "userChrome.icon.panel_full") { + @include example; + } + } + @include expect { + @supports ((not -moz-bool-pref("userChrome.tab.photon")) and (not -moz-bool-pref("userChrome.padding.photon"))) or (not -moz-bool-pref("userChrome.tab.box_shadow")) { + @include example; + } + @supports ((not -moz-bool-pref("userChrome.tab.photon")) and (not -moz-bool-pref("userChrome.padding.photon"))) or (not -moz-bool-pref("userChrome.tab.box_shadow")) or (not -moz-bool-pref("userChrome.icon.panel_full")) { + @include example; + } + @supports ((not -moz-bool-pref("userChrome.tab.photon")) and (not -moz-bool-pref("userChrome.padding.photon"))) or ((not -moz-bool-pref("userChrome.tab.box_shadow")) and (not -moz-bool-pref("userChrome.icon.panel_full"))) { + @include example; + } + } + } + } } diff --git a/css/leptonChrome.css b/css/leptonChrome.css index af1d133..5f0a15b 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4402,7 +4402,8 @@ } @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { @media screen and (max-width: 1100px) { - @supports not -moz-bool-pref("userChrome.tabbar.on_bottom") or not -moz-bool-pref("userChrome.hidden.tabbar") { + @supports (not -moz-bool-pref("userChrome.tabbar.on_bottom")) or + (not -moz-bool-pref("userChrome.hidden.tabbar")) { :root:is([tabsintitlebar], [sizemode="fullscreen"]) { --uc-window-drag-space-pre: 0px; --uc-window-control-space: 0px; @@ -7825,7 +7826,8 @@ display: block !important; visibility: visible !important; } -} /*= Url View - Move icon to left =============================================*/ +} +/*= Url View - Move icon to left =============================================*/ @supports -moz-bool-pref("userChrome.urlView.move_icon_to_left") { .urlbarView-type-icon { min-width: 16px !important; diff --git a/css/leptonContent.css b/css/leptonContent.css index 3c89e7e..6ad5f53 100644 --- a/css/leptonContent.css +++ b/css/leptonContent.css @@ -242,7 +242,8 @@ } } } - } /** Activity Stream - Menu Icons ********************************************/ + } + /** Activity Stream - Menu Icons ********************************************/ @supports -moz-bool-pref("userChrome.icon.context_menu") { .context-menu-list .context-menu-item button { padding-inline-start: 0 !important; diff --git a/src/utils/_option.scss b/src/utils/_option.scss index b23fac6..cab454e 100644 --- a/src/utils/_option.scss +++ b/src/utils/_option.scss @@ -1,13 +1,56 @@ -@use "each"; +@function _prefix($separator, $i) { + @if $i != 1 { + @return " " + $separator + " "; + } + @return ""; +} +@function _pref($option) { + @return "-moz-bool-pref(\"#{$option}\")"; +} +@function _not($str, $positive) { + @return if($positive, $str, "(not " + $str + ")"); +} + +@function _getOption($optionNames, $positive: true) { + $result: ""; + @for $i from 1 through length($optionNames) { + $option: nth($optionNames, $i); + $separator: if( + list-separator($optionNames) == "comma", "or", if( + list-separator($optionNames) == "space", "and", null + ) + ); + $result: $result + _prefix($separator, $i); + + @if type-of($option) == "list" { + $result: $result + "(" + _getOption($option, $positive) + ")"; + } + @else { + $result: $result + _not(_pref($option), $positive); + } + } + @return $result; +} +@function _optionWrapper($optionNames, $positive: true) { + // Test warning for top level `not` + @if length($optionNames) == 1 { + $option: nth($optionNames, 1); + @if not (type-of($option) == "list") { + $option: _pref($option); + @return if($positive, $option, "not " + $option); + } + } + @return _getOption($optionNames, $positive); +} @mixin Option($optionNames...) { - @include each.AtEach("supports", $optionNames, "-moz-bool-pref", ("separator": " or ", "quoted": true)) { + @supports #{_optionWrapper($optionNames)} { @content; } } @mixin NotOption($optionNames...) { - @include each.AtEach("supports", $optionNames, "not -moz-bool-pref", ("separator": " or ", "quoted": true)) { + @supports #{_optionWrapper($optionNames, false)} { @content; } } From 6c5124f15a1ab235afdccc447613a2b9dac3dc78 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 26 Dec 2022 01:47:34 +0900 Subject: [PATCH 82/88] Fix: Padding - Compact mode bookmarkbar #539 --- css/leptonChrome.css | 1 + src/padding/_bookmarkbar.scss | 1 + 2 files changed, 2 insertions(+) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index fb40810..0f92761 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -3475,6 +3475,7 @@ @supports -moz-bool-pref("userChrome.padding.bookmarkbar") { :root[uidensity="compact"] #PersonalToolbar toolbarbutton { margin-top: 0px !important; /* Original: 2px */ + margin-bottom: 1px !important; } } /*= Info Bar - Reduce Padding ================================================*/ diff --git a/src/padding/_bookmarkbar.scss b/src/padding/_bookmarkbar.scss index 39e4d5b..aecac18 100644 --- a/src/padding/_bookmarkbar.scss +++ b/src/padding/_bookmarkbar.scss @@ -1,3 +1,4 @@ :root[uidensity="compact"] #PersonalToolbar toolbarbutton { margin-top: 0px !important; /* Original: 2px */ + margin-bottom: 1px !important; } From af1f03d2d7613064b546ff5ae0cc0f8a3602467c Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 27 Dec 2022 11:20:19 +0900 Subject: [PATCH 83/88] Fix: Combined - Backbutton normal --- css/leptonChrome.css | 11 ++++++++++- src/combined/_back_forward_button.scss | 6 +++++- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 5f0a15b..65f5f6d 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -8042,7 +8042,16 @@ } } @supports -moz-bool-pref("userChrome.combined.nav_button") or -moz-bool-pref("userChrome.combined.urlbar.nav_button") { - @supports not -moz-bool-pref("userChrome.combined.sub_button.as_normal") { + @supports -moz-bool-pref("userChrome.combined.urlbar.nav_button") or + ( + not + ( + -moz-bool-pref("userChrome.combined.sub_button.as_normal") and -moz-bool-pref( + "userChrome.combined.nav_button" + ) + and -moz-bool-pref("userChrome.combined.urlbar.home_button") + ) + ) { #nav-bar-customization-target > #forward-button { --uc-forward-button-margin: calc(-1 * var(--uc-toolbarbutton-boundary) + 1px); z-index: 2; diff --git a/src/combined/_back_forward_button.scss b/src/combined/_back_forward_button.scss index 530cfd4..e237209 100644 --- a/src/combined/_back_forward_button.scss +++ b/src/combined/_back_forward_button.scss @@ -39,7 +39,11 @@ //------------------------------------------------------------------------------ #nav-bar-customization-target > { - @include NotOption("userChrome.combined.sub_button.as_normal") { + @supports -moz-bool-pref("userChrome.combined.urlbar.nav_button") or + (not (-moz-bool-pref("userChrome.combined.sub_button.as_normal") and + -moz-bool-pref("userChrome.combined.nav_button") and + -moz-bool-pref("userChrome.combined.urlbar.home_button") + )) { #forward-button { --uc-forward-button-margin: calc(-1 * var(--uc-toolbarbutton-boundary) + 1px); From 903542967d5c3c03014717d71e72190893c9cf0f Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Wed, 28 Dec 2022 20:42:19 +0900 Subject: [PATCH 84/88] Fix: Compatibility - Win10 nativemenu at bookmarkmenu #541 --- css/leptonChrome.css | 28 ++++++++++++++++------------ src/compatibility/_os.scss | 17 ++++++++++------- 2 files changed, 26 insertions(+), 19 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 0f92761..0bd8b32 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -271,13 +271,13 @@ } } @media (-moz-os-version: windows-win7), (-moz-platform: windows-win7) { - menupopup:not(#BMB_bookmarksPopup) menu[_moz-menuactive="true"], - menupopup:not(#BMB_bookmarksPopup) menuitem[_moz-menuactive="true"] { + menu[_moz-menuactive="true"], + menuitem[_moz-menuactive="true"] { background-color: color-mix(in srgb, -moz-menuhover 5%, transparent) !important; border-color: color-mix(in srgb, -moz-menuhover 60%, transparent) !important; } - menupopup:not(#BMB_bookmarksPopup) menu[_moz-menuactive="true"][disabled="true"], - menupopup:not(#BMB_bookmarksPopup) menuitem[_moz-menuactive="true"][disabled="true"] { + menu[_moz-menuactive="true"][disabled="true"], + menuitem[_moz-menuactive="true"][disabled="true"] { background-color: color-mix(in srgb, currentColor 5%, transparent) !important; border-color: color-mix(in srgb, currentColor 60%, transparent) !important; } @@ -293,13 +293,13 @@ } } @media (-moz-os-version: windows-win8), (-moz-platform: windows-win8) { - menupopup:not(#BMB_bookmarksPopup) menu[_moz-menuactive="true"], - menupopup:not(#BMB_bookmarksPopup) menuitem[_moz-menuactive="true"] { + menu[_moz-menuactive="true"], + menuitem[_moz-menuactive="true"] { background-color: color-mix(in srgb, -moz-menuhover 17%, transparent) !important; border-color: color-mix(in srgb, -moz-menuhover 80%, transparent) !important; } - menupopup:not(#BMB_bookmarksPopup) menu[_moz-menuactive="true"][disabled="true"], - menupopup:not(#BMB_bookmarksPopup) menuitem[_moz-menuactive="true"][disabled="true"] { + menu[_moz-menuactive="true"][disabled="true"], + menuitem[_moz-menuactive="true"][disabled="true"] { background-color: color-mix(in srgb, currentColor 17%, transparent) !important; border-color: color-mix(in srgb, currentColor 80%, transparent) !important; } @@ -307,13 +307,17 @@ /*= Windows 10 - Native Menu Active Color =====================================*/ @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { @media not (-moz-windows-non-native-menus) { - menu[_moz-menuactive="true"], - menuitem[_moz-menuactive="true"] { + menupopup:is(#historyMenuPopup, #bookmarksMenuPopup) menu[_moz-menuactive="true"], + menupopup:not([placespopup="true"]) menu[_moz-menuactive="true"], + menupopup:is(#historyMenuPopup, #bookmarksMenuPopup) menuitem[_moz-menuactive="true"], + menupopup:not([placespopup="true"]) menuitem[_moz-menuactive="true"] { background-color: #91c9f7 !important; border-color: transparent !important; } - menu[_moz-menuactive="true"][disabled="true"], - menuitem[_moz-menuactive="true"][disabled="true"] { + menupopup:is(#historyMenuPopup, #bookmarksMenuPopup) menu[_moz-menuactive="true"][disabled="true"], + menupopup:not([placespopup="true"]) menu[_moz-menuactive="true"][disabled="true"], + menupopup:is(#historyMenuPopup, #bookmarksMenuPopup) menuitem[_moz-menuactive="true"][disabled="true"], + menupopup:not([placespopup="true"]) menuitem[_moz-menuactive="true"][disabled="true"] { background-color: color-mix(in srgb, currentColor 9%, transparent) !important; border-color: transparent !important; } diff --git a/src/compatibility/_os.scss b/src/compatibility/_os.scss index c78975b..64edc40 100644 --- a/src/compatibility/_os.scss +++ b/src/compatibility/_os.scss @@ -89,8 +89,8 @@ //-- Mixin --------------------------------------------------------------------- @mixin _os_menuEmulate($bgRate, $bdRate) { - menupopup:not(#BMB_bookmarksPopup) menu[_moz-menuactive="true"], - menupopup:not(#BMB_bookmarksPopup) menuitem[_moz-menuactive="true"] { + menu[_moz-menuactive="true"], + menuitem[_moz-menuactive="true"] { background-color: color-mix(in srgb, -moz-menuhover $bgRate, transparent) !important; border-color: color-mix(in srgb, -moz-menuhover $bdRate, transparent) !important; @@ -127,12 +127,15 @@ @include Win10_NativeMenu() { menu[_moz-menuactive="true"], menuitem[_moz-menuactive="true"] { - background-color: #91c9f7 !important; // color-mix(in srgb, -moz-menuhover 40%, transparent) - border-color: transparent !important; - - &[disabled="true"] { - background-color: color-mix(in srgb, currentColor 9%, transparent) !important; + menupopup:is(#historyMenuPopup, #bookmarksMenuPopup) &, + menupopup:not([placespopup="true"]) & { + background-color: #91c9f7 !important; // color-mix(in srgb, -moz-menuhover 40%, transparent) border-color: transparent !important; + + &[disabled="true"] { + background-color: color-mix(in srgb, currentColor 9%, transparent) !important; + border-color: transparent !important; + } } } } From ea9525eb452203f5fed436ccb6336e970b990f85 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 30 Dec 2022 11:03:40 +0900 Subject: [PATCH 85/88] Fix: CSS - Validate --- css/leptonChrome.css | 5 ++--- src/others/_findbar_floating_on_top.scss | 1 - src/padding/_infobar.scss | 2 +- src/tab/selected_tab/_bottom_rounded_corner_others.scss | 2 +- 4 files changed, 4 insertions(+), 6 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 65f5f6d..ef297af 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -3608,7 +3608,7 @@ display: block; width: 2px; position: absolute; - background-image: linear-gradient(0, #9059ff 0%, #ff4aa2 52.08%, #ffbd4f 100%); + background-image: linear-gradient(0deg, #9059ff 0%, #ff4aa2 52.08%, #ffbd4f 100%); top: 0; inset-inline-start: 0; height: 100%; @@ -6410,7 +6410,7 @@ margin-left: var(--uc-tab-corner-half-size) !important; } .tabbrowser-tab[last-visible-tab] { - margin-right: vart(--uc-tab-corner-half-size) !important; + margin-right: var(--uc-tab-corner-half-size) !important; } } } @@ -8610,7 +8610,6 @@ margin-inline: 5px; } .findbar-closebutton { - box-sizing: padding-box; width: 30px !important; /* Original: 24px */ margin: 0 !important; border-width: 0 1px 1px 0px; diff --git a/src/others/_findbar_floating_on_top.scss b/src/others/_findbar_floating_on_top.scss index 7ee2440..69a033c 100644 --- a/src/others/_findbar_floating_on_top.scss +++ b/src/others/_findbar_floating_on_top.scss @@ -62,7 +62,6 @@ findbar { } .findbar-closebutton { - box-sizing: padding-box; width: 30px !important; /* Original: 24px */ margin: 0 !important; border-width: 0 1px 1px 0px; diff --git a/src/padding/_infobar.scss b/src/padding/_infobar.scss index be1e043..81f9e10 100644 --- a/src/padding/_infobar.scss +++ b/src/padding/_infobar.scss @@ -45,7 +45,7 @@ display: block; width: 2px; position: absolute; - background-image: linear-gradient(0, #9059ff 0%, #ff4aa2 52.08%, #ffbd4f 100%); + background-image: linear-gradient(0deg, #9059ff 0%, #ff4aa2 52.08%, #ffbd4f 100%); top: 0; inset-inline-start: 0; height: 100%; diff --git a/src/tab/selected_tab/_bottom_rounded_corner_others.scss b/src/tab/selected_tab/_bottom_rounded_corner_others.scss index dff4907..8e46083 100644 --- a/src/tab/selected_tab/_bottom_rounded_corner_others.scss +++ b/src/tab/selected_tab/_bottom_rounded_corner_others.scss @@ -223,5 +223,5 @@ } } .tabbrowser-tab[last-visible-tab] { - margin-right: vart(--uc-tab-corner-half-size) !important; + margin-right: var(--uc-tab-corner-half-size) !important; } From c8c75892db84b25a1848b638e00df661fd753b06 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 31 Dec 2022 03:01:11 +0900 Subject: [PATCH 86/88] Add: Hidden - titlebar container #550 --- css/leptonChrome.css | 1485 ++++++++++++++++++++------------------- src/hidden/_index.scss | 6 + src/tabbar/_layout.scss | 40 +- user.js | 1 + 4 files changed, 777 insertions(+), 755 deletions(-) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index ef297af..5042909 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -4481,581 +4481,121 @@ @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") 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. */ - /* Titlebar Button Box */ - :root { - --uc-titlebar-padding: 0px; - } - #navigator-toolbox { - padding-top: var(--uc-titlebar-padding) !important; - } - @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { - @supports -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") { - #navigator-toolbox { - padding-top: calc( - max(var(--uc-menubar-height), var(--uc-menubar-height-default)) + var(--uc-titlebar-padding) - ) !important; - } - } - } - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, - #TabsToolbar > .titlebar-buttonbox-container { - position: fixed; - display: block; - top: 0; - right: 0; - z-index: 1; - } - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container { - height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); - } - @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { - #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { - stroke: var(--toolbar-color, currentColor) !important; - } - } - .titlebar-buttonbox-container > .titlebar-buttonbox { - height: 100%; - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - .titlebar-buttonbox-container > .titlebar-buttonbox { - margin-block: 10px; - } - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - .titlebar-buttonbox-container { - left: 0; - right: unset !important; - } - } - @media (-moz-gtk-csd-available) { - @media (-moz-gtk-csd-reversed-placement) { - .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; - } - :root[sizemode="maximized"][tabsintitlebar] #navigator-toolbox-background { - margin-top: calc(-1 * var(--uc-titlebar-padding)); - } - :root[sizemode="normal"][tabsintitlebar] #titlebar, - :root[sizemode="maximized"][tabsintitlebar] #titlebar { - appearance: none !important; - } - .browser-toolbar:not(.titlebar-color) { - background-clip: border-box !important; - } - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - #toolbar-menubar:not([autohide="true"]) { - visibility: visible !important; - height: 0; - } - } - @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; - } - } - @supports -moz-bool-pref("browser.fullscreen.autohide") { - :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { - 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"]) - + #TabsToolbar - > .titlebar-buttonbox-container { - display: block !important; - } - @supports not -moz-bool-pref("userChrome.hidden.tabbar") { - :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { - visibility: hidden; - } - } - } - } - @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. */ - /* Titlebar Button Box */ - :root { - --uc-titlebar-padding: 0px; - } - #navigator-toolbox { - padding-top: var(--uc-titlebar-padding) !important; - } - @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { - @supports -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") { - #navigator-toolbox { - padding-top: calc( - max(var(--uc-menubar-height), var(--uc-menubar-height-default)) + var(--uc-titlebar-padding) - ) !important; - } - } - } - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, - #TabsToolbar > .titlebar-buttonbox-container { - position: fixed; - display: block; - top: 0; - right: 0; - z-index: 1; - } - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container { - height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); - } - @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { - #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { - stroke: var(--toolbar-color, currentColor) !important; - } - } - .titlebar-buttonbox-container > .titlebar-buttonbox { - height: 100%; - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - .titlebar-buttonbox-container > .titlebar-buttonbox { - margin-block: 10px; - } - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - .titlebar-buttonbox-container { - left: 0; - right: unset !important; - } - } - @media (-moz-gtk-csd-available) { - @media (-moz-gtk-csd-reversed-placement) { - .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; - } - :root[sizemode="maximized"][tabsintitlebar] #navigator-toolbox-background { - margin-top: calc(-1 * var(--uc-titlebar-padding)); - } - :root[sizemode="normal"][tabsintitlebar] #titlebar, - :root[sizemode="maximized"][tabsintitlebar] #titlebar { - appearance: none !important; - } - .browser-toolbar:not(.titlebar-color) { - background-clip: border-box !important; - } - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - #toolbar-menubar:not([autohide="true"]) { - visibility: visible !important; - height: 0; - } - } - @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; - } - } - @supports -moz-bool-pref("browser.fullscreen.autohide") { - :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { - 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"]) - + #TabsToolbar - > .titlebar-buttonbox-container { - display: block !important; - } - @supports not -moz-bool-pref("userChrome.hidden.tabbar") { - :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { - visibility: hidden; - } - } - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - /*= 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. */ - /* Titlebar Button Box */ - :root { - --uc-titlebar-padding: 0px; - } - #navigator-toolbox { - padding-top: var(--uc-titlebar-padding) !important; - } - @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { - @supports -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") { - #navigator-toolbox { - padding-top: calc( - max(var(--uc-menubar-height), var(--uc-menubar-height-default)) + var(--uc-titlebar-padding) - ) !important; - } - } - } - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, - #TabsToolbar > .titlebar-buttonbox-container { - position: fixed; - display: block; - top: 0; - right: 0; - z-index: 1; - } - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container { - height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); - } - @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { - #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { - stroke: var(--toolbar-color, currentColor) !important; - } - } - .titlebar-buttonbox-container > .titlebar-buttonbox { - height: 100%; - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - .titlebar-buttonbox-container > .titlebar-buttonbox { - margin-block: 10px; - } - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - .titlebar-buttonbox-container { - left: 0; - right: unset !important; - } - } - @media (-moz-gtk-csd-available) { - @media (-moz-gtk-csd-reversed-placement) { - .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; - } - :root[sizemode="maximized"][tabsintitlebar] #navigator-toolbox-background { - margin-top: calc(-1 * var(--uc-titlebar-padding)); - } - :root[sizemode="normal"][tabsintitlebar] #titlebar, - :root[sizemode="maximized"][tabsintitlebar] #titlebar { - appearance: none !important; - } - .browser-toolbar:not(.titlebar-color) { - background-clip: border-box !important; - } - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - #toolbar-menubar:not([autohide="true"]) { - visibility: visible !important; - height: 0; - } - } - @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; - } - } - @supports -moz-bool-pref("browser.fullscreen.autohide") { - :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { - 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"]) - + #TabsToolbar - > .titlebar-buttonbox-container { - display: block !important; - } - @supports not -moz-bool-pref("userChrome.hidden.tabbar") { - :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { - visibility: hidden; - } - } - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @supports not -moz-bool-pref("userChrome.hidden.titlebar_container") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { @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 - See the above repository for updates as well as full license text. */ - /* Titlebar Button Box */ - :root { - --uc-titlebar-padding: 0px; - } - #navigator-toolbox { - padding-top: var(--uc-titlebar-padding) !important; - } - @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { - @supports -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") { - #navigator-toolbox { - padding-top: calc( - max(var(--uc-menubar-height), var(--uc-menubar-height-default)) + var(--uc-titlebar-padding) - ) !important; - } + /*= 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. */ + /* Titlebar Button Box */ + :root { + --uc-titlebar-padding: 0px; + } + #navigator-toolbox { + padding-top: var(--uc-titlebar-padding) !important; + } + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") { + #navigator-toolbox { + padding-top: calc( + max(var(--uc-menubar-height), var(--uc-menubar-height-default)) + var(--uc-titlebar-padding) + ) !important; } } - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, - #TabsToolbar > .titlebar-buttonbox-container { - position: fixed; - display: block; - top: 0; - right: 0; - z-index: 1; - } - #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container { - height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); - } - @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { - #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { - stroke: var(--toolbar-color, currentColor) !important; - } + } + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, + #TabsToolbar > .titlebar-buttonbox-container { + position: fixed; + display: block; + top: 0; + right: 0; + z-index: 1; + } + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container { + height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); + } + @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { + #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { + stroke: var(--toolbar-color, currentColor) !important; } + } + .titlebar-buttonbox-container > .titlebar-buttonbox { + height: 100%; + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { .titlebar-buttonbox-container > .titlebar-buttonbox { - height: 100%; + margin-block: 10px; } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - .titlebar-buttonbox-container > .titlebar-buttonbox { - margin-block: 10px; - } + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + .titlebar-buttonbox-container { + left: 0; + right: unset !important; } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + } + @media (-moz-gtk-csd-available) { + @media (-moz-gtk-csd-reversed-placement) { .titlebar-buttonbox-container { left: 0; right: unset !important; } } - @media (-moz-gtk-csd-available) { - @media screen and (max-width: 1100px) and (-moz-gtk-csd-reversed-placement) { - .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; } - @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; - } - :root[sizemode="maximized"][tabsintitlebar] #navigator-toolbox-background { - margin-top: calc(-1 * var(--uc-titlebar-padding)); - } - :root[sizemode="normal"][tabsintitlebar] #titlebar, - :root[sizemode="maximized"][tabsintitlebar] #titlebar { - appearance: none !important; - } - .browser-toolbar:not(.titlebar-color) { - background-clip: border-box !important; - } + :root[sizemode="maximized"][tabsintitlebar] #navigator-toolbox-background { + margin-top: calc(-1 * var(--uc-titlebar-padding)); } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - #toolbar-menubar:not([autohide="true"]) { - visibility: visible !important; - height: 0; - } + :root[sizemode="normal"][tabsintitlebar] #titlebar, + :root[sizemode="maximized"][tabsintitlebar] #titlebar { + appearance: none !important; } - @supports not -moz-bool-pref("userChrome.hidden.tabbar") { + .browser-toolbar:not(.titlebar-color) { + background-clip: border-box !important; + } + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + #toolbar-menubar:not([autohide="true"]) { + visibility: visible !important; + height: 0; + } + } + @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") { - #toolbar-menubar[inactive] > .titlebar-buttonbox-container { + } + @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; } - @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 Activated Menubar */ } - @media screen and (max-width: 1100px) and (prefers-reduced-motion: no-preference) { + @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; @@ -5066,42 +4606,37 @@ transition-delay: 0s !important; } } - @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; - } + @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; - min-height: 0 !important; - max-height: 0 !important; - } - :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { - visibility: collapse !important; - } + @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; } } - @media screen and (max-width: 1100px) { - :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) - #toolbar-menubar:not([autohide="true"]) - + #TabsToolbar - > .titlebar-buttonbox-container { - display: block !important; - } + /* At Activated Menubar */ + :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; - } + @supports not -moz-bool-pref("userChrome.hidden.tabbar") { + :root:not([chromehidden~="menubar"]) #toolbar-menubar:not([autohide="true"]) .titlebar-buttonbox-container { + visibility: hidden; } } } - @media screen and (min-width: 1100px) { + } + @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 @@ -5153,7 +4688,7 @@ } } @media (-moz-gtk-csd-available) { - @media screen and (min-width: 1100px) and (-moz-gtk-csd-reversed-placement) { + @media (-moz-gtk-csd-reversed-placement) { .titlebar-buttonbox-container { left: 0; right: unset !important; @@ -5214,7 +4749,7 @@ } } } - @media screen and (min-width: 1100px) and (prefers-reduced-motion: no-preference) { + @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; @@ -5304,7 +4839,7 @@ } } @media (-moz-gtk-csd-available) { - @media screen and (min-width: 1100px) and (-moz-gtk-csd-reversed-placement) { + @media (-moz-gtk-csd-reversed-placement) { .titlebar-buttonbox-container { left: 0; right: unset !important; @@ -5365,7 +4900,7 @@ } } } - @media screen and (min-width: 1100px) and (prefers-reduced-motion: no-preference) { + @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; @@ -5405,78 +4940,493 @@ } } } - } - } - @supports not -moz-bool-pref("userChrome.navbar.as_sidebar") { - /*= Navbar - Padding for window controls =====================================*/ - /* Customized https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/window_control_placeholder_support.css */ - #nav-bar { - border-inline-style: solid !important; - border-inline-color: transparent; - } - @media (-moz-os-version: windows-win7), - (-moz-platform: windows-win7), - (-moz-os-version: windows-win8), - (-moz-platform: windows-win8), - (-moz-os-version: windows-win10), - (-moz-platform: windows-win10) { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { - #nav-bar { - border-inline-start-width: var(--uc-window-drag-space-pre); - border-inline-end-width: var(--uc-window-control-space); - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { - #nav-bar { - border-inline-start-width: var(--uc-window-drag-space-pre); - border-inline-end-width: var(--uc-window-control-space); - } - } - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { - @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { - @media screen and (max-width: 1100px) { - #nav-bar { - border-inline-start-width: var(--uc-window-drag-space-pre); - border-inline-end-width: var(--uc-window-control-space); - } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @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 + See the above repository for updates as well as full license text. */ + /* Titlebar Button Box */ + :root { + --uc-titlebar-padding: 0px; } - } - } - } - @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; - } + #navigator-toolbox { + padding-top: var(--uc-titlebar-padding) !important; } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #nav-bar { - margin-inline-end: var(--uc-window-control-space) !important; - } - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @media screen and (min-width: 1100px) { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #nav-bar { - margin-inline-start: var(--uc-window-drag-space-pre) !important; - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #nav-bar { - margin-inline-end: var(--uc-window-control-space) !important; + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") { + #navigator-toolbox { + padding-top: calc( + max(var(--uc-menubar-height), var(--uc-menubar-height-default)) + var(--uc-titlebar-padding) + ) !important; } } } + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, + #TabsToolbar > .titlebar-buttonbox-container { + position: fixed; + display: block; + top: 0; + right: 0; + z-index: 1; + } + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container { + height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); + } + @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { + #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { + stroke: var(--toolbar-color, currentColor) !important; + } + } + .titlebar-buttonbox-container > .titlebar-buttonbox { + height: 100%; + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + .titlebar-buttonbox-container > .titlebar-buttonbox { + margin-block: 10px; + } + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + @media (-moz-gtk-csd-available) { + @media screen and (max-width: 1100px) and (-moz-gtk-csd-reversed-placement) { + .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; + } + :root[sizemode="maximized"][tabsintitlebar] #navigator-toolbox-background { + margin-top: calc(-1 * var(--uc-titlebar-padding)); + } + :root[sizemode="normal"][tabsintitlebar] #titlebar, + :root[sizemode="maximized"][tabsintitlebar] #titlebar { + appearance: none !important; + } + .browser-toolbar:not(.titlebar-color) { + background-clip: border-box !important; + } + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + #toolbar-menubar:not([autohide="true"]) { + visibility: visible !important; + height: 0; + } + } + @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 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) { + @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; + min-height: 0 !important; + max-height: 0 !important; + } + :root[inFullscreen]:not([macOSNativeFullscreen]) #menubar-items { + visibility: collapse !important; + } + } + } + @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; + } + } + } + } + @media screen and (min-width: 1100px) { + @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. */ + /* Titlebar Button Box */ + :root { + --uc-titlebar-padding: 0px; + } + #navigator-toolbox { + padding-top: var(--uc-titlebar-padding) !important; + } + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") { + #navigator-toolbox { + padding-top: calc( + max(var(--uc-menubar-height), var(--uc-menubar-height-default)) + var(--uc-titlebar-padding) + ) !important; + } + } + } + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, + #TabsToolbar > .titlebar-buttonbox-container { + position: fixed; + display: block; + top: 0; + right: 0; + z-index: 1; + } + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container { + height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); + } + @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { + #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { + stroke: var(--toolbar-color, currentColor) !important; + } + } + .titlebar-buttonbox-container > .titlebar-buttonbox { + height: 100%; + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + .titlebar-buttonbox-container > .titlebar-buttonbox { + margin-block: 10px; + } + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + @media (-moz-gtk-csd-available) { + @media screen and (min-width: 1100px) and (-moz-gtk-csd-reversed-placement) { + .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; + } + :root[sizemode="maximized"][tabsintitlebar] #navigator-toolbox-background { + margin-top: calc(-1 * var(--uc-titlebar-padding)); + } + :root[sizemode="normal"][tabsintitlebar] #titlebar, + :root[sizemode="maximized"][tabsintitlebar] #titlebar { + appearance: none !important; + } + .browser-toolbar:not(.titlebar-color) { + background-clip: border-box !important; + } + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + #toolbar-menubar:not([autohide="true"]) { + visibility: visible !important; + height: 0; + } + } + @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 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; + } + } + @supports -moz-bool-pref("browser.fullscreen.autohide") { + :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { + 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"]) + + #TabsToolbar + > .titlebar-buttonbox-container { + display: block !important; + } + @supports not -moz-bool-pref("userChrome.hidden.tabbar") { + :root:not([chromehidden~="menubar"]) + #toolbar-menubar:not([autohide="true"]) + .titlebar-buttonbox-container { + visibility: hidden; + } + } + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + /*= 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. */ + /* Titlebar Button Box */ + :root { + --uc-titlebar-padding: 0px; + } + #navigator-toolbox { + padding-top: var(--uc-titlebar-padding) !important; + } + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom.menubar_on_top") { + #navigator-toolbox { + padding-top: calc( + max(var(--uc-menubar-height), var(--uc-menubar-height-default)) + var(--uc-titlebar-padding) + ) !important; + } + } + } + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container, + #TabsToolbar > .titlebar-buttonbox-container { + position: fixed; + display: block; + top: 0; + right: 0; + z-index: 1; + } + #toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container { + height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px)); + } + @media (-moz-os-version: windows-win10), (-moz-platform: windows-win10) { + #toolbar-menubar[autohide="true"][inactive="true"] > .titlebar-buttonbox-container .titlebar-button { + stroke: var(--toolbar-color, currentColor) !important; + } + } + .titlebar-buttonbox-container > .titlebar-buttonbox { + height: 100%; + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + .titlebar-buttonbox-container > .titlebar-buttonbox { + margin-block: 10px; + } + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + .titlebar-buttonbox-container { + left: 0; + right: unset !important; + } + } + @media (-moz-gtk-csd-available) { + @media screen and (min-width: 1100px) and (-moz-gtk-csd-reversed-placement) { + .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; + } + :root[sizemode="maximized"][tabsintitlebar] #navigator-toolbox-background { + margin-top: calc(-1 * var(--uc-titlebar-padding)); + } + :root[sizemode="normal"][tabsintitlebar] #titlebar, + :root[sizemode="maximized"][tabsintitlebar] #titlebar { + appearance: none !important; + } + .browser-toolbar:not(.titlebar-color) { + background-clip: border-box !important; + } + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + #toolbar-menubar:not([autohide="true"]) { + visibility: visible !important; + height: 0; + } + } + @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 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; + } + } + @supports -moz-bool-pref("browser.fullscreen.autohide") { + :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container { + 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"]) + + #TabsToolbar + > .titlebar-buttonbox-container { + display: block !important; + } + @supports not -moz-bool-pref("userChrome.hidden.tabbar") { + :root:not([chromehidden~="menubar"]) + #toolbar-menubar:not([autohide="true"]) + .titlebar-buttonbox-container { + visibility: hidden; + } + } } } } } - @media (-moz-gtk-csd-available) { - @media (-moz-gtk-csd-reversed-placement: 0) { + @supports not -moz-bool-pref("userChrome.navbar.as_sidebar") { + /*= Navbar - Padding for window controls =====================================*/ + /* Customized https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/window_control_placeholder_support.css */ + #nav-bar { + border-inline-style: solid !important; + border-inline-color: transparent; + } + @media (-moz-os-version: windows-win7), + (-moz-platform: windows-win7), + (-moz-os-version: windows-win8), + (-moz-platform: windows-win8), + (-moz-os-version: windows-win10), + (-moz-platform: windows-win10) { @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { #nav-bar { border-inline-start-width: var(--uc-window-drag-space-pre); @@ -5492,7 +5442,7 @@ } @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { - @media screen and (-moz-gtk-csd-reversed-placement: 0) and (max-width: 1100px) { + @media screen and (max-width: 1100px) { #nav-bar { border-inline-start-width: var(--uc-window-drag-space-pre); border-inline-end-width: var(--uc-window-control-space); @@ -5516,7 +5466,7 @@ } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @media screen and (-moz-gtk-csd-reversed-placement: 0) and (min-width: 1100px) { + @media screen and (min-width: 1100px) { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #nav-bar { margin-inline-start: var(--uc-window-drag-space-pre) !important; @@ -5532,99 +5482,65 @@ } } } - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { - #nav-bar { - border-inline-start-width: var(--uc-window-control-space); - border-inline-end-width: var(--uc-window-drag-space-pre); - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { - #nav-bar { - border-inline-start-width: var(--uc-window-control-space); - border-inline-end-width: var(--uc-window-drag-space-pre); - } - } - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { - @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { - @media screen and (max-width: 1100px) { - #nav-bar { - border-inline-start-width: var(--uc-window-control-space); - border-inline-end-width: var(--uc-window-drag-space-pre); - } + @media (-moz-gtk-csd-available) { + @media (-moz-gtk-csd-reversed-placement: 0) { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { + #nav-bar { + border-inline-start-width: var(--uc-window-drag-space-pre); + border-inline-end-width: var(--uc-window-control-space); } } - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { #nav-bar { - margin-inline-start: var(--uc-window-control-space, 0px) !important; + border-inline-start-width: var(--uc-window-drag-space-pre); + border-inline-end-width: var(--uc-window-control-space); } } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #nav-bar { - margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; - } - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @media screen and (min-width: 1100px) { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #nav-bar { - margin-inline-start: var(--uc-window-control-space, 0px) !important; + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { + @media screen and (-moz-gtk-csd-reversed-placement: 0) and (max-width: 1100px) { + #nav-bar { + border-inline-start-width: var(--uc-window-drag-space-pre); + border-inline-end-width: var(--uc-window-control-space); + } } } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #nav-bar { - margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-start: var(--uc-window-drag-space-pre) !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-end: var(--uc-window-control-space) !important; + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (-moz-gtk-csd-reversed-placement: 0) and (min-width: 1100px) { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-start: var(--uc-window-drag-space-pre) !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-end: var(--uc-window-control-space) !important; + } + } } } } } } } - @supports -moz-bool-pref("userChrome.tabbar.one_liner") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #TabsToolbar { - margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; - } - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @media screen and (min-width: 1100px) { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - #TabsToolbar { - margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; - } - } - } - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { - @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - #TabsToolbar { - margin-inline-start: var(--uc-window-control-width, 0px) !important; - } - } - @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @media screen and (min-width: 1100px) { - #TabsToolbar { - margin-inline-start: var(--uc-window-control-width, 0px) !important; - } - } - } - } - } - } - @media (-moz-gtk-csd-available) { - @media (-moz-gtk-csd-reversed-placement) { + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { #nav-bar { border-inline-start-width: var(--uc-window-control-space); @@ -5640,7 +5556,7 @@ } @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { - @media screen and (-moz-gtk-csd-reversed-placement) and (max-width: 1100px) { + @media screen and (max-width: 1100px) { #nav-bar { border-inline-start-width: var(--uc-window-control-space); border-inline-end-width: var(--uc-window-drag-space-pre); @@ -5664,7 +5580,7 @@ } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @media screen and (-moz-gtk-csd-reversed-placement) and (min-width: 1100px) { + @media screen and (min-width: 1100px) { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #nav-bar { margin-inline-start: var(--uc-window-control-space, 0px) !important; @@ -5689,7 +5605,7 @@ } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @media screen and (-moz-gtk-csd-reversed-placement) and (min-width: 1100px) { + @media screen and (min-width: 1100px) { @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { #TabsToolbar { margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; @@ -5705,7 +5621,7 @@ } } @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { - @media screen and (-moz-gtk-csd-reversed-placement) and (min-width: 1100px) { + @media screen and (min-width: 1100px) { #TabsToolbar { margin-inline-start: var(--uc-window-control-width, 0px) !important; } @@ -5714,11 +5630,103 @@ } } } - } - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { - :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, - :root[sizemode="fullscreen"] #window-controls { - right: unset; + @media (-moz-gtk-csd-available) { + @media (-moz-gtk-csd-reversed-placement) { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner") { + #nav-bar { + border-inline-start-width: var(--uc-window-control-space); + border-inline-end-width: var(--uc-window-drag-space-pre); + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + #nav-bar { + border-inline-start-width: var(--uc-window-control-space); + border-inline-end-width: var(--uc-window-drag-space-pre); + } + } + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports -moz-bool-pref("userChrome.tabbar.on_bottom") or -moz-bool-pref("userChrome.hidden.tabbar") { + @media screen and (-moz-gtk-csd-reversed-placement) and (max-width: 1100px) { + #nav-bar { + border-inline-start-width: var(--uc-window-control-space); + border-inline-end-width: var(--uc-window-drag-space-pre); + } + } + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-start: var(--uc-window-control-space, 0px) !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (-moz-gtk-csd-reversed-placement) and (min-width: 1100px) { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-start: var(--uc-window-control-space, 0px) !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #nav-bar { + margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; + } + } + } + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.combine_navbar") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #TabsToolbar { + margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (-moz-gtk-csd-reversed-placement) and (min-width: 1100px) { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + #TabsToolbar { + margin-inline-end: var(--uc-window-drag-space-pre, 0px) !important; + } + } + } + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.tabbar_first") { + @supports not -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + #TabsToolbar { + margin-inline-start: var(--uc-window-control-width, 0px) !important; + } + } + @supports -moz-bool-pref("userChrome.tabbar.one_liner.responsive") { + @media screen and (-moz-gtk-csd-reversed-placement) and (min-width: 1100px) { + #TabsToolbar { + margin-inline-start: var(--uc-window-control-width, 0px) !important; + } + } + } + } + } + } + } + @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled") { + :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, + :root[sizemode="fullscreen"] #window-controls { + right: unset; + } } } } @@ -9549,6 +9557,11 @@ } } } +@supports -moz-bool-pref("userChrome.hidden.titlebar_container") { + .titlebar-buttonbox-container { + display: none !important; + } +} @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 e305363..3047a1c 100644 --- a/src/hidden/_index.scss +++ b/src/hidden/_index.scss @@ -27,6 +27,12 @@ } } +@include Option("userChrome.hidden.titlebar_container") { + .titlebar-buttonbox-container { + display: none !important; + } +} + @include Option("userChrome.hidden.sidebar_header") { @include NotOption("userChrome.hidden.sidebar_header.vertical_tab_only") { #sidebar-header { diff --git a/src/tabbar/_layout.scss b/src/tabbar/_layout.scss index 3a57631..904e6ab 100644 --- a/src/tabbar/_layout.scss +++ b/src/tabbar/_layout.scss @@ -10,31 +10,33 @@ //------------------------------------------------------------------------------ -@include NotOption("userChrome.tabbar.one_liner") { - @include Option("userChrome.tabbar.on_bottom", "userChrome.hidden.tabbar") { - @import "layout/window_control"; - } -} -@include Option("userChrome.tabbar.one_liner") { - @include NotOption("userChrome.tabbar.one_liner.responsive") { - @include _oneLiner_windowControl() { +@include NotOption("userChrome.hidden.titlebar_container") { + @include NotOption("userChrome.tabbar.one_liner") { + @include Option("userChrome.tabbar.on_bottom", "userChrome.hidden.tabbar") { @import "layout/window_control"; } } - @include Option("userChrome.tabbar.one_liner.responsive") { - @include Option("userChrome.tabbar.on_bottom", "userChrome.hidden.tabbar") { - @media screen and (max-width: 1100px) { - @import "layout/window_control"; - } - } - @media screen and (min-width: 1100px) { + @include Option("userChrome.tabbar.one_liner") { + @include NotOption("userChrome.tabbar.one_liner.responsive") { @include _oneLiner_windowControl() { @import "layout/window_control"; } } + @include Option("userChrome.tabbar.one_liner.responsive") { + @include Option("userChrome.tabbar.on_bottom", "userChrome.hidden.tabbar") { + @media screen and (max-width: 1100px) { + @import "layout/window_control"; + } + } + @media screen and (min-width: 1100px) { + @include _oneLiner_windowControl() { + @import "layout/window_control"; + } + } + } + } + + @include NotOption("userChrome.navbar.as_sidebar") { + @import "layout/navbar_padding"; } } - -@include NotOption("userChrome.navbar.as_sidebar") { - @import "layout/navbar_padding"; -} diff --git a/user.js b/user.js index 9d69435..d00aa34 100644 --- a/user.js +++ b/user.js @@ -94,6 +94,7 @@ user_pref("userChrome.rounding.square_tab", false); // user_pref("userChrome.hidden.tab_icon.always", true); // user_pref("userChrome.hidden.tabbar", true); // user_pref("userChrome.hidden.navbar", true); +// user_pref("userChrome.hidden.titlebar_container", 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); From 6cb451125f1b17a4ea520274d87b94b1a85e70f7 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 31 Dec 2022 18:44:06 +0900 Subject: [PATCH 87/88] Fix: Icons - Save button replace at panel #553 --- css/leptonChrome.css | 3 +++ src/icons/_panel.scss | 4 ++++ 2 files changed, 7 insertions(+) diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 0bd8b32..2d6c025 100644 --- a/css/leptonChrome.css +++ b/css/leptonChrome.css @@ -8213,6 +8213,9 @@ content: url("../icons/screenshot.svg"); } } + #save-page-button { + list-style-image: url("../icons/toolbarButton-download.svg") !important; + } #appMenu-settings-button { list-style-image: url("chrome://global/skin/icons/settings.svg"); } diff --git a/src/icons/_panel.scss b/src/icons/_panel.scss index f4b059e..87511f5 100644 --- a/src/icons/_panel.scss +++ b/src/icons/_panel.scss @@ -100,6 +100,10 @@ content: url("../icons/screenshot.svg"); } } +#save-page-button { + // #496 #553 + list-style-image: url("../icons/toolbarButton-download.svg") !important; +} #appMenu-settings-button { list-style-image: url("chrome://global/skin/icons/settings.svg"); From 4cb7ded2e276f6423439141f5f61ba4286b046ab Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sat, 31 Dec 2022 20:36:33 +0900 Subject: [PATCH 88/88] Feature: Ver 7.0.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 50cdabd..65ffe43 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "Lepton", - "version": "5.0.0", + "version": "7.0.0", "description": "I respect proton UI and aim to improve it. ", "author": "alstjr7375 ", "license": "MPL 2.0",