josh/ytplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Watch party reader view: presented websites become clean text with per-device font size, landscape/portrait and an Original switch; SSRF-guarded server fetch

Browse Source
This commit is contained in:
Jonathan Sykes
2026-10-15 19:29:13 +08:00
parent 3f913de0c3
commit 1352ed9f29
8 changed files with 320 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/styles.css
View File

@@ -4088,6 +4088,30 @@ body.landscape-fs .player-stage { touch-action: none; } /* fullscreen (real or t
.pp-bar .np-btn { min-height: 40px; text-decoration: none; display: inline-flex; align-items: center; }
.pp-frame { flex: 1; width: 100%; border: 0; background: #fff; }
.pp-hint { margin: 0; padding: 6px 10px; font-size: 12px; color: var(--text-dim); background: var(--bg-2); }
.pp-hint[hidden], .pp-frame[hidden], .pp-rtools[hidden] { display: none; }
.pp-rtools { display: inline-flex; gap: 6px; }
.pp-reader { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--bg); }
.pp-reader[hidden] { display: none; }
.pp-article { max-width: 68ch; margin: 0 auto; padding: 24px 20px 64px; font: 400 var(--pp-size, 20px)/1.65 var(--ui, system-ui), sans-serif; color: var(--text); overflow-wrap: anywhere; }
.pp-article h1 { font-family: var(--display, inherit); font-size: 1.6em; line-height: 1.15; margin: 0 0 .3em; text-wrap: balance; }
.pp-article h2, .pp-article h3 { line-height: 1.25; margin: 1.4em 0 .4em; }
.pp-article .pp-by { margin: 0 0 1.4em; color: var(--text-2); font-size: .8em; }
.pp-article p, .pp-article li { margin: 0 0 .9em; }
.pp-article img { max-width: 100%; height: auto; border-radius: 6px; }
.pp-article a { color: var(--accent, #f06b53); text-underline-offset: 3px; }
.pp-article blockquote { margin: 1em 0; padding-left: 1em; border-left: 2px solid var(--line); color: var(--text-2); }
.pp-article pre { overflow-x: auto; font-size: .8em; }
.pp-article table { display: block; overflow-x: auto; font-size: .85em; border-collapse: collapse; }
.pp-article td, .pp-article th { padding: 4px 8px; border: 1px solid var(--line); }
.pp-msg { padding: 32px 20px 0; text-align: center; color: var(--text-2); }
.party-present.landscape { inset: 0; border-radius: 0; z-index: 900; }
@media (orientation: portrait) {
.party-present.landscape { inset: auto; top: 0; left: 100vw; width: 100vh; width: 100dvh; height: 100vw; transform-origin: top left; transform: rotate(90deg); }
}
@media (max-width: 899px) {
.pp-bar { flex-wrap: wrap; }
.pp-what { flex-basis: 100%; }
}
@media (max-width: 899px) {
.party-present { inset: calc(8px + env(safe-area-inset-top, 0px)) 8px calc(8px + env(safe-area-inset-bottom, 0px)) 8px; z-index: 165; }
}