Overlay panels

luetage

@masterleo29 That's the wrong fix, since you don't set the z-index, but shift the panel by 1px. I know this because I tried to fix it like this at first too. As far as I can recall this introduces several new problems on the bottom of panels.

Hiding the edge of the panel behind the address bar is how Vivaldi does it without any modifications, shifting it down is problematic. The way that works best is to set a z-index of 3 for the address bar and a z-index of 2 for the panel. If you follow my link above it's all there in the csso variable. You should actually know this since you used most of my code for your revised modification

MasterLeo29

@luetage I personally don't like/I'm not used to work too much with z-index, so I just changed the panel one. The fix I posted was for the toggle transparency (by setting the same color background 'manually'). The 1px change was just a 'regression', since I noticed it when it was mencioned here. ( I remember that I tried to change multiple z-indexes when I tried to fix the toggle transparency but it didn't work at the time)

And yes, this code is a modificiation from the original one. It was what gave me the idea to start 'playing' with some vivaldi mods on my spare time. I think (will check to be sure) that the 1º time i posted i mencioned it was a "tentative of improvement" or something like that. If I did not, then is my fault. Good job with the original code. (so far I believe I tweaked the css, upgraded the toggle and made that animation stuff between modes with timeouts and stuff),

EDIT: yeah ... the 'author' thing in the begining of the mod might lead to some erros (i'm used to type stuff like this at the start for sharing purposes, specially when working w/ other people so that I can see fast who's writing what)

luetage

@masterleo29 You didn't change the z-index of the panel – retoree did. The z-index of 1 is the reason why the panel is visible in the first place. It enables the overlay of the panel. But setting this z-index also means that the z-index of the panel is now higher than that of the addressbar. While on default Vivaldi the addressbar hides the edge of the panel, in the original css mod you are using for your own code, the edge is visible because of that z-index. I fixed that by giving the addressbar a higher z-index than the panel. Well, use it or don't use it, it's your choice. But it's the "vanilla" way to go about it and doesn't introduce further regressions like the current "1px fix" you are applying. I hope this makes sense.

MasterLeo29

@luetage Yes, it makes sense. About the z-index, when i said 'I changed' it was relative to original - no mod - panel, since i too tried to change the z-index for the address bar and other elements at the time the 'toggle panel transparency' bug reached to me (by a friend) and I didn't succedded. Will try to make another take again with z-indexes only.
Btw, thanks for sparing the time to explain the z-indexes way

cjlan

@MasterLeo29
Thanks for this script, it works perfectly.
A small request to add a little more flexibility :

the possibility to activate the overlay on different elements, the bar and/or the panel
and the possibility to activate the mouse over or the click on the bookmarks/downloads/etc.
For example :
Button 1 > Sidebar Overlay On/Off
Button 2 > Webpanel Overlay On/Off
Button 3 > Toggle MouseOver on elements On/Off

I tried to modify your script, but obviously without success...

Thanks for your help!

MasterLeo29

@cjlan Glad you liked it! About your request, I will (try to) grab it soon and see what can I do. If you want (for learning purposes), you can send me what you have tried and I'll try to see what did you miss

MasterLeo29

@cjlan Update: I'm having dificulties to make the sidebar fixed with the wepanel in overlay (tl;dr: one of the options). Good think is this particular option will be available on the next vivaldi version (currently in snapshot).
I can send you my current work with only 2 buttons (1 for mouseover on/off; 1 for overlay onn/off)

kallon

@knoelli said in Overlay panels:

Based on the version from MasterLeo29, I found a simple way for options 2 and 3 so that the side bar does not overlay the webpage while the hover opens as temporary overlay. All that's needed is to give the #webview-container a left margin of 34 pixels, so the code should be:
var csso_overlay = '/* Overlay */ #panels-container { position: absolute; z-index: 1; top: 0px; bottom: 0; }#panels-container.right {right: 0; }/* Overlay - Sides */ #main.left #webview-container { margin-left: 34px;} #main.right #webview-container { margin-right: 0px;} /* Fullscreen */ #browser.fullscreen #webview-container { margin-left: 0; margin-right: 0; } #browser.fullscreen #panels-container { position: relative; }';

Hi, I've been using your suggestion smoothly for these months.
Now I decided to have fixed only the "Show panel" toggle (with the little arrow). Do you know what's the margin in pixels to avoid this little overlay? Thanks.

luetage

@kallon 6px

kallon

@luetage said in Overlay panels:

@kallon 6px

Thank you, kind sir.

AltCode

@luetage said in Overlay panels:

Panel Overlay Toggle

Now that version 2.0 is out, could something from this mod be salvaged so that it only adds the overlay toggle?

luetage

@altcode You wanna switch the actual settings with the button? I don't think that's easily possible.

AltCode

@luetage Well that's an awful shame. I'll surely miss that feature from the mod.

luetage

@altcode Yeah, I miss the button too. But when the overlay panel was introduced in Vivaldi, I realised that the mod didn't function perfectly anymore because of underlying changes in the css. I just switched to the Vivaldi panel overlay mode full time.

I tried to remove the overlay class from the panels container – this is the class that is added and removed when you click the radio button in settings, but sadly (and unlike other toggles eg status bar), the class change doesn't stick and the css doesn't switch. What we could try is use the vivaldi overlay by default and add/remove css code for the non overlay mode.

valiowk

@altcode said in Overlay panels:

@luetage said in Overlay panels:

Panel Overlay Toggle

Now that version 2.0 is out, could something from this mod be salvaged so that it only adds the overlay toggle?

Hover over the Show/Hide Panel button and you'll see that Alt-Click functions as overlay toggle.

luetage

Very good catch. I have the status bar moved and the panel toggle removed, that's why I never noticed. So this doesn't help me, but good to know Vivaldi has made it possible from the UI.

luetage

I take it back. This helps, because we can just simulate the alt-click on the panel toggle from our own button in the panels container. This way status bar doesn't need to be visible and we also don't need to use alt to toggle it.

/* Toggle Panel Overlay */

function overlayToggle() {

    function icn() {
        if (cont.classList.contains('overlay') && exec === 0 || !cont.classList.contains('overlay') && exec === 1) {
            pathS.setAttribute('d', circE);
        }
        else {
            pathS.setAttribute('d', circD);
        }
        exec = 1;
    };

    function simulateClick() {
        const toggle = document.querySelector('.paneltogglefooter');
        var evt = new MouseEvent("click", {
            bubbles: true,
            cancelable: true,
            view: window,
            altKey: true
        });
        icn();
        toggle.dispatchEvent(evt);
    };

    var exec = 0;
    const circE = 'M 13 13m -6, 0a 6,6 0 1,0 12,0a 6,6 0 1,0 -12,0 M 13 13m -4, 0a 4,4 0 1,0 8,0a 4,4 0 1,0 -8,0 M 13 13m -2, 0a 2,2 0 1,0 4,0a 2,2 0 1,0 -4,0';
    const circD = 'M 13 13m -5.5, 0a 5.5,5.5 0 1,0 11,0a 5.5,5.5 0 1,0 -11,0 M 13 13m -2, 0a 2,2 0 1,0 4,0a 2,2 0 1,0 -4,0';
    const cont = document.getElementById('panels-container');
    const switchS = document.getElementById('switch');
    var btnS = document.createElement('button');
    btnS.classList.add('preferences');
    btnS.id = 'overlayToggle';
    btnS.title = 'Toggle Overlay';
    btnS.setAttribute('tabindex', '-1');
    btnS.innerHTML = '<svg width="26" height="26" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd"></path></svg>';
    switchS.lastChild.style = 'margin-top: 0px';
    switchS.insertBefore(btnS,switchS.lastChild);
    const pathS = document.querySelector('#overlayToggle svg path');
    icn();
    document.getElementById('overlayToggle').addEventListener('click', simulateClick);
};

// Loop waiting for the browser to load the UI. You can call all functions from just one instance.

setTimeout(function wait() {
    const browser = document.getElementById('browser');
    if (browser) {
        overlayToggle();
    }
    else {
        setTimeout(wait, 300);
    }
}, 300);

I quickly hacked this together from my original code, can probably be improved, but it works. It's good to have the button back, I missed it

Update – turns out I used a deprecated but still functioning version of mouse events originally, changed it to the new version.

AltCode

@luetage Great! Just one small problem though. The simulated alt-click seems to trigger the on/off state from one of your other mods, Panel Toggle to Address Bar.

luetage

@altcode Oh lol, makes sense because the toggle is actually clicked and Vivaldi doesn't account for this because they only have 1 button state for the toggle. I'll take a look at it.

Kein

Anyone has Working CSS for just permanent overlay for latest version?