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 <#21 (comment)>, 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.

vivalarc_autotab.mp4

[Zettry]

@tovifun hi, this is a completely hidden version.

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

/* tabbar transparent */
.inner > .tabbar-wrapper:not(:hover) .tabbar-wrapper div {
    opacity: 0;
}

/* tabbar workspace */
.inner > .tabbar-wrapper:not(:hover) .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu{
    width: calc(var(--tabbar-size) + var(--densityGap))!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: var(--densityGap);
}

.inner .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu .button-title{
    position: absolute;
    left: calc(32px + var(--densityGap)) !important;
}

.inner .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu .button-toolbar-menu-indicator{
    position: absolute;
    right: var(--densityGap);
}

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


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

.inner > .tabbar-wrapper > .tabbar-wrapper{
    position: absolute;
    overflow: hidden;
    z-index: 1;
}

.inner > .tabbar-wrapper > .tabbar-wrapper:hover{
    position: absolute;
    background:var(--colorImageLeftBg, var(--colorBgLight)) ;
}

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

/* hide tabbar scrollbar */
#browser #tabs-container.right ::-webkit-scrollbar,
#browser #tabs-container.left ::-webkit-scrollbar{
    display: none;
}

/* tab close button position */
.overflow.tab-strip .tab .tab-header{
    max-width: calc(var(--Width) + 12px)
}

2024-11-08.233424.mp4

[everpromos]

@Zettry nice work, but where to put the codes please?

[Zettry]

@everpromos Edit the vivalarc-autotab/vivalarc.css file, search for AutoHide Tabbar, and then starting from that line, replace all the following content with the code provided above. Save the file and restart Vivaldi.

[everpromos]

@everpromos Edit the vivalarc-autotab/vivalarc.css file, search for AutoHide Tabbar, and then starting from that line, replace all the following content with the code provided above. Save the file and restart Vivaldi.

Thanks, but for macOS seems not work, tab-bar disappeared/hide all the time no matter mouse hover the edge or not.
can you fix it, thank you again.

[Zettry]

@everpromos Hi! Since I don't have a mac device, I can't confirm whether it works correctly on macOS.
However, you can check if Compact View is enabled in the settings. Currently, the completely hidden version does not work properly in Compact View, and some optimization may still be needed.

2024-11-09.123119.mp4

[everpromos]

@Zettry Thanks, it works when disable the compact view 🙏

[otbe]

Dont want to hijack this issue but somehow I cannot get your code working @Zettry. :(
I have compact mode disabled and replaced the code in vivalarc-autotab/vivalarc.css with your version , however I still have an empty bar (without tabs) and as soon as I hover over the empty bar the tab bar appears.

Any idea whats wrong there? Thanks :)

[Zettry]

@otbe Hi, please check if the value of --tabbar-size in the modified vivalarc-autotab/vivalarc.css is 0px.
If you confirm that the value is correct, you can go to vivaldi://inspect/#apps to find the style issue.
For more details on how to use Vivaldi inspect, you can refer to the link below:

https://gabevilela.vivaldi.net/2020/12/26/guide-customizing-vivaldis-ui-with-css-mods/

2024-11-21.204640.mp4

[otbe]

Thank you @Zettry, shame on me! :D
I copied the original vivalarc-autotab/vivalarc.css but stupidly in the same directory as vivalarc-autotab/vivalarc.css.bkp.css thats why the tabbar-size was still at 32px.