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 /* 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. */ 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{ #tabbrowser-tabs{
--uc-tab-curve-size:17px; /* 10px looks about like chromium - 17px looks close to Australis tabs */ --uc-tab-curve-size:17px; /* 10px looks about like chromium - 17px looks close to Australis tabs */
--uc-tabs-scrollbutton-border: 0px; --uc-tabs-scrollbutton-border: 0px;
--tab-block-margin:0px; --tab-block-margin:0px;
--tab-min-height: 34px; --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{ .tabbrowser-tab{
@ -31,22 +34,28 @@ See the above repository for updates as well as full license text. */
position: absolute; position: absolute;
content: ""; content: "";
fill: color-mix(in srgb, currentColor 11%, transparent); 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)); 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-size: var(--uc-tab-curve-size);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position-y: bottom; background-position-y: bottom;
transform: scaleY(var(--uc-tab-vertical-transform)); transform: scaleY(var(--uc-tab-vertical-transform));
stroke-opacity: var(--uc-curve-stroke-opacity);
z-index:1; z-index:1;
} }
.tabbrowser-tab[selected] > stack::before, .tabbrowser-tab[selected] > stack::before,
.tabbrowser-tab[selected] > stack::after{ .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); 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:hover > stack::after,
.tabbrowser-tab[selected] > stack::after{ .tabbrowser-tab[selected] > stack::after{
left: auto; 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) } #tabbrowser-tabs{ --lwt-selected-tab-background-color: var(--toolbar-bgcolor) }
.tab-background[selected]{ --toolbar-bgcolor: transparent } .tab-background[selected]{ --toolbar-bgcolor: transparent }
.tabbrowser-tab .tab-background{ border-top: none !important; box-shadow: none !important; } .tabbrowser-tab .tab-background{ border-top: none !important; box-shadow: none !important; }
.tab-background[selected]::before{ .tab-background[selected]::before{
content: ""; content: "";
display: -moz-box; display: -moz-box;