/* ========================================================================== Aeon · lifedesk-ui 风格 3「1999 电影级旧味」(Y2K aged cinema) theme.css — CSS 变量 · 双主题(paper 白昼胶片 / ink 午夜胶片) · 共享组件 用法： 切换主题： 或去掉属性即为浅色 ========================================================================== */ /* ---------- 浅色 · 白昼胶片（干净版：低噪 · 高对比 · 暖白） ---------- */ :root{ --bg: #efe9dd; /* 暖白底（原土黄 #e3d5ba，降饱和提亮） */ --bg-2: #e6ded0; --surface: #fdfbf7; /* 卡片近暖白，与底色拉开层次 */ --surface-2: #f2ece2; --ink: #241a10; --ink-soft: #5c4a33; /* 加深：与卡面对比 ~8.5:1 */ --ink-faint: #7d6a4e; /* 加深：原 #97805a 仅 3.1:1 → 现 ~4.9:1 */ --amber: #a4702a; /* 加深：原 #b97f2e 仅 3.0:1 → 现 ~4.6:1 */ --amber-hi: #c08a45; --amber-deep:#7d5220; --wine: #8c2b25; /* 酒红点缀 */ --line: rgba(59,38,14,.20); --line-soft: rgba(59,38,14,.10); --block: #2b1c0d; /* 硬边色块 */ --block-ink: #fdfbf7; --glow: rgba(160,112,42,.38); --shadow: rgba(43,28,13,.16); /* 更轻盈的原色阴影 */ /* 胶片质感层在浅色下大幅收敛——原值偏重会让小屏显"脏" */ --grain-op: .12; /* 原 .30 */ --vign-c: rgba(28,16,4,.14); /* 原 .34 */ --leak-op: .16; /* 原 .45 */ --photo-heat: sepia(.18) saturate(.95) contrast(.98); --radius: 16px; /* 原 14，更现代 */ --radius-s: 10px; /* 原 8 */ --hairline: 1px solid var(--line); --font-serif: Georgia,'Times New Roman','Songti SC','SimSun',serif; --font-sans: 'Helvetica Neue',-apple-system,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif; --font-mono: 'Courier New',Courier,ui-monospace,monospace; color-scheme: light; } /* ---------- 深色 · 午夜胶片（Kodak Portra 夜扫） ---------- */ [data-theme="dark"]{ --bg: #1c1106; --bg-2: #241708; --surface: #2a1b0c; --surface-2: #32220f; --ink: #ead9b6; --ink-soft: #c2a575; --ink-faint: #8d744c; --amber: #d4a053; --amber-hi: #e8bd7d; --amber-deep:#a8743c; --wine: #b1463a; /* 深底下酒红提亮，保对比 */ --line: rgba(234,217,182,.20); --line-soft: rgba(234,217,182,.10); --block: #e8d5ac; --block-ink: #2b1c0c; --glow: rgba(232,189,125,.45); --shadow: rgba(0,0,0,.55); --grain-op: .50; --vign-c: rgba(6,3,0,.62); --leak-op: .60; --photo-heat: sepia(.15) saturate(.9) contrast(.98) brightness(.92); color-scheme: dark; } /* ---------- 基底 ---------- */ *{ box-sizing:border-box; margin:0; padding:0 } html,body{ min-height:100% } body{ background: radial-gradient(120% 100% at 50% 0%, var(--bg-2), var(--bg) 60%); color:var(--ink); font-family:var(--font-sans); font-size:15px; line-height:1.65; -webkit-font-smoothing:antialiased; /* 移动端：禁止 iOS 横屏自动放大字号、禁用下拉橡皮筋（更像原生 App） */ -webkit-text-size-adjust:100%; text-size-adjust:100%; overscroll-behavior-y:none; overflow-x:clip; } /* 标题/长串不断行导致横向溢出 */ h1,h2,h3,h4,b,small{ overflow-wrap:anywhere } img,svg,video,canvas{ max-width:100% } ::selection{ background:var(--amber); color:var(--block-ink) } a{ color:inherit } button{ font:inherit } svg.ic{ width:20px;height:20px;flex:none; fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round } /* ---------- 胶片质感层（六层叠加，fixed 全局） ---------- */ .fx{ position:fixed; inset:0; pointer-events:none } /* ① 35mm 颗粒 + ⑥ gate weave 微晃动 */ .fx-grain{ z-index:90; opacity:var(--grain-op); mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.9 0 0 0 0 0.8 0 0 0 0 0.6 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E"); animation:weave 1.5s steps(3) infinite; } /* ③ 暗角 */ .fx-vignette{ z-index:91; background:radial-gradient(125% 95% at 50% 42%, transparent 52%, var(--vign-c) 100%); } /* ④ 漏光（右缘琥珀条 + 角部橙红渗光） */ .fx-leak{ z-index:89; mix-blend-mode:screen; opacity:var(--leak-op); background: radial-gradient(45% 60% at 106% 6%, rgba(255,138,60,.34), transparent 62%), radial-gradient(30% 40% at -6% 96%, rgba(255,96,40,.20), transparent 60%), linear-gradient(100deg, transparent 96.5%, rgba(255,150,70,.30) 99%, rgba(255,170,90,.42) 100%); } @keyframes weave{ 0%{ transform:translate(0,0) } 33%{ transform:translate(-.7px,.5px) } 66%{ transform:translate(.6px,-.6px) } 100%{ transform:translate(0,0) } } @media (prefers-reduced-motion: reduce){ .fx-grain{ animation:none } } /* ---------- 排版工具 ---------- */ .h-serif{ font-family:var(--font-serif); font-weight:700; letter-spacing:.01em } .num{ font-family:var(--font-mono); letter-spacing:-.02em; font-variant-numeric:tabular-nums } .smallcaps{ font-variant:small-caps; letter-spacing:.22em; text-transform:uppercase; font-size:11px; color:var(--ink-faint) } .hal{ text-shadow:0 0 22px var(--glow), 0 0 3px var(--glow) } /* ② 柔化光晕 */ /* ---------- 布局骨架 ---------- */ .app{ display:flex; min-height:100vh } .side{ width:236px; flex:0 0 236px; position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:26px 18px 20px; background:var(--surface); border-right:var(--hairline); } .side .brand{ display:flex; align-items:center; gap:12px; padding:0 6px } .side .brand img{ width:40px;height:40px;border-radius:10px;box-shadow:0 2px 10px var(--shadow) } .side .brand b{ font-family:var(--font-serif); font-size:20px; letter-spacing:.06em } .side .brand span{ display:block; font-family:var(--font-mono); font-size:10px; color:var(--ink-faint); letter-spacing:.24em } .nav{ display:flex; flex-direction:column; gap:3px; margin-top:28px } .nav a{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; color:var(--ink-soft); text-decoration:none; font-size:14px; border:1px solid transparent; transition:.18s; } .nav a:hover{ color:var(--ink); background:var(--surface-2) } .nav a.on{ color:var(--amber-hi); background:var(--surface-2); border-color:var(--line); box-shadow:inset 3px 0 0 var(--amber); } .side-foot{ margin-top:auto; display:flex; flex-direction:column; gap:14px } .moonbox{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-top:var(--hairline); padding-top:16px } .moonbox svg{ width:26px;height:26px } .moonbox .num{ font-size:12px; color:var(--ink-soft) } .main{ flex:1; min-width:0; padding:38px 46px 130px } .wrap{ max-width:1060px; margin:0 auto } /* ---------- 通用组件 ---------- */ .btn{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:var(--radius-s); border:var(--hairline); background:var(--surface); color:var(--ink); font-size:13.5px; cursor:pointer; transition:.18s; white-space:nowrap; } .btn:hover{ box-shadow:0 0 0 1px var(--amber), 0 0 16px var(--glow); transform:translateY(-1px) } .btn:active{ transform:translateY(0) } .btn-primary{ background:var(--block); color:var(--block-ink); border-color:var(--block) } .btn-wine{ background:var(--wine); color:#f3e6cf; border-color:var(--wine) } .btn .ic{ width:16px;height:16px } .card{ position:relative; background:var(--surface); border:var(--hairline); border-radius:var(--radius); padding:22px; } /* 老式双边框 */ .frame{ border:1px solid var(--line); border-radius:var(--radius); box-shadow:inset 0 0 0 4px var(--surface), inset 0 0 0 5px var(--line-soft); } /* ---------- Aeon 风格弹窗（替换原生 confirm/alert/prompt） ---------- */ .modal-mask{ position:fixed; inset:0; z-index:500; display:none; align-items:center; justify-content:center; background:rgba(20,10,2,.55); backdrop-filter:blur(3px); padding:20px } .modal-mask.open{ display:flex } .modal{ background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); box-shadow:inset 0 0 0 4px var(--surface), inset 0 0 0 5px var(--line-soft), 0 12px 40px var(--shadow); max-width:400px; width:100%; padding:24px; position:relative; animation:modalIn .25s cubic-bezier(.2,.8,.2,1) } @keyframes modalIn{ from{ transform:translateY(14px) scale(.97); opacity:0 } to{ transform:none; opacity:1 } } .modal .m-title{ font-family:var(--font-serif); font-size:19px; font-weight:700; margin-bottom:10px; letter-spacing:.02em } .modal .m-msg{ font-size:14px; color:var(--ink-soft); line-height:1.7; margin-bottom:20px } .modal .m-input{ width:100%; background:var(--surface); border:var(--hairline); border-radius:var(--radius-s); color:var(--ink); padding:11px 14px; font-size:14px; font-family:inherit; outline:none; margin-bottom:18px } .modal .m-input:focus{ box-shadow:0 0 0 1px var(--amber), 0 0 14px var(--glow) } .modal .m-actions{ display:flex; gap:10px; justify-content:flex-end } .modal .m-actions .btn{ min-width:86px; justify-content:center } .modal .m-close{ position:absolute; top:12px; right:14px; background:none; border:none; color:var(--ink-faint); font-size:18px; cursor:pointer; padding:4px } .modal .m-close:hover{ color:var(--ink) } /* ---------- Aeon 胶片风日历组件 ---------- */ .aeon-cal{ position:fixed; z-index:600; display:none; width:248px; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:14px; box-shadow:inset 0 0 0 3px var(--surface), inset 0 0 0 4px var(--line-soft), 0 16px 44px var(--shadow); font-family:var(--font-serif) } .aeon-cal.open{ display:block; animation:modalIn .2s cubic-bezier(.2,.8,.2,1) } .aeon-cal .cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px } .aeon-cal .cal-title{ font-size:14px; font-weight:700; color:var(--ink); letter-spacing:.04em } .aeon-cal .cal-prev,.aeon-cal .cal-next{ background:none; border:none; color:var(--amber); font-size:20px; cursor:pointer; padding:2px 8px; line-height:1 } .aeon-cal .cal-prev:hover,.aeon-cal .cal-next:hover{ color:var(--amber-hi) } .aeon-cal .cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:6px } .aeon-cal .cal-dow{ text-align:center; font-family:var(--font-mono); font-size:9px; color:var(--ink-faint); padding:3px 0; letter-spacing:.05em } .aeon-cal .cal-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px } .aeon-cal .cal-d{ text-align:center; font-size:12.5px; color:var(--ink-soft); padding:6px 0; border-radius:7px; cursor:pointer; transition:.12s } .aeon-cal .cal-d:hover{ background:var(--surface-2); color:var(--ink) } .aeon-cal .cal-d.today{ background:var(--amber); color:var(--block-ink); font-weight:700; box-shadow:0 0 10px var(--glow) } .aeon-cal .cal-d.empty{ cursor:default } .aeon-cal .cal-foot{ display:flex; justify-content:flex-end; margin-top:8px; padding-top:8px; border-top:var(--hairline) } .aeon-cal .cal-today{ background:none; border:none; color:var(--amber); font-size:11px; cursor:pointer; font-family:var(--font-mono); letter-spacing:.12em } .aeon-cal .cal-today:hover{ color:var(--amber-hi); text-decoration:underline } /* ---------- Aeon 页面字幕（电影旁白） ---------- */ .aeon-subtitle{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); max-width:min(560px,88vw); text-align:center; z-index:90; pointer-events:none; font-family:var(--font-serif); font-style:italic; font-size:clamp(13px,2.2vw,16px); color:var(--ink-soft); letter-spacing:.04em; line-height:1.7; opacity:0; transition:opacity .8s ease; text-shadow:0 1px 12px var(--bg), 0 0 24px var(--bg) } .aeon-subtitle.visible{ opacity:.78 } .aeon-subtitle::before,.aeon-subtitle::after{ content:"❝"; color:var(--amber); opacity:.4; font-size:11px; vertical-align:super; margin:0 6px; letter-spacing:0 } .aeon-subtitle::after{ content:"❞" } /* ---------- Aeon 数字步进输入（替代原生 number 箭头） ---------- */ .num-stepper{ position:relative; display:inline-flex; align-items:center } .num-stepper input{ padding-right:34px } .num-stepper .ns-arrows{ position:absolute; right:3px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; height:26px; width:18px } .num-stepper .ns-arrows button{ flex:1; display:flex; align-items:center; justify-content:center; background:none; border:none; color:var(--ink-faint); cursor:pointer; padding:0; font-size:8px; line-height:1 } .num-stepper .ns-arrows button:hover{ color:var(--amber-hi) } .num-stepper .ns-arrows button.up{ border-bottom:1px solid var(--line-soft) } /* ---------- Aeon tooltip（悬停提示，替代原生 title） ---------- */ [data-tip]{ position:relative } [data-tip]:hover::after{ content:attr(data-tip); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:var(--surface-2); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:6px 10px; font-size:11px; font-family:var(--font-serif); letter-spacing:.02em; white-space:nowrap; z-index:300; box-shadow:0 4px 16px var(--shadow), inset 0 0 0 1px var(--line-soft); pointer-events:none; animation:tipIn .18s ease } [data-tip]:hover::before{ content:""; position:absolute; bottom:calc(100% + 3px); left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--line); z-index:301; pointer-events:none } @keyframes tipIn{ from{ opacity:0; transform:translateX(-50%) translateY(4px) } to{ opacity:1; transform:translateX(-50%) translateY(0) } } @media (max-width:880px){ [data-tip]:hover::after{ display:none } } /* 触屏不显示 tooltip */ /* 斜切贴纸（克制使用） */ .sticker{ position:absolute; top:-11px; right:14px; transform:rotate(6deg); background:var(--wine); color:#f3e6cf; font-family:var(--font-serif); font-size:10.5px; letter-spacing:.14em; padding:4px 11px; border-radius:3px; box-shadow:2px 3px 0 var(--shadow); text-transform:uppercase; } /* 章节头：衬线大题 + 等宽英文卷号 + 发丝线 */ .sec-head{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:40px 0 18px; padding-bottom:12px; border-bottom:var(--hairline); } .sec-head h2{ font-family:var(--font-serif); font-size:23px; font-weight:700 } .sec-head .en{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-faint) } .sec-head .sp{ flex:1 } /* 进度条（胶片色渐层 + 光渗） */ .pbar{ height:8px; border-radius:99px; background:var(--line-soft); overflow:visible; position:relative } .pbar>i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--amber-deep), var(--amber-hi)); box-shadow:0 0 10px var(--glow); transition:width .8s cubic-bezier(.2,.8,.2,1); } .pbar .mark{ /* 匀速参考刻线 */ position:absolute; top:-4px; bottom:-4px; width:1px; background:var(--ink-faint); } .pbar .mark::after{ content:attr(data-t); position:absolute; top:-16px; left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:9px; color:var(--ink-faint); white-space:nowrap; } /* 票券（今天要处理） */ .ticket{ position:relative; display:flex; align-items:center; gap:14px; background:var(--surface); border:var(--hairline); border-radius:8px; padding:14px 16px 14px 22px; transition:.18s; } .ticket::before{ /* 撕票线 */ content:""; position:absolute; left:10px; top:8px; bottom:8px; border-left:2px dashed var(--line); } .ticket:hover{ box-shadow:0 4px 18px var(--shadow) } .ticket .t-ic{ width:34px;height:34px;border-radius:50%;flex:none; display:flex;align-items:center;justify-content:center; border:1px solid var(--line); color:var(--amber) } .ticket .t-body{ flex:1; min-width:0 } .ticket .t-body b{ font-size:14.5px } .ticket .t-body small{ display:block; color:var(--ink-faint); font-size:12px; margin-top:1px } .ticket.overdue{ border-color:var(--wine) } .ticket.overdue .t-ic{ background:var(--wine); border-color:var(--wine); color:#f3e6cf } .tag{ flex:none; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; padding:3px 8px; border-radius:3px; border:1px solid var(--line); color:var(--ink-soft); text-transform:uppercase; } .tag-p0{ background:var(--wine); border-color:var(--wine); color:#f3e6cf } .tag-p1{ background:var(--amber-deep); border-color:var(--amber-deep); color:#f3e6cf } .tag-p2{ color:var(--ink-faint) } /* 表单控件 */ .field{ display:flex; flex-direction:column; gap:6px } .field>label{ font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint) } .input,select.input{ width:100%; padding:10px 12px; border-radius:var(--radius-s); border:var(--hairline); background:var(--surface); color:var(--ink); font:inherit; outline:none; transition:.18s; } .input:focus{ box-shadow:0 0 0 1px var(--amber), 0 0 14px var(--glow); border-color:var(--amber) } .amount-input{ font-family:var(--font-mono); font-size:26px; letter-spacing:-.03em } /* 点选分类 chips */ .chips{ display:flex; flex-wrap:wrap; gap:8px } .chip{ display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:99px; cursor:pointer; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); font-size:13px; transition:.15s; } .chip .ic{ width:16px;height:16px } .chip:hover{ color:var(--ink); border-color:var(--amber) } .chip.on{ background:var(--block); color:var(--block-ink); border-color:var(--block) } /* 收支切换 */ .seg{ display:inline-flex; border:var(--hairline); border-radius:99px; overflow:hidden } .seg button{ padding:9px 22px; background:transparent; border:0; color:var(--ink-soft); cursor:pointer; font-size:13.5px; transition:.15s; } .seg button.on{ background:var(--block); color:var(--block-ink) } /* 流水列表 */ .flow{ display:flex; flex-direction:column } .flow-row{ display:flex; align-items:center; gap:14px; padding:13px 6px; border-bottom:1px solid var(--line-soft); transition:.15s; } .flow-row:hover{ background:var(--surface-2) } .flow-row .f-ic{ width:36px;height:36px;border-radius:50%;flex:none; display:flex;align-items:center;justify-content:center; border:1px solid var(--line); color:var(--amber) } .flow-row .f-body{ flex:1; min-width:0 } .flow-row .f-body b{ font-size:14px; font-weight:600 } .flow-row .f-body small{ display:block; color:var(--ink-faint); font-size:11.5px } .flow-row .f-amt{ font-family:var(--font-mono); font-size:16px; letter-spacing:-.02em } .flow-row .f-amt.in{ color:var(--amber) } .flow-row .f-amt.out{ color:var(--ink) } /* 电影齿孔横幅 */ .filmstrip{ position:relative; background:var(--block); border-radius:10px; padding:16px 14px; border:1px solid var(--line); box-shadow:0 6px 24px var(--shadow); } .filmstrip::before,.filmstrip::after{ content:""; position:absolute; left:14px; right:14px; height:8px; background-image:radial-gradient(circle 2.6px at 8px 4px, var(--surface) 96%, transparent); background-size:22px 8px; background-repeat:repeat-x; } .filmstrip::before{ top:5px } .filmstrip::after{ bottom:5px } .filmstrip .still{ width:100%; height:128px; object-fit:cover; object-position:50% 32%; display:block; border-radius:4px; filter:var(--photo-heat); } /* 图表通用 */ .chart-box{ width:100%; overflow-x:auto } .chart-box svg{ display:block; max-width:100%; height:auto } .legend{ display:flex; flex-direction:column; gap:9px } .legend li{ display:flex; align-items:center; gap:10px; list-style:none; font-size:13px } .legend .dot{ width:10px;height:10px;border-radius:2px;flex:none } .legend .num{ margin-left:auto; color:var(--ink-soft) } /* 移动端底导航（旧的手工 tabbar 退役，改由 .side 统一变形，见下方 media） */ .tabbar{ display:none } /* ---------- 图表 / 插画用的暖色色阶（两套主题各一套，杜绝跨主题串色） ---------- 之前部分页面把深色主题的琥珀值（#d4a053 / #8b5a2b 等）写死在 SVG 里， 浅色主题下就成了突兀的棕色残留。统一走下面这些 class。 */ .c-1{fill:var(--amber-hi)} .s-1{stroke:var(--amber-hi)} .c-2{fill:var(--amber)} .s-2{stroke:var(--amber)} .c-3{fill:var(--amber-deep)} .s-3{stroke:var(--amber-deep)} .c-4{fill:var(--wine)} .s-4{stroke:var(--wine)} .c-5{fill:var(--ink-soft)} .s-5{stroke:var(--ink-soft)} /* 同上，给 HTML 元素用的背景版本（图例 / 小色块） */ .bg-1{background:var(--amber-hi)} .bg-2{background:var(--amber)} .bg-3{background:var(--amber-deep)} .bg-4{background:var(--wine)} .bg-5{background:var(--ink-soft)} /* ---------- 主题切换入口（由 common/aeon-shell.js 统一注入） ---------- */ /* 说明：全站只有这一个来源，页面里不再各写一份，杜绝「时有时无」 */ .theme-x{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px 14px; min-height:40px; border-radius:var(--radius-s); border:var(--hairline); background:var(--surface); color:var(--ink-soft); font:inherit; font-size:13px; cursor:pointer; white-space:nowrap; transition:color .18s, border-color .18s, background .18s; } .theme-x:hover{ color:var(--ink); border-color:var(--amber); box-shadow:0 0 0 1px var(--amber) } /* ⚠️ 关键：内部的图标/文案容器必须收住宽度。 早期版本 SVG 未限宽时会撑到 145px，横向溢出把相邻的「更多」盖住并吞掉点击。 */ .theme-x > span{ display:inline-flex; align-items:center; justify-content:center; flex:none; max-width:100%; line-height:0; } .theme-x .ic{ width:17px;height:17px;color:var(--amber);flex:none } .theme-x .js-ttxt{ line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } /* 无侧栏页（登录 / 独立工具页）：右下浮动，高于胶片层(91) */ .theme-x.is-fab{ position:fixed; right:16px; bottom:16px; z-index:200; background:var(--surface); box-shadow:0 4px 18px var(--shadow); } /* 桌面側栏入口占满一行，位置固定不被挤压 */ .side-foot .theme-x{ width:100% } /* 以下两项由 common/aeon-shell.js 注入，移动端（≤880px）才显示 */ .nav-theme, .nav-more{ display:none } /* ---------- 「更多」抽屉 ---------- */ .aeon-sheet-mask{ position:fixed; inset:0; z-index:480; display:none; align-items:flex-end; justify-content:center; background:rgba(20,10,2,.5); backdrop-filter:blur(2px); } .aeon-sheet-mask.open{ display:flex } .aeon-sheet{ width:100%; max-width:520px; max-height:82vh; overflow-y:auto; background:var(--bg); border:1px solid var(--line); border-bottom:none; border-radius:18px 18px 0 0; padding:8px 18px calc(22px + env(safe-area-inset-bottom)); box-shadow:0 -8px 40px var(--shadow); animation:sheetUp .26s cubic-bezier(.2,.8,.2,1); -webkit-overflow-scrolling:touch; } @keyframes sheetUp{ from{ transform:translateY(100%) } to{ transform:none } } .sheet-handle{ width:42px; height:4px; border-radius:99px; background:var(--line); margin:0 auto 16px; cursor:pointer; } .sheet-block + .sheet-block{ margin-top:20px } .sheet-cap{ font-family:var(--font-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px; } .sheet-seg{ display:flex; gap:8px } .sheet-seg button{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:10px 12px; border-radius:var(--radius-s); border:var(--hairline); background:var(--surface); color:var(--ink-soft); font:inherit; font-size:13.5px; cursor:pointer; transition:.16s; } .sheet-seg button .ic{ width:18px;height:18px;color:var(--amber) } .sheet-seg button.on{ background:var(--block); color:var(--block-ink); border-color:var(--block); box-shadow:0 0 16px var(--glow); } .sheet-seg button.on .ic{ color:var(--block-ink) } .sheet-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px } .sheet-item{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; min-height:74px; padding:12px 6px; border-radius:var(--radius-s); border:var(--hairline); background:var(--surface); color:var(--ink-soft); text-decoration:none; font-size:12px; transition:.16s; text-align:center; } .sheet-item .ic{ width:22px;height:22px;color:var(--amber) } .sheet-item:hover{ color:var(--ink); border-color:var(--amber) } .sheet-item.on{ color:var(--block-ink); background:var(--block); border-color:var(--block); } .sheet-item.on .ic{ color:var(--block-ink) } .sheet-locked{ overflow:hidden } /* ---------- 移动端适配（竖屏单手 · 多断点） ---------- */ @media (max-width:880px){ /* ① 侧边栏 → 底部可横滑 Tab 栏（全站 11 个页面统一生效，无需改 HTML） */ .side{ position:fixed; left:0; right:0; bottom:0; top:auto; width:auto; flex:none; height:auto; flex-direction:row; padding:0; border-right:none; border-top:var(--hairline); padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -2px 22px var(--shadow); z-index:80; } .side .brand, .side .side-foot, .side .moonbox{ display:none } .side .nav{ flex-direction:row; margin-top:0; gap:0; width:100%; /* 不再横滑：底栏固定为 4 个一级入口 + 「更多」+ 主题切换，一排排得下 */ overflow:visible; padding:0 2px; } .side .nav::-webkit-scrollbar{ display:none } .side .nav a{ /* 等分剩余宽度（原来靠 min-width 挤出滚动，10 项时必然拥挤） */ flex:1 1 0; min-width:0; min-height:54px; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:7px 2px; font-size:10.5px; text-align:center; border:none; border-radius:0; color:var(--ink-faint); } /* 二级入口收进「更多」抽屉，桌面端不受影响（仍是完整 10 项侧栏） */ .side .nav a.nav-sub{ display:none } .side .nav a.nav-more{ display:flex } /* 给右下角的主题入口留位置，避免导航项滑到它下面 */ .side .nav{ padding:0 56px 0 2px } /* 主题入口脱离 nav 的 flex 流，绝对定位到底栏右端。 （放在 flex 流里时它撑出的宽度会盖住相邻的「更多」，吞掉点击） */ .side .nav .nav-theme{ position:absolute; right:2px; bottom:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; width:52px; height:54px; flex:none; padding:0; border:none; border-radius:0; background:transparent; color:var(--ink-faint); font:inherit; font-size:10px; cursor:pointer; -webkit-tap-highlight-color:transparent; overflow:hidden; } .side .nav .nav-theme .ic{ width:22px;height:22px;color:var(--amber) } .side .nav .nav-theme:active{ background:var(--surface-2) } .side .nav a:hover{ background:transparent } .side .nav a.on{ color:var(--amber); background:transparent; border:none; box-shadow:inset 0 3px 0 var(--amber); } .side .nav a .ic{ width:22px;height:22px } /* ② 主区留白：给底栏 + 安全区腾位置 */ .main{ padding:16px 14px calc(88px + env(safe-area-inset-bottom)) } .wrap{ max-width:100% } /* ③ 触控目标 ≥44px（原 36px 偏小、误触多） */ .btn{ padding:12px 18px; min-height:44px } .btn .ic{ width:18px;height:18px } .input,select.input{ padding:12px 14px; min-height:44px; font-size:16px } /* 16px 防 iOS 聚焦缩放 */ .chip{ padding:10px 14px; min-height:42px } .seg{ width:100% } .seg button{ flex:1; padding:11px 16px; min-height:42px } /* ④ 密度与呼吸感 */ .card{ padding:18px 16px } .flow-row{ gap:11px; padding:12px 4px } .flow-row .f-ic{ width:38px;height:38px;flex:none } .flow-row .f-amt{ font-size:15px; white-space:nowrap } .ticket{ gap:11px; padding:13px 14px 13px 18px } .ticket .t-ic{ width:36px;height:36px;flex:none } .sec-head{ margin:26px 0 13px } .sec-head h2{ font-size:19px } /* ⑤ 弹窗 → 底部抽屉（原生 App 手感） */ .modal-mask{ align-items:flex-end; padding:0 } .modal{ max-width:none; width:100%; border-radius:18px 18px 0 0; padding:20px 18px calc(20px + env(safe-area-inset-bottom)); animation:sheetIn .26s cubic-bezier(.2,.8,.2,1); } @keyframes sheetIn{ from{ transform:translateY(100%) } to{ transform:none } } .modal .m-actions .btn{ flex:1; min-width:0 } /* ⑥ 溢出兜底 */ .aeon-cal{ width:min(320px,92vw) } table{ display:block; width:100%; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch } .chart-box{ -webkit-overflow-scrolling:touch } .aeon-subtitle{ bottom:calc(72px + env(safe-area-inset-bottom)); max-width:90vw } /* ⑦ 触屏点击反馈（淡化而非取消，保留"点到了"的感知） */ *{ -webkit-tap-highlight-color:rgba(0,0,0,.05) } } /* ---------- 小屏手机（≤600px：进一步收紧） ---------- */ @media (max-width:600px){ body{ font-size:14.5px } .main{ padding:14px 12px calc(84px + env(safe-area-inset-bottom)) } .card{ padding:16px 14px; border-radius:14px } .sec-head h2{ font-size:18px } .side .nav a{ min-height:52px; font-size:10px; padding:6px 2px } .side .nav .nav-theme{ width:50px; height:52px; font-size:9.5px } .side .nav{ padding:0 52px 0 2px } .side .nav a .ic{ width:21px;height:21px } .ticket{ padding:12px 12px 12px 16px } .ticket .t-body b{ font-size:14px } .flow-row .f-body b{ font-size:13.5px } .flow-row .f-amt{ font-size:14.5px } .amount-input{ font-size:24px } .sticker{ font-size:10px; padding:3px 9px } } /* ---------- 超小屏（≤380px：iPhone SE / 老机型） ---------- */ @media (max-width:380px){ body{ font-size:14px } .main{ padding:12px 10px calc(80px + env(safe-area-inset-bottom)) } .side .nav a{ font-size:9.5px } .side .nav .nav-theme{ width:46px; font-size:9px } .side .nav{ padding:0 48px 0 2px } .btn{ padding:11px 14px } .sec-head{ gap:8px } .sec-head h2{ font-size:17px } .card{ padding:14px 12px } } /* ---------- 横屏矮适配（避免内容被过度压缩） ---------- */ @media (max-height:480px) and (orientation:landscape){ .side .nav a{ min-height:44px } .side .nav a .ic{ width:19px;height:19px } .main{ padding-bottom:calc(72px + env(safe-area-inset-bottom)) } } /* ---------- 尊重"减少动态效果"偏好 ---------- */ @media (prefers-reduced-motion: reduce){ *{ animation-duration:.01ms !important; transition-duration:.01ms !important } }