/* Chautari web — palette mirrors the Flutter app's AppTheme (mdl01_client03_user_mobile/lib/lyr01_config/cfg02_theme.dart). */ :root { --fg: #1a1a1a; /* textPrimary */ --muted: #6b6b6b; /* textSecondary */ --bg: #fdf6f0; /* background */ --card: #ffffff; /* surface */ --surface-warm: #f5ebe0; /* surfaceWarm — input fill, soft chips */ --primary: #c4652a; /* primary */ --primary-light: #e8956a; /* primary lighter for hover/disabled */ --primary-dark: #8b3e10; /* primary dark for pressed */ --accent: #d4814e; --primary-soft: rgba(196, 101, 42, 0.10); --primary-strong: rgba(196, 101, 42, 0.20); --border: rgba(0, 0, 0, 0.08); --error: #d32f2f; --radius-card: 16px; --radius-input: 12px; --radius-pill: 28px; } @media (prefers-color-scheme: dark) { :root { --fg: #f5ebe0; --muted: #b8a898; --bg: #1a1511; --card: #2a2420; --surface-warm: #3a2f28; --border: rgba(255, 255, 255, 0.10); --primary-soft: rgba(196, 101, 42, 0.16); --primary-strong: rgba(196, 101, 42, 0.30); } } * { box-sizing: border-box; } /* Rubber-band containment. Modern browsers honour overscroll-behavior on the root, so we keep as the normal scroll container instead of nesting the scroll inside . Nested scroll would introduce sub-pixel jitter on position: sticky elements (topbar + feed tabs) during momentum scroll on macOS. */ html { scroll-behavior: smooth; overscroll-behavior: none; /* Reserve space for the vertical scrollbar so the viewport width doesn't change when scrollable content appears. Without this, the centered .container re-centers mid-scroll and the sticky topbar/ tabs appear to shift horizontally ("giggle") on every frame. */ scrollbar-gutter: stable; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--fg); line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; /* Body is intentionally a normal block container, not a flex column. Flex layout re-measures its children during momentum scroll, which makes position: sticky topbar/tabs jitter 1px up-and-down on each frame. Block layout avoids that re-measure. Footer still flows naturally below main content. */ } /* ─── Inline icons ─────────────────────────────────────── */ .ic { display: inline-flex; align-items: center; justify-content: center; } .ic svg { width: 1em; height: 1em; vertical-align: -0.125em; } /* ─── Topbar ──────────────────────────────────────────── */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; /* Flutter AppBar: transparent, no border, no shadow. We keep the sticky behavior (no blur) so the topbar doesn't jitter when the feed-tabs sticky kicks in below it. */ background: var(--bg); position: sticky; top: 0; z-index: 10; } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 18px; color: var(--fg); text-decoration: none; letter-spacing: -0.01em; } .brand-logo { width: 28px; height: 28px; object-fit: contain; } .topbar nav { display: flex; align-items: center; gap: 4px; } /* Collapsible topbar search — magnifier button at rest; click opens the input inline next to it. The input's width animates so the transition is smooth, and autocomplete=off keeps the browser dropdown from covering other topbar controls. */ .topbar-search { display: inline-flex; align-items: center; } .topbar-search-input { width: 0; min-width: 0; opacity: 0; padding: 0; margin: 0; border: 1px solid transparent; background: var(--surface, #fff); color: var(--fg); font: inherit; font-size: 14px; border-radius: 999px; transition: width .2s ease, opacity .15s ease, padding .2s ease, margin .15s ease, border-color .15s ease; } .topbar-search.is-open .topbar-search-input { width: 220px; opacity: 1; padding: 6px 12px; margin-left: 6px; border-color: var(--border, rgba(0,0,0,.12)); } .topbar-search.is-open .topbar-search-input:focus { outline: none; border-color: var(--primary, #d4a373); } @media (max-width: 640px) { .topbar-search.is-open .topbar-search-input { width: 160px; } } .nav-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; color: var(--muted); text-decoration: none; background: none; border: 0; cursor: pointer; font: inherit; font-size: 14px; } .nav-btn:hover { color: var(--primary); background: var(--primary-soft); } .nav-btn .ic { font-size: 18px; } .nav-btn.nav-primary { background: var(--primary); color: #fff; font-weight: 600; } .nav-btn.nav-primary:hover { filter: brightness(0.95); background: var(--primary); color: #fff; } /* Bell with unread badge — small primary pill in the top-right corner of the icon. Hidden via the `hidden` attr when count is zero, so markup stays valid even with no notifications. */ .nav-bell { position: relative; } .nav-bell-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--primary); color: #fff; border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; box-sizing: border-box; pointer-events: none; } .nav-bell-badge[hidden] { display: none; } /* ─── Language picker ─────────────────────────────────── */ .lang-picker { position: relative; } .lang-picker > summary { list-style: none; cursor: pointer; text-transform: uppercase; font-size: 12px; } .lang-picker > summary::-webkit-details-marker { display: none; } .lang-picker > summary::marker { content: ""; } .lang-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 140px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,0.1); padding: 4px; z-index: 20; } .lang-item { display: block; padding: 8px 12px; border-radius: 8px; color: var(--fg); text-decoration: none; font-size: 14px; } .lang-item:hover { background: var(--primary-soft); color: var(--primary); } .lang-item.active { color: var(--primary); font-weight: 600; } /* ─── Layout ──────────────────────────────────────────── */ .container { max-width: 720px; margin: 0 auto; padding: 20px 16px; /* Push the footer to the bottom of the viewport on short pages (empty feed, /signin, etc.) without using flex on body — flex re-measures during momentum scroll and shakes the sticky topbar. --topbar-h is published by JS in _layout.html; the 100px subtracts a rough footer reservation so the math doesn't undershoot. */ min-height: calc(100vh - var(--topbar-h, 56px) - 100px); } /* ─── Feed tabs (content-type filter) ───────────────────── */ /* Mirrors Flutter's TabBar: bottom-anchored 2px primary indicator, muted unselected text, semibold selected. */ .feed-tabs { display: flex; gap: 4px; margin: 0 -16px 12px; padding: 0 16px; border-bottom: 1px solid var(--border); overflow-x: auto; /* Pin the tab strip directly under the sticky topbar. Both the topbar and this strip use opaque backgrounds (no backdrop-filter) — two stacked sticky elements with GPU-promoted layers produce sub-pixel shake on every scroll frame. Keeping both flat and painted on the same layer eliminates the jitter. */ position: sticky; top: var(--topbar-h, 56px); z-index: 9; background: var(--bg); } .feed-tab { padding: 12px 16px; font-size: 15px; font-weight: 500; color: var(--muted); text-decoration: none; border-bottom: 2.5px solid transparent; white-space: nowrap; transition: color .12s, border-color .12s; } .feed-tab:hover { color: var(--fg); } .feed-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; } /* ─── Feed filters ─────────────────────────────────────── */ .feed-filters { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .search-input { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); flex: 1 1 220px; } .search-input .ic { color: var(--muted); font-size: 16px; } .search-input input { flex: 1; min-width: 0; padding: 9px 0; border: 0; outline: none; background: transparent; font: inherit; color: var(--fg); } .feed-filters select, .feed-filters button { padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--fg); font: inherit; } .feed-filters button { background: var(--primary); color: #fff; border-color: var(--primary); cursor: pointer; font-weight: 600; } .feed-filters button:hover { filter: brightness(0.95); } /* ─── Cards ───────────────────────────────────────────── */ /* Mirrors Flutter CardThemeData: 16px radius, no border, no elevation — we add a barely-there shadow so the white card lifts off the cream background without looking heavy. */ .feed { display: flex; flex-direction: column; gap: 12px; } .card { background: var(--card); border: none; border-radius: var(--radius-card); padding: 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); } .card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; align-items: center; } .chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.01em; background: var(--primary-soft); color: var(--primary); } .chip.muted { background: var(--surface-warm); color: var(--muted); } .chip .ic { font-size: 12px; } .card-title { margin: 0 0 6px; font-size: 18px; line-height: 1.3; } .card-title a { color: var(--fg); text-decoration: none; } .card-title a:hover { color: var(--primary); } .card-sub { margin: 0 0 6px; color: var(--muted); font-size: 14px; } .card-body-link { display: block; color: inherit; text-decoration: none; } .card-body-link:hover .card-sub { color: var(--fg); } /* Book-card authors line — compact single row, distinct from the owner/when footer so readers see credited creators at a glance. */ .card-authors { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 13px; color: var(--fg); } .card-authors .ic { font-size: 13px; color: var(--muted); } /* Manga feed card — click opens a volume picker modal instead of navigating. Cursor change hints at the modal behavior. */ .card-manga { cursor: pointer; } /* Manga volume-picker modal + volume cards. Modal chromes match the existing .cta-dialog style so the two feel related. */ .manga-modal { border: 0; border-radius: 12px; padding: 0; width: min(680px, calc(100vw - 32px)); max-height: 85vh; background: var(--surface, #fff); box-shadow: 0 12px 40px rgba(0,0,0,.25); transform-origin: center center; } /* Zoom-in animation on open. flips display none→block via showModal(), which normally can't transition — but a keyframe on the [open] state fires exactly once on the display change. Pair with a backdrop fade so both grow in together. */ .manga-modal[open] { animation: manga-modal-zoom-in .22s cubic-bezier(.2,.8,.3,1); } .manga-modal[open]::backdrop { animation: manga-modal-backdrop-fade .22s ease-out; } .manga-modal.is-closing { animation: manga-modal-zoom-out .18s ease-in forwards; } .manga-modal.is-closing::backdrop { animation: manga-modal-backdrop-fade-out .18s ease-in forwards; } @keyframes manga-modal-zoom-in { from { transform: scale(.88); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes manga-modal-zoom-out { from { transform: scale(1); opacity: 1; } to { transform: scale(.92); opacity: 0; } } @keyframes manga-modal-backdrop-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes manga-modal-backdrop-fade-out { from { opacity: 1; } to { opacity: 0; } } .manga-modal::backdrop { background: rgba(20,14,8,.55); backdrop-filter: blur(2px); } .manga-modal-close-form { position: absolute; top: 10px; right: 10px; } .manga-modal-close { width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .manga-modal-body { padding: 20px 24px; overflow-y: auto; max-height: 85vh; } .manga-modal-loading { padding: 40px; text-align: center; color: var(--muted); } /* Volume picker — cards grid. Used both in the modal and as the standalone view on /b/{id} when no ?vol= is set. */ .vol-picker-head { margin-bottom: 14px; } .vol-picker-title { margin: 0 0 2px; font-size: 18px; font-weight: 700; } .vol-picker-by { font-size: 13px; color: var(--muted); } .vol-picker-count { font-size: 12px; color: var(--muted); margin-top: 4px; } .vol-picker-empty { padding: 20px; text-align: center; color: var(--muted); font-style: italic; } .vol-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; } .vol-card { display: block; text-decoration: none; color: inherit; border-radius: 8px; overflow: hidden; background: var(--surface, #fff); border: 1px solid var(--border, rgba(0,0,0,.08)); transition: transform .12s, box-shadow .12s, border-color .12s; } .vol-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.12); border-color: var(--primary, #d4a373); } .vol-card-cover { aspect-ratio: 3/4; background: var(--surface-2, #f6f0e6); display: flex; align-items: center; justify-content: center; overflow: hidden; } .vol-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .vol-card-placeholder { font-size: 48px; opacity: .3; } .vol-card-body { padding: 8px 10px; } .vol-card-title { font-size: 14px; font-weight: 600; margin: 0 0 2px; } .vol-card-meta { font-size: 12px; color: var(--muted); } .vol-card-authors { font-size: 11.5px; color: var(--fg); margin-top: 4px; line-height: 1.3; } .vol-card-credits { font-size: 10.5px; color: var(--muted); margin-top: 2px; line-height: 1.3; font-style: italic; } /* Book-detail authors block + credits colophon. Credits are a small block because they're reference text, not primary content. */ .detail-authors { display: flex; gap: 8px; margin: 10px 0 14px; font-size: 14px; color: var(--fg); } .detail-authors-label { color: var(--muted); font-weight: 500; } .detail-credits { margin: 24px 0 8px; padding: 14px 16px; background: var(--surface-2, #f6f0e6); border-radius: 8px; font-size: 13px; color: var(--muted); } .detail-credits-label { font-size: 11px; color: var(--muted); letter-spacing: .4px; text-transform: uppercase; margin-bottom: 6px; font-weight: 600; } .detail-credits ul { margin: 0; padding-left: 18px; } .detail-credits li { margin-bottom: 2px; } .card-body { margin: 0 0 8px; color: var(--muted); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .card-body.md p { margin: 0; } .card-body.md a { color: var(--primary); text-decoration: none; } .card-body.md a:hover { text-decoration: underline; } .card-body.md img { display: none; } /* cards already show the primary image above */ .card-body.md code { background: rgba(0,0,0,0.05); padding: 1px 4px; border-radius: 4px; font-size: 0.92em; } .card-image { display: block; margin: 10px 0; border-radius: var(--radius-input); overflow: hidden; } .card-image img { display: block; width: 100%; max-height: 260px; object-fit: cover; } .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .tag { display: inline-flex; align-items: center; gap: 2px; padding: 3px 8px; border-radius: 10px; font-size: 12px; font-weight: 500; background: var(--primary-soft); color: var(--primary); text-decoration: none; } .tag .ic { font-size: 12px; opacity: 0.8; } .tag:hover { background: var(--primary-strong); } .card-footer { display: flex; gap: 6px; align-items: center; margin-top: 10px; color: var(--muted); font-size: 12px; } .card-footer .by { display: inline-flex; align-items: center; gap: 4px; } .card-footer .by .ic { font-size: 13px; opacity: 0.7; } .card-footer .dot { opacity: 0.5; } .card-actions { margin-left: auto; display: inline-flex; gap: 4px; } .card-act { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 28px; height: 28px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; text-decoration: none; } .card-act:hover { background: var(--primary-soft); color: var(--primary); } .card-act .ic { font-size: 15px; } .card-act-count { font-variant-numeric: tabular-nums; } /* Filled state for liked + bookmarked — keeps the orange tint and fills the SVG so the active state pops at a glance. */ .card-act.is-liked, .card-act.is-bookmarked { color: var(--primary); } .card-act.is-liked .ic svg, .card-act.is-bookmarked .ic svg { fill: currentColor; } .error { color: #b23a2a; background: rgba(178,58,42,0.1); padding: 8px 12px; border-radius: 8px; } /* ─── Detail page ──────────────────────────────────────── */ .detail { padding: 8px 0 16px; } .detail-title { margin: 12px 0 6px; font-size: 28px; line-height: 1.25; font-weight: 700; } .detail-sub { margin: 0 0 12px; color: var(--muted); font-size: 16px; } .detail-by { color: var(--muted); font-size: 13px; display: flex; gap: 6px; align-items: center; margin-bottom: 16px; } .detail-by .ic { font-size: 14px; } .detail-cover { display: block; width: 100%; max-height: 360px; object-fit: cover; border-radius: 12px; margin: 12px 0 20px; } .detail-images { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 20px; } .detail-images img { width: 100%; border-radius: 12px; } .detail-body { font-size: 17px; line-height: 1.7; color: var(--fg); } /* ─── Book reader ────────────────────────────────────────── One-page-at-a-time reader. The .book-reader is a fixed-height viewport; only the slide marked .is-active is visible and scrollable. Pull-to-advance hints fade in as the reader accumulates pull past the edge — see book_detail.html for the JS accumulator. */ .book-reader { position: relative; margin: 16px 0; border-radius: 12px; overflow: hidden; background: var(--surface, #fff); height: calc(100vh - 260px); min-height: 320px; border: 1px solid var(--border, rgba(0,0,0,.08)); } .book-reader-track { position: relative; width: 100%; height: 100%; } .book-reader-slide { position: absolute; inset: 0; padding: 28px 32px 80px; overflow-y: auto; overscroll-behavior: contain; font-size: 17px; line-height: 1.7; color: var(--fg); opacity: 0; pointer-events: none; transition: opacity 180ms ease; } .book-reader-slide.is-active { opacity: 1; pointer-events: auto; z-index: 1; } /* Text pages — cap line length on wide screens so the fullscreen reader stays legible instead of stretching text edge to edge. */ .book-reader:not([data-book-kind="manga"]) .book-reader-slide { display: flex; flex-direction: column; align-items: center; } .book-reader:not([data-book-kind="manga"]) .book-reader-slide > * { width: 100%; max-width: 680px; } .book-reader-slide .book-page-title { margin: 0 0 16px; font-size: 22px; font-weight: 600; } .book-reader-slide .book-page-body p { margin: 0 0 14px; } .book-reader-slide .manga-page img { display: block; max-width: 100%; max-height: 100%; margin: 0 auto; } /* Fullscreen book reader — applies to every book type (general, study, manga). The reader escapes the
padding so content can use the full viewport; chrome (topbar / footer / cta bar / metadata header) is hidden via the body class toggled when a reader mounts. Manga keeps its dark chrome + tap zones (scoped below); text books use the page's default surface so reading stays legible. */ .book-reader { position: fixed; inset: 0; z-index: 1000; width: 100vw; height: 100vh; border: 0; border-radius: 0; margin: 0; } .book-reader[data-book-kind="manga"] { background: #111; } body.manga-reader-active .topbar, body.manga-reader-active .site-footer, body.manga-reader-active .detail-title, body.manga-reader-active .detail-sub, body.manga-reader-active .reaction-bar { display: none !important; } body.manga-reader-active { overflow: hidden; } /* Manga slide physics — slides are stacked vertically with translate so a swipe-up reveals the next page coming in from below. Idle state: current slide translateY(0), next off-screen at +100%, prev off-screen at -100%. During a drag, JS overrides `transform` inline and disables this transition for 1:1 tracking. */ .book-reader[data-book-kind="manga"] .book-reader-slide { opacity: 1; transform: translateY(100%); transition: transform .28s cubic-bezier(.25,.9,.3,1); } /* Only promote the active slide to its own GPU layer — promoting every slide (e.g. an 11-page manga) used to crash WebContent on iOS Safari when each layer is sized to the viewport (11 × ~viewport_w × _h × 4B). The transition still runs smoothly because the browser will composite on demand for the in-flight slide. */ .book-reader[data-book-kind="manga"] .book-reader-slide.is-active { transform: translateY(0); will-change: transform; } .book-reader[data-book-kind="manga"] .book-reader-slide.is-prev { transform: translateY(-100%); } .book-reader[data-book-kind="manga"] .book-reader-slide.is-dragging, .book-reader[data-book-kind="manga"] .book-reader-slide.is-dragging-peer { transition: none; } .book-reader[data-book-kind="manga"] .book-reader-slide { padding: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; } .book-reader[data-book-kind="manga"] .book-reader-slide .manga-page { width: 100%; height: 100%; margin: 0; display: flex; align-items: center; justify-content: center; } .book-reader[data-book-kind="manga"] .book-reader-slide .manga-page img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } /* Double-spread pages take a wider canvas — the renderer still stays single-slide; we just let the image use the full width. */ .book-reader[data-book-kind="manga"] .manga-page.double-spread img { max-width: 100%; } .book-reader[data-book-kind="manga"] .book-reader-count { color: #ccc; } .book-reader[data-book-kind="manga"] .book-reader-btn { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.2); } .book-reader[data-book-kind="manga"] .book-reader-btn:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.4); } .book-reader[data-book-kind="manga"] .book-reader-nav { background: linear-gradient(to top, rgba(0,0,0,.5), transparent); } .book-reader[data-book-kind="manga"] .book-reader-pull { color: rgba(255,255,255,.7); } /* Tap-zone overlays — split the reader horizontally for "tap left / tap right" navigation like a real manga reader. Pointer-events only on the zones; they're invisible otherwise. Excludes the bottom nav strip so button clicks aren't swallowed. */ .book-reader-tapzone { position: absolute; top: 0; bottom: 56px; width: 30%; z-index: 2; cursor: pointer; display: none; } .book-reader[data-book-kind="manga"] .book-reader-tapzone { display: block; } .book-reader-tapzone.prev { left: 0; } .book-reader-tapzone.next { right: 0; } /* Close button — top-right on the fullscreen manga reader. Returns to the book's volume picker by popping back in history. */ .book-reader-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 4; font-size: 20px; line-height: 1; } .book-reader-close:hover { background: rgba(0,0,0,.8); } /* Manga image wrapper — pan + zoom. The lives inside a wrapper so double-tap can translate/scale without affecting layout. JS toggles .is-zoomed (adds scale) and inline transform-origin. */ .book-reader[data-book-kind="manga"] .manga-page { width: 100%; height: 100%; overflow: hidden; touch-action: none; /* block native pan/zoom so our JS owns it */ } .book-reader[data-book-kind="manga"] .manga-page img { transition: transform .2s ease; transform-origin: 50% 50%; user-select: none; -webkit-user-drag: none; } .book-reader[data-book-kind="manga"] .manga-page.is-zoomed img { transition: none; /* pan must be instant, not eased */ } .book-reader-nav { /* Floating column on the left edge — prev/next + counter stacked vertically and overlaid on the page so they don't steal a strip of reading space. Initial auto-fade (is-visible for ~3s then fades out via opacity) is driven by JS in book_detail.html; hover wakes them back up. */ position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0; z-index: 3; opacity: 0; transition: opacity .5s ease; pointer-events: none; } .book-reader-nav.is-visible { opacity: 1; pointer-events: auto; } .book-reader-nav:hover { opacity: 1; pointer-events: auto; } .book-reader-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border, rgba(0,0,0,.15)); background: var(--surface, #fff); color: var(--fg); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, border-color .15s; } .book-reader-btn:hover { background: var(--surface-warm, #f6f0e6); border-color: var(--primary, #d4a373); } .book-reader-btn .ic svg { width: 18px; height: 18px; } .book-reader-count { font-size: 13px; color: var(--muted); padding: 4px 8px; border-radius: 12px; background: rgba(0,0,0,.55); color: #fff; min-width: auto; text-align: center; font-variant-numeric: tabular-nums; } /* Pull affordances — hidden at rest (opacity 0 set inline by JS), fade in as pull accumulates, and flash primary when the threshold is reached. */ .book-reader-pull { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--muted); pointer-events: none; opacity: 0; transition: color .12s; z-index: 2; } .book-reader-pull-next { bottom: 56px; } .book-reader-pull-prev { top: 10px; } .book-reader-pull.is-ready { color: var(--primary, #d4a373); } .book-reader-pull-arrow { font-size: 16px; } .detail-body p { margin: 0 0 1em; } .detail-body a { color: var(--primary); } .detail-body img { display: block; max-width: 100%; border-radius: 10px; margin: 16px 0; } .detail-body h1, .detail-body h2, .detail-body h3 { margin: 1.4em 0 0.5em; line-height: 1.3; } .detail-body blockquote { margin: 1em 0; padding: 8px 14px; border-left: 3px solid var(--primary); color: var(--muted); background: var(--primary-soft); border-radius: 0 8px 8px 0; } .detail-body code { background: rgba(0,0,0,0.05); padding: 1px 5px; border-radius: 4px; } .detail-body ul, .detail-body ol { padding-left: 1.4em; } .detail-body .tags { margin-top: 24px; } /* ─── Reaction bar (bottom of detail pages) ───────────── */ .reaction-bar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 30; display: flex; gap: 4px; padding: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,0.12); } .rb-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; } .rb-btn:hover { background: var(--primary-soft); color: var(--primary); } .rb-btn.is-active { color: var(--primary); } .rb-btn.is-active .ic svg { fill: currentColor; } .rb-btn .ic { font-size: 18px; } .rb-count { font-weight: 700; font-size: 12px; min-width: 12px; text-align: left; } .rb-form { margin: 0; padding: 0; display: inline-flex; } .rb-form .rb-btn { width: 100%; } .rb-btn.is-copied::after { content: "Copied"; margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--primary); } @media (max-width: 560px) { .rb-label { display: none; } .rb-btn { padding: 10px 12px; gap: 4px; } } /* ─── Reaction rail (vertical, right side — book reader) ─── Mirrors the mobile FloatingReactionBar pattern: a thin pill of stacked icon+count tiles anchored to the right edge so it doesn't eat horizontal reading space. */ .reaction-rail { position: fixed; right: 12px; top: 50%; transform: translateY(-50%); z-index: 30; display: flex; flex-direction: column; gap: 4px; padding: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.12); } .rr-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px; min-width: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-size: 11px; font-weight: 600; text-decoration: none; } .rr-btn:hover { background: var(--primary-soft); color: var(--primary); } .rr-btn.is-liked { color: var(--primary); } .rr-btn.is-liked .ic { transform: scale(1.1); } .rr-btn.is-bookmarked { color: var(--primary); } .rr-btn.is-bookmarked .ic { transform: scale(1.1); } .rr-btn.is-copied { color: var(--primary); background: var(--primary-soft); } .rr-btn.is-copied::after { content: 'Copied'; position: absolute; right: 100%; margin-right: 8px; top: 50%; transform: translateY(-50%); background: var(--card); color: var(--fg); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-size: 11px; font-weight: 600; white-space: nowrap; pointer-events: none; } .rr-btn { position: relative; } .rr-btn .ic { font-size: 22px; line-height: 1; } .rr-count { font-weight: 700; font-size: 11px; min-width: 12px; text-align: center; } @media (max-width: 560px) { .reaction-rail { right: 8px; padding: 4px; } .rr-btn { padding: 8px 6px; min-width: 38px; } .rr-btn .ic { font-size: 20px; } } /* Keep the rail out of the manga-reader overlay, same as the bar. */ body.manga-reader-active .reaction-rail { display: none !important; } /* ─── Comments ────────────────────────────────────────── */ .comments { margin: 24px 0 8px; scroll-margin-top: 16px; } .comments-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .comments-header h3 { margin: 0; font-size: 16px; font-weight: 600; } .comment-add { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--primary); color: #fff; border: 0; font-weight: 600; font-size: 13px; cursor: pointer; } .comment-add:hover { filter: brightness(0.95); } .comment-add .ic { font-size: 16px; } .comments-empty { color: var(--muted); font-size: 14px; font-style: italic; padding: 16px 0; } .comments-list { display: flex; flex-direction: column; gap: 14px; } .comment { padding: 12px 14px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; } .comment-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .comment-avatar { width: 28px; height: 28px; border-radius: 999px; object-fit: cover; background: var(--primary-soft); display: inline-flex; align-items: center; justify-content: center; color: var(--primary); font-weight: 700; font-size: 12px; text-transform: uppercase; } .comment-avatar.placeholder { border: 0; } .comment-meta { display: flex; flex-direction: column; line-height: 1.2; } .comment-by { font-size: 13px; font-weight: 600; } .comment-time { color: var(--muted); font-size: 11px; } .comment-body { color: var(--fg); font-size: 14px; line-height: 1.5; white-space: pre-wrap; } .comment-replies { margin-top: 12px; padding-left: 14px; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 10px; } /* Reddit-style collapse toggle. Lives in the comment header to the left of the avatar; clicking flips .is-collapsed on the .comment wrapper, which the rules below use to hide the body + replies. */ .comment-collapse { flex-shrink: 0; width: 22px; height: 22px; padding: 0; background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 14px; line-height: 1; font-weight: 700; cursor: pointer; user-select: none; } .comment-collapse:hover { color: var(--primary); border-color: var(--primary); } .comment.is-collapsed > .comment-body, .comment.is-collapsed > .comment-actions, .comment.is-collapsed > .comment-reply-wrap, .comment.is-collapsed > .comment-replies { display: none; } .comment.is-collapsed > .comment-head { margin-bottom: 0; } .comment.is-collapsed > .comment-head .comment-by::after { content: " · collapsed"; color: var(--muted); font-weight: 400; font-size: 12px; } .comment-actions { margin-top: 6px; } .comment-reply-btn { background: transparent; border: none; padding: 4px 0; margin: 0; color: var(--primary); font-size: 13px; font-weight: 600; cursor: pointer; } .comment-reply-btn:hover { text-decoration: underline; } .comment-reply-wrap { margin-top: 8px; padding-left: 14px; border-left: 2px solid var(--border); } .comment-reply-wrap[hidden] { display: none; } .comment-reply-wrap .comment-form textarea { min-height: 72px; } /* Add bottom breathing room so the fixed bar never hides content. */ .detail { padding-bottom: 96px; } /* ─── CTA dialog ──────────────────────────────────────── */ .cta-dialog { border: 0; padding: 0; border-radius: 16px; max-width: 380px; width: calc(100% - 32px); background: var(--card); color: var(--fg); box-shadow: 0 20px 60px rgba(0,0,0,0.2); } .cta-dialog::backdrop { background: rgba(0,0,0,0.35); } .cta-close-form { margin: 0; } .cta-close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 999px; border: 0; background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .cta-close:hover { background: rgba(0,0,0,0.06); color: var(--fg); } .cta-body { padding: 28px 24px 24px; text-align: center; } .cta-logo { width: 48px; height: 48px; object-fit: contain; margin-bottom: 6px; } .cta-dialog h3 { margin: 4px 0 6px; font-size: 18px; color: var(--fg); } .cta-dialog p { margin: 0 0 16px; color: var(--muted); font-size: 14px; } .cta-buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .cta-btn { padding: 9px 18px; border-radius: 10px; background: var(--primary); color: #fff; font-weight: 600; text-decoration: none; font-size: 14px; } .cta-btn:hover { filter: brightness(0.95); } /* Auth CTA — Sign in primary + Sign up outline, inside #auth-cta-dialog. */ .cta-actions { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 4px; } .cta-actions .primary { width: auto; min-height: 0; padding: 10px 22px; margin: 0; } .auth-cta-signup { padding: 10px 18px; color: var(--primary); text-decoration: none; border: 1.5px solid var(--primary); border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; } .auth-cta-signup:hover { background: var(--primary-soft); } .feed-sentinel { padding: 24px 0; text-align: center; color: var(--muted); font-size: 13px; } .feed-sentinel { padding: 24px 0; text-align: center; color: var(--muted); font-size: 13px; } .muted { color: var(--muted); } /* ─── Responsive ──────────────────────────────────────── */ @media (max-width: 560px) { .topbar { padding: 10px 12px; } .brand-name { display: none; } .nav-label { display: none; } .nav-btn { padding: 8px; } .nav-btn .ic { font-size: 20px; } .container { padding: 14px 12px; } .feed-filters { gap: 6px; } .search-input { flex: 1 1 100%; order: -1; } .feed-filters select { flex: 1; } .card { padding: 14px; border-radius: 12px; } .card-title { font-size: 16px; } } @media (min-width: 1024px) { .container { max-width: 760px; padding: 28px 24px; } } /* ─── Legal pages (privacy, terms) ─────────────────────── */ .legal { line-height: 1.65; max-width: 640px; margin: 0 auto; } .legal h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 16px; color: var(--fg); } .legal h2 { font-size: 20px; font-weight: 600; margin: 28px 0 10px; } .legal h3 { font-size: 16px; font-weight: 600; margin: 20px 0 8px; } .legal p { margin: 10px 0; color: var(--fg); } .legal ul, .legal ol { margin: 10px 0 10px 22px; } .legal li { margin: 4px 0; } .legal a { color: var(--primary); text-decoration: underline; } /* ─── Footer ─────────────────────────────────────────── */ .site-footer { text-align: center; padding: 24px 16px 32px; color: var(--muted); font-size: 13px; } .site-footer a { color: var(--muted); text-decoration: none; margin: 0 6px; } .site-footer a:hover { color: var(--primary); text-decoration: underline; } .site-footer .sep { color: var(--border); } /* ─── Contact form ───────────────────────────────────── */ /* Reuses the same input + button styles as the auth pages. */ .contact-page { max-width: 480px; margin: 0 auto; padding: 24px 16px; } .contact-page h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--fg); } .contact-page .muted { color: var(--muted); margin: 0 0 24px; font-size: 14px; } .contact-form label { display: block; margin: 16px 0; font-size: 13px; font-weight: 500; color: var(--muted); } .contact-form input, .contact-form textarea { display: block; width: 100%; padding: 16px; margin-top: 6px; background: var(--surface-warm); color: var(--fg); border: 1.5px solid transparent; border-radius: var(--radius-input); font: inherit; font-size: 15px; box-sizing: border-box; transition: border-color 0.15s ease; } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--primary); } .contact-form textarea { resize: vertical; min-height: 140px; } .contact-honey { position: absolute; left: -9999px; height: 0; overflow: hidden; } .flash { padding: 14px 16px; border-radius: var(--radius-input); margin: 16px 0; font-size: 14px; } .flash-success { background: rgba(76, 175, 80, 0.10); color: #2e7d32; } .flash-error { background: rgba(211, 47, 47, 0.10); color: var(--error); } @media (prefers-color-scheme: dark) { .flash-success { color: #81c784; } .flash-error { color: #ef5350; } } /* ─── Auth + profile + engagement pages ───────────────────────────────── */ .auth-page, .profile-page { max-width: 480px; margin: 0 auto; padding: 24px 16px; position: relative; } .auth-page h1, .profile-page h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--fg); } .auth-page .muted, .profile-page .muted { color: var(--muted); margin: 0 0 24px; font-size: 14px; } .auth-form label { display: block; margin: 16px 0; font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0.01em; } /* Filled inputs — surface-warm fill, no border, focus ring in primary. Matches Flutter's InputDecorationTheme. */ .auth-form input[type="text"], .auth-form input[type="email"], .auth-form input[type="password"], .auth-form input[type="url"], .auth-form select, .auth-form textarea { display: block; width: 100%; padding: 16px; margin-top: 6px; box-sizing: border-box; background: var(--surface-warm); color: var(--fg); border: 1.5px solid transparent; border-radius: var(--radius-input); font: inherit; font-size: 15px; transition: border-color 0.15s ease; } .auth-form input:focus, .auth-form select:focus, .auth-form textarea:focus { outline: none; border-color: var(--primary); } .auth-form textarea { resize: vertical; min-height: 120px; } .auth-form label.checkbox { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--fg); padding: 8px 0; margin: 0; } .auth-form label.checkbox input { width: auto; margin: 0; } /* Full-width pill primary button (Flutter ElevatedButton). */ button.primary, a.primary { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 14px 24px; margin-top: 12px; background: var(--primary); color: #fff; border: none; border-radius: var(--radius-pill); font-size: 16px; font-weight: 600; cursor: pointer; text-decoration: none; transition: filter 0.15s ease; } button.primary:hover, a.primary:hover { filter: brightness(1.05); color: #fff; } button.primary:active, a.primary:active { background: var(--primary-dark); } button.primary:disabled { background: var(--primary-light); cursor: not-allowed; } /* Outlined / danger variants share the pill shape. */ button.danger, a.danger { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; background: var(--error); color: #fff; border: none; border-radius: var(--radius-pill); font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; } button.danger:hover, a.danger:hover { filter: brightness(0.95); color: #fff; } .link-button { background: none; border: none; padding: 0; margin: 0; color: var(--primary); font: inherit; cursor: pointer; text-decoration: underline; } .link-button:hover { filter: brightness(0.9); } .auth-links { margin-top: 24px; font-size: 14px; color: var(--muted); text-align: center; } .auth-links a { color: var(--primary); text-decoration: none; font-weight: 500; } .auth-links a:hover { text-decoration: underline; } .auth-links .sep { margin: 0 10px; color: var(--border); } .inline-form { display: inline; margin: 0; } /* ─── Profile ────────────────────────────────────────────────────────── */ .profile-head { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 32px 0; margin-bottom: 16px; } .profile-head h1 { font-size: 22px; font-weight: 600; margin: 12px 0 4px; } .profile-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--surface-warm); display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 600; color: var(--primary); } .profile-bio { margin: 12px 0; color: var(--fg); } /* Click-to-edit avatar — wraps the avatar in a borderless button with a hover overlay that hints "click to change". Used only on /me. */ .profile-avatar-btn { position: relative; width: 96px; height: 96px; padding: 0; background: transparent; border: 0; border-radius: 50%; cursor: pointer; overflow: hidden; } .profile-avatar-btn .profile-avatar { width: 100%; height: 100%; } .profile-avatar-hover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4px; background: rgba(0,0,0,0.55); color: #fff; font-size: 12px; font-weight: 600; opacity: 0; transition: opacity 0.15s ease; pointer-events: none; } .profile-avatar-hover svg { width: 18px; height: 18px; } .profile-avatar-btn:hover .profile-avatar-hover, .profile-avatar-btn:focus-visible .profile-avatar-hover { opacity: 1; } /* Posts / Followers / Following stat row — mirrors the mobile app's profile screen header. Followers and Following are anchors so the user can drill in once the list pages exist. */ .profile-stats { display: flex; gap: 28px; justify-content: center; align-items: center; margin: 14px 0 4px; } .profile-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--fg); text-decoration: none; font: inherit; } a.profile-stat:hover .profile-stat-num { color: var(--primary); } .profile-stat-num { font-size: 20px; font-weight: 700; line-height: 1; } .profile-stat-lbl { font-size: 12px; color: var(--muted); letter-spacing: 0.02em; } /* List-style profile menu (Flutter ListTile). Items are tap rows inside a single rounded card, no extra padding between rows. */ .profile-nav { display: flex; flex-direction: column; background: var(--card); border-radius: var(--radius-card); padding: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); overflow: hidden; } .profile-nav a, .profile-nav .logout-form button { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; color: var(--fg); text-decoration: none; font-size: 15px; font-weight: 500; text-align: left; width: 100%; background: none; border: none; cursor: pointer; font-family: inherit; } .profile-nav a:hover, .profile-nav .logout-form button:hover { background: var(--surface-warm); } .profile-nav a.danger { color: var(--error); background: none; } .profile-nav a.danger:hover { background: rgba(211, 47, 47, 0.08); } .profile-nav .logout-form { margin: 0; display: block; } /* ─── Notifications ──────────────────────────────────────────────────── */ .notif-page { max-width: 640px; } .notif-list { list-style: none; padding: 0; margin: 16px 0; } .notif-row { margin: 0; padding: 0; } .notif-row + .notif-row { border-top: 1px solid var(--border); } .notif-form { margin: 0; padding: 0; } .notif-btn { width: 100%; display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; margin: 0; background: transparent; border: none; cursor: pointer; text-align: left; color: var(--fg); font: inherit; border-radius: 0; } .notif-btn:hover { background: var(--surface-warm); } .notif-row.is-unread .notif-btn { background: var(--primary-soft); } .notif-row.is-unread .notif-btn:hover { background: var(--primary-strong); } .notif-avatar { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--surface-warm); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 16px; } .notif-avatar-placeholder { background: var(--primary); } .notif-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .notif-line { font-size: 14px; line-height: 1.4; color: var(--fg); } .notif-actor { font-weight: 600; color: var(--primary); } .notif-action { color: var(--fg); } .notif-title { font-weight: 500; color: var(--fg); } .notif-time { font-size: 12px; color: var(--muted); } .notif-unread-dot { flex-shrink: 0; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--primary); } /* ─── Follow list (followers / following) ───────────────────────────── */ .follow-page { max-width: 640px; } .follow-list { list-style: none; padding: 0; margin: 16px 0; } .follow-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; } .follow-row + .follow-row { border-top: 1px solid var(--border); } .follow-avatar { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--surface-warm); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 16px; } .follow-avatar-placeholder { background: var(--primary); } .follow-name { font-weight: 600; color: var(--fg); } /* Author byline — used on cards and detail headers via the `byline` partial. Small circular avatar followed by a primary-tinted link to the user profile. Falls back to a letter-on-primary placeholder when the user has no avatar set. */ .by-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; background: var(--primary); vertical-align: -6px; } .by-avatar-placeholder { background: var(--primary); } .by-link { color: var(--primary); text-decoration: none; } .by-link:hover { text-decoration: underline; } /* Public user-profile CTA button (Follow / Following / Edit your profile / Sign in to follow). Reuses the .primary pill but auto width so it doesn't span the full card. Following state flips to a soft fill so it reads as an active toggle, like the mobile pattern. */ .profile-cta { width: auto; min-height: 0; padding: 10px 24px; margin-top: 12px; } .profile-cta.is-following { background: var(--primary-soft); color: var(--primary); } .profile-cta.is-following:hover { background: var(--primary-strong); color: var(--primary); } .profile-follow-form { margin: 0; padding: 0; display: inline-block; } /* User-profile tabs (Posts / Articles / Collections) — mirrors the mobile `_TabBarDelegate` row above the post list. Borderless, sticky indicator under the active tab. */ .user-profile-page { max-width: 720px; } .profile-tabs { display: flex; align-items: stretch; justify-content: stretch; margin: 16px 0 0; border-bottom: 1px solid var(--border); } .profile-tab { flex: 1; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; border-bottom: 2px solid transparent; transition: color 0.12s ease, border-color 0.12s ease; } .profile-tab .ic { font-size: 18px; } .profile-tab:hover { color: var(--primary); } .profile-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); } .profile-tab-panel { margin: 16px 0; display: flex; flex-direction: column; gap: 12px; } .profile-tab-empty { text-align: center; padding: 32px 0; } .draft-list, .profile-tab-panel .bookmark-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .draft-item, .profile-tab-panel .bookmark-item { background: var(--card); border-radius: var(--radius-card); padding: 14px 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); } .draft-item a, .profile-tab-panel .bookmark-item a { color: var(--fg); text-decoration: none; display: block; } .draft-item a:hover, .profile-tab-panel .bookmark-item a:hover { color: var(--primary); } /* Owner-only collapsible settings nav under the tabs. */ /* Account-settings menu — gear icon button anchored top-right of the profile article, mirrors the mobile AppBar action. Click reveals a small popup card with the same nav links that used to live in the collapsible at the bottom. */ .profile-settings { position: absolute; top: 18px; right: 16px; z-index: 5; } .profile-settings > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: var(--muted); background: transparent; transition: background 0.12s ease, color 0.12s ease; } .profile-settings > summary:hover { background: var(--surface-warm); color: var(--fg); } .profile-settings > summary .ic { font-size: 20px; display: inline-flex; } .profile-settings > summary::-webkit-details-marker { display: none; } .profile-settings[open] > summary { background: var(--surface-warm); color: var(--primary); } .profile-settings[open] > .profile-nav { position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px; background: var(--card); border-radius: var(--radius-card); box-shadow: 0 6px 24px rgba(0,0,0,0.12); padding: 6px; margin: 0; } /* ─── Library tab (owner-only image manager) ─────────────────────── */ .library-form { margin: 0; padding: 0; } .library-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 0 12px; } .library-select-all { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg); } .library-select-all input { width: auto; margin: 0; } .library-count { font-size: 13px; color: var(--muted); } .library-delete-btn { margin-left: auto; width: auto; min-height: 0; padding: 8px 18px; font-size: 13px; } .library-delete-btn:disabled { background: var(--surface-warm); color: var(--muted); cursor: not-allowed; opacity: 1; } .library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; } .library-tile { position: relative; aspect-ratio: 1 / 1; min-height: 120px; border-radius: var(--radius-input); overflow: hidden; cursor: pointer; background: var(--surface-warm); border: 2px solid transparent; transition: border-color 0.12s ease, transform 0.12s ease; } .library-tile input { position: absolute; opacity: 0; pointer-events: none; } .library-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } .library-tile-flag { position: absolute; top: 6px; left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: rgba(0, 0, 0, 0.55); color: #fff; } .library-tile.is-used .library-tile-flag { background: var(--primary); color: #fff; } .library-tile-check { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; background: rgba(255,255,255,0.9); color: var(--primary); border: 2px solid var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; opacity: 0; transform: scale(0.6); transition: opacity 0.15s ease, transform 0.15s ease; } .library-tile-check::before { content: "✓"; } .library-tile:has(input:checked) { border-color: var(--primary); } .library-tile:has(input:checked) .library-tile-check { opacity: 1; transform: scale(1); } /* Used tiles are visually muted and the checkbox is disabled at the form level — the delete button can never include them in its body. */ .library-tile.is-used { cursor: not-allowed; } .library-tile.is-used img { opacity: 0.6; } /* ─── Article editor (mobile-style) ──────────────────────────────── */ .article-editor { max-width: 760px; margin: 0 auto; padding: 16px; } .article-editor-form { display: flex; flex-direction: column; gap: 14px; } /* Cover image — hero, full-width, click-to-pick. */ .article-cover { position: relative; background: var(--surface-warm); border: 1.5px dashed var(--border); border-radius: var(--radius-card); min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; } .article-cover.is-drop-active { border-color: var(--primary); background: var(--primary-soft); } .article-cover-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; margin: 16px 0; background: var(--card); color: var(--primary); border: 1.5px solid var(--primary); border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; cursor: pointer; } .article-cover-btn:hover { background: var(--primary-soft); } .article-cover-preview { margin: 12px; width: calc(100% - 24px); } .article-cover-preview:empty { display: none; } .article-cover-preview .image-thumb { aspect-ratio: 16 / 9; min-height: 200px; } /* Title — large, borderless headline. */ .article-title-input { display: block; width: 100%; padding: 6px 0; background: transparent; color: var(--fg); border: 0; outline: none; font: inherit; font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; } .article-title-input::placeholder { color: var(--muted); } /* Subtitle — italic, smaller. */ .article-subtitle-input { display: block; width: 100%; padding: 4px 0; background: transparent; color: var(--muted); border: 0; outline: none; font: inherit; font-size: 18px; font-style: italic; } .article-subtitle-input::placeholder { color: var(--muted); } /* Markdown toolbar — sticky just above the body, primary-soft pills. */ .article-toolbar { display: flex; gap: 4px; flex-wrap: wrap; padding: 6px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-pill); align-self: flex-start; } .md-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: transparent; color: var(--fg); border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 14px; } .md-btn:hover { background: var(--primary-soft); color: var(--primary); } .md-btn .ic { font-size: 14px; } /* Mobile-style compact toolbar — 4 evenly-spaced icon buttons that open bottom-sheet pickers. Mirrors `_buildToolbar` in the Flutter article editor. */ .article-mobile-toolbar { display: flex; align-items: center; justify-content: space-around; padding: 6px 8px; background: var(--card); border: 1px solid var(--border); border-bottom: 0; border-radius: var(--radius-input) var(--radius-input) 0 0; } .amt-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--muted); border: 0; border-radius: 10px; cursor: pointer; font: inherit; } .amt-btn:hover { background: var(--primary-soft); color: var(--primary); } .amt-btn .ic { font-size: 22px; } /* Two-column style picker — left: heading levels, right: toggles. */ .q-style-cols { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 4px; } .q-style-cols::before { content: ""; grid-column: 2; grid-row: 1; background: var(--border); width: 1px; margin: 0 auto; } .q-style-col { list-style: none; padding: 0; margin: 0; } .q-style-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; background: transparent; color: var(--fg); border: 0; border-radius: 8px; cursor: pointer; text-align: left; font: inherit; font-size: 14px; } .q-style-row:hover { background: var(--surface-warm); } .q-style-row .ic { width: 22px; flex-shrink: 0; text-align: center; } /* Text color + Highlight swatch rows — mirror the mobile `_buildColorRow`: a small label, then a horizontal scroller of 36px circular swatches. Clear swatch carries an × glyph instead of a color. Selecting a swatch keeps the sheet open so users can apply multiple colors in one session. */ .q-style-color-row { padding: 12px 16px; border-top: 1px solid var(--border); } .q-style-color-label { font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 0 8px; } .q-style-swatches { display: flex; gap: 10px; flex-wrap: nowrap; overflow-x: auto; padding: 2px 0; } .q-swatch { flex-shrink: 0; width: 36px; height: 36px; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 50%; cursor: pointer; padding: 0; transition: transform 0.1s ease, border-color 0.1s ease; } .q-swatch:hover { transform: scale(1.08); border-color: var(--primary); } .q-swatch-clear { background: transparent; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); font-size: 18px; font-weight: 700; } /* Quill editor + toolbar — restyle the snow theme to match our orange Flutter aesthetic. The toolbar pills mirror the create-post toolbar look; the editor body becomes a bordered card so the writing area is obvious. */ .article-quill-toolbar.ql-toolbar.ql-snow { background: var(--card); border: 1px solid var(--border); border-bottom: 0; border-radius: var(--radius-input) var(--radius-input) 0 0; padding: 6px 8px; } .article-body-input.ql-container.ql-snow { background: var(--card); color: var(--fg); border: 1px solid var(--border); border-radius: 0 0 var(--radius-input) var(--radius-input); font: inherit; font-size: 17px; } .article-body-input.ql-container.ql-snow:focus-within { border-color: var(--primary); } .article-body-input .ql-editor { min-height: 360px; line-height: 1.7; } .article-body-input .ql-editor.ql-blank::before { font-style: normal; color: var(--muted); } .article-body-input .ql-editor h2 { font-size: 22px; font-weight: 700; } .article-body-input .ql-editor blockquote { border-left: 3px solid var(--primary); padding: 6px 16px; color: var(--muted); font-style: italic; } .article-body-input .ql-editor a { color: var(--primary); } .article-body-input .ql-editor img { border-radius: var(--radius-input); } /* Quill icon strokes/fills — re-tint to match the palette. */ .ql-snow .ql-stroke { stroke: var(--fg); } .ql-snow .ql-fill { fill: var(--fg); } .ql-snow .ql-picker { color: var(--fg); } .ql-snow .ql-picker-options { background: var(--card); border-color: var(--border); } .ql-snow .ql-active .ql-stroke, .ql-snow .ql-toolbar button:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke { stroke: var(--primary); } .ql-snow .ql-active .ql-fill, .ql-snow .ql-toolbar button:hover .ql-fill, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill { fill: var(--primary); } .ql-snow .ql-active, .ql-snow .ql-toolbar button:hover { color: var(--primary); } /* Image action sheet — slides up from the bottom of the viewport, matching the Flutter showModalBottomSheet pattern (rounded-top panel, grip handle, ListTile-style rows). Backdrop dims the page and accepts click-to-dismiss. */ .q-img-sheet-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, 0.5); display: flex; align-items: flex-end; justify-content: center; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .q-img-sheet-backdrop[hidden] { display: none; } .q-img-sheet { width: min(560px, 100%); max-height: 86vh; overflow-y: auto; padding: 8px 0 16px; background: var(--card); color: var(--fg); border-radius: 20px 20px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.25); animation: q-img-sheet-in 0.18s ease-out; } @keyframes q-img-sheet-in { from { transform: translateY(20%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .q-img-sheet-grip { width: 36px; height: 4px; background: var(--border); border-radius: 2px; margin: 6px auto 12px; } .q-img-sheet-section { padding: 6px 16px; } .q-img-sheet-section-title { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin: 6px 0 8px; } /* Alignment chip row. */ .q-img-sheet-aligns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .q-img-align-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; background: var(--surface-warm); color: var(--fg); border: 1.5px solid transparent; border-radius: 10px; cursor: pointer; font: inherit; font-size: 11px; } .q-img-align-btn:hover { border-color: var(--primary); color: var(--primary); } .q-img-align-btn.is-active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); } .q-img-align-btn .ic { font-size: 18px; } /* Title/caption input rows — icon left, label + input right. */ .q-img-sheet-field { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); margin: 0; } .q-img-sheet-field:last-child { border-bottom: 0; } .q-img-sheet-field-icon { flex-shrink: 0; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--surface-warm); color: var(--muted); font-size: 16px; } .q-img-sheet-field-body { flex: 1; min-width: 0; } .q-img-sheet-field-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .q-img-sheet-input { display: block; width: 100%; padding: 6px 0; background: transparent; color: var(--fg); border: 0; outline: none; font: inherit; font-size: 14px; } .q-img-sheet-input::placeholder { color: var(--muted); } /* Mobile-style ListTile rows for Replace / Delete. */ .q-img-sheet-actions { list-style: none; padding: 0; margin: 8px 0 0; } .q-img-sheet-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; background: transparent; color: var(--fg); border: 0; border-top: 1px solid var(--border); cursor: pointer; font: inherit; font-size: 15px; text-align: left; } .q-img-sheet-row:hover { background: var(--surface-warm); } .q-img-sheet-row .ic { width: 22px; font-size: 20px; flex-shrink: 0; } .q-img-sheet-row.q-img-danger { color: var(--error); } .q-img-sheet-row.q-img-danger:hover { background: rgba(211, 47, 47, 0.08); } /* Done button — primary pill, full-width, mobile bottom-sheet style. */ .q-img-sheet-close { display: block; width: calc(100% - 32px); margin: 12px 16px 0; padding: 12px; background: var(--primary); color: #fff; border: 0; border-radius: var(--radius-pill); cursor: pointer; font: inherit; font-size: 15px; font-weight: 600; } .q-img-sheet-close:hover { filter: brightness(1.05); } /* Title / caption styling — pattern-detected via CSS rather than a custom class. Quill's Delta strips arbitrary DOM classes on save, so we can't rely on a marker. Instead we style any centered italic paragraph that sits directly before or after a paragraph holding the only image. Same selectors apply in the editor and on the rendered detail page. */ /* Quill block alignment classes — Quill's own snow CSS scopes these under `.ql-editor`, so they only work *inside* the editor. The article detail page renders plain HTML with these classes outside that scope, so we restate the rules here for the detail-body. */ .detail-body .ql-align-left { text-align: left; } .detail-body .ql-align-center { text-align: center; } .detail-body .ql-align-right { text-align: right; } .detail-body .ql-align-justify { text-align: justify; } /* Block-level images don't honour `text-align` (the rule only affects inline content), so an image inside an aligned paragraph stays flush left and the surrounding text appears off-center relative to it. Translate the alignment into margin-auto on the image directly. */ .detail-body p.ql-align-center img { margin-left: auto; margin-right: auto; } .detail-body p.ql-align-right img { margin-left: auto; margin-right: 0; } .detail-body p.ql-align-left img { margin-left: 0; margin-right: auto; } .article-body-input .ql-editor p.ql-align-center:has(+ p > img:only-child), .article-body-input .ql-editor p.ql-align-center:has(em):has(+ p > img:only-child), .detail-body p.ql-align-center:has(+ p > img:only-child), .article-body-input .ql-editor p.ql-align-center:has(> em:only-child), .detail-body p.ql-align-center:has(> em:only-child) { /* Title/caption-flavored italic line. */ color: var(--muted); font-size: 14px; margin: 4px 0; } /* Specifically: paragraph that contains only a centered italic line immediately before or after a paragraph that contains only an image. */ .article-body-input .ql-editor p.ql-align-center:has(> em:only-child) + p:has(> img:only-child), .detail-body p.ql-align-center:has(> em:only-child) + p:has(> img:only-child), .article-body-input .ql-editor p:has(> img:only-child) + p.ql-align-center:has(> em:only-child), .detail-body p:has(> img:only-child) + p.ql-align-center:has(> em:only-child) { /* Tight stack between sidecar paragraph and the image. */ margin: 0; } /* Editor field row — used for hashtags + the meta select trio. */ .editor-field { display: flex; flex-direction: column; gap: 6px; margin: 0; } .editor-field-label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .editor-field select, .editor-field input[type="text"] { display: block; width: 100%; padding: 10px 14px; background: var(--surface-warm); color: var(--fg); border: 1.5px solid transparent; border-radius: var(--radius-input); font: inherit; font-size: 14px; transition: border-color 0.15s ease; } .editor-field select:focus, .editor-field input:focus { outline: none; border-color: var(--primary); } .editor-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; } .editor-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--border); } .editor-actions .auth-links { margin: 0; } .article-publish-btn { width: auto; min-height: 44px; padding: 12px 28px; margin: 0; } .article-delete-form { margin: 24px 0 0; } .article-delete-form button.danger { width: auto; padding: 10px 20px; } /* ─── Collections + bookmarks ─────────────────────────────────────────── */ .collection-list, .collection-items, .bookmark-list { list-style: none; padding: 0; margin: 16px 0; } .collection-list li, .collection-items li, .bookmark-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px; background: var(--card); border-radius: var(--radius-card); margin-bottom: 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); } .collection-list a, .collection-items a, .bookmark-item a { color: var(--fg); text-decoration: none; font-weight: 500; } .collection-list a:hover, .collection-items a:hover, .bookmark-item a:hover { color: var(--primary); } .collection-list small, .collection-items small { color: var(--muted); font-size: 13px; } /* Collection grid — mirrors the mobile profile's 2-col tile grid. Each tile is a square card; cover image is rendered as a background so the title + count chip can overlay with a gradient scrim. */ .collection-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 16px 0; } @media (min-width: 700px) { .collection-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1000px) { .collection-grid { grid-template-columns: repeat(4, 1fr); } } .collection-grid-tile { position: relative; aspect-ratio: 1 / 1; border-radius: 16px; background: var(--card); background-size: cover; background-position: center; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; color: var(--fg); overflow: hidden; border: none; cursor: pointer; font: inherit; text-align: left; } .collection-grid-tile.has-cover { color: #fff; } .collection-grid-tile.has-cover::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,0.55)); pointer-events: none; } .collection-grid-top, .collection-grid-title { position: relative; z-index: 1; } .collection-grid-top { display: flex; align-items: center; justify-content: space-between; } .collection-grid-count { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: rgba(0,0,0,0.06); color: var(--muted); } .collection-grid-tile.has-cover .collection-grid-count { background: rgba(255,255,255,0.25); color: #fff; } .collection-grid-lock { font-size: 14px; color: var(--muted); display: inline-flex; } .collection-grid-tile.has-cover .collection-grid-lock { color: rgba(255,255,255,0.85); } .collection-grid-title { font-size: 16px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .collection-grid-new { background: transparent; border: 1.5px dashed rgba(127,127,127,0.4); color: var(--muted); align-items: center; justify-content: center; gap: 6px; } .collection-grid-new .ic { font-size: 28px; } .collection-grid-new:hover { border-color: var(--primary); color: var(--primary); } /* Collection composer — public toggle row + multi-tab picker grid that mirrors the mobile create-post screen's "collection" tab. */ .collection-toggle { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 10px; } .collection-toggle input { margin-top: 4px; } .collection-toggle small { display: block; font-weight: 400; } .collection-picker { border: 1px solid rgba(127,127,127,0.2); border-radius: 12px; padding: 14px; margin: 6px 0; display: flex; flex-direction: column; gap: 12px; } .collection-picker legend { font-weight: 600; padding: 0 6px; } .collection-picker-hint { margin: 0; font-size: 13px; } .collection-picker-tabs { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid rgba(127,127,127,0.2); } .collection-picker-tab { background: none; border: none; padding: 8px 12px; font: inherit; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .collection-picker-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); } .collection-picker-count { margin-left: auto; font-size: 12px; color: var(--muted); } .collection-picker-pane { display: none; } .collection-picker-pane.is-active { display: block; } .collection-picker-empty { margin: 16px 4px; font-size: 13px; } .collection-picker-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (min-width: 600px) { .collection-picker-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 900px) { .collection-picker-grid { grid-template-columns: repeat(4, 1fr); } } .collection-picker-cell { position: relative; aspect-ratio: 1 / 1; cursor: pointer; border-radius: 10px; overflow: hidden; } .collection-picker-cell input { position: absolute; opacity: 0; pointer-events: none; } .collection-picker-thumb { position: absolute; inset: 0; background: var(--bg); display: flex; align-items: stretch; justify-content: stretch; } .collection-picker-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .collection-picker-thumb > .ic { margin: auto; font-size: 32px; color: var(--muted); } .collection-picker-title { position: absolute; top: 6px; left: 8px; right: 36px; font-size: 12px; font-weight: 600; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.6); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .collection-picker-cell:has(.ic):not(:has(img)) .collection-picker-title { color: var(--fg); text-shadow: none; } .collection-picker-badge { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0,0,0,0.45); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; } .collection-picker-cell.is-picked { outline: 3px solid var(--primary); outline-offset: -3px; } .collection-picker-cell.is-picked .collection-picker-badge { background: var(--primary); } .collection-picker-cell.is-picked .collection-picker-badge .ic::before { content: "✓"; } .collection-picker-cell.is-picked .collection-picker-badge svg { display: none; } /* Standalone card surface (used for the create-collection panel, collection edit drawer, etc.). */ .card { background: var(--card); border-radius: var(--radius-card); padding: 20px; margin: 16px 0; box-shadow: 0 1px 2px rgba(0,0,0,0.04); } .card h2 { font-size: 18px; font-weight: 600; margin: 0 0 12px; } .card summary { cursor: pointer; font-weight: 600; padding: 6px 0; } /* ─── Engagement (cards + comment form) ──────────────────────────────── */ .engage-buttons { display: inline-flex; gap: 4px; align-items: center; } .ic-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; margin: 0; background: none; border: none; border-radius: 6px; color: var(--muted); cursor: pointer; text-decoration: none; } .ic-btn:hover { background: var(--primary-soft); color: var(--primary); } .ic-btn.active, .ic-btn.is-liked, .ic-btn.is-bookmarked { color: var(--primary); } .ic-btn .ic { font-size: 18px; } /* Card-action buttons (inside post/article/book footers) — when wrapped in a form, the form is inline so the icon button still sits flush with the others. The .is-liked/.is-bookmarked classes flip the color to the accent so the user sees their state at a glance. */ .card-actions form.inline-form { display: inline-flex; } .card-act { color: var(--muted); } .card-act.is-liked, .card-act.is-bookmarked { color: var(--primary); } .comment-form-wrap { margin: 16px 0; } .comment-form-wrap[hidden] { display: none; } .comment-form { margin: 0; } .comment-form textarea { display: block; width: 100%; min-height: 96px; padding: 12px 14px; background: var(--surface-warm); color: var(--fg); border: 1.5px solid transparent; border-radius: var(--radius-input); box-sizing: border-box; font: inherit; font-size: 15px; resize: vertical; transition: border-color 0.15s ease; } .comment-form textarea:focus { outline: none; border-color: var(--primary); } .comment-form button.primary { width: auto; min-height: 0; padding: 10px 24px; margin-top: 10px; } .logout-form { margin: 0; display: inline; } /* ─── Sign-up review (scr02b parity) ─────────────────────────────────── */ .signup-review { margin: 16px 0; padding: 16px; background: var(--card); border-radius: var(--radius-card); display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); } .signup-review dt { color: var(--muted); font-size: 13px; font-weight: 500; } .signup-review dd { margin: 0; font-size: 15px; color: var(--fg); word-break: break-all; } .signup-agreements { list-style: none; padding: 0; margin: 8px 0 24px; font-size: 13px; color: var(--muted); } .signup-agreements li { padding: 4px 0; } .signup-agreements a { color: var(--primary); text-decoration: none; } .signup-agreements a:hover { text-decoration: underline; } /* ─── Create chooser (Post vs Article) ────────────────────────────────── */ .create-chooser { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; } .create-card { display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--card); border-radius: var(--radius-card); color: var(--fg); text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,0.04); transition: transform 0.12s ease, box-shadow 0.12s ease; } .create-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); } .create-card h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; } .create-card p { margin: 0; } .create-card-icon { width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; } .create-card-icon .ic { font-size: 22px; } /* Owner link inside the post/article meta row — small accent link so it doesn't compete with the byline. */ .owner-link { color: var(--primary); text-decoration: none; font-weight: 500; } .owner-link:hover { text-decoration: underline; } /* Edit-form image previews (existing post/article images shown above the file input). Compact strip of small thumbnails. */ .edit-existing-images { margin: 8px 0; } .edit-existing-images .muted { margin: 0 0 4px; font-size: 13px; } .edit-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .edit-thumbs img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-input); background: var(--surface-warm); } /* ─── Global progress bar ─────────────────────────────────────────────── */ /* Thin orange line pinned just under the topbar. Reveals on form submit and around fetch() calls so the user has a visible "something's happening" cue while the server replies. */ .global-progress { position: fixed; top: var(--topbar-h, 56px); left: 0; width: 0%; height: 2px; background: var(--primary); box-shadow: 0 0 8px rgba(196, 101, 42, 0.45); z-index: 1000; pointer-events: none; opacity: 0; transition: width 0.6s ease, opacity 0.2s ease; } .global-progress.is-active { opacity: 1; } .global-progress.is-done { transition: width 0.15s ease, opacity 0.25s ease; opacity: 0; } /* ─── Submit button spinner ───────────────────────────────────────────── */ button.is-loading { opacity: 0.85; cursor: progress; } .btn-spinner { display: inline-block; width: 14px; height: 14px; margin-right: 8px; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: btn-spinner-rot 0.7s linear infinite; vertical-align: -2px; } @keyframes btn-spinner-rot { to { transform: rotate(360deg); } } /* ─── Upload-blocking overlay ─────────────────────────────────────────── */ .upload-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: none; align-items: center; justify-content: center; z-index: 2000; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .upload-overlay.is-active { display: flex; } .upload-overlay-card { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 32px 40px; min-width: 220px; background: var(--card); color: var(--fg); border-radius: var(--radius-card); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); } .upload-overlay-msg { margin: 0; font-size: 15px; color: var(--muted); } .upload-spinner { width: 48px; height: 48px; border: 4px solid var(--surface-warm); border-top-color: var(--primary); border-radius: 50%; animation: btn-spinner-rot 0.8s linear infinite; } /* ─── Hashtag pill input ──────────────────────────────────────────────── */ .tag-input { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; margin-top: 6px; background: var(--surface-warm); border: 1.5px solid transparent; border-radius: var(--radius-input); cursor: text; transition: border-color 0.15s ease; } .tag-input:focus-within { border-color: var(--primary); } .tag-pills { display: contents; list-style: none; padding: 0; margin: 0; } .tag-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 10px; background: var(--primary-soft); color: var(--primary); border-radius: var(--radius-pill); font-size: 13px; font-weight: 500; line-height: 1; } .tag-pill-remove { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: transparent; color: var(--primary); border: none; border-radius: 50%; font-size: 16px; line-height: 1; cursor: pointer; padding: 0; } .tag-pill-remove:hover { background: var(--primary-strong); } .tag-typer { flex: 1; min-width: 80px; background: transparent; border: none; padding: 6px 4px; font: inherit; color: var(--fg); } .tag-typer:focus { outline: none; } /* ─── Image picker (inline preview + modal) ───────────────────────────── */ .image-picker { display: flex; flex-direction: column; gap: 10px; padding: 14px; margin-top: 6px; background: var(--surface-warm); border: 1.5px dashed transparent; border-radius: var(--radius-input); transition: border-color 0.15s ease, background 0.15s ease; } .image-picker.is-drop-active { border-color: var(--primary); background: var(--primary-soft); } .image-picker-input { display: none; } .image-picker-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; align-self: flex-start; padding: 10px 18px; background: var(--card); color: var(--primary); border: 1.5px solid var(--primary); border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; cursor: pointer; } .image-picker-btn:hover { background: var(--primary-soft); } .image-picker-btn .ic { width: 16px; height: 16px; } .image-picker-btn .ic svg { width: 16px; height: 16px; } .image-picker-preview, .image-picker-modal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } .image-picker-preview:empty { display: none; } .image-thumb { position: relative; aspect-ratio: 1 / 1; min-height: 96px; /* fallback for browsers without aspect-ratio */ border-radius: var(--radius-input); overflow: hidden; background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,0.05); } .image-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .image-thumb-remove { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; background: rgba(0,0,0,0.55); color: #fff; border: none; border-radius: 50%; font-size: 16px; line-height: 1; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; } .image-thumb-remove:hover { background: rgba(0,0,0,0.75); } /* ─── Image picker modal ──────────────────────────────────────────────── */ .image-picker-modal { width: min(560px, 92vw); max-height: 86vh; padding: 20px; background: var(--card); color: var(--fg); border: none; border-radius: var(--radius-card); box-shadow: 0 24px 60px rgba(0,0,0,0.25); } .image-picker-modal::backdrop { background: rgba(0,0,0,0.4); } .image-picker-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .image-picker-modal-head h3 { margin: 0; font-size: 18px; font-weight: 600; } .image-picker-modal-close { width: 32px; height: 32px; background: transparent; color: var(--fg); border: none; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; } .image-picker-modal-close:hover { background: var(--surface-warm); } .image-picker-dropzone { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px; background: var(--surface-warm); border: 1.5px dashed var(--border); border-radius: var(--radius-input); text-align: center; color: var(--muted); margin-bottom: 14px; transition: border-color 0.15s ease, background 0.15s ease; } .image-picker-dropzone.is-drop-active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); } .image-picker-dropzone p { margin: 0; } .image-picker-browse { padding: 8px 18px; background: var(--primary); color: #fff; border: none; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; cursor: pointer; } .image-picker-browse:hover { filter: brightness(1.05); } .image-picker-modal-grid { max-height: 28vh; overflow: auto; } .image-picker-modal-section { margin-bottom: 14px; } .image-picker-modal-section-title { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } /* Library — user's previously-uploaded photos. Tiles are buttons so keyboard nav works; selected state is a primary outline + checkmark. */ .image-picker-library { max-height: 28vh; overflow: auto; } .image-picker-library-msg { margin: 0; padding: 10px 0; font-size: 13px; color: var(--muted); text-align: center; } .image-picker-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; } .image-picker-library-tile { position: relative; aspect-ratio: 1 / 1; min-height: 72px; padding: 0; border: 2px solid transparent; background: var(--surface-warm); border-radius: var(--radius-input); overflow: hidden; cursor: pointer; transition: border-color 0.12s ease, transform 0.12s ease; } .image-picker-library-tile:hover { transform: scale(1.02); } .image-picker-library-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } .image-picker-library-tile.is-selected { border-color: var(--primary); } .image-picker-library-check { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; background: var(--primary); color: #fff; border-radius: 50%; font-size: 12px; line-height: 20px; text-align: center; font-weight: 700; opacity: 0; transform: scale(0.6); transition: opacity 0.15s ease, transform 0.15s ease; } .image-picker-library-tile.is-selected .image-picker-library-check { opacity: 1; transform: scale(1); } .image-picker-modal-foot { display: flex; justify-content: flex-end; gap: 10px; } .image-picker-cancel { padding: 10px 18px; background: transparent; color: var(--fg); border: 1.5px solid var(--border); border-radius: var(--radius-pill); font-size: 14px; font-weight: 500; cursor: pointer; } .image-picker-cancel:hover { background: var(--surface-warm); } .image-picker-done { width: auto; min-height: 0; padding: 10px 22px; margin: 0; }