Tab Borders
-
Hello,
I am trying to add a 1px border on the left and right side of tabs. I tried playing around with some of the selectors, but nothing so far has worked. I'd guess I have the wrong selectors. Does anyone happen to know what I should be looking for?
What I currently have is this:
.tab-position .tab { transform: skewX(-25deg); border-right: 1px grey !important; } .tab-position .tab .tab-header { transform: skewX(25deg); border-left: 1px grey !important; }
Have also played with
border-left
andborder-right
to no avail. The skew works perfectly, though. -
Try with
border-left: 1px solid gray
-
This works:
.tabs-top .tab-position { transform: skewX(-25deg); border-right: 1px solid gray; border-left: 1px solid gray; } .tabs-top .tab-position .tab-header { transform: skewX(25deg); }
-
@luetage said in Tab Borders:
Try with
border-left: 1px solid gray
Oh duh, I forgot the
solid
keyword. That helps.That just leaves figuring out a way to add a border to either the first tab (left border) or last tab (right border), to avoid all the middle ones having a double-thickness border. Do the tabs have any sort of nth-child selectors?
-
@erufael said in Tab Borders:
Do the tabs have any sort of nth-child selectors?
Yes they do!
Final version of code:See the post by @luetage below..tab-position .tab { transform: skewX(-25deg); border-left: 1px solid grey; } .tab-position .tab:nth-last-child(1) { border-right: 1px solid grey; } .tab-position .tab .tab-header { transform: skewX(25deg); }
This will produce this (using a modified theme for colors):
Thanks, @luetage!
-
@erufael Your code doesn't work. If you use your operating systems zoom you will see that you still got double borders. Just move a middle tab around while zoomed in and you will notice.
.tabs-top .tab-position { transform: skewX(-25deg); border-right: 1px solid gray; } .tabs-top span:first-of-type .tab-position { border-left: 1px solid gray; } .tabs-top .tab-position .tab-header { transform: skewX(25deg); }
This should do the trick.
-
I haven't tested this but using
:first-of-type
or:last-of-type
to the selector usually works.One example
.tabs-top .tab-position { border-left: 1px solid gray; } .tabs-top .tab-position:last-of-type { border-right: 1px solid gray; }
Or you can do it the other way around
-
@luetage ...I just noticed this, actually, and came back here to mention the issue. Good timing! lol
This does indeed do the trick. Thanks again for the help! Is there a way to see what selectors are available, or a way to inspect them, as in webpages?
-
@erufael Yeah, there is: https://forum.vivaldi.net/topic/16684/inspecting-vivaldi-s-ui-with-devtools
Good luck with your modding!
-
@luetage Perfect, thanks!
-