From fea6e47687dc2a4336ac69c7d25e05b286ad115a Mon Sep 17 00:00:00 2001
From: MrOtherGuy <jastekken@outlook.com>
Date: Thu, 6 Jan 2022 17:36:44 +0200
Subject: [PATCH] curved-tabs: decrease stroke-opacity of the border

This patch also adds some comments for svg.context-properties.content.enabled
which is a requirement as well as make default theme have separate
background-color for curves.
---
 chrome/curved_tabs.css | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/chrome/curved_tabs.css b/chrome/curved_tabs.css
index fbcecdc..e8b43dc 100644
--- a/chrome/curved_tabs.css
+++ b/chrome/curved_tabs.css
@@ -1,14 +1,17 @@
 /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/curved_tabs.css made available under Mozilla Public License v. 2.0
 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 */
-
+/* Makes tabs more curvy
+ * Set svg.context-properties.content.enabled to true in about:config, 
+ * otherwise the bottom corners will be black
+ */
 #tabbrowser-tabs{
   --uc-tab-curve-size:17px; /* 10px looks about like chromium - 17px looks close to Australis tabs */
   --uc-tabs-scrollbutton-border: 0px;
   --tab-block-margin:0px;
   --tab-min-height: 34px;
-  --uc-tab-line-color: rgb(10, 132, 255);
+  --uc-tab-line-color: rgb(10, 132, 255); /* This is only used when the first optional section is enabled, see below */
+  --uc-curve-stroke-opacity: 0.8; /* used to decrease curve border contrast a bit. */
 }
 
 .tabbrowser-tab{
@@ -31,22 +34,28 @@ See the above repository for updates as well as full license text. */
   position: absolute;
   content: "";
   fill: color-mix(in srgb, currentColor 11%, transparent);
-  -moz-context-properties: fill,stroke;
+  -moz-context-properties: fill,stroke,stroke-opacity;
   left: calc(var(--uc-tab-curve-padding,0px) - var(--uc-tab-curve-size));
-  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgc3Ryb2tlLXdpZHRoPSIxLjIiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCIgdmlld0JveD0iMCAwIDE3IDE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KICA8cGF0aCBkPSJNMCAxNyBMMCAxNiBBMTYgMTYgMCAwIDAgMTYgMCBMIDE4IDAgTCAxOCAxNyBaIiBmaWxsPSJjb250ZXh0LWZpbGwiPjwvcGF0aD4NCiAgPHBhdGggZD0iTTAgMTYgQTE2IDE2IDAgMCAwIDE2IDAiIHN0cm9rZT0iY29udGV4dC1zdHJva2UiIGZpbGw9InRyYW5zcGFyZW50Ij48L3BhdGg+DQo8L3N2Zz4");
+  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgc3Ryb2tlLXdpZHRoPSIxLjIiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCIgdmlld0JveD0iMCAwIDE3IDE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KICA8cGF0aCBkPSJNMCAxNyBMMCAxNiBBMTYgMTYgMCAwIDAgMTYgMCBMIDE4IDAgTCAxOCAxNyBaIiBmaWxsPSJjb250ZXh0LWZpbGwiPjwvcGF0aD4NCiAgPHBhdGggZD0iTTAgMTYgQTE2IDE2IDAgMCAwIDE2IDAiIHN0cm9rZT0iY29udGV4dC1zdHJva2UiIHN0cm9rZS1vcGFjaXR5PSJjb250ZXh0LXN0cm9rZS1vcGFjaXR5IiBmaWxsPSJ0cmFuc3BhcmVudCI+PC9wYXRoPg0KPC9zdmc+");
   background-size: var(--uc-tab-curve-size);
   background-repeat: no-repeat;
   background-position-y: bottom;
   transform: scaleY(var(--uc-tab-vertical-transform));
+  stroke-opacity: var(--uc-curve-stroke-opacity);
   z-index:1;
 }
 
 .tabbrowser-tab[selected] > stack::before,
 .tabbrowser-tab[selected] > stack::after{
-  fill: var(--lwt-selected-tab-background-color,var(--toolbar-bgcolor)) !important;
+  fill: var(--tab-selected-bgcolor,var(--toolbar-bgcolor)) !important;
   stroke: var(--tabs-border-color,transparent);
 }
 
+.tabbrowser-tab[selected] > stack:-moz-lwtheme::before,
+.tabbrowser-tab[selected] > stack:-moz-lwtheme::after{
+  fill: var(--lwt-selected-tab-background-color,var(--toolbar-bgcolor)) !important;
+}
+
 .tabbrowser-tab:hover > stack::after,
 .tabbrowser-tab[selected] > stack::after{
   left: auto;
@@ -84,7 +93,6 @@ See the above repository for updates as well as full license text. */
 #tabbrowser-tabs{ --lwt-selected-tab-background-color: var(--toolbar-bgcolor) }
 .tab-background[selected]{ --toolbar-bgcolor: transparent }
 .tabbrowser-tab .tab-background{ border-top: none !important; box-shadow: none !important; }
-
 .tab-background[selected]::before{
   content: "";
   display: -moz-box;