Animated overlays



  • Vertical Tabs

    This will make the tab container an overlay that is triggered by moving the cursor to the left edge of the browser. It will then slide out of sight when not in use.

    (This is set to the left side, to have it on the right change all instances of left to right . This might work on the top as well but I have not tested that)

    @keyframes show-tabs {
        from {
            left: -230px;
        }
        to {
            left: 0;
        }
    }
    
    @keyframes hide-tabs {
        from {
            left: 0;
        }
        to {
            left: -230px;
        }
    }
    
    #tabs-container.left {
        animation: hide-tabs 2s ease forwards !important;
        animation-delay: 1s !important;
    }
    
    #tabs-container.left:hover {
        animation: show-tabs 0s ease forwards !important;
    }
    
    #tabs-container.left {
        position: absolute !important;
        z-index: 20;
        height: 100%;
        width: 230px !important;
        background-color: var(--colorBgDarker) !important;
        opacity: .98;
    } 
    


  • Status Bar

    Same effect for the status bar. I've also made the info sit on top of the bar so you can see it when the status bar is hidden.

    @keyframes show-footer {
        from {
            bottom: -25px;
        }
        to {
            bottom: 0;
        }
    }
    
    @keyframes hide-footer {
        from {
            bottom: 0;
        }
        to {
            bottom: -23px;
        }
    }
    
    #footer {
        animation: hide-footer 2s ease forwards !important;
        animation-delay: 1s !important;
    
    }
    
    #footer:hover {
        animation: show-footer 0s ease forwards !important;
    }
    
    #footer {
        background-color: var(--colorAccentBg) !important;
        opacity: .9;
        position: absolute !important;
        right: 0 !important;
        bottom: 0 !important;
        padding-top: 3px !important;
        width: 100% !important;
        height: 25px !important;
        z-index: 50 !important;
    }
    
    #footer.disabled {
        display: none !important;
    }
    
    #footer.disabled>* {
        display: none !important
    }
    
    #footer.disabled #status_info {
        display: block !important
    }
    
    #footer #status_info span {
        position: absolute !important;
        float: right !important;
        bottom: 26px !important;
        right: -5px !important;
        margin: 0 0 0 !important;
        padding: 2px 10px !important;
        border: 0 !important;
        border-width: 1px 1px 0 0 !important;
        max-width: 75% !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        z-index: 50 !important;
        background-color: var(--colorBg) !important;
        border-radius: 3px 0 0 3px !important;
    }
    
    #footer #status_info span:empty {
        display: none !important
    }
    


  • Side Panel

    *still a work in progress

    Since we have placed the tabs on the left in the above code, this turns the side panel into an overlay for the right side.

    @keyframes show-panel {
        from {
            right: -490px;
        }
        to {
            right: 0;
        }
    }
    
    @keyframes hide-panel {
        from {
            right: 0;
        }
        to {
            right: -490px;
        }
    }
    
    #panels-container {
        animation: hide-panel 2.5s ease forwards !important;
        animation-delay: 1s !important;
    }
    
    #panels-container:hover {
        animation: show-panel 0s ease forwards !important;
    }
    
    #panels-container:after {
        background-color: transparent !important;
    }
    
    #main .inner {
        position: relative;
    }
    
    #panels-container.right {
        position: absolute;
        z-index: 15;
        height: 100%;
        right: 0;
    }
    


  • Hiding tab and status bar works really well. What doesn't work for me is showing the panel (have set it to right side as suggested).

    To specify: I can hide/show the panel as long as some specific panel is open, but as soon as I close the slideout and the panel has its natural width, there is no way to bring it back, other than opening a specific panel with shortcut or over the menu.



  • Yes, that is because the panel is being pushed 490px away from the edge of the browser. So if the panel is 490px wide, the trigger point is right there, but if the panel is smaller (as is the case with just the switch being displayed) then it is pushed beyond reach.

    I need to figure out how to have the width not be so specific



  • Leave the code up :D
    I wanted to try something but I deleted it.



  • @luetage

    it's back



  • #panels-container:not(:hover) {
    	max-width: 1px;
    	opacity: 0;
    	transition-delay: 0.8s !important;
    	transition: opacity 2s ease-in, max-width 1.2s ease-out;
    }
    #panels-container:hover {
    	max-width: 500px;
    	opacity: 1;
    }
    #main .inner {
    	position: relative;
    }
    #panels-container {
    	position: absolute;
    	z-index: 1;
    	height: 100%;
    }
    #panels-container.right {
            right: 0;
    }
    

    Try this, it works. I think max-width makes sense in this case. But the transition definitely needs work still.



  • Thanks. I had tried width too but didn't like the effect. It also makes that panel inconsistent with the others



  • Yeah, you're right. I didn't think about it this way. You can do it with transform instead. Did it for panel on right side.

    @keyframes show-panel {
        0% {
            transform: translateX(99%);
            opacity:0;
        }
        99% {
        	opacity: 0.01;
        }
        100% {
            transform: translateX(0%);
        	opacity: 1;
        }
    }
    
    @keyframes hide-panel {
        0% {
            transform: translateX(0%);
            opacity: 1;
        }
        99% {
    	opacity: 0.99;
        }
        100% {
            transform: translateX(99%);
            opacity: 0;
        }
    }
    

    Edit: This misbehaved too while no panel was expanded. That's why I exchanged 100% with 99% above to make it work, and that's why opacity had to be animated too. I think to do this in a really clean way javascript would be needed. http://n12v.com/css-transition-to-from-auto/


    Only works reliably for panel on the left side :/ (-99%)



  • Really enjoying this mod. Makes the status bar and side panel much more useable.

    Also I came up with yet another solution to the side panel issue:

    @keyframes show-panel {
        0% {
    		left: 0;
    		max-width: 1px;
    	}
    	1% {
            left: -360px;
    		max-width: 400px;
        }
        100% {
            left: 0;
        }
    }
    @keyframes hide-panel {
        0% {
            left: 0;
        }
        98% {
            left: -360px;
    		max-width: 400px;
    		opacity: 1;
        }
    	99% {
    		left: -360px;
    		max-width: 1px;
    		opacity: 0;
    	}
    	100% {
    		left: 0;
    		max-width: 1px;
    		opacity: 0;
    	}
    }
    

    Basically it slides the panel offscreen, then changes the max-width and opacity, then moves it back onto the screen so you can hover it. It's not perfect, but it's better than losing it when no panel is expanded.



  • @narsis That's a cute workaround. At times showing panel is still a little wonky, but maybe that's just because of the time it takes for the animation to finish and the panel to slide out again to be detectable.



  • @luetage Ya that's one of the things I meant when I said it's not perfect. Only real fix to that I can think of is to speed up the animation.



  • Hi all, nice mod.

    Unfortunately drag & drop item from webpage to panel function is no longer possible.


Log in to reply
 

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