Overlay panels
-
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:
#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. -
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.
-
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)
-
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 ^^
-
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 -
@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 -
@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?
-
@altcode Oh yeah, I didn't think about fullscreen.... use this:
#main .inner { position: relative; } #webview-container:not(:-webkit-full-screen) { margin-left: 34px; } #panels-container { position: absolute; z-index: 1; top: 0; bottom: 0; background-color: var(--colorBg); } #panels-container.right { right: 0; }
edit: damn, that doesn't work, but I don't know why. If a css only solution can't be found we would need javascript for this