/* ============================================ sheets-light.css —— 底部抽屉族【浅色毛玻璃层】（index.html 专属） ============================================ Why this file exists -------------------- Every bottom sheet used to be a dark surface (1a1040 -> 0f0c29). The user asked to stop painting the app so heavy and picked the "light glass" direction, which the island shell already ships for two of the same panels (css/island/panels-light.css). This file is the index-side equivalent for the whole sheet family. Scope / loading --------------- Loaded LAST in index.html (after css/panels-dark.css) so it wins the cascade. Covered: the five bottom sheets, the account panel that rises beside them, and the book-title modal opened from inside the quiz drawer. Home, results page, FABs and the 3D island are untouched. Every panel in here shares one recipe: the same surface/edge/lift (§0a) and the same fixed-header + single-scroll-body structure (§0b). That structure is the fix for the white plate that used to sit under every drawer title — see the long note in §0b and _wrapSheetScroll() in js/app-core.js. Reverting to the old sticky-header look is NOT just a colour change: it needs the wrapper in app-core.js removed as well. NOT covered yet (deliberate, next pass): #chatDrawer — the chat surface has ~40 light-on-dark rules plus several colours baked into JS inline styles, so it gets its own pass instead of being half-flipped here. Reverting --------- Delete the in index.html (or this file). No other file needs editing — the same "colours live in their own layer" arrangement documented at the top of css/panels.css / css/panels-dark.css / css/island/panels-light.css. Dials ----- The three surface tokens below are what "how white / how glassy" means. Tune those before touching any individual component. ============================================ */ :root{ /* ── surfaces (the dials) ── */ --lt-surface: rgba(255,255,255,.88); /* sheet fill; lower = more see-through */ --lt-glass: blur(18px); /* frosted depth behind the fill */ --lt-shadow: 0 -10px 30px rgba(20,12,50,.22); /* soft lift, never black */ /* ── ink scale (copied from the island light layer so both entries agree) ── */ --lt-title: #16292b; /* headings, primary labels */ --lt-body: #22343a; /* body copy, card titles */ --lt-2: #55686b; /* secondary copy, meta */ --lt-3: #7a8a8d; /* tertiary, hints */ --lt-4: #8a9a9d; /* disabled / empty states */ /* ── fills & lines used *inside* a sheet (black-on-white, never white-on-white) ── */ --lt-chip: rgba(0,0,0,.05); /* inert chips, inputs, quiet cards */ --lt-chip-2: rgba(0,0,0,.09); /* pressed / hovered chip */ --lt-line: rgba(0,0,0,.08); /* hairlines & card borders */ --lt-handle: rgba(0,0,0,.14); /* the drag handle pill */ /* FALLBACK ONLY — not used in the normal path any more. It masks content sliding under a header that overlaps the scroll area, and it can only be invisible when the surface under it is opaque. Our surface is translucent, so .94 white on top of .88 white composites to ~.99 white and shows up as a white plate under the title. The normal path therefore keeps the header out of the scroll flow (see §0b) and needs no mask at all; this value only survives in case the .sheet-scroll wrapper ever fails to build. */ --lt-frost: linear-gradient(180deg,rgba(255,255,255,.94) 72%,rgba(255,255,255,0) 100%); } /* ================================================================ §0a The sheet family: one surface, one edge, one lift Every panel that rises from the bottom edge is in here, the account panel included — it is the same family, and leaving it out is what makes an app look half-converted. ================================================================ */ #scanDrawer,#chatEntryDrawer,#memories,#bgDrawer,#quests,#parentOverlay,#reportOverlay{ background:var(--lt-surface); -webkit-backdrop-filter:var(--lt-glass); backdrop-filter:var(--lt-glass); /* 1px glass highlight along the top edge; reads against the dark page, not against the sheet itself. */ border-top-color:rgba(255,255,255,.6); box-shadow:var(--lt-shadow); /* The page sets body{color:white}; every descendant that does not declare its own colour inherits from here, which is what makes the flip cheap. */ color:var(--lt-body); } /* ================================================================ §0b One fixed header + exactly one scroll body (all six panels) This replaces the old "whole sheet scrolls + sticky header + white frost mask". A mask only works when what sits behind it is opaque; on a translucent surface it stacks a second layer of white and turns into a visible plate under the title (reported 2026-09-21). Taking the header out of the scroll flow removes the need for a mask instead of re-tinting it — the same fix island already ships for #quests (.dp-scroll) and for #chatDrawer (#chatDrawerBody). The four drawers that scroll as a whole get their scroll body from _wrapSheetScroll() in js/app-core.js. #parentOverlay and #chatDrawer already have one (.parent-body / #chatDrawerBody), so they need no wrapper. ================================================================ */ /* Sheet becomes a column: header, then one flexible scroll area. */ #scanDrawer:has(> .sheet-scroll), #chatEntryDrawer:has(> .sheet-scroll), #memories:has(> .sheet-scroll), #bgDrawer:has(> .sheet-scroll), #quests:has(> .sheet-scroll), #reportOverlay:has(> .sheet-scroll){ display:flex !important; /* beats the structure layer's display:block !important */ flex-direction:column; /* Longhands on purpose: the structure layer declares overflow-y:auto, and comparing longhand-to-longhand makes this rule's win unambiguous (a bare `overflow` shorthand would also win, but only after expansion — and it reads as a conflict in any cascade dump). */ overflow-x:hidden; overflow-y:hidden; /* the scroll body scrolls, not the sheet */ padding-bottom:0; /* bottom gap moves into .sheet-scroll below */ } /* Header + drag handle: never squeezed when the content grows, and no longer sticky — nothing passes underneath them, so they need no background. */ #scanDrawer:has(> .sheet-scroll) > .scan-drawer-handle, #chatEntryDrawer:has(> .sheet-scroll) > .scan-drawer-handle, #memories:has(> .sheet-scroll) > .memories-handle, #bgDrawer:has(> .sheet-scroll) > .bg-drawer-handle, #quests:has(> .sheet-scroll) > .quest-overlay-handle, #scanDrawer:has(> .sheet-scroll) > .scan-drawer-topbar, #chatEntryDrawer:has(> .sheet-scroll) > .scan-drawer-topbar, #memories:has(> .sheet-scroll) > .memories-topbar, #bgDrawer:has(> .sheet-scroll) > .bg-drawer-topbar, #quests:has(> .sheet-scroll) > .quest-overlay-topbar, #reportOverlay:has(> .sheet-scroll) > .report-topbar{ flex:0 0 auto; position:static; z-index:auto; background:none; } /* The one scrolling element. padding-bottom keeps the trailing breathing room the sheet's own 100px bottom padding used to provide. */ .sheet-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding-bottom:100px; } /* Account panel: already had a body element, so it needs no wrapper — just the same contract. */ #parentOverlay{ display:flex !important; flex-direction:column; overflow-x:hidden; overflow-y:hidden; } #parentOverlay .parent-topbar{ flex:0 0 auto; position:static; z-index:auto; background:none; } #parentOverlay .parent-body{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } /* FALLBACK — only reachable if the .sheet-scroll wrapper was never built, in which case the sheet keeps its original "whole sheet scrolls" behaviour and the sticky header does need a mask. Preferable to a sticky header with no background at all, which would let content run straight through the title. */ .scan-drawer-topbar, .memories-topbar, .bg-drawer-topbar, .quest-overlay-topbar{ background:var(--lt-frost); } /* ================================================================ §0c Header contents (identical in every panel) ================================================================ */ .scan-drawer-handle, .memories-handle, .bg-drawer-handle, .quest-overlay-handle{ background:var(--lt-handle); } .scan-drawer-title, .memories-title, .bg-drawer-title, .quest-overlay-title{ color:var(--lt-title); } .scan-drawer-close, .memories-close-btn, .bg-drawer-close, .quest-close-btn{ background:var(--lt-chip); color:var(--lt-2); } .scan-drawer-close:active, .memories-close-btn:active, .quest-close-btn:active{ background:var(--lt-chip-2); } .scan-section-label, .bg-section-label{ color:var(--lt-3); } /* ================================================================ §1 Quiz drawer + chat-entry drawer (shared method-card components) ================================================================ */ #scanDrawer .method-card, #chatEntryDrawer .method-card{ background:rgba(255,255,255,.72); border-color:rgba(168,85,247,.22); } #scanDrawer .method-card::before, #chatEntryDrawer .method-card::before{ background:linear-gradient(135deg,rgba(168,85,247,.10),transparent); } #scanDrawer .method-card:hover, #chatEntryDrawer .method-card:hover{ border-color:#a855f7; box-shadow:0 8px 22px rgba(124,58,237,.18); } #scanDrawer .method-card-primary, #chatEntryDrawer .method-card-primary{ background:rgba(34,211,238,.10); border-color:rgba(34,211,238,.45); } #scanDrawer .method-card-primary::after, #chatEntryDrawer .method-card-primary::after{ color:#0e7490; background:rgba(34,211,238,.16); border-color:rgba(34,211,238,.3); } .method-title{ color:var(--lt-title); } .method-sub{ color:var(--lt-3); } .scan-sprite-hint{ background:rgba(34,211,238,.10); border-color:rgba(34,211,238,.28); color:var(--lt-body); } .manual-expand{ background:var(--lt-chip); border-color:rgba(34,211,238,.35); } .manual-book-input{ background:#fff; border-color:rgba(34,211,238,.35); color:var(--lt-title); } .manual-book-input::placeholder{ color:var(--lt-4); } /* ================================================================ §2 Memories drawer ================================================================ */ .memory-card-v2{ /* was a color-mix() of the book's theme colour into near-black */ background:rgba(255,255,255,.75); border-color:var(--lt-line); } .mem-item-area, .mem-item-loading{ background:#fff; } .mem-title{ color:var(--lt-title); } .mem-quote{ color:var(--lt-2); } .mem-footer{ border-top-color:var(--lt-line); } .mem-date{ color:var(--lt-4); } .memories-empty-title{ color:var(--lt-2); } .memories-empty-sub{ color:var(--lt-4); } /* ================================================================ §3 Background-image drawer ================================================================ */ .bg-gen-btn{ box-shadow:0 6px 18px rgba(124,58,237,.28); } .artwork-style-btn{ background:var(--lt-chip); color:var(--lt-2); border-color:var(--lt-line); } .artwork-style-btn:hover{ background:var(--lt-chip-2); } .bg-cooldown-info{ color:var(--lt-3); } .bg-empty{ color:var(--lt-4); } .bg-card{ background:#f2efeb; /* placeholder behind the image */ border-color:var(--lt-line); } /* .bg-card-actions / .bg-action-btn keep their dark scrim: they sit on top of photos, where a dark gradient is what makes the icons readable. */ /* ================================================================ §4 Daily-record drawer (values mirrored from the island light layer) ================================================================ */ #quests .dp-nav-btn{ background:var(--lt-chip); color:var(--lt-2); } #quests .dp-month-label{ color:var(--lt-title); } #quests .dp-cell{ background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.07); } #quests .dp-cell-num{ color:var(--lt-3); } #quests .dp-cell.lv1{ background:rgba(34,197,94,.18); border-color:rgba(34,197,94,.45); } #quests .dp-cell.lv2{ background:rgba(34,197,94,.32); border-color:rgba(34,197,94,.6); } #quests .dp-cell.lv3{ background:rgba(16,185,129,.45); border-color:rgba(16,185,129,.8); } #quests .dp-cell.lv1 .dp-cell-num, #quests .dp-cell.lv2 .dp-cell-num, #quests .dp-cell.lv3 .dp-cell-num{ color:#14532d; } #quests .dp-cell.is-today{ border-color:rgba(180,83,9,.75); } #quests .dp-cell.is-today .dp-cell-num{ color:#b45309; } #quests .dp-summary{ background:var(--lt-chip); } #quests .dp-summary-label{ color:var(--lt-2); } #quests .dp-total{ color:#b45309; } #quests .dp-hint{ color:var(--lt-4); } #quests .dp-books-label{ color:var(--lt-2); } #quests .dp-book-card{ background:rgba(0,0,0,.04); } #quests .dp-book-detail{ border-top-color:rgba(0,0,0,.07); } #quests .dp-book-title{ color:var(--lt-title); } #quests .dp-book-meta{ color:var(--lt-3); } #quests .dp-chevron{ color:var(--lt-4); } #quests .dp-ai-comment{ background:rgba(139,92,246,.12); color:#4b3f72; } #quests .dp-empty{ color:var(--lt-4); } #quests .dp-qa-q{ color:var(--lt-body); } #quests .dp-qa-a{ color:var(--lt-2); } #quests .text-caption{ color:var(--lt-3); } #quests .text-caption-line{ color:var(--lt-3); } /* ================================================================ §5 Book-title modal (opened from inside the quiz drawer) ================================================================ */ .chat-book-sheet{ background:var(--lt-surface); -webkit-backdrop-filter:var(--lt-glass); backdrop-filter:var(--lt-glass); border-top-color:rgba(255,255,255,.6); } .chat-book-title{ color:var(--lt-title); } .chat-book-sub{ color:var(--lt-3); } .chat-book-input{ background:var(--lt-chip); border-color:var(--lt-line); color:var(--lt-title); } .chat-book-input::placeholder{ color:var(--lt-4); } .chat-book-cancel{ color:var(--lt-3); } /* .chat-book-go keeps its purple->gold gradient with white text. */ /* ================================================================ §6 Account panel (#parentOverlay) — contents only Same family as the sheets (it rises from the bottom edge), so its surface and its fixed-header/scroll-body contract are declared once in §0a/§0b together with everyone else's. Everything below is the ink inside it, taken from the island entry's production values (css/island/panels-light.css §A) — same DOM, same classes, re-scoped so it only ever applies inside this panel. ================================================================ */ #parentOverlay .parent-title{ color:var(--lt-title); } #parentOverlay .parent-close-btn{ background:var(--lt-chip); color:var(--lt-2); } #parentOverlay .parent-close-btn:active{ background:var(--lt-chip-2); } #parentOverlay .parent-acct-id{ color:#7c3aed; } #parentOverlay .parent-pwd{ color:#33484b; } #parentOverlay .parent-mini-btn{ background:var(--lt-chip); color:var(--lt-2); } #parentOverlay .parent-divider{ border-top-color:rgba(0,0,0,.08); } #parentOverlay .parent-divider-lg{ border-top-color:rgba(0,0,0,.06); } #parentOverlay .parent-link{ color:#6d28d9; } #parentOverlay .parent-err{ color:#dc2626; } #parentOverlay .parent-sec-label, #parentOverlay .parent-field-label{ color:var(--lt-3); } #parentOverlay .parent-sec-title{ color:#33484b; } #parentOverlay .parent-row-label{ color:var(--lt-body); } #parentOverlay .parent-row-desc, #parentOverlay .parent-desc, #parentOverlay .parent-note{ color:var(--lt-3); } #parentOverlay .parent-select{ border-color:rgba(0,0,0,.12); background:rgba(0,0,0,.04); color:var(--lt-title); } #parentOverlay .parent-switch{ background:rgba(0,0,0,.15); } #parentOverlay .parent-switch.on{ background:linear-gradient(135deg,#7c3aed,#a855f7); } #parentOverlay .parent-knob{ background:#fff; } #parentOverlay .parent-btn-primary, #parentOverlay .parent-btn-sm{ background:linear-gradient(135deg,#7c3aed,#a855f7); color:#fff; } #parentOverlay .parent-btn-ghost{ background:rgba(168,85,247,.12); border-color:rgba(168,85,247,.3); color:#7c3aed; } #parentOverlay .parent-btn-danger{ background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.25); color:#dc2626; } /* ── VIP card ── */ #parentOverlay .vip-card{ background:linear-gradient(135deg,rgba(124,58,237,.10),rgba(34,211,238,.08)); border-color:rgba(168,85,247,.22); } #parentOverlay .vip-card.is-vip{ background:linear-gradient(135deg,rgba(251,191,36,.16),rgba(168,85,247,.10)); border-color:rgba(251,191,36,.38); } #parentOverlay .vip-card-title{ color:#b45309; } #parentOverlay .vip-days{ color:#047857; } #parentOverlay .vip-days.warn{ color:#c2410c; } #parentOverlay .vip-upgrade-title{ color:#7c3aed; } #parentOverlay .vip-upgrade-sub, #parentOverlay .vip-list-title, #parentOverlay .vip-type{ color:var(--lt-3); } #parentOverlay .vip-icon-btn{ background:var(--lt-chip); color:var(--lt-2); } #parentOverlay .vip-cta-btn{ background:linear-gradient(135deg,#7c3aed,#a855f7); color:#fff; } #parentOverlay .vip-cta-btn.gold{ background:linear-gradient(135deg,#f59e0b,#fbbf24); color:#3b2500; } #parentOverlay .vip-msg.err{ color:#dc2626; } #parentOverlay .vip-msg.ok{ color:#047857; } #parentOverlay .vip-feat{ color:var(--lt-2); } #parentOverlay .vip-row{ border-bottom-color:rgba(0,0,0,.06); } #parentOverlay .vip-code{ color:var(--lt-2); } #parentOverlay .vip-status{ color:#047857; } #parentOverlay .vip-status.queued{ color:#1d4ed8; } #parentOverlay .vip-status.expired{ color:var(--lt-4); } /* ── Account-binding rows ── */ #parentOverlay .bind-row{ background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.07); } #parentOverlay .bind-row.unbound{ background:rgba(0,0,0,.02); border-color:rgba(0,0,0,.05); } #parentOverlay .bind-icon.wechat{ color:#059669; } #parentOverlay .bind-icon.google{ color:#2563eb; } #parentOverlay .bind-icon.email{ color:#6d28d9; } #parentOverlay .bind-row.unbound .bind-icon{ color:rgba(0,0,0,.25); } #parentOverlay .bind-name{ color:var(--lt-body); } #parentOverlay .bind-row.unbound .bind-name{ color:var(--lt-4); } #parentOverlay .bind-mark{ color:#16a34a; } #parentOverlay .bind-row.unbound .bind-mark{ color:rgba(0,0,0,.15); } #parentOverlay .bind-btn{ background:var(--lt-chip); border-color:rgba(0,0,0,.1); } #parentOverlay .bind-btn.wechat{ color:#059669; } #parentOverlay .bind-btn.google{ color:#2563eb; } #parentOverlay .bind-btn.email{ color:#6d28d9; } #parentOverlay .bind-btn.danger{ background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.25); color:#dc2626; } /* ── Product utility classes used inside the panel ── index DOES load utilities.css/components.css, so only the *colours* differ there (island had to duplicate the structure too — see its file header). */ #parentOverlay .card-purple-sm{ background:rgba(255,255,255,.62); border-color:rgba(255,255,255,.75); } #parentOverlay .card-section-title{ color:#33484b; } #parentOverlay .text-white{ color:var(--lt-title); } #parentOverlay .text-muted, #parentOverlay .text-very-dim{ color:var(--lt-3); } #parentOverlay .text-caption-line{ color:var(--lt-3); } /* ================================================================ §7 Growth report sheet (#reportOverlay) It shares §0a's surface and §0b's fixed-header/scroll-body contract, so only the chrome no other sheet has is listed here. Its structure AND its dark fallback colours live in css/core.css next to the rest of the drawer family — deleting this file reverts the report sheet to dark along with everything else. Why this needed a JS change too: the list rows and the detail card used to be built with `style="..."` strings in loadReports()/showReportDetail(). Inline styles outrank any stylesheet, so the sheet could not be flipped from CSS alone — leaving it dark here would have been the only option otherwise. ================================================================ */ #reportOverlay .report-title{ color:var(--lt-title); } #reportOverlay .report-close{ background:var(--lt-chip); color:var(--lt-2); } #reportOverlay .report-close:active{ background:var(--lt-chip-2); } /* The selected tab keeps the brand violet gradient + white text; only the unselected state needed flipping (it was white-on-dark). */ #reportOverlay .report-tab{ background:var(--lt-chip); color:var(--lt-2); } #reportOverlay .report-tab.is-active{ background:linear-gradient(135deg,#7c3aed,#a855f7); color:#fff; } #reportOverlay .report-item{ background:rgba(0,0,0,.04); } #reportOverlay .report-item:active{ background:rgba(0,0,0,.08); } #reportOverlay .report-item-title{ color:var(--lt-title); } #reportOverlay .report-item-meta{ color:var(--lt-3); } #reportOverlay .report-item-open{ color:#7c3aed; } #reportOverlay .report-detail{ background:rgba(0,0,0,.04); } #reportOverlay .report-detail-date{ color:#7c3aed; } #reportOverlay .report-detail-body{ color:var(--lt-body); } #reportOverlay .report-back{ background:var(--lt-chip); color:var(--lt-2); } #reportOverlay .report-state{ color:var(--lt-3); }