From 686fcc19ccbbfdd35013029d72a9bb5b2c6ffcff Mon Sep 17 00:00:00 2001 From: Sulthan Zaki Date: Thu, 30 Jul 2026 09:33:56 +0700 Subject: [PATCH] Repaint the userscript panel in Cinder MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The panel and the web UI are the same product on the same phone, and the old purple-on-charcoal panel read as a different application once the web UI moved to Cinder. Same tokens, same rule that heat is typographic: .item.hot mirrors the web UI's is-new, .item.dim mirrors is-dim, chips and buttons become mono small-caps with hairline borders instead of pills, and the loading spinner becomes the same burning hairline rather than a rotating ring. Tokens are declared on :host so the panel has one palette block to edit, but the fonts stay system serif and mono — the web UI's webfonts cannot follow, because an @import inside the shadow root is at the mercy of the host site's CSP. Structure, ids and classes are untouched: this is a restyle, and in particular the edge tab keeps its geometry, touch-action and #hit sizing (see docs/superpowers/specs/2026-07-28-edge-tab-hitbox-design.md). Co-Authored-By: Claude Opus 5 --- userscript/manga-bookmark.user.js | 178 ++++++++++++++++++++---------- 1 file changed, 118 insertions(+), 60 deletions(-) diff --git a/userscript/manga-bookmark.user.js b/userscript/manga-bookmark.user.js index ba21e96..1c36ebf 100644 --- a/userscript/manga-bookmark.user.js +++ b/userscript/manga-bookmark.user.js @@ -1173,7 +1173,10 @@ // Cover and title are the only continue links. The subtitle and the action // row live in the same text column but are not navigation targets — a thumb // that misses ★ must not land on one, and Remove must never be one. - return el("div", { class: "item" }, [ + // hot = a chapter is out that has not been read (crimson title, ember rule); + // dim = archived (italic grey). Same two states the web UI paints. + const heat = (behind ? " hot" : "") + (statusOf(b) === "archived" ? " dim" : ""); + return el("div", { class: "item" + heat }, [ el("a", { class: "go", href: cont }, [ b.cover ? el("img", { class: "cover", src: b.cover, loading: "lazy", alt: "" }) @@ -1380,11 +1383,11 @@