Can CSS show Addressbar while active tab is loading?
-
Hi all, i try to make the maximized window to behave like Fullscreen mode in other browser. Basically i try to hide tabbar, titlebar/header, & addressbar when window is maximized, & then show each of 'em when pointer touch the edge of the screen. So this is what i manage to patch together from some codes i found in this forum:
/* auto-hide header */ #browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized { background-color: black; } #browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized #header { opacity: 0; min-height: 1px; transition: all 0s ease 2s; } #browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized #header:hover { background-color: var(--colorAccentBg); opacity: 1; transition: all 0s ease 0s; } #browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized #header:active { background-color: var(--colorAccentBg); opacity: 1; min-height: 23px; transition: all 0s ease 0s; } /* auto-hide addressbar */ button.button-toolbar.home {display: none; } .toolbar-addressbar { position: fixed; width: 100%; z-index: 2; max-height: 0vh; visibility: hidden; transition: visibility 0s ease 1s, max-height 1s linear 0s; } #header:hover ~ #main .toolbar-addressbar, .toolbar-addressbar:hover, .addressfield:focus-within, .searchfield:focus-within { max-height: 100vh; visibility: visible; transition: all 0s ease 0s; } /* show pageload indicator when loading */ .addressfield > form, .pageload:not(.unstarted).progressing { visibility: visible; } /* auto-hide tabbar */ #tabs-container.left, #tabs-container.right { position: absolute !important; z-index: 1; height: 100vw; max-width: 4px; opacity: 0; transition: max-width 0.2s linear 0.4s, opacity 0s ease 0.7s; } #tabs-container.right { right: 0; } #tabs-container.left:hover, #tabs-container.right:hover { max-width: 100vw; opacity: 1; transition: max-width 0.1s linear 0.25s; }
Now, i would like to display the Addressfield or the entire progress indicator when webpage is loading. What i manage to come up is:
/* show pageload indicator */ .addressfield > form, .pageload:not(.unstarted).progressing { visibility: visible; }
But the problem is the URL is permanently display, i don't how to get ride of it when webpage is done loading. Is this doable with CSS?
Thanks in advance. -
That code works for you? Only the tabs worked for me, everything was either unresponsive or responding out of view.
However, if it's working for you, then all you need to do is add
.addressfield form input.url
to your auto-hide addressbar section. -
@sjudenim
Sorry for the late reply. Thanks for the suggestion, but it still have the same problem. The URL is permanently floating on the webpage. What i try to accomplish is ONLY show the addressfield when webpage is loading, then hide it when loading is done.Anyway my custom CSS require to enable animation for "delay timing" to work properly. Cursor at left/right edge to show tabbar, top edge to show the address bar, click & hold on top edge to show titlebar. Here is the latest code i use:
/* buttons mod */ #browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized .window-buttongroup button.window-minimize:hover { border-top: 1px solid white; } #browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized .window-buttongroup button.window-maximize:hover { border-top: 1px solid yellow; } #browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized .window-buttongroup button.window-close:hover { border-top: 1px solid red; } button.button-toolbar.home { display: none; } /* auto-hide header */ #browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized { background-color: black; } #browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized #header { opacity: 0; min-height: 1px; transition: all 0s ease 2s; } #browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized #header:active { background-color: var(--colorAccentBg); opacity: 1; min-height: 23px; transition: all 0s ease 0s; } #browser:not(.native):not(.horizontal-menu):not(.tabs-top).maximized #header:hover { background-color: var(--colorAccentBg); opacity: 1; transition: all 0s ease 0s; } /* auto-hide addressbar */ .toolbar-addressbar { position: fixed; width: 100%; z-index: 2; max-height: 0vh; visibility: hidden; transition: max-height 0.5s ease 0s, visibility 0.4s ease 0s; } #header:hover ~ #main .toolbar-addressbar, .toolbar-addressbar:hover, .addressfield:focus-within, .searchfield:focus-within { max-height: 100vh; visibility: visible; transition: max-height 0.4s ease 0s; } /* show pageload indicator */ .addressfield .pageload-indicator { border-bottom: 1px solid gray; background: linear-gradient(60deg, violet, var(--colorAccentBg)); } .addressfield .pageload:not(.unstarted).progressing { visibility: visible; } /* auto-hide tabbar */ #tabs-container.right { right: 0; } #tabs-container.left, #tabs-container.right { position: absolute; z-index: 1; height: 100%; max-width: 4px; opacity: 0; transition: max-width 0.6s ease 0.3s, opacity 0s ease 1s; } #tabs-container.left:hover, #tabs-container.right:hover { max-width: 100vw; opacity: 1; transition: max-width 0s linear 0.27s, opacity 0s linear 0.2s; }
It seem CSS doesn't have a parent selector to combine the progress indicator with addressbar/textbox, so i guess the only way is to use JavaScript.
-
Yeah, the missing parent selector is a real pain in css, but it's understandable since it's cascading.
-