From f9b3e201634dba5ec7810a1b9653c9ec213e8225 Mon Sep 17 00:00:00 2001 From: MrOtherGuy Date: Tue, 27 Dec 2022 11:30:06 +0200 Subject: [PATCH] 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. --- chrome/curved_tabs.css | 103 ++++++++++++++++++++--------------------- 1 file changed, 51 insertions(+), 52 deletions(-) diff --git a/chrome/curved_tabs.css b/chrome/curved_tabs.css index cf21261..5fac407 100644 --- a/chrome/curved_tabs.css +++ b/chrome/curved_tabs.css @@ -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]{ @@ -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 */ -/* 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 */ -/* -#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; +@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){ + 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 */ -/* -#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; } +}