Overlay panels



  • Are you the type of guy/girl who quickly opens panels to look something up and close it again right after? Then overlaying panels onto the page instead of displaying them next to it shifting your tab's content away probably makes sense for you. Here's the code for modding Vivaldi accordingly: B)

    #main .inner {
    	position: relative;
    }
    #panels-container {
    	position: absolute;
        z-index: 1;
        top: 0;
        bottom: 0;
        background-color: var(--colorBg);
    }
    #panels-container.right {
    	right: 0;
    }
    

    Simply drop it into a CSS file and use it as described in the introductory modding post. ;)



  • Hoping it was the right file (XD) I put in custom.css
    What exactly does? Enabling this, the sidebar (where are the notes) overlap with bookmark bar.



  • Whoops! Yes, I didn't compensate for the bookmarks bar as I don't use it. Thanks for pointing it out. I updated the script. ;)



  • The panel covers inner pages: bookmarks, extensions.



  • Sure it does. It's an overlay.



  • Can I exclude status bar area from the overlay? (it makes disappear some parts of the sidebar, I guess)



  • It doesn't cover the status bar in any way…?



  • edit: fixed several stables ago ^^



  • The overlay (Vivaldi hooks way) on 1.5 looks great, and so the small issue in the previous post doesn't happen anymore ^^



  • @Hadden89

    The status bar won't cover the panel using this

    #panels-container {
        position: absolute !important;
        z-index: 25;
        height: 100%;
    }
    

    Also, Christoph's code doesn't work well if, like me, you use tabs on the left and have the panel toggled on that side as well because the z-index is not high enough. The current tab will show through (at least it did when I was watching a video).



  • This is brilliant, thank you.

    I've tried combining it with autohide, but it doesn't seem to work, any pointers? :-)



  • I sort-of managed it

    #main .inner {
        position: relative;
        padding-right: 34px;
    }
    
    #panels-container {
        position: absolute;
        z-index: 25;
        top: 0;  
        bottom: 0;
        width: 34px !important;
        background-color: var(--colorBg);
        transition: width 0.2s linear 0.2s;
    }
    
    #panels-container:hover {
        width: 400px !important; 
    }
    
    #panels-container.right {
        right: 0;
    }
    

    Of course the only problem is that if you toggle a panel off, you still get the width and the background, but I can sort of live with that.



  • @sdfg

    What do you mean? The panel width should not effect the background, it should just appear over top and then disappear to the side.



  • Fixed version with left margin to webview container.

    #main .inner {
        position: relative;
    }
    #webview-container {
        margin-left: 34px;
    }
    #panels-container {
        position: absolute;
        z-index: 1;
        top: 0;
        bottom: 0;
        background-color: var(--colorBg);
    }
    #panels-container.right {
        right: 0;
    }
    


  • Oh wow, I didn't even think about such behavior of the sidebar! Really, that's a great idea. I absolutely love it, thank you!

    The original code works perfect for me. The only thing I've changed is top: 1px; for #panels-container because of the tiny 1px line under the status that's getting overlaid (using v1.12). IDK if that's a bug or feature (the same happens with turned custom styles off) but I felt uncomfortable without that line :frowning:

    alt text



  • @matycz I like this, the only problem that I've found with it is that the margin stays there while viewing a video in fullscreen.



  • @matycz said in Overlay panels:

    Fixed version with left margin to webview container.

    #main .inner {
        position: relative;
    }
    #webview-container {
        margin-left: 34px;
    }
    #panels-container {
        position: absolute;
        z-index: 1;
        top: 0;
        bottom: 0;
        background-color: var(--colorBg);
    }
    #panels-container.right {
        right: 0;
    }
    

    Your code is broken:
    https://imgur.com/a/z1jz3


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.