Overlay panels

  • I updated the code, didn't really like the full circle for "enabled" and exchanged the svg -- new image in original post. Also changed the button titles to explain what they are doing.

  • I thought about the wobbling @iAN-CooG mentioned, caused by the top:1px command in @retoree's code when switching between modes. My thinking is this error isn't caused by the overlay code, but it's an error in Vivaldi's code. The panel always overlaps the address bar, when running Vivaldi normally, just no one notices, because the address bar hides this mistake. Therefore it would be logical to take the command out of retoree's code and run it separated just in the standard custom.css file by default. Doing this nothing "wobbles" when switching modes, and everything works normally and as it should. We could potentially just file a bugreport for this and see, if the Vivaldi devs fix it.

    Anyway, if anyone wants a fix right now: Cut
    .address-top.bookmark-bar-bottom #panels-container,.address-top.bookmark-bar-off #panels-container{top: 1px} from the javascript mod and copy it into your custom.css file.

    In the meantime I would like to know what everyone thinks about this (could as well be I'm wrong), and if we should file a bugreport for it.

  • @luetage This doesn't remove the wobbling, it's still there, but the only difference is that it's now at the bottom near the status bar rather than the top.

  • @altcode You're correct -- but I have no explanation right now 😕 gotta look into it.

    edit: this does the trick

    /* panel overlay fix */
    .address-top.bookmark-bar-bottom #panels-container, .address-top.bookmark-bar-off #panels-container {
    	top: 1px;
    	bottom: -1px;

    Introduces a nice little wobble on bottom, when toggling the bookmarks bar. I wonder if there is a perfect version. Anyway, I think this is Vivaldi's fault 😛

  • Seems like the top:1 bit isn't needed at all.
    .toolbar-addressbar.toolbar{z-index:2} seems to do the trick nicely. Hides the overlaying part of the panel behind the address bar, and this is also what Vivaldi does in the standard setup. A thank you @sjudenim for pointing out that blaming the devs is no solution 😛 Haven't found a downside to this yet, please tell me if you notice anything.

    I have edited the overlay panel toggle setup accordingly on page 2.

  • I'm just testing it again - without even understanding what was wrong with original Christoph142's css mod which perfectly works for me -
    Now for me it's wobbling in every case, overlay enabled or disabled, animations disabled helps a bit but still, the original and very simple css mod is perfectly steady.
    I've tried changing the panels side on the left, as I prefer them on the right, doesn't help much, the lateral wobbling everytime it's switched on/off it unbearable to me 🙂

  • @ian-coog Don't know how you managed that. Neither left nor right side "wobbles" with new code anymore. That isn't even possible, because the top: 1px code has been removed.

    edit: Oh, you mean lateral. Of course lateral the size of the site content is adjusted, whenever you show or hide the panel container. That was one of the requests in the thread retoree fulfilled. The original code not only overlaps with the address bar, but also the panel container overlaps the site content and hides 34px of it. If you don't care about that you obviously don't need anything else. But even their code could use an addressbar with higher z-index, just to get rid of that one problem. Read the thread and you will understand how we ended up here ^^

  • I don't know, maybe some differences in the windows and mac ui?

  • I doubt it. But we will find out as soon as someone with Windows tries this.

  • In any case, it really works better for me by changing the csso var with Christoph's css, with animations off there's no extra wobbling whatsoever for me either with overlay or not.

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

    The important thing is that your mod is cool and can be adapted to both our needs easily.

  • @ian-coog said in Overlay panels:

    In any case, it really works better for me by changing the csso var with Christoph's css

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

    That is pretty much the same thing I am using too. The code that was in the mod gave issues for me as well on Windows 8.1

  • Wrong contribution.

  • @luetage "finally someone did this"
    Thank you.

    @ian-coog original css works only for panel on left/right toggled on, if you hide it, you will have an empty space.
    My css also works with tabs on left/right.

  • @retoree I have tabs on top and works flawlessly this way for me.

  • @ian-coog you really shouldn't have to answer 🙂 I just explained what the differences. The two of them.

  • I tried the JS version with the mod where the panel container also overlays and I'm totally overwhelmed - great job!

    As I tried this after the "pure" CSS hover mod, I'd like to combine both variants - have the JS switch for overlay/non-overlay AND flip out on hover.

    Is this possible?

    As far as I understood the CSS version, the "hover" action is not opening/closing the panel, but making it small (=disappear) or larger (=appear), with the disadvantage that the original resizing by gripping the border does not work any longer.

    I must however admit that I don't fully understand the js logic..
    Does anyone know a way to "really" switch panels per JS? (or CSS...)

  • @morg42 It's hard to tell what you really want, since you are mixing up terminology. We have the panel container, and clicking on an item in the panel container shows a panel.

    You want the panel container to disappear and appear on hover and then the actual panels to either overlay or work standard? I don't think that's possible, because if the panel container is already an overlay, the actual panel can't work in standard mode anymore.

  • I tried not mixing up terminology, but saying what I tried and wanted 😉

    We agree on terms of panel and panel container.

    I would like the JS "overlay switch" in combination with a "hover to show panel" or "hover to show panel and panel container", whatever works better.

    In consequence, I would like to show as few as possible (only the panel switcher "small bar with triangle" or the panel container) and the rest to pop out when hovering over it.

    The first functionality is completely covered by the JS solution; the second is completely covered by your CSS solution (thanks for that, btw).

    The combination of both would be perfect - pop out when hovering and be able to toggle if popping out means overlay the webpage or "push" the website aside.

  • @morg42 I didn't write any css for this, other than a little fixing, I only made the toggle which injects it. Anyway, I suggest you look at this thread: https://forum.vivaldi.net/topic/21528/animated-overlays/, which overlays the panel container on hover. You could try and split it up (one part of code issued by toggle), but not sure, if this can work. My earlier doubts still stand.

  • Ah, now I see - I got to this thread via a link which started at page 2, so one of your contributions was my first "seen" code...

    Basically, I'd like the following:
    nothing is shown at left window edge (except maybe for the thin triangle line "panel switcher")
    by hovering I can popout the panel container and the selected panel (I dont show the panel container, just open/close both together with F4 to keep more screen space)
    while hovering, I can select different panels
    by "un-hovering", both elements pop under/out

    In this scenario, overlay seems to me to be the proper display mode.

    Alternatively, I just open the panel container and panel with F4 as usual and they take away rendering area (not overlaying).

    The option "overlay on/off" more or less as implemented in the current JS could toggle both alternatives.

    The only thing missing now (JS active) is the hover mechanism.

    Hm. I'm running out of ways to describe this further 😞


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