[Help] Autohide Panel CSS: how to apply when panel is "off"?

Darthagnon

Crosspost from: https://forum.vivaldi.net/topic/28413/open-panels-on-mouse-over/30?page=2

Greetings, fellow Vivaldi fans.

I'm using the following code to auto-hide the panel. I was wondering if anyone knows how to make it so that the following code applies when the panel is "switched off", rather than the current activation when the panel is "switched on".

/* Hide Sidebar/Panel Container when not hovered over
 Source: https://forum.vivaldi.net/topic/28413/open-panels-on-mouse-over/3
------------------------------------------------------------------------------------------------------------
Needs modification, so that it applies this auto-hide code when set to "Hidden" rather than visible.


*/
#panels-container.left, #panels-container.right {
    position: absolute;
    z-index: 1;
    height: 100%;
    transition: transform .15s 0s !important; /* Originally: .5s .2s */
}

#panels-container.right {right: 0}

#panels-container.left:not(:hover) {
    transform: translateX(-100%);
    transition: transform .8s 0s !important; /* Originally: 2s 1s */
	transition-delay: 2s !important;
}

#panels-container.right:not(:hover) {
    transform: translateX(100%);
    transition: transform .8s 0s!important; /* Originally: 2s 1s */
	transition-delay: 2s !important;
}

LonM

@Darthagnon hi,

Could you describe what you mean by switched off? If the panels are turned off completely, then you won't be able to supply css to it at all.

Darthagnon

@LonM Maybe it's not possible, then. I was hoping that it would be possible to assign the panel toggle to toggle the panel between "pinned" (i.e. always visible) and hover-activation. (Had kinda assumed that it's "off" state was just another state toggle, e.g. like tabs on top/on bottom, and that it would accept CSS no matter what).

Darthagnon

Just found that the code only works when the panel is on the left, for some reason. Anyone have any ideas?

Original source of code: https://forum.vivaldi.net/topic/28413/open-panels-on-mouse-over/3?page=1

LonM

@Darthagnon if the panel title button itself is visible (or at least not turned off) then that could be doable. But it would need some investigation to find the right selectors.

it may not be possible in css alone and might need javascript, I've not done much work with auto hiding.

Darthagnon

@LonM Fair enough. Disabled this css mod, anyway, as I'm using https://forum.vivaldi.net/topic/33105/automate-status-bar-with-css-mod, which makes toggling the sidbebar painless.

Thank you for your help!

dude99

I play with it a bit & decided to use overlay toggle instead (alt + click on the panel toggle), normal mode will be pinned, then overlay mode will autohide the panel on mouseout:

#panels-container.overlay.left, #panels-container.overlay.right {
    position: absolute;
    z-index: 1;
    height: 100%;
    transition: transform .15s 0s !important; /* Originally: .5s .2s */
}

#panels-container.overlay.right {right: 0;}

#panels-container.overlay.left:not(:hover) .panel-group {
    transform: translateX(calc(-100% - 34px));
    transition: transform .8s 0s !important; /* Originally: 2s 1s */
	transition-delay: 2s !important;
}

#panels-container.overlay.right:not(:hover) .panel-group {
    transform: translateX(calc(100% + 34px));
    transition: transform .8s 0s!important; /* Originally: 2s 1s */
	transition-delay: 2s !important;

It seems vivaldi have a nasty bug of not honoring translated element's position for mouseover/out event. LOL

of course, there are other method to accomplish similar effect but I'm too lazy to write the entire code. Basically you can use max-width instead of translateX to hide the panel.

Here is an example:

/* automate panel */
#panels-container {position:fixed; right:0; z-index:1; height:100%; transition: max-width .06s ease-out .0s !important;}
.maximized #panels-container {transition: max-width .06s ease-out .1s !important;}
#panels-container:not(:hover) {max-width:0; transition: max-width .2s ease-out .35s !important;}

have fun.

Darthagnon

@dude99 Thank you so much for that! I'll have a play with it. Is there any advantage to using max-width instead of transform? e.g. does it overcome the weird positioning bug in Vivaldi (I've noticed buggy behaviour with autohiding the panel on the right-hand side, the reason it requires that {right: 0} I reckon)

Darthagnon

Update: Couldn't get dude99's solution working properly, so modified it slightly, and it works now. Two alternative versions, both allow toggling between sidebar visible, hidden and auto-hide, via click and Ctrl+click on panel toggle button (e.g. in status bar).

Default version:

/* Hide Sidebar/Panel Container when not hovered over
 Source: https://forum.vivaldi.net/topic/28413/open-panels-on-mouse-over/3
------------------------------------------------------------------------------------------------------------
Auto-hide the panel/sidebar in Vivaldi. 
IMPORTANT: To toggle pinned/autohide states, you must toggle overlay behaviour via Ctrl+Click on panel toggle buttons, NOT Click on panel toggle buttons (this will hide panel).

v5 - update, based off dude99's work, fixed it not working. 1px offset done better, panel can now toggle between auto-hide, pinned and hidden (known bug: panel will reset to visible if you manually open Downloads, etc.).
v4 - DIDN'T WORK - update, fixed most/all of the bugs, with help from dude99 @ Vivaldi community, source: https://forum.vivaldi.net/topic/36898/help-autohide-panel-css-how-to-apply-when-panel-is-off/7
v3 - didn't work, use v2
v2 - temp fixes for this code, fixed RHS behaviour - Needs modification, so that it applies this auto-hide code when set to "Hidden" rather than visible. 
Also needs fix for RHS glitches (temp fix: 1px offset). Panel also autohides when you're using it (annoying).
v1 - initial release

*/

/* NB for alternate behaviour, such that e.g. Downloads Window stays open, when panel auto-hides:
 - get rid of all occurrences of <.overlay>
 - add <:not(.overlay)> to the ends
 
 This is not the default, as it feels inconsistent (though it works quite nicely).
*/

#panels-container.overlay.left, 
#panels-container.overlay.right {
    position: absolute;
    z-index: 1;
	height: 100%;
    transition: transform .15s 0s !important; /* Originally: .5s .2s */
}

/* Right side is glitchy (dunno why) and will teleport to left without this: */
#panels-container.overlay.right {
	right: 0px;
}

#panels-container.overlay.left:not(:hover) {
    transform: translateX(-34px);
    transition: transform .8s 0s !important; /* Originally: 2s 1s */
	transition-delay: 1.2s !important;
}

#panels-container.overlay.right:not(:hover) {
	transform: translateX(33px); /* Need to offset it by 1px to detect the mouse at all. Sorry for the 1px line. Left side is perfect. */
    transition: transform .8s 0s!important; /* Originally: 2s 1s */
	transition-delay: 1.2s !important;
}

Alternative version, with different behaviour for Downloads, History, etc. panels (I prefer this one, imo, as it doesn't rearrange webpages on opening the panels, but you might think it's inconsistent)

/* Hide Sidebar/Panel Container when not hovered over
 Source: https://forum.vivaldi.net/topic/28413/open-panels-on-mouse-over/3
------------------------------------------------------------------------------------------------------------
Auto-hide the panel/sidebar in Vivaldi. 
IMPORTANT: To toggle pinned/autohide states, you must toggle overlay behaviour via Ctrl+Click on panel toggle buttons, NOT Click on panel toggle buttons (this will hide panel).

v5 alternative - uses non-default panel behaviour. Feels ligher and less glitchy (no webpage rearrangement), but less consistent.
v5 - update, based off dude99's work, fixed it not working. 1px offset done better, panel can now toggle between auto-hide, pinned and hidden (known bug: panel will reset to visible if you manually open Downloads, etc.).
v4 - DIDN'T WORK - update, fixed most/all of the bugs, with help from dude99 @ Vivaldi community, source: https://forum.vivaldi.net/topic/36898/help-autohide-panel-css-how-to-apply-when-panel-is-off/7
v3 - didn't work, use v2
v2 - temp fixes for this code, fixed RHS behaviour - Needs modification, so that it applies this auto-hide code when set to "Hidden" rather than visible. 
Also needs fix for RHS glitches (temp fix: 1px offset). Panel also autohides when you're using it (annoying).
v1 - initial release

*/

#panels-container.left:not(.overlay), 
#panels-container.right:not(.overlay) {
    position: absolute;
    z-index: 1;
	height: 100%;
    transition: transform .15s 0s !important; /* Originally: .5s .2s */
}

/* Right side is glitchy (dunno why) and will teleport to left without this: */
#panels-container.right:not(.overlay) {
	right: 0px;
}

#panels-container.left:not(:hover):not(.overlay) {
    transform: translateX(-34px);
    transition: transform .8s 0s !important; /* Originally: 2s 1s */
	transition-delay: 1.2s !important;
}

#panels-container.right:not(:hover):not(.overlay) {
	transform: translateX(33px); /* Need to offset it by 1px to detect the mouse at all. Sorry for the 1px line. Left side is perfect. */
    transition: transform .8s 0s!important; /* Originally: 2s 1s */
	transition-delay: 1.2s !important;
}

loomes

@Darthagnon

Your version is great :smiling_face_with_open_mouth: but the hover only works when browser window is maximized.
I have edited the code. This works in windowed mode.

#panels-container.overlay.left, 
#panels-container.overlay.right {
   opacity: 0.9;
   position: absolute;
   z-index: 1;
   height: 100%;
   transition-property: transform, opacity;
   transition-duration: .15s 0s;
}

/* Right side is glitchy (dunno why) and will teleport to left without this: */
#panels-container.overlay.right {
   right: 0px;
}

#panels-container.overlay.left:not(:hover) {
   transform: translateX(-28px);
   opacity: 0.1;
   transition-property: transform, opacity;
   transition-duration: .8s , 1s;
   transition-delay: 1.2s !important;
}

#panels-container.overlay.right:not(:hover) {
   transform: translateX(28px);
   opacity: 0.1;
   transition-property: transform, opacity;
   transition-duration: .8s , 1s;
   transition-delay: 1.2s !important;
}

emvaized

@loomes @Darthagnon

Thanks for this great modification, guys!

However, in my case Panel's on-hover animation works only after this little modification:

    #panels-container.overlay.left,
#panels-container.overlay.right {
   opacity: 1;
   position: absolute;
   z-index: 1;
   height: 100%;
   /*transition-property: opacity;
   transition-duration: .15s .15s;*/
    transition:  transform .15s linear .15s, opacity .15s linear .15s;
}



/* Right side is glitchy (dunno why) and will teleport to left without this: */
#panels-container.overlay.right {
   right: 0px;
}

#panels-container.overlay.left:not(:hover) {
   transform: translateX(-28px);
   opacity: 0.15;
   transition-property: transform, opacity;
   transition-duration: .8s , 1s;
   transition-delay: 1.2s !important;
}

#panels-container.overlay.right:not(:hover) {
   transform: translateX(28px);
   opacity: 0.15;
   transition-property: transform, opacity;
   transition-duration: .8s , 1s;
   transition-delay: 1.2s !important;
}

Darthagnon

Thank you, @emvaized and @loomes for updating the code - I recently updated Vivaldi, and my cr*ppy v6 code didn't work any more. I used a slight edit of yours (just transparency and timings), emvaized, and it works perfectly! Thank you for saving me a massive headache!

stardepp

@darthagnon Is there perhaps a way to add a feature to this mod that allows you to pin a panel when needed so that it doesn't automatically hide?

[Help] Autohide Panel CSS: how to apply when panel is "off"?

Sorry, I'm currently hiatus from updating any of my CSS mod until further notice...