Steam Compact Header by kissaki

/* ==UserStyle==
@name           Steam Compact Header
@namespace      kcode.de/csshack/steam/compactheader
@version        1.0.0
@description    Lays out the Steam Store header elements so they only use the vertical space they need.
@author         Jan Klass
==/UserStyle== */

@-moz-document domain("store.steampowered.com") {
    div#global_header .content {
        margin: 0;
        width: auto; height: auto;
        display: grid;
        grid-template: "logo nav actions ." auto / auto auto auto 1fr;
        align-items: center;
    }
    div#global_header div.logo, #global_header .supernav_container, div#global_actions {
        width: auto; height: auto;
        margin: 0; padding: 0;
        position: inherit; inset: 0;
    }
    div#global_header div.logo {
        grid-area: logo;
    }
    #global_header .supernav_container { 
        grid-area: nav;
        display: grid;
        grid-auto-flow: column;
        gap: 7px;
        margin-right: 1rem;
    }
    div#global_actions { 
        grid-area: actions;
        display: grid;
        grid-template: auto / auto auto;
        align-items: center;
    }
    div#global_header .menuitem {
        padding: 0;
    }
    div#global_actions #global_action_menu {
        display: grid;
        grid-auto-flow: column;
        align-items: center;
    }
}