[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.
@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 }
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. -