Animated Overlays (Updated 27.March.19)



  • Vertical Tabs

    (Updated 27.March.19)

    This will make the tab container an overlay that is triggered by moving the cursor to the edge of the browser that you have your tabs set. It will then slide out of sight when not in use. It will work when the UI is windowed or maximized. There is a slight delay to avoid false triggers.

    /* Tab overlay & animation
      ========================================
    */
    #tabs-container.left, #tabs-container.right {
        position: absolute;
        background-color: var(--colorBgDarker) !important;
        opacity: .98;
        z-index: 1;
        height: 100%;
        transition: transform .5s .4s !important
    }
        
    #tabs-container.left::after, #tabs-container.right::before {
      content: '';
      display: block;
      position: absolute;
      background-color: transparent;
      height: 100%;
      width: 8px
    }
    
    #tabs-container.left::after {margin-left: 100%}
    
    #tabs-container.right::before {margin-left: -8px}
        
    #tabs-container.left:not(:hover) {
       transform: translateX(-100%);
       transition: transform .5s .6s !important
    }
        
    #tabs-container.right {right: 0}
            
    #tabs-container.right:not(:hover) {
      transform: translateX(100%);
      transition: transform .5s .6s !important
    }
    
    /* Tab container buttons */
    #tabs-container.left .newtab,
    #tabs-container.right .newtab,
    #tabs-container .sync-and-trash-container {
      margin: 0 auto !important
    }
    

    0_1553742675141_tabbar-overlay.gif

    Speed Dial Navigation Bar

    (Updated 27.March.19)

    The bar is triggered when the cursor is in the area where it normally resides. The same delay as above is here to avoid false triggers

    /* Navigation bar
      ========================================
    */
    .startpage .startpage-navigation {
        position: absolute;
        z-index: 1;
        box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2) !important;
        top: -42px;
        min-height: 42px;
        font-size: 1.1em;
        font-weight: 700;
        width: 100%;
        transition: .3s ease-out .5s !important;
    }
    
    .startpage .startpage-navigation::after {
        content: '';
        display: block;
        position: absolute;
        margin-top: 42px;
        background-color: transparent;
        height: 20px;
        width: 100%
    }
    
    .startpage .startpage-navigation:hover {
        top: 0;
        background: var(--colorBgAlpha);
        opacity: 1;
        transition: .3s ease-out .3s !important;
    }
    
    .button-startpage.active, .button-startpage:active {
        background-color: transparent !important;
        border: 0 !important
    }
    
    .startpage .button-startpage {top: 2px}
    
    .startpage .startpage-navigation .startpage-navigation-group,
    .startpage-navigation-group .editable-title-container {border: none !important}
    
    .startpage .startpage-navigation:not(:hover) .button-startpage:not(.active) {display: none}
    

    0_1553741046519_navbar-overlay.gif



  • Status Bar

    (Abandoned)

    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

    (Abandoned)

    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.



  • This post is deleted!


  • Leave the code up 😃
    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.



  • This post is deleted!


  • Where does this have to be inserted?



  • @rayzon

    create a custom css file and place it with the default browser.html. I use a mods sub-folder myself but it's not needed. Then you add it to the browser.html like this thread discusses https://forum.vivaldi.net/topic/10549/modding-vivaldi/32

    Here's what mine looks like for an example

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>Vivaldi</title>
        <link rel="stylesheet" href="style/common.css" />
        <link rel="stylesheet" href="mods/ui-tweaks.css" />
        <link rel="stylesheet" href="mods/combine-header-toolbar.css" />
        <link rel="stylesheet" href="mods/speeddial-tweaks.css" />
        <link rel="stylesheet" href="mods/tabbar-left-overlay.css" />
        <link rel="stylesheet" href="mods/panel-toggle-button.css" />
        <link rel="stylesheet" href="mods/extension-toggle.css" />
        <link rel="stylesheet" href="mods/status-bar-toggle.css" />
      </head>
      <body style="
        background-color: #0f0f0f;
        background-image: url('resources/vivaldi-splash-icon.svg');
        background-size: 16%;
        background-position: center;
        background-repeat: no-repeat;">
        <div id="app" />
        <script src="localeSettings-bundle.js"></script>
        <script src="background-common-bundle.js"></script>
        <script src="vendor-bundle.js"></script>
        <script src="settings-bundle.js"></script>
        <script src="urlbar-bundle.js"></script>
        <script src="components-bundle.js"></script>
        <script src="bundle.js"></script>
        <script src="mods/panel-toggle-button.js"></script>
        <script src="mods/panel-overlay-toggle.js"></script>
        <script src="mods/extension-toggle.js"></script>
        <script src="mods/status-bar-toggle.js"></script>
      </body>
    </html>
    


  • This post is deleted!


  • The Vertical Tabs code has been updated and I've added a new animated Navigation Bar overlay for the speed dial



  • @sjudenim oooo. really like the update!


Log in to reply
 

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