AutoHide Tab Bar + Address Bar | Show on Hover

[kostasvl]

@oudstand No other mods.

[oudstand]

@kostasvl hm... that makes it difficult to fix for me when I can't reproduce the problem...

[kostasvl]

@oudstand No worries, thanks!

[Firipu]

I am using your mod. It works wonderfully, but the panels don't show anymore (I changed hide panels to false in the JS script) . I just get a little grey bar with an arrow. But panels are invisible. If I toggle them, the little arrow goes from the left to the right and that's it.

I use vertical tabs.

The little grey bar with black arrow in the top right is all that shows for panels.

Am I doing something wrong? I am using the last version of the code on this topic.

[oudstand]

@Firipu I've tested it with the latest code and it does work. Do you have any other JS or CSS mods that could affect this mod? Did you try to restart your browser?

[Firipu]

@Firipu

Ok, so just for reference, if anyone else would have the same issue:

Turning on floating panels in your settings solves the issue. The panel bar stays nice and visible now.

edit: restart fixed the transparent tab bar.

script works flawless now. Thx! Leaving this up for future reference if anyone else would have the issue.

[oudstand]

@Firipu good to know. I've always used floating panels. On my device the color of the side bar didn't disappear, but as long as you're happy with it

[No9527]

@oudstand This code runs perfectly on my PC. Will it work on Mac OS X (M-chip) too?

[oudstand]

@No9527 I only have tested it on Windows, because I don't have a Mac. So give it a try and let us know

[Sullie]

@oudstand, thanks for the code and your effort. Works nicely for the most part. However, I am seeing a glitch with the Workspaces button on the vertical tabs panel--it kind of blinks rapidly to the extent that I cannot interact with it. Could you also please make a version which auto-hides the status bar?

[oudstand]

@Sullie currently I don't get the workspaces button fixed, I don't know exactly why this happens. As soon as .tabbar-wrapper gets position: fixed; it's not working anymore. Maybe I'll find a solution in the future.

For the moment I could fix the status bar and also the transition of vertical tabs looks nicer.

/**
 * Forum link: https://forum.vivaldi.net/topic/92477/some-javascript-to-automatically-hide-tab-bar-and-address-bar-and-show-them-by-hovering
 * Hides the tab bar and address bar when not hovering
 */
(function checkWebViewForFullscreen() {
    const webView = document.querySelector('#webview-container'),
        hidePanels = true, // set to false to not hide the panels
        verticalMargin = '0px', // 'var(--edge-like-border-radius) / 2', // set to '0px' to remove the margin left
        bookmarkBarPadding = '6px', // set to '0px' to remove the padding around the bookmark bar
        showDelay = 125, // set to 0 to remove the delay
        hideDelay = 500, // set to 0 to remove the delay
        showAddressBarOnFocus = true, // shows the address bar on a new tab or if in focus - set to false to disable the feature
        updateHoverDivSize = true; // decreases the size for the hover divs in fullscreen mode - set ti false to disable the feature

    if (!webView) {
        setTimeout(checkWebViewForFullscreen, 1337);
        return;
    }

    const positions = ['top', 'bottom', 'left', 'right'],
        app = document.querySelector('#app'),
        browser = document.querySelector('#browser'),
        header = document.querySelector('#header'),
        mainBar = document.querySelector('.mainbar'),
        bookmarkBar = document.querySelector('.bookmark-bar'),
        panelsContainer = document.querySelector('#panels-container'),
        tabBarClassList = document.querySelector('#tabs-tabbar-container').classList,
        panelsLeft = document.querySelector('#panels-container').classList.contains('left'),
        tabBarPosition = positions.find(cls => tabBarClassList.contains(cls)),
        addressBarTop = browser.classList.contains('address-top'),
        bookmarksTop = browser.classList.contains('bookmark-bar-top');

    let fullscreenEnabled,
        showTopTimeout,
        showLeftTimeout,
        showRightTimeout,
        showBottomTimeout,
        hideTimeout;

    chrome.storage.local.get('fullScreenModEnabled').then((value) => {
        fullscreenEnabled = value.fullScreenModEnabled || value.fullScreenModEnabled == undefined;
        if (fullscreenEnabled) {
            addFullScreenListener();
        }
    });

    vivaldi.tabsPrivate.onKeyboardShortcut.addListener((id, combination) => combination === 'F11' && toggleFullScreen());

    let style = `
        .fullscreen-listener-enabled {
            ${generalCSS()}
            ${topCSS()}
            ${leftCSS()}
            ${rightCSS()}
            ${bottomCSS()}
        }

        #app:not(.fullscreen-listener-enabled) .hover-div {
            visibility: hidden;
        }
    `;

    if (bookmarkBarPadding) {
        style += `
            .fullscreen-listener-enabled .bookmark-bar {
                height: auto;
                padding-top: ${bookmarkBarPadding};
                padding-bottom: calc(${bookmarkBarPadding} / 2);
            }
        `;
    }

    const styleEl = document.createElement('style');
    styleEl.appendChild(document.createTextNode(style));

    document.head.appendChild(styleEl);

    const hoverDivTop = createHorizontalHoverDiv('top'),
        hoverDivLeft = (hidePanels && panelsLeft) || tabBarPosition === 'left' ? createVerticalHoverDiv('left') : undefined,
        hoverDivRight = (hidePanels && !panelsLeft) || tabBarPosition === 'right' ? createVerticalHoverDiv('right') : undefined,
        hoverDivBottom = !addressBarTop || tabBarPosition === 'bottom' || !bookmarksTop || document.querySelector('#footer').childNodes.length ? createHorizontalHoverDiv('bottom') : undefined;

    function toggleFullScreen() {
        fullscreenEnabled = !fullscreenEnabled;
        fullscreenEnabled ? addFullScreenListener() : removeFullScreenListener();
        chrome.storage.local.set({fullScreenModEnabled: fullscreenEnabled});
    }

    function addFullScreenListener() {
        app.classList.add('fullscreen-listener-enabled');
        webView.addEventListener('pointerenter', hide);

        if (hideDelay) {
            webView.addEventListener('pointerleave', clearHideTimeout);
        }

        hoverDivTop.addEventListener('pointerenter', showTop);
        hoverDivTop.addEventListener('pointerleave', clearTimeouts);

        if (hoverDivLeft) {
            hoverDivLeft.addEventListener('pointerenter', showLeft);
            hoverDivLeft.addEventListener('pointerleave', clearTimeouts);
        }

        if (hoverDivRight) {
            hoverDivRight.addEventListener('pointerenter', showRight);
            hoverDivRight.addEventListener('pointerleave', clearTimeouts);
        }

        if (hoverDivBottom) {
            hoverDivBottom.addEventListener('pointerenter', showBottom);
            hoverDivBottom.addEventListener('pointerleave', clearTimeouts);
        }

        if (updateHoverDivSize) addEventListener('resize', updateHoverDivs);

        hide();
    }

    function removeFullScreenListener() {
        app.classList.remove('fullscreen-listener-enabled');
        webView.removeEventListener('pointerenter', hide);

        if (hideDelay) {
            webView.removeEventListener('pointerleave', clearHideTimeout);
        }

        hoverDivTop.removeEventListener('pointerenter', showTop);
        hoverDivTop.removeEventListener('pointerleave', clearTimeouts);

        if (hoverDivLeft) {
            hoverDivLeft.removeEventListener('pointerenter', showLeft);
            hoverDivLeft.removeEventListener('pointerleave', clearTimeouts);
        }

        if (hoverDivRight) {
            hoverDivRight.removeEventListener('pointerenter', showRight);
            hoverDivRight.removeEventListener('pointerleave', clearTimeouts);
        }

        if (hoverDivBottom) {
            hoverDivBottom.removeEventListener('pointerenter', showBottom);
            hoverDivBottom.removeEventListener('pointerleave', clearTimeouts);
        }

        if (updateHoverDivSize) removeEventListener('resize', updateHoverDivs);

        show();
    }

    function clearTimeouts() {
        if (showTopTimeout) clearTimeout(showTopTimeout);
        if (showLeftTimeout) clearTimeout(showLeftTimeout);
        if (showRightTimeout) clearTimeout(showRightTimeout);
        if (showBottomTimeout) clearTimeout(showBottomTimeout);
    }

    function clearHideTimeout() {
        if (hideTimeout) clearTimeout(hideTimeout);
    }

    function hide() {
        hideTimeout = setTimeout(() => {
            app.classList.add('hidden-top');
            if (hoverDivLeft) app.classList.add('hidden-left');
            if (hoverDivRight) app.classList.add('hidden-right');
            if (hoverDivBottom) app.classList.add('hidden-bottom');
        }, hideDelay);
    }

    function show() {
        showTop();
        showLeft();
        showRight();
        showBottom();
    }

    function showTop() {
        showTopTimeout = setTimeout(() => app.classList.remove('hidden-top'), showDelay);
    }

    function showLeft() {
        if (hoverDivLeft) {
            showLeftTimeout = setTimeout(() => app.classList.remove('hidden-left'), showDelay);
        }
    }

    function showRight() {
        if (hoverDivRight) {
            showRightTimeout = setTimeout(() => app.classList.remove('hidden-right'), showDelay);
        }
    }

    function showBottom() {
        if (hoverDivBottom) {
            showBottomTimeout = setTimeout(() => app.classList.remove('hidden-bottom'), showDelay);
        }
    }

    function isWindowMaximized() {
        return browser.classList.contains('maximized');
    }

    function setHorizontalHoverDivHeight(hoverDiv) {
        hoverDiv.style.height = updateHoverDivSize && isWindowMaximized() ? '1px' : '1.5rem';
    }

    function setVerticalHoverDivWidth(hoverDiv) {
        hoverDiv.style.width = updateHoverDivSize && isWindowMaximized() ? '1px' : '1.5rem'
    }

    function updateHoverDivs() {
        setTimeout(() => {
            setHorizontalHoverDivHeight(hoverDivTop);
            if (hoverDivLeft) setVerticalHoverDivWidth(hoverDivLeft);
            if (hoverDivRight) setVerticalHoverDivWidth(hoverDivRight);
            if (hoverDivBottom) setHorizontalHoverDivHeight(hoverDivBottom);
        }, 150);
    }

    function createHorizontalHoverDiv(position) {
        const hoverDiv = document.createElement('div');
        setHorizontalHoverDivHeight(hoverDiv);
        hoverDiv.style.width = '100vw';
        hoverDiv.style.position = 'fixed';
        hoverDiv.style.left = '0';
        hoverDiv.style.zIndex = '10';
        hoverDiv.style[position] = '0';
        hoverDiv.className = 'hover-div';
        hoverDiv.classList.add(position);
        document.querySelector('#app').appendChild(hoverDiv);
        return hoverDiv;
    }

    function createVerticalHoverDiv(position) {
        const hoverDiv = document.createElement('div');
        hoverDiv.style.height = '100%';
        setVerticalHoverDivWidth(hoverDiv);
        hoverDiv.style.position = 'fixed';
        hoverDiv.style.top = '0';
        hoverDiv.style.zIndex = '10';
        hoverDiv.style[position] = '0';
        hoverDiv.className = 'hover-div';
        hoverDiv.classList.add(position);
        document.querySelector('#app').appendChild(hoverDiv);
        return hoverDiv;
    }

    function generalCSS() {
        return `
            #header, .mainbar, .bookmark-bar, #panels-container {
                transition: transform .5s, opacity .5s ease-in-out !important;
            }

            #header, .mainbar {
                z-index: 8;
            }

            .bookmark-bar  {
                z-index: 7;
            }

            #header .vivaldi {
                margin-top: 3px;
            }

            #main {
                padding-top: 0 !important;
            }

            #webview-container {
                position: fixed !important;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }

            #panels-container {
                position: fixed !important;
            }

            .extensionIconPopupMenu, .button-popup {
                z-index: 8;
            }

            footer {
                margin-top: auto !important;
            }

            .hover-div {
                transition: visibility 0.5s ease-in-out;
            }
        `;
    }

    function topCSS() {
        const topElements = [];
        let height = 0;

        if (tabBarPosition === 'top' || !addressBarTop) {
            topElements.push('#header');
            height += header?.offsetHeight || 0;
        }

        if (addressBarTop) {
            topElements.push('.mainbar');
            height += mainBar?.offsetHeight || 0;
        }

        if (bookmarksTop && bookmarkBar) {
            topElements.push('.bookmark-bar');
            height += bookmarkBar?.offsetHeight || 0;
        }

        if (topElements.length === 0) {
            return '';
        }

        let css = `
            &.hidden-top {
                ${topElements.join(', ')} {
                    transform: translateY(-${height}px);
                    opacity: 0;
                }
            }

            &:not(.hidden-top) .hover-div.top {
                visibility: hidden;
            }
        `;

        if (showAddressBarOnFocus && addressBarTop) {
            css += `
                &.hidden-top {
                    #browser:has(.internal-page .startpage), #browser:has(.UrlBar-AddressField:focus-within) {
                        .mainbar {
                            opacity: 1;

                            .UrlBar-AddressField {
                                position: absolute;
                                top: ${height}px;
                                left: 25vw;
                                right: 25vw;
                                width: 50vw !important;
                            }
                        }
                    }
                }
            `;
        }

        if (bookmarksTop && addressBarTop) {
            css += `
                .bookmark-bar-top-off .mainbar {
                    padding-bottom: 5px;
                    background: var(--colorAccentBg);
                }
            `;
        }

        if (bookmarksTop) {
            css += `
                .bookmark-bar {
                    margin-top: 0;
                }
            `;
        }

        return css;
    }

    function leftCSS() {
        const leftElements = [];
        let width = 0,
            tabbarWrapper;

        if (tabBarPosition === 'left') {
            leftElements.push('.tabbar-wrapper');
            tabbarWrapper = document.querySelector('.tabbar-wrapper');
            width += tabbarWrapper.offsetWidth;
        }

        if (hidePanels && panelsLeft) {
            leftElements.push('#panels-container');
            width += panelsContainer.offsetWidth;
        }

        if (leftElements.length === 0) {
            return '';
        }

        let css = `
            &.hidden-left {
                ${leftElements.join(', ')} {
                    transform: translateX(-${width}px);
                    opacity: 0;
                }
            }

            &:not(.hidden-left) .hover-div.left {
                visibility: hidden;
            }
        `;

        if (tabBarPosition === 'left') {
            css += `
                .tabbar-wrapper {
                    position: fixed;
                    top: 0;
                    left: ${panelsLeft ? panelsContainer.offsetWidth : 0}px;
                    z-index: 1;
                    transition: transform .5s, opacity .5s ease-in-out !important;

                    &  > .tabbar-wrapper {
                        position: static;
                    }
                }
            `;
        }

        if (hidePanels && panelsLeft) {
            css += `
                #webview-container {
                    margin-left: ${verticalMargin};
                    /*margin-left: calc(-${panelsContainer.offsetWidth}px + ${verticalMargin});*/
                }
            `;
        }

        return css;
    }

    function rightCSS() {
        const rightElements = [];
        let width = 0,
            tabbarWrapper;

        if (tabBarPosition === 'right') {
            rightElements.push('.tabbar-wrapper');
            tabbarWrapper = document.querySelector('.tabbar-wrapper');
            width += tabbarWrapper.offsetWidth;
        }

        if (hidePanels && !panelsLeft) {
            rightElements.push('#panels-container');
            width += panelsContainer.offsetWidth;
        }

        if (rightElements.length === 0) {
            return '';
        }

        let css = `
            &.hidden-right {
                ${rightElements.join(', ')} {
                    transform: translateX(${width}px);
                    opacity: 0;
                }
            }

            &:not(.hidden-right) .hover-div.right {
                visibility: hidden;
            }
        `;

        if (tabBarPosition === 'right') {
            css += `
                .tabbar-wrapper {
                    position: fixed;
                    top: 0;
                    right: ${!panelsLeft ? panelsContainer.offsetWidth : 0}px;
                    z-index: 1;
                    transition: transform .5s, opacity .5s ease-in-out !important;

                    &  > .tabbar-wrapper {
                        position: static;
                    }
                }
            `;
        }

        if (hidePanels && !panelsLeft) {
            css += `
                #webview-container {
                    margin-right: ${verticalMargin};
                    /*margin-left: calc(-${panelsContainer.offsetWidth}px + ${verticalMargin});*/
                }
            `;
        }

        return css;
    }

    function bottomCSS() {
        const bottomElements = [],
            footer = document.querySelector('#footer');
        let height = 0;

        if (footer.childNodes.length) {
            bottomElements.push('#footer');
            height += footer.offsetHeight || 0;
        }

        if (!addressBarTop) {
            bottomElements.push('.mainbar');
            height += mainBar?.offsetHeight || 0;
        }

        if (!bookmarksTop && bookmarkBar) {
            bottomElements.push('.bookmark-bar');
            height += bookmarkBar?.offsetHeight || 0;
        }

        if (bottomElements.length === 0) {
            return '';
        }

        let css = `
            &.hidden-bottom {
                ${bottomElements.join(', ')} {
                    transform: translateY(${height}px);
                    opacity: 0;
                }
            }

            &:not(.hidden-bottom) .hover-div.bottom {
                visibility: hidden;
            }
        `;

        if (showAddressBarOnFocus && !addressBarTop) {
            css += `
                &.hidden-bottom {
                    #browser:has(.internal-page .startpage), #browser:has(.UrlBar-AddressField:focus-within) {
                        .mainbar {
                            opacity: 1;

                            .UrlBar-AddressField {
                                position: absolute;
                                bottom: ${mainBar.offsetHeight + 10}px;
                                left: 25vw;
                                right: 25vw;
                                width: 50vw !important;
                            }
                        }
                    }
                }
            `;
        }

        if (tabBarPosition === 'bottom') {
            css += `
                #footer {
                    transition: transform .5s, opacity .5s ease-in-out !important;
                }
            `;
        }

        if (!bookmarksTop && !addressBarTop) {
            css += `
                .bookmark-bar-bottom-off .mainbar {
                    padding-bottom: -5px;
                    background: var(--colorAccentBg);
                }
            `;
        }

        if (!bookmarksTop) {
            css += `
                .bookmark-bar {
                    margin-bottom: 0;
                }
            `;
        }

        return css;
    }
})();

[CummingCowGirl]

@shenghuoyishujia What if we have the tab bar elsewhere? Like in my case on the bottom?

[DanZellman]

This AutoHide is very irritating to me. Why is there a checkbox in the panels tool selection that can't be simply un-checked. I feel I'm constantly being outsmarted in a bad way in the update department these days, take Google Search. I was very happy with my panel always active and displaying bookmarks, I have thousands. Give me a checkbox for that. I'll be on Win10 Enterprise for the foreseeable future.

[Sullie]

@oudstand nice work! Before I forget, could you please make a version which works on the new tab page/start page, so the address bar is down the bottom? Right now, the address bar overlaps some of the headings for folders of bookmarks. I know I could choose to hide the address bar with showAddressBarOnFocus, but I like the address bar seen on the new tab page. Perhaps there could be an option to unhide the entire top address bar on new tab so that any content is pushed down naturally?
I messed around with your code for a while on the animation and ended up putting it through AI to get some insight into the tab bar. I found something, which might be a bug, or some other code matter:
- If the tab bar sidebar is maximised (via code) then the Workspaces bar always breaks.
- If it has the top and bottom missing (which my code below will demonstrate) then the Workspaces button works fine.

/**
 * Forum link: https://forum.vivaldi.net/topic/92477/some-javascript-to-automatically-hide-tab-bar-and-address-bar-and-show-them-by-hovering
 * Fixed to work with Workspaces button
 * Edited by Sullie
 * Original codebase from oudstand
(function checkWebViewForFullscreen() {
    const webView = document.querySelector('#webview-container'),
        hidePanels = true, // set to false to not hide the panels
        verticalMargin = '0px', // 'var(--edge-like-border-radius) / 2', // set to '0px' to remove the margin left
        bookmarkBarPadding = '6px', // set to '0px' to remove the padding around the bookmark bar
        showDelay = 0, // set to 0 to remove the delay
        hideDelay = 0, // set to 0 to remove the delay
        showAddressBarOnFocus = false, // shows the address bar on a new tab or if in focus - set to false to disable the feature
        updateHoverDivSize = true; // decreases the size for the hover divs in fullscreen mode - set ti false to disable the feature

    if (!webView) {
        setTimeout(checkWebViewForFullscreen, 0);
        return;
    }

    const positions = ['top', 'bottom', 'left', 'right'],
        app = document.querySelector('#app'),
        browser = document.querySelector('#browser'),
        header = document.querySelector('#header'),
        mainBar = document.querySelector('.mainbar'),
        bookmarkBar = document.querySelector('.bookmark-bar'),
        panelsContainer = document.querySelector('#panels-container'),
        tabBarClassList = document.querySelector('#tabs-tabbar-container').classList,
        panelsLeft = document.querySelector('#panels-container').classList.contains('left'),
        tabBarPosition = positions.find(cls => tabBarClassList.contains(cls)),
        addressBarTop = browser.classList.contains('address-top'),
        bookmarksTop = browser.classList.contains('bookmark-bar-top');

    let fullscreenEnabled,
        showTopTimeout,
        showLeftTimeout,
        showRightTimeout,
        showBottomTimeout,
        hideTimeout;

    chrome.storage.local.get('fullScreenModEnabled').then((value) => {
        fullscreenEnabled = value.fullScreenModEnabled || value.fullScreenModEnabled == undefined;
        if (fullscreenEnabled) {
            addFullScreenListener();
        }
    });

    vivaldi.tabsPrivate.onKeyboardShortcut.addListener((id, combination) => combination === 'F11' && toggleFullScreen());

    let style = `
        .fullscreen-listener-enabled {
            ${generalCSS()}
            ${topCSS()}
            ${leftCSS()}
            ${rightCSS()}
            ${bottomCSS()}
        }

        #app:not(.fullscreen-listener-enabled) .hover-div {
            visibility: hidden;
        }
    `;

    if (bookmarkBarPadding) {
        style += `
            .fullscreen-listener-enabled .bookmark-bar {
                height: auto;
                padding-top: ${bookmarkBarPadding};
                padding-bottom: calc(${bookmarkBarPadding} / 2);
            }
        `;
    }

    const styleEl = document.createElement('style');
    styleEl.appendChild(document.createTextNode(style));

    document.head.appendChild(styleEl);

    const hoverDivTop = createHorizontalHoverDiv('top'),
        hoverDivLeft = (hidePanels && panelsLeft) || tabBarPosition === 'left' ? createVerticalHoverDiv('left') : undefined,
        hoverDivRight = (hidePanels && !panelsLeft) || tabBarPosition === 'right' ? createVerticalHoverDiv('right') : undefined,
        hoverDivBottom = !addressBarTop || tabBarPosition === 'bottom' || !bookmarksTop || document.querySelector('#footer').childNodes.length ? createHorizontalHoverDiv('bottom') : undefined;

    function toggleFullScreen() {
        fullscreenEnabled = !fullscreenEnabled;
        fullscreenEnabled ? addFullScreenListener() : removeFullScreenListener();
        chrome.storage.local.set({fullScreenModEnabled: fullscreenEnabled});
    }

    function addFullScreenListener() {
        app.classList.add('fullscreen-listener-enabled');
        webView.addEventListener('pointerenter', hide);

        if (hideDelay) {
            webView.addEventListener('pointerleave', clearHideTimeout);
        }

        hoverDivTop.addEventListener('pointerenter', showTop);
        hoverDivTop.addEventListener('pointerleave', clearTimeouts);

        if (hoverDivLeft) {
            hoverDivLeft.addEventListener('pointerenter', showLeft);
            hoverDivLeft.addEventListener('pointerleave', clearTimeouts);
        }

        if (hoverDivRight) {
            hoverDivRight.addEventListener('pointerenter', showRight);
            hoverDivRight.addEventListener('pointerleave', clearTimeouts);
        }

        if (hoverDivBottom) {
            hoverDivBottom.addEventListener('pointerenter', showBottom);
            hoverDivBottom.addEventListener('pointerleave', clearTimeouts);
        }

        if (updateHoverDivSize) addEventListener('resize', updateHoverDivs);

        hide();
    }

    function removeFullScreenListener() {
        app.classList.remove('fullscreen-listener-enabled');
        webView.removeEventListener('pointerenter', hide);

        if (hideDelay) {
            webView.removeEventListener('pointerleave', clearHideTimeout);
        }

        hoverDivTop.removeEventListener('pointerenter', showTop);
        hoverDivTop.removeEventListener('pointerleave', clearTimeouts);

        if (hoverDivLeft) {
            hoverDivLeft.removeEventListener('pointerenter', showLeft);
            hoverDivLeft.removeEventListener('pointerleave', clearTimeouts);
        }

        if (hoverDivRight) {
            hoverDivRight.removeEventListener('pointerenter', showRight);
            hoverDivRight.removeEventListener('pointerleave', clearTimeouts);
        }

        if (hoverDivBottom) {
            hoverDivBottom.removeEventListener('pointerenter', showBottom);
            hoverDivBottom.removeEventListener('pointerleave', clearTimeouts);
        }

        if (updateHoverDivSize) removeEventListener('resize', updateHoverDivs);

        show();
    }

    function clearTimeouts() {
        if (showTopTimeout) clearTimeout(showTopTimeout);
        if (showLeftTimeout) clearTimeout(showLeftTimeout);
        if (showRightTimeout) clearTimeout(showRightTimeout);
        if (showBottomTimeout) clearTimeout(showBottomTimeout);
    }

    function clearHideTimeout() {
        if (hideTimeout) clearTimeout(hideTimeout);
    }

    function hide() {
        hideTimeout = setTimeout(() => {
            app.classList.add('hidden-top');
            if (hoverDivLeft) app.classList.add('hidden-left');
            if (hoverDivRight) app.classList.add('hidden-right');
            if (hoverDivBottom) app.classList.add('hidden-bottom');
        }, hideDelay);
    }

    function show() {
        showTop();
        showLeft();
        showRight();
        showBottom();
    }

    function showTop() {
        showTopTimeout = setTimeout(() => app.classList.remove('hidden-top'), showDelay);
    }

    function showLeft() {
        if (hoverDivLeft) {
            showLeftTimeout = setTimeout(() => app.classList.remove('hidden-left'), showDelay);
        }
    }

    function showRight() {
        if (hoverDivRight) {
            showRightTimeout = setTimeout(() => app.classList.remove('hidden-right'), showDelay);
        }
    }

    function showBottom() {
        if (hoverDivBottom) {
            showBottomTimeout = setTimeout(() => app.classList.remove('hidden-bottom'), showDelay);
        }
    }

    function isWindowMaximized() {
        return browser.classList.contains('maximized');
    }

    function setHorizontalHoverDivHeight(hoverDiv) {
        hoverDiv.style.height = '10px'; // Changed from dynamic sizing to fixed 10px
    }

    function setVerticalHoverDivWidth(hoverDiv) {
        hoverDiv.style.width = '10px'; // Changed from dynamic sizing to fixed 10px
    }

    function updateHoverDivs() {
        setTimeout(() => {
            setHorizontalHoverDivHeight(hoverDivTop);
            if (hoverDivLeft) setVerticalHoverDivWidth(hoverDivLeft);
            if (hoverDivRight) setVerticalHoverDivWidth(hoverDivRight);
            if (hoverDivBottom) setHorizontalHoverDivHeight(hoverDivBottom);
        }, 150);
    }

    function createHorizontalHoverDiv(position) {
        const hoverDiv = document.createElement('div');
        setHorizontalHoverDivHeight(hoverDiv);
        hoverDiv.style.width = '100vw';
        hoverDiv.style.position = 'fixed';
        hoverDiv.style.left = '0';
        hoverDiv.style.zIndex = '10';
        hoverDiv.style[position] = '0';
        hoverDiv.className = 'hover-div';
        hoverDiv.classList.add(position);
        document.querySelector('#app').appendChild(hoverDiv);
        return hoverDiv;
    }

    function createVerticalHoverDiv(position) {
        const hoverDiv = document.createElement('div');
        hoverDiv.style.height = '100%';
        setVerticalHoverDivWidth(hoverDiv);
        hoverDiv.style.position = 'fixed';
        hoverDiv.style.top = '0';
        hoverDiv.style.zIndex = '10';
        hoverDiv.style[position] = '0';
        hoverDiv.className = 'hover-div';
        hoverDiv.classList.add(position);
        document.querySelector('#app').appendChild(hoverDiv);
        return hoverDiv;
    }

    function generalCSS() {
        return `
            #header, .mainbar, .bookmark-bar, #panels-container {
                transition: transform 0s, opacity 0s !important;
            }

            #header, .mainbar {
                z-index: 8;
            }

            .bookmark-bar  {
                z-index: 7;
            }

            #header .vivaldi {
                margin-top: 3px;
            }

            #main {
                padding-top: 0 !important;
            }

            #webview-container {
                position: fixed !important;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }

            #panels-container {
                position: fixed !important;
            }

            .extensionIconPopupMenu, .button-popup {
                z-index: 8;
            }

            footer {
                margin-top: auto !important;
            }

            .hover-div {
                transition: visibility 0s;
            }
        `;
    }

    function topCSS() {
        const topElements = [];
        let height = 0;

        if (tabBarPosition === 'top' || !addressBarTop) {
            topElements.push('#header');
            height += header?.offsetHeight || 0;
        }

        if (addressBarTop) {
            topElements.push('.mainbar');
            height += mainBar?.offsetHeight || 0;
        }

        if (bookmarksTop && bookmarkBar) {
            topElements.push('.bookmark-bar');
            height += bookmarkBar?.offsetHeight || 0;
        }

        if (topElements.length === 0) {
            return '';
        }

        let css = `
            &.hidden-top {
                ${topElements.join(', ')} {
                    transform: translateY(-${height}px);
                    opacity: 0;
                }
            }

            &:not(.hidden-top) .hover-div.top {
                visibility: hidden;
            }
        `;

        if (showAddressBarOnFocus && addressBarTop) {
            css += `
                &.hidden-top {
                    #browser:has(.internal-page .startpage), #browser:has(.UrlBar-AddressField:focus-within) {
                        .mainbar {
                            opacity: 1;

                            .UrlBar-AddressField {
                                position: absolute;
                                top: ${height}px;
                                left: 25vw;
                                right: 25vw;
                                width: 50vw !important;
                            }
                        }
                    }
                }
            `;
        }

        if (bookmarksTop && addressBarTop) {
            css += `
                .bookmark-bar-top-off .mainbar {
                    padding-bottom: 5px;
                    background: var(--colorAccentBg);
                }
            `;
        }

        if (bookmarksTop) {
            css += `
                .bookmark-bar {
                    margin-top: 0;
                }
            `;
        }

        return css;
    }

    function leftCSS() {
        const leftElements = [];
        let width = 0,
            tabbarWrapper;

        if (tabBarPosition === 'left') {
            leftElements.push('.tabbar-wrapper');
            tabbarWrapper = document.querySelector('.tabbar-wrapper');
            width += tabbarWrapper.offsetWidth;
        }

        if (hidePanels && panelsLeft) {
            leftElements.push('#panels-container');
            width += panelsContainer.offsetWidth;
        }

        if (leftElements.length === 0) {
            return '';
        }

        let css = `
            &.hidden-left {
                ${leftElements.join(', ')} {
                    transform: translateX(-${width}px);
                    opacity: 0;
                }
            }

            &:not(.hidden-left) .hover-div.left {
                visibility: hidden;
            }
        `;

        // FIXED: Changed from position:fixed to using translate3d for positioning
        // This preserves the internal structure of the tabbar-wrapper and its child elements
        if (tabBarPosition === 'left') {
            css += `
                .tabbar-wrapper {
                    /* Using absolute position instead of fixed */
                    position: absolute; 
                    top: 0;
                    left: ${panelsLeft ? panelsContainer.offsetWidth : 0}px;
                    z-index: 1;
                    transition: transform 0s, opacity 0s !important;
                    
                    /* Ensure visibility of workspaces button */
                    .WorkspacesManager-Button {
                        z-index: 5;
                        position: relative;
                    }
                }
            `;
        }

        if (hidePanels && panelsLeft) {
            css += `
                #webview-container {
                    margin-left: ${verticalMargin};
                }
            `;
        }

        return css;
    }

    function rightCSS() {
        const rightElements = [];
        let width = 0,
            tabbarWrapper;

        if (tabBarPosition === 'right') {
            rightElements.push('.tabbar-wrapper');
            tabbarWrapper = document.querySelector('.tabbar-wrapper');
            width += tabbarWrapper.offsetWidth;
        }

        if (hidePanels && !panelsLeft) {
            rightElements.push('#panels-container');
            width += panelsContainer.offsetWidth;
        }

        if (rightElements.length === 0) {
            return '';
        }

        let css = `
            &.hidden-right {
                ${rightElements.join(', ')} {
                    transform: translateX(${width}px);
                    opacity: 0;
                }
            }

            &:not(.hidden-right) .hover-div.right {
                visibility: hidden;
            }
        `;

        // FIXED: Changed from position:fixed to using translate3d for positioning
        if (tabBarPosition === 'right') {
            css += `
                .tabbar-wrapper {
                    /* Using absolute position instead of fixed */
                    position: absolute;
                    top: 0;
                    right: ${!panelsLeft ? panelsContainer.offsetWidth : 0}px;
                    z-index: 1;
                    transition: transform 0s, opacity 0s !important;
                    
                    /* Ensure visibility of workspaces button */
                    .WorkspacesManager-Button {
                        z-index: 5;
                        position: relative;
                    }
                }
            `;
        }

        if (hidePanels && !panelsLeft) {
            css += `
                #webview-container {
                    margin-right: ${verticalMargin};
                }
            `;
        }

        return css;
    }

    function bottomCSS() {
        const bottomElements = [],
            footer = document.querySelector('#footer');
        let height = 0;

        if (footer.childNodes.length) {
            bottomElements.push('#footer');
            height += footer.offsetHeight || 0;
        }

        if (!addressBarTop) {
            bottomElements.push('.mainbar');
            height += mainBar?.offsetHeight || 0;
        }

        if (!bookmarksTop && bookmarkBar) {
            bottomElements.push('.bookmark-bar');
            height += bookmarkBar?.offsetHeight || 0;
        }

        if (bottomElements.length === 0) {
            return '';
        }

        let css = `
            &.hidden-bottom {
                ${bottomElements.join(', ')} {
                    transform: translateY(${height}px);
                    opacity: 0;
                }
            }

            &:not(.hidden-bottom) .hover-div.bottom {
                visibility: hidden;
            }
        `;

        if (showAddressBarOnFocus && !addressBarTop) {
            css += `
                &.hidden-bottom {
                    #browser:has(.internal-page .startpage), #browser:has(.UrlBar-AddressField:focus-within) {
                        .mainbar {
                            opacity: 1;

                            .UrlBar-AddressField {
                                position: absolute;
                                bottom: ${mainBar.offsetHeight + 10}px;
                                left: 25vw;
                                right: 25vw;
                                width: 50vw !important;
                            }
                        }
                    }
                }
            `;
        }

        if (tabBarPosition === 'bottom') {
            css += `
                #footer {
                    transition: transform 0s, opacity 0s !important;
                }
            `;
        }

        if (!bookmarksTop && !addressBarTop) {
            css += `
                .bookmark-bar-bottom-off .mainbar {
                    padding-bottom: -5px;
                    background: var(--colorAccentBg);
                }
            `;
        }

        if (!bookmarksTop) {
            css += `
                .bookmark-bar {
                    margin-bottom: 0;
                }
            `;
        }

        return css;
    }
})();

[oudstand]

@Sullie I've made a lot of changes. Hopefully it works now.

Can you provide me a screenshot regarding the address bar on a new tab?

/**
 * Forum link: https://forum.vivaldi.net/topic/92477/some-javascript-to-automatically-hide-tab-bar-and-address-bar-and-show-them-by-hovering
 * Hides the tab bar and address bar when not hovering
 */
(function checkWebViewForFullscreen() {
    const webView = document.querySelector('#webview-container'),
        hidePanels = true, // set to false to not hide the panels
        verticalMargin = '0px', // 'var(--edge-like-border-radius) / 2', // set to '0px' to remove the margin left
        bookmarkBarPadding = '6px', // set to '0px' to remove the padding around the bookmark bar
        showDelay = 125, // set to 0 to remove the delay
        hideDelay = 500, // set to 0 to remove the delay
        showAddressBarOnFocus = true, // shows the address bar on a new tab or if in focus - set to false to disable the feature
        updateHoverDivSize = true; // decreases the size for the hover divs in fullscreen mode - set ti false to disable the feature

    if (!webView) {
        setTimeout(checkWebViewForFullscreen, 1337);
        return;
    }

    const positions = ['top', 'bottom', 'left', 'right'],
        app = document.querySelector('#app'),
        browser = document.querySelector('#browser'),
        header = document.querySelector('#header'),
        mainBar = document.querySelector('.mainbar'),
        bookmarkBar = document.querySelector('.bookmark-bar'),
        panelsContainer = document.querySelector('#panels-container'),
        tabBarClassList = document.querySelector('#tabs-tabbar-container').classList,
        panelsLeft = document.querySelector('#panels-container').classList.contains('left'),
        tabBarPosition = positions.find(cls => tabBarClassList.contains(cls)),
        addressBarTop = browser.classList.contains('address-top'),
        bookmarksTop = browser.classList.contains('bookmark-bar-top');

    let fullscreenEnabled,
        showTopTimeout,
        showLeftTimeout,
        showRightTimeout,
        showBottomTimeout,
        hideTimeout;

    chrome.storage.local.get('fullScreenModEnabled').then((value) => {
        fullscreenEnabled = value.fullScreenModEnabled || value.fullScreenModEnabled == undefined;
        if (fullscreenEnabled) {
            addFullScreenListener();
        }
    });

    vivaldi.tabsPrivate.onKeyboardShortcut.addListener((id, combination) => combination === 'F11' && toggleFullScreen());

    let style = `
        .fullscreen-listener-enabled {
            ${generalCSS()}
            ${topCSS()}
            ${leftCSS()}
            ${rightCSS()}
            ${bottomCSS()}
        }

        #app:not(.fullscreen-listener-enabled) .hover-div {
            visibility: hidden;
        }
    `;

    if (bookmarkBarPadding) {
        style += `
            .fullscreen-listener-enabled .bookmark-bar {
                height: auto;
                padding-top: ${bookmarkBarPadding};
                padding-bottom: calc(${bookmarkBarPadding} / 2);
            }
        `;
    }

    const styleEl = document.createElement('style');
    styleEl.appendChild(document.createTextNode(style));

    document.head.appendChild(styleEl);

    const hoverDivTop = createHorizontalHoverDiv('top'),
        hoverDivLeft = (hidePanels && panelsLeft) || tabBarPosition === 'left' ? createVerticalHoverDiv('left') : undefined,
        hoverDivRight = (hidePanels && !panelsLeft) || tabBarPosition === 'right' ? createVerticalHoverDiv('right') : undefined,
        hoverDivBottom = !addressBarTop || tabBarPosition === 'bottom' || !bookmarksTop || document.querySelector('#footer').childNodes.length ? createHorizontalHoverDiv('bottom') : undefined;

    function toggleFullScreen() {
        fullscreenEnabled = !fullscreenEnabled;
        fullscreenEnabled ? addFullScreenListener() : removeFullScreenListener();
        chrome.storage.local.set({fullScreenModEnabled: fullscreenEnabled});
    }

    function addFullScreenListener() {
        app.classList.add('fullscreen-listener-enabled');
        webView.addEventListener('pointerenter', hide);

        if (hideDelay) {
            webView.addEventListener('pointerleave', clearHideTimeout);
        }

        hoverDivTop.addEventListener('pointerenter', showTop);
        hoverDivTop.addEventListener('pointerleave', clearTimeouts);

        if (hoverDivLeft) {
            hoverDivLeft.addEventListener('pointerenter', showLeft);
            hoverDivLeft.addEventListener('pointerleave', clearTimeouts);
        }

        if (hoverDivRight) {
            hoverDivRight.addEventListener('pointerenter', showRight);
            hoverDivRight.addEventListener('pointerleave', clearTimeouts);
        }

        if (hoverDivBottom) {
            hoverDivBottom.addEventListener('pointerenter', showBottom);
            hoverDivBottom.addEventListener('pointerleave', clearTimeouts);
        }

        if (updateHoverDivSize) addEventListener('resize', updateHoverDivs);

        hide();
    }

    function removeFullScreenListener() {
        app.classList.remove('fullscreen-listener-enabled');
        webView.removeEventListener('pointerenter', hide);

        if (hideDelay) {
            webView.removeEventListener('pointerleave', clearHideTimeout);
        }

        hoverDivTop.removeEventListener('pointerenter', showTop);
        hoverDivTop.removeEventListener('pointerleave', clearTimeouts);

        if (hoverDivLeft) {
            hoverDivLeft.removeEventListener('pointerenter', showLeft);
            hoverDivLeft.removeEventListener('pointerleave', clearTimeouts);
        }

        if (hoverDivRight) {
            hoverDivRight.removeEventListener('pointerenter', showRight);
            hoverDivRight.removeEventListener('pointerleave', clearTimeouts);
        }

        if (hoverDivBottom) {
            hoverDivBottom.removeEventListener('pointerenter', showBottom);
            hoverDivBottom.removeEventListener('pointerleave', clearTimeouts);
        }

        if (updateHoverDivSize) removeEventListener('resize', updateHoverDivs);

        show();
    }

    function clearTimeouts() {
        if (showTopTimeout) clearTimeout(showTopTimeout);
        if (showLeftTimeout) clearTimeout(showLeftTimeout);
        if (showRightTimeout) clearTimeout(showRightTimeout);
        if (showBottomTimeout) clearTimeout(showBottomTimeout);
    }

    function clearHideTimeout() {
        if (hideTimeout) clearTimeout(hideTimeout);
    }

    function hide() {
        hideTimeout = setTimeout(() => {
            app.classList.add('hidden-top');
            if (hoverDivLeft) app.classList.add('hidden-left');
            if (hoverDivRight) app.classList.add('hidden-right');
            if (hoverDivBottom) app.classList.add('hidden-bottom');
        }, hideDelay);
    }

    function show() {
        showTop();
        showLeft();
        showRight();
        showBottom();
    }

    function showTop() {
        showTopTimeout = setTimeout(() => app.classList.remove('hidden-top'), showDelay);
    }

    function showLeft() {
        if (hoverDivLeft) {
            showLeftTimeout = setTimeout(() => app.classList.remove('hidden-left'), showDelay);
        }
    }

    function showRight() {
        if (hoverDivRight) {
            showRightTimeout = setTimeout(() => app.classList.remove('hidden-right'), showDelay);
        }
    }

    function showBottom() {
        if (hoverDivBottom) {
            showBottomTimeout = setTimeout(() => app.classList.remove('hidden-bottom'), showDelay);
        }
    }

    function isWindowMaximized() {
        return browser.classList.contains('maximized');
    }

    function setHorizontalHoverDivHeight(hoverDiv) {
        hoverDiv.style.height = updateHoverDivSize && isWindowMaximized() ? '1px' : '1.5rem';
    }

    function setVerticalHoverDivWidth(hoverDiv) {
        hoverDiv.style.width = updateHoverDivSize && isWindowMaximized() ? '1px' : '1.5rem'
    }

    function updateHoverDivs() {
        setTimeout(() => {
            setHorizontalHoverDivHeight(hoverDivTop);
            if (hoverDivLeft) setVerticalHoverDivWidth(hoverDivLeft);
            if (hoverDivRight) setVerticalHoverDivWidth(hoverDivRight);
            if (hoverDivBottom) setHorizontalHoverDivHeight(hoverDivBottom);
        }, 150);
    }

    function createHorizontalHoverDiv(position) {
        const hoverDiv = document.createElement('div');
        setHorizontalHoverDivHeight(hoverDiv);
        hoverDiv.style.width = '100vw';
        hoverDiv.style.position = 'fixed';
        hoverDiv.style.left = '0';
        hoverDiv.style.zIndex = '10';
        hoverDiv.style[position] = '0';
        hoverDiv.className = 'hover-div';
        hoverDiv.classList.add(position);
        document.querySelector('#app').appendChild(hoverDiv);
        return hoverDiv;
    }

    function createVerticalHoverDiv(position) {
        const hoverDiv = document.createElement('div');
        hoverDiv.style.height = '100%';
        setVerticalHoverDivWidth(hoverDiv);
        hoverDiv.style.position = 'fixed';
        hoverDiv.style.top = '0';
        hoverDiv.style.zIndex = '10';
        hoverDiv.style[position] = '0';
        hoverDiv.className = 'hover-div';
        hoverDiv.classList.add(position);
        document.querySelector('#app').appendChild(hoverDiv);
        return hoverDiv;
    }

    function generalCSS() {
        return `
            #header, .mainbar, .bookmark-bar, #panels-container {
                transition: transform .5s, opacity .5s ease-in-out !important;
            }

            #header, .mainbar {
                z-index: 8;
            }

            .bookmark-bar  {
                position: absolute;
                left: 0;
                right: 0;
                z-index: 7;
            }

            #header .vivaldi {
                margin-top: 3px;
            }

            #main {
                padding-top: 0 !important;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;

                .inner {
                    position: unset;

                    #webview-container {
                        position: fixed !important;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                    }
                }
            }

            #panels-container {
                position: fixed !important;
            }

            .extensionIconPopupMenu, .button-popup {
                z-index: 8;
            }

            footer {
                margin-top: auto !important;
            }

            .hover-div {
                transition: visibility 0.5s ease-in-out;
            }
        `;
    }

    function topCSS() {
        const topElements = [];
        let height = 0;

        if (tabBarPosition === 'top' || !addressBarTop) {
            topElements.push('#header');
            height += getHeight(header);
        }

        if (addressBarTop) {
            topElements.push('.mainbar');
            height += getHeight(mainBar);
        }

        if (bookmarksTop && bookmarkBar) {
            topElements.push('.bookmark-bar');
            height += getHeight(bookmarkBar);
        }

        if (topElements.length === 0) {
            return '';
        }

        let css = `
            &.hidden-top {
                ${topElements.join(', ')} {
                    transform: translateY(-${height}px);
                    opacity: 0;
                }
            }

            &:not(.hidden-top) .hover-div.top {
                visibility: hidden;
            }
        `;

        if (showAddressBarOnFocus && addressBarTop) {
            css += `
                &.hidden-top {
                    #browser:has(.internal-page .startpage), #browser:has(.UrlBar-AddressField:focus-within) {
                        .mainbar {
                            opacity: 1;

                            .UrlBar-AddressField {
                                position: absolute;
                                top: ${height}px;
                                left: 25vw;
                                right: 25vw;
                                width: 50vw !important;
                            }
                        }
                    }
                }
            `;
        }

        if (addressBarTop) {
            if (bookmarksTop) {
                css += `
                    .bookmark-bar-top-off .mainbar {
                        padding-bottom: 5px;
                        background: var(--colorAccentBg);
                    }
                `;
            }

            if (tabBarPosition === 'top') {
                css += `
                    .mainbar {
                        margin-top: ${getHeight(header)}px;
                    }
                `;
            }
        }

        if (bookmarksTop) {
            css += `
                .bookmark-bar {
                    top: 0;
                    margin-top: ${height - getHeight(bookmarkBar)}px;
                }
            `;
        }

        return css;
    }

    function leftCSS() {
        const leftElements = [];
        let width = 0,
            tabbarWrapper;

        if (tabBarPosition === 'left') {
            leftElements.push('.tabbar-wrapper');
            tabbarWrapper = document.querySelector('.tabbar-wrapper');
            width += tabbarWrapper.offsetWidth;
        }

        if (hidePanels && panelsLeft) {
            leftElements.push('#panels-container');
            width += panelsContainer.offsetWidth;
        }

        if (leftElements.length === 0) {
            return '';
        }

        let css = `
            &.hidden-left {
                ${leftElements.join(', ')} {
                    transform: translateX(-${width}px);
                    opacity: 0;
                }
            }

            &:not(.hidden-left) .hover-div.left {
                visibility: hidden;
            }
        `;

        if (tabBarPosition === 'left') {
            css += `
                .tabbar-wrapper {
                    position: absolute;
                    top: 0;
                    left: ${panelsLeft ? panelsContainer.offsetWidth : 0}px;
                    z-index: 1;
                    transition: transform .5s, opacity .5s ease-in-out !important;

                    &  > .tabbar-wrapper {
                        position: static;
                    }
                }
            `;
        }

        if (hidePanels && panelsLeft) {
            css += `
                #webview-container {
                    margin-left: ${verticalMargin};
                    /*margin-left: calc(-${panelsContainer.offsetWidth}px + ${verticalMargin});*/
                }
            `;
        }

        return css;
    }

    function rightCSS() {
        const rightElements = [];
        let width = 0,
            tabbarWrapper;

        if (tabBarPosition === 'right') {
            rightElements.push('.tabbar-wrapper');
            tabbarWrapper = document.querySelector('.tabbar-wrapper');
            width += tabbarWrapper.offsetWidth;
        }

        if (hidePanels && !panelsLeft) {
            rightElements.push('#panels-container');
            width += panelsContainer.offsetWidth;
        }

        if (rightElements.length === 0) {
            return '';
        }

        let css = `
            &.hidden-right {
                ${rightElements.join(', ')} {
                    transform: translateX(${width}px);
                    opacity: 0;
                }
            }

            &:not(.hidden-right) .hover-div.right {
                visibility: hidden;
            }
        `;

        if (tabBarPosition === 'right') {
            css += `
                .tabbar-wrapper {
                    position: absolute;
                    top: 0;
                    right: ${!panelsLeft ? panelsContainer.offsetWidth : 0}px;
                    z-index: 1;
                    transition: transform .5s, opacity .5s ease-in-out !important;

                    &  > .tabbar-wrapper {
                        position: static;
                    }
                }
            `;
        }

        if (hidePanels && !panelsLeft) {
            css += `
                #webview-container {
                    margin-right: ${verticalMargin};
                    /*margin-left: calc(-${panelsContainer.offsetWidth}px + ${verticalMargin});*/
                }
            `;
        }

        return css;
    }

    function bottomCSS() {
        const bottomElements = [],
            footer = document.querySelector('#footer'),
            tabbarWrapper = footer.querySelector('.tabbar-wrapper'),
            statusBar = footer.querySelector('.toolbar-statusbar');
        let height = 0;

        if (footer.childNodes.length) {
            bottomElements.push('#footer');
            height += getHeight(footer);
        }

        if (!addressBarTop) {
            bottomElements.push('.mainbar');
            height += getHeight(mainBar);
        }

        if (!bookmarksTop && bookmarkBar) {
            bottomElements.push('.bookmark-bar');
            height += getHeight(bookmarkBar);
        }

        if (bottomElements.length === 0) {
            return '';
        }

        let css = `
            &.hidden-bottom {
                ${bottomElements.join(', ')} {
                    transform: translateY(${height}px);
                    opacity: 0;
                }
            }

            &:not(.hidden-bottom) .hover-div.bottom {
                visibility: hidden;
            }
        `;

        if (showAddressBarOnFocus && !addressBarTop) {
            css += `
                &.hidden-bottom {
                    #browser:has(.internal-page .startpage), #browser:has(.UrlBar-AddressField:focus-within) {
                        .mainbar {
                            opacity: 1;

                            .UrlBar-AddressField {
                                position: absolute;
                                bottom: ${getHeight(mainBar) + 10}px;
                                left: 25vw;
                                right: 25vw;
                                width: 50vw !important;
                            }
                        }
                    }
                }
            `;
        }

        if (tabBarPosition === 'bottom') {
            css += `
                #footer {
                    transition: transform .5s, opacity .5s ease-in-out !important;
                }
            `;
        }

        if (!addressBarTop) {
            css += `
                .mainbar {
                    margin-bottom: ${getHeight(footer)}px;
                }
            `;

            if (!bookmarksTop) {
                css += `
                    .bookmark-bar-bottom-off .mainbar {
                        padding-bottom: -5px;
                        background: var(--colorAccentBg);
                    }
                `;
            }
        }

        if (!bookmarksTop) {
            css += `
                .bookmark-bar {
                    bottom: ${getHeight(footer) + (!addressBarTop ? getHeight(mainBar) : 0)}px;
                    margin-bottom: 0;
                }
            `;
        }

        return css;
    }

    function getHeight(el) {
        return el?.offsetHeight || 0;
    }
})();

[Sullie]

@oudstand works great!

Here is a screenshot showing how my new tab looks. Let me know if you need any other details.

[oudstand]

@Sullie I've updated the code. You can play around with the property showAddressBarPadding . You can set positive and negative values and it will move the address bar while in focus or on a new tab.

/**
 * Forum link: https://forum.vivaldi.net/topic/92477/some-javascript-to-automatically-hide-tab-bar-and-address-bar-and-show-them-by-hovering
 * Hides the tab bar and address bar when not hovering
 */
(function checkWebViewForFullscreen() {
    const webView = document.querySelector('#webview-container'),
        hidePanels = true, // set to false to not hide the panels
        bookmarkBarPadding = '6px', // set to '0px' to remove the padding around the bookmark bar
        showDelay = 125, // set to 0 to remove the delay
        hideDelay = 250, // set to 0 to remove the delay
        showAddressBarOnFocus = true, // shows the address bar on a new tab or if in focus - set to false to disable the feature
        showAddressBarPadding = 0, // moves the address bar on a new tab or if in focus to - positive and negative values are allowed
        updateHoverDivSize = true; // decreases the size for the hover divs in fullscreen mode - set ti false to disable the feature

    if (!webView) {
        setTimeout(checkWebViewForFullscreen, 1337);
        return;
    }

    const positions = ['top', 'bottom', 'left', 'right'],
        app = document.querySelector('#app'),
        browser = document.querySelector('#browser'),
        header = document.querySelector('#header'),
        mainBar = document.querySelector('.mainbar'),
        bookmarkBar = document.querySelector('.bookmark-bar'),
        panelsContainer = document.querySelector('#panels-container'),
        tabBarClassList = document.querySelector('#tabs-tabbar-container').classList,
        panelsLeft = document.querySelector('#panels-container').classList.contains('left'),
        tabBarPosition = positions.find(cls => tabBarClassList.contains(cls)),
        addressBarTop = browser.classList.contains('address-top'),
        bookmarksTop = browser.classList.contains('bookmark-bar-top');

    let fullscreenEnabled,
        showTopTimeout,
        showLeftTimeout,
        showRightTimeout,
        showBottomTimeout,
        hideTimeout;

    chrome.storage.local.get('fullScreenModEnabled').then((value) => {
        fullscreenEnabled = value.fullScreenModEnabled || value.fullScreenModEnabled == undefined;
        if (fullscreenEnabled) {
            addFullScreenListener();
        }
    });

    vivaldi.tabsPrivate.onKeyboardShortcut.addListener((id, combination) => combination === 'F11' && toggleFullScreen());

    let style = `
        .fullscreen-listener-enabled {
            ${generalCSS()}
            ${topCSS()}
            ${leftCSS()}
            ${rightCSS()}
            ${bottomCSS()}
        }

        #app:not(.fullscreen-listener-enabled) .hover-div {
            visibility: hidden;
        }
    `;

    if (bookmarkBarPadding) {
        style += `
            .fullscreen-listener-enabled .bookmark-bar {
                height: auto;
                padding-top: ${bookmarkBarPadding};
                padding-bottom: calc(${bookmarkBarPadding} / 2);
            }
        `;
    }

    const styleEl = document.createElement('style');
    styleEl.appendChild(document.createTextNode(style));

    document.head.appendChild(styleEl);

    const hoverDivTop = createHorizontalHoverDiv('top'),
        hoverDivLeft = (hidePanels && panelsLeft) || tabBarPosition === 'left' ? createVerticalHoverDiv('left') : undefined,
        hoverDivRight = (hidePanels && !panelsLeft) || tabBarPosition === 'right' ? createVerticalHoverDiv('right') : undefined,
        hoverDivBottom = !addressBarTop || tabBarPosition === 'bottom' || !bookmarksTop || document.querySelector('#footer').childNodes.length ? createHorizontalHoverDiv('bottom') : undefined;

    function toggleFullScreen() {
        fullscreenEnabled = !fullscreenEnabled;
        fullscreenEnabled ? addFullScreenListener() : removeFullScreenListener();
        chrome.storage.local.set({fullScreenModEnabled: fullscreenEnabled});
    }

    function addFullScreenListener() {
        app.classList.add('fullscreen-listener-enabled');
        webView.addEventListener('pointerenter', hide);

        if (hideDelay) {
            webView.addEventListener('pointerleave', clearHideTimeout);
        }

        hoverDivTop.addEventListener('pointerenter', showTop);
        hoverDivTop.addEventListener('pointerleave', clearTimeouts);

        if (hoverDivLeft) {
            hoverDivLeft.addEventListener('pointerenter', showLeft);
            hoverDivLeft.addEventListener('pointerleave', clearTimeouts);
        }

        if (hoverDivRight) {
            hoverDivRight.addEventListener('pointerenter', showRight);
            hoverDivRight.addEventListener('pointerleave', clearTimeouts);
        }

        if (hoverDivBottom) {
            hoverDivBottom.addEventListener('pointerenter', showBottom);
            hoverDivBottom.addEventListener('pointerleave', clearTimeouts);
        }

        if (updateHoverDivSize) addEventListener('resize', updateHoverDivs);

        hide();
    }

    function removeFullScreenListener() {
        app.classList.remove('fullscreen-listener-enabled');
        webView.removeEventListener('pointerenter', hide);

        if (hideDelay) {
            webView.removeEventListener('pointerleave', clearHideTimeout);
        }

        hoverDivTop.removeEventListener('pointerenter', showTop);
        hoverDivTop.removeEventListener('pointerleave', clearTimeouts);

        if (hoverDivLeft) {
            hoverDivLeft.removeEventListener('pointerenter', showLeft);
            hoverDivLeft.removeEventListener('pointerleave', clearTimeouts);
        }

        if (hoverDivRight) {
            hoverDivRight.removeEventListener('pointerenter', showRight);
            hoverDivRight.removeEventListener('pointerleave', clearTimeouts);
        }

        if (hoverDivBottom) {
            hoverDivBottom.removeEventListener('pointerenter', showBottom);
            hoverDivBottom.removeEventListener('pointerleave', clearTimeouts);
        }

        if (updateHoverDivSize) removeEventListener('resize', updateHoverDivs);

        show();
    }

    function clearTimeouts() {
        if (showTopTimeout) clearTimeout(showTopTimeout);
        if (showLeftTimeout) clearTimeout(showLeftTimeout);
        if (showRightTimeout) clearTimeout(showRightTimeout);
        if (showBottomTimeout) clearTimeout(showBottomTimeout);
    }

    function clearHideTimeout() {
        if (hideTimeout) clearTimeout(hideTimeout);
    }

    function hide() {
        hideTimeout = setTimeout(() => {
            app.classList.add('hidden-top');
            if (hoverDivLeft) app.classList.add('hidden-left');
            if (hoverDivRight) app.classList.add('hidden-right');
            if (hoverDivBottom) app.classList.add('hidden-bottom');
        }, hideDelay);
    }

    function show() {
        showTop();
        showLeft();
        showRight();
        showBottom();
    }

    function showTop() {
        showTopTimeout = setTimeout(() => app.classList.remove('hidden-top'), showDelay);
    }

    function showLeft() {
        if (hoverDivLeft) {
            showLeftTimeout = setTimeout(() => app.classList.remove('hidden-left'), showDelay);
        }
    }

    function showRight() {
        if (hoverDivRight) {
            showRightTimeout = setTimeout(() => app.classList.remove('hidden-right'), showDelay);
        }
    }

    function showBottom() {
        if (hoverDivBottom) {
            showBottomTimeout = setTimeout(() => app.classList.remove('hidden-bottom'), showDelay);
        }
    }

    function isWindowMaximized() {
        return browser.classList.contains('maximized');
    }

    function setHorizontalHoverDivHeight(hoverDiv) {
        hoverDiv.style.height = updateHoverDivSize && isWindowMaximized() ? '1px' : '1.5rem';
    }

    function setVerticalHoverDivWidth(hoverDiv) {
        hoverDiv.style.width = updateHoverDivSize && isWindowMaximized() ? '1px' : '1.5rem'
    }

    function updateHoverDivs() {
        setTimeout(() => {
            setHorizontalHoverDivHeight(hoverDivTop);
            if (hoverDivLeft) setVerticalHoverDivWidth(hoverDivLeft);
            if (hoverDivRight) setVerticalHoverDivWidth(hoverDivRight);
            if (hoverDivBottom) setHorizontalHoverDivHeight(hoverDivBottom);
        }, 150);
    }

    function createHorizontalHoverDiv(position) {
        const hoverDiv = document.createElement('div');
        setHorizontalHoverDivHeight(hoverDiv);
        hoverDiv.style.width = '100vw';
        hoverDiv.style.position = 'fixed';
        hoverDiv.style.left = '0';
        hoverDiv.style.zIndex = '10';
        hoverDiv.style[position] = '0';
        hoverDiv.className = 'hover-div';
        hoverDiv.classList.add(position);
        document.querySelector('#app').appendChild(hoverDiv);
        return hoverDiv;
    }

    function createVerticalHoverDiv(position) {
        const hoverDiv = document.createElement('div');
        hoverDiv.style.height = '100%';
        setVerticalHoverDivWidth(hoverDiv);
        hoverDiv.style.position = 'fixed';
        hoverDiv.style.top = '0';
        hoverDiv.style.zIndex = '10';
        hoverDiv.style[position] = '0';
        hoverDiv.className = 'hover-div';
        hoverDiv.classList.add(position);
        document.querySelector('#app').appendChild(hoverDiv);
        return hoverDiv;
    }

    function generalCSS() {
        return `
            #header, .mainbar, .bookmark-bar, #panels-container {
                transition: transform .5s, opacity .5s ease-in-out !important;
            }

            #header, .mainbar {
                z-index: 8;
            }

            .bookmark-bar  {
                position: absolute;
                left: 0;
                right: 0;
                z-index: 7;
            }

            #header .vivaldi {
                margin-top: 3px;
            }

            #main {
                padding-top: 0 !important;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;

                .inner {
                    position: unset;

                    #webview-container {
                        position: fixed !important;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                    }
                }
            }

            #panels-container {
                position: fixed !important;
            }

            .extensionIconPopupMenu, .button-popup {
                z-index: 8;
            }

            footer {
                margin-top: auto !important;
            }

            .hover-div {
                transition: visibility 0.5s ease-in-out;
            }
        `;
    }

    function topCSS() {
        const topElements = [];
        let height = 0;

        if (tabBarPosition === 'top' || !addressBarTop) {
            topElements.push('#header');
            height += getHeight(header);
        }

        if (addressBarTop) {
            topElements.push('.mainbar');
            height += getHeight(mainBar);
        }

        if (bookmarksTop && bookmarkBar) {
            topElements.push('.bookmark-bar');
            height += getHeight(bookmarkBar);
        }

        if (topElements.length === 0) {
            return '';
        }

        let css = `
            &.hidden-top {
                ${topElements.join(', ')} {
                    transform: translateY(-${height}px);
                    opacity: 0;
                }
            }

            &:not(.hidden-top) .hover-div.top {
                visibility: hidden;
            }
        `;

        if (showAddressBarOnFocus && addressBarTop) {
            css += `
                &.hidden-top {
                    #browser:has(.internal-page .startpage), #browser:has(.UrlBar-AddressField:focus-within) {
                        .mainbar {
                            opacity: 1;

                            .UrlBar-AddressField {
                                position: absolute;
                                top: ${height + showAddressBarPadding}px;
                                left: 25vw;
                                right: 25vw;
                                width: 50vw !important;
                            }
                        }
                    }
                }
            `;
        }

        if (addressBarTop) {
            if (bookmarksTop) {
                css += `
                    .bookmark-bar-top-off .mainbar {
                        padding-bottom: 5px;
                        background: var(--colorAccentBg);
                    }
                `;
            }

            if (tabBarPosition === 'top') {
                css += `
                    .mainbar {
                        margin-top: ${getHeight(header)}px;
                    }
                `;
            }
        }

        if (bookmarksTop) {
            css += `
                .bookmark-bar {
                    top: 0;
                    margin-top: ${height - getHeight(bookmarkBar)}px;
                }
            `;
        }

        return css;
    }

    function leftCSS() {
        const leftElements = [];
        let width = 0,
            tabbarWrapper;

        if (tabBarPosition === 'left') {
            leftElements.push('.tabbar-wrapper');
            tabbarWrapper = document.querySelector('.tabbar-wrapper');
            width += tabbarWrapper.offsetWidth;
        }

        if (hidePanels && panelsLeft) {
            leftElements.push('#panels-container');
            width += panelsContainer.offsetWidth;
        }

        if (leftElements.length === 0) {
            return '';
        }

        let css = `
            &.hidden-left {
                ${leftElements.join(', ')} {
                    transform: translateX(-${width}px);
                    opacity: 0;
                }
            }

            &:not(.hidden-left) .hover-div.left {
                visibility: hidden;
            }
        `;

        if (tabBarPosition === 'left') {
            css += `
                .tabbar-wrapper {
                    position: absolute;
                    top: 0;
                    left: ${panelsLeft ? panelsContainer.offsetWidth : 0}px;
                    z-index: 1;
                    transition: transform .5s, opacity .5s ease-in-out !important;

                    &  > .tabbar-wrapper {
                        position: static;
                    }
                }
            `;
        }

        return css;
    }

    function rightCSS() {
        const rightElements = [];
        let width = 0,
            tabbarWrapper;

        if (tabBarPosition === 'right') {
            rightElements.push('.tabbar-wrapper');
            tabbarWrapper = document.querySelector('.tabbar-wrapper');
            width += tabbarWrapper.offsetWidth;
        }

        if (hidePanels && !panelsLeft) {
            rightElements.push('#panels-container');
            width += panelsContainer.offsetWidth;
        }

        if (rightElements.length === 0) {
            return '';
        }

        let css = `
            &.hidden-right {
                ${rightElements.join(', ')} {
                    transform: translateX(${width}px);
                    opacity: 0;
                }
            }

            &:not(.hidden-right) .hover-div.right {
                visibility: hidden;
            }
        `;

        if (tabBarPosition === 'right') {
            css += `
                .tabbar-wrapper {
                    position: absolute;
                    top: 0;
                    right: ${!panelsLeft ? panelsContainer.offsetWidth : 0}px;
                    z-index: 1;
                    transition: transform .5s, opacity .5s ease-in-out !important;

                    &  > .tabbar-wrapper {
                        position: static;
                    }
                }
            `;
        }

        return css;
    }

    function bottomCSS() {
        const bottomElements = [],
            footer = document.querySelector('#footer');
        let height = 0;

        if (footer.childNodes.length) {
            bottomElements.push('#footer');
            height += getHeight(footer);
        }

        if (!addressBarTop) {
            bottomElements.push('.mainbar');
            height += getHeight(mainBar);
        }

        if (!bookmarksTop && bookmarkBar) {
            bottomElements.push('.bookmark-bar');
            height += getHeight(bookmarkBar);
        }

        if (bottomElements.length === 0) {
            return '';
        }

        let css = `
            &.hidden-bottom {
                ${bottomElements.join(', ')} {
                    transform: translateY(${height}px);
                    opacity: 0;
                }
            }

            &:not(.hidden-bottom) .hover-div.bottom {
                visibility: hidden;
            }
        `;

        if (showAddressBarOnFocus && !addressBarTop) {
            css += `
                &.hidden-bottom {
                    #browser:has(.internal-page .startpage), #browser:has(.UrlBar-AddressField:focus-within) {
                        .mainbar {
                            opacity: 1;

                            .UrlBar-AddressField {
                                position: absolute;
                                bottom: ${getHeight(mainBar) + 10 + showAddressBarPadding}px;
                                left: 25vw;
                                right: 25vw;
                                width: 50vw !important;
                            }
                        }
                    }
                }
            `;
        }

        if (tabBarPosition === 'bottom') {
            css += `
                #footer {
                    transition: transform .5s, opacity .5s ease-in-out !important;
                }
            `;
        }

        if (!addressBarTop) {
            css += `
                .mainbar {
                    margin-bottom: ${getHeight(footer)}px;
                }
            `;

            if (!bookmarksTop) {
                css += `
                    .bookmark-bar-bottom-off .mainbar {
                        padding-bottom: -5px;
                        background: var(--colorAccentBg);
                    }
                `;
            }
        }

        if (!bookmarksTop) {
            css += `
                .bookmark-bar {
                    bottom: ${getHeight(footer) + (!addressBarTop ? getHeight(mainBar) : 0)}px;
                    margin-bottom: 0;
                }
            `;
        }

        return css;
    }

    function getHeight(el) {
        return el?.offsetHeight || 0;
    }
})();

[Sullie]

@oudstand new tab address bar position adjustment feature is working great. I noticed that the address bar shows up on vivaldi:notes, vivaldi:bookmarks, vivaldi:history. This is not a huge issue, so please don't feel any pressure or rush to fix it.

[oudstand]

@Sullie glad to hear!
The adjusted code should show the address bar only on a new tab or if the address bar is in focus.

/**
 * Forum link: https://forum.vivaldi.net/topic/92477/some-javascript-to-automatically-hide-tab-bar-and-address-bar-and-show-them-by-hovering
 * Hides the tab bar and address bar when not hovering
 */
(function checkWebViewForFullscreen() {
    const webView = document.querySelector('#webview-container'),
        hidePanels = true, // set to false to not hide the panels
        bookmarkBarPadding = '6px', // set to '0px' to remove the padding around the bookmark bar
        showDelay = 125, // set to 0 to remove the delay
        hideDelay = 250, // set to 0 to remove the delay
        showAddressBarOnFocus = true, // shows the address bar on a new tab or if in focus - set to false to disable the feature
        showAddressBarPadding = 15, // moves the address bar on a new tab or if in focus to - positive and negative values are allowed
        updateHoverDivSize = true; // decreases the size for the hover divs in fullscreen mode - set ti false to disable the feature

    if (!webView) {
        setTimeout(checkWebViewForFullscreen, 1337);
        return;
    }

    const positions = ['top', 'bottom', 'left', 'right'],
        app = document.querySelector('#app'),
        browser = document.querySelector('#browser'),
        header = document.querySelector('#header'),
        mainBar = document.querySelector('.mainbar'),
        bookmarkBar = document.querySelector('.bookmark-bar'),
        panelsContainer = document.querySelector('#panels-container'),
        tabBarClassList = document.querySelector('#tabs-tabbar-container').classList,
        panelsLeft = document.querySelector('#panels-container').classList.contains('left'),
        tabBarPosition = positions.find(cls => tabBarClassList.contains(cls)),
        addressBarTop = browser.classList.contains('address-top'),
        bookmarksTop = browser.classList.contains('bookmark-bar-top');

    let fullscreenEnabled,
        showTopTimeout,
        showLeftTimeout,
        showRightTimeout,
        showBottomTimeout,
        hideTimeout;

    chrome.storage.local.get('fullScreenModEnabled').then((value) => {
        fullscreenEnabled = value.fullScreenModEnabled || value.fullScreenModEnabled == undefined;
        if (fullscreenEnabled) {
            addFullScreenListener();
        }
    });

    vivaldi.tabsPrivate.onKeyboardShortcut.addListener((id, combination) => combination === 'F11' && toggleFullScreen());

    let style = `
        .fullscreen-listener-enabled {
            ${generalCSS()}
            ${topCSS()}
            ${leftCSS()}
            ${rightCSS()}
            ${bottomCSS()}
        }

        #app:not(.fullscreen-listener-enabled) .hover-div {
            visibility: hidden;
        }
    `;

    if (bookmarkBarPadding) {
        style += `
            .fullscreen-listener-enabled .bookmark-bar {
                height: auto;
                padding-top: ${bookmarkBarPadding};
                padding-bottom: calc(${bookmarkBarPadding} / 2);
            }
        `;
    }

    const styleEl = document.createElement('style');
    styleEl.appendChild(document.createTextNode(style));

    document.head.appendChild(styleEl);

    const hoverDivTop = createHorizontalHoverDiv('top'),
        hoverDivLeft = (hidePanels && panelsLeft) || tabBarPosition === 'left' ? createVerticalHoverDiv('left') : undefined,
        hoverDivRight = (hidePanels && !panelsLeft) || tabBarPosition === 'right' ? createVerticalHoverDiv('right') : undefined,
        hoverDivBottom = !addressBarTop || tabBarPosition === 'bottom' || !bookmarksTop || document.querySelector('#footer').childNodes.length ? createHorizontalHoverDiv('bottom') : undefined;

    function toggleFullScreen() {
        fullscreenEnabled = !fullscreenEnabled;
        fullscreenEnabled ? addFullScreenListener() : removeFullScreenListener();
        chrome.storage.local.set({fullScreenModEnabled: fullscreenEnabled});
    }

    function addFullScreenListener() {
        app.classList.add('fullscreen-listener-enabled');
        webView.addEventListener('pointerenter', hide);

        if (hideDelay) {
            webView.addEventListener('pointerleave', clearHideTimeout);
        }

        hoverDivTop.addEventListener('pointerenter', showTop);
        hoverDivTop.addEventListener('pointerleave', clearTimeouts);

        if (hoverDivLeft) {
            hoverDivLeft.addEventListener('pointerenter', showLeft);
            hoverDivLeft.addEventListener('pointerleave', clearTimeouts);
        }

        if (hoverDivRight) {
            hoverDivRight.addEventListener('pointerenter', showRight);
            hoverDivRight.addEventListener('pointerleave', clearTimeouts);
        }

        if (hoverDivBottom) {
            hoverDivBottom.addEventListener('pointerenter', showBottom);
            hoverDivBottom.addEventListener('pointerleave', clearTimeouts);
        }

        if (updateHoverDivSize) addEventListener('resize', updateHoverDivs);

        hide();
    }

    function removeFullScreenListener() {
        app.classList.remove('fullscreen-listener-enabled');
        webView.removeEventListener('pointerenter', hide);

        if (hideDelay) {
            webView.removeEventListener('pointerleave', clearHideTimeout);
        }

        hoverDivTop.removeEventListener('pointerenter', showTop);
        hoverDivTop.removeEventListener('pointerleave', clearTimeouts);

        if (hoverDivLeft) {
            hoverDivLeft.removeEventListener('pointerenter', showLeft);
            hoverDivLeft.removeEventListener('pointerleave', clearTimeouts);
        }

        if (hoverDivRight) {
            hoverDivRight.removeEventListener('pointerenter', showRight);
            hoverDivRight.removeEventListener('pointerleave', clearTimeouts);
        }

        if (hoverDivBottom) {
            hoverDivBottom.removeEventListener('pointerenter', showBottom);
            hoverDivBottom.removeEventListener('pointerleave', clearTimeouts);
        }

        if (updateHoverDivSize) removeEventListener('resize', updateHoverDivs);

        show();
    }

    function clearTimeouts() {
        if (showTopTimeout) clearTimeout(showTopTimeout);
        if (showLeftTimeout) clearTimeout(showLeftTimeout);
        if (showRightTimeout) clearTimeout(showRightTimeout);
        if (showBottomTimeout) clearTimeout(showBottomTimeout);
    }

    function clearHideTimeout() {
        if (hideTimeout) clearTimeout(hideTimeout);
    }

    function hide() {
        hideTimeout = setTimeout(() => {
            app.classList.add('hidden-top');
            if (hoverDivLeft) app.classList.add('hidden-left');
            if (hoverDivRight) app.classList.add('hidden-right');
            if (hoverDivBottom) app.classList.add('hidden-bottom');
        }, hideDelay);
    }

    function show() {
        showTop();
        showLeft();
        showRight();
        showBottom();
    }

    function showTop() {
        showTopTimeout = setTimeout(() => app.classList.remove('hidden-top'), showDelay);
    }

    function showLeft() {
        if (hoverDivLeft) {
            showLeftTimeout = setTimeout(() => app.classList.remove('hidden-left'), showDelay);
        }
    }

    function showRight() {
        if (hoverDivRight) {
            showRightTimeout = setTimeout(() => app.classList.remove('hidden-right'), showDelay);
        }
    }

    function showBottom() {
        if (hoverDivBottom) {
            showBottomTimeout = setTimeout(() => app.classList.remove('hidden-bottom'), showDelay);
        }
    }

    function isWindowMaximized() {
        return browser.classList.contains('maximized');
    }

    function setHorizontalHoverDivHeight(hoverDiv) {
        hoverDiv.style.height = updateHoverDivSize && isWindowMaximized() ? '1px' : '1.5rem';
    }

    function setVerticalHoverDivWidth(hoverDiv) {
        hoverDiv.style.width = updateHoverDivSize && isWindowMaximized() ? '1px' : '1.5rem'
    }

    function updateHoverDivs() {
        setTimeout(() => {
            setHorizontalHoverDivHeight(hoverDivTop);
            if (hoverDivLeft) setVerticalHoverDivWidth(hoverDivLeft);
            if (hoverDivRight) setVerticalHoverDivWidth(hoverDivRight);
            if (hoverDivBottom) setHorizontalHoverDivHeight(hoverDivBottom);
        }, 150);
    }

    function createHorizontalHoverDiv(position) {
        const hoverDiv = document.createElement('div');
        setHorizontalHoverDivHeight(hoverDiv);
        hoverDiv.style.width = '100vw';
        hoverDiv.style.position = 'fixed';
        hoverDiv.style.left = '0';
        hoverDiv.style.zIndex = '10';
        hoverDiv.style[position] = '0';
        hoverDiv.className = 'hover-div';
        hoverDiv.classList.add(position);
        document.querySelector('#app').appendChild(hoverDiv);
        return hoverDiv;
    }

    function createVerticalHoverDiv(position) {
        const hoverDiv = document.createElement('div');
        hoverDiv.style.height = '100%';
        setVerticalHoverDivWidth(hoverDiv);
        hoverDiv.style.position = 'fixed';
        hoverDiv.style.top = '0';
        hoverDiv.style.zIndex = '10';
        hoverDiv.style[position] = '0';
        hoverDiv.className = 'hover-div';
        hoverDiv.classList.add(position);
        document.querySelector('#app').appendChild(hoverDiv);
        return hoverDiv;
    }

    function generalCSS() {
        return `
            #header, .mainbar, .bookmark-bar, #panels-container {
                transition: transform .5s, opacity .5s ease-in-out !important;
            }

            #header, .mainbar {
                z-index: 8;
            }

            .bookmark-bar  {
                position: absolute;
                left: 0;
                right: 0;
                z-index: 7;
            }

            #header .vivaldi {
                margin-top: 3px;
            }

            #main {
                padding-top: 0 !important;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;

                .inner {
                    position: unset;

                    #webview-container {
                        position: fixed !important;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                    }
                }
            }

            #panels-container {
                position: fixed !important;
            }

            .extensionIconPopupMenu, .button-popup {
                z-index: 8;
            }

            footer {
                margin-top: auto !important;
            }

            .hover-div {
                transition: visibility 0.5s ease-in-out;
            }
        `;
    }

    function topCSS() {
        const topElements = [];
        let height = 0;

        if (tabBarPosition === 'top' || !addressBarTop) {
            topElements.push('#header');
            height += getHeight(header);
        }

        if (addressBarTop) {
            topElements.push('.mainbar');
            height += getHeight(mainBar);
        }

        if (bookmarksTop && bookmarkBar) {
            topElements.push('.bookmark-bar');
            height += getHeight(bookmarkBar);
        }

        if (topElements.length === 0) {
            return '';
        }

        let css = `
            &.hidden-top {
                ${topElements.join(', ')} {
                    transform: translateY(-${height}px);
                    opacity: 0;
                }
            }

            &:not(.hidden-top) .hover-div.top {
                visibility: hidden;
            }
        `;

        if (showAddressBarOnFocus && addressBarTop) {
            css += `
                &.hidden-top {
                    #browser:has(.internal-page .startpage .SpeedDialView), #browser:has(.internal-page .startpage .Dashboard), #browser:has(.UrlBar-AddressField:focus-within) {
                        .mainbar {
                            opacity: 1;

                            .UrlBar-AddressField {
                                position: absolute;
                                top: ${height + showAddressBarPadding}px;
                                left: 25vw;
                                right: 25vw;
                                width: 50vw !important;
                            }
                        }
                    }
                }
            `;
        }

        if (addressBarTop) {
            if (bookmarksTop) {
                css += `
                    .bookmark-bar-top-off .mainbar {
                        padding-bottom: 5px;
                        background: var(--colorAccentBg);
                    }
                `;
            }

            if (tabBarPosition === 'top') {
                css += `
                    .mainbar {
                        margin-top: ${getHeight(header)}px;
                    }
                `;
            }
        }

        if (bookmarksTop) {
            css += `
                .bookmark-bar {
                    top: 0;
                    margin-top: ${height - getHeight(bookmarkBar)}px;
                }
            `;
        }

        return css;
    }

    function leftCSS() {
        const leftElements = [];
        let width = 0,
            tabbarWrapper;

        if (tabBarPosition === 'left') {
            leftElements.push('.tabbar-wrapper');
            tabbarWrapper = document.querySelector('.tabbar-wrapper');
            width += tabbarWrapper.offsetWidth;
        }

        if (hidePanels && panelsLeft) {
            leftElements.push('#panels-container');
            width += panelsContainer.offsetWidth;
        }

        if (leftElements.length === 0) {
            return '';
        }

        let css = `
            &.hidden-left {
                ${leftElements.join(', ')} {
                    transform: translateX(-${width}px);
                    opacity: 0;
                }
            }

            &:not(.hidden-left) .hover-div.left {
                visibility: hidden;
            }
        `;

        if (tabBarPosition === 'left') {
            css += `
                .tabbar-wrapper {
                    position: absolute;
                    top: 0;
                    left: ${panelsLeft ? panelsContainer.offsetWidth : 0}px;
                    z-index: 1;
                    transition: transform .5s, opacity .5s ease-in-out !important;

                    &  > .tabbar-wrapper {
                        position: static;
                    }
                }
            `;
        }

        return css;
    }

    function rightCSS() {
        const rightElements = [];
        let width = 0,
            tabbarWrapper;

        if (tabBarPosition === 'right') {
            rightElements.push('.tabbar-wrapper');
            tabbarWrapper = document.querySelector('.tabbar-wrapper');
            width += tabbarWrapper.offsetWidth;
        }

        if (hidePanels && !panelsLeft) {
            rightElements.push('#panels-container');
            width += panelsContainer.offsetWidth;
        }

        if (rightElements.length === 0) {
            return '';
        }

        let css = `
            &.hidden-right {
                ${rightElements.join(', ')} {
                    transform: translateX(${width}px);
                    opacity: 0;
                }
            }

            &:not(.hidden-right) .hover-div.right {
                visibility: hidden;
            }
        `;

        if (tabBarPosition === 'right') {
            css += `
                .tabbar-wrapper {
                    position: absolute;
                    top: 0;
                    right: ${!panelsLeft ? panelsContainer.offsetWidth : 0}px;
                    z-index: 1;
                    transition: transform .5s, opacity .5s ease-in-out !important;

                    &  > .tabbar-wrapper {
                        position: static;
                    }
                }
            `;
        }

        return css;
    }

    function bottomCSS() {
        const bottomElements = [],
            footer = document.querySelector('#footer');
        let height = 0;

        if (footer.childNodes.length) {
            bottomElements.push('#footer');
            height += getHeight(footer);
        }

        if (!addressBarTop) {
            bottomElements.push('.mainbar');
            height += getHeight(mainBar);
        }

        if (!bookmarksTop && bookmarkBar) {
            bottomElements.push('.bookmark-bar');
            height += getHeight(bookmarkBar);
        }

        if (bottomElements.length === 0) {
            return '';
        }

        let css = `
            &.hidden-bottom {
                ${bottomElements.join(', ')} {
                    transform: translateY(${height}px);
                    opacity: 0;
                }
            }

            &:not(.hidden-bottom) .hover-div.bottom {
                visibility: hidden;
            }
        `;

        if (showAddressBarOnFocus && !addressBarTop) {
            css += `
                &.hidden-bottom {
                    #browser:has(.internal-page .startpage), #browser:has(.UrlBar-AddressField:focus-within) {
                        .mainbar {
                            opacity: 1;

                            .UrlBar-AddressField {
                                position: absolute;
                                bottom: ${getHeight(mainBar) + 10 + showAddressBarPadding}px;
                                left: 25vw;
                                right: 25vw;
                                width: 50vw !important;
                            }
                        }
                    }
                }
            `;
        }

        if (tabBarPosition === 'bottom') {
            css += `
                #footer {
                    transition: transform .5s, opacity .5s ease-in-out !important;
                }
            `;
        }

        if (!addressBarTop) {
            css += `
                .mainbar {
                    margin-bottom: ${getHeight(footer)}px;
                }
            `;

            if (!bookmarksTop) {
                css += `
                    .bookmark-bar-bottom-off .mainbar {
                        padding-bottom: -5px;
                        background: var(--colorAccentBg);
                    }
                `;
            }
        }

        if (!bookmarksTop) {
            css += `
                .bookmark-bar {
                    bottom: ${getHeight(footer) + (!addressBarTop ? getHeight(mainBar) : 0)}px;
                    margin-bottom: 0;
                }
            `;
        }

        return css;
    }

    function getHeight(el) {
        return el?.offsetHeight || 0;
    }
})();

[Sullie]

@oudstand that fixed it. Thanks for the quick fix. Discovered a new issue which is like the old Workspaces issue; the Add Web Panel button on the right sidebar disappears immediately when clicked.