mirror of
https://github.com/black7375/Firefox-UI-Fix.git
synced 2026-01-30 04:10:32 -08:00
Fix: Bottom Rounded Corner - Australis & Wave background
This commit is contained in:
alstjr7375
parent
d7518fbbb7
commit
64c2c4ce35
6 changed files with 154 additions and 88 deletions
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,9 @@
|
|||
<svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke="context-stroke" stroke-width="1.5" stroke-dasharray="46.5, 100" fill="context-fill" 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>
|
||||
<path id="tabCorner" stroke="context-stroke" stroke-width="1.5" stroke-dasharray="46.5, 100" fill="context-fill" 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>
|
||||
<clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
|
||||
<use href="#tabCorner" x="-4" transform="scale(0.038, 0.0333)" />
|
||||
</clipPath>
|
||||
<use href="#tabCorner" />
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 286 B After Width: | Height: | Size: 498 B |
|
|
@ -1,3 +1,9 @@
|
|||
<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke="context-stroke" stroke-width="1.5" stroke-dasharray="59.75 100" fill="context-fill" 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>
|
||||
<path id="tabCorner" stroke="context-stroke" stroke-width="1.5" stroke-dasharray="59.75 100" fill="context-fill" 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>
|
||||
<clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
|
||||
<use href="#tabCorner" x="-3.6" transform="scale(0.0319, 0.0277)" />
|
||||
</clipPath>
|
||||
<use href="#tabCorner" />
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 325 B After Width: | Height: | Size: 540 B |
|
|
@ -1,3 +1,9 @@
|
|||
<svg width="30" height="30" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke="context-stroke" stroke-width="1.5" stroke-dasharray="46.5, 100" fill="context-fill" 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>
|
||||
<path id="tabCorner" stroke="context-stroke" stroke-width="1.5" stroke-dasharray="46.5, 100" fill="context-fill" 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>
|
||||
<clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
|
||||
<use href="#tabCorner" transform="scale(0.038, 0.0333)" />
|
||||
</clipPath>
|
||||
<use href="#tabCorner" />
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 263 B After Width: | Height: | Size: 468 B |
|
|
@ -1,3 +1,9 @@
|
|||
<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke="context-stroke" stroke-width="1.5" stroke-dasharray="59.75 100" fill="context-fill" 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>
|
||||
<path id="tabCorner" stroke="context-stroke" stroke-width="1.5" stroke-dasharray="59.75 100" fill="context-fill" 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>
|
||||
<clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
|
||||
<use href="#tabCorner" transform="scale(0.0319, 0.0277)" />
|
||||
</clipPath>
|
||||
<use href="#tabCorner" />
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 323 B After Width: | Height: | Size: 529 B |
|
|
@ -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") {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue