auto toggle tab bar with pure css

shenghuoyishujia

Some days ago I post AutoHide Tab Bar + Address Bar | Show on Hover. Yestoday I did something with css without js. Js version has a weakness and you must repeat your work if you upgrade vivaldi.

It works with tabs position of "Left" and "Top". I alse make a modification with tab thumbnails when tab position is left. Original vivaldi thumbnails can not show completely if you set tab thumbnails with 'Left'.

left

top

/* top */
#header:not(:empty) {
    display: none !important;
}

#app:has(.inner:not(:hover)) #header:not(:empty) {
    display: flex !important;
}


/* left */

:is(#app:has(#header:empty), #app:has(#header .tabless)) {
    .tabbar-wrapper {
        /* if you do not want auto toggle  tab bar, comment this line below */
        display: none !important;

        &:hover {
            display: flex !important;
        }
    }

    .inner:has(.thumbnail-image) {
        #tabs-container{
            width:100%;
        }
        .tab-position {
            position: relative;
            height: var(--Width);
            transform: none;
        }

        .tab.force-hover {
            height: min-content;
        }

        .tab-wrapper {
            max-height: fit-content;
        }
        .svg-tab-selection {
            aspect-ratio: 1 / 1;
            height: 100%;
            max-height: fit-content;
        }
    }



}

#app:has(#panels-container:hover) .tabbar-wrapper {
    display: flex !important;
}

I push it to github.

I am a chinese and I am living in Canada now. I really need a job to make a living. If you could give me a job, please give me a message with my email [email protected]

Pesala

@shenghuoyishujia

You might find the Language Tool Extension useful to check your spelling and grammar before applying for jobs by email.

I also use Wordweb to check my spelling, and to find synonyms to improve my writing.

shenghuoyishujia

@Pesala thanks for your advice