From f75da40f05464437cccbbaa79a623bd778332b27 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Mon, 24 Oct 2022 10:44:09 +0900 Subject: [PATCH 01/17] 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 02/17] 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 03/17] 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 04/17] 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 05/17] 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 12d75219cea3c766911531f446c05b372f85900d Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Tue, 1 Nov 2022 17:39:20 +0900 Subject: [PATCH 06/17] 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 64c2c4ce353104a93ec0860ef7c5bfa14f15c228 Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Fri, 11 Nov 2022 11:28:23 +0900 Subject: [PATCH 07/17] 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 08/17] 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 09/17] 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 10/17] 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 11/17] 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 12/17] 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 13/17] 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 14/17] 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 15/17] 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 16/17] 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 17/17] 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); } }