Trapezoid overlapping blue tabs like chrome

dinkydau

I'm using this CSS for a look similar to how chrome used to be: blue trapezoid tabs that have some overlap.

Almost everything I know about CSS is what I've learned making this, so it could probably be better. For example: the active tab color is the same as the block that contains the address bar, but that's only because I manually configured my Vivaldi to use that color. The color is #efece7 so you can change that color code in the CSS and in your own theme (I have it set for both "Accent" and "Background") if you want. It also only works if the theme preference "Apply Accent Color to Window" is checked.

/* working exemple skew not on children: https://jsfiddle.net/tvsgoaj9/2/ */

/* smaller tabs (height) */
#tabs-container {
	height: 27px !important;
	background: linear-gradient(#7aace9, #7eabe1) !important;
}

.tab {
	color: #000000 !important;
	background-color: rgba(0, 0, 0, 0) !important; /* make the normal tab background invisible */
}

/* create trapezoid tab */
.tab::before {
	transform: perspective(20px) rotateX(10deg) translateY(-2px);
	
	border-top: 1px solid #333333;
	border-right: 1px solid #333333;
	border-left: 1px solid #333333;
	
	background: linear-gradient(to bottom, #b8d7ff, #a0c4f1); /* #a0c4f1 is the real chrome tab blue */
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	
	/* magic: */
	content: '';
	position: absolute;
	left:0;
	top:0;
	width: 100% !important;
	height: 100% !important;

	-webkit-mask-image: radial-gradient(circle at 0 0, rgba(0, 0, 0, 0) 0%, #000 0%) !important;
}

/* special treatment of the active tab */
.tab.active::before {
	background: linear-gradient(to bottom, #ffffff, #efece7);
	box-shadow: none;
}

#main {
	top: -1px;
	z-index: 1;
	border-top: 1px solid #333333;
}

/* move tab text */
.tab-header {
	transform: translateX(1%) translateY(-2.5px);
}

/* adjust new tab and settings buttons: */
.vivaldi {
	transform: translate(-1px, -2px);
	fill: #000000;
}
.newtab {
	transform: translate(6px, 1px);
}
.toggle-trash {
	transform: translateY(-2px);
}
.button-tabbar {
	fill: #000000 !important;
}

luna800

This post is deleted!

luna800

I like it, but the borders are pixelated is it somehow possible to fix this?

Darthagnon

I did an update to this code here; it now accounts for Vivaldi themes, and weird use cases.

luna800

Could you make a grey version? https://pbs.twimg.com/media/DnbRvbTVYAAjD9L.jpg

Darthagnon

@luna800 Have you tried my edit of this mod? It's here: https://forum.vivaldi.net/topic/36887/chrome-style-tabs/9
It requires this mod, too, for the full look: https://forum.vivaldi.net/topic/44679/mod-opera-look

End result is it should respect whatever colour settings you make in Vivaldi settings (unlike the original, which has hard-coded colours).

EDIT: (02/Apr/2020) I updated my mod today, fixed bugs.