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

Add support for tabs border color

Browse source
This commit is contained in:
MrOtherGuy 2020-10-02 11:49:57 +03:00
parent b38ec91016
commit cd0d556418
1 changed files with 13 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
chrome/curved_tabs.css
View file

@ -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 }
@ -60,3 +64,4 @@ See the above repository for updates as well as full license text. */
.tabbrowser-tab > stack::before{ transform: scaleY(-1) !important; }
.tabbrowser-tab > stack::after{ transform: scaleY(-1) scaleX(-1) !important; }
*/