From cd0d556418aa8bcaf7b5bfe8e0b63020bec92af0 Mon Sep 17 00:00:00 2001 From: MrOtherGuy Date: Fri, 2 Oct 2020 11:49:57 +0300 Subject: [PATCH] Add support for tabs border color --- chrome/curved_tabs.css | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/chrome/curved_tabs.css b/chrome/curved_tabs.css index 9261f55..4c5c111 100644 --- a/chrome/curved_tabs.css +++ b/chrome/curved_tabs.css @@ -4,10 +4,11 @@ See the above repository for updates as well as full license text. */ /* Makes tabs more curvy. Also disables tab separators since there's no easy way to make the look good */ #tabbrowser-tabs{ - --uc-tab-curve-size: 10px; /* 10px looks about like chromium - 18px looks close to Australis tabs */ + --uc-tab-curve-size: 17px; /* 10px looks about like chromium - 17px looks close to Australis tabs */ } .tabbrowser-tab:hover{ --uc-tab-fill: rgba(0,0,0,.1) } +.tabbrowser-tab[selected]{ --uc-tab-curve-padding: 1px } #TabsToolbar[brighttext] .tabbrowser-tab:hover{ --uc-tab-fill: rgba(255,255,255,.1) } .titlebar-spacer[type="pre-tabs"], .tabbrowser-tab::after{ border: none !important; } @@ -22,22 +23,23 @@ See the above repository for updates as well as full license text. */ position: absolute; content: ""; fill: var(--uc-tab-fill); - -moz-context-properties: fill; - left: calc(0px - var(--uc-tab-curve-size)); - background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgc3Ryb2tlPSJ3aGl0ZSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogIDxwYXRoIGQ9Ik0wIDE2IEExNiAxNiAwIDAgMCAxNiAwIEwgMTYgMTYgWiIgZmlsbD0iY29udGV4dC1maWxsIiBzdHJva2U9Im5vbmUiPjwvcGF0aD4NCjwvc3ZnPg"); + -moz-context-properties: fill,stroke; + left: calc(var(--uc-tab-curve-padding,0px) - var(--uc-tab-curve-size)); + background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgc3Ryb2tlLXdpZHRoPSIxLjIiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCIgdmlld0JveD0iMCAwIDE3IDE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KICA8cGF0aCBkPSJNMCAxNyBMMCAxNiBBMTYgMTYgMCAwIDAgMTYgMCBMIDE4IDAgTCAxOCAxNyBaIiBmaWxsPSJjb250ZXh0LWZpbGwiPjwvcGF0aD4NCiAgPHBhdGggZD0iTTAgMTYgQTE2IDE2IDAgMCAwIDE2IDAiIHN0cm9rZT0iY29udGV4dC1zdHJva2UiIGZpbGw9InRyYW5zcGFyZW50Ij48L3BhdGg+DQo8L3N2Zz4"); background-size: var(--uc-tab-curve-size); background-repeat: no-repeat; background-position-y: bottom; - transform: scaleY(var(--uc-tab-vertical-transform)) + transform: scaleY(var(--uc-tab-vertical-transform)); + z-index:1; } .tabbrowser-tab[selected] > stack::before, -.tabbrowser-tab[selected] > stack::after{ fill: var(--toolbar-bgcolor) !important; } +.tabbrowser-tab[selected] > stack::after{ fill: var(--toolbar-bgcolor) !important; stroke: var(--tabs-border-color,transparent); } .tabbrowser-tab:hover > stack::after, .tabbrowser-tab[selected] > stack::after{ left: auto; - right: calc(0px - var(--uc-tab-curve-size)); + right: calc(var(--uc-tab-curve-padding,0px) - var(--uc-tab-curve-size)); transform: scaleX(-1); } @@ -52,6 +54,8 @@ See the above repository for updates as well as full license text. */ margin-inline-start: var(--uc-tab-curve-size) !important; } +.tab-background[selected]{ border: 1px solid var(--tabs-border-color) !important; border-bottom: none !important } + /* OPTIONAL - uncomment the following to flip the curves vertically - maybe useful for tabs on bottom ? */ /* .tab-background{ -moz-box-direction: reverse } @@ -59,4 +63,5 @@ See the above repository for updates as well as full license text. */ .tab-background[selected]{ border-radius: 0 0 var(--uc-tab-curve-size) var(--uc-tab-curve-size) } .tabbrowser-tab > stack::before{ transform: scaleY(-1) !important; } .tabbrowser-tab > stack::after{ transform: scaleY(-1) scaleX(-1) !important; } -*/ \ No newline at end of file +*/ +