/* * Host Runtime shared visual tokens. The filename and shell-* selectors are * frozen host contracts; they do not restore the retired application Shell or * the deleted /app|/play|/dash|/flow|/chat|/page routes. */ /* Selector contract (host sets attrs on ; T-04 SpecHostRuntime): - Mode: [data-theme=light|dark|system] or .theme-light / .theme-dark - Pack: [data-theme-pack=default|ocean|forest|sunset|contrast] - system → prefers-color-scheme; no attr / default pack = legacy dark tech */ :root { /* RuntimeContext v2 theme token namespace (theme_tokens_version=1) */ --ink: #e8eef2; --muted: rgba(232, 238, 242, 0.72); --bg: #0b1220; --panel: #121a2a; --card: rgba(18, 26, 42, 0.88); --line: rgba(255, 255, 255, 0.1); --accent: #2563eb; --primary: var(--accent); --ok: #7dffa3; --warn: #fbbf24; --err: #ff8f7a; --radius: 16px; --font: "DM Sans", "Noto Sans SC", system-ui, sans-serif; --touch: 44px; } /* --- Mode: light --- */ html[data-theme="light"], html.theme-light { --ink: #0f172a; --muted: rgba(15, 23, 42, 0.62); --bg: #f1f5f9; --panel: #ffffff; --card: rgba(255, 255, 255, 0.94); --line: rgba(15, 23, 42, 0.12); --accent: #2563eb; --primary: var(--accent); --ok: #15803d; --warn: #b45309; --err: #b91c1c; } /* --- Mode: dark (explicit; same tokens as :root default) --- */ html[data-theme="dark"], html.theme-dark { --ink: #e8eef2; --muted: rgba(232, 238, 242, 0.72); --bg: #0b1220; --panel: #121a2a; --card: rgba(18, 26, 42, 0.88); --line: rgba(255, 255, 255, 0.1); --accent: #2563eb; --primary: var(--accent); --ok: #7dffa3; --warn: #fbbf24; --err: #ff8f7a; } /* --- Mode: system → OS preference --- */ @media (prefers-color-scheme: light) { html[data-theme="system"] { --ink: #0f172a; --muted: rgba(15, 23, 42, 0.62); --bg: #f1f5f9; --panel: #ffffff; --card: rgba(255, 255, 255, 0.94); --line: rgba(15, 23, 42, 0.12); --accent: #2563eb; --primary: var(--accent); --ok: #15803d; --warn: #b45309; --err: #b91c1c; } } /* --- Packs: accent/primary + surface tint (compose with mode) --- */ html[data-theme-pack="ocean"] { --accent: #0e7490; --primary: var(--accent); --bg: #07141a; --panel: #0e1f28; --card: rgba(14, 31, 40, 0.9); } html[data-theme-pack="forest"] { --accent: #15803d; --primary: var(--accent); --bg: #0a1410; --panel: #122018; --card: rgba(18, 32, 24, 0.9); } html[data-theme-pack="sunset"] { --accent: #c2410c; --primary: var(--accent); --bg: #140e0a; --panel: #221610; --card: rgba(34, 22, 16, 0.9); } html[data-theme-pack="contrast"] { --accent: #ffcc00; --primary: var(--accent); --ink: #ffffff; --muted: rgba(255, 255, 255, 0.88); --bg: #000000; --panel: #0a0a0a; --card: #111111; --line: rgba(255, 255, 255, 0.5); --ok: #00e676; --warn: #ffd600; --err: #ff5252; } /* Pack surfaces under light / system-light */ html[data-theme="light"][data-theme-pack="ocean"], html.theme-light[data-theme-pack="ocean"] { --accent: #0f766e; --primary: var(--accent); --bg: #eef8f8; --panel: #ffffff; --card: rgba(255, 255, 255, 0.96); } html[data-theme="light"][data-theme-pack="forest"], html.theme-light[data-theme-pack="forest"] { --accent: #166534; --primary: var(--accent); --bg: #f0f7f2; --panel: #ffffff; --card: rgba(255, 255, 255, 0.96); } html[data-theme="light"][data-theme-pack="sunset"], html.theme-light[data-theme-pack="sunset"] { --accent: #b45309; --primary: var(--accent); --bg: #faf6f1; --panel: #ffffff; --card: rgba(255, 255, 255, 0.96); } html[data-theme="light"][data-theme-pack="contrast"], html.theme-light[data-theme-pack="contrast"] { --accent: #0000cc; --primary: var(--accent); --ink: #000000; --muted: rgba(0, 0, 0, 0.78); --bg: #ffffff; --panel: #ffffff; --card: #ffffff; --line: rgba(0, 0, 0, 0.55); --ok: #006600; --warn: #7a4f00; --err: #990000; } @media (prefers-color-scheme: light) { html[data-theme="system"][data-theme-pack="ocean"] { --accent: #0f766e; --primary: var(--accent); --bg: #eef8f8; --panel: #ffffff; --card: rgba(255, 255, 255, 0.96); } html[data-theme="system"][data-theme-pack="forest"] { --accent: #166534; --primary: var(--accent); --bg: #f0f7f2; --panel: #ffffff; --card: rgba(255, 255, 255, 0.96); } html[data-theme="system"][data-theme-pack="sunset"] { --accent: #b45309; --primary: var(--accent); --bg: #faf6f1; --panel: #ffffff; --card: rgba(255, 255, 255, 0.96); } html[data-theme="system"][data-theme-pack="contrast"] { --accent: #0000cc; --primary: var(--accent); --ink: #000000; --muted: rgba(0, 0, 0, 0.78); --bg: #ffffff; --panel: #ffffff; --card: #ffffff; --line: rgba(0, 0, 0, 0.55); --ok: #006600; --warn: #7a4f00; --err: #990000; } } /* Light chrome: replace hardcoded dark header/input borders */ html[data-theme="light"] .shell-header, html.theme-light .shell-header { background: rgba(255, 255, 255, 0.92); border-bottom-color: var(--line); } html[data-theme="light"] .shell-input, html[data-theme="light"] .shell-card input, html[data-theme="light"] .shell-card textarea, html[data-theme="light"] .shell-card select, html.theme-light .shell-input, html.theme-light .shell-card input, html.theme-light .shell-card textarea, html.theme-light .shell-card select { background: #ffffff; border-color: var(--line); } html[data-theme="light"] .shell-btn-secondary, html[data-theme="light"] a.shell-back, html[data-theme="light"] button.shell-back, html[data-theme="light"] .shell-slot-close, html.theme-light .shell-btn-secondary, html.theme-light a.shell-back, html.theme-light button.shell-back, html.theme-light .shell-slot-close { border-color: var(--line); } html[data-theme="light"] .shell-card, html.theme-light .shell-card { box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08); } html[data-theme="light"] .shell-fatal .hint, html.theme-light .shell-fatal .hint { color: rgba(15, 23, 42, 0.45); } html[data-theme="light"] .shell-slot-layer, html.theme-light .shell-slot-layer { background: rgba(15, 23, 42, 0.35); } @media (prefers-color-scheme: light) { html[data-theme="system"] .shell-header { background: rgba(255, 255, 255, 0.92); border-bottom-color: var(--line); } html[data-theme="system"] .shell-input, html[data-theme="system"] .shell-card input, html[data-theme="system"] .shell-card textarea, html[data-theme="system"] .shell-card select { background: #ffffff; border-color: var(--line); } html[data-theme="system"] .shell-btn-secondary, html[data-theme="system"] a.shell-back, html[data-theme="system"] button.shell-back, html[data-theme="system"] .shell-slot-close { border-color: var(--line); } html[data-theme="system"] .shell-card { box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08); } html[data-theme="system"] .shell-fatal .hint { color: rgba(15, 23, 42, 0.45); } html[data-theme="system"] .shell-slot-layer { background: rgba(15, 23, 42, 0.35); } } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body.shell-body { font-family: var(--font); background: radial-gradient(700px 400px at 20% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%), var(--bg); color: var(--ink); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow-x: hidden; } .shell-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: rgba(10, 14, 24, 0.92); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 40; min-width: 0; } .shell-brand { font-weight: 700; font-size: 1.12rem; line-height: 1.25; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shell-brand small { display: block; font-weight: 400; opacity: 0.7; font-size: 0.78rem; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .shell-brand small:empty { display: none; } .shell-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; min-width: 0; } .shell-switchers { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; } .shell-switcher { display: inline-flex; align-items: center; margin: 0; } .shell-switcher-select { appearance: none; -webkit-appearance: none; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font: inherit; font-size: 0.82rem; padding: 6px 28px 6px 12px; min-height: var(--touch); max-width: 11.5rem; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .shell-switcher-select:focus { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; } .shell-pill { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 0.82rem; white-space: nowrap; } a.shell-back, button.shell-back { color: var(--ink); text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 999px; padding: 8px 12px; min-height: var(--touch); display: inline-flex; align-items: center; background: transparent; font: inherit; cursor: pointer; white-space: nowrap; } .shell-main { flex: 1; width: 100%; max-width: 720px; margin: 0 auto; padding: 28px 20px 48px; min-width: 0; } .shell-main.wide { max-width: 1080px; } .shell-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28); } .shell-card h1 { font-size: 1.25rem; margin-bottom: 8px; } .shell-card .desc, .shell-desc { color: var(--muted); font-size: 0.9rem; line-height: 1.5; margin-bottom: 16px; } .shell-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; } .shell-btn { border: 0; border-radius: 999px; padding: 10px 18px; min-height: var(--touch); font: inherit; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .shell-btn:disabled { opacity: 0.55; cursor: not-allowed; } .shell-btn-primary { background: var(--accent); color: #fff; } .shell-btn-secondary { background: transparent; color: var(--ink); border: 1px solid rgba(255, 255, 255, 0.18); } .shell-msg { margin-top: 14px; font-size: 0.88rem; color: var(--muted); } .shell-msg.ok { color: var(--ok); } .shell-msg.warn, .shell-msg.reject { color: var(--warn); } .shell-msg.err { color: var(--err); } /* 用户态致命错误：不展示裸 JSON */ .shell-fatal { text-align: center; padding: 28px 18px 18px; } .shell-fatal .icon { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 16px; display: grid; place-items: center; background: rgba(255, 143, 122, 0.12); border: 1px solid rgba(255, 143, 122, 0.28); color: var(--err); font-size: 1.4rem; } .shell-fatal h1 { font-size: 1.2rem; margin-bottom: 8px; } .shell-fatal p { color: var(--muted); font-size: 0.92rem; line-height: 1.55; margin-bottom: 18px; } .shell-fatal .hint { font-size: 0.8rem; color: rgba(232, 238, 242, 0.45); margin-top: 10px; word-break: break-all; } .shell-fatal .shell-actions { justify-content: center; } /* K-12: platform payment / notify / export Shell slots (host empty/disabled) */ .shell-slot-host { position: fixed; inset: 0; z-index: 80; pointer-events: none; } .shell-slot-layer { pointer-events: auto; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(8, 12, 20, 0.55); } .shell-slot-layer--toast { align-items: flex-start; justify-content: flex-end; background: transparent; padding: 18px; } .shell-slot-layer--drawer { justify-content: flex-end; padding: 0; } .shell-slot { width: 100%; max-width: 420px; } .shell-slot--drawer { max-width: 360px; height: 100%; margin-left: auto; } .shell-slot--toast { max-width: 320px; } .shell-slot-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); } .shell-slot--drawer .shell-slot-card { height: 100%; border-radius: 0; display: flex; flex-direction: column; justify-content: center; } .shell-slot-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; } .shell-slot-body { color: var(--muted); font-size: 0.92rem; line-height: 1.55; margin: 0; } .shell-slot-close { margin-top: 18px; min-height: var(--touch); padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18); background: transparent; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; } .shell-slot.is-disabled .shell-slot-close, .shell-slot.is-readonly .shell-slot-close[disabled] { opacity: 0.45; cursor: not-allowed; } .shell-slot.is-deferred .shell-slot-card, .shell-slot.is-empty .shell-slot-card, .shell-slot.is-disabled .shell-slot-card { opacity: 0.96; } label.shell-field { display: block; margin-bottom: 14px; font-size: 0.9rem; } label.shell-field span { display: block; margin-bottom: 6px; opacity: 0.85; } .shell-input, .shell-card input, .shell-card textarea, .shell-card select { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.12); background: #0d1524; color: var(--ink); font: inherit; } .shell-card textarea { min-height: 80px; resize: vertical; } /* 加载门：CSS 兜底，避免仅依赖 JS 内联时闪白 */ #shellLoadingGate { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: var(--bg); color: var(--ink); font-family: var(--font); } @media (max-width: 640px) { .shell-header { flex-wrap: wrap; padding: 12px 14px; gap: 10px; } .shell-brand { flex: 1 1 auto; font-size: 1.02rem; max-width: calc(100% - 8px); } .shell-meta { width: 100%; justify-content: flex-start; } .shell-main { padding: 20px 14px 36px; } .shell-card { padding: 18px 16px; } .shell-actions { justify-content: stretch; } .shell-actions .shell-btn { flex: 1 1 auto; } a.shell-back, button.shell-back { padding: 8px 10px; font-size: 0.88rem; } } /* Unified Shell Navigation Menu */ .shell-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; } .shell-nav a, .shell-nav button, .shell-nav span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-size: 0.88rem; font-weight: 600; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.12); color: var(--muted, rgba(232, 238, 242, 0.72)); background: rgba(255, 255, 255, 0.03); cursor: pointer; transition: all 0.2s ease-in-out; font-family: var(--font); } .shell-nav a:hover, .shell-nav button:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--ink, #e8eef2); transform: translateY(-1px); } .shell-nav .active, .shell-nav span.active { color: #ffffff !important; background: var(--accent) !important; border-color: transparent !important; box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent); } /* canvas_app (light theme support) */ body.play-canvas-app .shell-nav a, body.play-canvas-app .shell-nav button, body.play-canvas-app .shell-nav span { border: 1px solid rgba(15, 23, 42, 0.12); color: #475569; background: rgba(15, 23, 42, 0.03); } body.play-canvas-app .shell-nav a:hover, body.play-canvas-app .shell-nav button:hover { border-color: var(--accent); color: #0f172a; } body.play-canvas-app .shell-nav .active, body.play-canvas-app .shell-nav span.active { color: #ffffff !important; background: var(--accent) !important; border-color: transparent !important; }