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.



  • I've been fooling around with the tabs panel overlay, the thumbs now look like they hover over the the page. I've also added some dimming effects to enhance the active tab. It can still be triggered by the moving the cursor to any part of the left side of the page as the container background is still present but just transparent.

    @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;
        animation-delay: 1s !important;
    }
    
    #tabs-container.left {
        position: absolute !important;
        z-index: 5;
        height: 100%;
        width: 230px !important;
        background-color: transparent; !important;
    }
    
    /* Adds spacing between the tabs */
    .tab-position {
        padding: 5px 10px 0 4px;
    }
    
    .tab-strip .tab {
        -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.6) !important;
        border-radius: var(--radius) !important; 
    }
    
    
    /* Desaturates inactive tabs to make the active one pop more. Meant for use with tab thumbnails */
    .tab-strip .tab:not(.active) {
        -webkit-filter: grayscale(100%) brightness(60%);
        color: var(--colorAccentFgAlpha) !important;
    }
    
    .tab-strip .tab:not(.active):hover {
        -webkit-filter: grayscale(0%) brightness(100%);
    }
    
    /* Background and positioning for new tab and trash buttons */
    .button-tabbar {
        background-color: var(--colorBg);
        border-radius: 50%;
        -webkit-box-shadow: 0 0 8px 0 rgba(0,0,0,.6) !important; 
    }
    
    #tabs-container.left .newtab, #tabs-container.right .newtab{
        margin-top: 5px;
        padding-bottom: 3px;
        left: 95px !important;
    }
    
    #tabs-container .toggle-trash {
        margin-bottom: 5px;
        margin-right: 13px;
        padding-right: 5px;
        padding-bottom: 1px;
        height: 30px;
        width: 30px;
    }
    

    0_1516395138850_Untitled.png

    This is for the custom svg buttons

    /* Replaces the new tab and trash icons */
    #tabs-container .newtab svg path {
        d: path('M15 9a1 1 0 0 1-1 1h-4v4a1 1 0 0 1-2 0v-4H4a1 1 0 0 1 0-2h4V4a1 1 0 0 1 2 0v4h4a1 1 0 0 1 1 1z');
    }
    
    .button-tabbar.toggle-trash svg path {
        d: path('m2 7c-1.105 0-2 0.895-2 2s0.895 2 2 2 2-0.895 2-2-0.895-2-2-2zm14 0c-1.105 0-2 0.895-2 2s0.895 2 2 2 2-0.895 2-2-0.895-2-2-2zm-7 0c-1.105 0-2 0.895-2 2s0.895 2 2 2 2-0.895 2-2-0.895-2-2-2z');
    }
    


  • 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>
    

Log in to reply
 

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