Rounded Tabs - CSS mod

Nyl

Follow CSS template to make the tabs rounded. It also modifies a few other things.

Rounded tabs:
Start page navigation background, search and icons with blur effect, following the other elements of the interface:
Adjustments in the task pane to make the list sizes more enjoyable (21/05/2024).

Now works with most theme combinations.
If you see strange things, please report me.

Remember @Vivaldi is the best!

CSS Code:

/*Title bar*/
.Vivaldi {
    top: 5px;
    left: 2px;
}

#titlebar {    
    top: 5px;
}

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

#browser.win .window-buttongroup button {
    border-radius: var(--radiusHalf);
}

/*Tool bar*/
#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;
}

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

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

        .address-top .mainbar {
            border: 0px;
        }
    }
}

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

.transparent-tabbar.tabs-top .button-toolbar.workspace-popup.tabbar-workspace-button {
    
    background-color: transparent;
}

.tabs-top {
    .maximized .vivaldi {
        height: 29px; 
    }
    .tab.active:not(.marked):not(.tab-mini):not(.tab-in-accordion):after,
    .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%);

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

            .tab,
            .tabs-bottom .tab-position .tab {
                margin-right: 2px;
                margin-left: 2px;
            }
        }
    }
}

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

/*Start Page*/

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

.startpage .startpage-navigation {
    background-color: var(--colorBgAlphaBlur);
    backdrop-filter: var(--backgroundBlur);
}

.speeddial .dial {
    backdrop-filter: var(--backgroundBlur);
}

/*Task panel*/
.calendar-grid-agenda .cal-tasks-row .cal-tasks-row-date.current {
    margin: 10px 0px 2px 0;
    /* padding: 7px 0px 7px 0; */
}

.calendar-grid-agenda .cal-tasks-row .cal-tasks-row-date {
    padding: 10px 0px 7px 0;
}

.calendar-grid-agenda .cal-tasks-row .cal-tasks-row-events .event-container {
    margin: 5px 0px 5px 0;
}

.calendar-event {
    margin: 0px 2px;
    padding: 10px 0px 10px 2px;

    .cal-event-body-content {
        margin-left: 22px;
    }
}

/*Notes*/
.sortselector {
    height: 32px;
    padding-left: 2px;
    .sortselector .sortselector-button {
        height: 32px;
    }
}

Pathduck

@Nyl Nice mod

But why override user theme colour preferences? Try to break your mod(s) into different uses - not everyone would like to change their theme colours.

And why hide Vivaldi button in a mod for "rounded tabs"?

By the way, if you want to hide V button, you can just do a display: none; instead of setting size to 0

Nyl

@Pathduck I appreciate the tips. I'll set up some options.

barbudo2005

@Nyl

Rounded tabs. You walk the virtuous path.

Nyl

This post is deleted!

barbudo2005

@Nyl

I don't use the V icon. Instead CTRL + M because I use it once every two months.

Why you use the accordion stacking? I think the two level stacking is much more cooler.

Nyl

@barbudo2005 I also don't use the V icon, I use the F2 key for day-to-day commands. But I left the option for those who want to use it. I also like to use two level stacking, but in this css I haven't adjusted that yet, it's kind of weird.

rafaelkbarros

Very nice mod!! Loved it! I think this is goind to be a tendecy in browsers UI, since firefox's last appearance update and now Opera's with Opera One! Anyway, is it possible to add some light shadow below the tab?

barbudo2005

@rafaelkbarros

Play with:

box-shadow: yourcolor 2px 2px 0px 0px !important;

rafaelkbarros

Thanks!!! I chose #c7c7c7 so as to give it a very light shadow. I just wonder if we could add some blur to it... sorry for disturbing you, but I'm really bad with css codes!!!

barbudo2005

@rafaelkbarros

You can play with the opacity of the color:

box-shadow: rgba(199,199,199,0.7) 2px 2px 0px 0px !important;

0.7 is the opacity.

rafaelkbarros

Cool!! Thanks!!!

Dancer18

I have tried this custom.css. But without the second part for speed dial, notes etc. I noticed that the X to close the window is no longer there. In my case the window buttons are on the left and the Vivaldi button is on the right.

Nyl

@Dancer18 I did a little update if you want to try again.

Nyl

Some improvements. Check main post.

Nyl

With the new updates in the snapshot version, where we can enable the rounded tabs in the experiments and with the adjustments made in the schedule view, this css has become obsolete. I will update it when I have new ideas.
Remembering that I liked the modifications made by the @Vivaldi team.

55trucker

@Nyl

Nicely Done! Thx very much...Just what I was looking for to mod the tabs.

55trucker

@Nyl said in Rounded Tabs - CSS mod:

.tabs-top { .maximized .vivaldi { height: 29px;

In your script I do not clearly see the entry that dictates the height of the tabs...
I'd like to compact the tab height,
making a change to the above entry to a smaller px doesn't shrink the tab height,

thx