Customizing vivaldi interface with css

Vivaldi's interface can be customized with css and can be inspected by developer tools.
Customizing vivaldi interface with css image 1
To be able to do so, vivaldi must be launched with parameters:
--flag-switches-begin --debug-packed-apps --silent-debugger-extension-api --flag-switches-end
with no other instances running.
Customizing vivaldi interface with css image 3
You can make a new css file with your changes in
resources/vivaldi/style
in vivaldi installation folder, which is for me
/opt/vivaldi/

You can include this file in
resources/vivaldi/browser.html
by
<link rel="stylesheet" href="style/custom.css" />
or in
resources/vivaldi/style/common.css
by
@import 'custom.css';
but both will be overwritten on update.
Customizing vivaldi interface with css image 5
And here is what i use:
div#tabs-container{
	padding-top:0px !important;
	padding-right:0px !important;
	height: 24px !important;
}
.tab-position{
	height: 20px !important;
	margin-left: 2px !important;
	margin-top: 2px !important;
}

.tab-position .tab {
	font-family: arial !important;
	font-size: 13px !important;
	height: 20px !important;
}
.tab-position .tab .tab-header {
	padding: 0px !important;
	flex: 0 0 20px !important;
}
.addressfield.focused, .searchfield.focused{ 
	box-shadow: none !important;
}
.tab-position .tab .favicon, .tab-position .tab .close {
	margin: 2px !important;
}
.tab-position .tab.active .tab-header .favicon {
	background-color: var(--colorFg) !important;
}
div.toolbar-addressbar{
	background-color: var(--colorBg) !important;
}
div.toolbar-addressbar div.toolbar{
	order:2;
	background-color: var(--colorBg) !important;
}
div.toolbar-addressbar div.addressfield{
	order:1;
}
div.toolbar-addressbar span.extensions-wrapper{
	order:3;
	padding-left: 6px !important;
	padding-right: 2px !important;
	background-color: var(--colorBg) !important;
}
div.toolbar button.rewind, div.toolbar button.next, div.toolbar button.home, div.trash{
	display: none !important;
}
.toolbar-addressbar .button-toolbar svg, .toolbar-mailbar .button-toolbar svg {
	width:20px !important;
}
.toolbar .button-toolbar {
	height:20px !important;
	min-width:20px !important;
	flex: 0 0 20px !important; 
}
.button-tabbar {
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	min-height: 20px !important;
	margin: 2px !important;
	top: 0px !important;
}
#tabs-container .newtab{
	height: 20px !important;
	margin: 2px !important;
	position: relative !important;
	float: right;
	padding: 0px;
	left: -22px !important;
}
button.vivaldi{
	width: 22px !important;
	height: 22px !important;
	z-index: 20;
}

#browser ::-webkit-scrollbar { width: 8px; }
#browser ::-webkit-scrollbar-thumb { background-color: var(--colorAccentBg); }
#browser ::-webkit-scrollbar-thumb:hover { background-color: var(--colorHighlightBg); }