Overlay panels
-
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.
-
@valaya I would somehow love to be able to do this.
-
@recnamoruen
I did it. Only few tests, to make sure it's work as intended everywhere. Here we go!
Please, try this custom JS mod made by @luetage./* SIDEBAR */ #main .inner { position: relative; } #panels-container { position: absolute; z-index: 2; top: 0; bottom: 0; } #browser:not(.minimal-ui) .toolbar-addressbar.toolbar { z-index:3 } #panels-container.right { right: 0; } #panels-container.left + #webview-container, #panels-container.left ~ #tabs-container.left { margin-left: 34px; } #panels-container.right ~ #webview-container, #panels-container.right ~ #tabs-container.right { margin-right: 34px; } #browser.tabs-right #webview-container { margin-right: 0; } #panels-container.left.switcher + #webview-container, #panels-container.left.switcher ~ #tabs-container.left { margin-left: 0; } #panels-container.right.switcher ~ #webview-container, #panels-container.right.switcher ~ #tabs-container.right { margin-right: 0; } #browser.tabs-right #webview-container { margin-right: 0; } #browser.fullscreen #webview-container, #browser.fullscreen #tabs-container { margin-left: 0 !important; margin-right: 0 !important; } #browser.fullscreen #panels-container { position: relative; }
-
@gshawm Tell us which version you are on, what code you are using, and what other mods you have implemented. Otherwise no one will be able to look into this.
-
@gshawm I deleted all of my css and put your code in. Overlaying panels works as expected. I'm on 1.13 too, although the snapshot. But it makes no difference since snapshot and stable are, for the moment, basically the same version. This leads me to believe that you either have an error in your implementation with browser.html, or it's a windows issue I cannot test.
Edit: Go into the application directory and post your current contents of
browser.html
, just to make sure. -
I don't, I'm European ^^
Well, I don't know if that's the cause, but write the custom.css line below the common.css line (instead of above) and save, just to make sure that this is not your issue.