mirror of
https://github.com/DorkSquadRR/DorkNet.git
synced 2026-10-26 07:28:45 -07:00
Import march-2020-03-10 from private repo (scrubbed 2026-05-27)
Targets Rec Room 2020.03.10 client (also serves 2020.03.06).
Re-import after adding:
- DorkNet.ClientMod/dorknet-clientmod.json.template — config schema
the launcher's manifest-driven patcher renders into UserData/.
- tools/build-patcher-zip.ps1 — produces dorknet-clientpatch-{key}.zip
for v1-march-* Release uploads.
- .github/workflows/release.yml — on tag push publishes both
dorknet-server-march_2020_03_10-win-x64.zip and
dorknet-clientpatch-march_2020_03_10.zip as Release assets.
Same scrub rules as december; tools/build-patcher-zip.ps1 added to
the maintainer-side allow-list so it survives.
This commit is contained in:
Alexa
@@ -0,0 +1,244 @@
|
||||
// DorkNet feed — public photo gallery. Reads from same-origin
|
||||
// /api/photos/v1/* (PhotosController is dual-hosted on api.rec.net and
|
||||
// feed.rec.net so no CORS dance). Hash routing keeps it a single page:
|
||||
// #/ → feed grid
|
||||
// #/p/123 → photo detail
|
||||
// #/u/456 → uploader profile
|
||||
|
||||
const API = '/api/photos/v1';
|
||||
|
||||
const $ = (id) => document.getElementById(id);
|
||||
const el = (tag, attrs, ...children) => {
|
||||
const e = document.createElement(tag);
|
||||
for (const k in attrs) {
|
||||
if (k === 'class') e.className = attrs[k];
|
||||
else if (k === 'on') for (const ev in attrs.on) e.addEventListener(ev, attrs.on[ev]);
|
||||
else if (k === 'html') e.innerHTML = attrs[k];
|
||||
else if (k === 'hidden' && attrs[k]) e.hidden = true;
|
||||
else e[k] = attrs[k];
|
||||
}
|
||||
for (const c of children.flat()) if (c != null) e.append(c?.nodeType ? c : document.createTextNode(String(c)));
|
||||
return e;
|
||||
};
|
||||
|
||||
async function api(path) {
|
||||
const res = await fetch(API + path);
|
||||
if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
|
||||
return res.json();
|
||||
}
|
||||
|
||||
function toast(msg, kind = '') {
|
||||
const t = $('toast');
|
||||
t.textContent = msg;
|
||||
t.className = 'toast ' + kind;
|
||||
t.hidden = false;
|
||||
clearTimeout(toast._h);
|
||||
toast._h = setTimeout(() => t.hidden = true, 3000);
|
||||
}
|
||||
|
||||
function fmtDate(iso) {
|
||||
if (!iso) return '';
|
||||
const d = new Date(iso);
|
||||
if (isNaN(d)) return '';
|
||||
const now = new Date();
|
||||
const diff = (now - d) / 1000;
|
||||
if (diff < 60) return 'just now';
|
||||
if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
|
||||
if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
|
||||
if (diff < 604800) return `${Math.floor(diff / 86400)}d ago`;
|
||||
return d.toLocaleDateString();
|
||||
}
|
||||
|
||||
function initials(name) {
|
||||
if (!name) return '?';
|
||||
const parts = name.split(/[\s_]/).filter(Boolean);
|
||||
return (parts[0]?.[0] || '') + (parts[1]?.[0] || '');
|
||||
}
|
||||
|
||||
function showView(name) {
|
||||
document.querySelectorAll('.view').forEach(v => v.hidden = v.id !== `${name}-view`);
|
||||
document.querySelectorAll('.nav-link').forEach(l => l.classList.toggle('active', l.dataset.route === 'feed' && name === 'feed'));
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
// ── Router ───────────────────────────────────────────────────────────
|
||||
|
||||
window.addEventListener('hashchange', route);
|
||||
window.addEventListener('DOMContentLoaded', route);
|
||||
|
||||
function goFeed() { location.hash = '#/'; }
|
||||
|
||||
function route() {
|
||||
const h = location.hash.slice(1) || '/';
|
||||
const photoMatch = h.match(/^\/p\/(\d+)$/);
|
||||
const userMatch = h.match(/^\/u\/(\d+)$/);
|
||||
if (photoMatch) renderPhoto(parseInt(photoMatch[1], 10));
|
||||
else if (userMatch) renderProfile(parseInt(userMatch[1], 10));
|
||||
else renderFeed();
|
||||
}
|
||||
|
||||
// ── Feed view ────────────────────────────────────────────────────────
|
||||
|
||||
let feedSkip = 0;
|
||||
const PAGE = 24;
|
||||
|
||||
async function renderFeed() {
|
||||
showView('feed');
|
||||
feedSkip = 0;
|
||||
$('grid').replaceChildren(...skeletonCards(6));
|
||||
$('empty').hidden = true;
|
||||
$('loadMore').hidden = true;
|
||||
try {
|
||||
const photos = await api(`/feed?take=${PAGE}&skip=0`);
|
||||
$('grid').replaceChildren();
|
||||
if (photos.length === 0) {
|
||||
$('empty').hidden = false;
|
||||
return;
|
||||
}
|
||||
for (const p of photos) $('grid').append(photoCard(p));
|
||||
feedSkip = photos.length;
|
||||
if (photos.length === PAGE) $('loadMore').hidden = false;
|
||||
} catch (err) {
|
||||
$('grid').replaceChildren();
|
||||
toast(err.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
$('loadMoreBtn').addEventListener('click', async () => {
|
||||
try {
|
||||
const photos = await api(`/feed?take=${PAGE}&skip=${feedSkip}`);
|
||||
for (const p of photos) $('grid').append(photoCard(p));
|
||||
feedSkip += photos.length;
|
||||
if (photos.length < PAGE) $('loadMore').hidden = true;
|
||||
} catch (err) { toast(err.message, 'error'); }
|
||||
});
|
||||
|
||||
function skeletonCards(n) {
|
||||
return Array.from({ length: n }, () => {
|
||||
const card = el('div', { class: 'photo-card' });
|
||||
const h = 180 + Math.floor(Math.random() * 220);
|
||||
card.append(el('div', { class: 'skeleton', style: `height: ${h}px;` }));
|
||||
card.append(el('div', { class: 'photo-meta' },
|
||||
el('div', { class: 'skeleton', style: 'height: 14px; width: 60%; margin-bottom: 8px;' }),
|
||||
el('div', { class: 'skeleton', style: 'height: 12px; width: 90%;' }),
|
||||
));
|
||||
return card;
|
||||
});
|
||||
}
|
||||
|
||||
function photoCard(p) {
|
||||
const card = el('a', {
|
||||
class: 'photo-card',
|
||||
href: `#/p/${p.Id}`,
|
||||
});
|
||||
const img = el('img', {
|
||||
class: 'photo-img',
|
||||
src: p.ImageUrl,
|
||||
alt: p.Caption || `Photo by ${p.UploaderDisplayName}`,
|
||||
loading: 'lazy',
|
||||
});
|
||||
img.addEventListener('error', () => {
|
||||
img.style.display = 'none';
|
||||
});
|
||||
card.append(img);
|
||||
card.append(el('div', { class: 'photo-meta' },
|
||||
el('div', { class: 'uploader' },
|
||||
el('div', { class: 'uploader-avatar' }, initials(p.UploaderDisplayName)),
|
||||
el('span', {}, p.UploaderDisplayName),
|
||||
),
|
||||
p.Caption ? el('div', { class: 'caption' }, p.Caption) : null,
|
||||
el('div', { class: 'photo-foot' },
|
||||
el('span', { class: 'cheers' }, `♥ ${p.CheerCount.toLocaleString()}`),
|
||||
p.RoomName ? el('span', { class: 'room' }, `^${p.RoomName}`) : el('span', { class: 'time' }, fmtDate(p.CreatedAt)),
|
||||
),
|
||||
));
|
||||
return card;
|
||||
}
|
||||
|
||||
// ── Photo detail view ────────────────────────────────────────────────
|
||||
|
||||
async function renderPhoto(id) {
|
||||
showView('photo');
|
||||
$('photoDetail').replaceChildren(el('div', { class: 'skeleton', style: 'height: 480px;' }));
|
||||
try {
|
||||
const p = await api(`/${id}`);
|
||||
const tagged = (p.TaggedPlayerIds || []).slice(0, 8);
|
||||
$('photoDetail').replaceChildren(el('div', { class: 'photo-detail' },
|
||||
el('div', { class: 'image-wrap' },
|
||||
el('img', { src: p.ImageUrl, alt: p.Caption || `Photo #${p.Id}` })),
|
||||
el('div', { class: 'info' },
|
||||
el('h2', {}, `Photo #${p.Id}`),
|
||||
el('div', { class: 'caption-full' }, p.Caption || ''),
|
||||
el('div', { class: 'meta-row' },
|
||||
el('span', { class: 'k' }, 'By'),
|
||||
el('a', { class: 'uploader-link', href: `#/u/${p.UploaderPlayerId}` },
|
||||
el('div', { class: 'uploader-avatar' }, initials(p.UploaderDisplayName)),
|
||||
el('span', {}, p.UploaderDisplayName),
|
||||
),
|
||||
),
|
||||
p.RoomName
|
||||
? el('div', { class: 'meta-row' },
|
||||
el('span', { class: 'k' }, 'In'),
|
||||
el('span', { class: 'room-pill' }, `^${p.RoomName}`))
|
||||
: null,
|
||||
el('div', { class: 'meta-row' },
|
||||
el('span', { class: 'k' }, 'Posted'),
|
||||
el('span', {}, fmtDate(p.CreatedAt) + ' (' + new Date(p.CreatedAt).toLocaleString() + ')'),
|
||||
),
|
||||
tagged.length
|
||||
? el('div', { class: 'meta-row' },
|
||||
el('span', { class: 'k' }, 'Tagged'),
|
||||
el('span', {}, tagged.length + ' player' + (tagged.length === 1 ? '' : 's')))
|
||||
: null,
|
||||
el('div', { class: 'stats' },
|
||||
el('div', { class: 'stat-pill cheers' },
|
||||
el('div', { class: 'v' }, p.CheerCount.toLocaleString()),
|
||||
el('div', { class: 'l' }, 'cheers')),
|
||||
el('div', { class: 'stat-pill' },
|
||||
el('div', { class: 'v' }, p.ViewCount.toLocaleString()),
|
||||
el('div', { class: 'l' }, 'views')),
|
||||
),
|
||||
),
|
||||
));
|
||||
} catch (err) {
|
||||
$('photoDetail').replaceChildren(el('div', { class: 'empty' },
|
||||
el('p', {}, 'Photo not found.')));
|
||||
}
|
||||
}
|
||||
|
||||
$('backBtn').addEventListener('click', goFeed);
|
||||
|
||||
// ── Profile view ─────────────────────────────────────────────────────
|
||||
|
||||
async function renderProfile(playerId) {
|
||||
showView('profile');
|
||||
$('profileDetail').replaceChildren(el('div', { class: 'skeleton', style: 'height: 100px;' }));
|
||||
try {
|
||||
const photos = await api(`/by/${playerId}?take=60`);
|
||||
const uploaderName = photos[0]?.UploaderDisplayName || `Player ${playerId}`;
|
||||
const uploaderUsername = photos[0]?.UploaderUsername || '';
|
||||
$('profileDetail').replaceChildren(
|
||||
el('div', { class: 'profile-header' },
|
||||
el('div', { class: 'avatar' }, initials(uploaderName)),
|
||||
el('div', {},
|
||||
el('h2', {}, uploaderName),
|
||||
el('div', { class: 'username' },
|
||||
uploaderUsername ? `@${uploaderUsername} · ` : '',
|
||||
`${photos.length} photo${photos.length === 1 ? '' : 's'}`),
|
||||
),
|
||||
),
|
||||
(() => {
|
||||
const grid = el('div', { class: 'grid' });
|
||||
if (photos.length === 0)
|
||||
grid.append(el('div', { class: 'empty' },
|
||||
el('p', {}, 'No photos posted yet.')));
|
||||
else
|
||||
for (const p of photos) grid.append(photoCard(p));
|
||||
return grid;
|
||||
})(),
|
||||
);
|
||||
} catch (err) {
|
||||
$('profileDetail').replaceChildren(el('div', { class: 'empty' },
|
||||
el('p', {}, 'Profile not found.')));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>DorkNet — Feed</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header">
|
||||
<a href="/" class="logo">
|
||||
<span class="logo-mark">●</span>
|
||||
<span class="logo-text">DorkNet</span>
|
||||
</a>
|
||||
<nav class="site-nav">
|
||||
<a href="/" class="nav-link active" data-route="feed">Feed</a>
|
||||
<a href="/?room" class="nav-link" data-route="rooms">Rooms</a>
|
||||
<a href="/?about" class="nav-link" data-route="about">About</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="main">
|
||||
<section id="feed-view" class="view">
|
||||
<div class="hero">
|
||||
<h1>The Feed</h1>
|
||||
<p class="muted">Photos taken by players around the server, newest first.</p>
|
||||
</div>
|
||||
<div id="grid" class="grid"></div>
|
||||
<div id="loadMore" class="load-more" hidden>
|
||||
<button id="loadMoreBtn" class="primary">Load more</button>
|
||||
</div>
|
||||
<div id="empty" class="empty" hidden>
|
||||
<p>No photos yet — be the first to share one from the in-game camera.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="photo-view" class="view" hidden>
|
||||
<button id="backBtn" class="ghost back">← back to feed</button>
|
||||
<div id="photoDetail"></div>
|
||||
</section>
|
||||
|
||||
<section id="profile-view" class="view" hidden>
|
||||
<button class="ghost back" onclick="goFeed()">← back to feed</button>
|
||||
<div id="profileDetail"></div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<p>DorkNet · a private Rec Room server · <a href="https://github.com/Alexa-RR/Dorknet">GitHub</a></p>
|
||||
</footer>
|
||||
|
||||
<div id="toast" class="toast" hidden></div>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,448 @@
|
||||
@import url('https://rsms.me/inter/inter.css');
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--bg: #07080b;
|
||||
--bg-grad: radial-gradient(circle at 20% -10%, #1d1748 0%, #07080b 55%);
|
||||
--panel: rgba(20, 22, 30, 0.7);
|
||||
--panel-2: #161922;
|
||||
--panel-3: #1f2330;
|
||||
--border: #262b3a;
|
||||
--border-subtle: #1a1e29;
|
||||
--text: #f0f2f8;
|
||||
--text-dim: #b0b6c8;
|
||||
--muted: #757b8e;
|
||||
--accent: #ff6ec7;
|
||||
--accent-2: #7aa9ff;
|
||||
--accent-grad: linear-gradient(135deg, #ff6ec7 0%, #b48cff 50%, #7aa9ff 100%);
|
||||
--good: #4ad28b;
|
||||
--danger: #ff6f7d;
|
||||
--shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
|
||||
--t: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
|
||||
html, body { height: 100%; }
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--bg);
|
||||
background-image: var(--bg-grad);
|
||||
background-attachment: fixed;
|
||||
color: var(--text);
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
@supports (font-variation-settings: normal) {
|
||||
body { font-family: 'Inter var', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
|
||||
}
|
||||
|
||||
a { color: var(--accent-2); text-decoration: none; transition: color var(--t); }
|
||||
a:hover { color: #a3c4ff; }
|
||||
|
||||
button {
|
||||
background: var(--panel-2);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
transition: all var(--t);
|
||||
}
|
||||
button:hover { background: var(--panel-3); border-color: #353c54; transform: translateY(-1px); }
|
||||
button.primary {
|
||||
background: var(--accent-grad);
|
||||
border-color: transparent;
|
||||
color: #07080b;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 4px 18px rgba(255, 110, 199, 0.25);
|
||||
}
|
||||
button.primary:hover { box-shadow: 0 6px 24px rgba(255, 110, 199, 0.4); }
|
||||
button.ghost {
|
||||
background: transparent;
|
||||
border-color: var(--border);
|
||||
color: var(--text-dim);
|
||||
}
|
||||
button.ghost:hover { color: var(--text); border-color: var(--accent); background: rgba(255,110,199,0.06); }
|
||||
|
||||
/* ── Site shell ──────────────────────────────────────────────────── */
|
||||
|
||||
.site-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 22px 36px;
|
||||
background: rgba(7, 8, 11, 0.7);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
}
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-weight: 800;
|
||||
font-size: 17px;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--text);
|
||||
}
|
||||
.logo:hover { color: var(--text); }
|
||||
.logo-mark {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-grad);
|
||||
color: transparent;
|
||||
box-shadow: 0 4px 14px rgba(255, 110, 199, 0.5);
|
||||
}
|
||||
.site-nav {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
.nav-link {
|
||||
color: var(--muted);
|
||||
padding: 8px 14px;
|
||||
border-radius: 8px;
|
||||
font-weight: 500;
|
||||
transition: all var(--t);
|
||||
}
|
||||
.nav-link:hover { color: var(--text); background: var(--panel-2); }
|
||||
.nav-link.active { color: var(--text); background: var(--panel-2); }
|
||||
|
||||
main { max-width: 1280px; margin: 0 auto; padding: 32px 36px 80px; }
|
||||
|
||||
.site-footer {
|
||||
text-align: center;
|
||||
padding: 32px 16px;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
margin-top: 80px;
|
||||
}
|
||||
.site-footer a { color: var(--muted); }
|
||||
.site-footer a:hover { color: var(--text-dim); }
|
||||
|
||||
/* ── Hero ────────────────────────────────────────────────────────── */
|
||||
|
||||
.hero {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.hero h1 {
|
||||
margin: 0 0 4px;
|
||||
font-size: 38px;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.03em;
|
||||
background: var(--accent-grad);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.hero p { margin: 0; color: var(--text-dim); font-size: 15px; }
|
||||
.muted { color: var(--muted); }
|
||||
|
||||
/* ── Photo grid (masonry-ish via CSS columns) ────────────────────── */
|
||||
|
||||
.grid {
|
||||
column-count: 3;
|
||||
column-gap: 16px;
|
||||
}
|
||||
@media (max-width: 1024px) { .grid { column-count: 2; } }
|
||||
@media (max-width: 600px) { .grid { column-count: 1; } }
|
||||
|
||||
.photo-card {
|
||||
break-inside: avoid;
|
||||
margin-bottom: 16px;
|
||||
background: var(--panel);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
transition: all var(--t);
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
color: inherit;
|
||||
animation: fadeIn 280ms ease-out;
|
||||
}
|
||||
.photo-card:hover {
|
||||
transform: translateY(-3px);
|
||||
border-color: var(--border);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.photo-card .photo-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background: var(--panel-2);
|
||||
aspect-ratio: auto;
|
||||
}
|
||||
.photo-card .photo-meta {
|
||||
padding: 12px 14px 14px;
|
||||
}
|
||||
.photo-card .uploader {
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
margin: 0 0 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.photo-card .uploader-avatar {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-grad);
|
||||
flex-shrink: 0;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
color: #07080b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.photo-card .caption {
|
||||
color: var(--text-dim);
|
||||
font-size: 13px;
|
||||
margin: 6px 0 8px;
|
||||
line-height: 1.45;
|
||||
/* clamp to 3 lines on the card */
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.photo-card .photo-foot {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.photo-card .photo-foot .cheers {
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
.photo-card .photo-foot .room {
|
||||
background: var(--panel-3);
|
||||
padding: 2px 8px;
|
||||
border-radius: 6px;
|
||||
color: var(--text-dim);
|
||||
max-width: 60%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* ── Photo detail ────────────────────────────────────────────────── */
|
||||
|
||||
.back {
|
||||
margin-bottom: 18px;
|
||||
padding: 6px 14px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.photo-detail {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 340px;
|
||||
gap: 28px;
|
||||
align-items: start;
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.photo-detail { grid-template-columns: 1fr; }
|
||||
}
|
||||
.photo-detail .image-wrap {
|
||||
background: var(--panel);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.photo-detail .image-wrap img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.photo-detail .info {
|
||||
background: var(--panel);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 16px;
|
||||
padding: 22px;
|
||||
position: sticky;
|
||||
top: 96px;
|
||||
}
|
||||
.photo-detail .info h2 {
|
||||
margin: 0 0 12px;
|
||||
font-size: 18px;
|
||||
background: var(--accent-grad);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.photo-detail .info .caption-full {
|
||||
color: var(--text);
|
||||
margin: 0 0 16px;
|
||||
line-height: 1.55;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.photo-detail .info .caption-full:empty::before {
|
||||
content: 'No caption.';
|
||||
color: var(--muted);
|
||||
font-style: italic;
|
||||
}
|
||||
.photo-detail .info .meta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 0;
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
color: var(--text-dim);
|
||||
font-size: 13px;
|
||||
}
|
||||
.photo-detail .info .meta-row:first-of-type { border-top: none; }
|
||||
.photo-detail .info .meta-row .k { color: var(--muted); min-width: 80px; }
|
||||
.photo-detail .info .uploader-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
}
|
||||
.photo-detail .info .uploader-link:hover { color: var(--accent); }
|
||||
.photo-detail .info .room-pill {
|
||||
background: var(--panel-3);
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
color: var(--text-dim);
|
||||
font-size: 12px;
|
||||
}
|
||||
.photo-detail .info .stats {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 14px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
}
|
||||
.photo-detail .info .stat-pill {
|
||||
background: var(--panel-2);
|
||||
border: 1px solid var(--border-subtle);
|
||||
padding: 8px 14px;
|
||||
border-radius: 10px;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.photo-detail .info .stat-pill .v {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
font-feature-settings: 'tnum';
|
||||
}
|
||||
.photo-detail .info .stat-pill .l {
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--muted);
|
||||
margin-top: 2px;
|
||||
}
|
||||
.photo-detail .info .stat-pill.cheers .v { color: var(--accent); }
|
||||
|
||||
/* ── Profile view ────────────────────────────────────────────────── */
|
||||
|
||||
.profile-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
padding: 22px;
|
||||
background: var(--panel);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 16px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.profile-header .avatar {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-grad);
|
||||
color: #07080b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.profile-header h2 { margin: 0 0 4px; font-size: 22px; }
|
||||
.profile-header .username { color: var(--muted); font-size: 13px; }
|
||||
|
||||
/* ── Empty / load-more ───────────────────────────────────────────── */
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 80px 24px;
|
||||
color: var(--muted);
|
||||
}
|
||||
.empty p { margin: 0; font-size: 14px; }
|
||||
|
||||
.load-more {
|
||||
text-align: center;
|
||||
margin: 28px 0;
|
||||
}
|
||||
|
||||
/* ── Toast ───────────────────────────────────────────────────────── */
|
||||
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
right: 24px;
|
||||
background: var(--panel-2);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
padding: 12px 18px;
|
||||
border-radius: 10px;
|
||||
box-shadow: var(--shadow);
|
||||
z-index: 200;
|
||||
font-size: 13px;
|
||||
border-left: 3px solid var(--accent);
|
||||
animation: toastIn 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
.toast.error { border-left-color: var(--danger); }
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes toastIn {
|
||||
from { opacity: 0; transform: translateX(20px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
::-webkit-scrollbar { width: 10px; height: 10px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; border: 2px solid var(--bg); }
|
||||
::-webkit-scrollbar-thumb:hover { background: var(--panel-3); }
|
||||
|
||||
.skeleton {
|
||||
background: linear-gradient(90deg, var(--panel-2) 0%, var(--panel-3) 50%, var(--panel-2) 100%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.4s linear infinite;
|
||||
border-radius: 12px;
|
||||
}
|
||||
@keyframes shimmer {
|
||||
from { background-position: 200% 0; }
|
||||
to { background-position: -200% 0; }
|
||||
}
|
||||
Reference in New Issue
Block a user