Rework the media grid with a viewer, metadata banners, and load gate

2026-09-16 12:29:45 +02:00
parent fae754fba0
commit f9b4041157
8 changed files with 604 additions and 52 deletions
@@ -78,6 +78,164 @@
    text-decoration: none;
 }

+.vk-media-figure {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin: 0;
+    min-width: 0;
+}
+
+.vk-media-media {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    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);
+    cursor: pointer;
+}
+
+.vk-media-media img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.vk-media-banner {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font: 400 10px/1.3 ui-monospace, Menlo, monospace;
+    color: var(--color-neutral-400);
+}
+
+.vk-media-play {
+    position: absolute;
+    top: 4px;
+    right: 6px;
+    font-size: 20px;
+    line-height: 1;
+    color: rgba(255, 255, 255, 0.72);
+    text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
+    cursor: pointer;
+}
+
+.vk-media-prompt {
+    grid-column: 1 / -1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    padding: 40px 0;
+}
+
+.vk-media-load {
+    padding: 10px 22px;
+    font-size: 13px;
+}
+
+.vk-media-meta {
+    position: relative;
+    display: inline-flex;
+}
+
+.vk-media-meta-menu {
+    position: absolute;
+    top: 140%;
+    left: 0;
+    z-index: 5;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 8px 10px;
+    border-radius: var(--radius-sm, 6px);
+    background: var(--color-bg);
+    box-shadow: inset 0 0 0 1px var(--color-neutral-800);
+}
+
+.vk-media-viewer-box {
+    width: min(1000px, 94vw);
+    height: min(86vh, 860px);
+}
+
+.vk-media-viewer {
+    display: flex;
+    flex: 1;
+    gap: 12px;
+    min-height: 0;
+}
+
+.vk-media-viewer.wide {
+    flex-direction: column;
+}
+
+.vk-media-viewer.vertical {
+    flex-direction: row;
+}
+
+.vk-media-viewer-media {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    min-height: 0;
+}
+
+.vk-media-viewer-media img,
+.vk-media-viewer-media video {
+    max-width: 100%;
+    max-height: 100%;
+    border-radius: var(--radius-sm, 6px);
+}
+
+.vk-media-viewer-media iframe {
+    width: min(880px, 100%);
+    aspect-ratio: 16 / 9;
+    border: 0;
+    border-radius: var(--radius-sm, 6px);
+}
+
+.vk-media-viewer.vertical .vk-media-viewer-media {
+    max-width: 45%;
+}
+
+.vk-media-viewer-meta {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    overflow-y: auto;
+    font: 400 11px/1.5 ui-monospace, Menlo, monospace;
+    color: var(--color-neutral-300);
+}
+
+.vk-media-viewer.vertical .vk-media-viewer-meta {
+    flex: 1;
+}
+
+.vk-media-meta-key {
+    color: var(--color-neutral-500);
+}
+
+.vk-media-link {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding: 0;
+    border: none;
+    background: none;
+    color: var(--color-accent-400, #7aa2ff);
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+}
+
 .vk-media-card img {
    width: 100%;
    height: 100%;