Nicer Rounding on Tabs



  • I was getting fed up with the way the tabs, even when rounded, don't really blend into the address bar, they just sort of jut out of it. So I used the magic of clip-path and some other css junk to make this:

    0_1505750688099_Clipboard02.png

    Notice that the tab has far more rounding on the bottom side. I was trying to get ti to look more like firefox's tab rounding, but I don't think I quite got it right. It's a step in the right direction, though. If you have any suggestions on how to improve it further, I'd be glad to hear them.

    This mod comes in two parts, a custom.css file:

    .tabs-top .tab.active::before, .tabs-top .tab.active::after {
        content: 'mm';
        background: var(--colorAccentBg);
        height: 20px;
        width: 20px;
        position: absolute;
        left: -19px;
        color: transparent;
        bottom: -1px;
        clip-path: url(#tab_rounder_clip);
    }
    .tabs-top .tab.active::after {
        left: auto;
        right: -19px;
        transform: rotateY(180deg);
    }
    

    This makes a little coloured square before and after the tab, and then gives it a shape using an SVG clipping path.

    Now, due to the way CSS works, it doesn't support "path" elements in SVG, so you have to inject it separately, using this custom.js file:

    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="m6,20c8,0 14,-12 14,-20l0,20l-14,0z"></path></clipPath></defs></svg>';
            footer.appendChild(span);
        } else {
            setTimeout(makeSvg, 500);
        }
    }, 500)
    

    If anyone knows some css/svg trickery (inverted ellipses or something?) that would let me include the svg directly in the CSS, that would be great.

    Anyway, that's what I did with my afternoon. Hopefully some of you vivaldi modders will like this.

    P.S. This currently only works for tabs on top, but I can envisage it being made for any other direction fairly easily.



  • I had achieved something like firefox's tabs when I used tabs on top. But when V made changes that affected our ability to resize them, I went to tabs on the left and got rid of the code. I had pieced it together from this. Maybe it can be of some help still



  • @sjudenim That link has a pretty nice solution. Unfortunately, it relies on border colours and shadows which are not present in vivaldi by default, so that would require a whole other level of development.



  • Updated version 2:

    0_1505832281442_Clipboard02.png

    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)

Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.