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:
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:
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)
-
The tabs generated by your code look so nice. Especially they resemble the real tabs more vividly.
Would you make it usable with Vivaldi 5.0?
Thanks.
-
The actual question should be why don't we have the curved / rounded tab like Chrome does?
-
I can't figure out how to make it look the same in the latest version.
Here is as far as I got, if someone else wants to have a go at solving it.
I haven't touched this code in 4 years, so there's probably a lot that is broken.
setTimeout(function makeSvg(){ var footer = document.querySelector("#browser > svg > defs"); if (footer != null) { var path = document.createElement('clipPath'); path.id="tab_rounder_clip"; path.innerHTML = '<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"></path>'; footer.appendChild(path); } else { setTimeout(makeSvg, 500); } }, 500)
.tabs-top .tab.active::before, .tabs-top .tab.active::after { content: 'mm' !important; background: var(--colorAccentBg) !important; height: 30px !important; width: 33px !important; position: absolute !important; left: -33px !important; color: transparent !important; bottom: 0px !important; clip-path: url(#tab_rounder_clip) !important; -webkit-mask-image: none; } .tabs-top .tab.active::after { left: auto !important; right: -32px !important; transform: rotateY(180deg) !important; } .tabs-top .tab.active { border-top-left-radius: 0px !important; border-top-right-radius: 0px !important } @media screen and (max-width: 700px) { .tabs-top .tab.active::before, .tabs-top .tab.active::after { display: none !important } .tabs-top .tab.active { border-top-left-radius: var(--radiusHalf) !important; border-top-right-radius: var(--radiusHalf) !important } }
-
Nicer Rounding on Tabs?
Mine are also very rounded:
-
Thanks for taking effort. Thank you.
-
Great idea to round the bottom corners! Simple, streamlined but very graceful and elegant. Excellent!
-
@drkh said in Nicer Rounding on Tabs:
Great idea to round the bottom corners! Simple, streamlined but very graceful and elegant. Excellent!
Simply no cause it makes the tabs look detached.
-
That is exactly the look I want : Detached and Floating.
-
Look at the subtlety of the active tab in the second level as a icon:
//MODEDIT: a couple of following replies were off-topic and are now deleted
-
This post is deleted! -
This post is deleted! -
This post is deleted!