[mirotalk] - feat: improve extra info UI with styled cards

public/css/client.css

@@ -3109,15 +3109,82 @@ button {
 .extra-info-container {
     margin-top: 15px;
     border-radius: 8px;
-    background: var(--body-bg);
+    background: transparent;
 }
 
 #extraInfo {
-    padding: 10px;
-    font-size: 14px;
-    color: #fff;
-    /* background: var(--select-bg); */
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.extra-info-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 4px 0;
+}
+
+.extra-info-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 7px 10px;
     border-radius: 10px;
+    border: var(--border);
+    background: var(--select-bg);
+    font-size: 0.82rem;
+}
+
+.extra-info-label {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    color: rgba(255, 255, 255, 0.55);
+    white-space: nowrap;
+    min-width: 70px;
+}
+
+.extra-info-label i {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    font-size: 0.85rem;
+    line-height: 1;
+    flex-shrink: 0;
+    color: rgba(255, 255, 255, 0.4);
+}
+
+.extra-info-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    line-height: 1;
+    flex-shrink: 0;
+    color: rgba(255, 255, 255, 0.4);
+}
+
+.extra-info-values {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+    justify-content: flex-end;
+}
+
+.extra-info-badge {
+    display: inline-block;
+    padding: 2px 9px;
+    border-radius: 20px;
+    background: transparent;
+    border: var(--border);
+    color: rgba(255, 255, 255, 0.85);
+    font-size: 0.78rem;
+    letter-spacing: 0.01em;
+    white-space: nowrap;
 }
 
 /*--------------------------------------------------------------