Tabs like VIM's airline. How?

fry3000

replace to Modifications subforum

how to make from

this

like VIM's airline shape.
In ideal plus sign background and load percent background with accent shape too

Progress bar can be done easily with transform: skewX but how to make tabs shape and unread tabs with sign?

or maybe ideal this?

luetage

@fry3000 Some kind of ::after element perhaps and a CSS triangle? But then you run into issues with coloring the thing. Messing with tabs is messy in Vivaldi. This seems to be a complex problem.

Pathduck

@fry3000 Hi - when you create topics in the wrong forum or duplicates, please flag the topic/post for move/deletion instead of deleting the first post, it creates a mess of empty topics.

fry3000

This post is deleted!

fry3000

ok using https://bennettfeely.com/clippy/ we have

.tab-position .tab {
	clip-path: polygon(90% 0, 100% 50%, 90% 100%, 0% 100%, 10% 50%, 0% 0%);
	margin-left: -15px;
	transform: translate(13px,0);
	height: 31px;
}
.tab-position .tab .tab-header {
	margin-left: 8px;

}

#tabs-container .newtab svg path {
	d: path(
		'M18,12L14,12L14,8L12,8L12,12L8,12L8,14L12,14L12,18L14,18L14,14L18,14Z'
	);
	transform: translate(3px,0);
	fill: #000000;
}
.toolbar-tabbar .newtab > button svg {
	min-width: 40px;
	min-height: 31px;
/* 	margin-left: 3px; */
	margin-top: -11px;
	fill: #101010;
	clip-path: polygon(66% 0, 100% 50%, 66% 100%, 0% 100%, 34% 50%, 0% 0%);
	transform: translate(3px,0);
	background-color: #ff1744;
	
}
.toolbar-tabbar > .button-toolbar > button, .toolbar-tabbar > .toolbar-group > .button-toolbar > button {
	background: #transparent;
	opacity: 1;
	border: none;
}

.UrlBar-AddressField .pageload .pageload-indicator::-webkit-progress-bar {
	transform: skewX(-43deg);
	position: fixed;
	background-color: #101010 !important;
	height: 33px !important;
	margin-top: -5px;
}

problems:
1 - I can't understand how to make right side border (border does not fit shape, inner shadow not working)
2 - appears artifacts

fry3000

let's say the only way to make right side border this is add svg path in .tab:not(.active)

d: path(
	"M 8.988 8.5 L 3 0 L 3 2 L 7.5 8.5 L 3 15 L 3 17 Z");

Position on right side edge not working!
Another problem is the path cut off and it doesn't stretch to full height. How to solve this problem?

Pathduck

@fry3000 Really interesting to follow your progress here, and I think it will look very cool when done

The CSS is way over my level though, so not much I can be of help with

dude99

try box-shadow: inset -x y color. Ref: https://www.w3schools.com/cssref/css3_pr_box-shadow.asp

fry3000

@dude99
Tried. Doesn't work because any shadows doesn't fit clip-path.

I think here is necessary use the border with angle or svg path

fry3000

v4

fix artifacts
cleaning
selectable close button and ~~tabs height for match with progressbar~~

fry3000

with this ugly construction can make right side border

.tab:not(.active):after {
  content: '';
  width: 39px;
  height: 31px;
  clip-path: polygon(15% 0, 40% 50%, 15% 100%, 0% 100%, 25% 50%, 0% 0%);
  background: #ff1;
  position: absolute;
  top: 0px;
  margin-left: 112px;
}

But was revealed that tab(not active) and tab(hover) do not match width with tab(active). Why? I don't understand.

In addition with large ui scale this border can disappear.

full css - ui scale 75% (for ui 100% delete all font-size: xxx%;):
v5

fix all bugs and dimensions.
cleaning
add global colors settings at the beginning of the css

/* rammmma VIVALDI AIRLINE23 - ui scale 75% */

/* GLOBAL COLORS SETTINGS */
:root {
/* background ---- Settings>Themes>Editor>Accent) */
	--clrBack: #101010;
	
/* background fonts and buttons */
	--fntBack: #A5A7AB;
	
/* foreground ---- Settings>Themes>Editor>Background */
	--clrFore: #333335;
	
/* foreground fonts and buttons #D1D4D8 or #E8ECF0 */
	--fntFore: #D1D4D8;
	
/* accent ---- Settings>Themes>Editor>Highlight */
	--clrAccent: #FF1744;
	
/* fonts and buttons inside accent */
	--inAccent: #000000;
}


/* line 1 */
#header {
	background-color: var(--clrBack);
}
.tab-position .tab {
	clip-path: polygon(92% 0%, 100% 50%, 92% 100%, 0% 100%, 8% 50%, 0% 0%);
	border-radius: 0 !important;
	margin-left: -15px;
	height: 31px;
}
.tab-position .tab .tab-header {
	margin-left: 9px;

}
.tab-position .tab.pinned {
	clip-path: polygon(77% 0, 100% 50%, 77% 100%, 0% 100%, 24% 50%, 0% 0%);
}
.vivaldi {
	fill: var(--clrBack);
	background-color: var(--clrBack);
}
#tabs-container.top {
	margin-left: -19px;
}
.tab:not(.active) {
	background-color: var(--clrBack) !important;
	font-size: 125%;
	color: var(--fntBack) !important;
}


/*BORDER INSIDE non active TAB*/
/* .tab:not(.active):after {
  content: '';
  width: 39px;
  height: 31px;
  clip-path: polygon(15% 0, 40% 50%, 15% 100%, 0% 100%, 25% 50%, 0% 0%);
  background: #ff1;
  position: absolute;
  top: 0px;
  margin-left: 112px;
} */



.tab:not(.active):hover {
	background-color: var(--clrFore) !important;
	font-size: 125%;
	color: var(--fntFore) !important;
}
.tab.active {
	background-color: var(--clrFore) !important;
	font-size: 125%;
	color: var(--fntFore) !important;
}
.tab-strip {
	display: flex;
	flex-direction: row;
}
.tab-position {
	max-width: 114px;
	position: relative !important;
	left: auto !important;
	top: auto !important;
	transform: none;
}
/* .color-behind-tabs-on .tab-position .tab.unread {
	background-image: linear-gradient(
		270deg,
		var(--clrAccent) 6px,
		transparent 0px
	);
} */
.tab .close svg path {
/* thin close cross */
/* 	d: path("M 12 13 L 7 8 L 12 3 L 10 3 L 6 7 L 2 3 L 0 3 L 5 8 L 0 13 L 2 13 L 6 9 L 10 13 Z"); fill: var(--fntFore); */
	
/* bold close cross */
	d: path("M 14 13 L 9 8 L 14 3 L 11 3 L 7 7 L 3 3 L 0 3 L 5 8 L 0 13 L 3 13 L 7 9 L 11 13 Z"); fill: var(--clrAccent);
}
.tab .close {
	background-color: transparent;
	opacity: 1;
	transform: translate(-3px,0);
}
#tabs-container .newtab {
	position: relative !important;
	left: auto !important;
	top: auto !important;
	max-width: 130px;
	background: transparent;
}
#tabs-container .newtab svg path {
	d: path("M 18 12 L 14 12 L 14 8 L 12 8 L 12 12 L 8 12 L 8 14 L 12 14 L 12 18 L 14 18 L 14 14 L 18 14 Z");
	transform: translate(3px,0);
	fill: var(--inAccent);
}
.toolbar-tabbar .newtab > button svg {
	min-width: 40px;
	min-height: 31px;
	margin-top: -11px;
	border-radius: 0 !important;
	clip-path: polygon(74% 0, 100% 50%, 74% 100%, 0% 100%, 26% 50%, 0% 0%);
	transform: translate(-8px,1px);
	background-color: var(--clrAccent);
}
.toolbar-tabbar > .button-toolbar > button, .toolbar-tabbar > .toolbar-group > .button-toolbar > button {
	background: #transparent;
	opacity: 1;
}
#tabs-container .toggle-trash svg {
	display: none;
}
#browser .window-buttongroup button {
	width: 40px !important;
	margin-top: 5px;
	fill: var(--fntBack) !important;
}
#browser.win .window-buttongroup button:hover {
	background-color: var(--clrFore);
}
#browser.win .window-buttongroup button.window-close:hover {
	background-color: var(--clrAccent);
	fill: var(--inAccent) !important;
}
#browser.win .window-buttongroup button.window-close {
	background-color: var(--clrBack);
	fill: var(--fntBack) !important;
}


/* line 2 */
.toolbar .button-toolbar {
	width: 30px;
	max-height: 30px;
	background: transparent;
	fill: var(--fntFore);
}
.toolbar-mainbar .toolbar-extensions, .toolbar-mainbar {
	position: initial;
    height: 30px;
}
.toolbar-mainbar .toolbar-extensions > .button-toolbar > button,
.toolbar-mainbar > .button-toolbar > button,
.toolbar-mainbar .toolbar-extensions > .toolbar-group > .button-toolbar > button,
.toolbar-mainbar > .toolbar-group > .button-toolbar > button {
	height: 30px;
}
.toolbar > .button-toolbar,
.toolbar > .toolbar-wrap > .button-toolbar,
.toolbar > .toolbar-group > .button-toolbar,
.toolbar > input
.toolbar-mainbar > .button-toolbar > button,
.toolbar-mainbar > .button-toolbar > button svg:first-child,
.toolbar-mainbar > .toolbar-group > .button-toolbar > button svg:first-child,
.toolbar-mainbar > .button-toolbar > button img:first-child,
.toolbar-mainbar > .toolbar-group > .button-toolbar > button img:first-child {
	height: 20px;
	margin-top: 3px;
}
.SiteInfoButton,
.SiteInfoButton.secure,
.SiteInfoButton.insecure,
.SiteInfoButton .siteinfo-text,
.SiteInfoButton-SearchEngineFavicon,
.SiteInfoButton-SecurityBadge,
.SiteInfoButton.warning,
.SiteInfoButton.certified {
	display: none;
}
.ContentBlocker-Control {
	display: none;
}
.UrlBar-AddressField {
	background-color: var(--clrFore);
	border: 0;
	font-size: 125%;
	box-shadow: none !important;
	margin-left: 36px;
	height: 25px;
}
.UrlBar-AddressField,
.UrlBar-SearchField,
.UrlBar-AddressField:focus,
.UrlBar-SearchField:focus {
	border: none !important;
	outline: none !important;
	color: var(--fntFore);
	margin-top: -1px !important;
}
.UrlBar-AddressField .pageload .pageload-indicator {
	background-color: var(--clrFore);
	top: 0;
	border: none;
	border-radius: 0;
	left: 8px;
	margin-top: -2px;
}
.UrlBar-AddressField .pageload .pageload-indicator::-webkit-progress-bar {
	transform: skewX(-36deg);
	position: fixed;
	background-color: var(--clrBack);
	height: 31px;
}
.UrlBar-AddressField .pageload .pageload-indicator {
	opacity: 1;
}
.UrlBar-AddressField .pageload .pageload-indicator .theme-dark {
	opacity: 1;
}
.UrlBar-AddressField .pageload .pageload-indicator::-webkit-progress-value {
	background-color: var(--clrFore);
}
.UrlBar-AddressField .pageload .pageload-ticker {
	font-size: 85%;
}
.UrlBar-UrlObfuscationWarning {
	display: none;
}
.toolbar-extensions svg path {
	d: path("M 6 13 L 12 7 L 12 9 L 8 13 L 12 17 L 12 19 Z");
	color: var(--fntFore);
}
.address-top .mainbar > .toolbar-mainbar .toolbar-extensions:after,
.address-top .mainbar > .toolbar-mainbar:after {
	display: none;
}


/* line 3 */
.bookmark-bar {
	position: absolute !important;
	width: 29px;
	height: 29px;
	margin-top: 1px !important;
	margin-left: 94px !important;
}
.bookmark-bar button.chevron svg path {
	d: path("M 8 12 L 1 3 L 3 3 L 8 9.6 L 13 3 L 15 3 Z");
	fill: var(--fntFore);
}
.bookmark-bar button.chevron {
	width: 29px;
	height: 29px;
}
.dialog-add-bookmark .thumbnail-image,
.dialog-add-bookmark .description {
	display: none;
}
.addbookmark-cardwrapper .dialog-content {
	min-height: auto;
}

/* other */
/*#browser, #browser + div, #browser + div + div {
	font-size: 13.4px;
	font-family: TitilliumWeb !important;
}
#browser.win,
#browser.win + div, #browser.win + div + div,
#browser.win button, #browser.win input,
#browser.win select, #browser.win textarea {
	font-family: TitilliumWeb;
}*/
#browser.win input {
	margin-top: 1px;
}
#status_info span {
	background-color: var(--clrFore);
	font-size: 125%;
}
#browser.popup {
	background-color: var(--clrFore)5;
	font-size: 125%;
}
#panels-container {
	font-size: 125%;
}
.startpage .startpage-navigation {
	display: none !important;
}
.startpage {
	background-color: var(--clrFore) !important;
}
.searchfield {
	display: none !important;
}
.manager-editor .lower-half > div:nth-of-type(1),
.manager-editor .lower-half > div:nth-of-type(2) {
	display: none;
}
.addbookmark-cardwrapper .upper-half .preview,
.notes-cardwrapper .upper-half .preview {
	display: none;
}

jwilson79

༼⁰o⁰；༽꒳ᵒ꒳ᵎᵎᵎ That's awesomely impressive you got this to work. Kudos, I like!

fry3000

fix for v5.6 tab spacing issue

/* rammmma VIVALDI AIRLINE25 - - ui scale 75% . for ui 100% - remove all font-size: 125% */

/* GLOBAL COLORS SETTINGS */
:root {
/* background ---- Settings>Themes>Editor>Accent) */
	--clrBack: #101010;
	
/* background fonts and buttons */
	--fntBack: #A5A7AB;
	
/* foreground ---- Settings>Themes>Editor>Background */
	--clrFore: #333335;
	
/* foreground fonts and buttons #D1D4D8 or #E8ECF0 */
	--fntFore: #D1D4D8;
	
/* accent ---- Settings>Themes>Editor>Highlight */
	--clrAccent: #FF1744;
	
/* fonts and buttons inside accent */
	--inAccent: #000000;
}


/* line 1 */
#header {
	background-color: var(--clrBack);
	min-height: 30px !important;
}
.vivaldi {
	fill: var(--clrBack);
	background-color: var(--clrBack);
	height: 24px !important;
}
.tab-position .tab {
	clip-path: polygon(92% 0%, 100% 50%, 92% 100%, 0% 100%, 8% 50%, 0% 0%);
	border-radius: 0 !important;
	margin-left: -15px;
	height: 31px;
}
.tab-position .tab .tab-header {
	margin-left: 9px;

}
.tab-position .tab.pinned {
	clip-path: polygon(77% 0, 100% 50%, 77% 100%, 0% 100%, 24% 50%, 0% 0%);
}
.vivaldi {
	fill: var(--clrBack);
	background-color: var(--clrBack);
}
#tabs-container.top {
	margin-left: -19px;
}
.tab:not(.active) {
	background-color: var(--clrBack) !important;
	font-size: 125%;
	color: var(--fntBack) !important;
}





/* .tab:not(.active):after {
  content: '';
  width: 39px;
  height: 31px;
  clip-path: polygon(15% 0, 40% 50%, 15% 100%, 0% 100%, 25% 50%, 0% 0%);
  background: #ff1;
  position: absolute;
  top: 0px;
  margin-left: 112px;
} */








.tab:not(.active):hover {
	background-color: var(--clrFore) !important;
	font-size: 125%;
	color: var(--fntFore) !important;
}
.tab.active {
	background-color: var(--clrFore) !important;
	font-size: 125%;
	color: var(--fntFore) !important;
}
.tab-strip {
	display: flex;
	flex-direction: row;
}
.tab-position {
	max-width: 114px;
	position: relative !important;
	left: auto !important;
	top: auto !important;
	transform: none;
}
.color-behind-tabs-on .tab-position .tab.unread {
	background-image: linear-gradient(
	var(--clrFore) 3px,  
	transparent 0px
	);
}
.tab .close svg path {
/* thin close cross */
/* 	d: path("M 12 13 L 7 8 L 12 3 L 10 3 L 6 7 L 2 3 L 0 3 L 5 8 L 0 13 L 2 13 L 6 9 L 10 13 Z"); fill: var(--fntFore); */
	
/* bold close cross */
	d: path("M 14 13 L 9 8 L 14 3 L 11 3 L 7 7 L 3 3 L 0 3 L 5 8 L 0 13 L 3 13 L 7 9 L 11 13 Z"); fill: var(--clrAccent);
}
.tab .close {
	background-color: transparent;
	opacity: 1;
	transform: translate(-3px,0);
}
.page-progress-indicator {
	height: 2px;
}
.color-behind-tabs-on .page-progress-indicator::-webkit-progress-value {
	background-color: var(--clrAccent);
}
.tab-position .tab .favicon.progress {
	background-image: conic-gradient(var(--clrAccent) var(--progressInPercent), var(--colorFgAlpha) 0%);
}
#tabs-container .newtab {
	position: relative !important;
	left: auto !important;
	top: auto !important;
	max-width: 130px;
	background: transparent;
}
#tabs-container .newtab svg path {
	d: path("M 18 12 L 14 12 L 14 8 L 12 8 L 12 12 L 8 12 L 8 14 L 12 14 L 12 18 L 14 18 L 14 14 L 18 14 Z");
	transform: translate(3px,0);
	fill: var(--inAccent);
}
.toolbar-tabbar .newtab > button svg {
	min-width: 40px;
	min-height: 31px;
	margin-top: -11px;
	border-radius: 0 !important;
	clip-path: polygon(74% 0, 100% 50%, 74% 100%, 0% 100%, 26% 50%, 0% 0%);
	transform: translate(-8px,1px);
	background-color: var(--clrAccent);
}
.toolbar-tabbar > .button-toolbar > button, .toolbar-tabbar > .toolbar-group > .button-toolbar > button {
	background: #transparent;
	opacity: 1;
}
#tabs-container .toggle-trash svg {
	display: none;
}
#browser .window-buttongroup button {
	width: 40px !important;
	height: 23px !important;
	fill: var(--fntBack) !important;
}
#browser.win .window-buttongroup button:hover {
	background-color: var(--clrFore);
}
#browser.win .window-buttongroup button.window-close:hover {
	background-color: var(--clrAccent);
	fill: var(--inAccent) !important;
}
#browser.win .window-buttongroup button.window-close {
	background-color: var(--clrBack);
	fill: var(--fntBack) !important;
}


/* line 2 */
.toolbar .button-toolbar {
	width: 30px;
	max-height: 30px;
	background: transparent;
	fill: var(--fntFore);
}
.toolbar-mainbar .toolbar-extensions, .toolbar-mainbar {
	position: initial;
    height: 30px;
}
.toolbar-mainbar .toolbar-extensions > .button-toolbar > button,
.toolbar-mainbar > .button-toolbar > button,
.toolbar-mainbar .toolbar-extensions > .toolbar-group > .button-toolbar > button,
.toolbar-mainbar > .toolbar-group > .button-toolbar > button {
	height: 30px;
}
.toolbar > .button-toolbar,
.toolbar > .toolbar-wrap > .button-toolbar,
.toolbar > .toolbar-group > .button-toolbar,
.toolbar > input
.toolbar-mainbar > .button-toolbar > button,
.toolbar-mainbar > .button-toolbar > button svg:first-child,
.toolbar-mainbar > .toolbar-group > .button-toolbar > button svg:first-child,
.toolbar-mainbar > .button-toolbar > button img:first-child,
.toolbar-mainbar > .toolbar-group > .button-toolbar > button img:first-child {
	flex: 0 0 20px !important;
	height: 20px;
}
.button-toolbar svg path[d^="M20 6.20711C20 5.76166 19.4614 5.53857 19.1464 5.85355L17.2797"] {
  d: path("M 15 18 L 17 20 L 5 20 L 5 8 L 9 12 L 7 12 L 7 18 M 9 8 L 7 6 L 19 6 L 19 18 L 15 14 L 17 14 L 17 8");
}
.button-toolbar svg path[d^="M8.70711 7.29289C8.31658 6.90237 7.68342 6.90237 7.29289"] {
  d: path("M 11 13 L 6 6 L 8 6 L 13 13 L 18 6 L 20 6 L 15 13 L 20 20 L 18 20 L 13 13 L 8 20 L 6 20");
}
.SiteInfoButton,
.SiteInfoButton.secure,
.SiteInfoButton.insecure,
.SiteInfoButton .siteinfo-text,
.SiteInfoButton-SearchEngineFavicon,
.SiteInfoButton-SecurityBadge,
.SiteInfoButton.warning,
.SiteInfoButton.certified {
	display: none;
}
.ContentBlocker-Control {
	display: none;
}
.UrlBar-AddressField {
	background-color: var(--clrFore);
	border: 0;
	font-size: 125%;
	box-shadow: none !important;
	margin-left: 36px;
	height: 25px;
}
.UrlBar-AddressField,
.UrlBar-SearchField,
.UrlBar-AddressField:focus,
.UrlBar-SearchField:focus {
	border: none !important;
	outline: none !important;
	color: var(--fntFore);
	margin-top: -1px !important;
}
.UrlBar-AddressField .pageload .pageload-indicator {
	background-color: var(--clrFore);
	top: 0;
	border: none;
	border-radius: 0;
	left: 8px;
	margin-top: -2px;
}
.UrlBar-AddressField .pageload .pageload-indicator::-webkit-progress-bar {
	transform: skewX(-36deg);
	position: fixed;
	background-color: var(--clrBack);
	height: 31px;
}
.UrlBar-AddressField .pageload .pageload-indicator {
	opacity: 1;
}
.UrlBar-AddressField .pageload .pageload-indicator .theme-dark {
	opacity: 1;
}
.UrlBar-AddressField .pageload .pageload-indicator::-webkit-progress-value {
	background-color: var(--clrFore);
}
.toolbar-insideinput.toolbar-insideinput.toolbar-insideinput > .button-toolbar button,
.toolbar-insideinput.toolbar-insideinput.toolbar-insideinput > .toolbar-group > .button-toolbar button {
	margin-top: -2px;
}
.UrlBar-AddressField .pageload .pageload-ticker {
	font-size: 85%;
}
.UrlBar-UrlObfuscationWarning {
	display: none;
}
.toolbar-extensions svg path {
	d: path("M 6 13 L 12 7 L 12 9 L 8 13 L 12 17 L 12 19 Z");
	color: var(--fntFore);
}
.address-top .mainbar > .toolbar-mainbar .toolbar-extensions:after,
.address-top .mainbar > .toolbar-mainbar:after {
	display: none;
}


/* line 3 */
.bookmark-bar {
	position: absolute !important;
	width: 29px;
	height: 29px;
	margin-top: 1px !important;
	margin-left: 94px !important;
}
.bookmark-bar button.chevron svg path {
	d: path("M 8 12 L 1 3 L 3 3 L 8 9.6 L 13 3 L 15 3 Z");
	fill: var(--fntFore);
}
.bookmark-bar button.chevron {
	width: 29px;
	height: 29px;
}
.dialog-add-bookmark .thumbnail-image,
.dialog-add-bookmark .description {
	display: none;
}
.addbookmark-cardwrapper .dialog-content {
	min-height: auto;
}

/* other */
#browser, #browser + div, #browser + div + div {
	font-size: 13.4px;
	/*font-family: TitilliumWeb !important;*/
}
/*#browser.win,
#browser.win + div, #browser.win + div + div,
#browser.win button, #browser.win input,
#browser.win select, #browser.win textarea {
	font-family: TitilliumWeb;
}*/
#browser.win input {
	margin-top: -1px;
}
#status_info span {
	background-color: var(--clrFore);
	font-size: 125%;
}
#browser.popup {
	background-color: var(--clrFore)5;
	font-size: 125%;
}
#panels-container {
	font-size: 125%;
}
.startpage .startpage-navigation {
	display: none !important;
}
.startpage {
	background-color: var(--clrFore) !important;
}
.searchfield {
	display: none !important;
}
.manager-editor .lower-half > div:nth-of-type(1),
.manager-editor .lower-half > div:nth-of-type(2) {
	display: none;
}
.addbookmark-cardwrapper .upper-half .preview,
.notes-cardwrapper .upper-half .preview {
	display: none;
}

Tabs like VIM's airline. How?

Sorry, I'm currently hiatus from updating any of my CSS mod until further notice...