Overlay panels
-
This post is deleted! -
@luetage said in Overlay panels:
@Kein Permanent overlay is an inbuilt Vivaldi function. No need to introduce a modification.
That is not exactly true. When you bring up the sidebar it still reduces viewport by the bar size. It is quite annoying. I'd change the css myself but the trick for inspection of vivaldi elements with dev tools does not work for me and never worked.
-
@Kein That's true, personally I keep the panel container open all the time, so I don't mind this. And inspecting UI should work for everyone, it's likely you are doing something wrong. You can switch this on permanently by setting the Vivaldi flags
Silent Debugging
andDebugging for packed apps
toEnabled
invivaldi://flags
– maybe try if that works for you. I switch it over command line whenever I need it and I don't know a reason why it should fail, the flag does the same, since it changes command line arguments. If both doesn't work for you, something has to be very wrong with your installation. -
@Kein said in Overlay panels:
When you bring up the sidebar it still reduces viewport by the bar size. It is quite annoying.
Indeed it is.
Have been looking for a fix but can't figure out which bits need changing.
-
@Kein did you tried old version of panel overlay?
/* #panels-container { position: fixed; height: 100%; max-width: 1vw; opacity: 0; z-index: 1; transition: max-width .5s cubic-bezier(0.18, 0.89, 0.32, 1.28), opacity .2s linear .2s; } #panels-container:hover { max-width: 50vw; opacity: 1; transition-delay: .5s; } */
-
Thanks for that.
I thought that i already tried that, or maybe thought that it wouldn't work seeing it was so old.
EDIT: so this is great... except that the panel shows when you hover anywhere in the panel_group area. So if there's something in the page that you need to click, the panel will show instead.
Have been playing around with it trying to figure it out.. but just can't figure out how to make it show only when you hover over the hide panel bar (div id=panel_switch).
Ideally hovering over panel_switch will then show switch and whatever is already open in panel_group.
Have tried all of these (also with the :hover selector as above) and they all do the same or don't work. So i'm missing something, just can't figure out what it is.
#panels-container { .panel-group{ #switch{ .div#panels( #panels-container.left.button.overlay{
-
@7twenty All you need is to disable floating panel in settings.
-
@potmeklecbohdan said in Overlay panels:
@7twenty All you need is to disable floating panel in settings.
I think you're mistaken on what is being requested.
I do want the panel to float, but i want panel switcher to float as well. And only show on click or hover of the show panel bar.
-
@7twenty Sorry, I didn't test it good enough… But the note about the setting is correct. I didn't study it, but I think this version was created when floating panel wasn't available. You can reduce the 1% of screen width down to 1px simply by changing the
max-width
in first block. -
@potmeklecbohdan said in Overlay panels:
You can reduce the 1% of screen width down to 1px simply by changing the
max-width
in first block.Nope, still a no go. I'm thinking there's something else going on, more than likely related to the panel being open. It's using the open panel as the hover zone, rather than panel_switch or switch. Which could be right for what it was initially designed for, but seems a bit backwards, at least for how i'm expecting it to work.
#panels-container { position: fixed; height: 100%; max-width: 1px; opacity: 0; z-index: 1; transition: max-width .5s cubic-bezier(0.18, 0.89, 0.32, 1.28), opacity .2s linear .2s; } #panels-container:hover { max-width: 1px; opacity: 1; transition-delay: .5s; }
Also probably looking at this from the wrong angle. Basically just want to make div#panel_switch or that and div#switch work the same as div.panel-group. So extend div#webview-container behind them.
Which is what i was trying to do as noted in the above post, and adding any of those elements with the same code that sort of does work, doesn't do what i'm expecting it to.
-
@7twenty I tell you the last time: disable floating panel. Then it should work as you want.
-
My bad. I did turn it off when testing something, but obviously turned it back on when it wasn't working.
Seems to be all good now.
Thanks!
-
Anyone got the full working script to share at once? There are a lot of posts here and am wondering what's the final settings to use in CSS / JS.
-
To activate showing the side panel on mouse hover, I simply added the following CSS :
#panels-container { position: fixed; height: 100%; max-width: 1vw; opacity: 0; z-index: 1; transition: max-width .5s cubic-bezier(0.18, 0.89, 0.32, 1.28), opacity .2s linear .2s; } #panels-container:hover { max-width: 50vw; opacity: 1; transition-delay: .5s; }
Thanks to @nonamed for the comment!
This work very well with the actual Vivaldi release, version 2.8.1664.44. -
-
@rdewolff This is much more elegant than I used to have years ago.
One thing though, I like to see the icons for the panel, gives me something to aim for. So I can set the opacity of the non-hovered container to 1, that's fine, and I can change the width of it easier enough. But how do I shift the webpage content over by the same width as I've reserved for the panel bar?