Fix bunch of clipping issues in curved_tabs.css
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
parent
ef199c5c24
commit
f9b3e20163
1 changed files with 51 additions and 52 deletions
|
|
@ -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 */
|
||||
overflow: visible !important;
|
||||
}
|
||||
.tabbrowser-tab[visuallyselected="true"]{
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.tab-background{
|
||||
overflow: hidden !important;
|
||||
outline: none !important;
|
||||
|
|
@ -39,7 +43,7 @@ See the above repository for updates as well as full license text. */
|
|||
content: "";
|
||||
fill: color-mix(in srgb, currentColor 11%, transparent);
|
||||
-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-size: var(--uc-tab-curve-size),0;
|
||||
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;
|
||||
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::after{
|
||||
background-attachment: scroll,fixed;
|
||||
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);
|
||||
}
|
||||
|
||||
|
|
@ -71,17 +75,12 @@ See the above repository for updates as well as full license text. */
|
|||
.tabbrowser-tab[selected] > .tab-stack:-moz-lwtheme::after{
|
||||
fill: var(--lwt-selected-tab-background-color,var(--toolbar-bgcolor)) !important;
|
||||
}
|
||||
|
||||
.tabbrowser-tab[selected] > .tab-stack::after,
|
||||
.tabbrowser-tab:hover > .tab-stack::after{
|
||||
left: auto;
|
||||
right: calc(0px - var(--uc-tab-curve-size));
|
||||
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,
|
||||
.tab-background[selected]{
|
||||
|
|
@ -114,49 +113,49 @@ 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 */
|
||||
/* Using these color options requires you to set layout.css.color-mix.enabled to true in about:config */
|
||||
|
||||
/*
|
||||
#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; }
|
||||
#tabbrowser-tabs{ --lwt-selected-tab-background-color: var(--toolbar-bgcolor) }
|
||||
.tab-background[selected]{
|
||||
@supports -moz-bool-pref("userchrome.curved_tabs.extra-border.enabled"){
|
||||
#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; }
|
||||
#tabbrowser-tabs{ --lwt-selected-tab-background-color: var(--toolbar-bgcolor) }
|
||||
.tab-background[selected]{
|
||||
border-top: none !important;
|
||||
--toolbar-bgcolor: transparent;
|
||||
}
|
||||
.tab-background:not(:-moz-lwtheme){
|
||||
}
|
||||
.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{
|
||||
}
|
||||
.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{
|
||||
}
|
||||
.tabbrowser-tab[selected] > .tab-stack::before{
|
||||
left: calc(1px - var(--uc-tab-curve-size));
|
||||
}
|
||||
.tabbrowser-tab[selected] > .tab-stack::after{
|
||||
}
|
||||
.tabbrowser-tab[selected] > .tab-stack::after{
|
||||
right: calc(1px - var(--uc-tab-curve-size));
|
||||
}
|
||||
.tab-background[selected]::before{
|
||||
}
|
||||
.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) }
|
||||
}
|
||||
#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 */
|
||||
/*
|
||||
#tabs-newtab-button > .toolbarbutton-icon,
|
||||
#TabsToolbar #new-tab-button > .toolbarbutton-icon,
|
||||
#alltabs-button > .toolbarbutton-badge-stack,
|
||||
.tab-close-button{ border-radius: 30px !important; }
|
||||
*/
|
||||
@supports -moz-bool-pref("userchrome.curved_tabs.round-buttons.enabled"){
|
||||
#tabs-newtab-button > .toolbarbutton-icon,
|
||||
#TabsToolbar #new-tab-button > .toolbarbutton-icon,
|
||||
#alltabs-button > .toolbarbutton-badge-stack,
|
||||
.tab-close-button{ border-radius: 30px !important; }
|
||||
}
|
||||
|
||||
/* OPTIONAL - uncomment the following to flip the curves vertically - maybe useful for tabs on bottom ? */
|
||||
/*
|
||||
.tab-background{ -moz-box-direction: reverse }
|
||||
.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 }
|
||||
.tabbrowser-tab > .tab-stack::before{ transform: scaleY(-1) !important; }
|
||||
.tabbrowser-tab > .tab-stack::after{ transform: scaleY(-1) scaleX(-1) !important; }
|
||||
*/
|
||||
@supports -moz-bool-pref("userchrome.curved_tabs.flipped-curve.enabled"){
|
||||
.tab-background{ -moz-box-direction: reverse }
|
||||
.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 }
|
||||
.tabbrowser-tab > .tab-stack::before{ transform: scaleY(-1) !important; }
|
||||
.tabbrowser-tab > .tab-stack::after{ transform: scaleY(-1) scaleX(-1) !important; }
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue