Overlay panels


  • Moderator

    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.


  • Moderator

    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.


  • Moderator

    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)


  • Moderator

    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.





  • 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



  • I've been trying to make the panel bar itself static, and the content of the Downloads, Notes, etc. overlay the webpage content, something like this.
    Anyone has an idea how to modify the CSS provided by OP to do what's shown in the link ?

    Thanks.



  • @matycz said in Overlay panels:

    #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;
    }

    Try the code provided further down in this thread. Seems to do what you want, because it just adds a margin to the content to make place for the panel.



  • @luetage the problem with that code though, is that the margin stays there while viewing videos in full screen. Any way to fix that?


Log in to reply
 

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