Overlay panels
-
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
-
@altcode @Kein @luetage fullscreen and right side fix:
#main .inner { position: relative; } /* Overlay */ #panels-container { position: absolute; z-index: 1; top: 1px; bottom: 0; } #panels-container.right { right: 0; } /* Overlay - Sides */ #main.left #webview-container { margin-left: 34px; } #main.right #webview-container { margin-right: 34px; } /* Fullscreen */ #browser.fullscreen #webview-container { margin-left: 0; margin-right: 0; } #browser.fullscreen #panels-container { position: relative; }
-
@matycz Thanks! This works so much better.