Chrome-style tabs

Darthagnon

EDIT4: Latest update (02 Apr 2020). Annoying bug fixed. I recommend you use this update: https://forum.vivaldi.net/topic/36887/chrome-style-tabs/12

EDIT3: massive update, see https://forum.vivaldi.net/topic/36887/chrome-style-tabs/8

EDIT2: 2020 update: https://forum.vivaldi.net/topic/36887/chrome-style-tabs/6

EDIT: Solved!! Scroll down for the final code, or see here: https://forum.vivaldi.net/topic/36887/chrome-style-tabs/3

crosspost from: https://forum.vivaldi.net/topic/36878/how-to-change-bookmarks-bar-colour-also-1px-border-below-address-bar/13

Sorry. Am back again... Do any of you nice people know how I could fix a 1px transparent gap that appears when "Remove Tab Spacing in Maximised Windows" is enabled?
All the modifications you've helped me with so far work perfectly with Vivaldi's default square tabs.

When trying to implement custom CSS for Chrome-shaped tabs, I get more 1px lines:

Remove tab spacing enabled (note 1px transparent gap)

Remove tab spacing disabled (note: no problem)

When I combine it with Safari-style undertabs, it isn't present, but toptabs have the problem shown in the screenshots.

/* Chrome-style trapezoid tabs
------------------------------------------------------------------------------------------------------------
by Darren J. de Lima. 
28/04/2019

Reshapes Vivaldi's square tabs to trapezoids, like Chrome pre-v70.
Known bugs: it ain't perfect, clipping off the ends of tabs. Also only looks good when tabs are set to top. Also tabs don't ever overlap, like Chrome did.
*/

/* Clip rectangular tabs to Chrome trapezoids */
#tabs-container.top .tab {
	clip-path: polygon(5% 0%, 95% 0%, 100% 100%, 0% 100%);
}

/* Invert trapezoids when tabs set to bottom (I recommend my safari-style-bottom.css) */
#tabs-container.bottom .tab {
	clip-path: polygon(0% 0%, 100% 0%, 95% 100%, 5% 100%);
}

Darthagnon

With Safari-style undertabs, I have no problem:

Safari Code I'm using:

/* Safari-style bottom tabs and bookmark bar
Source: https://www.reddit.com/r/vivaldibrowser/comments/6p4xfy/tabs_beneath_url_bar/
Source: https://forum.vivaldi.net/topic/15834/tabs-on-bottom-for-1-8/41?page=3
Source: https://forum.vivaldi.net/topic/23138/modding-the-address-bar-top-window-to-get-it-to-look-like-safari-browser

Instructions: set Tabs and Bookmark Bar to appear at "Bottom" and set menu position to "Horizonal Menu" (Optional) and Vivaldi will look like Safari.

*/

/* Hide header if Menu Position is "Vivaldi Button" (still accessible via Alt key). It will still show up if set to "Horizontal Menu". 
Source: https://github.com/rafaeljvieira/vivalditricks/blob/master/Skin/Slim%20Top%20Max.md
*/
#header {
	min-height: 0 !important;
	z-index: auto !important;
}


/* Change order of Tabs, Bookmarks Bar and Address Bar, when Tabs and Bookmark Bar are set to "Bottom": */
#tabs-container.bottom {
    order: -1;
/* Fix 1px gaps: */
/* Gets rid of line bit attached to the tabs. Prevents 1px hangovers on New Tab/Trash/Cloud buttons when "Apply Accent Colour to Window" is disabled. */
	border-top: 1px; 
/*	border-bottom: 1px; */
}
	/* Space above tabs */
	/*padding-top: 1px; */
}

.bookmark-bar-top .bookmark-bar {
  order: -2;
}

.toolbar.toolbar-addressbar {
    order: -3;
}

/* Keep Tab Stacks indicator at top of tabs: Comment to switch OFF (Recommended: OFF) */
/* Switch 
.stacks-on.tabs-bottom .tab-strip .tab-group-indicator {
    bottom: 28px;
}
  Switch */

Darthagnon

I managed to fix it! I guess CSS clipping is a bit funky; had do set some clips to 102%. Here's the code (works with Vivaldi v2.5). This will give you Chrome Trapezoid-shaped tabs. Enjoy!!!

/* Chrome-style trapezoid tabs
------------------------------------------------------------------------------------------------------------
by Darren J. de Lima. 
28/04/2019

Reshapes Vivaldi's square tabs to trapezoids, like Chrome pre-v70.
Known bugs: it ain't perfect, clipping off the ends of tabs.  Also tabs don't ever overlap, like Chrome did.
*/

/* Note: using 102% on vertical clipping, to ensure no transparent 1px lines appear. It works! */

/* Clip rectangular tabs to Chrome trapezoids */
#tabs-container.top .tab {
	clip-path: polygon(5% 0%, 95% 0%, 100% 102%, 0% 102%);
}

/* Invert trapezoids when tabs set to bottom (I recommend my safari-style-bottom.css) */
#tabs-container.bottom .tab {
	clip-path: polygon(0% 0%, 100% 0%, 95% 102%, 5% 102%);
}

/* Clipping the New Tab button to shape; applies to all the buttons (doesn't look good). Also, I can't figure out how to do a conditional check to invert the button shape direction for bottom tabs */
/*#browser:not(.ui-transparent-tabs) .toolbar-tabbar > .button-toolbar > button {
/*	clip-path: polygon(0% 0%, 80% 25%, 100% 102%, 0% 102%); /* Funky! (especially if you experiment with clipping other stuff ;) */
/*	clip-path: polygon(5% 0%, 95% 0%, 100% 102%, 0% 102%); /* Less funky alternative */
/*}
*/

Darthagnon

Small bug I noticed is present (and have no idea how to fix):

When windows are not maximised full-screen, tab stack indicators disappear. Works perfectly in full-screen mode, though... Can anyone help me?

Darthagnon

Update: I managed to fix the CSS. It now works perfectly with tab stacks in full screen and in windowed mode. I'll post an update here soon. TL;DR, the clip path 0% shouldn't be 0%, but a higher number.

I might merge a few CSS mods into one, so that this one give a full Chrome and (optional) Safari look to Vivaldi.

Darthagnon

18/02/2020 Update (tab-stacking issue fixed)

/* Chrome-style trapezoid tabs
------------------------------------------------------------------------------------------------------------
by Darren J. de Lima. 
Updates:
18/02/2020 - Update, fixed non-maximised windows not showing tab stack indicators
28/04/2019 - Initial release


Reshapes Vivaldi's square tabs to trapezoids, like Chrome pre-v70 (see Chromium 54.0.2840.99 and tab flags).

Known bugs: 
 - It ain't perfect, clipping off the ends of tabs.  
 - Also tabs don't ever overlap, like Chrome did.
 - Note: using 102% on vertical clipping, to ensure no transparent 1px lines appear. It works! 
 - Note: using -15% on a couple of former 0% clips makes tab stack indicators visible.
 - Note: this CSS only reshapes the tabs; for Chrome-like close tab buttons (round, red, always visible), I recommend my tab-close-button.css
*/


/* Clip rectangular tabs to Chrome trapezoids */
#tabs-container.top .tab {
	clip-path: polygon(5% -15%, 95% -15%, 100% 102%, 0% 102%);
}

/* Invert trapezoids when tabs set to bottom (I recommend my safari-style-bottom.css) */
#tabs-container.bottom .tab {
	clip-path: polygon(0% 0%, 100% 0%, 95% 115%, 5% 115%);
}

/* Clipping the New Tab button to shape; applies to all the buttons (doesn't look good). Also, I can't figure out how to do a conditional check to invert the button shape direction for bottom tabs */
/*#browser:not(.ui-transparent-tabs) .toolbar-tabbar > .button-toolbar > button {
/*	clip-path: polygon(0% 0%, 80% 25%, 100% 102%, 0% 102%); /* Funky! (especially if you experiment with clipping other stuff ;) */
/*	clip-path: polygon(5% 0%, 95% 0%, 100% 102%, 0% 102%); /* Less funky alternative */
/*}
*/

Darthagnon

I discovered someone else has done something similar, replicating Chrome's tabs more closely (https://forum.vivaldi.net/topic/43148/trapezoid-overlapping-blue-tabs-like-chrome) but glitching out completely with Tab Stacks, and overriding Vivaldi colour settings.

The ideal solution would be a combination of his and mine, as the alternate method doesn't clip anything off tabs.

Darthagnon

Beta release of Chrome Trapezoid Tabs 2 Reloaded

chrome_trapezoid_tabs2.css:

/* Chrome Trapezoid Tabs 2 Reloaded
Originally called: "Trapezoid overlapping blue tabs like chrome"
Source:
https://forum.vivaldi.net/topic/43148/trapezoid-overlapping-blue-tabs-like-chrome

Originally by @dinkydau, modified by @Darthagnon/DJDL, makes Vivaldi look like old Chrome v54 and is no longer "blue", but respects whatever colour scheme you choose in Vivaldi Themes.

NB includes compatibility patches for a custom CSS that uses alternate colouring to vanilla Vivaldi, so it might look a little weird on your system if you're not using my "tabs.css" 

Version history:
 - v2 (04/03/2018) modified by DJDL to to respect Vivaldi themes, and compatibility with DJDL's custom tabs.css (Opera-style, fakes Window Glass on Win10)
 - v1 (31 Dec 2019) by dinkydau, working exemple skew not on children: https://jsfiddle.net/tvsgoaj9/2/ 
*/


#tabs-container:not(.left):not(.right) .tab {
	/* make the normal tab background invisible */
	background-color: rgba(0, 0, 0, 0) !important; 
}

/* make inactive tab background invisible (compatibility)
compatibility patch for my tabs.css fake Windows Glass Opera-style recolor */
#tabs-container:not(.left):not(.right) .tab:not(.active) {
	background-color: rgba(0, 0, 0, 0) !important;
}

#tabs-container.top .tab::before {
	
	/* create trapezoid tab */
	transform: perspective(30px) rotateX(10deg) translateY(-1.5px);
	
	/* add 1px border to tabs */
	border-top: 1px solid var(--colorFg);
	border-right: 1px solid var(--colorFg);
	border-left: 1px solid var(--colorFg);
	
	/* set active tab colour */
/*	background: var(--colorAccentBg); /* or --colorBg SEEMS TO DO NOTHING*/
	
	/* 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;
}

/* same as above, inverted for bottom tabs */
#tabs-container.bottom .tab::before {
	transform: perspective(30px) rotateX(-10deg) translateY(0px); /* BUG: translateY doesn't work here, to connect the active tab with the line */
	border-bottom: 1px solid var(--colorFg);
	border-right: 1px solid var(--colorFg);
	border-left: 1px solid var(--colorFg);
	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;
}

/* respect tab transparency settings (universal tab placement)*/
#browser.ui-transparent-tabs .tab:not(.active)::before {
	border-top: none;
	border-right: none;
	border-left: none;
}

/* special treatment of the active tab, Compatibility patches for .color-behind-tabs */
.color-behind-tabs-on .tab.active::before {
	background: var(--colorBg) !important; 
}
.color-behind-tabs-off .tab.active::before {
	background: var(--colorAccentBg) !important; 
}


/* special treatment of inactive tabs, preserve transparency setting */
#browser:not(.ui-transparent-tabs) .tab:not(.active)::before {
	background: linear-gradient(to bottom, var(--colorBg), var(--colorBorder)) !important;
}
/* OPTIONAL: need to invert gradient for bottom tabs; add #tabs-container.top to the above segment. IMO though it looks better if both are the same gradient, so OFF by default.*/
/* SWITCH
#browser:not(.ui-transparent-tabs) #tabs-container.bottom .tab:not(.active)::before {
	background: linear-gradient(to top, var(--colorBg), var(--colorBorder)) !important;
}
SWITCH */

/* add 1px border along the top of the address bar
BUG: adds 1px at bottom of screen, due to interaction with ve_lite_thetiamarth.css 
BUG: cannot add 1px for bottom of bookmarks/address bars, due to interaction with safari.css
doesn't work: 	border-bottom: 1px solid var(--colorFg); */
#main {
	top: -1px;
	bottom: -1px;
	z-index: 1;
	border-top: 1px solid var(--colorFg);
}

/* switched off 1px lower border, as I cannot get it working. It looks good enough. */
/* SWITCH
.tabs-bottom .bookmark-bar {
	border-bottom:  1px solid var(--colorFg);
}
SWITCH */

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

/* adjust new tab and settings buttons: */
.vivaldi {
	transform: translate(-1px, -2px);

}

.newtab {
	transform: translate(6px, 1px);
}

As this is beta, it probably will look a bit weird on your system, because I use some other custom CSS to adjust the colour of non-transparent tabs and a safari-style bottom tabs mod. EDIT2: I also use other custom CSS by u/Tiamarth iirc to make the address bar rounded, and some other CSS to make the tab close buttons always appear (and highlight round and red, like Chrome), but I don't have time to search for it at the moment.
I'll post everything I use on GitHub eventually.

Here's some screenshots:
chrome vivaldi 1
chrome vivaldi 2
it even changes with your theme

It's based off @dinkydau's code, but improves on it by accounting for alternate use cases, and changes colour with your theme settings. see here for his original code

Darthagnon

Bug: it currently makes a 1-2px line at the bottom of maximised Vivaldi windows. I've got no idea how to fix this; if any of you do, I'd sure appreciate the help!

skribb

@Darthagnon said in Chrome-style tabs:

and some other CSS to make the tab close buttons always appear (and highlight round and red, like Chrome), but I don't have time to search for it at the moment.
I'll post everything I use on GitHub eventually.

may i please have the always-appear-close-tabs-button CSS?

Darthagnon

@skribb I originally based it on ideas from here: https://forum.vivaldi.net/topic/10629/vivaldi-ui-customisations/2

here's what I use, commented:

* Always show the tab close button 
* Source: https://forum.vivaldi.net/topic/10629/vivaldi-ui-customisations/2
* by Darren J. de Lima
* 25/04/2019
*/

/* Force Close Tab button to be always visible */
.tab-position .tab .close {
  display: block !important;
}

/* Idle Close Tab button parameters */
.close {
	
/* Round Close Tab button */
 border-radius: var(--radiusRound);
/* Very square Close Tab button, ## can be anything; comment both of these lines to restore to default shape */
/* border-radius: var(--radiusRounded)*1; */
/* Adjust colour of idle Close Tab button here (default is OK, 0.0 transparency makes it look like old Chrome: */
 background-color: rgba(227, 66, 62, 0.0);
 
}

/* Close Tab button turns red on hover */
.close:hover {

 border-radius: var(--radiusRound);
/* border-radius: var(--radiusRounded)*1; */
/* Same red as Win10 close window button */
 background-color: rgba(227, 66, 62, 0.8);

}

/* Close Tab button when pressed: */
.close:active {

  border-radius: var(--radiusRound);
/* border-radius: var(--radiusRounded)*1; */
/* Adjust colour of Close Tab button when pressed here, if desired (default black is OK): */
/* background-color: rgba(0, 0, 0, 0.8); */

}

Darthagnon

annoying 1px line but solved here

EDIT: Just did a quick hotfix - there was a bug when "Apply accent colour to window" was unchecked.

Updated code (NB be sure to use Chrome close button and Opera look CSS for the best experience!!!):

/* Chrome Trapezoid Tabs 2 Reloaded
Originally called: "Trapezoid overlapping blue tabs like chrome"
Source:
https://forum.vivaldi.net/topic/43148/trapezoid-overlapping-blue-tabs-like-chrome

Originally by @dinkydau, modified by @Darthagnon/DJDL, makes Vivaldi look like old Chrome v54 and is no longer "blue", but respects whatever colour scheme you choose in Vivaldi Themes.

NB includes compatibility patches for a custom CSS that uses alternate colouring to vanilla Vivaldi, so it might look a little weird on your system if you're not using my "tabs.css" 

Version history:
 - v3 (02/04/2020) modified further by DJDL, fixed annoying 1px line at bottom of screen, made unread tabs noticeable again. Corrected timetravel in this changelog LOL
 - v2 (04/03/2020) modified by DJDL to to respect Vivaldi themes, and compatibility with DJDL's custom tabs.css (Opera-style, fakes Window Glass on Win10)
 - v1 (31 Dec 2019) by dinkydau, working exemple skew not on children: https://jsfiddle.net/tvsgoaj9/2/ 
*/


#tabs-container:not(.left):not(.right) .tab {
	/* make the normal tab background invisible */
	background-color: rgba(0, 0, 0, 0) !important; 
}

/* make inactive tab background invisible (compatibility)
compatibility patch for my tabs.css fake Windows Glass Opera-style recolor */
#tabs-container:not(.left):not(.right) .tab:not(.active) {
	background-color: rgba(0, 0, 0, 0) !important;
}

#tabs-container.top .tab::before {
	
	/* create trapezoid tab */
	transform: perspective(30px) rotateX(10deg) translateY(-1.5px);
	
	/* add 1px border to tabs */
	border-top: 1px solid var(--colorFg);
	border-right: 1px solid var(--colorFg);
	border-left: 1px solid var(--colorFg);
	
	/* magic by @dinkydau */
	content: '';
	position: absolute;
	left:0;
	top:0;
	width: 100% !important;
	height: 100% !important;

	/* do shading/background of tabs */
	-webkit-mask-image: radial-gradient(circle at 0 0, rgba(0, 0, 0, 0) 0%, #000 0%) !important;
}

/* same as above, inverted for bottom tabs */
#tabs-container.bottom .tab::before {
	transform: perspective(30px) rotateX(-10deg) translateY(0px); /* BUG: translateY doesn't work here, to connect the active tab with the line */
	border-bottom: 1px solid var(--colorFg);
	border-right: 1px solid var(--colorFg);
	border-left: 1px solid var(--colorFg);
	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;
}

/* respect tab transparency settings (universal tab placement)*/
#browser.ui-transparent-tabs .tab:not(.active)::before {
	border-top: none;
	border-right: none;
	border-left: none;
}

/* special treatment of the active tab, Compatibility patches for .color-behind-tabs */
.color-behind-tabs-on .tab.active::before {
	background: var(--colorBg) !important; 
}
.color-behind-tabs-off .tab.active::before {
	background: var(--colorAccentBg) !important; 
}
/* overwrite active tab bottom border (hides 1px address bar border from cutting active tab)*/
.color-behind-tabs-on .tab.active::before {
	border-bottom: 1px solid var(--colorBg);
}
.color-behind-tabs-off .tab.active::before {
	border-bottom: 1px solid var(--colorAccentBg);
}

/* special treatment of inactive tabs, preserve transparency setting */
#browser:not(.ui-transparent-tabs) .tab:not(.active)::before {
	background: linear-gradient(to bottom, var(--colorBg), var(--colorBorder)) !important;
}

/* add 1px border along the top of the address bar */
#main {
	border-top: 1px solid var(--colorFg); /* line along top of address bar. Should appear to go over the active tab, then in front of background tab, along address bar top */
}

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

/* adjust new tab and settings buttons: */
.vivaldi {
	transform: translate(-1px, -2px);

}

.newtab {
	transform: translate(6px, 1px);
}

 /* Make unread tabs font bold and italic (I already use active tab = bold), since unread indicator is almost invisible and can't be customised afaik */
.tab-position .tab.unread {
	font-weight: bold;
	font-style: italic;
}


/* Optional and bugs----------------------------------------------------------------------------------------- */

/* OPTIONAL: need to invert gradient for bottom tabs; add #tabs-container.top to the above segment. IMO though it looks better if both are the same gradient, so OFF by default.*/
/* SWITCH
#browser:not(.ui-transparent-tabs) #tabs-container.bottom .tab:not(.active)::before {
	background: linear-gradient(to top, var(--colorBg), var(--colorBorder)) !important;
}
SWITCH */

/* BUG: cannot add 1px for bottom of bookmarks/address bars, (due to interaction with safari.css???). Switched off 1px border for tabs on bottom, as I cannot get it working. It looks good enough. */
/* SWITCH
.tabs-bottom .bookmark-bar {
	border-bottom:  1px solid var(--colorFg);
}
SWITCH */

Pathduck

@Darthagnon You should always update your code in the first post so others can easily find the updated version without having to scroll through the whole thread.

And maybe put it on pastebin.com or even better on Github

Darthagnon

I'll put it on GitHub soon

luna800

~~With your CSS text in inactive tabs is invisible, any solution?~~
my mistake