/* ========================================================= * theme-v2.css — 灵鲤小筑 · v2 设计系统（宋雅·墨骨·数字克制） * --------------------------------------------------------- * 加载策略： * 1. 本文件永远最后加载，仅在时生效 * 2. 老皮肤 100% 保留，仅通过父选择器覆盖 * 3. 所有色/字/间距全部走 CSS 变量，便于夜观模式 * --------------------------------------------------------- * 设计观点： * 气 · 骨 · 墨 · 器 * 宋人书房，非明清皇家 * ========================================================= */ /* ========================================================= * §0 · 令牌（Design Tokens） * ========================================================= */ .theme-v2 { /* — 底 · 文 — */ --v2-paper: #F6F1E8; /* 宣纸 */ --v2-paper-2: #FBF7EE; /* 素笺 */ --v2-surface: #FFFDF7; /* 卡底 */ --v2-ink: #2A2622; /* 玄墨 · 主文 */ --v2-ink-2: #4A423B; /* 次文 */ --v2-muted: #8A857D; /* 素灰 · 弱文 */ --v2-hair: #E8E1D3; /* 米线 · 分隔 */ --v2-hair-2: #D9D0BE; /* 深分隔 */ /* — 主 · 辅 · 意 — */ --v2-primary: #6E8B9D; /* 天青 · 主操作 */ --v2-primary-2: #5A7788; --v2-primary-3: #4A6577; --v2-gold: #C9974A; /* 藤黄 · 高价值（吝用） */ --v2-gold-2: #B27F32; --v2-good: #4E7D6A; /* 石绿 · 吉 */ --v2-good-2: #5F9080; --v2-bad: #A02C2C; /* 朱砂 · 凶（吝用） */ --v2-bad-2: #B94040; --v2-warn: #B26A00; --v2-info: #4A6E8A; --v2-seal: #A02C2C; /* 印章朱砂 */ /* — 字号：12 / 14 / 16 / 18 / 22 / 28 / 40 — */ --v2-fs-xs: 12px; --v2-fs-sm: 13px; --v2-fs-md: 14px; --v2-fs-lg: 16px; --v2-fs-xl: 18px; --v2-fs-2xl: 22px; --v2-fs-3xl: 28px; --v2-fs-4xl: 40px; /* — 行高 — */ --v2-lh-tight: 1.35; --v2-lh-body: 1.75; /* — 间距（4pt grid） — */ --v2-sp-1: 4px; --v2-sp-2: 8px; --v2-sp-3: 12px; --v2-sp-4: 16px; --v2-sp-5: 20px; --v2-sp-6: 24px; --v2-sp-8: 32px; --v2-sp-10: 40px; --v2-sp-12: 48px; /* — 圆角（克制，不做胶囊） — */ --v2-r-xs: 2px; --v2-r-sm: 4px; --v2-r-md: 6px; --v2-r-lg: 10px; /* — 阴影（极轻） — */ --v2-sh-0: none; --v2-sh-1: 0 1px 2px rgba(58,46,36,.04); --v2-sh-2: 0 2px 6px rgba(58,46,36,.06), 0 1px 2px rgba(58,46,36,.04); --v2-sh-3: 0 6px 16px rgba(58,46,36,.08), 0 2px 4px rgba(58,46,36,.05); /* — 动效 — */ --v2-ease: cubic-bezier(.4,0,.2,1); --v2-ease-out: cubic-bezier(.2,.7,.2,1); --v2-t-1: 160ms; --v2-t-2: 280ms; --v2-t-3: 480ms; /* — 触控 — */ --v2-tap: 44px; /* — 字体 — */ --v2-font-serif: "Noto Serif SC", "Songti SC", "SimSun", "宋体", "STSong", ui-serif, serif; --v2-font-sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, sans-serif; --v2-font-num: "Iowan Old Style", "Palatino", "Book Antiqua", "Cambria", "Noto Serif SC", ui-serif, serif; } /* ========================================================= * §1 · 夜观模式（Dark） * ========================================================= */ .theme-v2.theme-dark, .theme-v2[data-theme="dark"] { --v2-paper: #0B0F14; --v2-paper-2: #10151C; --v2-surface: #141A22; --v2-ink: #E6E2D9; --v2-ink-2: #C4BFB4; --v2-muted: #8A857D; --v2-hair: #232A34; --v2-hair-2: #2D3641; --v2-primary: #8FB3C4; --v2-primary-2: #A9C6D4; --v2-primary-3: #C4DBE5; --v2-gold: #D9B27C; --v2-gold-2: #E6C48F; --v2-good: #7AAF98; --v2-good-2: #96C5B0; --v2-bad: #D06F6F; --v2-bad-2: #E08A8A; --v2-sh-1: 0 1px 2px rgba(0,0,0,.35); --v2-sh-2: 0 2px 6px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35); --v2-sh-3: 0 6px 16px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.35); } /* ========================================================= * §2 · 骨架 · Body · Page * ========================================================= */ body.theme-v2, .theme-v2 #app { background: var(--v2-paper) !important; background-attachment: fixed; color: var(--v2-ink) !important; font-family: var(--v2-font-sans) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .theme-v2 .page { padding: var(--v2-sp-5) var(--v2-sp-5) var(--v2-sp-10) !important; max-width: 720px; margin: 0 auto; } /* 大屏加些呼吸 */ @media (min-width: 640px) { .theme-v2 .page { padding: var(--v2-sp-8) var(--v2-sp-6) var(--v2-sp-12) !important; } } /* ========================================================= * §3 · 排版 * ========================================================= */ .theme-v2 h1, .theme-v2 h2, .theme-v2 h3, .theme-v2 .v2-title, .theme-v2 .card-title { font-family: var(--v2-font-serif) !important; color: var(--v2-ink) !important; letter-spacing: .04em !important; font-weight: 500 !important; } .theme-v2 .v2-num, .theme-v2 .v2-score-num, .theme-v2 .v2-stat-num { font-family: var(--v2-font-num); font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0; } ::selection { background: rgba(201,151,74,.22); color: inherit; } /* ========================================================= * §4 · 卡片（素笺·雅卡） * ========================================================= */ .theme-v2 .card, .theme-v2 .v2-card { background: var(--v2-surface) !important; border: 1px solid var(--v2-hair) !important; border-radius: var(--v2-r-md) !important; box-shadow: var(--v2-sh-1) !important; padding: var(--v2-sp-5) var(--v2-sp-5) var(--v2-sp-5) !important; margin-bottom: var(--v2-sp-4) !important; position: relative; } .theme-v2 .card-title { font-size: var(--v2-fs-lg) !important; padding-bottom: var(--v2-sp-3) !important; margin-bottom: var(--v2-sp-4) !important; border-bottom: 1px solid var(--v2-hair) !important; display: flex; align-items: center; gap: 8px; } .theme-v2 .card-title-icon { font-size: var(--v2-fs-lg) !important; opacity: .7; } /* 主要素笺卡：左侧一竖线代替粗描边 */ .theme-v2 .v2-card--primary { border-left: 2px solid var(--v2-gold) !important; } /* 章尾印章位（右上角） */ .theme-v2 .v2-card--sealed::after { content: "審"; position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; line-height: 22px; text-align: center; color: var(--v2-seal); border: 1.5px solid var(--v2-seal); border-radius: 3px; font-family: var(--v2-font-serif); font-size: 12px; font-weight: 500; transform: rotate(-6deg); opacity: .78; pointer-events: none; } /* ========================================================= * §5 · 按钮 * ========================================================= */ .theme-v2 .btn-primary, .theme-v2 .v2-btn { background: var(--v2-primary) !important; color: #fff !important; border: none !important; border-radius: var(--v2-r-md) !important; padding: 12px 20px !important; font-size: var(--v2-fs-md) !important; font-family: var(--v2-font-sans) !important; font-weight: 500 !important; letter-spacing: .12em !important; min-height: var(--v2-tap); box-shadow: none !important; cursor: pointer; transition: background var(--v2-t-1) var(--v2-ease-out), transform var(--v2-t-1) var(--v2-ease-out) !important; } .theme-v2 .btn-primary:hover, .theme-v2 .v2-btn:hover { background: var(--v2-primary-2) !important; transform: none !important; } .theme-v2 .btn-primary:active, .theme-v2 .v2-btn:active { transform: translateY(1px) !important; background: var(--v2-primary-3) !important; } .theme-v2 .btn-secondary, .theme-v2 .v2-btn--ghost { background: transparent !important; color: var(--v2-ink) !important; border: 1px solid var(--v2-hair-2) !important; border-radius: var(--v2-r-md) !important; padding: 12px 20px !important; font-size: var(--v2-fs-md) !important; letter-spacing: .08em !important; min-height: var(--v2-tap); box-shadow: none !important; cursor: pointer; } .theme-v2 .btn-secondary:hover, .theme-v2 .v2-btn--ghost:hover { background: var(--v2-paper-2) !important; } .theme-v2 .v2-btn--text { background: transparent; border: none; color: var(--v2-primary); padding: 8px 4px; font-size: var(--v2-fs-md); letter-spacing: .04em; cursor: pointer; } .theme-v2 .v2-btn--text:hover { color: var(--v2-primary-2); } /* ========================================================= * §6 · 表单 * ========================================================= */ .theme-v2 .form-input, .theme-v2 .form-select, .theme-v2 textarea.form-input, .theme-v2 .v2-input { background: var(--v2-surface) !important; color: var(--v2-ink) !important; border: 1px solid var(--v2-hair-2) !important; border-radius: var(--v2-r-sm) !important; padding: 10px 12px !important; font-size: var(--v2-fs-md) !important; font-family: var(--v2-font-sans) !important; min-height: var(--v2-tap); box-shadow: none !important; transition: border-color var(--v2-t-1) var(--v2-ease-out) !important; } .theme-v2 .form-input:focus, .theme-v2 .form-select:focus, .theme-v2 textarea.form-input:focus, .theme-v2 .v2-input:focus { outline: none !important; border-color: var(--v2-primary) !important; box-shadow: 0 0 0 3px rgba(110,139,157,.18) !important; } .theme-v2 .form-label { color: var(--v2-muted) !important; font-size: var(--v2-fs-sm) !important; letter-spacing: .04em !important; margin-bottom: 6px !important; } /* ========================================================= * §7 · Tag（无填色，只描边） * ========================================================= */ .theme-v2 .tag, .theme-v2 .v2-tag { display: inline-block; font-family: var(--v2-font-sans) !important; font-size: var(--v2-fs-xs) !important; padding: 2px 8px !important; border-radius: var(--v2-r-xs) !important; border: 1px solid var(--v2-hair-2) !important; background: transparent !important; color: var(--v2-ink-2) !important; letter-spacing: .04em; line-height: 1.6; font-weight: 500 !important; } .theme-v2 .tag-success, .theme-v2 .v2-tag--good { color: var(--v2-good) !important; border-color: var(--v2-good) !important; background: transparent !important; } .theme-v2 .tag-danger, .theme-v2 .v2-tag--bad { color: var(--v2-bad) !important; border-color: var(--v2-bad) !important; background: transparent !important; } .theme-v2 .tag-warning, .theme-v2 .v2-tag--warn { color: var(--v2-warn) !important; border-color: var(--v2-warn) !important; background: transparent !important; } .theme-v2 .tag-info, .theme-v2 .v2-tag--info { color: var(--v2-info) !important; border-color: var(--v2-info) !important; background: transparent !important; } .theme-v2 .v2-tag--gold { color: var(--v2-gold-2) !important; border-color: var(--v2-gold) !important; } /* ========================================================= * §8 · Navbar / Tabbar * ========================================================= */ .theme-v2 .navbar { background: var(--v2-paper) !important; color: var(--v2-ink) !important; border-bottom: 1px solid var(--v2-hair) !important; box-shadow: none !important; backdrop-filter: none !important; } .theme-v2 .navbar-title { font-family: var(--v2-font-serif) !important; letter-spacing: .12em !important; font-weight: 500 !important; color: var(--v2-ink) !important; } .theme-v2 .navbar-back { color: var(--v2-ink) !important; min-width: var(--v2-tap); min-height: var(--v2-tap); border-radius: var(--v2-r-sm); } .theme-v2 .navbar-back:hover { background: var(--v2-paper-2) !important; } .theme-v2 .tabbar { background: var(--v2-paper) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-top: 1px solid var(--v2-hair) !important; box-shadow: none !important; } .theme-v2 .tabbar-item { color: var(--v2-muted) !important; font-family: var(--v2-font-sans); font-size: var(--v2-fs-xs); letter-spacing: .04em; } .theme-v2 .tabbar-item.active { color: var(--v2-ink) !important; } .theme-v2 .tabbar-item.active .tabbar-icon { transform: none !important; } .theme-v2 .tabbar-item.active::after { content: ""; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 14px; height: 1.5px; background: var(--v2-gold); border-radius: 0; } /* ========================================================= * §9 · v2 专属组件 * ========================================================= */ /* v2-stamp · 印章徽记（可复用） */ .v2-stamp { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 6px; color: var(--v2-seal); border: 1.5px solid var(--v2-seal); border-radius: 3px; font-family: var(--v2-font-serif); font-size: var(--v2-fs-sm); font-weight: 500; letter-spacing: .08em; transform: rotate(-4deg); background: transparent; } .v2-stamp--sm { min-width: 22px; height: 22px; font-size: 11px; } .v2-stamp--lg { min-width: 44px; height: 44px; font-size: var(--v2-fs-lg); border-width: 2px; } /* v2-divider · 分隔（题签风格） */ .v2-divider { display: flex; align-items: center; gap: 12px; margin: var(--v2-sp-6) 0; color: var(--v2-muted); font-family: var(--v2-font-serif); font-size: var(--v2-fs-sm); letter-spacing: .3em; } .v2-divider::before, .v2-divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--v2-hair-2), transparent); } /* v2-hero · 结果 hero 卡 */ .v2-hero { background: var(--v2-surface); border: 1px solid var(--v2-hair); border-radius: var(--v2-r-md); padding: var(--v2-sp-6) var(--v2-sp-5); margin-bottom: var(--v2-sp-5); position: relative; overflow: hidden; } .v2-hero::before { content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--v2-gold); opacity: .8; } .v2-hero-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--v2-sp-4); } .v2-hero-eyebrow { color: var(--v2-muted); font-size: var(--v2-fs-sm); letter-spacing: .16em; font-family: var(--v2-font-serif); } .v2-hero-title { font-family: var(--v2-font-serif); font-size: var(--v2-fs-2xl); color: var(--v2-ink); letter-spacing: .06em; margin-top: 4px; font-weight: 500; } .v2-hero-score { font-family: var(--v2-font-num); font-size: var(--v2-fs-4xl); color: var(--v2-ink); line-height: 1; font-variant-numeric: lining-nums tabular-nums; } .v2-hero-score-unit { font-family: var(--v2-font-serif); font-size: var(--v2-fs-md); color: var(--v2-muted); margin-left: 2px; letter-spacing: .1em; } .v2-hero-meta { display: flex; gap: var(--v2-sp-4); flex-wrap: wrap; color: var(--v2-ink-2); font-size: var(--v2-fs-sm); letter-spacing: .04em; } .v2-hero-meta-item { display: flex; align-items: baseline; gap: 6px; } .v2-hero-meta-label { color: var(--v2-muted); font-family: var(--v2-font-serif); } .v2-hero-meta-val { color: var(--v2-ink); font-family: var(--v2-font-serif); font-weight: 500; } /* v2-kv · Key/Value 行 */ .v2-kv { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--v2-hair); gap: var(--v2-sp-4); } .v2-kv:last-child { border-bottom: none; } .v2-kv-k { color: var(--v2-muted); font-size: var(--v2-fs-sm); font-family: var(--v2-font-serif); letter-spacing: .1em; white-space: nowrap; } .v2-kv-v { color: var(--v2-ink); font-size: var(--v2-fs-md); font-family: var(--v2-font-serif); text-align: right; font-weight: 500; } /* v2-yao · 六爻 */ .v2-yao { display: inline-flex; flex-direction: column-reverse; gap: 6px; padding: 12px 0; } .v2-yao-row { display: flex; align-items: center; gap: 8px; height: 14px; } .v2-yao-bar { display: inline-flex; gap: 6px; width: 120px; } .v2-yao-seg { height: 3px; background: var(--v2-ink); border-radius: 0; } .v2-yao-seg.yang { flex: 1; } .v2-yao-seg.yin { flex: 0 0 46%; } .v2-yao-seg.gap { flex: 0 0 8%; background: transparent; } .v2-yao-moving::after { content: ""; width: 6px; height: 6px; background: var(--v2-gold); border-radius: 50%; margin-left: 4px; display: inline-block; } .v2-yao-label { font-family: var(--v2-font-serif); font-size: var(--v2-fs-xs); color: var(--v2-muted); letter-spacing: .1em; min-width: 20px; } /* v2-nine · 九宫格 */ .v2-nine { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--v2-hair); border: 1px solid var(--v2-hair); border-radius: var(--v2-r-sm); overflow: hidden; } .v2-nine-cell { background: var(--v2-surface); padding: var(--v2-sp-4) var(--v2-sp-2); text-align: center; min-height: 84px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; position: relative; } .v2-nine-cell--center { background: var(--v2-paper-2); box-shadow: inset 0 0 0 1px var(--v2-gold); } .v2-nine-star { font-family: var(--v2-font-num); font-size: var(--v2-fs-2xl); color: var(--v2-ink); line-height: 1; } .v2-nine-name { font-family: var(--v2-font-serif); font-size: var(--v2-fs-xs); color: var(--v2-muted); letter-spacing: .1em; } .v2-nine-cell[data-luck="good"] .v2-nine-star { color: var(--v2-good); } .v2-nine-cell[data-luck="bad"] .v2-nine-star { color: var(--v2-bad); } .v2-nine-cell[data-luck="top"] .v2-nine-star { color: var(--v2-gold-2); } /* v2-gauge · 环形评分 */ .v2-gauge { --v2-gauge-size: 96px; --v2-gauge-value: 60; width: var(--v2-gauge-size); height: var(--v2-gauge-size); position: relative; display: inline-flex; align-items: center; justify-content: center; } .v2-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); } .v2-gauge-track { fill: none; stroke: var(--v2-hair); stroke-width: 2; } .v2-gauge-fill { fill: none; stroke: var(--v2-primary); stroke-width: 2; stroke-linecap: round; transition: stroke-dashoffset var(--v2-t-3) var(--v2-ease-out); } .v2-gauge-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } .v2-gauge-num { font-family: var(--v2-font-num); font-size: var(--v2-fs-2xl); color: var(--v2-ink); line-height: 1; font-variant-numeric: lining-nums tabular-nums; } .v2-gauge-cap { font-family: var(--v2-font-serif); font-size: 11px; color: var(--v2-muted); letter-spacing: .18em; } /* v2-tabs · 极简 tabs */ .v2-tabs { display: flex; gap: var(--v2-sp-6); border-bottom: 1px solid var(--v2-hair); margin-bottom: var(--v2-sp-5); overflow-x: auto; scrollbar-width: none; } .v2-tabs::-webkit-scrollbar { display: none; } .v2-tab { padding: 10px 0; font-family: var(--v2-font-serif); font-size: var(--v2-fs-md); color: var(--v2-muted); letter-spacing: .12em; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; transition: color var(--v2-t-1) var(--v2-ease-out); } .v2-tab:hover { color: var(--v2-ink-2); } .v2-tab.active { color: var(--v2-ink); border-bottom-color: var(--v2-ink); font-weight: 500; } /* v2-empty · 空态 */ .v2-empty { padding: var(--v2-sp-10) var(--v2-sp-5); text-align: center; color: var(--v2-muted); } .v2-empty-title { font-family: var(--v2-font-serif); font-size: var(--v2-fs-lg); letter-spacing: .12em; color: var(--v2-ink-2); margin-bottom: 6px; } .v2-empty-hint { font-size: var(--v2-fs-sm); color: var(--v2-muted); } /* v2-quote · 古籍引文 */ .v2-quote { padding: var(--v2-sp-4) var(--v2-sp-5); border-left: 2px solid var(--v2-gold); background: var(--v2-paper-2); border-radius: 0 var(--v2-r-sm) var(--v2-r-sm) 0; font-family: var(--v2-font-serif); font-size: var(--v2-fs-md); color: var(--v2-ink-2); line-height: var(--v2-lh-body); letter-spacing: .04em; } .v2-quote-src { display: block; margin-top: var(--v2-sp-2); color: var(--v2-muted); font-size: var(--v2-fs-xs); letter-spacing: .1em; text-align: right; } /* v2-callout · 提示 */ .v2-callout { padding: var(--v2-sp-3) var(--v2-sp-4); border: 1px solid var(--v2-hair-2); border-radius: var(--v2-r-sm); font-size: var(--v2-fs-sm); color: var(--v2-ink-2); line-height: 1.7; } .v2-callout--good { border-color: var(--v2-good); color: var(--v2-good); background: rgba(78,125,106,.04); } .v2-callout--bad { border-color: var(--v2-bad); color: var(--v2-bad); background: rgba(160,44,44,.04); } .v2-callout--gold { border-color: var(--v2-gold); color: var(--v2-gold-2); background: rgba(201,151,74,.05); } /* v2-swatch · 色板 chip */ .v2-swatch { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--v2-hair); border-radius: var(--v2-r-sm); background: var(--v2-surface); font-size: var(--v2-fs-sm); color: var(--v2-ink-2); } .v2-swatch-dot { width: 22px; height: 22px; border-radius: 3px; border: 1px solid var(--v2-hair-2); flex-shrink: 0; } /* ========================================================= * §10 · 特殊：老组件的 v2 优化（首页 zone 之类） * ========================================================= */ .theme-v2 .zone-section { margin-bottom: var(--v2-sp-6); } .theme-v2 .zone-header { border-bottom: 1px solid var(--v2-hair); padding-bottom: var(--v2-sp-2); margin-bottom: var(--v2-sp-3); } .theme-v2 .zone-header-title { font-family: var(--v2-font-serif) !important; font-size: var(--v2-fs-lg) !important; color: var(--v2-ink) !important; letter-spacing: .12em !important; font-weight: 500 !important; } .theme-v2 .zone-header-desc { color: var(--v2-muted) !important; font-size: var(--v2-fs-sm) !important; letter-spacing: .04em !important; } .theme-v2 .zone-action { background: var(--v2-surface) !important; border: 1px solid var(--v2-hair) !important; border-radius: var(--v2-r-sm) !important; box-shadow: none !important; padding: var(--v2-sp-4) !important; transition: border-color var(--v2-t-1) var(--v2-ease-out) !important; } .theme-v2 .zone-action:hover { border-color: var(--v2-primary) !important; transform: none !important; } .theme-v2 .zone-action-title { font-family: var(--v2-font-serif) !important; color: var(--v2-ink) !important; letter-spacing: .06em !important; font-weight: 500 !important; } .theme-v2 .zone-action-desc { color: var(--v2-muted) !important; font-size: var(--v2-fs-sm) !important; } .theme-v2 .zone-hot-dot { background: transparent !important; color: var(--v2-gold-2) !important; border: 1px solid var(--v2-gold) !important; padding: 1px 6px !important; font-size: 10px !important; letter-spacing: .1em !important; border-radius: 2px !important; } /* Hero 今日运势卡（首页）v2 */ .theme-v2 .hero-today { background: var(--v2-surface) !important; border: 1px solid var(--v2-hair) !important; border-radius: var(--v2-r-md) !important; padding: var(--v2-sp-5) !important; box-shadow: var(--v2-sh-1) !important; position: relative; } .theme-v2 .hero-today::before { content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--v2-gold); opacity: .75; border-radius: var(--v2-r-md) 0 0 var(--v2-r-md); } .theme-v2 .hero-today-solar { font-family: var(--v2-font-serif) !important; color: var(--v2-ink) !important; letter-spacing: .1em !important; font-weight: 500 !important; } .theme-v2 .hero-today-lunar { color: var(--v2-muted) !important; font-family: var(--v2-font-serif) !important; letter-spacing: .06em !important; } .theme-v2 .hero-today-score .hero-score-num { font-family: var(--v2-font-num) !important; font-size: var(--v2-fs-3xl) !important; color: var(--v2-ink) !important; background: transparent !important; -webkit-text-fill-color: initial !important; } .theme-v2 .hero-today-score .hero-score-label { color: var(--v2-muted) !important; font-family: var(--v2-font-serif) !important; letter-spacing: .12em !important; } /* 免责声明 */ .theme-v2 .disclaimer { color: var(--v2-muted) !important; background: transparent !important; border: 1px dashed var(--v2-hair-2) !important; border-radius: var(--v2-r-sm) !important; padding: var(--v2-sp-3) var(--v2-sp-4) !important; font-size: var(--v2-fs-xs) !important; letter-spacing: .04em; margin-top: var(--v2-sp-6) !important; } /* Loading 遮罩 */ .theme-v2 .loading-overlay { background: rgba(20,15,10,.32) !important; backdrop-filter: blur(6px); } .theme-v2 .loading-spinner { border-color: var(--v2-hair-2) !important; border-top-color: var(--v2-primary) !important; } /* toast */ .theme-v2 .toast { background: var(--v2-ink) !important; color: var(--v2-surface) !important; border-radius: var(--v2-r-sm) !important; font-size: var(--v2-fs-sm) !important; letter-spacing: .04em !important; box-shadow: var(--v2-sh-3) !important; } /* ========================================================= * §11 · 页面切换动效 * ========================================================= */ .theme-v2 .page { animation: v2-page-in var(--v2-t-2) var(--v2-ease-out) !important; } @keyframes v2-page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .theme-v2 .card { animation: v2-card-in var(--v2-t-2) var(--v2-ease-out) both !important; } @keyframes v2-card-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .theme-v2 .page, .theme-v2 .card { animation: none !important; } .theme-v2 * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ========================================================= * §12 · Style guide 页专用 * ========================================================= */ .theme-v2 .v2-sg-title { font-family: var(--v2-font-serif); font-size: var(--v2-fs-2xl); color: var(--v2-ink); letter-spacing: .12em; margin-bottom: var(--v2-sp-2); } .theme-v2 .v2-sg-sub { color: var(--v2-muted); font-size: var(--v2-fs-sm); letter-spacing: .04em; margin-bottom: var(--v2-sp-6); font-family: var(--v2-font-serif); } .theme-v2 .v2-sg-section { margin-bottom: var(--v2-sp-10); } .theme-v2 .v2-sg-h { font-family: var(--v2-font-serif); font-size: var(--v2-fs-lg); color: var(--v2-ink); letter-spacing: .12em; padding-bottom: var(--v2-sp-2); border-bottom: 1px solid var(--v2-hair); margin-bottom: var(--v2-sp-4); font-weight: 500; } .theme-v2 .v2-sg-row { display: flex; flex-wrap: wrap; gap: var(--v2-sp-3); margin-bottom: var(--v2-sp-4); align-items: flex-start; } .theme-v2 .v2-sg-hint { color: var(--v2-muted); font-size: var(--v2-fs-xs); font-family: var(--v2-font-serif); letter-spacing: .08em; margin-top: var(--v2-sp-2); } .theme-v2 .v2-sg-toggle { position: fixed; right: 16px; bottom: 96px; z-index: 999; background: var(--v2-ink); color: var(--v2-surface); padding: 10px 14px; border-radius: var(--v2-r-sm); font-size: var(--v2-fs-sm); letter-spacing: .1em; border: none; cursor: pointer; box-shadow: var(--v2-sh-3); font-family: var(--v2-font-serif); } /* ========================================================= * §13 · 登录/激活页（v2 版） * ========================================================= */ .theme-v2 .login-page { padding: var(--v2-sp-10) var(--v2-sp-5) var(--v2-sp-6) !important; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; max-width: 480px; margin: 0 auto; } .theme-v2 .login-header { text-align: center; margin-bottom: var(--v2-sp-8) !important; padding-top: var(--v2-sp-6) !important; } .theme-v2 .login-header .logo-img { width: 96px !important; height: 96px !important; border-radius: 50% !important; margin: 0 auto var(--v2-sp-5) !important; display: block !important; object-fit: cover !important; box-shadow: 0 0 0 1px var(--v2-hair-2), 0 8px 24px rgba(58,46,36,.10) !important; border: none !important; background: var(--v2-surface); } .theme-v2 .login-header .app-name { font-family: var(--v2-font-serif) !important; font-size: var(--v2-fs-3xl) !important; color: var(--v2-ink) !important; letter-spacing: .32em !important; font-weight: 500 !important; text-shadow: none !important; margin-bottom: var(--v2-sp-2) !important; padding-left: .32em; /* letter-spacing 视觉居中补偿 */ } .theme-v2 .login-header .app-desc { font-family: var(--v2-font-serif) !important; font-size: var(--v2-fs-sm) !important; color: var(--v2-muted) !important; letter-spacing: .18em !important; } /* 登录页卡片：素笺 + 左侧藤黄立柱 */ .theme-v2 .login-page .card { background: var(--v2-surface) !important; border: 1px solid var(--v2-hair) !important; border-left: 2px solid var(--v2-gold) !important; border-radius: var(--v2-r-md) !important; box-shadow: var(--v2-sh-2) !important; padding: var(--v2-sp-6) var(--v2-sp-5) !important; } .theme-v2 .login-page .card-title { border-bottom: 1px solid var(--v2-hair) !important; padding-bottom: var(--v2-sp-3) !important; margin-bottom: var(--v2-sp-5) !important; letter-spacing: .12em !important; } .theme-v2 .login-page #inviteCode { text-align: center; letter-spacing: .32em !important; font-family: var(--v2-font-num) !important; font-size: var(--v2-fs-lg) !important; padding: 12px 14px !important; } .theme-v2 .login-page .btn-primary { margin-top: var(--v2-sp-4) !important; } /* 功能陈列区 */ .theme-v2 .login-features { margin-top: var(--v2-sp-8) !important; } .theme-v2 .feature-title { font-family: var(--v2-font-serif) !important; font-size: var(--v2-fs-sm) !important; color: var(--v2-muted) !important; letter-spacing: .32em !important; font-weight: 500 !important; text-align: center !important; margin-bottom: var(--v2-sp-5) !important; position: relative; } .theme-v2 .feature-title::before, .theme-v2 .feature-title::after { content: ""; display: inline-block; vertical-align: middle; width: 24px; height: 1px; background: var(--v2-hair-2); margin: 0 12px; } .theme-v2 .features-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: var(--v2-sp-3) !important; } .theme-v2 .feature-item { background: var(--v2-surface) !important; border: 1px solid var(--v2-hair) !important; border-radius: var(--v2-r-sm) !important; padding: var(--v2-sp-4) var(--v2-sp-2) !important; transition: border-color var(--v2-t-1) var(--v2-ease-out) !important; } .theme-v2 .feature-item:hover { border-color: var(--v2-primary) !important; transform: none !important; } .theme-v2 .feature-icon { font-size: var(--v2-fs-2xl) !important; opacity: .78; margin-bottom: 6px !important; } .theme-v2 .feature-name { font-family: var(--v2-font-serif) !important; font-size: var(--v2-fs-xs) !important; color: var(--v2-ink-2) !important; letter-spacing: .12em !important; } /* 底部 footer */ .theme-v2 .login-footer { margin-top: var(--v2-sp-10) !important; text-align: center; } .theme-v2 .footer-text { font-family: var(--v2-font-serif) !important; font-size: var(--v2-fs-xs) !important; color: var(--v2-muted) !important; letter-spacing: .12em !important; margin-bottom: 8px !important; } .theme-v2 .footer-links { font-family: var(--v2-font-serif); font-size: var(--v2-fs-xs); letter-spacing: .12em; color: var(--v2-muted); } .theme-v2 .footer-link { color: var(--v2-ink-2) !important; cursor: pointer; transition: color var(--v2-t-1) var(--v2-ease-out); } .theme-v2 .footer-link:hover { color: var(--v2-primary) !important; } .theme-v2 .footer-divider { color: var(--v2-hair-2) !important; margin: 0 10px; } /* 邀请裂变横幅 */ .theme-v2 .referral-banner { background: rgba(201,151,74,.06) !important; border: 1px solid var(--v2-gold) !important; border-radius: var(--v2-r-sm) !important; color: var(--v2-ink-2) !important; font-family: var(--v2-font-serif) !important; font-size: var(--v2-fs-sm) !important; letter-spacing: .08em !important; padding: 10px 14px !important; margin-bottom: var(--v2-sp-4) !important; text-align: center; } .theme-v2 .referral-banner b { color: var(--v2-gold-2) !important; } /* ========================================================= * §14 · 首页 header / greeting / vip-badge（v2 版） * ========================================================= */ .theme-v2 .page-header { padding: var(--v2-sp-6) 0 var(--v2-sp-4) !important; border-bottom: 1px solid var(--v2-hair) !important; margin-bottom: var(--v2-sp-5) !important; } .theme-v2 .greeting { font-family: var(--v2-font-serif) !important; font-size: var(--v2-fs-2xl) !important; color: var(--v2-ink) !important; letter-spacing: .16em !important; font-weight: 500 !important; margin-bottom: 0 !important; } .theme-v2 .header-logo-img { width: 44px !important; height: 44px !important; border-radius: 50% !important; box-shadow: 0 0 0 1px var(--v2-hair-2) !important; border: none !important; background: var(--v2-surface); } .theme-v2 .user-info { font-family: var(--v2-font-serif) !important; font-size: var(--v2-fs-sm) !important; color: var(--v2-muted) !important; letter-spacing: .1em !important; gap: 8px; } .theme-v2 .vip-badge { background: transparent !important; color: var(--v2-gold-2) !important; border: 1px solid var(--v2-gold) !important; border-radius: 2px !important; padding: 2px 8px !important; font-family: var(--v2-font-serif) !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: .16em !important; box-shadow: none !important; } /* zone-grid 已在 §10 覆盖，此处补 icon 容器 & arrow 收敛 */ .theme-v2 .zone-header-icon { background: transparent !important; border: 1px solid var(--v2-hair-2) !important; border-radius: var(--v2-r-sm); width: 32px !important; height: 32px !important; font-size: var(--v2-fs-lg) !important; opacity: .8; } .theme-v2 .zone-action-icon { color: var(--v2-ink) !important; opacity: .78; font-size: var(--v2-fs-xl); } .theme-v2 .zone-action-arrow { color: var(--v2-muted) !important; font-family: var(--v2-font-serif); opacity: .5; } .theme-v2 .zone-action:hover .zone-action-arrow { color: var(--v2-primary) !important; opacity: 1; } /* 每日一言正文 */ .theme-v2 .tips-content { font-family: var(--v2-font-serif) !important; color: var(--v2-ink-2) !important; line-height: var(--v2-lh-body) !important; letter-spacing: .04em !important; font-size: var(--v2-fs-md) !important; } /* Hero 今日运势：分数配色收敛为墨 + 金 + 石绿 + 朱砂 */ .theme-v2 .hero-today-score { background: transparent !important; padding: 0 !important; min-width: 0 !important; } .theme-v2 .hero-today-score.hero-score-good .hero-score-num { color: var(--v2-good) !important; } .theme-v2 .hero-today-score.hero-score-mid .hero-score-num { color: var(--v2-gold-2) !important; } .theme-v2 .hero-today-score.hero-score-low .hero-score-num { color: var(--v2-bad) !important; } .theme-v2 .hero-yi, .theme-v2 .hero-ji { background: transparent !important; border: 1px solid var(--v2-hair) !important; border-radius: var(--v2-r-sm) !important; padding: 8px 10px !important; font-family: var(--v2-font-serif) !important; font-size: var(--v2-fs-sm) !important; color: var(--v2-ink-2) !important; letter-spacing: .04em !important; } .theme-v2 .hero-yi { border-left: 2px solid var(--v2-good) !important; } .theme-v2 .hero-ji { border-left: 2px solid var(--v2-bad) !important; } .theme-v2 .hero-yiji-tag { background: transparent !important; color: var(--v2-muted) !important; width: auto !important; height: auto !important; line-height: 1 !important; font-family: var(--v2-font-serif) !important; font-size: var(--v2-fs-xs) !important; letter-spacing: .12em !important; margin-right: 6px; } .theme-v2 .hero-yi .hero-yiji-tag { color: var(--v2-good) !important; } .theme-v2 .hero-ji .hero-yiji-tag { color: var(--v2-bad) !important; } .theme-v2 .hero-yiji-text { color: var(--v2-ink-2) !important; } .theme-v2 .hero-pos-item { background: transparent !important; border: 1px solid var(--v2-hair) !important; border-radius: var(--v2-r-sm) !important; padding: 5px 10px !important; font-family: var(--v2-font-serif) !important; font-size: var(--v2-fs-xs) !important; letter-spacing: .06em !important; } .theme-v2 .hero-pos-label { color: var(--v2-muted) !important; } .theme-v2 .hero-pos-val { color: var(--v2-ink) !important; font-weight: 500 !important; } .theme-v2 .hero-today-more { color: var(--v2-primary) !important; font-family: var(--v2-font-serif) !important; font-size: var(--v2-fs-sm) !important; letter-spacing: .1em !important; border-top: 1px solid var(--v2-hair) !important; padding-top: 10px !important; margin-top: 4px; } .theme-v2 .hero-today-more:hover { color: var(--v2-primary-2) !important; } /* ========================================================= * §15 · 通用 v1 消音：把 v1 里的强渐变/彩色小圆点在 v2 下压回来 * ========================================================= */ .theme-v2 .btn-primary::after { display: none !important; } .theme-v2 .zone-hot-dot, .theme-v2 .hero-score-num, .theme-v2 .greeting { background: transparent !important; -webkit-text-fill-color: initial !important; } /* 免责声明覆盖 */ .theme-v2 .disclaimer { border-left: none !important; background: transparent !important; }