Autohide Panels' Switch when you don't need it

  • automatePanelSwitch.gif

    This CSS mod allow you to maximize the webpage display estate without the need to constantly disabled/enabled the panel manually (F4 or panel toggle). This mod auto-shrink the panel's switch to the window's top corner (8px x 50px) when the panel is inactive & off focus:

    #panels {overflow:visible;}
    :not(.resizing)#panels-container.overlay .panel-group {transition: width .1s linear !important;}
    #panels-container.overlay {width:0 !important;}
    #panels-container.right.overlay > .SlideBar--FullHeight.alternate, #panels-container.right.icons:not(.overlay) {margin-left:-34px;}
    #panels-container.left.overlay > .SlideBar--FullHeight.alternate, #panels-container.left.icons:not(.overlay) {margin-right: -34px;}
    #panels-container #switch {height: 100%; max-width: 34px; visibility:visible !important; z-index:1;}
    #panels-container.icons:not(:hover) #switch, #panels-container.switcher:not(:hover) #switch {height:50px; max-width:8px; opacity:0; transition: .1s .9s, opacity 0s 1s !important;}

    Shrink to middle section, replace last 2 lines with this:

    #panels-container #switch {z-index:1; max-width: 34px; height: 100%; visibility:visible !important; top:0;}
    #panels-container.icons:not(:hover) #switch, #panels-container.switcher:not(:hover) #switch {opacity:0; max-width:8px; height:50px; top: calc(50% - 25px); transition: .1s .9s, opacity 0s 1s !important;}

    Shrink to bottom corner, replace last 2 lines with this:

    #panels-container #switch {z-index:1; max-width: 34px; height: 100%; visibility:visible !important; top:0;}
    #panels-container.icons:not(:hover) #switch, #panels-container.switcher:not(:hover) #switch {opacity:0; max-width:8px; height:50px; top: calc(100% - 50px); transition: .1s .9s, opacity 0s 1s !important;}


    1. You can summon the panels with keyboard shortcut, or move the pointer to the edge of the window/screen (top/middle/bottom). The switch will autohide after 1 second of inactivity when panels are hidden, & you still can drag & drop web content into the shrunken switch.

    2. You can resize the shrunken switch by changing the 50px & 25px value in the last line. Please note that shrunken switch could interfere with webpage's scrollbar, thus it's best to keep it as small as possible.

    3. You can change the transparency of shrunken switch by changing opacity between .1 & .9. Default 0 is completely invisible.

    4. This CSS mod works really well with mbuch's autohide panel js mod.

    That's all, have fun! Stay home, stay safe. 😉

  • @dude99 Great work thanks!

    I've used this two lines to show the panel's switch no matter where you move your mouse to:

    #panels-container #switch {z-index:1; max-width: 34px; height: 100%; top:0;}
    #panels-container.icons:not(:hover) #switch {opacity:0; max-width:8px; height:100%; top: 0; transition: .1s .9s, opacity 0s 1s !important;}

    For me it is easier to use like this.

  • Ambassador

    @dude99 Does not seem to do anything here, but I have this button to open the panels on the right.

    Panel Switch.png

  • @oudstand Good for you, I personally have a habit of moving the pointer to the edge & activated the panel by accident all the time, that's why I add a limit to the active zone... LOL

  • @Pesala This mod purpose is to hide the entire panel automatically, without the need to disable/enable the panel constantly. The "switch" is a vertical column of buttons inside the panel, which left behind when there are no active panel (not disabled panel).

    With this mod, you can just move the pointer to the window's edge to reveal the "switch" & then pick a panel. It skip the part where you have to click the panel toggle before & after you access the panel. It will save you 2 clicks when access & then hide the panel when you're done. And you can save even more clicks by install the js mod in step 4, which will auto click panel's button inside the switch by simply pointing at 'em.

    This is pretty much a solution for lazy people like me, or those with mouse finger injury, or you simply want to extend the longevity of your favorite mouse by eliminate some repetitive clicks in daily basis.

  • Code updated today to fix panels' resizer placement. 😉

  • Update code again. Now you can even re-enable disabled panel by moving the pointer over the trigger zone, without firing a single click... The panel will appear every-single-time! 😎

  • Which element do I need to resize to shrink the activation zone to just 1-2 pixels at the very edge of the screen while in fullscreen? The current size is a bit too excessive for my everyday use and it's colliding with some actions, like opening bookmark folders.

  • @supra107 Not recommended, becaucse FS have 7px of dead zone all around the edges of the screen just like window mode. Thus, 8px width is the minimum for it to work in FS & normal window mode. If you want to try it, then just alter the max-width:8px to 1px.

  • Update OP code for v3.3, changed .SlideBar--FullHeight.alternate in 4th & 5th line.

Log in to reply

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.