[Status bar] Hide and slide overlay



  • Using pafflick's animation code for the Navigation bar, we can turn the status bar (footer) into an animated overlay (won't resize the page) that pops up only when needed. I've also made the info sit on top of the bar so you can see it when the status bar is hidden.

    Note: adding a longer animation to the sliding in process results in flickering so instead it will pop up and then slide away to avoid that issue.

    @keyframes show-footer {
        from {
            bottom: -25px;
      }
        to {
            bottom: 0;
      }
    }
    @keyframes hide-footer {
        from {
            bottom: 0;
      }
        to {
            bottom: -22px;
      }
    }
    #footer {
        animation: hide-footer 2s ease forwards;
        animation-delay: 1s;
    }
    #footer:hover {
        animation: show-footer .05s ease forwards;
     }
    
    #footer {
        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: block !important;
        position: static !important;
        height: 0 !important;
        width: 0 !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;
        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
    }
    

    Give it try



  • @sjudenim
    Well done.
    Works quite well. Being at the bottom, the status bar doesn't have the overshoot problem of the navigation bar.
    I just changed the location of the status_info when you hover a link to the left.


Log in to reply
 

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