Vivaldi: Centre Tabs in Tab Bar
March 10, 2023•243 words
Enable Custom CSS
- Visit
vivaldi://experiments - Tick
Allow CSS modifications
Create a Folder for CSS Files
- Create a folder in sync'ed cloud drive for multiple devices when CSS files changed to take effect
- Create the following CSS files
tab-bar.css
/* Centre tabs */
.tab-strip {
width:calc(100vw - 68px); display:flex; flex-direction:row;
justify-content:center;
}
.tab-position {
position:initial; --PositionX:0 !important;
}
.tab-strip .newtab {
left:0 !important;
}
/* Tab colours */
.tab-position >.tab:not(.active){
background-color:white !important; color:black !important;
}
.tab-position >.tab.active{
background-color:yellow !important; color:black !important;
}
/* Unused buttons */
.sync-and-trash-container { display:none; }
/* Optional: Emphasize icon of first tab (pin some special tab there)
matching the location of Windows 11 Start button */
.tab-strip >span:nth-child(1) .tab-header >.favicon {
overflow:visible !important;
}
.tab-strip >span:nth-child(1) .tab-header img {
/* Bigger icon */
width:22px; height:22px; position:relative; left:-3px; top:-3px;
}
/* EOF */
bookmark-bar.css
/* Centre bookmark items in bookmark bar */
.bookmark-bar .observer {
justify-content:center;
}
/* EOF */
Optional Fix: start-page.css
/* Optional: Prevent Vivaldi's default start page from overlapping new tab page
installed by extension, happens when a new window is opened,
especially the first window. */
.internal-page .startpage { display:none; }
/* EOF */
Optional Large Side Panel: side-panel.css
/* #panels-container { width:35px; } */
/* Side panel */
.panel-group { width:calc(80vw - 35px) !important; }
/* Side panel innner */
.panel-collapse-guard { max-width:none !important; }
/* EOF