Overlay panels
-
@ian-coog Hmm, interesting. I just did the same to check if my setup was enabling something that isn't possible for others. Deleted my custom.css, deleted my custom.js code, pasted the code from my post -- and it works.... hard to tell what's going wrong for you. I'm on latest snapshot and osx.
Do you even see the button? If not inspect and check console if you get any errors.
-
@luetage thanks for the tip on actually checking the console, I failed to copy whole code, last line was missing. Now I actually see the button and it's toggling the overlay status. Still, if "use animation" is on, it's wobbling a bit the screen everytime I activate it as overlay. Not a biggie.
-
@ian-coog The wobbling you are describing happens because of the css, has nothing to do with the javascript mod. It's the different margins and the fact the panel container itself doesn't overlay, but only the 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 standardcustom.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 yourcustom.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.
https://forum.vivaldi.net/topic/10590/overlay-panels/36?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.
-
-
@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.