mirrors/Firefox-UI-Fix
1
Fork 0
mirror of https://github.com/black7375/Firefox-UI-Fix.git synced 2025-12-06 02:30:54 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix: Bottom Rounded Tab - Layout & Newtab sideeffect

Browse source
This commit is contained in:
alstjr7375 2022-11-16 02:15:26 +09:00
parent 97dfd556e0
commit b2f07ce0f0
13 changed files with 34 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

31
css/leptonChrome.css
View file

@ -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") {
@supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") { @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") {
@supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") {
#tabbrowser-tabs { #TabsToolbar {
--tab-corner-rounding: 3px; --tab-corner-rounding: 3px;
/* 10px looks about like chromium - 17px looks close to Australis tabs */ /* 10px looks about like chromium - 17px looks close to Australis tabs */
--tab-corner-padding: 0px; --tab-corner-padding: 0px;
@ -6679,36 +6679,35 @@
) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref( ) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") or -moz-bool-pref(
"userChrome.tab.bottom_rounded_corner.chrome" "userChrome.tab.bottom_rounded_corner.chrome"
) or -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") { ) 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: calc(var(--uc-tab-corner-size) / 2);
--uc-tab-corner-half-size-reverse: calc(var(--uc-tab-corner-half-size) * -1); --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; --uc-tab-corner-bgimage: none;
} }
@supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") { @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-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-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-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-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-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-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") { @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-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-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-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-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-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-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") { @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-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-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-svg: url("../icons/tab-bottom-corner-right-chrome.svg");
@ -6719,25 +6718,24 @@
} }
} }
@supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") { @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-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-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-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-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-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-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") { @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-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-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-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-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-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-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 { .tabbrowser-tab .tab-background {
--tab-border-radius: 0px; --tab-border-radius: 0px;
margin-inline: var(--uc-tab-corner-half-size) !important; margin-inline: var(--uc-tab-corner-half-size) !important;
position: relative;
} }
} }
@supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") { @supports not -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") {
@ -6759,6 +6758,7 @@
.tabbrowser-tab[visuallyselected] .tab-background { .tabbrowser-tab[visuallyselected] .tab-background {
--tab-border-radius: 0px; --tab-border-radius: 0px;
margin-inline: var(--uc-tab-corner-half-size) !important; margin-inline: var(--uc-tab-corner-half-size) !important;
position: relative;
} }
.tabbrowser-tab[visuallyselected] .tab-background::before, .tabbrowser-tab[visuallyselected] .tab-background::before,
.tabbrowser-tab[visuallyselected] .tab-background::after { .tabbrowser-tab[visuallyselected] .tab-background::after {
@ -6805,13 +6805,12 @@
} }
} }
.tabbrowser-tab .tab-background::before { .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); background-image: var(--uc-tab-corner-left-side-svg), var(--uc-tab-corner-bgimage);
clip-path: var(--uc-tab-corner-left-side-clipPath); clip-path: var(--uc-tab-corner-left-side-clipPath);
transform: translateX(0.5px);
} }
.tabbrowser-tab .tab-background::after { .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); background-image: var(--uc-tab-corner-right-side-svg), var(--uc-tab-corner-bgimage);
clip-path: var(--uc-tab-corner-right-side-clipPath); clip-path: var(--uc-tab-corner-right-side-clipPath);
} }
@ -7326,7 +7325,7 @@
--uc-newtab-non-corner-bgwidth: 0px; --uc-newtab-non-corner-bgwidth: 0px;
--uc-tab-corner-half-height: calc(var(--uc-tab-corner-height) / 2); --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); --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; padding-inline: var(--uc-tab-corner-half-height) !important;
overflow-clip-margin: 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), background-image: var(--uc-tab-corner-left-side-svg),

2
icons/tab-bottom-corner-left-australis.svg
View file

@ -3,7 +3,7 @@
<path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="46.5, 100" d="M28.5 0C14.55.03 14.046 10.757 13.05 16.442 11.56 24.942 8.125 29.452 0 30h30V0m0 0h-1.5"/> <path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="46.5, 100" d="M28.5 0C14.55.03 14.046 10.757 13.05 16.442 11.56 24.942 8.125 29.452 0 30h30V0m0 0h-1.5"/>
</defs> </defs>
<clipPath id="svgClipPath" clipPathUnits="objectBoundingBox"> <clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
<use href="#tabCorner" x="-4" transform="scale(0.038, 0.0333)" /> <use href="#tabCorner" x="-2.2" transform="scale(0.036, 0.0333)" />
</clipPath> </clipPath>
<use href="#tabCorner" /> <use href="#tabCorner" />
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 538 B

After

Width:  |  Height:  |  Size: 540 B

Before After
Before After

2
icons/tab-bottom-corner-left-chrome.svg
View file

@ -3,7 +3,7 @@
<path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="47 100" d="M18 0a9 9 0 0 0-7.571 4.135 9 9 0 0 0-.617 1.127 9 9 0 0 0-.72 2.457A9 9 0 0 0 9 9v18a9 9 0 0 1-4.135 7.571 9 9 0 0 1-1.127.617 9 9 0 0 1-2.457.72A9 9 0 0 1 0 36h18V0"/> <path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="47 100" d="M18 0a9 9 0 0 0-7.571 4.135 9 9 0 0 0-.617 1.127 9 9 0 0 0-.72 2.457A9 9 0 0 0 9 9v18a9 9 0 0 1-4.135 7.571 9 9 0 0 1-1.127.617 9 9 0 0 1-2.457.72A9 9 0 0 1 0 36h18V0"/>
</defs> </defs>
<clipPath id="svgClipPath" clipPathUnits="objectBoundingBox"> <clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
<use href="#tabCorner" x="-2" transform="scale(0.065, 0.0277)" /> <use href="#tabCorner" x="-2.5" transform="scale(0.065, 0.0277)" />
</clipPath> </clipPath>
<use href="#tabCorner" /> <use href="#tabCorner" />
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 613 B

After

Width:  |  Height:  |  Size: 615 B

Before After
Before After

2
icons/tab-bottom-corner-left-chromeLegacy.svg
View file

@ -3,7 +3,7 @@
<path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="59 100" d="M0 36h9L27 0h9v36z"/> <path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="59 100" d="M0 36h9L27 0h9v36z"/>
</defs> </defs>
<clipPath id="svgClipPath" clipPathUnits="objectBoundingBox"> <clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
<use href="#tabCorner" x="-3.6" transform="scale(0.0319, 0.0277)" /> <use href="#tabCorner" x="-2.5" transform="scale(0.0299, 0.0277)" />
</clipPath> </clipPath>
<use href="#tabCorner" /> <use href="#tabCorner" />
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 468 B

After

Width:  |  Height:  |  Size: 468 B

Before After
Before After

2
icons/tab-bottom-corner-left-edge.svg
View file

@ -3,7 +3,7 @@
<path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="37, 100" d="M12 0a4 4 0 0 0-3.365 1.838A4 4 0 0 0 8 4v24a4 4 0 0 1-1.38 3.023A4 4 0 0 1 4 32h12V0m0 0h-4"/> <path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="37, 100" d="M12 0a4 4 0 0 0-3.365 1.838A4 4 0 0 0 8 4v24a4 4 0 0 1-1.38 3.023A4 4 0 0 1 4 32h12V0m0 0h-4"/>
</defs> </defs>
<clipPath id="svgClipPath" clipPathUnits="objectBoundingBox"> <clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
<use href="#tabCorner" x="-4" transform="scale(0.08, 0.0333)" /> <use href="#tabCorner" x="-2.5" transform="scale(0.075, 0.0333)" />
</clipPath> </clipPath>
<use href="#tabCorner" /> <use href="#tabCorner" />
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 539 B

After

Width:  |  Height:  |  Size: 542 B

Before After
Before After

2
icons/tab-bottom-corner-left-wave.svg
View file

@ -3,7 +3,7 @@
<path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="59.75 100" d="M 0,36 C 6,36 12.001,36 15.0005,30.0005 18,24.001 18,12.001 21.0005,6.0005 24.001,0 30,0 36,0 c 0,0 0,36 0,36 0,0 -36,0 -36,0 z"/> <path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="59.75 100" d="M 0,36 C 6,36 12.001,36 15.0005,30.0005 18,24.001 18,12.001 21.0005,6.0005 24.001,0 30,0 36,0 c 0,0 0,36 0,36 0,0 -36,0 -36,0 z"/>
</defs> </defs>
<clipPath id="svgClipPath" clipPathUnits="objectBoundingBox"> <clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
<use href="#tabCorner" x="-3.6" transform="scale(0.0319, 0.0277)" /> <use href="#tabCorner" x="-2.5" transform="scale(0.0299, 0.0277)" />
</clipPath> </clipPath>
<use href="#tabCorner" /> <use href="#tabCorner" />
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 580 B

After

Width:  |  Height:  |  Size: 580 B

Before After
Before After

2
icons/tab-bottom-corner-right-australis.svg
View file

@ -3,7 +3,7 @@
<path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="46.5, 100" d="M0 0h1.5m0 0c13.95.03 14.454 10.757 15.45 16.442C18.44 24.942 21.875 29.452 30 30H0V0"/> <path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="46.5, 100" d="M0 0h1.5m0 0c13.95.03 14.454 10.757 15.45 16.442C18.44 24.942 21.875 29.452 30 30H0V0"/>
</defs> </defs>
<clipPath id="svgClipPath" clipPathUnits="objectBoundingBox"> <clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
<use href="#tabCorner" transform="scale(0.038, 0.0333)" /> <use href="#tabCorner" transform="scale(0.036, 0.0333)" />
</clipPath> </clipPath>
<use href="#tabCorner" /> <use href="#tabCorner" />
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 528 B

After

Width:  |  Height:  |  Size: 528 B

Before After
Before After

2
icons/tab-bottom-corner-right-chromeLegacy.svg
View file

@ -3,7 +3,7 @@
<path id="tabCorner" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="59 100" fill="context-fill" d="M36 36h-9L9 0H0v36z"/> <path id="tabCorner" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="59 100" fill="context-fill" d="M36 36h-9L9 0H0v36z"/>
</defs> </defs>
<clipPath id="svgClipPath" clipPathUnits="objectBoundingBox"> <clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
<use href="#tabCorner" transform="scale(0.0319, 0.0277)" /> <use href="#tabCorner" transform="scale(0.0299, 0.0277)" />
</clipPath> </clipPath>
<use href="#tabCorner" /> <use href="#tabCorner" />
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 460 B

After

Width:  |  Height:  |  Size: 460 B

Before After
Before After

2
icons/tab-bottom-corner-right-edge.svg
View file

@ -3,7 +3,7 @@
<path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="37, 100" d="M4 0a4 4 0 0 1 3.365 1.838A4 4 0 0 1 8 4v24a4 4 0 0 0 1.838 3.365A4 4 0 0 0 12 32H0V0m0 0h4"/> <path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="37, 100" d="M4 0a4 4 0 0 1 3.365 1.838A4 4 0 0 1 8 4v24a4 4 0 0 0 1.838 3.365A4 4 0 0 0 12 32H0V0m0 0h4"/>
</defs> </defs>
<clipPath id="svgClipPath" clipPathUnits="objectBoundingBox"> <clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
<use href="#tabCorner" transform="scale(0.08, 0.0333)" /> <use href="#tabCorner" transform="scale(0.075, 0.0333)" />
</clipPath> </clipPath>
<use href="#tabCorner" /> <use href="#tabCorner" />
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 531 B

After

Width:  |  Height:  |  Size: 532 B

Before After
Before After

2
icons/tab-bottom-corner-right-wave.svg
View file

@ -3,7 +3,7 @@
<path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="59.75 100" d="M 36,36 C 30,36 23.999,36 20.9995,30.0005 18,24.001 18,12.001 14.9995,6.0005 11.999,0 6,0 0,0 c 0,0 0,36 0,36 0,0 36,0 36,0 z"/> <path id="tabCorner" fill="context-fill" stroke="context-stroke" stroke-opacity="context-stroke-opacity" stroke-width="1.5" stroke-dasharray="59.75 100" d="M 36,36 C 30,36 23.999,36 20.9995,30.0005 18,24.001 18,12.001 14.9995,6.0005 11.999,0 6,0 0,0 c 0,0 0,36 0,36 0,0 36,0 36,0 z"/>
</defs> </defs>
<clipPath id="svgClipPath" clipPathUnits="objectBoundingBox"> <clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
<use href="#tabCorner" transform="scale(0.0319, 0.0277)" /> <use href="#tabCorner" transform="scale(0.0299, 0.0277)" />
</clipPath> </clipPath>
<use href="#tabCorner" /> <use href="#tabCorner" />
</svg> </svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 569 B

After

Width:  |  Height:  |  Size: 569 B

Before After
Before After

2
src/tab/newtab_button/_looks_like_tab.scss
View file

@ -39,7 +39,7 @@
--uc-tab-corner-half-height: calc(var(--uc-tab-corner-height) / 2); --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); --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; padding-inline: var(--uc-tab-corner-half-height) !important;
overflow-clip-margin: var(--uc-tab-corner-half-height) !important; overflow-clip-margin: var(--uc-tab-corner-half-height) !important;

2
src/tab/selected_tab/_bottom_rounded_corner.scss
View file

@ -1,4 +1,4 @@
#tabbrowser-tabs { #TabsToolbar {
--tab-corner-rounding: 3px; /* 10px looks about like chromium - 17px looks close to Australis tabs */ --tab-corner-rounding: 3px; /* 10px looks about like chromium - 17px looks close to Australis tabs */
--tab-corner-padding: 0px; --tab-corner-padding: 0px;
--tab-corner-position: calc(var(--tab-corner-padding) - var(--tab-corner-rounding)); --tab-corner-position: calc(var(--tab-corner-padding) - var(--tab-corner-rounding));

20
src/tab/selected_tab/_bottom_rounded_corner_others.scss
View file

@ -26,6 +26,7 @@
.tab-background { .tab-background {
--tab-border-radius: 0px; --tab-border-radius: 0px;
margin-inline: var(--uc-tab-corner-half-size) !important; margin-inline: var(--uc-tab-corner-half-size) !important;
position: relative;
@content; @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: calc(var(--uc-tab-corner-size) / 2);
--uc-tab-corner-half-size-reverse: calc(var(--uc-tab-corner-half-size) * -1); --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; --uc-tab-corner-bgimage: none;
@include Option("userChrome.tab.bottom_rounded_corner.wave") { @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-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-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 Option("userChrome.tab.bottom_rounded_corner.australis") {
@include _tabCornerSVG( @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-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-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 Option("userChrome.tab.bottom_rounded_corner.chrome") {
@include _tabCornerSVG( @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-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-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 Option("userChrome.tab.bottom_rounded_corner.edge") {
@include _tabCornerSVG( @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-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-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 { &::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); background-image: var(--uc-tab-corner-left-side-svg), var(--uc-tab-corner-bgimage);
clip-path: var(--uc-tab-corner-left-side-clipPath); clip-path: var(--uc-tab-corner-left-side-clipPath);
transform: translateX(0.5px);
} }
&::after { &::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); background-image: var(--uc-tab-corner-right-side-svg), var(--uc-tab-corner-bgimage);
clip-path: var(--uc-tab-corner-right-side-clipPath); clip-path: var(--uc-tab-corner-right-side-clipPath);
} }