mapcomplete/css/userbadge.css

#userbadge {
    display: inline-block;
    background-color: var(--background-color);
    color: var(--foreground-color);
    margin: 0;
    margin-bottom: 0.5em;
    width: 100%;
    min-width: 20em;
    pointer-events: all;
    border-radius: 999em;
}

#userbadge a {
    text-decoration: none;
    color: var(--foreground-color);
}


#userbadge form {
    width: unset !important;
}

.userstats {
    display: flex;
    align-items: center;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}

.userstats a {
    display: block ruby;
    padding-right: 0.2em;
    margin-bottom: 0.2em;
}

.userstats span {
    display: block ruby;
    padding-right: 0.2em;
    margin-bottom: 0.2em;
}

.userstats svg {
    width: 1em;
    height: 1em;
    border-radius: 0;
    display: block;
}

.userstats img {
    width: 1em;
    height: 1em;
    border-radius: 0;
    display: block;
}

#profile-pic {
    float: left;
    width: 4em;
    height: 4em;
    padding: 0;
    margin: 0;
    opacity: 0;
    transition: opacity 500ms linear;
    border-radius: 999em;
}

.usertext {
    display: block;
    width: max-content;
    margin: 0;

    padding: 0.9em;
    padding-left: 4.7em; /* Should be half of profile-pic's width + actual padding (same as padding-right)*/
    padding-right: 1.5em;
    border-radius: 2em; /*Half border radius width/height*/
    height: 2.2em; /*SHould equal profile-pic height - padding*/
    z-index: 5000;
    text-align: left;
    background-color: var(--background-color);
    color: var(--foreground-color);
    background-size: 100%;

    line-height: 0.75em;
}




.userbadge-login {
    font-weight: bold;
    font-size: large;
    background-color: var(--subtle-detail-color) !important;
    color: var(--subtle-detail-color-contrast);
    height:3em;

    display: inline-block;
    text-align: center;
    margin: 0;

    min-width: 20em;
    pointer-events: all;
}

#userbadge-and-search {
    display: inline-block;
    width: min-content;
}