Rounded Tabs - CSS mod - Blur

Nyl

Following the style of my other post, it presents the round tabs with a blurred style background.

Here is css code and some theme settings to achieve this effect.

/*Novo*/
.Vivaldi {
    top: 5px;
    display: none;
}

#header {
    padding-top: 3px;
    padding-bottom: 3px;
    margin-left: -44px;
}

.tabs-top .tab-position .tab.insubstrip.active:not(.marked) {
    padding-bottom: 2px;
    margin-bottom: 0;
    border-radius: var(--radiusHalf);
}
.tabs-top .tab-position .tab, .tabs-bottom .tab-position .tab {
    margin-right: 2px;
    margin-left: 2px;
}

#tabs-container .tab:not(.tab-group) {
    border-radius: var(--radiusHalf);
}

.tabs-at-edge #tabs-tabbar-container.top, .native:not(.stacks-dotted) #tabs-tabbar-container.top {
    padding-top: 2px;
}

#browser > footer > .toolbar-statusbar {
    height: 28px;
}

.mainbar {
    color: var(--colorImageFg, var(--colorFg));
    background-color: var(--colorBgAlphaBlur);
}

.toolbar-mainbar .toolbar-extensions > .button-toolbar > button, 
.toolbar-mainbar .page-zoom-controls > 
.button-toolbar > button, .toolbar-mainbar > .button-toolbar > button, 
.toolbar-mainbar .toolbar-extensions > .toolbar-group > 
.button-toolbar > button, .toolbar-mainbar .page-zoom-controls > 
.toolbar-group > .button-toolbar > button, .toolbar-mainbar > 
.toolbar-group > .button-toolbar > button {
    border-radius: var(--radiusHalf);
}

.color-behind-tabs-off.address-top .mainbar {
    background: var(--colorBgAlphaBlur);
}

.color-behind-tabs-off .toolbar-mainbar .toolbar-extensions,
.color-behind-tabs-off .toolbar-mainbar .page-zoom-controls,
.color-behind-tabs-off .toolbar-mainbar {
    background-color: transparent;
    color: var(--colorImageFg, var(--colorFg));
    backdrop-filter: var(--backgroundBlur);
}

#browser.tabs-top #header {
    background-color: var(--colorBgAlphaBlur);
    backdrop-filter: var(--backgroundBlur);
}

.color-behind-tabs-off #tabs-subcontainer.top,
.transparent-tabbar #tabs-subcontainer.top {
    margin-left: 48px;
}

.transparent-tabbar.tabs-top .button-toolbar.workspace-popup.tabbar-workspace-button {
    border-radius: var(--radiusHalf); 
}

.transparent-tabbar.tabs-top .button-toolbar.workspace-popup.tabbar-workspace-button button {
    border-radius: var(--radiusHalf); 
}
.color-behind-tabs-off.address-top .mainbar {
    border: 0px;
}

.tabs-top .tab.active:not(.marked):not(.tab-mini):not(.tab-in-accordion):after,
.tabs-top .tab.active:not(.marked):not(.tab-mini):not(.tab-in-accordion):before {
    bottom: 0;
    -webkit-mask-image: radial-gradient(circle at 0 0, transparent, transparent 73%);
}

#header #titlebar .window-buttongroup {
    padding-top: 2px;
    padding-right: 1px;
}

.toolbar-tabbar.sync-and-trash-container {
    margin-right: 8px;
}


#webpage-stack {
    border-radius: var(--radiusHalf);
    border: 2px solid var(--colorBgAlphaBlur);
    margin: -2px;
}

#panels-container {
    background-color: transparent;
}

#panels-container.left:not(.icons) .panel-group, #panels-container.left.icons:not(:has(.SlideBar)) {
    border-right: 0px solid rgba(0, 0, 0, 0.1);
}

#switch {
    background-color: var(--colorBgAlphaBlur);
}

.panel-group {
    background-color: var(--colorBgAlphaBlur);
}

.tracker-warning,
.SpeedDialView-SearchField,
.SpeedDial-Blocked-Counter {
    backdrop-filter: var(--backgroundBlur);
    background-color: var(--colorBgAlphaBlur);
}

.startpage .startpage-navigation {
    color: var(--colorImageCenterFg);
    background-color: transparent;
    backdrop-filter: var(--backgroundBlur);
    box-shadow: inset 0 -2px 0 transparent;
}

:not(.tabs-bottom)#browser>footer {
    backdrop-filter: var(--backgroundBlur);
    background-color: var(--colorBgAlphaBlur);
}

.speeddial .dial {
    backdrop-filter: var(--backgroundBlur);
    background-color: var(--colorBgAlphaBlur);
}
;
.NotesManager {
    background-color: var(--colorBgAlphaBlur);
    backdrop-filter: var(--backgroundBlur);
}

.NotesManager-Note {
    background-color: var(--colorBgAlphaBlur);
    backdrop-filter: var(--backgroundBlur);
}

Another variation of the mod

/*Novo*/
.Vivaldi {
    top: 5px;
    display: none;
}

#header {
    padding-top: 3px;
    padding-bottom: 3px;
    margin-left: -46px;
}

.tabs-top .tab-position .tab.insubstrip.active:not(.marked) {
    padding-bottom: 2px;
    margin-bottom: 0;
    border-bottom-left-radius: var(--radiusHalf);
    border-bottom-right-radius: var(--radiusHalf);
}

#tabs-container .tab:not(.tab-group) {
    border-radius: var(--radiusHalf);
}

.mainbar {
    color: var(--colorImageFg, var(--colorFg));
    background-color: var(--colorBgAlphaBlur);
}

.color-behind-tabs-off.address-top .mainbar {
    background: var(--colorBgAlphaBlur);
}

.color-behind-tabs-off .toolbar-mainbar .toolbar-extensions,
.color-behind-tabs-off .toolbar-mainbar .page-zoom-controls,
.color-behind-tabs-off .toolbar-mainbar {
    background-color: transparent;
    color: var(--colorImageFg, var(--colorFg));
    backdrop-filter: var(--backgroundBlur);
}

#browser.tabs-top #header {
    background-color: var(--colorBgAlphaBlur);
    backdrop-filter: var(--backgroundBlur);
}

.color-behind-tabs-off #tabs-subcontainer.top,
.transparent-tabbar #tabs-subcontainer.top {
    margin-left: 48px;
}

.color-behind-tabs-off.address-top .mainbar {
    border: 0px;
}

.tabs-top .tab.active:not(.marked):not(.tab-mini):not(.tab-in-accordion):after,
.tabs-top .tab.active:not(.marked):not(.tab-mini):not(.tab-in-accordion):before {
    bottom: 0;
    -webkit-mask-image: radial-gradient(circle at 0 0, transparent, transparent 73%);
}

#header #titlebar .window-buttongroup {
    padding-top: 2px;
    padding-right: 1px;
}

.toolbar-tabbar.sync-and-trash-container {
    margin-right: 8px;
}


#webpage-stack {
    display: flex;
    flex: 1;
    contain: strict;
    border-radius: var(--radiusHalf);
    /* border: 1px solid var(--colorBorder); */

    margin-top: 1px;
    margin-bottom: 1px;
    margin-left: 1px;
    margin-right: 1px;
}


#panels-container {
    background-color: transparent;
}

#switch {
    background-color: var(--colorBgAlphaBlur);
    border-bottom-right-radius: var(--radiusHalf) ;    
    border-top-right-radius: var(--radiusHalf) ;    
    /* border: 1px solid var(--colorBorder); */
    margin-top: 1px;
    margin-bottom: 1px;
    /* margin-left: 2px; */
}

.panel-group {
    background-color: var(--colorBgAlphaBlur);
    border-radius: var(--radiusHalf);
    /* border: 1px solid var(--colorBorder); */
    
    margin-top: 1px;
    margin-bottom: 1px;
    margin-left: 1px;
}


.tracker-warning,
.SpeedDialView-SearchField,
.SpeedDial-Blocked-Counter {
    backdrop-filter: var(--backgroundBlur);
    background-color: var(--colorBgAlphaBlur);
}

.startpage .startpage-navigation {
    /* backdrop-filter: var(--backgroundBlur); */
    color: var(--colorImageCenterFg);
    background-color: transparent;
    box-shadow: inset 0 -2px 0 transparent;
}

:not(.tabs-bottom)#browser>footer {
    backdrop-filter: var(--backgroundBlur);
    background-color: var(--colorBgAlphaBlur);
}

.speeddial .dial {
    border-radius: var(--radius);
    backdrop-filter: var(--backgroundBlur);
    background-color: var(--colorBgAlphaBlur);
}
;
.NotesManager {
    background-color: var(--colorBgAlphaBlur);
    backdrop-filter: var(--backgroundBlur);
}

.NotesManager-Note {
    background-color: var(--colorBgAlphaBlur);
    backdrop-filter: var(--backgroundBlur);
}

mib2berlin

@Nyl
Hi, it looks very nice but cut the workspace and the Vivaldi icon left top:

Vivaldi 6.1.3035.111, Windows 11.

Cheers, mib

Nyl

@mib2berlin Thanks for the message, I will adjust it as soon as possible.