mirror of
https://github.com/thegeneralist01/archivr
synced 2026-07-22 03:05:32 +02:00
feat: entry previews (#24)
* feat: entry previews (video, tweet, article, iframe, image, audio bar)
- Add PreviewPanel dispatch hub routing by entity_kind + artifact extension
- VideoPreview: HTML5 <video> for YouTube/Instagram/TikTok/Reddit/X posts
- TweetPreview: tweet card, thread, and X article renderer (ported from x-article-renderer)
- IframePreview: sandboxed iframe for SingleFile web pages and PDFs
- ImagePreview: image viewer with click-to-open-fullsize
- AudioBar: persistent fixed-bottom player (Spotify-style) that survives entry navigation
- Lift entryDetail to App.jsx, shared between PreviewPanel and ContextRail
- 3-column layout (workspace | 300px preview | 340px rail) when preview active
- Stale-guard fixes: seq incremented before early returns in all async effects
- handleRearchive: capture startSeq/entryUid at call time, guard every async resume
- TweetPreview: reset loading/error/tweets before early-return branches
* feat: entry previews — tweet/thread/article/video/audio/image/iframe/pdf
- PreviewModal: modal overlay with new-tab link (↗) and keyboard close
- PreviewPanel: routes by entity_kind + primary_media extension to the
correct viewer (tweet/video/audio/pdf/html/image/fallback)
- TweetPreview: full X-style tweet, thread, and article renderer with
local artifact map for archived media (CDN fallback)
- AudioBar: persistent fixed bottom player, triggered via ContextRail
Play button; body.has-audio-bar pads content above it
- VideoPreview, IframePreview, ImagePreview: inline viewers
- PreviewPage: standalone /preview/:archiveId/:entryUid route
- ContextRail: Play/Preview buttons; isAudio/isPreviewable detection
- App.jsx: preview modal state, currentAudio state, preview route guard,
has-audio-bar body class effect
- routes.rs: CSP updated (media-src self blob https; frame-ancestors self;
Google Fonts + external images/scripts whitelisted)
- styles.css: preview modal, tweet-wrap scroll (min-height:0), audio bar
body padding, newtab button, preview panel flex layout
* style: tighten article/tweet preview spacing
- aMeta padding: 14px → 10px
- article title marginBottom: 10px → 8px
- aAuthorRow marginBottom: 10px → 8px
- bH1 top margin: 20px → 16px
- bH2 top margin: 18px → 14px
- bHr margin: 20px → 14px
- .preview-tweet-wrap padding: 20px → 12px (already committed)
More content visible above the fold in both modal and standalone views.
* feat: tweet/article preview quality pass
HTML entities: decode > < & etc. on sliced segments only
(entity offsets index the stored string; decoding before slicing shifts them)
Image lightbox: click any tweet/thread/article image to open full-screen
viewer; cmd+click follows <a> to open in new tab; arrow-key + ‹ › nav;
Escape closes; 1/N counter; ↗ open-in-new-tab link
Multi-image grid: 2 photos → side-by-side (180px rows); 3 → left spans
both rows; 4 → 2×2 (140px rows); single image unchanged
Empty media grid ghost: build photos/videoItems arrays first, render
.mediaGrid div only when at least one item resolved (advisory: never gate
on raw media.length when map items can all return null)
QT indicator: ↻ QT badge on tweet.is_quote_status === true entries
Modal shrinks for short content: height: 88vh → max-height: 88vh;
.preview-modal-body gets max-height: calc(88vh - 52px) so long threads
still scroll (advisory: don't rely on flex:1 once parent has no fixed height)
Video scrollbar leak: .preview-modal-body overflow: auto → hidden; each
child (tweet-wrap, video-wrap, iframe) manages its own scroll surface
Styled thin scrollbar on .preview-tweet-wrap (matches workspace rail)
ArticleRenderer: cover image and body images are lightbox-clickable;
opts thread through renderBlocksJSX → renderBlockJSX → renderAtomicJSX
* fix: move artifact fetch to api.js; stop Escape propagation from lightbox
- Export fetchEntryArtifacts(archiveId, entryUid, indices) from api.js
using Promise.all + getJson (follows project convention: all /api calls
go through api.js, never inline fetch in components)
- TweetPreview: import fetchEntryArtifacts, replace inline Promise.all
- MediaLightbox keydown handler: stopPropagation + preventDefault for
Escape/ArrowLeft/ArrowRight so the parent PreviewModal window listener
does not also fire and close the modal behind the lightbox
* fix: iframe/page preview height chain and toolbar UX
Problem: changing .preview-modal from height to max-height broke iframe
previews - <iframe style='flex:1'> needs a concrete ancestor height, which
max-height alone doesn't supply when content is shorter than the cap.
Fix - CSS:
.preview-modal--full { height: 88vh } applied to non-tweet modals
.preview-modal--full .preview-modal-body { max-height: none }
.preview-iframe-toolbar span: remove text-transform/letter-spacing
(was uppercasing the URL/title in shouty caps)
Fix - PreviewModal: className adds --full when entity_kind is not
tweet/tweet_thread; tweet previews keep shrink-to-fit behavior.
Fix - PreviewPanel: pass title + original_url from summary to IframePreview
for both HTML and PDF; wrappers use flex:1/minHeight:0 not height:100%.
Fix - IframePreview:
- Accept title + originalUrl props; show originalUrl in toolbar (falls
back to artifact src only when original_url absent); show title above
URL when available
- flex:1 + minHeight:0 instead of height:100% on the wrap div
- Single unified layout for page + pdf (both just show the iframe)
* feat: expand t.co links; linkify bare URLs in tweet and article text
Frontend:
- resolveEntityBounds: try multiple candidate strings in order (u.url
first, since that's the t.co short URL that appears in full_text)
- normalizeUrlAnn: multi-candidate search; href = expanded > url,
display = display_url > expanded > url
- linkifyText(): regex linkifier for entity-less bare URLs; trims
trailing punctuation [.,;:!?)] before linking; used in both
renderTweetTextJSX and renderInlineJSX including their early-return
paths (anns.length === 0) that previously bypassed linkification
- renderInlineJSX: fix mention href mention.name → screen_name;
replace t.co segment text with url.display when entity covers it
Scraper (vendor/twitter/scrape_user_tweet_contents.py):
- extract_tweet_data: when note_tweet text is used, pull urls/mentions/
hashtags/symbols from note_result.entity_set (correct indices for the
note text); keep media from legacy.entities (no note media downloads)
* feat: server-side t.co resolver + frontend augmentation
Server (routes.rs):
POST /api/util/resolve-tco — unauthenticated, accepts JSON array of
https://t.co/<alphanumeric> URLs only (strict regex validation, no SSRF
via input), capped at 50 per batch, 3 s timeout, redirect(Policy::none)
so the server only ever touches t.co itself. HEAD first, GET fallback if
HEAD returns no Location. Location sanitized to http/https only —
javascript:/data:/etc. fall back to the original t.co.
api.js:
resolveTcoUrls(urls) — project-convention wrapper for the new endpoint.
Returns {} on failure (callers degrade gracefully to bare t.co links).
TweetPreview.jsx:
After tweet data loads, per-tweet range-based coverage detection:
builds covered [start,end) from existing entity fromIndex/toIndex or
indices fallback, then finds regex matches whose span is NOT covered.
Resolves unique uncovered t.co URLs via resolveTcoUrls(), synthesises
one entity per occurrence (with exact fromIndex/toIndex so normalizeUrlAnn
gets correct bounds even for duplicate t.co URLs in the same tweet).
Augments entities.urls before setTweets() so all rendering paths
see expanded URLs.
* feat: suppress rendered media attachment URLs from tweet text
renderTweetTextJSX now accepts skipSpans=[] as third param.
Skip-span boundaries are added to the pts split set so a trailing
media t.co inside a plain segment still gets isolated and suppressed—
not re-linked by linkifyText. Early return only when both anns and
skipSpans are empty.
TweetCard computes mediaSkipSpans after building photos/videoItems:
for each rawMedia item whose src resolved (photo src match; any video),
resolveEntityBounds(m, ft, m.url) gives the precise [s,e] span using
indices/fromIndex first, indexOf fallback—then the span is passed to
renderTweetTextJSX so the t.co attachment URL is silently dropped.
This commit is contained in:
GitHub
parent
2779afee2d
commit
d610d37793
21 changed files with 2792 additions and 92 deletions
|
|
@ -1901,3 +1901,553 @@ select {
|
|||
margin: 0 0 8px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* ════════════════════════════════════════════════════════════════════
|
||||
ENTRY PREVIEWS
|
||||
════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
.preview-panel {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
.preview-panel-loading,
|
||||
.preview-panel-empty {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
color: var(--muted-2);
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
/* ── Video preview ────────────────────────────────────────────────── */
|
||||
.preview-video-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #0d0d0b;
|
||||
min-height: 200px;
|
||||
}
|
||||
.preview-video-wrap video {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ── Iframe preview ───────────────────────────────────────────────── */
|
||||
.preview-iframe-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
.preview-iframe-toolbar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
padding: 6px 12px;
|
||||
background: var(--paper-2);
|
||||
border-bottom: 1px solid var(--line);
|
||||
flex-shrink: 0;
|
||||
/* never uppercase the toolbar text */
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
.preview-iframe-toolbar span {
|
||||
font-size: 11px;
|
||||
color: var(--muted-2);
|
||||
}
|
||||
.preview-iframe-toolbar a {
|
||||
margin-left: auto;
|
||||
color: var(--link);
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
padding: 3px 8px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--r2);
|
||||
background: var(--field);
|
||||
transition: border-color 0.12s;
|
||||
}
|
||||
.preview-iframe-toolbar a:hover {
|
||||
border-color: var(--accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
.preview-iframe-wrap iframe {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: white;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* ── Image preview ────────────────────────────────────────────────── */
|
||||
.preview-image-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
background: var(--paper-2);
|
||||
}
|
||||
.preview-image-wrap img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
border-radius: var(--r3);
|
||||
cursor: zoom-in;
|
||||
display: block;
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* ── Tweet preview wrap ───────────────────────────────────────────── */
|
||||
.preview-tweet-wrap {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
padding: 12px 16px;
|
||||
background: var(--paper-2);
|
||||
/* styled scrollbar matching the workspace rail */
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--line) transparent;
|
||||
}
|
||||
.preview-tweet-wrap::-webkit-scrollbar { width: 8px; }
|
||||
.preview-tweet-wrap::-webkit-scrollbar-track { background: transparent; }
|
||||
.preview-tweet-wrap::-webkit-scrollbar-thumb {
|
||||
background: var(--line);
|
||||
border-radius: 999px;
|
||||
border: 2px solid transparent;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
.preview-tweet-wrap::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--muted-2);
|
||||
background-clip: padding-box;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
/* ── Tweet card ───────────────────────────────────────────────────── */
|
||||
.tw-card {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
background: var(--paper);
|
||||
max-width: 560px;
|
||||
margin: 0 auto 12px;
|
||||
}
|
||||
.tw-thread {
|
||||
max-width: 560px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.tw-thread-item {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.tw-thread-connector {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
width: 52px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
.tw-thread-avatar-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.tw-thread-line {
|
||||
width: 2px;
|
||||
background: var(--line);
|
||||
flex: 1;
|
||||
min-height: 16px;
|
||||
margin: 4px 0;
|
||||
}
|
||||
.tw-thread-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 0 0 16px 12px;
|
||||
}
|
||||
.tw-thread-body:last-child { padding-bottom: 0; }
|
||||
.tw-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
}
|
||||
.tw-avatar-ph {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: var(--paper-2);
|
||||
border: 1px solid var(--line);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.tw-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.tw-author-name { font-size: 14.5px; font-weight: 700; color: var(--ink); }
|
||||
.tw-author-handle { font-size: 13px; color: var(--muted-2); }
|
||||
.tw-dot { color: var(--muted-2); font-size: 13px; }
|
||||
.tw-date { font-size: 13px; color: var(--muted-2); }
|
||||
.tw-text {
|
||||
font-size: 15px;
|
||||
line-height: 1.65;
|
||||
color: var(--ink);
|
||||
white-space: pre-line;
|
||||
word-break: break-word;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.tw-text a { color: var(--link); text-decoration: none; }
|
||||
.tw-text a:hover { text-decoration: underline; }
|
||||
.tw-stats {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
color: var(--muted-2);
|
||||
font-size: 13px;
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid var(--line-soft);
|
||||
}
|
||||
.tw-stats span { display: flex; align-items: center; gap: 4px; }
|
||||
|
||||
/* ── X Article styles ─────────────────────────────────────────────── */
|
||||
.tw-article {
|
||||
max-width: 598px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.tw-article-cover {
|
||||
width: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
max-height: 380px;
|
||||
}
|
||||
.tw-article-meta { padding: 20px 16px 0; }
|
||||
.tw-article-title {
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.3px;
|
||||
color: var(--ink);
|
||||
line-height: 1.3;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.tw-article-author-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.tw-article-author-name { font-size: 14px; font-weight: 700; color: var(--ink); }
|
||||
.tw-article-author-sub { font-size: 13px; color: var(--muted-2); }
|
||||
.tw-article-divider { border: none; border-top: 1px solid var(--line); margin: 0; }
|
||||
.tw-article-body { padding: 8px 16px 60px; }
|
||||
.tw-b-h1 {
|
||||
font-size: 24px; font-weight: 800; letter-spacing: -0.3px;
|
||||
color: var(--ink); line-height: 1.25; margin: 22px 0 10px;
|
||||
}
|
||||
.tw-b-h2 {
|
||||
font-size: 19px; font-weight: 700; letter-spacing: -0.15px;
|
||||
color: var(--ink); line-height: 1.3; margin: 20px 0 8px;
|
||||
}
|
||||
.tw-b-p { font-size: 16px; color: var(--ink); line-height: 1.72; margin-bottom: 14px; }
|
||||
.tw-b-p:empty { display: none; }
|
||||
.tw-b-spacer { height: 6px; display: block; }
|
||||
.tw-b-blockquote {
|
||||
border-left: 3px solid var(--line);
|
||||
padding: 2px 14px;
|
||||
margin: 14px 0;
|
||||
color: var(--muted);
|
||||
font-size: 16px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.tw-b-hr { border: none; border-top: 1px solid var(--line); margin: 24px 0; }
|
||||
.tw-b-img { width: 100%; display: block; border-radius: 10px; margin: 14px 0; }
|
||||
.tw-b-ul, .tw-b-ol { margin: 10px 0 14px; padding-left: 26px; }
|
||||
.tw-b-li { font-size: 16px; color: var(--ink); line-height: 1.65; margin-bottom: 6px; }
|
||||
.tw-b-code {
|
||||
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
|
||||
font-size: 0.875em;
|
||||
background: var(--paper-2);
|
||||
padding: 2px 5px;
|
||||
border-radius: 4px;
|
||||
color: var(--ink);
|
||||
}
|
||||
.tw-b-pre {
|
||||
background: var(--paper-2);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
padding: 14px 16px;
|
||||
overflow-x: auto;
|
||||
margin: 12px 0;
|
||||
}
|
||||
.tw-b-pre code {
|
||||
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.tw-b-tweet-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
padding: 12px 14px;
|
||||
margin: 12px 0;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
background: var(--paper-3);
|
||||
transition: background 0.12s;
|
||||
}
|
||||
.tw-b-tweet-link:hover { background: var(--field); }
|
||||
.tw-b-tweet-link svg { flex-shrink: 0; color: var(--ink); }
|
||||
|
||||
/* ── Audio bar ────────────────────────────────────────────────────── */
|
||||
.audio-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 72px;
|
||||
background: var(--paper);
|
||||
border-top: 1px solid var(--line);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
padding: 0 24px;
|
||||
z-index: 100;
|
||||
box-shadow: 0 -2px 16px rgba(0,0,0,0.08);
|
||||
}
|
||||
.audio-bar-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
flex: 0 0 200px;
|
||||
}
|
||||
.audio-bar-icon {
|
||||
flex-shrink: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.audio-bar-icon svg { width: 20px; height: 20px; }
|
||||
.audio-bar-title {
|
||||
font-size: 13px;
|
||||
color: var(--ink);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-width: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
.audio-bar-controls {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
.audio-bar-play-btn {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
color: var(--paper);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
transition: background 0.12s, transform 0.1s;
|
||||
}
|
||||
.audio-bar-play-btn:hover { background: var(--accent-2); }
|
||||
.audio-bar-play-btn:active { transform: scale(0.93); }
|
||||
.audio-bar-play-btn svg { width: 15px; height: 15px; }
|
||||
.audio-bar-seek {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.audio-bar-seek input[type="range"] {
|
||||
flex: 1;
|
||||
accent-color: var(--accent);
|
||||
height: 4px;
|
||||
cursor: pointer;
|
||||
min-width: 0;
|
||||
}
|
||||
.audio-bar-time {
|
||||
font-size: 11.5px;
|
||||
color: var(--muted-2);
|
||||
white-space: nowrap;
|
||||
min-width: 80px;
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.audio-bar-right {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.audio-bar-volume {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.audio-bar-volume svg { width: 14px; height: 14px; color: var(--muted-2); flex-shrink: 0; }
|
||||
.audio-bar-volume input[type="range"] {
|
||||
width: 72px;
|
||||
accent-color: var(--accent);
|
||||
cursor: pointer;
|
||||
}
|
||||
.audio-bar-close {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--muted-2);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
transition: background 0.12s, color 0.12s;
|
||||
}
|
||||
.audio-bar-close:hover { background: var(--field); color: var(--ink); }
|
||||
|
||||
|
||||
/* ── Preview modal ────────────────────────────────────────────────── */
|
||||
.preview-modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 200;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
.preview-modal {
|
||||
background: var(--paper);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
|
||||
width: 90vw;
|
||||
max-width: 1100px;
|
||||
max-height: 88vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* Full-height variant for iframe/PDF/video/image (needs explicit height
|
||||
so flex children like <iframe style="flex:1"> have a concrete container). */
|
||||
.preview-modal--full {
|
||||
height: 88vh;
|
||||
}
|
||||
.preview-modal--full .preview-modal-body {
|
||||
max-height: none;
|
||||
}
|
||||
.preview-modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 14px 18px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
flex-shrink: 0;
|
||||
gap: 12px;
|
||||
}
|
||||
.preview-modal-title {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--ink);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.preview-modal-close {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--muted-2);
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
transition: background 0.12s, color 0.12s;
|
||||
}
|
||||
.preview-modal-close:hover { background: var(--field); color: var(--ink); }
|
||||
.preview-modal-body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
/* overflow: hidden — each child (tweet-wrap, video-wrap, iframe, image)
|
||||
manages its own scroll. This also prevents the spurious scrollbar that
|
||||
appears when a video's native controls briefly expand the layout. */
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* Cap so long threads/articles stay scrollable even when modal has no
|
||||
fixed height (shrinks for short tweets). 52px ≈ header padding+border. */
|
||||
max-height: calc(88vh - 52px);
|
||||
}
|
||||
/* Preview button in context rail */
|
||||
.rail-preview-btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
margin-bottom: 16px;
|
||||
background: var(--accent);
|
||||
color: var(--paper);
|
||||
border: none;
|
||||
border-radius: var(--r3);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
transition: background 0.12s;
|
||||
}
|
||||
.rail-preview-btn:hover { background: var(--accent-2); }
|
||||
/* Open-in-new-tab button in preview modal header */
|
||||
.preview-modal-newtab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: var(--r2);
|
||||
color: var(--muted-2);
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
flex-shrink: 0;
|
||||
transition: background 0.12s, color 0.12s;
|
||||
}
|
||||
.preview-modal-newtab:hover { background: var(--field); color: var(--ink); }
|
||||
/* Push content above the fixed AudioBar when it is visible */
|
||||
body.has-audio-bar { padding-bottom: 56px; }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue