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

curved-tabs: decrease stroke-opacity of the border

Browse source 
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.
This commit is contained in:
MrOtherGuy 2022-01-06 17:36:44 +02:00
parent 1fe5d315c0
commit fea6e47687
1 changed files with 15 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
chrome/curved_tabs.css
View file

@ -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;