Updated version 2:
This now more closely matches the tab rounding of firefox, with a nicer curve. It also disables the curving when the screen is small. However, there is now a fair amount of padding space to either side of the tab which starts to intrude on other elements.
A Possible future improvement might be to see if the clip path could be applied directly to the tab without having to make pseudo-elements.
custom.css:
.tabs-top .tab.active::before, .tabs-top .tab.active::after {
content: 'mm';
background: var(--colorAccentBg);
height: 30px;
width: 33px;
position: absolute;
left: -33px;
color: transparent;
bottom: 0px;
clip-path: url(#tab_rounder_clip);
}
.tabs-top .tab.active::after {
left: auto;
right: -32px;
transform: rotateY(180deg);
}
.tabs-top .tab.active {
border-top-left-radius: 0px;
border-top-right-radius: 0px
}
@media screen and (max-width: 700px) {
.tabs-top .tab.active::before, .tabs-top .tab.active::after {
display: none
}
.tabs-top .tab.active {
border-top-left-radius: var(--radiusHalf);
border-top-right-radius: var(--radiusHalf)
}
}
Custom.js:
var CLIP_PATH_D = 'M 0,31 C 12.284275,31 17.311144,22.728149 18.160676,14.235439 19.010208,5.7427293 24.864826,0 34,0 v 31 z';
setTimeout(function makeSvg(){
var footer = document.querySelector("#footer");
if (footer != null) {
var span = document.createElement('span');
span.innerHTML = '<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><defs><clipPath id="tab_rounder_clip"><path d="'+CLIP_PATH_D+'"></path></clipPath></defs></svg>';
footer.appendChild(span);
} else {
setTimeout(makeSvg, 500);
}
}, 500)
