/* ───────────────────────────────────────────────────────────── Scarlett · Glass Layer Activated by adding `class="glass-app"` to . Reads four custom properties (set by glass.js from localStorage): --app-bg-image background image (url(...)) --glass-blur backdrop blur radius --card-opacity white-card opacity --overlay-opacity fixed scrim over the bg image ───────────────────────────────────────────────────────────── */ :root { /* User-controlled — overridden by glass.js */ --glass-blur: 22px; --card-opacity: 0.42; --overlay-opacity: 0.10; --app-bg-image: none; /* Pink-unified aurora — every accent the app exposes shares the same hue family (rose/mauve/peach) so the UI reads as a single color story. Saturated colors only show up in data viz. */ --aurora-mint: #F5C7D5; /* soft petal pink */ --aurora-pink: #E58FAE; /* the signature rose */ --aurora-cream: #FCEFCA; /* warm cream highlight */ --aurora-ink: #1F2530; --aurora-gradient: linear-gradient(135deg, #F5C7D5 0%, #E58FAE 55%, #FCEFCA 100%); /* Accent for small indicator dots / focus rings — readable rose */ --aurora-accent: #C9709A; } /* ── Page-level background ─────────────────────────────────── */ /* The user's bg + scrim + tri-aurora are stacked in a fixed div placed as the FIRST child of via glass.js. This avoids body bg propagation and bg-attachment compositing bugs that hid content in some layouts. */ .glass-bg-layer { position: fixed !important; inset: 0 !important; z-index: -1 !important; pointer-events: none; background-color: #2a2b35; /* 兜底层(最底):base.css 同款暖白晨雾,2026-07-13 替换掉三月的老粉渐变 (--aurora-gradient 只保留给小部件用,不再当页面底色)。 */ background-image: linear-gradient(180deg, rgba(0,0,0, calc(var(--overlay-opacity) * 0.5)) 0%, rgba(0,0,0, var(--overlay-opacity)) 100%), var(--app-bg-image), radial-gradient(110% 75% at 20% 0%, rgba(255,192,214,0.44), transparent 55%), radial-gradient(100% 70% at 100% 10%, hsl(338 45% 62% / 0.38), transparent 58%), linear-gradient(135deg, #f8f3f6, #f7eef4 45%, #f7e9ef); background-size: 100% 100%, cover, cover, cover, cover; background-position: center, center, center, center, center; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; } body.glass-app { background: transparent; color: var(--aurora-ink); min-height: 100dvh; /* Override theme.css accents inside the glass layer so every formerly-purple (#6B5BFF) or hot-pink (#FF8DB6) or green leak resolves to the unified rose family. Focus rings, link colors, "active" indicators, and chat-input focus all pull from this. */ --accent: #C9709A; --accent-hover: #B05F86; --accent-soft: rgba(201,112,154,0.18); --accent-ink: #fff; --rose: #E58FAE; --teal: #F5C7D5; } /* ─────────────────────────────────────────────────────────── GLASS CARD PRIMITIVES The "standard" tier — everything else scales relative to it. ─────────────────────────────────────────────────────────── */ /* Base glass — applies to most surfaced containers */ body.glass-app .calendar, body.glass-app #sidebar, body.glass-app #chat-header, body.glass-app .input-wrap { background: rgba(255,255,255, var(--card-opacity)); backdrop-filter: blur(var(--glass-blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%); border: none; box-shadow: 0 1px 2px rgba(20,18,40,0.08), 0 8px 24px rgba(20,18,40,0.10); } /* Layer 1 · HERO — thickest, brightest, biggest lift */ body.glass-app .hero, body.glass-app .login-card { background: linear-gradient(180deg, rgba(255,255,255, calc(var(--card-opacity) * 1.5 + 0.05)) 0%, rgba(255,255,255, calc(var(--card-opacity) * 1.15)) 40%, rgba(255,255,255, calc(var(--card-opacity) * 1.05)) 100%); backdrop-filter: blur(var(--glass-blur)) saturate(170%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(170%); border: none; box-shadow: 0 1px 2px rgba(20,18,40,0.10), 0 18px 40px rgba(20,18,40,0.16), inset 0 1px 0 rgba(255,255,255,0.85); } body.glass-app .hero::before, body.glass-app .login-card::before { display: none !important; } body.glass-app .hero::after, body.glass-app .login-card::after { display: none !important; } /* Layer 3 · QUOTE — most ethereal, almost floating */ body.glass-app .quote-card { background: rgba(255,255,255, calc(var(--card-opacity) * 0.6)); backdrop-filter: blur(calc(var(--glass-blur) * 1.25)) saturate(180%); -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 1.25)) saturate(180%); border: none; box-shadow: 0 2px 8px rgba(20,18,40,0.05); } /* Layer 4 · Inline textareas / style cards in settings — flatter */ body.glass-app textarea { background: rgba(255,255,255, calc(var(--card-opacity) * 0.7)); backdrop-filter: blur(calc(var(--glass-blur) * 0.6)) saturate(140%); -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.6)) saturate(140%); border: 1px solid rgba(255,255,255,0.40); color: var(--aurora-ink); } body.glass-app textarea:focus { border-color: rgba(255,255,255,0.85); background: rgba(255,255,255, calc(var(--card-opacity) * 1.1)); box-shadow: 0 0 0 3px rgba(255,255,255,0.15); } /* ── App header / sidebar — pinned chrome ───────────────────── */ body.glass-app #chat-header { border-bottom: 1px solid rgba(255,255,255,0.25); border-radius: 0; /* override the original opaque tinted bg */ background: rgba(255,255,255, calc(var(--card-opacity) * 0.9)) !important; } body.glass-app #sidebar { border-right: 1px solid rgba(255,255,255,0.20); border-radius: 0; } body.glass-app #main { background: transparent !important; } body.glass-app #input-area { background: linear-gradient(to top, rgba(0,0,0,0.20) 30%, rgba(0,0,0,0) 100%) !important; } /* ── Page typography on glass (slightly stronger ink) ──────── */ body.glass-app, body.glass-app .intro h1, body.glass-app .days-number, body.glass-app .login-title { color: var(--aurora-ink); } body.glass-app .hero-label, body.glass-app .days-unit, body.glass-app .days-foot, body.glass-app .intro .sub, body.glass-app .mono-meta, body.glass-app .login-sub, body.glass-app .footer, body.glass-app .footer-note, body.glass-app .header-status, body.glass-app h2 { color: rgba(31,37,48,0.70) !important; } body.glass-app .quote-text { color: rgba(31,37,48,0.80) !important; } body.glass-app .quote-mark { color: var(--aurora-pink) !important; } /* Pills / status dots — colored over white glass */ body.glass-app .pill { background: rgba(255,255,255,0.65) !important; border-color: rgba(255,255,255,0.85) !important; color: rgba(31,37,48,0.75) !important; } body.glass-app .pill .dot { background: var(--aurora-pink); box-shadow: 0 0 0 3px rgba(229,143,174,0.25); } /* Days progress bar */ body.glass-app .days-progress { background: rgba(31,37,48,0.12); } body.glass-app .days-progress span { background: var(--aurora-gradient) !important; } /* Hero icon / chat ai-mark — keep colored against white */ body.glass-app .ai-mark { background: var(--aurora-gradient) !important; } /* ── Chat — sidebar / header / input glass, BUBBLES SOLID ───── */ body.glass-app .chat-item:hover { background: rgba(255,255,255,0.30); } body.glass-app .chat-item.active { background: rgba(255,255,255,0.55); box-shadow: 0 1px 2px rgba(20,18,40,0.06); } body.glass-app .chat-item.active::before { background: var(--aurora-pink); } body.glass-app .chat-item { color: rgba(31,37,48,0.7); } body.glass-app .chat-item.active, body.glass-app .chat-item:hover { color: var(--aurora-ink); } body.glass-app .chat-item-date, body.glass-app .chat-item-btn { color: rgba(31,37,48,0.5); } body.glass-app #sidebar-nav { background: rgba(255,255,255,0.30); border: 1px solid rgba(255,255,255,0.40); } body.glass-app #sidebar-nav a { color: rgba(31,37,48,0.65); } body.glass-app #sidebar-nav a:hover { background: rgba(255,255,255,0.50); color: var(--aurora-ink); } body.glass-app #new-chat-btn { background: rgba(255,255,255,0.55); border-color: rgba(255,255,255,0.70); color: var(--aurora-ink); } body.glass-app #new-chat-btn:hover { background: rgba(255,255,255,0.75); } /* Message bubbles — user is a softened dark glass (translucent ink with white text). Lighter than the original near-black bubble, picks up tones from whatever background sits behind, but stays unambiguously "the user side" of the thread. Assistant stays bright glass. */ body.glass-app .message.user { background: rgba(31,37,48,0.55) !important; color: #fff !important; border: none !important; /* 液态玻璃边缘高光 · 2026-07-01：多层 inset（顶沿/描边/底返/侧流），纯 CSS 不升合成层，WebKit OK */ box-shadow: 0 1px 2px rgba(20,18,40,0.12), 0 10px 28px rgba(20,18,40,0.20), inset 0 1px 1px rgba(255,255,255,0.35), inset 0 -10px 16px -12px rgba(255,255,255,0.22), inset 6px 0 12px -10px rgba(255,255,255,0.14), inset -6px 0 12px -10px rgba(255,255,255,0.14) !important; /* ② 低blur玻璃：小 blur + 高饱和提亮 = 通透玻璃感（非磨砂），WebKit 也认 */ backdrop-filter: blur(calc(var(--glass-blur) * 0.2)) saturate(165%) brightness(1.03); -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.2)) saturate(165%) brightness(1.03); } /* nuke the inherited purple+rose radial overlay from chat.html */ body.glass-app .message.user::before { display: none !important; } body.glass-app .message.user .msg-time { color: rgba(255,255,255,0.55) !important; } body.glass-app .message.user .text-content strong { color: #fff !important; } body.glass-app .message.user .text-content em { color: rgba(255,255,255,0.80) !important; } body.glass-app .message.user .text-content code { background: rgba(255,255,255,0.18) !important; color: #fff !important; } body.glass-app .message.user .text-content pre { background: rgba(0,0,0,0.28) !important; color: #fff !important; } body.glass-app .message.user .text-content a { color: #fff !important; text-decoration-color: rgba(255,255,255,0.55) !important; } body.glass-app .message.user .text-content blockquote { border-left-color: rgba(255,255,255,0.40) !important; color: rgba(255,255,255,0.80) !important; } body.glass-app .message.user .msg-action-btn { border-color: rgba(255,255,255,0.22) !important; color: rgba(255,255,255,0.65) !important; } body.glass-app .message.user .msg-action-btn:hover { border-color: #fff !important; color: #fff !important; } body.glass-app .message.assistant { background: rgba(255,255,255, calc(var(--card-opacity) + 0.22)) !important; /* ② 低blur玻璃：小 blur + 高饱和提亮对比 = 通透玻璃感（非磨砂），WebKit 也认 */ backdrop-filter: blur(calc(var(--glass-blur) * 0.16)) saturate(185%) brightness(1.08) contrast(1.04); -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.16)) saturate(185%) brightness(1.08) contrast(1.04); color: var(--aurora-ink) !important; border: none !important; /* 液态玻璃边缘高光 · 2026-07-01：多层 inset（顶沿/描边/底返/侧流），纯 CSS 不升合成层，WebKit OK */ box-shadow: 0 1px 2px rgba(20,18,40,0.05), 0 10px 30px rgba(20,18,40,0.10), inset 0 1px 1px rgba(255,255,255,0.95), inset 0 -10px 18px -12px rgba(255,255,255,0.60), inset 6px 0 12px -10px rgba(255,255,255,0.40), inset -6px 0 12px -10px rgba(255,255,255,0.40) !important; } body.glass-app .input-wrap { border: none !important; } body.glass-app .input-wrap:focus-within { box-shadow: 0 1px 2px rgba(20,18,40,0.08), 0 8px 24px rgba(20,18,40,0.14); } body.glass-app #input { color: var(--aurora-ink); } body.glass-app #input::placeholder { color: rgba(31,37,48,0.45); } body.glass-app .tool-btn { color: rgba(31,37,48,0.65); } body.glass-app .tool-btn:hover { background: rgba(255,255,255,0.45); color: var(--aurora-ink); } body.glass-app #model-select, body.glass-app #style-select { color: rgba(31,37,48,0.65); border-color: rgba(255,255,255,0.55); background-color: rgba(255,255,255,0.30); } /* Send button — clean aurora-ink, no purple/pink radial */ body.glass-app #send { background: var(--aurora-ink); box-shadow: 0 6px 16px rgba(31,37,48,0.30); } body.glass-app #send::before { display: none !important; } body.glass-app #send:disabled { background: rgba(255,255,255,0.45) !important; color: rgba(31,37,48,0.40) !important; box-shadow: none !important; } /* ── Login ─────────────────────────────────────────────────── */ body.glass-app .brand-mark { background: var(--aurora-gradient) !important; } body.glass-app .login-card input { background: rgba(255,255,255, 0.55) !important; border-color: rgba(255,255,255, 0.70) !important; color: var(--aurora-ink); } body.glass-app .login-card input:focus { border-color: rgba(255,255,255, 0.95) !important; box-shadow: 0 0 0 3px rgba(255,255,255,0.30) !important; } body.glass-app .login-card button { background: var(--aurora-ink); } /* ── Settings — admin context ──────────────────────────────── */ body.glass-app .container .btn { border-color: var(--aurora-ink); background: var(--aurora-ink); } body.glass-app h2::after { background: rgba(31,37,48,0.20); } .glass-slider { background: rgba(255,255,255,0.40); backdrop-filter: blur(var(--glass-blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%); border-radius: var(--r-md); padding: 14px 16px 16px; box-shadow: none; } .glass-slider-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .glass-slider-label { font-size: 13.5px; font-weight: 500; color: var(--aurora-ink); display: flex; flex-direction: column; gap: 2px; } .glass-slider-label code { font-family: var(--font-mono); font-size: 10.5px; color: rgba(31,37,48,0.50); letter-spacing: 0.04em; font-weight: 400; } .glass-slider-value { font-family: var(--font-mono); font-size: 13px; color: var(--aurora-ink); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; padding: 3px 10px; background: rgba(255,255,255,0.55); border-radius: 999px; } .glass-slider input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; background: rgba(31,37,48,0.18); border-radius: 999px; outline: none; } .glass-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--aurora-ink); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.25); } .glass-slider input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--aurora-ink); cursor: pointer; border: 0; box-shadow: 0 2px 6px rgba(0,0,0,0.25); } /* small screens — fonts compress slightly */ @media (max-width: 480px) { .glass-slider { padding: 12px 14px 14px; } }