Rounded Tabs + Auto-Hide Side Panel in Vivaldi (Custom CSS) All window sizes supported

Partogi

Please help. The code does nothing at all.

I already inserted the code to custom.css and put it inside a folder named Autotab in the root of my D drive. I point the custom ui modification to that location.

mib2berlin

@Partogi
Hi, I am not sure if it work from a different partition.
I am on Linux at moment, have to test this on Windows.
Just move the file to Documents or something and test this.
The code is still working for me.

Thunderboltz18

@Partogi, check if the Vivaldi custom CSS is enabled as mentioned above , and check your folder position

Partogi

@Thunderboltz18

Screenshot 2025-05-16 at 09.10.52.png

Screenshot 2025-05-16 at 09.21.15.png

I tried on Mac but this time it's in Downloads folder. Still the same.

mib2berlin

@Partogi
Hi, do you may think this is for the web panels?
The mod is for tabs on the left.

bryk

Everything is bad, friend. You need to check in all possible modes.
We all use the browser differently.

How to open the sidebar if the window is not full screen?
Settings / Appearance / Normal mode - The sidebar becomes smaller than it should be, and the icons are not centered.
Settings / Sidebar / Show switcher - The icons are not centered.
The rounding of the tabs should match all elements and be controlled from the theme editor. For example, a variable: "border-radius: var(--radiusCap);"

Partogi

@mib2berlin Yes, I'm aware of that.

Currently I'm using tovifun autotab from github. It works well but sometimes although rare, it glitched.

But the css method from this thread doesn't work at all. I tried on both Windows and Mac.

mib2berlin

@Partogi
This is on Linux but I have it running on Windows 11 either.
Did you re/moved the tovifun autotab file from the CSS folder?

Thunderboltz18

@Partogi, check this code. If it works on your system

.tab {
    border-radius: 100px !important;
    height: 28px !important;
    width: 50px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.tab.tab-group {
    background-color: #FFD700 !important;
    border: 1px solid #E6B800 !important;
    color: black !important;
}

.tab:hover {
    background-color: #2a2727 !important;
}

/* === Transparent Address Bar === */
.UrlBar,
.addressfield {
    background-color: transparent !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border: none !important;
}

#status_info {
    font-size: 11px;
    opacity: 0.7;
}

/* === Auto-Hide Side Panel (Works in All Window Modes + Fullscreen) === */

/* Base state */
#panels-container {
    width: 1px !important;
    opacity: 0;
    position: absolute !important;
    z-index: 9999;
    transition: width 0.25s ease, opacity 0.25s ease;
    overflow: hidden;
    pointer-events: auto !important; /* Ensures hover works in fullscreen */
}

/* Expand when hovered */
#panels-container:hover,
#panels-container:has(#panels:hover, button:hover) {
    width: 35px !important;
    opacity: 1 !important;
}

/* Optional: always show in tiny window widths */
@media (max-width: 600px) {
    #panels-container {
        width: 35px !important;
        opacity: 1 !important;
    }
}

Partogi

It still doesn't work.

By the way, what is this code_text for? Do I need to put it in the .css also?

benjaminbojko

Thanks! This version worked for me to auto-hide panels with a smooth transition:

/* Variables */
:root {
	--fullscreen-collapsed-width: 1px;
	--normal-collapsed-width: 16px;
	--switch-width: 41px;
	--panel-group-width: 481px;
	--panel-combined-width: calc(var(--panel-group-width) + var(--switch-width));
	--panel-transition-duration: 0.15s;
}

/* Base state */
#panels-container {
	position: absolute !important;
	z-index: 9999;
	transition: width var(--panel-transition-duration) ease-in, opacity var(--panel-transition-duration) ease-in !important;
	pointer-events: auto !important; /* Ensures hover works in fullscreen */
	width: var(--fullscreen-collapsed-width) !important;
	opacity: 0 !important;
	overflow: hidden !important;
}

/* Expand when hovered */
#panels-container:hover, /* Stay open on hover */
#panels-container:focus, /* Stay open on container focus / until clicking outside */
#panels-container:focus-within /* Stay open on child focus / until clicking outside */
 {
	transition-timing-function: ease-out !important;
	opacity: 0.99999 !important; /* value of 1.0 causes flickering */
	width: var(--panel-combined-width) !important;
}

/* Increase hover area when not maximized/fullscreen */
#browser:not(.maximized) #panels-container:not(:hover) {
	width: var(--normal-collapsed-width) !important;
}

With the following panels settings:

janrif

@Thunderboltz18 said in Rounded Tabs + Auto-Hide Side Panel in Vivaldi (Custom CSS) All window sizes supported:

I've customized Vivaldi's UI with Custom CSS to achieve a clean and minimal experience with:

Rounded tabs for a sleek look
Auto-hide side panel, always accessible on hover (regardless of window size)
Fully compatible with Vivaldi’s custom UI system

Thanks for the mod; I've looking for rounded tabs for a while but I can't code.
Is this the result you had in mind for tabs? TIA

janrif

@Thunderboltz18 I would love to use your mod but every time I plug it in, the left pane doesn't open and F4 doesn't help and there is no pointer at the edge to open the frame.

I followed all the settings, etc so maybe there's something wrong at my end but I wouldn't know where to look w/o screwing up some other setting.

If you've gotten this comment before and have a fix, I'd like to give it a go. But no matter the outcome thanks for all the effort that you've made available for us.

brakck29u491

Hi all, I'm a new user reading through this thread trying to make sense of it - there is bits and bobs of code all over. Where is the latest code? Was the original post edited and updated?

mib2berlin

@brakck29u491
Hi, usually the coder update the first post and edit it with a new version.
Many coders lost interesst or have other things to do, publish code here but never update it again.
This code doesn't work anymore for me at Vivaldi 7.4.3684.46.
So I ask @Thunderboltz18 if he can check this, please?

Cheers, mib

brakck29u491

@benjaminbojko said in Rounded Tabs + Auto-Hide Side Panel in Vivaldi (Custom CSS) All window sizes supported:

Thanks! This version worked for me to auto-hide panels with a smooth transition:

/* Variables */
:root {
	--fullscreen-collapsed-width: 1px;
	--normal-collapsed-width: 16px;
	--switch-width: 41px;
	--panel-group-width: 481px;
	--panel-combined-width: calc(var(--panel-group-width) + var(--switch-width));
	--panel-transition-duration: 0.15s;
}

/* Base state */
#panels-container {
	position: absolute !important;
	z-index: 9999;
	transition: width var(--panel-transition-duration) ease-in, opacity var(--panel-transition-duration) ease-in !important;
	pointer-events: auto !important; /* Ensures hover works in fullscreen */
	width: var(--fullscreen-collapsed-width) !important;
	opacity: 0 !important;
	overflow: hidden !important;
}

/* Expand when hovered */
#panels-container:hover, /* Stay open on hover */
#panels-container:focus, /* Stay open on container focus / until clicking outside */
#panels-container:focus-within /* Stay open on child focus / until clicking outside */
 {
	transition-timing-function: ease-out !important;
	opacity: 0.99999 !important; /* value of 1.0 causes flickering */
	width: var(--panel-combined-width) !important;
}

/* Increase hover area when not maximized/fullscreen */
#browser:not(.maximized) #panels-container:not(:hover) {
	width: var(--normal-collapsed-width) !important;
}

With the following panels settings:

I get this transparent rectangle with your version. Also if I click the second element in my panel bar (the Notes), then the auto-hide stops working forever and I can no longer access the panel at all - even if I use keyboard shortcuts. Only way to bring it back is delete the CSS file, restart browser.

Any ideas?

brakck29u491

@Thunderboltz18 Thanks for creating this!! It's life changing on my tiny mac Air screen. Relaly boosts productivity.

One question, what's all the commented out code for? This is optional stuff we can enable?