Vivaldi вкладки в несколько строк, как в Tab Mix Plus

после строчки:

 

<span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name" style="color: rgb(228, 86, 73);"><span class="hljs-tag"><span class="hljs-name">link</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr" style="color: rgb(152, 104, 1);"><span class="hljs-tag"><span class="hljs-attr">rel</span></span></span><span class="hljs-tag">=</span><span class="hljs-string" style="color: rgb(80, 161, 79);"><span class="hljs-tag"><span class="hljs-string">"stylesheet"</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr" style="color: rgb(152, 104, 1);"><span class="hljs-tag"><span class="hljs-attr">href</span></span></span><span class="hljs-tag">=</span><span class="hljs-string" style="color: rgb(80, 161, 79);"><span class="hljs-tag"><span class="hljs-string">"style/multiline-tabs.css"</span></span></span><span class="hljs-tag"> /&gt;</span></span>

добавим строчку, которая будет загружать ещё и наш файл css. Пусть файл называется «multiline-tabs.css» и лежит в папке рядом с browser.html.

<span class="hljs-tag"><span class="hljs-tag">&lt;</span><span class="hljs-name" style="color: rgb(228, 86, 73);"><span class="hljs-tag"><span class="hljs-name">link</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr" style="color: rgb(152, 104, 1);"><span class="hljs-tag"><span class="hljs-attr">rel</span></span></span><span class="hljs-tag">=</span><span class="hljs-string" style="color: rgb(80, 161, 79);"><span class="hljs-tag"><span class="hljs-string">"stylesheet"</span></span></span><span class="hljs-tag"> </span><span class="hljs-attr" style="color: rgb(152, 104, 1);"><span class="hljs-tag"><span class="hljs-attr">href</span></span></span><span class="hljs-tag">=</span><span class="hljs-string" style="color: rgb(80, 161, 79);"><span class="hljs-tag"><span class="hljs-string">"multiline-tabs.css"</span></span></span><span class="hljs-tag"> /&gt;</span></span>

Создаем файл multiline-tabs.css и кладем рядом с browser.html

В него multiline-tabs.css помещаем код :

/* Multiline tabs */
#browser.tabs-bottom,
#browser.tabs-top {
  /* fix for small/mini tabs */
}
#browser.tabs-bottom #tabs-container,
#browser.tabs-top #tabs-container {
  height: auto !important;
}
#browser.tabs-bottom #tabs-container .resize,
#browser.tabs-top #tabs-container .resize {
  display: block !important;
}
#browser.tabs-bottom #tabs-container .sync-and-trash-container .synced-tabs-button,
#browser.tabs-top #tabs-container .sync-and-trash-container .synced-tabs-button {
  align-self: flex-end;
}
#browser.tabs-bottom .tab-strip,
#browser.tabs-top .tab-strip {
  display: flex;
  flex-wrap: wrap;
}
#browser.tabs-bottom .tab-strip > span,
#browser.tabs-top .tab-strip > span {
  display: inline-block;
}
#browser.tabs-bottom .tab-strip > span > .tab-position,
#browser.tabs-top .tab-strip > span > .tab-position {
  left: 0px !important;
  position: relative;
  height: 25px !important;
  width: auto !important;
}
#browser.tabs-bottom .tab-strip > span > .tab-position > .tab:not(.pinned),
#browser.tabs-top .tab-strip > span > .tab-position > .tab:not(.pinned) {
  max-width: 100px !important;
  min-width: 30px !important;
}
#browser.tabs-bottom .tab-strip > span > .tab-position > .tab.pinned,
#browser.tabs-top .tab-strip > span > .tab-position > .tab.pinned {
  width: 25px !important;
}
#browser.tabs-bottom .tab-strip > span > .tab-position .tab-header > .favicon > svg,
#browser.tabs-top .tab-strip > span > .tab-position .tab-header > .favicon > svg {
  height: 17px;
}
#browser.tabs-bottom .tab-strip .toolbar-tabbar,
#browser.tabs-top .tab-strip .toolbar-tabbar {
  margin-left: auto;
}
#browser.tabs-bottom .tab-strip .toolbar-tabbar .newtab,
#browser.tabs-top .tab-strip .toolbar-tabbar .newtab {
  left: 0 !important;
  top: 0 !important;
  position: relative !important;
  padding: 0;
  vertical-align: top;
}
#browser.tabs-bottom .tab-position .tab:hover.tab-small .close,
#browser.tabs-bottom .tab-position .tab.force-hover.tab-small .close,
#browser.tabs-top .tab-position .tab:hover.tab-small .close,
#browser.tabs-top .tab-position .tab.force-hover.tab-small .close {
  display: flex;
}
#browser.tabs-bottom .tab-position .tab:hover.active.tab-small .close,
#browser.tabs-bottom .tab-position .tab.force-hover.active.tab-small .close, #browser.tabs-bottom.linux.alt .tab-position .tab:hover.tab-small:not(.active) .favicon, #browser.tabs-bottom.linux.alt .tab-position .tab.force-hover.tab-small:not(.active) .favicon, #browser.tabs-bottom.mac .tab-position .tab:hover.tab-small:not(.active) .favicon, #browser.tabs-bottom.mac .tab-position .tab.force-hover.tab-small:not(.active) .favicon,
#browser.tabs-top .tab-position .tab:hover.active.tab-small .close,
#browser.tabs-top .tab-position .tab.force-hover.active.tab-small .close,
#browser.tabs-top.linux.alt .tab-position .tab:hover.tab-small:not(.active) .favicon,
#browser.tabs-top.linux.alt .tab-position .tab.force-hover.tab-small:not(.active) .favicon,
#browser.tabs-top.mac .tab-position .tab:hover.tab-small:not(.active) .favicon,
#browser.tabs-top.mac .tab-position .tab.force-hover.tab-small:not(.active) .favicon {
  display: flex;
}
#browser.tabs-bottom.win .tab-position .tab:hover.tab-small.active .title, #browser.tabs-bottom.win .tab-position .tab.force-hover.tab-small.active .title, #browser.tabs-bottom.linux:not(.alt) .tab-position .tab:hover.tab-small.active .title, #browser.tabs-bottom.linux:not(.alt) .tab-position .tab.force-hover.tab-small.active .title,
#browser.tabs-top.win .tab-position .tab:hover.tab-small.active .title,
#browser.tabs-top.win .tab-position .tab.force-hover.tab-small.active .title,
#browser.tabs-top.linux:not(.alt) .tab-position .tab:hover.tab-small.active .title,
#browser.tabs-top.linux:not(.alt) .tab-position .tab.force-hover.tab-small.active .title {
  display: flex;
}
#browser.tabs-bottom #tabs-container .tab.tab-small.tab-mini .tab-header,
#browser.tabs-bottom #tabs-container .tab.pinned.tab-mini .tab-header,
#browser.tabs-top #tabs-container .tab.tab-small.tab-mini .tab-header,
#browser.tabs-top #tabs-container .tab.pinned.tab-mini .tab-header {
  justify-content: initial;
  padding-left: 6px;
  padding-right: 0;
  border: none;
}
#browser.tabs-bottom #tabs-container .tab.tab-small.tab-mini .tab-header .title,
#browser.tabs-bottom #tabs-container .tab.pinned.tab-mini .tab-header .title,
#browser.tabs-top #tabs-container .tab.tab-small.tab-mini .tab-header .title,
#browser.tabs-top #tabs-container .tab.pinned.tab-mini .tab-header .title {
  display: flex;
} 

/*# sourceMappingURL=multiline-tabs.css.map */

Точно работает в версии Vivaldi 3.0.1874.38 .

Обнавленный код можно найти на странице проекта https://github.com/justdanpo/VivaldiHooks/tree/master/vivaldi/hooks