/* * Nyora Web — design system (v2). * * Modern flat + linear-gradient. The accent is picked from the browser's own * AccentColor by default (store.js reads it into --accent at boot; user can * override in Settings). Gradient companions are derived from --accent via * color-mix so the whole UI re-tints to any accent. * * Theming contract (core/store.js): / carry data-theme = * "DARK" | "LIGHT" and an inline --accent. Everything else derives. */ /* ---- tokens ---------------------------------------------------------- */ :root, :root[data-theme="DARK"] { /* Type system — Awwwards-grade pairing (Fontshare): Clash Display for headlines, Satoshi for everything else. System fallbacks keep the UI usable before the webfonts land / when offline. */ --font-display: "Clash Display", "Satoshi", -apple-system, system-ui, sans-serif; --font-body: "Satoshi", -apple-system, system-ui, "Segoe UI", sans-serif; --bg: #000000; --bg-elev: #090909; /* neutral near-black (was blue-tinted #0a0a0e) */ --surface1: #111111; /* cards / panes / rows — neutral, no cool cast */ --surface2: #1a1a1a; /* hover */ --surface3: #232323; /* active / inset */ --surface-grad: linear-gradient(180deg, #161616 0%, #0d0d0d 100%); --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.15); --text: #ededf2; --text-dim: #9a9aac; --text-faint: #62626f; --accent: #6366f1; /* default; overridden by browser AccentColor */ --accent-soft: color-mix(in oklab, var(--accent) 16%, transparent); --accent-2: color-mix(in oklab, var(--accent) 60%, #a855f7); --on-accent: #ffffff; /* Flat design: interactive accent fills are SOLID (no gradient). The linear-gradient lives only as a faint background tint (see body). */ --grad-accent: var(--accent); --grad-accent-soft: linear-gradient(135deg, color-mix(in oklab, var(--accent) 22%, transparent) 0%, color-mix(in oklab, var(--accent-2) 18%, transparent) 100%); --grad-sheen: linear-gradient(180deg, var(--hairline-sheen), transparent); /* Pure-black background with a faint accent wash up top — a clean linear gradient straight onto #000 (srgb), NOT the muddy oklab-on-transparent mix that washed the whole app grey. Bottom stays absolute black. */ --bg-tint: linear-gradient(168deg, color-mix(in srgb, var(--accent) 13%, #000000) 0%, #000000 42%, #000000 100%); --danger: #ff5a65; --ok: #34d399; --warn: #fbbf24; /* ---- semantic layer tokens (overlays, scrims, hairlines) ---- */ /* Transparent-black scrims for modals / drawers / search panels. */ --overlay: rgba(0, 0, 0, 0.58); --overlay-strong: rgba(0, 0, 0, 0.62); --overlay-light: rgba(0, 0, 0, 0.38); /* Black wash stops used inside cover/image gradients. */ --scrim-faint: rgba(0, 0, 0, 0.05); --scrim-soft: rgba(0, 0, 0, 0.04); --scrim-deep: rgba(0, 0, 0, 0.66); --scrim-deeper: rgba(0, 0, 0, 0.68); /* Hairlines / sheens (transparent white). */ --hairline: rgba(255, 255, 255, 0.08); --hairline-sheen: rgba(255, 255, 255, 0.05); --hairline-faint: rgba(255, 255, 255, 0.02); --card-border: rgba(255, 255, 255, 0.1); --card-border-hover: rgba(255, 255, 255, 0.18); /* Text over arbitrary surfaces (semi-transparent white). */ --text-on-surface-muted: rgba(255, 255, 255, 0.6); /* Pure-contrast literals for the rare extreme-contrast need. */ --pure-white: #ffffff; --pure-black: #000000; /* A near-black ink used by card / surface bases. */ --surface-ink: #050505; --cover-ink-top: #1b1d18; --cover-ink-bottom: #050505; /* Skeleton shimmer (accent-tinted sweep). */ --skeleton-shimmer: color-mix(in oklab, var(--accent) 8%, var(--surface2)); /* ---- accent-derived utility tints ---- */ --accent-tint-xs: color-mix(in srgb, var(--accent) 8%, transparent); --accent-tint-soft: color-mix(in srgb, var(--accent) 12%, transparent); --accent-tint: color-mix(in srgb, var(--accent) 18%, transparent); --accent-tint-strong: color-mix(in srgb, var(--accent) 24%, transparent); --accent-glow: color-mix(in oklab, var(--accent) 30%, transparent); --accent-on-light: color-mix(in srgb, var(--accent) 90%, var(--pure-white)); /* ---- shadows (elevation scale) ---- */ --radius: 16px; --radius-sm: 11px; --radius-lg: 22px; --radius-pill: 999px; --shadow: 0 12px 44px rgba(0, 0, 0, 0.55); --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-accent: none; --shadow-card: 0 14px 34px rgba(0, 0, 0, 0.22); --shadow-card-hover: 0 22px 48px rgba(0, 0, 0, 0.28); --shadow-cover: 0 14px 32px rgba(0, 0, 0, 0.3); --shadow-cover-hover: 0 22px 46px rgba(0, 0, 0, 0.38); --shadow-pop: 0 30px 80px rgba(0, 0, 0, 0.5); /* mobile depth shadows (deep blacks over artwork-heavy surfaces) */ --shadow-depth-1: 0 8px 20px rgba(0, 0, 0, 0.32); --shadow-depth-2: 0 18px 36px rgba(0, 0, 0, 0.26); --shadow-depth-3: 0 18px 40px rgba(0, 0, 0, 0.38); --shadow-depth-4: 0 16px 34px rgba(0, 0, 0, 0.36); --shadow-depth-5: 0 22px 58px rgba(0, 0, 0, 0.42); --shadow-depth-6: 0 20px 50px rgba(0, 0, 0, 0.46); --shadow-depth-7: 0 20px 52px rgba(0, 0, 0, 0.46); --shadow-depth-8: 0 20px 48px rgba(0, 0, 0, 0.42); --shadow-depth-9: 0 20px 48px rgba(0, 0, 0, 0.5); --shadow-depth-10: 0 16px 34px rgba(0, 0, 0, 0.42); --shadow-depth-11: 0 22px 58px rgba(0, 0, 0, 0.42); --shadow-depth-12: 0 16px 34px rgba(0, 0, 0, 0.36); --shadow-depth-13: 0 18px 42px rgba(0, 0, 0, 0.38); /* (legacy warm-cream / route-ink mobile palette removed — the mobile UI now inherits the neutral base tokens above and is hairline-driven.) */ --sidebar-w: 244px; --topbar-h: 74px; --mobile-tabbar-h: 82px; --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ---- welcome / start screen (self-contained night-rain palette) ---- */ --wlc-text: #eef1fb; --wlc-sky-1: #1b2745; --wlc-sky-2: #0c1426; --wlc-sky-3: #05070f; --wlc-blue: #2b6cff; --wlc-mist-1: rgba(130, 160, 230, 0.1); --wlc-mist-2: rgba(90, 120, 210, 0.08); --wlc-drop: rgba(188, 210, 255, 0.7); --wlc-flash: rgba(214, 228, 255, 0.5); --wlc-vignette: rgba(0, 0, 0, 0.6); --wlc-wordmark: #dfe4f5; --wlc-eyebrow: #8ea0cc; --wlc-title: #f4f6fd; --wlc-title-shadow: rgba(0, 0, 0, 0.45); --wlc-sub: #aab7dc; --wlc-feature: #93a2cb; --wlc-card-top: rgba(22, 30, 52, 0.93); --wlc-card-bottom: rgba(12, 18, 34, 0.9); --wlc-card-border: rgba(170, 195, 255, 0.13); --wlc-card-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); --wlc-card-inner: rgba(255, 255, 255, 0.07); --wlc-head: #8294be; --wlc-google-bg: #ffffff; --wlc-google-text: #1f1f29; --wlc-google-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); --wlc-google-shadow-hover: 0 16px 42px rgba(0, 0, 0, 0.5); --wlc-google-spin-track: rgba(0, 0, 0, 0.25); --wlc-or: #7e8eb6; --wlc-ghost-border: rgba(170, 195, 255, 0.15); --wlc-ghost-border-hover: rgba(170, 195, 255, 0.28); --wlc-ghost-bg: rgba(160, 185, 255, 0.035); --wlc-ghost-bg-hover: rgba(160, 185, 255, 0.09); --wlc-ghost-text: #e7ecfb; --wlc-status-error: #ff8b91; --wlc-status-info: #9fb6ff; --wlc-foot: #707fa6; --wlc-feature-card-border: rgba(170, 195, 255, 0.11); --wlc-feature-card-bg: rgba(160, 185, 255, 0.045); } :root[data-theme="LIGHT"] { --bg: #ececf2; --bg-elev: #f5f5f9; --surface1: #ffffff; --surface2: #d8d8e4; --surface3: #c2c2d4; --surface-grad: linear-gradient(180deg, #ffffff 0%, #ececf2 100%); --border: rgba(16, 18, 50, 0.15); --border-strong: rgba(16, 18, 50, 0.28); --text: #14141b; --text-dim: #484856; --text-faint: #7a7a88; --on-accent: #ffffff; --grad-sheen: linear-gradient(180deg, var(--text-on-surface-muted), transparent); --bg-tint: linear-gradient(160deg, color-mix(in oklab, var(--accent) 8%, transparent) 0%, transparent 40%); --danger: #e5484d; --ok: #2f9e6f; --overlay: rgba(16, 18, 50, 0.32); --overlay-strong: rgba(16, 18, 50, 0.4); --overlay-light: rgba(16, 18, 50, 0.18); --hairline: rgba(16, 18, 50, 0.12); --hairline-sheen: rgba(16, 18, 50, 0.05); --hairline-faint: rgba(16, 18, 50, 0.03); --card-border: rgba(16, 18, 50, 0.12); --card-border-hover: rgba(16, 18, 50, 0.2); --text-on-surface-muted: rgba(20, 20, 27, 0.6); --skeleton-shimmer: color-mix(in oklab, var(--accent) 8%, var(--surface2)); --shadow: 0 14px 40px rgba(20, 22, 50, 0.14); --shadow-sm: 0 4px 14px rgba(20, 22, 50, 0.1); --shadow-card: 0 14px 34px rgba(20, 22, 50, 0.12); --shadow-card-hover: 0 22px 48px rgba(20, 22, 50, 0.16); --shadow-cover: 0 14px 32px rgba(20, 22, 50, 0.14); --shadow-cover-hover: 0 22px 46px rgba(20, 22, 50, 0.18); --shadow-pop: 0 30px 80px rgba(20, 22, 50, 0.22); --btn-hover: #e4e4f0; } /* ---- reset ----------------------------------------------------------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { background: var(--bg-tint), var(--bg); background-attachment: fixed; color: var(--text); font-family: var(--font-body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; display: flex; min-height: 100vh; overscroll-behavior-y: none; } h1, h2, h3, .brand, .page-title, .source-name, .hero-card h1 { font-family: inherit !important; font-weight: 700 !important; letter-spacing: -0.02em !important; text-transform: none; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button, input, select, textarea { font-family: inherit; color: inherit; } /* Display type — headlines & section heads carry the Clash Display face with tightened tracking for that editorial, designed-from-scratch feel. */ h1, h2, h3, .page-title, .section-head, .section-head h2, .hero-card h1, .wlc-eyebrow, .brand span { font-family: var(--font-display); letter-spacing: -0.015em; font-feature-settings: "ss01", "cv01"; } button { cursor: pointer; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-track { background: transparent; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; } .hidden { display: none !important; } ::selection { background: var(--accent-soft); } /* ---- layout: sidebar + main ----------------------------------------- */ .sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); height: 100vh; position: sticky; top: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 42%), var(--pure-black); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 18px 14px; gap: 1px; overflow-y: auto; } .brand { display: flex; align-items: center; padding: 4px 12px 14px; font-weight: 800; font-size: 14px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--text); cursor: pointer; } .nav-group { display: flex; flex-direction: column; gap: 1px; } .nav-group.bottom { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); } .nav-label { position: relative; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--text-faint); padding: 18px 12px 6px 22px; } .nav-label::before { content: ""; position: absolute; left: 11px; top: calc(50% + 6px); transform: translateY(-50%); width: 3px; height: 12px; border-radius: 2px; background: var(--accent); } .nav-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 7px 12px; margin: 1px 0; border-radius: var(--radius-sm); color: var(--text-dim); cursor: pointer; font-weight: 600; white-space: nowrap; transition: background 0.16s var(--ease), color 0.16s var(--ease); } .nav-item:hover { background: var(--surface1); color: var(--text); } .nav-item .icon { width: 24px; height: 24px; flex: 0 0 24px; display: grid; place-items: center; color: var(--text-dim); background: none; transition: color 0.16s var(--ease); } .nav-item .icon svg { width: 20px; height: 20px; } .nav-item:hover .icon { color: var(--text); } .nav-item.active { color: var(--text); background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 26%, transparent) 0%, color-mix(in oklab, var(--accent) 9%, transparent) 56%, transparent 100%); } .nav-item.active::before { content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%); width: 3px; height: 64%; border-radius: 0 3px 3px 0; background: var(--accent); box-shadow: 0 0 10px color-mix(in oklab, var(--accent) 70%, transparent); } .nav-item.active .icon { color: var(--accent); background: none; } .main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; } /* ---- topbar ---------------------------------------------------------- */ .topbar { position: sticky; top: 0; z-index: 20; height: var(--topbar-h); display: flex; align-items: center; gap: 14px; padding: 14px 24px 0; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent) 0%, transparent 100%), color-mix(in srgb, var(--pure-black) 86%, transparent); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); border-bottom: 1px solid var(--border); } .topbar .spacer { flex: 1 1 auto; } .mobile-brand, .mobile-search-action { display: none; } .mobile-search-panel, .mobile-search-scrim { display: none; } /* "Official website" pill — always visible in the header, links to the marketing site. */ .visit-site { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; transform: translateY(-2px); color: var(--accent-on-light); background: var(--accent-tint-soft); border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .visit-site:hover { color: var(--pure-white); background: var(--accent); border-color: var(--accent); } .visit-site svg { flex: 0 0 auto; } @media (max-width: 760px) { .visit-site-label { display: none; } /* icon-only on phones to save space */ .visit-site { padding: 9px; } } .search-form { flex: 1 1 440px; max-width: 560px; position: relative; display: flex; align-items: center; transform: translateY(-2px); } /* Search bar hidden only on the manga detail page + reader (app.js toggles body.hide-search per route, so it always reappears on other screens). */ body.hide-search .search-form { display: none; } /* The whole topbar is hidden on the immersive screens (details + reader) on MOBILE only — see the @media (max-width: 760px) block. Desktop keeps it. */ .search-form .icon, .search-form .search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--text-faint); pointer-events: none; } .search-form input { width: 100%; height: 40px; padding: 0 16px 0 40px; background: var(--surface1); border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--text); transition: border-color 0.16s var(--ease), background 0.16s var(--ease); } .search-form input::placeholder { color: var(--text-faint); } .search-form input:focus { border-color: var(--accent); background: var(--surface2); outline: none; } .source-btn { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; background: var(--surface1); border: 1px solid var(--border); border-radius: var(--radius-pill); cursor: pointer; color: var(--text); max-width: 220px; font-weight: 550; transition: border-color 0.16s var(--ease); } .source-btn:hover { border-color: var(--border-strong); } .source-btn .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- view / page scaffolding ---------------------------------------- */ .view { flex: 1 1 auto; padding: 26px 28px 80px; overflow-y: auto; } /* App-like: each route fades/rises in instead of a hard repaint. */ @keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .view > * { animation: viewIn 0.26s var(--ease) both; } @media (prefers-reduced-motion: reduce) { .view > * { animation: none; } } .page-title { font-size: 24px; font-weight: 760; letter-spacing: -0.025em; margin: 0 0 20px; } .section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 30px 0 16px; } .section-header:first-child { margin-top: 0; } .section-header h2, .section-header .h2 { font-size: 17px; font-weight: 680; margin: 0; letter-spacing: -0.01em; } .section-actions { display: flex; gap: 8px; align-items: center; } /* ---- card grid ------------------------------------------------------- */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 20px; } .grid.dense { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 14px; } .card { position: relative; isolation: isolate; cursor: pointer; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 8px; border-radius: 22px; background: linear-gradient(145deg, color-mix(in srgb, var(--surface2) 72%, transparent), color-mix(in srgb, var(--pure-black) 76%, transparent)), color-mix(in srgb, var(--bg-elev) 78%, transparent); border: 1px solid color-mix(in srgb, var(--border) 82%, transparent); box-shadow: var(--shadow-card); transform: translateZ(0); transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease); } .card::before { content: ""; position: absolute; inset: 6px 6px auto auto; width: 58%; aspect-ratio: 1 / 1; z-index: -1; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 48%, transparent), transparent); opacity: 0.22; transform: translate(5px, -5px) rotate(7deg); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); } .card::after { content: ""; position: absolute; inset: auto 12px 42px 12px; height: 1px; z-index: -1; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 72%, transparent), transparent); opacity: 0; transition: opacity 0.2s var(--ease); } .card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 34%, var(--border-strong)); box-shadow: var(--shadow-card-hover); } .card:hover::before { opacity: 0.34; transform: translate(7px, -7px) rotate(10deg); } .card:hover::after { opacity: 0.8; } .card .cover { position: relative; aspect-ratio: 2 / 3; border-radius: 17px; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent 44%), linear-gradient(180deg, var(--cover-ink-top), var(--cover-ink-bottom)); border: 1px solid var(--card-border); box-shadow: var(--shadow-cover); transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); } .card:hover .cover { transform: translateY(-5px) rotate(-0.6deg); border-color: color-mix(in srgb, var(--accent) 40%, var(--card-border-hover)); box-shadow: var(--shadow-cover-hover); } .card .cover img { width: 100%; height: 100%; object-fit: cover; } .card .cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--scrim-faint), transparent 34%, var(--scrim-deep) 100%), linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent 42%); opacity: 0.62; transition: opacity 0.2s var(--ease); } .card:hover .cover::after { opacity: 0.86; } .card .title { padding: 0 2px 2px; font-size: 12.8px; font-weight: 730; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.24; letter-spacing: -0.01em; } .badge { position: absolute; top: 8px; left: 8px; font-size: 10px; font-weight: 800; letter-spacing: 0.03em; padding: 3px 8px; border-radius: 8px; background: var(--overlay-strong); color: var(--pure-white); backdrop-filter: blur(6px); } .badge.nsfw { background: var(--danger); color: var(--pure-white); } /* ---- chips / tags ---------------------------------------------------- */ .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 550; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--surface1); border: 1px solid var(--border); color: var(--text-dim); white-space: nowrap; transition: all 0.15s var(--ease); } .chip[role="button"] { cursor: pointer; } .chip[role="button"]:hover { background: var(--surface2); color: var(--text); border-color: var(--border-strong); } .chip.active { background: var(--grad-accent); border-color: transparent; color: var(--on-accent); box-shadow: var(--shadow-accent); } .chip.nsfw { border-color: color-mix(in oklab, var(--danger) 50%, transparent); color: var(--danger); } .chip.status-running { color: var(--accent); border-color: color-mix(in oklab, var(--accent) 45%, transparent); } .chip.status-queued { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 45%, transparent); } .chip.status-completed, .chip.status-done { color: var(--ok); border-color: color-mix(in oklab, var(--ok) 45%, transparent); } .chip.status-failed { color: var(--danger); border-color: color-mix(in oklab, var(--danger) 45%, transparent); } /* ---- buttons --------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface1); color: var(--text); font-weight: 600; cursor: pointer; transition: all 0.15s var(--ease); } .btn .icon { width: 18px; height: 18px; color: inherit; } .btn .icon svg { color: inherit; stroke: currentColor; } /* Standard button hover */ .btn:hover { background: var(--btn-hover, var(--surface2)); border-color: var(--accent); } /* Accent button: force high contrast and color persistence */ .btn.btn-accent { background: var(--accent) !important; color: var(--on-accent) !important; border: none !important; box-shadow: var(--shadow-sm); } .btn.btn-accent .icon, .btn.btn-accent .icon svg { color: var(--on-accent) !important; stroke: var(--on-accent) !important; } .btn.btn-accent:hover { filter: brightness(1.12); box-shadow: 0 4px 12px var(--accent-glow); transform: translateY(-1px); } /* Ghost button */ .btn.btn-ghost { background: transparent; border-color: transparent; } .btn.btn-ghost:hover { background: var(--surface1); border-color: var(--border-strong); } /* Danger button */ .btn.btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: transparent; } .btn.btn-danger:hover { background: var(--danger); color: var(--pure-white); border-color: transparent; } .btn.btn-danger:hover .icon { color: var(--pure-white); } .icon-btn { width: 40px; padding: 0; flex: 0 0 40px; } .btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; } .btn-sm.icon-btn { width: 32px; flex-basis: 32px; } /* ---- stepper (number +/-) — fixes the Downloads white-box bug -------- */ .stepper { display: inline-flex; align-items: center; gap: 4px; background: var(--surface3); border-radius: var(--radius-pill); padding: 4px; } .stepper button { width: 30px; height: 30px; flex: 0 0 30px; border: none; border-radius: 50%; background: var(--surface1); color: var(--text); font-size: 18px; line-height: 1; display: grid; place-items: center; transition: background 0.14s var(--ease); } .stepper button:hover:not(:disabled) { background: var(--accent); color: var(--on-accent); } .stepper button:disabled { opacity: 0.4; cursor: not-allowed; } .stepper .num { min-width: 32px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; } /* ---- segmented control ---------------------------------------------- */ .seg { display: inline-flex; background: var(--surface3); border-radius: var(--radius-sm); padding: 3px; gap: 3px; } .seg button { border: none; background: transparent; color: var(--text-dim); padding: 7px 15px; border-radius: 9px; cursor: pointer; font-weight: 600; transition: all 0.15s var(--ease); } .seg button.active { background: var(--grad-accent); color: var(--on-accent); box-shadow: var(--shadow-sm); } /* ---- tabs ------------------------------------------------------------ */ .tabs { display: flex; gap: 7px; margin-bottom: 20px; flex-wrap: wrap; } .tab { padding: 8px 17px; border-radius: var(--radius-pill); background: transparent; border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; font-weight: 600; transition: all 0.15s var(--ease); } .tab:hover { color: var(--text); border-color: var(--border-strong); } .tab.active { background: var(--grad-accent); border-color: transparent; color: var(--on-accent); box-shadow: var(--shadow-accent); } .load-more { display: block; margin: 30px auto 0; } /* ---- explore two-pane ------------------------------------------------ */ /* Desktop: persistent left source list + right browse pane. On mobile the source pane is hidden and the SAME .source-list renders inside a bottom sheet (see the mobile block). The browse body is a strict state machine so it is never left blank. */ .explore { display: grid; grid-template-columns: 312px 1fr; gap: 24px; align-items: start; } .source-pane { position: sticky; top: 16px; background: var(--surface-grad); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; max-height: calc(100vh - var(--topbar-h) - 48px); display: flex; flex-direction: column; gap: 12px; overflow: hidden; } .source-pane .section-header { margin: 0; } /* The source list (shared by desktop pane + mobile sheet): a filter field, a Manage-extensions row, then a scrollable grouped body. */ .source-list { display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1 1 auto; } .src-search, .source-list .src-search { width: 100%; height: 38px; padding: 0 14px; margin: 0; border-radius: var(--radius-pill); background: var(--bg-elev); border: 1px solid var(--border); color: var(--text); flex: 0 0 auto; } .src-search:focus { border-color: var(--accent); outline: none; } .source-list-body { overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding-right: 2px; min-height: 0; } /* Source row: medallion | title+meta (truncates) | action — no overlap. */ .source-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer; color: var(--text-dim); background: transparent; border: 1px solid transparent; transition: background 0.14s var(--ease), border-color 0.14s var(--ease); } .source-row:hover { background: var(--surface2); color: var(--text); } .source-row.active { background: var(--accent-soft); color: var(--text); } .source-row .thumb { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; font-size: 12px; background: var(--surface3); color: var(--text-dim); border: 1px solid var(--border); } .source-row.active .thumb { background: var(--grad-accent); color: var(--on-accent); border-color: transparent; } .source-row .row-main { min-width: 0; } .source-row .row-main .name { font-weight: 650; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .source-row .row-main .sub { font-size: 11.5px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .source-row .row-actions { display: flex; gap: 4px; flex: 0 0 auto; align-items: center; } .source-row .row-actions .icon { color: var(--text-faint); } /* Manage-extensions entry point — accent-tinted so it reads as the CTA. */ .source-row.manage-row { border: 1px solid var(--border); background: var(--surface1); margin-bottom: 2px; } .source-row.manage-row:hover { border-color: var(--accent); background: var(--accent-soft); } .source-row.manage-row .thumb.manage-thumb { background: var(--accent-soft); color: var(--accent); border-color: transparent; } .source-list .lang { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); padding: 10px 4px 2px; font-weight: 700; } .browse-pane { min-width: 0; } /* ---- extensions sheet ------------------------------------------------- */ .ext-sheet { display: flex; flex-direction: column; gap: 14px; } .ext-search { margin: 0; flex: 0 0 auto; } .ext-list { max-height: min(56vh, 520px); overflow-y: auto; } .ext-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; } .ext-row .row-main { min-width: 0; } .ext-row .row-actions { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; } .ext-row.broken { opacity: 0.6; } /* ---- details --------------------------------------------------------- */ /* The hero is a single rounded surface holding a blurred cover backdrop, a top-left overlay Back button, and a two-pane head (sticky summary left / chapter list right) that collapses to one column on narrow screens. */ .details { position: relative; } .details-hero { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-elev); } .details-hero .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center top; filter: blur(40px) saturate(150%); transform: scale(1.25); opacity: 0.45; pointer-events: none; } .details-hero .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 45%, transparent), var(--bg-elev) 78%); } /* Top-left overlay back button. */ .details-back, .details-backbar .icon-btn { position: absolute; top: 14px; left: 14px; z-index: 3; background: color-mix(in srgb, var(--bg) 55%, transparent); border: 1px solid var(--border-strong); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .details-back:hover { background: color-mix(in srgb, var(--bg) 72%, transparent); } .details-backbar { position: relative; min-height: 56px; } /* Two-pane head. */ .details-head { position: relative; z-index: 2; display: grid; grid-template-columns: 332px minmax(0, 1fr); gap: 36px; padding: 28px 28px 28px 28px; align-items: start; } /* Left summary column (sticky on desktop). */ .details-summary { position: sticky; top: 16px; align-self: start; display: flex; flex-direction: column; gap: 14px; min-width: 0; } .details-summary > .cover { width: 100%; aspect-ratio: 2/3; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--surface1); box-shadow: var(--shadow); position: relative; } .details-summary > .cover img { width: 100%; height: 100%; object-fit: cover; } .details-title { font-size: 25px; line-height: 1.2; margin: 4px 0 0; letter-spacing: -0.025em; } .details-authors { color: var(--text-dim); font-size: 14px; margin: 0; } .details-meta { display: flex; flex-wrap: wrap; gap: 8px; } /* Action area — wraps, never overflows horizontally. */ .details-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 2px; } .details-actions .details-cta { flex: 1 1 140px; min-width: 0; } .details-actions .btn { min-width: 0; } .details-actions-icons { display: flex; gap: 8px; flex: 0 0 auto; } .tag-chips { margin-top: 2px; } .desc { color: var(--text-dim); line-height: 1.65; white-space: pre-line; margin: 4px 0 0; } .desc.clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; } .desc-empty { color: var(--text-faint); font-style: italic; } .desc-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .desc-wrap .btn-sm { align-self: flex-start; padding-left: 0; padding-right: 0; } /* Right chapters column. */ .details-chapters { min-width: 0; } .details-chapters > .section-header { margin-top: 0; } .chapter-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .chapter-list li { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent; transition: background 0.14s var(--ease), border-color 0.14s var(--ease); } .chapter-list li:hover { background: var(--surface1); border-color: var(--border); } .chapter-list li.read { color: var(--text-faint); } .chapter-list li.read .ch-name { color: var(--text-faint); } .chapter-list .ch-name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 550; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chapter-list .ch-meta { flex: 0 0 auto; color: var(--text-faint); font-size: 12px; white-space: nowrap; } .chapter-list li .icon-btn { flex: 0 0 40px; width: 40px; height: 40px; color: var(--text-dim); transition: all 0.2s var(--ease); } .chapter-list li .icon-btn:hover { color: var(--accent); background: var(--surface2); } .chapter-list .skeleton-row { justify-content: space-between; pointer-events: none; } /* ---- library hub redesign ------------------------------------------- */ .library-container-hub { display: flex; flex-direction: column; gap: 20px; } .library-hub-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .library-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .library-rail { margin-bottom: 24px; } .library-subview { min-height: 400px; } /* ---- explore: browse body states ------------------------------------- */ /* Search-mode input row in the browse pane. */ .browse-searchbar { display: flex; gap: 10px; align-items: stretch; margin: 0 0 18px; } .browse-searchbar .browse-search { margin: 0; flex: 1 1 auto; } .browse-searchbar .icon-btn { flex: 0 0 auto; height: 42px; width: 42px; } /* No-source onboarding: centered CTA instead of a blank pane. */ .browse-onboarding { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 24px 0; } .browse-body { min-height: 240px; } /* ---- details: tablet collapse --------------------------------------- */ @media (max-width: 1040px) { /* Single column: summary stacks above the chapter list, no longer sticky. */ .details-head { grid-template-columns: 1fr; gap: 24px; } .details-summary { position: static; } .details-summary > .cover { width: min(220px, 46vw); align-self: center; } .details-title, .details-authors { text-align: center; } .details-meta { justify-content: center; } } /* Reading hides the topbar + bottom tabbar, but keeps the LEFT sidebar on desktop so navigation stays available. The in-reader "Hide sidebar" toggle adds .reader-immersive to collapse it for distraction-free reading. */ body.reader-active .topbar, body.reader-active .tabbar { display: none !important; } body.reader-active.reader-immersive .sidebar { display: none !important; } body.reader-active .view { padding: 0; } /* the sidebar toggle is only meaningful on desktop (mobile sidebar is a drawer) */ @media (max-width: 760px) { .reader-sidebar-toggle { display: none !important; } } .reader-view { position: relative; width: 100%; height: 100vh; overflow: hidden; display: flex; flex-direction: column; } .reader-view .reader { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } .reader-view.controls-hidden .reader-bar, .reader-view.controls-hidden .reader-progress { opacity: 0; pointer-events: none; visibility: hidden; } .reader-bar, .reader-progress { transition: opacity 0.2s var(--ease), visibility 0.2s; } /* thin chapter-position bar pinned to the very top */ .reader-progress { position: absolute; top: 0; left: 0; height: 4px; background: var(--accent); z-index: 22; box-shadow: 0 0 10px color-mix(in oklab, var(--accent) 50%, transparent); } /* solid/blurred bars with a border so they read over any artwork */ .reader-view .reader-bar { position: absolute; left: 0; right: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 12px 20px; background: color-mix(in srgb, var(--bg-elev) 88%, transparent); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); } .reader-view .reader-bar.top { top: 0; padding-top: max(12px, env(safe-area-inset-top)); border-bottom: 1px solid var(--border-strong); } .reader-view .reader-bar.bottom { bottom: 0; padding-bottom: max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--border-strong); } /* top bar pieces */ .reader-bar .reader-title { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; line-height: 1.3; } .reader-bar .reader-title .t-manga { font-size: 13px; font-weight: 600; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .reader-bar .reader-title .t-chapter { font-size: 17px; font-weight: 800; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .reader-bar .reader-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } /* every reader control: a real, visible, tappable icon button on a surface */ .reader-bar .reader-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface1); color: var(--text); cursor: pointer; transition: all 0.15s var(--ease); } .reader-bar .reader-btn .icon { width: 24px; height: 24px; } .reader-bar .reader-btn .icon svg { width: 24px; height: 24px; } .reader-bar .reader-btn:hover:not(:disabled) { background: var(--surface2); border-color: var(--accent); transform: translateY(-1px); } .reader-bar .reader-btn:active:not(:disabled) { transform: scale(0.95); } .reader-bar .reader-btn:disabled { opacity: 0.35; cursor: not-allowed; } .reader-bar .reader-btn.active { background: var(--accent); border-color: transparent; color: var(--on-accent); box-shadow: 0 4px 12px color-mix(in oklab, var(--accent) 30%, transparent); } .reader-bar .reader-btn.active .icon { color: var(--on-accent); } /* big readable page counter */ .reader-bar .reader-counter { flex: 0 0 auto; min-width: 90px; text-align: center; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); } /* visible, draggable page slider (paged modes only) */ .reader-bar .reader-slider { flex: 1 1 auto; min-width: 90px; height: 24px; margin: 0; cursor: pointer; accent-color: var(--accent); -webkit-appearance: none; appearance: none; background: transparent; } .reader-bar .reader-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--surface3); border: 1px solid var(--border-strong); } .reader-bar .reader-slider::-moz-range-track { height: 6px; border-radius: 999px; background: var(--surface3); border: 1px solid var(--border-strong); } .reader-bar .reader-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--accent); border: 2px solid var(--on-accent); box-shadow: var(--shadow-sm); } .reader-bar .reader-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 2px solid var(--on-accent); box-shadow: var(--shadow-sm); } @media (max-width: 760px) { .reader-view .reader-bar { gap: 8px; padding: 10px 14px; background: color-mix(in srgb, var(--bg-elev) 90%, transparent); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); } .reader-view .reader-bar.top { padding-top: max(12px, env(safe-area-inset-top)); } .reader-view .reader-bar.bottom { flex-wrap: wrap; padding-bottom: max(12px, env(safe-area-inset-bottom)); } .reader-bar .reader-btn { width: 44px; height: 44px; border-radius: var(--radius-sm); } .reader-bar .reader-counter { font-size: 16px; min-width: 72px; } /* slider drops to its own full-width row below the buttons */ .reader-bar.bottom .reader-slider { flex-basis: 100%; order: 9; min-width: 0; height: 30px; } } /* ---- list rows ------------------------------------------------------- */ .list { display: flex; flex-direction: column; gap: 9px; } .row-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--radius); cursor: pointer; background: var(--surface-grad); border: 1px solid var(--border); transition: border-color 0.15s var(--ease), transform 0.1s var(--ease); } .row-item:hover { border-color: var(--border-strong); } .row-item .thumb { width: 46px; height: 64px; flex: 0 0 46px; border-radius: 9px; object-fit: cover; background: var(--surface3); } .row-item .row-main { flex: 1 1 auto; min-width: 0; } .row-item .row-main .name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row-item .row-main .sub { color: var(--text-dim); font-size: 12.5px; } .row-item .row-actions { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; } /* ---- settings rows (HORIZONTAL — fixes the .field column clash) ------ */ .setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); } .setting-row:last-child { border-bottom: none; } .setting-row .row-main { min-width: 0; flex: 1 1 auto; } .setting-row .row-main .name { font-weight: 650; } .setting-row .row-main .sub { color: var(--text-faint); font-size: 12.5px; margin-top: 2px; } .setting-row .row-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } /* ---- progress bar ---------------------------------------------------- */ .progress { height: 7px; border-radius: 7px; background: var(--surface3); overflow: hidden; margin-top: 6px; } .progress > span { display: block; height: 100%; background: var(--grad-accent); transition: width 0.3s var(--ease); } /* ---- stat cards ------------------------------------------------------ */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; } .stat-card { background: var(--surface-grad); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; position: relative; overflow: hidden; } .stat-card::before { content: ""; position: absolute; inset: 0; background: var(--grad-accent-soft); opacity: 0.5; pointer-events: none; } .stat-card .num { font-size: 32px; font-weight: 780; letter-spacing: -0.02em; background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; position: relative; } .stat-card .lbl { color: var(--text-dim); font-size: 12.5px; margin-top: 4px; position: relative; } /* ---- forms ----------------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .field > label { font-weight: 650; font-size: 13px; } .field .hint { color: var(--text-faint); font-size: 12px; } .field input[type="text"], .field input[type="number"], .field input[type="password"], .field input[type="url"], .field input[type="search"], .field input:not([type]), .field select, .field textarea, input.field, select.field { height: 40px; padding: 0 14px; border-radius: var(--radius-sm); background: var(--bg-elev); border: 1px solid var(--border); color: var(--text); width: 100%; transition: border-color 0.15s var(--ease); } .field input:focus, .field select:focus, .field textarea:focus, input.field:focus { border-color: var(--accent); outline: none; } .field textarea { height: auto; min-height: 90px; padding: 10px 14px; resize: vertical; } .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .settings-section { background: var(--surface-grad); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; margin-bottom: 18px; max-width: 760px; } .settings-section h2 { margin: 0 0 6px; font-size: 17px; } .swatches { display: flex; gap: 10px; flex-wrap: wrap; } .swatch { width: 32px; height: 32px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform 0.12s var(--ease); } .swatch:hover { transform: scale(1.12); } .swatch.active { border-color: var(--text); box-shadow: 0 0 0 3px var(--accent-soft); } /* ---- colour-scheme preview cards (android item_color_scheme) ---------- */ .scheme-cards { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .scheme-cards::-webkit-scrollbar { height: 6px; } .scheme-cards::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; } .scheme-card { flex: 0 0 auto; cursor: pointer; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 6px; outline: none; } .scheme-card-surface { position: relative; width: 84px; height: 116px; border-radius: 14px; background: var(--surface2); border: 1px solid var(--border); padding: 10px; box-sizing: border-box; display: flex; flex-direction: column; transition: box-shadow 0.15s var(--ease), border-color 0.15s var(--ease); } .scheme-card:hover .scheme-card-surface { border-color: var(--card-primary); } .scheme-card:focus-visible .scheme-card-surface { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--card-primary); } .scheme-card.active .scheme-card-surface { border-color: var(--card-primary); box-shadow: 0 0 0 2px var(--card-primary); } .scheme-abc { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1; margin-bottom: auto; } .scheme-bar { display: block; height: 6px; border-radius: 4px; margin-top: 6px; } .scheme-primary { position: absolute; right: 10px; bottom: 10px; width: 18px; height: 18px; border-radius: 6px; } .scheme-check { position: absolute; top: 8px; right: 8px; color: var(--card-primary); opacity: 0; transform: scale(0.6); transition: opacity 0.15s var(--ease), transform 0.15s var(--ease-spring); } .scheme-check svg { width: 18px; height: 18px; } .scheme-card.active .scheme-check { opacity: 1; transform: scale(1); } .scheme-name { font-size: 12px; font-weight: 600; color: var(--text-dim); } .scheme-card.active .scheme-name { color: var(--text); } /* ---- switch ---------------------------------------------------------- */ .switch { position: relative; display: inline-block; width: 46px; height: 27px; flex: 0 0 46px; } .switch input { opacity: 0; width: 0; height: 0; } .switch .slider { position: absolute; inset: 0; background: var(--surface3); border-radius: 999px; cursor: pointer; transition: 0.2s; } .switch .slider::before { content: ""; position: absolute; width: 21px; height: 21px; left: 3px; top: 3px; background: var(--pure-white); border-radius: 50%; transition: 0.2s var(--ease-spring); box-shadow: var(--shadow-sm); } .switch input:checked + .slider { background: var(--grad-accent); } .switch input:checked + .slider::before { transform: translateX(19px); } /* ---- states ---------------------------------------------------------- */ .empty, .error-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 64px 20px; color: var(--text-dim); } .empty .icon { width: 40px; height: 40px; color: var(--text-faint); opacity: 0.7; } .error-box { color: var(--danger); } .center { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 60px 20px; color: var(--text-dim); flex-direction: column; } .spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--surface3); border-top-color: var(--accent); animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .skeleton { position: relative; overflow: hidden; background: var(--surface1) !important; border-radius: var(--radius-sm); } .skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--skeleton-shimmer), transparent); transform: translateX(-100%); animation: shimmer 1.4s infinite; } @keyframes shimmer { to { transform: translateX(100%); } } /* ---- modal ----------------------------------------------------------- */ .modal-backdrop { position: fixed; inset: 0; z-index: 100; background: var(--overlay-strong); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity 0.18s var(--ease); } .modal-backdrop.open { opacity: 1; } .modal { width: 100%; max-width: 460px; background: var(--surface-grad); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow); transform: translateY(10px) scale(0.98); transition: transform 0.2s var(--ease-spring); max-height: 86vh; display: flex; flex-direction: column; } .modal-backdrop.open .modal { transform: none; } .modal-head { padding: 20px 22px 4px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 18px; font-weight: 700; } .modal-head h3 { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .modal-head .icon-btn { flex: 0 0 36px; width: 36px; height: 36px; } .modal-body { padding: 16px 22px; overflow-y: auto; } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 8px 22px 20px; } /* ---- toast ----------------------------------------------------------- */ .toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 200; max-width: 90vw; background: var(--surface3); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 12px 22px; box-shadow: var(--shadow); font-weight: 550; } /* ---- icons ----------------------------------------------------------- */ .icon { display: inline-flex; align-items: center; justify-content: center; } .icon svg { width: 100%; height: 100%; display: block; } /* ---- explore: browse-pane head (tappable source pill + controls) ----- */ .browse-head { display: flex; align-items: center; gap: 12px; margin: 2px 0 18px; flex-wrap: wrap; } /* Source pill: medallion + name/meta + chevron. Tapping opens the source sheet (mobile) / source list (desktop). */ .source-select { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 14px; background: var(--surface1); border: 1px solid var(--border); color: var(--text); padding: 8px 14px 8px 10px; border-radius: var(--radius-pill); text-align: left; cursor: pointer; transition: border-color 0.16s var(--ease), background 0.16s var(--ease); } .source-select:hover { border-color: var(--accent); background: var(--surface2); } .source-select .medallion { width: 42px; height: 42px; flex: 0 0 42px; color: var(--accent); display: grid; place-items: center; font-weight: 800; font-size: 16px; } .source-select-main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; } .source-select-main .name { font-size: 16px; font-weight: 720; letter-spacing: -0.012em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .source-select-main .sub { color: var(--text-dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .source-select > .icon { flex: 0 0 auto; color: var(--text-faint); } .browse-head-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .src-close { display: none; } /* ---- mobile bottom tab bar (app-like) ------------------------------- */ .tabbar { display: none; } /* ---- responsive: tablet --------------------------------------------- */ /* Keep the two-pane layout down to mobile; just narrow the source column. */ @media (max-width: 1040px) { .explore { grid-template-columns: 248px 1fr; gap: 18px; } } /* ---- mobile --------------------------------------------------------- */ .nav-toggle { display: none; } @media (max-width: 760px) { :root, :root[data-theme] { --topbar-h: 56px; --mobile-tabbar-h: 64px; --radius: 12px; --radius-sm: 9px; --radius-lg: 16px; } body { display: block; background: var(--bg); } /* ---- top bar: flat, hairline-divided, calm ------------------------- */ .topbar { height: var(--topbar-h); min-height: var(--topbar-h); flex-wrap: nowrap; align-content: normal; padding: max(6px, env(safe-area-inset-top)) 18px 8px; gap: 12px; background: var(--bg); border-bottom: 1px solid var(--hairline); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } body.hide-topbar .topbar { display: none; } .topbar .spacer { display: none; } .visit-site { display: none; } .search-form { display: none; } .source-btn { display: none; } /* source is chosen inside Explore on mobile */ .mobile-brand { display: inline-flex; align-items: center; gap: 9px; order: 1; min-width: 0; flex: 1 1 auto; height: 40px; border: 0; background: transparent; color: var(--text); padding: 0; font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; transition: opacity 0.16s var(--ease); } .mobile-brand:active { opacity: 0.6; } .mobile-brand-logo { width: 26px; height: 26px; border-radius: 8px; box-shadow: 0 0 0 1px var(--hairline); } .mobile-brand-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* nav toggle + search: minimal ghost icon buttons, hairline, no accent fill */ .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; padding: 0; order: 3; gap: 0; border: 1px solid var(--hairline); border-radius: 10px; background: transparent; color: var(--text); box-shadow: none; transition: background 0.16s var(--ease), border-color 0.16s var(--ease); } .nav-toggle:active { background: var(--surface1); } .nav-toggle .icon { width: 19px; height: 19px; color: currentColor; } .nav-toggle-label { display: none; } /* icon-only on mobile, minimal */ .mobile-search-action { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; order: 2; border: 1px solid var(--hairline); border-radius: 10px; background: transparent; color: var(--text); box-shadow: none; transition: background 0.16s var(--ease), border-color 0.16s var(--ease); } .mobile-search-action:active { background: var(--surface1); } .mobile-search-action:hover { background: var(--surface1); border-color: var(--border-strong); } .mobile-search-action .icon { width: 19px; height: 19px; color: currentColor; } /* search overlay: clean dim + simple flat field */ /* Search overlay: a single clean bar that drops from the top. One elevated surface (no nested boxes), search glyph leading, a quiet close trailing. Submitting is the keyboard "Search" key / Enter — so no loud accent button competes with the field. */ .mobile-search-scrim { position: fixed; inset: 0; z-index: 70; background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .mobile-search-panel { position: fixed; top: max(10px, env(safe-area-inset-top)); left: 14px; right: 14px; z-index: 75; align-items: center; gap: 0; height: 54px; padding: 0 6px 0 18px; border-radius: 16px; background: var(--bg-elev); border: 1px solid var(--border); box-shadow: var(--shadow-pop); transform: translateY(-10px); opacity: 0; pointer-events: none; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); } body.search-open .mobile-search-scrim { display: block; } body.search-open .mobile-search-panel { display: flex; opacity: 1; pointer-events: auto; transform: none; } /* the field is transparent — the panel itself is the bar */ .mobile-search-field { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; } .mobile-search-field > .icon { width: 20px; height: 20px; color: var(--text-faint); flex: 0 0 auto; } .mobile-search-field input { min-width: 0; flex: 1 1 auto; height: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 16px; font-weight: 500; } .mobile-search-field input::placeholder { color: var(--text-faint); } .mobile-search-submit { display: none; } /* Enter / keyboard "Search" submits */ .mobile-search-close { display: inline-grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; border: 0; background: transparent; color: var(--text-faint); transition: background 0.16s var(--ease), color 0.16s var(--ease); } .mobile-search-close:active { background: var(--surface1); color: var(--text); transform: scale(0.94); } .mobile-search-close .icon { width: 18px; height: 18px; color: currentColor; } /* ---- off-canvas drawer (flat, hairline) ---------------------------- */ .sidebar { position: fixed; top: 0; left: 0; height: 100dvh; width: min(82vw, 300px); flex-basis: min(82vw, 300px); z-index: 60; transform: translateX(-100%); transition: transform 0.26s var(--ease); box-shadow: var(--shadow-sm); padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)); border-right: 1px solid var(--border); border-radius: 0; background: var(--bg-elev); } body.nav-open .sidebar { transform: none; } .nav-scrim { position: fixed; inset: 0; z-index: 55; background: var(--overlay); display: none; opacity: 0; transition: opacity 0.26s var(--ease); } body.nav-open .nav-scrim { display: block; opacity: 1; } .sidebar .nav-item { padding: 11px 12px; min-height: 46px; } .sidebar .nav-item .icon svg { width: 21px; height: 21px; } .main { min-height: 100dvh; } /* ---- view scaffolding: generous whitespace ------------------------- */ .view { padding: 22px 20px calc(var(--mobile-tabbar-h) + 28px + env(safe-area-inset-bottom)); overflow-x: hidden; } .page-title { font-family: var(--font-display); font-size: 24px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; } .section-header { margin: 32px 0 16px; align-items: baseline; } .section-header h2 { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.015em; } .section-header .icon { width: 20px; height: 20px; color: var(--text-dim); opacity: 1; } /* tap targets */ .btn { min-height: 46px; } .nav-item, .tab, .chip[role="button"] { min-height: 44px; } .btn:active, .btn-accent:active { transform: scale(0.98); } .btn-sm { min-height: 36px; } .chip[role="button"]:active, .tab:active { transform: scale(0.98); } /* ---- cover grid: framed covers, title + chips below, no overlays --- */ .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; } .grid.dense { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; } .card { gap: 10px; padding: 0; border-radius: 0; background: transparent; border: 0; box-shadow: none; } .card::before { display: none; } /* kill decorative corner accents */ .card:active { transform: scale(0.985); } .card .cover { border-radius: 12px; border: 1px solid var(--hairline); box-shadow: none; } .card .cover::after { display: none; } /* no scrim on minimal grid */ .card .title { font-size: 13.5px; font-weight: 600; line-height: 1.25; letter-spacing: -0.004em; color: var(--text); } /* chips flow BELOW the cover (never overlaid), muted + hairline */ .card .chips { position: static !important; inset: auto !important; gap: 6px; padding: 0; pointer-events: auto; backdrop-filter: none; -webkit-backdrop-filter: none; } .card .chip { min-height: 22px; padding: 0 8px; border-radius: 6px; background: transparent; border: 1px solid var(--hairline); color: var(--text-dim); font-size: 11px; font-weight: 500; backdrop-filter: none; -webkit-backdrop-filter: none; } .card .chip.status-completed { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: transparent; } /* ---- explore ------------------------------------------------------- */ .explore { display: block; } .source-pane { display: none; } .browse-head { gap: 14px; margin: 0 0 22px; } .source-select { flex: 1 1 100%; min-height: 56px; border-radius: var(--radius); gap: 12px; padding: 10px 12px; background: var(--surface1); border: 1px solid var(--border); } .source-select:hover { background: var(--surface2); border-color: var(--border-strong); } .source-select .medallion { width: 42px; height: 42px; flex-basis: 42px; border-radius: 11px; font-size: 13px; background: var(--surface3); border: 1px solid var(--border); color: var(--text); } .source-select-main .name { font-size: 16px; font-weight: 650; } .source-select-main .sub { font-size: 13px; font-weight: 500; color: var(--text-dim); } .browse-head-actions { flex: 1 1 100%; justify-content: space-between; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; } .browse-head-actions::-webkit-scrollbar { display: none; } .browse-head-actions .seg { flex: 1 1 auto; min-width: 240px; height: 42px; border-radius: 10px; padding: 4px; background: var(--surface1); border: 1px solid var(--border); } .browse-head-actions .seg button { flex: 1 1 auto; border-radius: 7px; font-size: 14px; font-weight: 600; } .browse-head-actions .icon-btn { border-radius: 10px; height: 42px; width: 42px; flex-basis: 42px; } .browse-searchbar { position: sticky; top: calc(var(--topbar-h) - 1px); z-index: 8; margin: -4px 0 18px; padding: 10px 0; background: var(--bg); } .source-sheet-list { gap: 12px; } .source-sheet-list .source-list-body { max-height: 60dvh; gap: 6px; } .source-sheet-list .source-row { padding: 10px 12px; min-height: 48px; border-radius: var(--radius); } .source-sheet-list .source-row .thumb { width: 40px; height: 40px; flex-basis: 40px; } /* ---- details: clean, centered, light hero ------------------------- */ .details-hero { border-radius: 0; margin: -22px -20px 0; } .details-hero .hero-bg { filter: blur(40px); transform: scale(1.2); opacity: 0.22; } .details-hero .hero-bg::after { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent), var(--bg) 82%); } .details-head { grid-template-columns: 1fr; gap: 20px; padding: 18px 20px 24px; } .details-back, .details-backbar .icon-btn { top: 14px; left: 16px; width: 40px; height: 40px; background: color-mix(in srgb, var(--bg) 62%, transparent); border: 1px solid var(--hairline); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .details-back:active { transform: scale(0.95); } .details-summary { position: static; gap: 14px; align-items: center; } .details-summary > .cover { width: min(46vw, 172px); align-self: center; box-shadow: none; border: 1px solid var(--hairline); } .details-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; text-align: center; line-height: 1.18; margin: 4px 0 6px; letter-spacing: -0.02em; } .details-authors { font-size: 13.5px; font-weight: 500; text-align: center; color: var(--text-dim); } .details-meta { justify-content: center; } .details-actions { width: 100%; justify-content: center; gap: 8px; margin: 10px 0 2px; } .details-actions .details-cta { flex: 1 1 100%; height: 50px; min-height: 50px; font-size: 15px; font-weight: 650; border-radius: var(--radius); box-shadow: none; } .details-actions .btn:not(.details-cta) { flex: 1 1 auto; height: 50px; min-height: 50px; border-radius: var(--radius); } .tag-chips { justify-content: center; } .desc { text-align: center; font-size: 14px; line-height: 1.65; margin: 14px 0 0; color: var(--text-dim); } .desc.clamp { -webkit-line-clamp: 4; } .desc-wrap { align-items: center; } .desc-wrap .btn-sm { align-self: center; } .details-chapters { margin-top: 24px; } .chapter-list li:active { background: var(--surface1); } .reader.webtoon .reader-page { max-width: 100%; } /* ---- list rows: hairline, flat ------------------------------------ */ .row-item { gap: 12px; padding: 12px; border-radius: var(--radius); min-height: 66px; background: transparent; border: 1px solid var(--hairline); } .row-item:active { transform: scale(0.99); background: var(--surface1); } .row-item .thumb { width: 44px; height: 62px; flex-basis: 44px; } .row-item .row-main .name { font-size: 14px; } .row-item .row-main .sub { font-size: 12.5px; } /* ---- settings: hairline-divided sections, calm --------------------- */ .settings-section { max-width: 100%; padding: 6px 0 18px; border-radius: 0; border-bottom: 1px solid var(--hairline); } .settings-section h2 { font-family: var(--font-display); font-size: 16px; font-weight: 600; } .setting-row { flex-wrap: wrap; gap: 12px; padding: 14px 0; } .setting-row .row-main .name { font-size: 15px; font-weight: 550; } .setting-row .row-main .sub { font-size: 12px; } .field input[type="text"], .field input[type="number"], .field input[type="password"], .field input[type="url"], .field input[type="search"], .field input:not([type]), .field select, input.field, select.field { height: 44px; } .swatch { width: 34px; height: 34px; } .swatch:hover { transform: scale(1.1); } .swatch.active { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); } .scheme-cards { gap: 10px; margin: 0 -2px; padding-left: 2px; padding-right: 2px; } .scheme-card-surface { width: 76px; height: 106px; } .switch { width: 48px; height: 28px; flex-basis: 48px; } .switch .slider::before { width: 22px; height: 22px; } .switch input:checked + .slider::before { transform: translateX(20px); } .seg button.active { box-shadow: none; } /* Route backgrounds: intentionally NONE — clean neutral base on every screen. The page title carries a calm, consistent display size. */ body[data-route="library"] .library-header, body[data-route="suggestions"] .suggest-section .section-header { margin: 0 0 18px; align-items: baseline; } body[data-route="library"] .page-title, body[data-route="suggestions"] .suggest-section .section-header h2, body[data-route="search"] .page-title { font-family: var(--font-display); font-size: 24px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; } body[data-route="library"] .library-sort-row { margin-bottom: 18px !important; } body[data-route="library"] .library-sort-row .seg { width: 100%; height: 44px; padding: 4px; border-radius: 10px; background: var(--surface1); border: 1px solid var(--border); } body[data-route="library"] .library-sort-row .seg button { flex: 1 1 0; border-radius: 7px; font-size: 14px; font-weight: 600; } body[data-route="library"] .library-filter-row { margin-bottom: 26px !important; gap: 8px; } body[data-route="library"] .library-filter-row .chip { min-height: 40px; padding: 0 14px; border-radius: 999px; background: transparent; border: 1px solid var(--hairline); color: var(--text-dim); font-size: 13.5px; font-weight: 550; } body[data-route="library"] .library-filter-row .chip.active { background: var(--accent); border-color: transparent; color: var(--on-accent); } body[data-route="library"] .empty, body[data-route="suggestions"] .empty { min-height: 44vh; padding: 42px 14px; } /* ---- modal -> bottom sheet (minimal) ------------------------------ */ .modal-backdrop { align-items: flex-end; padding: 0; } .modal { max-width: none; max-height: 90dvh; border-radius: 18px 18px 0 0; border-left: 0; border-right: 0; border-bottom: 0; } .modal::before { content: ""; width: 40px; height: 4px; border-radius: 999px; background: var(--border-strong); align-self: center; margin-top: 10px; } .modal-actions { flex-wrap: wrap; } .modal-actions .btn { flex: 1 1 auto; } /* ---- bottom tab bar: flat, full-width, hairline top, accent active - */ .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; min-height: calc(var(--mobile-tabbar-h) + env(safe-area-inset-bottom)); background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; border-top: 1px solid var(--hairline); border-radius: 0; box-shadow: none; padding: 6px 6px max(6px, env(safe-area-inset-bottom)); justify-content: space-around; } .tabbar a { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; min-height: 50px; justify-content: center; padding: 6px 2px; color: var(--text-faint); font-size: 10.5px; font-weight: 500; border: 0; border-radius: 0; background: transparent; transition: color 0.18s var(--ease); } .tabbar a .icon { width: 23px; height: 23px; transition: transform 0.18s var(--ease); } .tabbar a span:not(.icon) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tabbar a:active .icon { transform: scale(0.9); } .tabbar a:hover { color: var(--text-dim); } .tabbar a.active { color: var(--accent); background: transparent; border: 0; transform: none; box-shadow: none; } .tabbar a.active .icon { color: var(--accent); } } @media (max-width: 380px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; } .grid.dense { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; } body[data-route="suggestions"] .grid { gap: 18px 12px; } .view { padding-left: 16px; padding-right: 16px; } .topbar { padding-left: 14px; padding-right: 14px; } .tabbar a { font-size: 10px; } /* Tightest phones: Favourite also takes a full row so nothing is cramped. */ .details-actions .btn:not(.details-cta) { flex: 1 1 100%; } .details-actions-icons { width: 100%; justify-content: center; } } /* ---- search redesign ------------------------------------------------- */ .search-page-header { position: sticky; top: 0; z-index: 10; background: var(--bg); padding: 8px 0 16px; margin-top: -16px; /* offset view padding */ } .search-field-v2 { display: flex; align-items: center; gap: 12px; background: var(--surface-grad); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0 16px; height: 52px; transition: border-color 0.2s var(--ease); } .search-field-v2:focus-within { border-color: var(--accent); } .search-field-v2 input { flex: 1; border: none; background: transparent; outline: none; font-size: 16px; min-width: 0; } .search-field-v2 .btn { flex: 0 0 auto; border-radius: 999px; } .search-status { font-size: 13px; color: var(--text-faint); margin-bottom: 24px; display: flex; align-items: center; gap: 8px; min-height: 20px; } .medallion-sm { width: 24px; height: 24px; color: var(--accent); display: grid; place-items: center; font-weight: 800; font-size: 11px; } @media (max-width: 760px) { /* Clean neutral base — no route gradient. */ body[data-route="search"] .view { padding: 22px 20px calc(var(--mobile-tabbar-h) + 28px + env(safe-area-inset-bottom)); } body[data-route="search"] .page-title { font-family: var(--font-display); font-size: 24px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 16px !important; } body[data-route="search"] .search-page-header { position: static; padding: 0; margin: 0 0 18px; background: transparent; } body[data-route="search"] .search-field-v2 { height: 52px; padding: 0 8px 0 16px; border-radius: 12px; background: var(--surface1); border: 1px solid var(--border); box-shadow: none; } body[data-route="search"] .search-field-v2:focus-within { border-color: var(--accent); box-shadow: none; } body[data-route="search"] .search-field-v2 > .icon { width: 19px; height: 19px; color: var(--text-faint); } body[data-route="search"] .search-field-v2 input { font-size: 16px; font-weight: 500; } body[data-route="search"] .search-field-v2 input::placeholder { color: var(--text-faint); } body[data-route="search"] .search-field-v2 .btn { height: 40px; min-height: 40px; padding: 0 16px; font-size: 13px; font-weight: 600; } body[data-route="search"] .search-status { margin: 0 0 18px !important; } body[data-route="search"] .empty { min-height: 42vh; padding: 48px 18px; color: var(--text-dim); border-radius: var(--radius-lg); background: transparent; border: 1px solid var(--hairline); box-shadow: none; } body[data-route="search"] .empty .icon { width: 48px; height: 48px; opacity: 0.7; color: var(--text-faint); } body[data-route="search"] .empty p { max-width: 280px; font-size: 15px; line-height: 1.5; } body[data-route="search"] .search-source-card-minimal { margin-left: 0; margin-right: 0; border-radius: var(--radius-lg); padding: 16px; background: transparent; border: 1px solid var(--hairline); box-shadow: none; } body[data-route="search"] .search-source-card-minimal .card { background: transparent; box-shadow: none; } } /* ---- global search redesign ----------------------------------------- */ .search-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 80px 20px; color: var(--text-dim); } .search-hero .hero-icon { width: 80px; height: 80px; border-radius: 24px; background: var(--surface-grad); border: 1px solid var(--border); display: grid; place-items: center; margin-bottom: 24px; box-shadow: var(--shadow-sm); } .search-hero .hero-icon svg { width: 40px; height: 40px; color: var(--accent); } .search-hero h2 { font-size: 24px; color: var(--text); margin-bottom: 12px; font-weight: 700; } .search-hero p { max-width: 360px; margin: 0 auto 32px; font-size: 15px; line-height: 1.6; } .search-hints { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; } .hint-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--text-faint); } .search-source-card { background: var(--surface-grad); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 24px; box-shadow: var(--shadow-sm); } .search-result-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .source-meta { display: flex; align-items: center; gap: 12px; } .source-name { font-size: 15px; font-weight: 700; } .source-sub { font-size: 11px; color: var(--text-faint); } @media (max-width: 760px) { .search-hero { padding: 40px 14px; } .search-source-card { border-radius: 0; margin-left: -14px; margin-right: -14px; border-left: 0; border-right: 0; } } /* ---- search minimal dark --------------------------------------------- */ .search-source-card-minimal { background: color-mix(in srgb, var(--bg-elev) 40%, var(--pure-black)); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 24px; } /* ---- reader width control ------------------------------------------- */ .reader.webtoon .reader-page { width: 100%; max-width: var(--reader-width, 880px); } /* ---- cover download overlay ----------------------------------------- */ .details-summary .cover { position: relative; } .cover-download-btn { position: absolute; top: 12px; right: 12px; z-index: 5; width: 38px; height: 38px; border-radius: 10px; background: color-mix(in srgb, var(--bg-elev) 80%, transparent) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border-strong) !important; color: var(--text) !important; box-shadow: var(--shadow-sm); opacity: 0; transform: translateY(4px); transition: all 0.2s var(--ease); } .details-summary .cover:hover .cover-download-btn { opacity: 1; transform: translateY(0); } .cover-download-btn:hover { background: var(--accent) !important; color: var(--on-accent) !important; border-color: transparent !important; transform: scale(1.05) !important; } /* ---- downloads ------------------------------------------------------- */ .downloads-host { margin-top: 8px; } .downloads-host .progress { width: 100%; } .row-item .dl-meta { color: var(--text-dim); font-size: 12.5px; margin-top: 4px; } .row-item .dl-warn { color: var(--warn); font-size: 12.5px; margin-top: 4px; } .row-item .dl-err { color: var(--danger); font-size: 12.5px; margin-top: 4px; } .chip.status-cancelled { color: var(--text-faint); border-color: var(--border-strong); } /* chapter-row download button states */ .chapter-list li .icon-btn.dl-done, .chapter-list li .icon-btn.dl-done .icon { color: var(--ok); } .chapter-list li .icon-btn.dl-queued, .chapter-list li .icon-btn.dl-queued .icon { color: var(--accent); } /* download dialog */ .dl-dialog { display: flex; flex-direction: column; gap: 14px; min-width: min(440px, 78vw); } .dl-quick { display: flex; flex-wrap: wrap; gap: 8px; } .dl-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .dl-range-label { font-weight: 650; font-size: 13px; flex: 0 0 auto; } .dl-range .field { margin-bottom: 0; flex: 1 1 120px; min-width: 0; height: 38px; } .dl-range-sep { color: var(--text-faint); flex: 0 0 auto; } .dl-picklist { display: flex; flex-direction: column; gap: 2px; max-height: 42vh; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px; } .dl-pick { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; cursor: pointer; } .dl-pick:hover { background: var(--surface1); } .dl-pick input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); flex: 0 0 auto; cursor: pointer; } .dl-pick-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; } .dl-badge { flex: 0 0 auto; font-size: 11px; } .dl-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; border-top: 1px solid var(--border); } .dl-count { color: var(--text-dim); font-size: 13px; } .dl-footer .btn { flex: 0 0 auto; } /* ---- brand polish --------------------------------------------------- */ .logo-img { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; } .brand span { font-family: var(--font-display) !important; font-weight: 700 !important; letter-spacing: 0.04em !important; font-size: 16px; } /* ---- GIS account-chooser fallback modal ------------------------------- */ .gis-modal { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--overlay); backdrop-filter: blur(2px); } .gis-modal-card { background: var(--surface1); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; align-items: center; gap: 16px; box-shadow: var(--shadow); } .gis-modal-title { font-size: 15px; font-weight: 700; color: var(--text); } .gis-btn-slot { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; overflow: hidden; /* clip GIS's own container to a clean pill — no ragged white box */ } .gis-modal-cancel { background: transparent; border: none; color: var(--text-dim); font-size: 13px; cursor: pointer; padding: 4px 10px; } .gis-modal-cancel:hover { color: var(--text); } /* ====================================================================== */ /* Start screen — editorial night-rain landing (split hero + auth) */ /* ====================================================================== */ .wlc { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: safe center; grid-template-columns: minmax(0, 1fr); padding: clamp(22px, 4vw, 60px); /* Scroll the card when it's taller than the screen instead of clipping it, and keep the scroll contained so the page behind never moves (mobile fix). */ overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; color: var(--wlc-text); background: radial-gradient(150% 120% at 12% -10%, var(--wlc-sky-1) 0%, var(--wlc-sky-2) 44%, var(--wlc-sky-3) 100%); isolation: isolate; } /* While the welcome is up, lock the page behind it — no main-content flash, no scroll-through. Class is added/removed by screens/welcome.js. */ .wlc-open, .wlc-open body { overflow: hidden; } .wlc.is-leaving { animation: wlc-out 0.38s ease forwards; } @keyframes wlc-in { from { opacity: 0; } to { opacity: 1; } } @keyframes wlc-out { to { opacity: 0; transform: scale(1.015); } } /* ---- atmosphere ------------------------------------------------------- */ .wlc-sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; } .wlc-glow { position: absolute; border-radius: 50%; filter: blur(58px); will-change: transform; } .wlc-glow-1 { width: 56vmax; height: 56vmax; left: -18vmax; top: -22vmax; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%); opacity: 0.34; animation: wlc-drift-a 19s ease-in-out infinite alternate; } .wlc-glow-2 { width: 50vmax; height: 50vmax; right: -20vmax; bottom: -26vmax; background: radial-gradient(circle, var(--wlc-blue), transparent 70%); opacity: 0.26; animation: wlc-drift-b 24s ease-in-out infinite alternate; } @keyframes wlc-drift-a { to { transform: translate(5vmax, 4vmax) scale(1.1); } } @keyframes wlc-drift-b { to { transform: translate(-4vmax, -5vmax) scale(1.08); } } .wlc-mist { position: absolute; inset: -12%; background: radial-gradient(42% 30% at 20% 84%, var(--wlc-mist-1), transparent 60%), radial-gradient(46% 36% at 78% 68%, var(--wlc-mist-2), transparent 60%); animation: wlc-mist 28s ease-in-out infinite alternate; } @keyframes wlc-mist { to { transform: translate(3%, -2%); } } .wlc-horizon { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(to top, color-mix(in srgb, var(--accent) 13%, transparent), transparent 78%); mix-blend-mode: screen; opacity: 0.5; } .wlc-rain { position: absolute; inset: -28% -28%; transform: rotate(8deg); pointer-events: none; } .wlc-rain.is-back { opacity: 0.5; filter: blur(0.6px); transform: rotate(8deg) scale(1.12); } .wlc-drop { position: absolute; top: -22%; width: 1.3px; border-radius: 2px; background: linear-gradient(transparent, var(--wlc-drop)); animation-name: wlc-fall; animation-timing-function: linear; animation-iteration-count: infinite; will-change: transform; } @keyframes wlc-fall { from { transform: translateY(-22vh); } to { transform: translateY(140vh); } } .wlc-flash { position: absolute; inset: 0; background: radial-gradient(120% 90% at 30% 0%, var(--wlc-flash), transparent 60%); opacity: 0; mix-blend-mode: screen; animation: wlc-flash 13s ease-in-out infinite; } @keyframes wlc-flash { 0%,7%,13%,100% { opacity: 0; } 8% { opacity: 0.45; } 9% { opacity: 0.06; } 10% { opacity: 0.5; } 12% { opacity: 0; } } .wlc-vignette { position: absolute; inset: 0; background: radial-gradient(130% 100% at 35% 35%, transparent 46%, var(--wlc-vignette) 100%); } /* ---- split layout ----------------------------------------------------- */ .wlc-inner { position: relative; width: 100%; max-width: 1080px; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(44px, 6vw, 104px); align-items: center; } /* ---- left: editorial hero -------------------------------------------- */ .wlc-hero { text-align: left; min-width: 0; } .wlc-hero > * { animation: wlc-rise 0.8s ease both; } .wlc-hero > :nth-child(1) { animation-delay: 0.05s; } .wlc-hero > :nth-child(2) { animation-delay: 0.13s; } .wlc-hero > :nth-child(3) { animation-delay: 0.21s; } .wlc-hero > :nth-child(4) { animation-delay: 0.30s; } .wlc-hero > :nth-child(5) { animation-delay: 0.39s; } @keyframes wlc-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .wlc-brand { display: flex; width: fit-content; align-items: center; gap: 11px; margin-bottom: 18px; } .wlc-logo { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 60%, transparent); } .wlc-wordmark { font-weight: 700; letter-spacing: 0.3em; font-size: 13px; color: var(--wlc-wordmark); text-indent: 0.3em; } .wlc-eyebrow { display: flex; width: fit-content; flex-wrap: wrap; align-items: center; gap: 9px 9px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wlc-eyebrow); margin-bottom: 22px; } .wlc-eyebrow-jp { font-size: 13px; line-height: 1; color: var(--accent); letter-spacing: 0; padding: 3px 7px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 14%, transparent); } .wlc-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(46px, 6.4vw, 84px); line-height: 0.98; letter-spacing: -0.005em; margin: 0 0 24px; overflow-wrap: break-word; color: var(--wlc-title); text-shadow: 0 4px 40px var(--wlc-title-shadow); } .wlc-title em { font-style: italic; color: var(--accent); /* faint warm halo to lift the accent word out of the rain */ text-shadow: 0 0 38px color-mix(in srgb, var(--accent) 50%, transparent); } .wlc-sub { font-size: clamp(15px, 1.55vw, 17px); line-height: 1.62; color: var(--wlc-sub); max-width: 30em; margin: 0 0 26px; } .wlc-features { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; } .wlc-features li { position: relative; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--wlc-feature); padding-left: 18px; } .wlc-features li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 9px color-mix(in srgb, var(--accent) 80%, transparent); } /* ---- right: auth panel ------------------------------------------------ */ .wlc-auth { width: 100%; min-width: 0; /* Opaque card — no backdrop-filter. The frosted-glass blur re-sampled the animated rain behind it every frame, which made scrolling lag on desktop. */ background: linear-gradient(180deg, var(--wlc-card-top), var(--wlc-card-bottom)); border: 1px solid var(--wlc-card-border); border-radius: 20px; padding: 26px; box-shadow: var(--wlc-card-shadow), inset 0 1px 0 var(--wlc-card-inner); animation: wlc-rise 0.8s ease 0.32s both; } .wlc-auth-head { font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wlc-head); margin: 2px 0 18px; } .wlc-google { width: 100%; height: 54px; display: flex; align-items: center; justify-content: center; gap: 12px; border: none; border-radius: 13px; background: var(--wlc-google-bg); color: var(--wlc-google-text); font-size: 15.5px; font-weight: 600; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease; box-shadow: var(--wlc-google-shadow); } .wlc-google:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--wlc-google-shadow-hover), 0 0 0 4px var(--accent-tint-strong); } .wlc-google:active:not(:disabled) { transform: translateY(0); } .wlc-google:disabled { opacity: 0.6; cursor: default; } .wlc-google-g { display: inline-flex; } .wlc-google.is-busy { color: transparent; position: relative; } .wlc-google.is-busy .wlc-google-g { opacity: 0; } .wlc-google.is-busy::after { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--wlc-google-spin-track); border-top-color: var(--wlc-google-text); animation: wlc-spin 0.7s linear infinite; } @keyframes wlc-spin { to { transform: rotate(360deg); } } .wlc-or { display: flex; align-items: center; gap: 12px; margin: 20px 2px; color: var(--wlc-or); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; } .wlc-or::before, .wlc-or::after { content: ''; flex: 1; height: 1px; background: var(--wlc-card-border); } .wlc-secondary { display: flex; flex-direction: column; gap: 10px; } .wlc-ghost { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 0 16px; border: 1px solid var(--wlc-ghost-border); border-radius: 12px; background: var(--wlc-ghost-bg); color: var(--wlc-ghost-text); font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease; } .wlc-ghost:hover:not(:disabled) { background: var(--wlc-ghost-bg-hover); border-color: var(--wlc-ghost-border-hover); transform: translateY(-1px); } .wlc-ghost:disabled { opacity: 0.5; cursor: default; } .wlc-ghost-ic { display: inline-flex; opacity: 0.8; } .wlc-status { min-height: 16px; margin-top: 14px; font-size: 12.5px; text-align: center; color: var(--wlc-sub); } .wlc-status.is-error { color: var(--wlc-status-error); } .wlc-status.is-info { color: var(--wlc-status-info); } .wlc-foot { margin: 16px 0 0; font-size: 12px; line-height: 1.5; color: var(--wlc-foot); text-align: center; } /* ---- responsive ------------------------------------------------------- */ @media (max-width: 900px) { .wlc { align-items: flex-start; padding: max(18px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom)); } .wlc-inner { grid-template-columns: minmax(0, 1fr); max-width: 520px; min-height: 100%; align-content: center; gap: 22px; } .wlc-hero { text-align: left; } .wlc-brand { margin-bottom: 12px; } .wlc-eyebrow { margin-bottom: 14px; letter-spacing: 0.12em; } .wlc-title { margin-bottom: 16px; } .wlc-sub { max-width: none; margin-bottom: 18px; font-size: 15px; line-height: 1.52; } .wlc-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .wlc-features li { min-width: 0; padding: 9px 10px 9px 24px; border: 1px solid var(--wlc-feature-card-border); border-radius: 13px; background: var(--wlc-feature-card-bg); font-size: 11.5px; line-height: 1.25; } .wlc-features li::before { left: 10px; } .wlc-auth { padding: 22px; border-radius: 24px; } .wlc-google { height: 52px; border-radius: 16px; } .wlc-ghost { min-height: 46px; border-radius: 15px; } .wlc-auth { animation-delay: 0.42s; } /* Phones: also stop the big background animations entirely. */ .wlc-glow-1, .wlc-glow-2, .wlc-mist { animation: none; } .wlc-flash { display: none; } } @media (max-width: 460px) { .wlc { padding-left: 15px; padding-right: 15px; } .wlc-inner { gap: 18px; } .wlc-wordmark { letter-spacing: 0.22em; text-indent: 0.22em; } .wlc-eyebrow { gap: 7px; font-size: 10.5px; } .wlc-title { font-size: clamp(36px, 11vw, 48px); line-height: 1; } .wlc-sub { font-size: 14.5px; } .wlc-auth { padding: 18px; } .wlc-features { grid-template-columns: 1fr; } .wlc-features li { min-height: 36px; display: flex; align-items: center; } } @media (prefers-reduced-motion: reduce) { .wlc, .wlc.is-leaving, .wlc-hero > *, .wlc-auth, .wlc-glow, .wlc-mist, .wlc-drop, .wlc-flash { animation: none !important; } .wlc-rain { display: none; } .wlc-google { transition: none; } } /* Real multicolour Google logo (settings/welcome sign-in) — keep its own fills. */ .google-mark { width: 18px; height: 18px; } .google-mark svg { width: 18px; height: 18px; display: block; } .google-mark path { stroke: none; }