Dome/matrix.to-dracula-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

Update preview.css

Browse Source
This commit is contained in:
Dome
2026-04-07 18:44:27 +02:00
committed by GitHub
parent 876b4c742c
commit 52dbfeadda
1 changed files with 27 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/preview.css
+27 -30
View File
@@ -4,28 +4,24 @@
} }
.PreviewView h1 { .PreviewView h1 {
font-size: 24px; font-size: 26px;
line-height: 32px; line-height: 1.2;
margin-bottom: 8px; margin-bottom: 8px;
word-wrap: anywhere; font-weight: 700;
color: var(--foreground); /* Nutzt dein Weiß/Highlight */
} }
.PreviewView .avatarContainer { .PreviewView .avatarContainer {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin: 0; margin-bottom: 20px;
} }
.PreviewView .avatar { .PreviewView .avatar {
border-radius: 8px; /* Eckiger, wie in deinem Entwurf */ border-radius: 8px; /* Eckig */
width: 80px; /* Etwas größer für mehr Wirkung */ width: 80px;
height: 80px; height: 80px;
border: 2px solid var(--borders); border: 3px solid var(--borders);
} object-fit: cover;
.PreviewView .mxSpace .avatar {
border-radius: 12px;
} }
.PreviewView .defaultAvatar { .PreviewView .defaultAvatar {
@@ -36,46 +32,47 @@
background-image: url('../images/chat-icon.svg'); background-image: url('../images/chat-icon.svg');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: 60%; opacity: 0.6;
} }
.PreviewView .identifier { .PreviewView .identifier {
color: var(--sub-text); /* Das weichere Grau */ color: var(--ztfr-purple);
font-family: monospace;
font-size: 13px; font-size: 13px;
margin: 12px 0; margin: 8px 0;
opacity: 0.8; letter-spacing: 0.5px;
} }
.PreviewView .memberCount p:not(.placeholder) { .PreviewView .memberCount p:not(.placeholder) {
padding: 6px 12px 6px 28px; padding: 6px 12px 6px 28px;
border-radius: 4px; /* Eckiger statt Pille */ border-radius: 4px;
color: var(--foreground); color: var(--foreground);
background-image: url(../images/member-icon.svg); background-image: url(../images/member-icon.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 6px center; background-position: 8px center;
background-color: var(--lightgrey); /* Dunkler Kontrast zur Card */ background-color: var(--lightgrey);
display: inline-block;
font-size: 12px; font-size: 12px;
} }
.PreviewView .topic { .PreviewView .topic {
font-size: 14px; font-size: 14px;
line-height: 1.6; line-height: 1.6;
color: var(--sub-text); /* Dein Fließtext-Grau */ color: var(--font);
margin: 24px 0; margin: 24px 0;
padding: 0 10px;
} }
/* Placeholder-Animation für dunkles Theme anpassen */ /* Dark Mode Placeholders */
.placeholder { .placeholder {
border-radius: 4px; border-radius: 4px;
--flash-bg: #383a59; /* Dracula Light Grey */ --flash-bg: #2f313d;
--flash-fg: #44475a; /* Dracula Current Line */ --flash-fg: #383a59;
background: linear-gradient(120deg, background: linear-gradient(120deg, var(--flash-bg), var(--flash-bg) 10%, var(--flash-fg) calc(10% + 25px), var(--flash-bg) calc(10% + 50px));
var(--flash-bg),
var(--flash-bg) 10%,
var(--flash-fg) calc(10% + 25px),
var(--flash-bg) calc(10% + 50px)
);
animation: flash 2s linear infinite; animation: flash 2s linear infinite;
background-size: 200%; background-size: 200%;
} }
@keyframes flash {
0% { background-position-x: 0; }
100% { background-position-x: -200%; }
}