pmOS-tweaks/fenix-fox
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix bunch of clipping issues in curved_tabs.css

Browse source 
There is still one(known?) case that happens if one uses a theme with
non-opaque toolbar background-color with optional extra-border rules.
But that option isn't too nice with non-opaque colors anyway so left as
todo.

In addition, this patch makes the optional rules use @supports
-moz-bool-pref rules instead of having to remove commented sections in
the css file.
This commit is contained in:
MrOtherGuy 2022-12-27 11:30:06 +02:00
parent ef199c5c24
commit f9b3e20163
1 changed files with 51 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

103
chrome/curved_tabs.css
View file

@ -18,6 +18,10 @@ See the above repository for updates as well as full license text. */
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; overflow: visible !important;
} }
.tabbrowser-tab[visuallyselected="true"]{
position: relative;
z-index: 2;
}
.tab-background{ .tab-background{
overflow: hidden !important; overflow: hidden !important;
outline: none !important; outline: none !important;
@ -39,7 +43,7 @@ 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(1px - var(--uc-tab-curve-size)); left: calc(0px - 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;
@ -51,13 +55,13 @@ See the above repository for updates as well as full license text. */
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;
background-size: var(--uc-tab-curve-size),auto; background-size: var(--uc-tab-curve-size),auto;
}
:root[lwtheme-image] .tabbrowser-tab[selected] > .tab-stack::after{
background-position-y: bottom,calc(var(--tab-min-height) - 1px); background-position-y: bottom,calc(var(--tab-min-height) - 1px);
} }
@ -71,17 +75,12 @@ See the above repository for updates as well as full license text. */
.tabbrowser-tab[selected] > .tab-stack:-moz-lwtheme::after{ .tabbrowser-tab[selected] > .tab-stack:-moz-lwtheme::after{
fill: var(--lwt-selected-tab-background-color,var(--toolbar-bgcolor)) !important; fill: var(--lwt-selected-tab-background-color,var(--toolbar-bgcolor)) !important;
} }
.tabbrowser-tab[selected] > .tab-stack::after,
.tabbrowser-tab:hover > .tab-stack::after{ .tabbrowser-tab:hover > .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]{
@ -112,51 +111,51 @@ See the above repository for updates as well as full license text. */
/* OPTIONAL - COLORS - show tabs border, selected tab line and make selected tab match the main toolbar color. Also disables tab shadow */ /* OPTIONAL - COLORS - show tabs border, selected tab line and make selected tab match the main toolbar color. Also disables tab shadow */
/* Using these color options requires you to set layout.css.color-mix.enabled to true in about:config */ /* Using these color options requires you to set layout.css.color-mix.enabled to true in about:config */
/* @supports -moz-bool-pref("userchrome.curved_tabs.extra-border.enabled"){
#navigator-toolbox{ --lwt-tabs-border-color: color-mix(in srgb, currentcolor, white 50%) !important; } #navigator-toolbox{ --lwt-tabs-border-color: color-mix(in srgb, currentcolor, white 50%) !important; }
:root[lwtheme-brighttext] #navigator-toolbox{ --lwt-tabs-border-color: color-mix(in srgb, currentcolor, black 50%) !important; } :root[lwtheme-brighttext] #navigator-toolbox{ --lwt-tabs-border-color: color-mix(in srgb, currentcolor, black 50%) !important; }
#tabbrowser-tabs{ --lwt-selected-tab-background-color: var(--toolbar-bgcolor) } #tabbrowser-tabs{ --lwt-selected-tab-background-color: var(--toolbar-bgcolor) }
.tab-background[selected]{ .tab-background[selected]{
border-top: none !important; border-top: none !important;
--toolbar-bgcolor: transparent; --toolbar-bgcolor: transparent;
}
.tab-background:not(:-moz-lwtheme){
background-color: var(--lwt-selected-tab-background-color) !important;
}
.tabbrowser-tab[selected] > .tab-stack::before,
.tabbrowser-tab[selected] > .tab-stack::after{
fill: var(--lwt-selected-tab-background-color,var(--toolbar-bgcolor)) !important;
}
.tabbrowser-tab[selected] > .tab-stack::before{
left: calc(1px - var(--uc-tab-curve-size));
}
.tabbrowser-tab[selected] > .tab-stack::after{
right: calc(1px - var(--uc-tab-curve-size));
}
.tab-background[selected]::before{
content: "";
display: -moz-box;
height: 2px;
background: var(--uc-tab-line-color) !important;
}
#nav-bar{ box-shadow: 0 -1px 0 var(--lwt-tabs-border-color) }
} }
.tab-background:not(:-moz-lwtheme){
background-color: var(--lwt-selected-tab-background-color) !important;
}
.tabbrowser-tab[selected] > .tab-stack::before,
.tabbrowser-tab[selected] > .tab-stack::after{
fill: var(--lwt-selected-tab-background-color,var(--toolbar-bgcolor)) !important;
}
.tabbrowser-tab[selected] > .tab-stack::before{
left: calc(1px - var(--uc-tab-curve-size));
}
.tabbrowser-tab[selected] > .tab-stack::after{
right: calc(1px - var(--uc-tab-curve-size));
}
.tab-background[selected]::before{
content: "";
display: -moz-box;
height: 2px;
background: var(--uc-tab-line-color) !important;
}
#nav-bar{ box-shadow: 0 -1px 0 var(--lwt-tabs-border-color) }
*/
/* OPTIONAL - Make some of the buttons in tabs toolbar rounded, which might look nicer especially with large curve size */ /* OPTIONAL - Make some of the buttons in tabs toolbar rounded, which might look nicer especially with large curve size */
/* @supports -moz-bool-pref("userchrome.curved_tabs.round-buttons.enabled"){
#tabs-newtab-button > .toolbarbutton-icon, #tabs-newtab-button > .toolbarbutton-icon,
#TabsToolbar #new-tab-button > .toolbarbutton-icon, #TabsToolbar #new-tab-button > .toolbarbutton-icon,
#alltabs-button > .toolbarbutton-badge-stack, #alltabs-button > .toolbarbutton-badge-stack,
.tab-close-button{ border-radius: 30px !important; } .tab-close-button{ border-radius: 30px !important; }
*/ }
/* OPTIONAL - uncomment the following to flip the curves vertically - maybe useful for tabs on bottom ? */ /* OPTIONAL - uncomment the following to flip the curves vertically - maybe useful for tabs on bottom ? */
/* @supports -moz-bool-pref("userchrome.curved_tabs.flipped-curve.enabled"){
.tab-background{ -moz-box-direction: reverse } .tab-background{ -moz-box-direction: reverse }
.tabbrowser-tab:hover > .tab-stack > .tab-background, .tabbrowser-tab:hover > .tab-stack > .tab-background,
.tab-background[selected]{ border-radius: 0 0 var(--uc-tab-curve-size) var(--uc-tab-curve-size) !important } .tab-background[selected]{ border-radius: 0 0 var(--uc-tab-curve-size) var(--uc-tab-curve-size) !important }
.tabbrowser-tab > .tab-stack::before{ transform: scaleY(-1) !important; } .tabbrowser-tab > .tab-stack::before{ transform: scaleY(-1) !important; }
.tabbrowser-tab > .tab-stack::after{ transform: scaleY(-1) scaleX(-1) !important; } .tabbrowser-tab > .tab-stack::after{ transform: scaleY(-1) scaleX(-1) !important; }
*/ }