Dome
99 lines
2.2 KiB
CSS
99 lines
2.2 KiB
CSS
.PreviewView {
|
|
text-align: center;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.PreviewView h1 {
|
|
font-size: 26px;
|
|
line-height: 1.2;
|
|
margin-bottom: 8px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.PreviewView .avatarContainer {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.PreviewView .avatar {
|
|
border-radius: 8px; /* Eckig */
|
|
width: 80px;
|
|
height: 80px;
|
|
border: 3px solid var(--borders);
|
|
object-fit: cover;
|
|
}
|
|
|
|
.PreviewView .defaultAvatar {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 8px;
|
|
background-color: var(--lightgrey);
|
|
background-image: url('../images/chat-icon.svg');
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.PreviewView .identifier {
|
|
color: var(--ztfr-purple);
|
|
font-family: monospace;
|
|
font-size: 13px;
|
|
margin: 8px 0;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.PreviewView .memberCount p:not(.placeholder) {
|
|
padding: 6px 12px 6px 28px;
|
|
border-radius: 4px;
|
|
color: var(--foreground);
|
|
background-image: url(../images/member-icon.svg);
|
|
background-repeat: no-repeat;
|
|
background-position: 8px center;
|
|
background-color: var(--lightgrey);
|
|
display: inline-block;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.PreviewView .topic {
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
color: var(--font);
|
|
margin: 24px 0;
|
|
}
|
|
|
|
/* Dark Mode Placeholders */
|
|
.placeholder {
|
|
border-radius: 4px;
|
|
--flash-bg: #2f313d;
|
|
--flash-fg: #383a59;
|
|
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; }
|
|
100% { background-position-x: -200%; }
|
|
}
|
|
|
|
.PreviewView h1,
|
|
.PreviewView .identifier,
|
|
.PreviewView .topic {
|
|
word-wrap: break-word; /* Bricht extrem lange Wörter/IDs um */
|
|
overflow-wrap: break-word;
|
|
max-width: 100%;
|
|
}
|
|
|
|
@media screen and (max-width: 480px) {
|
|
.PreviewView .avatar,
|
|
.PreviewView .defaultAvatar {
|
|
width: 64px;
|
|
height: 64px;
|
|
}
|
|
|
|
.PreviewView h1 {
|
|
font-size: 20px; /* Titel etwas dezenter mobil */
|
|
}
|
|
}
|