Auto hiding status bar



  • I came across this code on the forum:

    /* Hide address bar*/
    .toolbar-addressbar {
    visibility: hidden;
    position: fixed;
    width: 100%;
    opacity: 0;
    z-index: 5;
    transition: opacity .2s linear .2s, visibility 0s linear 2s;
    }
    
    /* Reveal address bar on hover */
    #header:hover ~ #main .toolbar-addressbar, .toolbar-addressbar:hover {
    visibility: visible;
    opacity: 5;
    transition-delay: 0s;
    }
    

    It auto hides the address bar, and it is working a treat on my Vivaldi.1.15.1104.3.x64.
    Can this code be altered to auto hide the status bar?
    What variables need changing if this is doable?

    I have attempted to replace .toolbar-addressbar in above code with .toolbar-statusbar but it did not work.

    Regards
    raed



  • You can display code with 3 backticks before and after the block.
    ```
    Markdown reference

    And maybe this interests you: https://forum.vivaldi.net/topic/22766/attack-on-the-status-bar



  • Please delete redundant post.



  • @luetage

    Thank you on both counts.

    Your code looks interesting, personally I prefer to have the fewest possible number of buttons as possible on the address bar, hopefully a way of auto hiding the native status bar can be found.

    Regards
    raed



  • I have come across this code that auto hides the status bar, unfortunately it only works for me when the browser window is maximized, it does not wok if browser window is resized, any way of making it work when window is resized?

    
    @keyframes show-footer {
        from {
            bottom: -25px;
        }
        to {
            bottom: 0;
        }
    }
    
    @keyframes hide-footer {
        from {
            bottom: 0;
        }
        to {
            bottom: -23px;
        }
    }
    
    #footer {
        animation: hide-footer 1s ease forwards !important;
        animation-delay: 1s !important;
    
    }
    
    #footer:hover {
        animation: show-footer 0s ease forwards !important;
    }
    
    #footer {
        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
    }
    


  • @raed On windows (at least), the "resize" cursor seems to be preventing access to the footer somehow.

    It will work if you raise the height a bit when not maximised, and also it seems overkill to use an animation if you're just going between two states, a transition will work fine as well:

    #footer {
        opacity: .9;
        position: absolute !important;
        right: 0;
        bottom: -22px;
        padding-top: 3px;
        width: 100% !important;
        height: 25px !important;
        z-index: 50 !important;
        transition: bottom 1s ease 1s !important;
    }
    
    .normal #footer {
        bottom: -15px;
    }
    
    #footer:hover {
        bottom: 0px;
        transition: bottom 1s ease 0s !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
    }
    


  • @lonm
    Thank you for your code which I have implemented, I have been experimenting with various height values, unfortunately for me I either have to settle for a semi hidden status bar which I can bring to view with a mouse over, or a truly invisible status bar that does not react to mouse over, so I am still looking for a solution for this dilemma.

    Regards
    raed



  • @raed You could always fudge it and make it transparent when it's not hovered on. Just change the first few selectors to:

    #footer {
        opacity: 0;
        position: absolute !important;
        right: 0;
        bottom: -22px;
        padding-top: 3px;
        width: 100% !important;
        height: 25px !important;
        z-index: 50 !important;
        transition: all 1s ease 1s !important;
    }
    
    .normal #footer {
        bottom: -15px;
    }
    
    #footer:hover {
        opacity: 1;
        bottom: 0px;
        transition: all 1s ease 0s !important;
    }
    


  • @lonm
    Bingo.
    this did the trick, many thanks.
    The complete modified script for those interested:

    /* Auto hide status bar */
    #footer {
        opacity: 0;
        position: absolute !important;
        right: 0;
        bottom: -22px;
        padding-top: 3px;
        width: 100% !important;
        height: 26px !important;
        z-index: 50 !important;
        transition-timing-function: cubic-bezier(0, 0, 0, 1);
        transition-duration: 1s;
        transition-delay: 2s;
    }
    
    .normal #footer {
        bottom: -15px;
    }
    
    #footer:hover {
        opacity: 1;
        bottom: 0px;
        transition: all 0s ease 0s !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
    }
    

    Regards
    raed



  • @lonm
    Just of of curiosity, would it be possible to simply fade out the status bar, and only make it appear on mouse over, instead of making it sliding in and out on mouse over?

    The reason I ask cause I would like to archive the same fade in out effect for both my auto hiding address bar and auto hiding status bar.

    Edit:

    Upon further tinkering (copy pasting various snipits of code and altering various values, in the hope of achieving desired result) I have managed to create the required fade in/out effect for the auto hiding status bar.

    For those interestead in the how:

    in the code @lonm provided there are two instances of

    transition: all 1s ease 1s !important;
    
    

    I replaced the first instance with:

    transition-timing-function: cubic-bezier(0, 0, 0, 1);
    transition-duration: 1s;
    transition-delay: 2s;
    
    

    and replaced the second instance with:

    transition: all 0s ease 0s !important;
    
    

    The final code that appears in the post above has been appended accordingly.

    Regards
    raed



  • @raed To fade in, what changes is the opacity property on #footer and #footer:hover. To move, what changes is the bottom property on the same selectors. But if your found solution works as well, that's probably fine.



  • deleted.



  • @lonm
    I seek help in introducing the very same sliding effect of the above auto hide status bar script, to the following address bar auto hide script:

    
    .toolbar-addressbar {
    visibility: hidden;
    position: fixed;
    opacity: 0;
    z-index: 2;
    transition: opacity .3s linear .7s, visibility 0s linear 1s;
    width: 98% !important;
    left: 1% !important;
    right: 1% !important;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    background: var(--colorBg) !important;
        box-shadow: 7px 7px 28px -8px rgba(0,0,0,0.75);
        transition-timing-function: cubic-bezier(0, 0, 0, 1);
        transition-duration: 1s;
        transition-delay: 1s;
        height: 28px !important;
    }
    
    #header:hover ~ #main .toolbar-addressbar,
    .toolbar-addressbar:hover {
    visibility: visible;
    opacity: 1;
        transition: all 0s ease 0s !important;
    }
    
    
    

    I have introduced a bottom property, but it messes things up, I have tried to use top instead of bottom, but it doesn't seem to do anything.

    Regards
    raed



  • Here is my status bar tweak, you might have to change a few things to fit your taste:

    /* automate status bar */
    #footer { height: 0; }  // hide status bar & show full bottom webpage area
    #footer #status_info > span { // only show url when needed
    	position: absolute;
    	bottom: 0;
    	left: 0;
    	padding: 0px 7px;
    	background: var(--colorBg);
    }
    
    #footer .status-toolbar { // hide buttons
    	position: absolute;
    	border-radius: var(--radiusRounded);
    	bottom: 0;
    	right: 0;
    	padding-top: 2px;
    	height: 15px; // mouseover activation zone
    	opacity: 0; 
    	transition: all 0s ease 0.5s !important; // hide animation speed; delay for half second
    }
    
    #footer .status-toolbar:hover { //show buttons on mouseover
    	height: 26px; // show buttons zone height
    	opacity: 0.95; // slightly transparent background; 1 for no transparent
    	background-color: var(--colorBg);
    	transition: opacity 0.12s ease 0s, height 0s ease 0s !important; // show animation speed; 0s for no animation
    }
    
    1. set status bar to always show.
    2. move pointer to bottom right section to show the buttons.
    3. URL will auto-show when hover over links.

 

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