VSCode Style Hidden Addressbar

tsfreddie

screenshot

Not sure why would anybody need this, but I made it anyway.

#tabs-container {
    background-image: none !important;
}

.toolbar-addressbar {
    transition: none !important;
}

.addressfield {
    min-width: 0px !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background-color: var(--colorBg) !important;
    height: 37px !important;
    padding: 6px !important;
    box-shadow: 0px 0px 8px #000000 !important;
    margin-top: -4px !important;
}

.urlfield {
    border: solid 0.5px var(--colorBorderHighlight) !important;
    background-color: var(--colorAccentBg) !important;
    height: 24px !important;
}

.siteinfo-symbol {
    margin-left: 0px !important;
    margin-top: 0px !important;
}

.button-addressfield {
    height: 24px !important;
    width: 24px !important;
}

.urlSearch {
    margin-top: 10px !important;
    background-color: var(--colorBg) !important;
    box-shadow: 0px 4px 8px #000000 !important;
    min-width: 0px !important;
    max-width: 600px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.toolbar-statusbar {
    background-color: var(--colorHighlightBg) !important;
}

#switch {
    background-color: var(--colorAccentBg) !important;
}

.pageload-indicator {
    height: 100% !important;
}

Colors: BG #252526, FG #fbfbfb, HL #007acc, AC #3c3c3c

Hide address bar, and use keyboard shortcut (default F8\Ctrl+L) to summon the address bar.

luetage

The blue status bar is a nice touch, looks a lot like vscode.

OwOGoodMan

Thanks