Refine avatar styles and update text appearance

Updated avatar styles and adjusted dimensions for a more modern look. Improved placeholder animations and refined text styles for better readability.

css/preview.css

@@ -8,6 +8,7 @@
     line-height: 32px;
     margin-bottom: 8px;
     word-wrap: anywhere;
+    color: var(--foreground); /* Nutzt dein Weiß/Highlight */
 }
 
 .PreviewView .avatarContainer {
@@ -17,9 +18,10 @@
 }
 
 .PreviewView .avatar {
-    border-radius: 100%;
+    border-radius: 8px; /* Eckiger, wie in deinem Entwurf */
-    width: 64px;
+    width: 80px;        /* Etwas größer für mehr Wirkung */
-    height: 64px;
+    height: 80px;
+    border: 2px solid var(--borders);
 }
 
 .PreviewView .mxSpace .avatar {
@@ -27,94 +29,47 @@
 }
 
 .PreviewView .defaultAvatar {
-    width: 64px;
+    width: 80px;
-    height: 64px;
+    height: 80px;
+    border-radius: 8px;
+    background-color: var(--lightgrey);
     background-image: url('../images/chat-icon.svg');
     background-repeat: no-repeat;
     background-position: center;
-    background-size: 85%;
+    background-size: 60%;
-}
-
-.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);
+    color: var(--sub-text); /* Das weichere Grau */
-    font-size: 12px;
+    font-size: 13px;
-    margin: 8px 0;
+    margin: 12px 0;
-}
+    opacity: 0.8;
-
-.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;
+    padding: 6px 12px 6px 28px;
-    border-radius: 14px;
+    border-radius: 4px; /* Eckiger statt Pille */
+    color: var(--foreground);
     background-image: url(../images/member-icon.svg);
     background-repeat: no-repeat;
-    background-position: 2px center;
+    background-position: 6px center;
-    background-color: var(--lightgrey);
+    background-color: var(--lightgrey); /* Dunkler Kontrast zur Card */
-}
+    font-size: 12px;
-
-.PreviewView .memberCount p.placeholder {
-    height: 1.5em;
-    width: 100px;
 }
 
 .PreviewView .topic {
-    font-size: 12px;
+    font-size: 14px;
-    color: var(--grey);
+    line-height: 1.6;
-    margin: 32px 0;
+    color: var(--sub-text); /* Dein Fließtext-Grau */
-}
+    margin: 24px 0;
-
+    padding: 0 10px;
-.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-Animation für dunkles Theme anpassen */
 .placeholder {
-    border-radius: 1em;
+    border-radius: 4px;
-    --flash-bg: #ddd;
+    --flash-bg: #383a59; /* Dracula Light Grey */
-    --flash-fg: #eee;
+    --flash-fg: #44475a; /* Dracula Current Line */
     background: linear-gradient(120deg,
         var(--flash-bg),
         var(--flash-bg) 10%,
@@ -124,10 +79,3 @@
     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%; }
-}