fliegerjohn/mobile-config-firefox
1
0
Fork 1
mirror of https://codeberg.org/claui/mobile-config-firefox.git synced 2024-11-09 19:30:15 +00:00
Code Issues Projects Releases Packages Wiki Activity

curved_tabs: Fix curve placement on Firefox 107

Browse source
This commit is contained in:
MrOtherGuy 2022-10-21 12:06:45 +03:00
parent 6192ac3b64
commit 53eb59e017
1 changed files with 12 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
chrome/curved_tabs.css
View file

@ -16,6 +16,7 @@ See the above repository for updates as well as full license text. */
.tabbrowser-tab{ .tabbrowser-tab{
padding-inline: 0px !important; /* By default, proton tabs have 2px + 2px = 4px space between them */ padding-inline: 0px !important; /* By default, proton tabs have 2px + 2px = 4px space between them */
overflow: visible !important;
} }
.tab-background{ .tab-background{
overflow: hidden !important; overflow: hidden !important;
@ -38,18 +39,21 @@ See the above repository for updates as well as full license text. */
content: ""; content: "";
fill: color-mix(in srgb, currentColor 11%, transparent); fill: color-mix(in srgb, currentColor 11%, transparent);
-moz-context-properties: fill,stroke,stroke-opacity; -moz-context-properties: fill,stroke,stroke-opacity;
left: calc(0px - var(--uc-tab-curve-size)); left: calc(1px - var(--uc-tab-curve-size));
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgc3Ryb2tlLXdpZHRoPSIxLjEiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCIgdmlld0JveD0iMCAwIDE3IDE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KICA8cGF0aCBkPSJNMCAxNyBMMCAxNiBBMTYgMTYgMCAwIDAgMTYgMCBMIDE4IDAgTCAxOCAxNyBaIiBmaWxsPSJjb250ZXh0LWZpbGwiPjwvcGF0aD4NCiAgPHBhdGggZD0iTTAgMTYgQTE2IDE2IDAgMCAwIDE2IDAiIHN0cm9rZT0iY29udGV4dC1zdHJva2UiIHN0cm9rZS1vcGFjaXR5PSJjb250ZXh0LXN0cm9rZS1vcGFjaXR5IiBmaWxsPSJ0cmFuc3BhcmVudCI+PC9wYXRoPg0KPC9zdmc+"),var(--lwt-header-image, none); background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgc3Ryb2tlLXdpZHRoPSIxLjEiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCIgdmlld0JveD0iMCAwIDE3IDE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KICA8cGF0aCBkPSJNMCAxNyBMMCAxNiBBMTYgMTYgMCAwIDAgMTYgMCBMIDE4IDAgTCAxOCAxNyBaIiBmaWxsPSJjb250ZXh0LWZpbGwiPjwvcGF0aD4NCiAgPHBhdGggZD0iTTAgMTYgQTE2IDE2IDAgMCAwIDE2IDAiIHN0cm9rZT0iY29udGV4dC1zdHJva2UiIHN0cm9rZS1vcGFjaXR5PSJjb250ZXh0LXN0cm9rZS1vcGFjaXR5IiBmaWxsPSJ0cmFuc3BhcmVudCI+PC9wYXRoPg0KPC9zdmc+"),var(--lwt-header-image, none);
background-size: var(--uc-tab-curve-size),0; background-size: var(--uc-tab-curve-size),0;
background-repeat: no-repeat,no-repeat; background-repeat: no-repeat,no-repeat;
background-position-y: bottom, bottom -1px; background-position-y: bottom, bottom -1px;
background-position-x: -1px,auto; background-position-x: 0,0;
transform: scaleY(var(--uc-tab-vertical-transform)); transform: scaleY(var(--uc-tab-vertical-transform));
stroke-opacity: var(--uc-curve-stroke-opacity); stroke-opacity: var(--uc-curve-stroke-opacity);
z-index:1; z-index:1;
pointer-events: none; pointer-events: none;
background-origin: border-box; background-origin: border-box;
} }
.tabbrowser-tab:hover > .tab-stack::before{
left: calc(0px - var(--uc-tab-curve-size));
}
:root[lwtheme-image] .tabbrowser-tab[selected] > .tab-stack::before, :root[lwtheme-image] .tabbrowser-tab[selected] > .tab-stack::before,
:root[lwtheme-image] .tabbrowser-tab[selected] > .tab-stack::after{ :root[lwtheme-image] .tabbrowser-tab[selected] > .tab-stack::after{
background-attachment: scroll,fixed; background-attachment: scroll,fixed;
@ -68,12 +72,16 @@ See the above repository for updates as well as full license text. */
fill: var(--lwt-selected-tab-background-color,var(--toolbar-bgcolor)) !important; fill: var(--lwt-selected-tab-background-color,var(--toolbar-bgcolor)) !important;
} }
.tabbrowser-tab:hover > .tab-stack::after, .tabbrowser-tab:hover > .tab-stack::after{
.tabbrowser-tab[selected] > .tab-stack::after{
left: auto; left: auto;
right: calc(0px - var(--uc-tab-curve-size)); right: calc(0px - var(--uc-tab-curve-size));
transform: scaleX(-1); transform: scaleX(-1);
} }
.tabbrowser-tab[selected] > .tab-stack::after{
left: auto;
right: calc(1px - var(--uc-tab-curve-size));
transform: scaleX(-1);
}
.tabbrowser-tab:hover > stack > .tab-background, .tabbrowser-tab:hover > stack > .tab-background,
.tab-background[selected]{ .tab-background[selected]{