env.esq/css/preview.css

.PreviewView {
    text-align: center;
    margin-bottom: 32px;
}

.PreviewView h1 {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 8px;
}

.PreviewView .avatarContainer {
    display: flex;
    justify-content: center;
    margin: 0;
}

.PreviewView .avatar {
    border-radius: 100%;
    width: 64px;
    height: 64px;
}

.PreviewView .defaultAvatar {
    width: 64px;
    height: 64px;
    background-image: url('../images/chat-icon.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 85%;
}

.PreviewView .spinner {
    width: 32px;
    height: 32px;
}

.PreviewView .avatar.loading {
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.PreviewView .identifier {
    color: var(--grey);
    font-size: 12px;
    margin: 8px 0;
}

.PreviewView .identifier.placeholder {
    height: 1em;
    margin: 1em 30%;
}

.PreviewView .memberCount {
    display: flex;
    justify-content: center;
    margin: 8px 0;
}

.PreviewView .memberCount.loading {
    margin: 16px 0;
}

.PreviewView .memberCount p {
    font-size: 12px;
    margin: 0;
}

.PreviewView .memberCount p:not(.placeholder) {
    padding: 4px 8px 4px 24px;
    border-radius: 14px;
    background-image: url(../images/member-icon.svg);
    background-repeat: no-repeat;
    background-position: 2px center;
    background-color: var(--lightgrey);
}

.PreviewView .memberCount p.placeholder {
    height: 1.5em;
    width: 100px;
}

.PreviewView .topic {
    font-size: 12px;
    color: var(--grey);
    margin: 32px 0;
}

.PreviewView .topic.loading {
    display: block;
    margin: 24px 12px;
    padding: 4px 0;
}

.PreviewView .topic.loading .placeholder {
    height: 0.8em;
    display: block;
    margin: 12px 0;
}

.PreviewView .topic.loading .placeholder:nth-child(2) {
    margin-left: 5%;
    margin-right: 5%;
}

.placeholder {
    border-radius: 1em;
    --flash-bg: #ddd;
    --flash-fg: #eee;
    background: linear-gradient(120deg,
        var(--flash-bg),
        var(--flash-bg) 10%,
        var(--flash-fg) calc(10% + 25px),
        var(--flash-bg) calc(10% + 50px)
    );
    animation: flash 2s linear infinite;
    background-size: 200%;
}

@keyframes flash {
    0% { background-position-x: 0; }
    50% { background-position-x: -80%; }
    51% { background-position-x: 80%; }
    100% { background-position-x: 0%; }
}