mobile-config-firefox/chrome/curved_tabs.css
2021-04-25 06:39:08 +03:00

104 lines
No EOL
4.5 KiB
CSS

/* 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 */
#tabbrowser-tabs{
--uc-tab-curve-size:17px; /* 10px looks about like chromium - 17px looks close to Australis tabs */
--uc-tabs-scrollbutton-border: 0px;
--proton-tab-block-margin:0px;
--tab-min-height: 34px;
--uc-tab-line-color: rgb(10, 132, 255);
}
.tabbrowser-tab{
padding-inline: 0px !important; /* By default, proton tabs have 2px + 2px = 4px space between them */
}
#TabsToolbar{ --toolbarbutton-inner-padding: 6px !important; }
.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; }
.tabbrowser-tab:hover > stack::before,
.tabbrowser-tab:hover > stack::after,
.tabbrowser-tab[selected] > stack::before,
.tabbrowser-tab[selected] > stack::after{
width: var(--uc-tab-curve-size);
height: 100%;
display: block;
position: absolute;
content: "";
fill: var(--uc-tab-fill);
-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));
z-index:1;
}
.tabbrowser-tab[selected] > stack::before,
.tabbrowser-tab[selected] > stack::after{
fill: var(--lwt-selected-tab-background-color,var(--toolbar-bgcolor)) !important;
stroke: var(--tabs-border-color,transparent);
}
.tabbrowser-tab:hover > stack::after,
.tabbrowser-tab[selected] > stack::after{
left: auto;
right: calc(var(--uc-tab-curve-padding,0px) - var(--uc-tab-curve-size));
transform: scaleX(-1);
}
.tabbrowser-tab:hover > stack > .tab-background,
.tab-background[selected]{
border-radius: var(--uc-tab-curve-size) var(--uc-tab-curve-size) 0 0 !important;
overflow: -moz-hidden-unscrollable
}
#tabbrowser-tabs:not([positionpinnedtabs]) .tabbrowser-tab:first-child,
#tabbrowser-tabs[positionpinnedtabs] .tabbrowser-tab[pinned]+.tabbrowser-tab:not([pinned]){
margin-inline-start: var(--uc-tab-curve-size) !important;
}
#scrollbutton-up,
#scrollbutton-down{ border-block-width: var(--uc-tabs-scrollbutton-border,0px) !important; }
.tab-background[selected]{ border: 1px solid var(--tabs-border-color) !important; border-bottom: none !important }
.tab-context-line{
-moz-box-ordinal-group: 2;
margin-block: 0 !important;
}
/* Annoying fix to prevent hovering of last tab to trigger tab overflow, better solution wanted */
.tabbrowser-tab[last-visible-tab]{ margin-inline-end: var(--uc-tab-curve-size) !important; }
/* OPTIONAL - COLORS - show tabs border, selected tab line and make selected tab match the main toolbar color. Also disables tab shadow */
/*
#navigator-toolbox{ --tabs-border-color: color-mix(in srgb, currentcolor, transparent 80%) !important; }
#tabbrowser-tabs{ --lwt-selected-tab-background-color: var(--toolbar-bgcolor) }
.tabbrowser-tab .tab-background{ border-top: none !important; box-shadow: none !important; }
.tab-background[selected]::before{
content: "";
display: -moz-box;
height: 2px;
background: var(--uc-tab-line-color) !important;
}
*/
/* OPTIONAL - uncomment the following to flip the curves vertically - maybe useful for tabs on bottom ? */
/*
.tab-background{ -moz-box-direction: reverse }
.tabbrowser-tab:hover > stack > .tab-background,
.tab-background[selected]{ border-radius: 0 0 var(--uc-tab-curve-size) var(--uc-tab-curve-size) !important }
.tabbrowser-tab > stack::before{ transform: scaleY(-1) !important; }
.tabbrowser-tab > stack::after{ transform: scaleY(-1) scaleX(-1) !important; }
*/