Add the Media and Bot tabs to the web UI

2026-09-16 08:09:29 +02:00
parent 8b7b5b675d
commit 49fd28756f
5 changed files with 387 additions and 1 deletions
@@ -0,0 +1,115 @@
+/* Media archive and slopbot views. Scoped to the media-* classes. */
+
+.vk-media-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 90;
+    display: flex;
+    background: color-mix(in srgb, var(--color-neutral-900) 70%, transparent);
+}
+
+.vk-media-overlay[hidden] {
+    display: none;
+}
+
+.vk-media-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: min(1100px, 100%);
+    margin: 24px auto;
+    padding: 14px;
+    overflow: hidden;
+    border-radius: var(--radius-lg, 12px);
+    background: var(--color-bg);
+    box-shadow: inset 0 0 0 1px var(--color-neutral-800);
+}
+
+.vk-media-head {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.vk-media-title {
+    flex: 1;
+    font-weight: 600;
+}
+
+.vk-media-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.vk-media-status {
+    font: 400 11px/1.5 ui-monospace, Menlo, monospace;
+    color: var(--color-neutral-400);
+    white-space: pre-wrap;
+}
+
+.vk-media-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 8px;
+    overflow-y: auto;
+    flex: 1;
+    align-content: start;
+}
+
+.vk-media-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    aspect-ratio: 1;
+    overflow: hidden;
+    border-radius: var(--radius-sm, 6px);
+    background: var(--color-neutral-900);
+    box-shadow: inset 0 0 0 1px var(--color-neutral-800);
+    color: var(--color-neutral-300);
+    text-decoration: none;
+}
+
+.vk-media-card img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.vk-media-card-kind {
+    font: 600 10px/1 ui-monospace, Menlo, monospace;
+    letter-spacing: 0.08em;
+    color: var(--color-accent-400, var(--color-neutral-300));
+}
+
+.vk-media-card-name {
+    max-width: 90%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font: 400 11px/1 ui-monospace, Menlo, monospace;
+    color: var(--color-neutral-400);
+}
+
+.vk-media-scrapes {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    max-height: 140px;
+    overflow-y: auto;
+}
+
+.vk-media-scrape {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font: 400 11px/1.4 ui-monospace, Menlo, monospace;
+    color: var(--color-neutral-400);
+}
+
+.vk-media-scrape button {
+    flex: none;
+}