sync working code, and import type-doc

lib/ui/css/media.scss

@@ -0,0 +1,60 @@
+.ui-media-picture>img {
+    max-width: 100px;
+    max-height: 100px;
+}
+
+.ui-media-file {
+    display: inline-flex;
+    align-items: center;
+
+    >svg {
+        width: 26px;
+        height: 26px;
+        fill: var(--link-color);
+    }
+
+    >a {
+        margin-left: 6px;
+        color: var(--link-color);
+        font-size: var(--font-size);
+    }
+}
+
+.ui-media-audio {
+    display: inline-flex;
+    align-items: center;
+    background-color: #eee;
+    border-radius: 20px;
+    overflow: hidden;
+    padding-right: 16px;
+
+    >button {
+        background-color: transparent;
+        border: none;
+        width: 40px;
+        height: 40px;
+        padding: 14px;
+        display: flex;
+        outline: none;
+
+        &:hover {
+            border: none;
+        }
+
+        >svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    >.ui-media-timestamp {
+        color: var(--secondary-color);
+        font-size: var(--font-size);
+        user-select: none;
+    }
+}
+
+.ui-media-video {
+    max-width: 200px;
+    max-height: 200px;
+}

lib/ui/css/variables/definition.scss

@@ -13,6 +13,7 @@
     /*color-scheme: light dark;*/
 
     --color: #201f1e;
+    --secondary-color: #777;
     --bg-color: #fff;
     --border-color: #b9b9b9;
     --focus-border-color: #666;