is there any way to make the tab bar autohide like how edge does it?

[Revnae]

like i kinda want it to be like this https://arc.tovi.fun/assets/screenshot=2.jpg

but when i hover over that i shows the full tab

[everpromos]

Yes, agree

[tovifun]

I’m working on it. It’s a bit difficult for me.😂

[everpromos]

👍👍👍

On Thu, Aug 29, 2024 at 10:23 PM Tovi @.***> wrote:

I’m working on it. It’s a bit difficult for me.😂

— Reply to this email directly, view it on GitHub https://github.com/tovifun/VivalArc/issues/21#issuecomment-2317859211, or unsubscribe https://github.com/notifications/unsubscribe-auth/BILZSMPL5LO26ILOBX7DMXTZT4VEZAVCNFSM6AAAAABKPGQV56VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMJXHA2TSMRRGE . You are receiving this because you commented.Message ID: @.***>

[Zettry]

@tovifun I tried to achieve this effect, but there are still some issues.

The changes are as follows:

1. Comment out the tabbar margin setting in vivalarc.css;

2. Create a new file called vivalarc-tabbar.css in the config folder.

:root{
    --tabbar-size: 32px;
}

/* tabbar workspace */
.inner > .tabbar-wrapper:not(:hover) .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu{
    width: var(--tabbar-size)!important;
}
.inner > .tabbar-wrapper:not(:hover) .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu .button-title,
.inner > .tabbar-wrapper:not(:hover) .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu .button-toolbar-menu-indicator{
    display: none;
}

/* tabbar container */
.inner > .tabbar-wrapper:not(:hover) #tabs-tabbar-container,
.inner > .tabbar-wrapper:not(:hover) #tabs-tabbar-container .resize{
    width: var(--tabbar-size)!important;
}

/* tab stacking - accordion toggle arrow position */
#tabs-container.left .tab-position.accordion-toggle-arrow{
    --PositionX: 4px!important;
}

.inner > .tabbar-wrapper{
    position: relative;
    width: var(--tabbar-size);
}

.inner > .tabbar-wrapper > .tabbar-wrapper{
    position: absolute;
    background-image: url("chrome://vivaldi-data/thumbnail/WVKXPHMBICN2BPZCJFRT6B4RYYRCN6JS.png");
    background-size: cover;
    overflow: hidden;
    /* transition is not working */
    transition: width 0.3s ease-in-out;
    z-index: 1;
}

The issues that remain:

1. The background-image of the tabbar is now using a thumbnail. Different users might need to change it manually;
2. The transition animation when the tabbar expands is not working;
3. There is a problem with showing the menu when right-clicking on the tabbar.

I hope you can continue to improve it. Thank you!

[tovifun]

I gave it a try, and I think the result is already great!!! I’ll try to continue refining it based on your style.

[Zettry]

@tovifun The transition animation is working now!!

:root{
    --tabbar-size: 32px;
}

/* tabbar workspace */
.inner > .tabbar-wrapper:not(:hover) .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu{
    width: var(--tabbar-size)!important;
    transition: unset;
}

.inner > .tabbar-wrapper:not(:hover) .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu .button-title,
.inner > .tabbar-wrapper:not(:hover) .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu .button-toolbar-menu-indicator{
    display: none;
}

.inner .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu .button-icon{
    position: absolute;
    left: 5px;
}

.inner .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu .button-title{
    position: absolute;
    left: var(--tabbar-size);
}

.inner .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu .button-toolbar-menu-indicator{
    position: absolute;
    right: 5px;
}

/* tabbar container */
.inner > .tabbar-wrapper:not(:hover) #tabs-tabbar-container,
.inner > .tabbar-wrapper:not(:hover) #tabs-tabbar-container .resize{
    width: var(--tabbar-size)!important;
    transition: unset;
}

/* tab stacking - accordion toggle arrow position */
#tabs-container.left .tab-position.accordion-toggle-arrow{
    --PositionX: 4px!important;
}

.inner > .tabbar-wrapper{
    position: relative;
    width: var(--tabbar-size);
}

.inner > .tabbar-wrapper > .tabbar-wrapper{
    position: absolute;
    background-image: url("chrome://vivaldi-data/thumbnail/WVKXPHMBICN2BPZCJFRT6B4RYYRCN6JS.png");
    background-size: cover;
    overflow: hidden;
    z-index: 1;
}

.inner #tabs-tabbar-container,
.inner .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu {
    transition: width 0.5s;
}

[tovifun]

@Zettry a new version was released with a variant (available for use at ../vivalarc-autotab).

This version adds the above CSS styles to the default style👍, with a few small adjustments:

1. Vivaldi 7.0 introduced a density setting, where the tab gaps differ between default and compact density. The tab width now accounts for this adjustment.
2. The hover effect requires a local background image, which is a bit complex to set up, so I used a background color as a substitute. I think the effect is good; the interface remains clean by default, with the color appearing only on hover.
3. The animation duration has been adjusted from 0.5 seconds to 0.1 seconds.

here are still a few unresolved issues:

1. When there are too many tabs and a scrollbar appears, further optimization is needed.
2. This style performs well in Vivaldi 7.0, but testing is still needed for previous versions of vivaldi.

https://github.com/user-attachments/assets/b72ab393-5730-4899-b815-5e076f1ef55e