/* ========================================================================== 任务管理 —— 主题样式 theme.css v1.0（2026-11-11） 设计：描图 规范：research/design/DESIGN_SPEC.md 样稿：research/design/mockup.html 约定：开发者直接引用，不改类名；要补的写 app/static/css/app.css（在本文件之后引入）。 颜色一律引用变量；JS 不写颜色值，只设 data-level / data-kind / data-theme / is-* 类。 类名只增不改。 目录 1 设计变量（浅色：手账纸 · 墨字 · 三级提醒色） 2 深色变量（夜读） 3 基础与排版 4 骨架：页眉、导航、底部标签栏、页头、分节、面板 5 通用：按钮、徽标、标签、优先级、板块字、提醒等级 6 通用：列表行 item、空状态、提示条、进度条 7 表单：输入、分段、开关、复选、期月、重复行、随板块切换 8 首页 9 工作 10 生活 11 缴费：月份导航、合计、月历、账单列表、年度 12 政府：事项卡、倒计时 13 详情：步骤 / 材料 / 办理记录 / 键值 / 附件 / 付款面板 14 分类与设置 15 搜索 16 对话框、提示 toast 17 响应式 18 减弱动效 ========================================================================== */ /* 1. 设计变量（浅色，默认） ------------------------------------------------ */ :root { color-scheme: light; /* 纸、墨、线 */ --paper: #F4F3EE; /* 页面底：手账纸 */ --paper-2: #ECEBE4; /* 悬停、凹陷 */ --paper-3: #E3E1D9; /* 按下、标签底 */ --surface: #FDFDFB; /* 卡片、列表、面板 */ --surface-2: #F7F6F2; /* 面板内凹陷、表头 */ --glass: rgba(244, 243, 238, .9); --ink: #1F2329; /* 正文 14.2:1 */ --ink-2: #474D57; /* 次要 7.7:1 */ --ink-3: #646A74; /* 说明、计数 ≥4.5:1 */ --ink-4: #A3A7AE; /* 只做装饰：空值「—」、虚线、占位 */ --line: #E3E1D9; --line-2: #CFCCC2; /* 输入框边、复选框边 */ --dot: rgba(31, 35, 41, .07);/* 纸面点格 */ /* 强调：钢笔蓝（链接、主按钮、选中、焦点、进行中） */ --accent: #2F5AA8; --accent-ink: #284E93; --accent-wash: rgba(47, 90, 168, .08); --accent-wash-2: rgba(47, 90, 168, .15); --on-accent: #FFFFFF; /* 三级提醒（只表示紧急程度，不做装饰）。图形用前者，小字用 -ink */ --overdue: #C8402A; /* 朱：逾期 */ --overdue-ink: #A93421; --overdue-wash: rgba(200, 64, 42, .08); --near: #D9900F; /* 琥珀：临近（只做线与底） */ --near-ink: #875500; --near-wash: rgba(217, 144, 15, .14); --normal: #3E8A63; /* 松绿：正常、已完成、已付 */ --normal-ink: #2B6948; --normal-wash: rgba(62, 138, 99, .09); --on-normal: #FFFFFF; --focus: var(--accent); --shadow-1: 0 1px 2px rgba(31, 35, 41, .05); --shadow-2: 0 6px 24px rgba(31, 35, 41, .12), 0 1px 3px rgba(31, 35, 41, .08); --scrim: rgba(20, 22, 26, .38); /* 复选框勾（颜色随主题） */ --check-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --chev-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23646A74' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); /* 字体：只用本机字体 */ --font-sans: -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif; --font-ja: -apple-system, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", "Noto Sans CJK JP", var(--font-sans); --font-mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-num: 30px; /* 倒计时、合计大数字 */ --lh: 1.6; --lh-tight: 1.3; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --r-sm: 4px; --r: 6px; --r-lg: 10px; --r-pill: 999px; --ctl-h: 38px; /* 控件高度；手机 44px */ --wrap: 1200px; --header-h: 56px; --tabbar-h: 0px; /* 手机时 = 56px */ --dur: 140ms; --ease: cubic-bezier(.2, .7, .3, 1); } /* 2. 深色变量（夜读）：跟随系统 或 data-theme="dark"。两段内容相同，改一处同步另一处 ---- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --paper: #14161A; --paper-2: #1B1E23; --paper-3: #252930; --surface: #1C1F25; --surface-2: #23272E; --glass: rgba(20, 22, 26, .88); --ink: #E7E9ED; --ink-2: #BCC1CA; --ink-3: #8F96A3; --ink-4: #5A606B; --line: #2A2E36; --line-2: #3A3F49; --dot: rgba(231, 233, 237, .045); --accent: #7C9BE0; --accent-ink: #9DB4EC; --accent-wash: rgba(124, 155, 224, .12); --accent-wash-2: rgba(124, 155, 224, .22); --on-accent: #10131A; --overdue: #EC6B57; --overdue-ink: #F28B7A; --overdue-wash: rgba(236, 107, 87, .12); --near: #E3A63B; --near-ink: #EDBE68; --near-wash: rgba(227, 166, 59, .14); --normal: #5DB585; --normal-ink: #7DC9A0; --normal-wash: rgba(93, 181, 133, .12); --on-normal: #10131A; --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 8px 28px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4); --scrim: rgba(0, 0, 0, .55); --check-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%2310131A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --chev-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%238F96A3' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); } } :root[data-theme="dark"] { color-scheme: dark; --paper: #14161A; --paper-2: #1B1E23; --paper-3: #252930; --surface: #1C1F25; --surface-2: #23272E; --glass: rgba(20, 22, 26, .88); --ink: #E7E9ED; --ink-2: #BCC1CA; --ink-3: #8F96A3; --ink-4: #5A606B; --line: #2A2E36; --line-2: #3A3F49; --dot: rgba(231, 233, 237, .045); --accent: #7C9BE0; --accent-ink: #9DB4EC; --accent-wash: rgba(124, 155, 224, .12); --accent-wash-2: rgba(124, 155, 224, .22); --on-accent: #10131A; --overdue: #EC6B57; --overdue-ink: #F28B7A; --overdue-wash: rgba(236, 107, 87, .12); --near: #E3A63B; --near-ink: #EDBE68; --near-wash: rgba(227, 166, 59, .14); --normal: #5DB585; --normal-ink: #7DC9A0; --normal-wash: rgba(93, 181, 133, .12); --on-normal: #10131A; --shadow-1: 0 1px 2px rgba(0, 0, 0, .3); --shadow-2: 0 8px 28px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4); --scrim: rgba(0, 0, 0, .55); --check-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%2310131A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --chev-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%238F96A3' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); } /* 提醒等级：在任何元素上写 data-level="overdue|near|normal"（直接用 API 的 level 值） */ [data-level="overdue"] { --lv: var(--overdue); --lv-ink: var(--overdue-ink); --lv-wash: var(--overdue-wash); } [data-level="near"] { --lv: var(--near); --lv-ink: var(--near-ink); --lv-wash: var(--near-wash); } [data-level="normal"] { --lv: var(--normal); --lv-ink: var(--normal-ink); --lv-wash: var(--normal-wash); } /* 3. 基础与排版 ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh); color: var(--ink); background-color: var(--paper); background-image: radial-gradient(var(--dot) 1px, transparent 1.3px); background-size: 22px 22px; -webkit-font-smoothing: antialiased; padding-bottom: var(--tabbar-h); } :lang(ja) { font-family: var(--font-ja); } h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); font-weight: 600; } p { margin: 0 0 var(--sp-2); } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: var(--accent-ink); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } img, svg { max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } mark { background: var(--near-wash); color: inherit; border-radius: 2px; padding: 0 1px; } hr, .divider { border: 0; border-top: 1px solid var(--line); margin: var(--sp-4) 0; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); } ::selection { background: var(--accent-wash-2); } .num { font-variant-numeric: tabular-nums; } .mono { font-family: var(--font-mono); font-size: .92em; } .muted { color: var(--ink-3); } .nil { color: var(--ink-4); } /* 空值「—」 */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--sp-6); } /* 4. 骨架 ------------------------------------------------------------------ */ .app-header { position: sticky; top: 0; z-index: 30; background: var(--glass); -webkit-backdrop-filter: saturate(1.2) blur(8px); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--line); } .app-header__inner { display: flex; align-items: center; gap: var(--sp-4); height: var(--header-h); } .brand { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink); font-weight: 600; white-space: nowrap; } .brand:hover { text-decoration: none; } .brand__mark { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r); background: var(--ink); color: var(--paper); font-size: 14px; } .brand__name { font-size: var(--fs-md); letter-spacing: .04em; } .nav { display: flex; gap: 2px; } .nav__link { padding: 6px 12px; border-radius: var(--r); color: var(--ink-2); white-space: nowrap; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .nav__link:hover { background: var(--paper-2); color: var(--ink); text-decoration: none; } .nav__link.is-active { color: var(--ink); background: var(--paper-3); font-weight: 600; } .header-search { margin-left: auto; width: 220px; } .header-actions { display: flex; align-items: center; gap: var(--sp-2); } .tabbar { display: none; } /* 手机才显示，见 §17 */ .page { padding-top: var(--sp-6); padding-bottom: var(--sp-10); } .page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5); } .page-title { font-size: var(--fs-xl); letter-spacing: .02em; } .page-sub { color: var(--ink-3); font-size: var(--fs-sm); margin-top: 2px; } .page-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--sp-2); } .back-link { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); font-size: var(--fs-sm); margin-bottom: var(--sp-2); } .section { margin-bottom: var(--sp-6); } .section__head { display: flex; align-items: baseline; gap: var(--sp-2); margin: 0 2px var(--sp-2); } .section__title { font-size: var(--fs-md); font-weight: 600; } .section__count { font-size: var(--fs-xs); color: var(--ink-3); background: var(--paper-3); border-radius: var(--r-pill); padding: 0 7px; line-height: 18px; font-variant-numeric: tabular-nums; } .section__aside { margin-left: auto; font-size: var(--fs-sm); color: var(--ink-3); } .section__empty { color: var(--ink-3); font-size: var(--fs-sm); padding: var(--sp-3) var(--sp-4); border: 1px dashed var(--line-2); border-radius: var(--r-lg); } .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); } .panel + .panel { margin-top: var(--sp-4); } .panel__head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); } .panel__title { font-size: var(--fs-base); font-weight: 600; } .panel__count { color: var(--ink-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; } .panel__tools { margin-left: auto; display: flex; gap: var(--sp-2); } .panel__body { padding: var(--sp-4); } .panel__body--flush { padding: 0; } /* 5. 通用：按钮、徽标、标签、优先级、板块字、提醒 --------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--ctl-h); padding: 0 14px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-size: var(--fs-base); white-space: nowrap; text-decoration: none; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .btn:hover { background: var(--paper-2); text-decoration: none; } .btn:active { background: var(--paper-3); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; } .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; } .btn--primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); } .btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); } .btn--ghost:hover { background: var(--paper-2); color: var(--ink); } .btn--danger { color: var(--overdue-ink); border-color: var(--line-2); } .btn--danger:hover { background: var(--overdue-wash); border-color: var(--overdue); } .btn--ok { background: var(--normal); border-color: var(--normal); color: var(--on-normal); font-weight: 600; } .btn--ok:hover { filter: brightness(.95); } .btn--sm { height: 30px; padding: 0 10px; font-size: var(--fs-sm); } .btn--block { width: 100%; } .btn-group { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .icon-btn { display: inline-grid; place-items: center; width: var(--ctl-h); height: var(--ctl-h); border: 0; border-radius: var(--r); background: transparent; color: var(--ink-2); font-size: 17px; } .icon-btn:hover { background: var(--paper-2); color: var(--ink); } .icon-btn--sm { width: 28px; height: 28px; font-size: 14px; } .link-btn { border: 0; background: none; padding: 0; color: var(--accent-ink); font-size: inherit; } .link-btn:hover { text-decoration: underline; text-underline-offset: 3px; } .link-btn--danger { color: var(--overdue-ink); } /* 徽标：状态与说明。文字永远在，颜色只是辅助 */ .badge { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; border-radius: var(--r-sm); font-size: var(--fs-xs); line-height: 1; white-space: nowrap; color: var(--ink-2); background: var(--paper-3); vertical-align: 1px; } .badge--accent { color: var(--accent-ink); background: var(--accent-wash-2); } /* 进行中 */ .badge--warn { color: var(--near-ink); background: var(--near-wash); } /* 确认余额、等待中 */ .badge--danger { color: var(--overdue-ink); background: var(--overdue-wash); } .badge--ok { color: var(--normal-ink); background: var(--normal-wash); } /* 已付、已完成 */ .badge--muted { color: var(--ink-3); background: transparent; border: 1px solid var(--line-2); } /* 已结束、已归档、自动扣款 */ .badge--next { color: var(--ink-2); background: transparent; border: 1px dashed var(--line-2); } /* 下月 */ .tag { display: inline-block; font-size: var(--fs-xs); color: var(--ink-3); background: var(--paper-2); border-radius: var(--r-pill); padding: 0 8px; line-height: 20px; white-space: nowrap; } .tag::before { content: "#"; opacity: .6; margin-right: 1px; } /* 优先级：只显示高 / 低，中不显示 */ .prio { display: inline-block; font-size: var(--fs-xs); font-weight: 600; line-height: 18px; padding: 0 5px; border-radius: var(--r-sm); } .prio[data-p="2"] { color: var(--on-accent); background: var(--accent); } .prio[data-p="1"] { display: none; } .prio[data-p="0"] { color: var(--ink-3); border: 1px solid var(--line-2); font-weight: 400; } /* 板块字：工 / 生 / 缴 / 政，文字写在 HTML 里；颜色中性，颜色留给紧急程度 */ .kind { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line-2); border-radius: var(--r-sm); font-size: 12px; line-height: 1; color: var(--ink-2); background: var(--surface); } /* 提醒等级徽标与日期字 */ .lv { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--lv-ink, var(--ink-3)); white-space: nowrap; } .lv::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lv, var(--ink-4)); } .due { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--lv-ink, var(--ink-2)); } [data-level="normal"] .due, .due[data-level="normal"] { color: var(--ink-2); font-weight: 500; } .amount { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .amount--lg { font-size: var(--fs-lg); } .amount__approx { font-weight: 400; color: var(--ink-3); margin-right: 2px; font-size: .86em; } /* 约 */ .amount--nil { color: var(--ink-3); font-weight: 400; } /* 无金额 */ .days { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--lv-ink, var(--ink-2)); font-size: var(--fs-sm); } .days b { font-size: var(--fs-lg); font-weight: 700; margin-right: 1px; } [data-level="normal"] .days, .days[data-level="normal"] { color: var(--ink-2); } /* 6. 列表行 item、空状态、提示条、进度条 ------------------------------------ */ .list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; } .list--plain { background: transparent; border: 0; box-shadow: none; border-radius: 0; } .list > .item + .item, .list > li + li { border-top: 1px solid var(--line); } .list__sub { padding: 6px var(--sp-4); font-size: var(--fs-xs); color: var(--ink-3); background: var(--surface-2); border-top: 1px solid var(--line); letter-spacing: .05em; } .list > .list__sub:first-child { border-top: 0; } .item { position: relative; display: flex; align-items: center; gap: var(--sp-3); min-height: 52px; padding: 8px var(--sp-4) 8px 18px; transition: background var(--dur) var(--ease); } .item::before { /* 左侧提醒条 */ content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--lv, transparent); } .item[data-level="normal"]::before { opacity: .55; } .item[data-level="overdue"] { background: var(--overdue-wash); } .item:hover { background: var(--paper-2); } .item[data-level="overdue"]:hover { background: var(--overdue-wash); box-shadow: inset 0 0 0 999px var(--paper-2); } .item__check { flex: none; } .item__main { flex: 1; min-width: 0; display: block; color: inherit; } .item__main:hover { text-decoration: none; } a.item__main:hover .item__title { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); } .item__title { display: block; font-size: var(--fs-base); line-height: 1.45; overflow-wrap: anywhere; } .item__title .prio { margin-right: 6px; vertical-align: 1px; } .item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-2); margin-top: 2px; font-size: var(--fs-xs); color: var(--ink-3); } .item__side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; } .item__side-row { display: flex; align-items: center; gap: var(--sp-2); } .item__actions { flex: none; display: flex; gap: 4px; } .item.is-done .item__title { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-4); } .item.is-done, .item.is-archived { opacity: .78; } .item.is-done::before { display: none; } .item.is-new { animation: item-in 260ms var(--ease); } .empty { text-align: center; padding: var(--sp-10) var(--sp-4); color: var(--ink-3); } .empty__title { font-size: var(--fs-md); color: var(--ink-2); margin-bottom: 4px; } .empty__hint { font-size: var(--fs-sm); } .notice { display: flex; align-items: flex-start; gap: var(--sp-2); padding: 10px var(--sp-4); border-radius: var(--r-lg); font-size: var(--fs-sm); background: var(--accent-wash); color: var(--ink-2); border: 1px solid transparent; } .notice--warn { background: var(--near-wash); color: var(--ink); } .notice--muted { background: var(--surface-2); border-color: var(--line); } .notice--danger { background: var(--overdue-wash); color: var(--ink); } .notice__action { margin-left: auto; flex: none; } .meter { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--ink-3); } .meter__bar { height: 5px; border-radius: 3px; background: var(--paper-3); overflow: hidden; } .meter__fill { display: block; height: 100%; width: var(--v, 0%); background: var(--normal); border-radius: 3px; transition: width 240ms var(--ease); } .meter__value { font-variant-numeric: tabular-nums; color: var(--ink-2); } /* 7. 表单 ------------------------------------------------------------------ */ .input, .select, .textarea { display: block; width: 100%; min-height: var(--ctl-h); padding: 7px 10px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); color: var(--ink); font-size: var(--fs-base); line-height: 1.4; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .input::placeholder, .textarea::placeholder { color: var(--ink-3); opacity: .8; } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash-2); } .input[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--overdue); } .input:disabled, .select:disabled, .textarea:disabled { background: var(--surface-2); color: var(--ink-3); } .select { appearance: none; -webkit-appearance: none; padding-right: 30px; background: var(--surface) var(--chev-img) no-repeat right 8px center / 16px; } .textarea { min-height: 88px; resize: vertical; } .input--sm { min-height: 30px; padding: 4px 8px; font-size: var(--fs-sm); } .input--lg { min-height: 48px; font-size: var(--fs-md); padding: 10px 14px; } .input--search { padding-left: 32px; background: var(--surface) no-repeat 10px center / 15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.6' fill='none' stroke='%238F96A3' stroke-width='1.6'/%3E%3Cpath d='M10.5 10.5L14 14' stroke='%238F96A3' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); } .input--num { font-variant-numeric: tabular-nums; } input[type="date"].input { font-variant-numeric: tabular-nums; } .affix { display: flex; align-items: stretch; } .affix__pre, .affix__post { display: grid; place-items: center; padding: 0 10px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-3); font-size: var(--fs-sm); } .affix__pre { border-right: 0; border-radius: var(--r) 0 0 var(--r); } .affix__post { border-left: 0; border-radius: 0 var(--r) var(--r) 0; } .affix .input { border-radius: 0; } .affix .input:first-child { border-radius: var(--r) 0 0 var(--r); } .affix .input:last-child { border-radius: 0 var(--r) var(--r) 0; } .form { display: block; } .task-form { max-width: 780px; } .field { display: block; margin-bottom: var(--sp-4); min-width: 0; } .field__label { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: 5px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); } .field__label :lang(ja), .field__ja { font-weight: 400; color: var(--ink-3); font-size: var(--fs-xs); } .field__req { color: var(--overdue-ink); font-weight: 400; font-size: var(--fs-xs); } .field__opt { color: var(--ink-3); font-weight: 400; font-size: var(--fs-xs); } .field__hint { margin-top: 4px; font-size: var(--fs-xs); color: var(--ink-3); } .field__error { margin-top: 4px; font-size: var(--fs-xs); color: var(--overdue-ink); } .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-4); --show: grid; } .field-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .field-inline { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--ctl-h); font-size: var(--fs-base); } .fieldset { border: 0; margin: 0 0 var(--sp-4); padding: var(--sp-4) var(--sp-4) 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); min-width: 0; } .fieldset__legend { float: left; width: 100%; margin-bottom: var(--sp-3); padding: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); } .fieldset__legend + * { clear: both; } .form-section-title { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-3); margin: var(--sp-6) 0 var(--sp-3); letter-spacing: .06em; } .more { margin-bottom: var(--sp-4); } .more > summary { cursor: pointer; color: var(--accent-ink); font-size: var(--fs-sm); list-style: none; padding: 4px 0; } .more > summary::-webkit-details-marker { display: none; } .more > summary::before { content: "＋ "; } .more[open] > summary::before { content: "－ "; } .form-actions { position: sticky; bottom: calc(var(--tabbar-h) + 0px); z-index: 10; display: flex; gap: var(--sp-2); align-items: center; justify-content: flex-end; margin-top: var(--sp-6); padding: var(--sp-3) 0; background: linear-gradient(to top, var(--paper) 70%, transparent); } .form-actions__left { margin-right: auto; } /* 随板块切换：表单根 .task-form[data-kind=...]；字段写 data-for="bills gov"（空格分隔） */ .task-form [data-for] { display: none; --show: block; } .task-form .field-row[data-for], .task-form .month-picks[data-for] { --show: grid; } .task-form .field-inline[data-for] { --show: flex; } .task-form .field__label [data-for], .task-form .btn [data-for] { --show: inline; } .task-form[data-kind="work"] [data-for~="work"], .task-form[data-kind="life"] [data-for~="life"], .task-form[data-kind="bills"] [data-for~="bills"], .task-form[data-kind="gov"] [data-for~="gov"] { display: var(--show); } /* 分段选择（单选）：板块、周期、优先级 */ .seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: calc(var(--r) + 3px); background: var(--paper-3); } .seg__opt { position: relative; } .seg__opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .seg__opt > span { display: inline-flex; align-items: center; gap: 6px; height: calc(var(--ctl-h) - 6px); padding: 0 12px; border-radius: var(--r); color: var(--ink-2); font-size: var(--fs-sm); white-space: nowrap; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .seg__opt:hover > span { color: var(--ink); } .seg__opt input:checked + span { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-1); } .seg__opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; } .seg__opt input:disabled + span { opacity: .5; cursor: not-allowed; } .seg--block { display: flex; } .seg--block .seg__opt { flex: 1; } .seg--block .seg__opt > span { width: 100%; justify-content: center; } .seg--kind .seg__opt > span { height: 44px; font-size: var(--fs-base); } .seg--kind .kind { background: transparent; } /* 复选框（方 / 圆）。勾上 = 松绿 */ .check { appearance: none; -webkit-appearance: none; flex: none; margin: 0; width: 20px; height: 20px; border: 1.5px solid var(--line-2); border-radius: 5px; background: var(--surface); cursor: pointer; display: inline-grid; place-content: center; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .check:hover { border-color: var(--normal); } .check:checked { background: var(--normal) var(--check-img) center / 14px no-repeat; border-color: var(--normal); } .check:checked { animation: check-pop 180ms var(--ease); } .check--round { border-radius: 50%; width: 22px; height: 22px; } .check--lg { width: 24px; height: 24px; } .check:disabled { opacity: .5; cursor: not-allowed; } /* 开关：自动扣款、约 */ .switch { appearance: none; -webkit-appearance: none; flex: none; margin: 0; cursor: pointer; width: 38px; height: 22px; border-radius: 11px; background: radial-gradient(circle at 11px 50%, var(--surface) 8px, transparent 8.5px), var(--line-2); transition: background var(--dur) var(--ease); } .switch:checked { background: radial-gradient(circle at 27px 50%, var(--surface) 8px, transparent 8.5px), var(--accent); } /* 期月（固定資産税 4·7·12·2） */ .month-picks { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; --show: grid; } .pick { position: relative; } .pick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .pick > span { display: grid; place-items: center; height: 32px; border: 1px solid var(--line-2); border-radius: var(--r); font-size: var(--fs-sm); color: var(--ink-2); background: var(--surface); font-variant-numeric: tabular-nums; } .pick input:checked + span { background: var(--accent-wash-2); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; } .pick input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; } /* 重复行：步骤、材料、附件、其他日期 */ .repeater { display: grid; gap: 6px; } .repeater__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; align-items: center; } .repeater__row--2 { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.4fr) auto; } .repeater__handle { display: flex; flex-direction: column; } .repeater__handle .icon-btn { width: 24px; height: 17px; font-size: 10px; border-radius: 3px; } .repeater__add { justify-self: start; } .chips-input { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: var(--ctl-h); padding: 4px 6px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); } .chips-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash-2); } .chips-input input { flex: 1; min-width: 80px; border: 0; outline: 0; background: transparent; padding: 3px 4px; } .chips-input .tag button { border: 0; background: none; padding: 0 0 0 4px; color: var(--ink-3); font-size: 11px; } /* 8. 首页 ------------------------------------------------------------------ */ .home-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3) var(--sp-6); margin-bottom: var(--sp-5); } .home-date { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; } .home-weekday { font-size: var(--fs-md); color: var(--ink-2); margin-left: var(--sp-2); font-weight: 400; } .home-range { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; } .stats { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-left: auto; } .stat { display: flex; flex-direction: column; min-width: 84px; padding: 8px 14px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); color: inherit; } a.stat:hover { text-decoration: none; border-color: var(--line-2); } .stat__label { font-size: var(--fs-xs); color: var(--ink-3); } .stat__value { font-size: var(--fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; } .stat__value small { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-3); margin-left: 2px; } .stat[data-level="overdue"] { border-color: var(--overdue); background: var(--overdue-wash); } .stat[data-level="overdue"] .stat__value { color: var(--overdue-ink); } .stat--zero .stat__value { color: var(--ink-3); font-weight: 500; } .home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--sp-6); } .home-col { min-width: 0; } .section[data-sec="overdue"] .section__title { color: var(--overdue-ink); } .section[data-sec="today"] .section__title { font-size: var(--fs-lg); } .section[data-sec="today"] .list { border-color: var(--line-2); box-shadow: var(--shadow-2); } .section[data-sec="today"] .item { min-height: 58px; } .section[data-sec="today"] .item__title { font-size: var(--fs-md); font-weight: 500; } .section--ok .section__empty { border-style: solid; border-color: transparent; background: var(--normal-wash); color: var(--normal-ink); } /* 9. 工作 ------------------------------------------------------------------ */ .board { display: grid; gap: var(--sp-4); } .group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; } .group__head { display: flex; align-items: center; gap: var(--sp-2); padding: 10px var(--sp-4); cursor: pointer; list-style: none; background: var(--surface-2); border-bottom: 1px solid var(--line); } .group__head::-webkit-details-marker { display: none; } .group__head::before { content: ""; width: 16px; height: 16px; background: var(--chev-img) center / 16px no-repeat; transform: rotate(-90deg); transition: transform var(--dur) var(--ease); } .group[open] > .group__head::before { transform: none; } .group:not([open]) > .group__head { border-bottom: 0; } .group__name { font-weight: 600; font-size: var(--fs-md); } .group__count { font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; } .group__tools { margin-left: auto; display: flex; gap: 4px; } .group--closed { background: transparent; box-shadow: none; border-style: dashed; } .group--closed > .group__head { background: transparent; } .group--closed .group__name { color: var(--ink-3); font-weight: 500; } .project + .project { border-top: 1px solid var(--line); } .project__head { display: flex; align-items: center; gap: var(--sp-2); padding: 10px var(--sp-4) 2px; font-size: var(--fs-sm); color: var(--ink-2); } .project__name { font-weight: 600; } .project__name--system { color: var(--ink-3); font-weight: 500; } .project--closed { opacity: .7; } .project .list { border: 0; border-radius: 0; box-shadow: none; background: transparent; } .inline-add { display: flex; gap: var(--sp-2); padding: 4px var(--sp-4) 10px 18px; } .inline-add .input { min-height: 32px; font-size: var(--fs-sm); background: transparent; border-style: dashed; } .inline-add .input:focus { border-style: solid; background: var(--surface); } /* 10. 生活 ----------------------------------------------------------------- */ .life-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); max-width: 980px; } .quick-add { position: sticky; top: calc(var(--header-h) + 8px); z-index: 5; display: flex; gap: var(--sp-2); align-items: center; padding: 6px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-2); } .quick-add .input { border: 0; box-shadow: none; background: transparent; min-height: 44px; font-size: var(--fs-md); } .quick-add .input:focus { box-shadow: none; } .quick-add__more { display: flex; gap: 4px; flex: none; } .quick-add__extra { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2) 0; width: 100%; } .quick-add--open { flex-wrap: wrap; } .tag-filter { display: flex; flex-wrap: wrap; gap: 6px; } .chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); font-size: var(--fs-sm); white-space: nowrap; } .chip:hover { border-color: var(--ink-4); color: var(--ink); text-decoration: none; } .chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); } .chip__count { font-size: var(--fs-xs); opacity: .7; font-variant-numeric: tabular-nums; } .life-list .item { min-height: 48px; } /* 11. 缴费 ----------------------------------------------------------------- */ .month-nav { display: inline-flex; align-items: center; gap: 2px; } .month-nav__label { min-width: 120px; text-align: center; font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; } .month-nav__today { margin-left: var(--sp-2); } .bill-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); } .sum { padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); } .sum__label { font-size: var(--fs-xs); color: var(--ink-3); } .sum__value { font-size: var(--fs-num); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .sum__value small { font-size: var(--fs-md); font-weight: 500; margin-right: 2px; color: var(--ink-3); } .sum__note { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; } .sum--main { border-color: var(--line-2); box-shadow: var(--shadow-1); } .sum--unpaid .sum__value { color: var(--accent-ink); } .sum--paid .sum__value { color: var(--ink-2); font-weight: 600; } .bills-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); align-items: start; } .cal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; } .cal__dows, .cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } .cal__dow { padding: 6px 8px; font-size: var(--fs-xs); color: var(--ink-3); background: var(--surface-2); border-bottom: 1px solid var(--line); } .cal__dow:nth-child(n+6) { color: var(--ink-3); font-weight: 600; } .cal__day { min-height: 92px; padding: 4px 5px 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; } .cal__day:nth-child(7n) { border-right: 0; } .cal__grid > .cal__day:nth-last-child(-n+7) { border-bottom: 0; } .cal__day.is-weekend { background: var(--surface-2); } .cal__day.is-other { background: transparent; } .cal__day.is-other .cal__num { color: var(--ink-4); } .cal__num { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px; border-radius: 12px; font-size: var(--fs-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; } .cal__day.is-today .cal__num { background: var(--ink); color: var(--paper); font-weight: 700; } .cal__bills { display: grid; gap: 3px; margin-top: 2px; } .cal__bill { display: flex; align-items: baseline; gap: 4px; min-width: 0; padding: 2px 5px 2px 6px; border-radius: var(--r-sm); font-size: var(--fs-xs); line-height: 1.35; color: var(--ink); background: var(--lv-wash, var(--paper-2)); border-left: 3px solid var(--lv, var(--line-2)); } .cal__bill:hover { text-decoration: none; filter: brightness(.97); } .cal__bill-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal__bill-amt { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; } .cal__bill.is-paid { background: transparent; border-left-color: var(--normal); color: var(--ink-3); } .cal__bill.is-paid .cal__bill-title::before { content: "✓ "; color: var(--normal-ink); } .cal__bill.is-paid .cal__bill-amt { font-weight: 400; } .cal__daytotal { display: none; } .bill-list .item { min-height: 60px; } .bill__date { flex: none; width: 44px; text-align: center; line-height: 1.1; } .bill__day { display: block; font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--lv-ink, var(--ink)); } [data-level="normal"] .bill__day { color: var(--ink); } .bill__dow { display: block; font-size: var(--fs-xs); color: var(--ink-3); } .bill__action { flex: none; min-width: 92px; display: flex; justify-content: flex-end; } .pay-btn { height: 32px; padding: 0 12px; font-size: var(--fs-sm); border-color: var(--accent); color: var(--accent-ink); background: var(--surface); font-weight: 600; } .pay-btn:hover { background: var(--accent-wash); } .paid-state { display: flex; flex-direction: column; align-items: flex-end; font-size: var(--fs-xs); color: var(--normal-ink); line-height: 1.4; white-space: nowrap; } .paid-state .link-btn { font-size: var(--fs-xs); color: var(--ink-3); } .paid-state .link-btn:hover { color: var(--accent-ink); } .item.is-paid .item__title { color: var(--ink-2); } .item.is-paid .amount { color: var(--ink-3); font-weight: 500; } .item.is-paid::before { display: none; } .table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); } .table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .table th, .table td { padding: 9px var(--sp-4); text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; } .table thead th { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); background: var(--surface-2); } .table tbody tr:hover { background: var(--paper-2); } .table tfoot td { font-weight: 700; border-bottom: 0; background: var(--surface-2); } .table__num { text-align: right !important; font-variant-numeric: tabular-nums; } .table__bar { width: 30%; min-width: 120px; } .bar { display: block; height: 8px; border-radius: 4px; background: var(--paper-3); overflow: hidden; } .bar__paid { display: block; height: 100%; width: var(--v, 0%); background: var(--accent); border-radius: 4px; } /* 12. 政府 ----------------------------------------------------------------- */ .gov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); } .gov-card { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4) var(--sp-4) 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); color: inherit; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .gov-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: var(--r-lg) 0 0 var(--r-lg); background: var(--lv, var(--line)); } .gov-card[data-level="normal"]::before { opacity: .55; } .gov-card[data-level="overdue"] { border-color: var(--overdue); } .gov-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); text-decoration: none; } .gov-card.is-done { opacity: .75; } .gov-card__top { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--ink-3); } .gov-card__top .lv { margin-left: auto; } .gov-card__title { font-size: var(--fs-lg); font-weight: 600; line-height: 1.35; } .gov-card__stage { font-size: var(--fs-sm); color: var(--ink-2); } .gov-card__stage b { font-weight: 600; color: var(--ink); } .gov-card__meters { display: grid; gap: 6px; } .gov-card__office { font-size: var(--fs-xs); color: var(--ink-3); border-top: 1px dashed var(--line-2); padding-top: var(--sp-2); } .countdown { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .countdown__item { flex: 1 1 120px; padding: 8px 12px; border-radius: var(--r); background: var(--lv-wash, var(--surface-2)); min-width: 0; } .countdown__item[data-level="normal"] { background: var(--surface-2); } .countdown__label { display: block; font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .countdown__num { font-size: var(--fs-num); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--lv-ink, var(--ink)); letter-spacing: -.02em; } .countdown__unit { font-size: var(--fs-sm); color: var(--ink-2); margin-left: 2px; } .countdown__date { display: block; font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; } .countdown__item--nodate .countdown__num { font-size: var(--fs-lg); color: var(--ink-3); font-weight: 500; } .countdown--lg .countdown__item { padding: 12px 16px; } .countdown--lg .countdown__num { font-size: 40px; } /* 13. 详情 ----------------------------------------------------------------- */ .detail-head { margin-bottom: var(--sp-5); } .detail-head__row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-3); } .detail-title { font-size: var(--fs-xl); line-height: 1.35; flex: 1 1 320px; overflow-wrap: anywhere; } .detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-2); margin-top: 6px; font-size: var(--fs-sm); color: var(--ink-3); } .detail-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: start; } .detail__main, .detail__side { min-width: 0; display: grid; gap: var(--sp-4); } .detail__main > .panel + .panel, .detail__side > .panel + .panel { margin-top: 0; } .stage { display: flex; align-items: center; gap: var(--sp-2); padding: 10px var(--sp-4); font-size: var(--fs-sm); color: var(--ink-3); border-bottom: 1px solid var(--line); background: var(--surface-2); } .stage__value { color: var(--ink); font-weight: 600; font-size: var(--fs-base); } .stage .link-btn { margin-left: auto; font-size: var(--fs-xs); } .checklist { counter-reset: step; } .check-item { display: flex; gap: var(--sp-3); align-items: flex-start; padding: 10px var(--sp-4); border-top: 1px solid var(--line); } .checklist > .check-item:first-child { border-top: 0; } .check-item .check { margin-top: 1px; } .check-item__body { flex: 1; min-width: 0; } .check-item__title { display: block; line-height: 1.45; overflow-wrap: anywhere; cursor: pointer; } .checklist--steps .check-item__title::before { counter-increment: step; content: counter(step) ". "; color: var(--ink-3); font-variant-numeric: tabular-nums; } .check-item__sub { display: flex; flex-wrap: wrap; gap: 2px var(--sp-3); margin-top: 2px; font-size: var(--fs-xs); color: var(--ink-3); } .check-item__date { font-variant-numeric: tabular-nums; color: var(--normal-ink); } .check-item__note { color: var(--ink-3); } .check-item.is-done .check-item__title { color: var(--ink-3); } .check-item.is-current { background: var(--accent-wash); } .check-item.is-current .check-item__title { font-weight: 600; } .check-item__edit { flex: none; opacity: 0; transition: opacity var(--dur) var(--ease); } .check-item:hover .check-item__edit, .check-item:focus-within .check-item__edit { opacity: 1; } .log__add { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); background: var(--surface-2); } .log__list { padding: var(--sp-2) var(--sp-4) var(--sp-3); } .log__item { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: var(--sp-3); padding: 8px 0 8px 14px; } .log__item::before { content: ""; position: absolute; left: 0; top: 15px; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--surface); } .log__item::after { content: ""; position: absolute; left: 3.5px; top: 24px; bottom: -8px; width: 1px; background: var(--line); } .log__item:last-child::after { display: none; } .log__date { font-size: var(--fs-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; } .log__text { overflow-wrap: anywhere; } .log__del { opacity: 0; } .log__item:hover .log__del, .log__item:focus-within .log__del { opacity: 1; } .kv { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 8px var(--sp-3); margin: 0; font-size: var(--fs-sm); } .kv dt { color: var(--ink-3); } .kv dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } .kv__copy { margin-left: 6px; font-size: var(--fs-xs); } .attach { display: grid; gap: 6px; } .attach__item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); } .attach__label { font-weight: 500; } .attach__path { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); overflow-wrap: anywhere; flex: 1; min-width: 0; } .pay-panel { padding: var(--sp-4); display: grid; gap: var(--sp-3); } .pay-panel__amount { font-size: 36px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; } .pay-panel__amount small { font-size: var(--fs-md); color: var(--ink-3); font-weight: 500; } .pay-panel__state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); } .pay-panel__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); } .pay-panel__form .btn { grid-column: 1 / -1; } .task-note { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-base); } /* 14. 分类与设置 ----------------------------------------------------------- */ .cat-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); align-items: start; } .tree { font-size: var(--fs-base); } .tree__children { padding-left: 22px; border-left: 1px solid var(--line); margin-left: 12px; } .tree__row { display: flex; align-items: center; gap: var(--sp-2); min-height: 40px; padding: 2px var(--sp-2); border-radius: var(--r); } .tree__row:hover { background: var(--paper-2); } .tree__name { font-weight: 500; } .tree__node--root > .tree__row .tree__name { font-weight: 700; } .tree__count { font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; } .tree__actions { margin-left: auto; display: flex; gap: 2px; opacity: .35; transition: opacity var(--dur) var(--ease); } .tree__row:hover .tree__actions, .tree__row:focus-within .tree__actions { opacity: 1; } .tree__node.is-closed > .tree__row .tree__name { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-4); } .tree__node.is-system > .tree__row .tree__name { color: var(--ink-2); } .tree__rename { max-width: 240px; min-height: 30px; padding: 3px 8px; font-size: var(--fs-sm); } .tree__add { padding: 4px var(--sp-2) 8px; } .tree__add .link-btn { font-size: var(--fs-sm); } .settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); } /* 15. 搜索 ----------------------------------------------------------------- */ .search-hero { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); max-width: 760px; } .search-hero .input { min-height: 48px; font-size: var(--fs-md); } .search-filter { margin-bottom: var(--sp-4); } .search-count { font-size: var(--fs-sm); color: var(--ink-3); margin-bottom: var(--sp-2); } /* 16. 对话框、toast --------------------------------------------------------- */ .dialog { width: min(440px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-2); } .dialog::backdrop { background: var(--scrim); } .dialog[open] { animation: dialog-in 160ms var(--ease); } .dialog__title { padding: var(--sp-4) var(--sp-5) 0; font-size: var(--fs-lg); } .dialog__body { padding: var(--sp-3) var(--sp-5) var(--sp-4); color: var(--ink-2); font-size: var(--fs-base); } .dialog__options { display: grid; gap: var(--sp-2); padding: 0 var(--sp-5) var(--sp-4); } .dialog__option { display: flex; gap: var(--sp-3); align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r); cursor: pointer; } .dialog__option:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); } .dialog__option input { margin-top: 4px; accent-color: var(--accent); } .dialog__option small { display: block; color: var(--ink-3); font-size: var(--fs-xs); } .dialog__actions { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); } .toast-region { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 20px); transform: translateX(-50%); z-index: 60; display: grid; gap: var(--sp-2); width: min(520px, calc(100vw - 32px)); pointer-events: none; } .toast { display: flex; align-items: center; gap: var(--sp-3); padding: 10px 14px; border-radius: var(--r-lg); background: var(--ink); color: var(--paper); box-shadow: var(--shadow-2); font-size: var(--fs-sm); pointer-events: auto; animation: toast-in 180ms var(--ease); } .toast__action { margin-left: auto; flex: none; border: 0; background: none; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; padding: 4px; } .toast--error { background: var(--overdue); color: #fff; } @keyframes item-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } @keyframes check-pop { 50% { transform: scale(1.12); } } @keyframes dialog-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* 17. 响应式 --------------------------------------------------------------- */ @media (min-width: 1100px) { .home-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } .detail { grid-template-columns: minmax(0, 1fr) 340px; } .cat-layout { grid-template-columns: minmax(0, 1fr) 360px; } .life-layout { grid-template-columns: minmax(0, 1fr) 200px; } .life-layout .tag-filter { flex-direction: column; align-items: stretch; position: sticky; top: calc(var(--header-h) + 16px); } .life-layout .chip { justify-content: space-between; border-radius: var(--r); } } @media (min-width: 1500px) { .bills-layout { grid-template-columns: minmax(0, 1.5fr) minmax(360px, 1fr); } } @media (min-width: 1600px) { :root { --wrap: 1360px; } } @media (max-width: 1099px) { .header-search { width: 160px; } } @media (max-width: 899px) { :root { --tabbar-h: 58px; --header-h: 52px; } .nav { display: none; } .header-search { margin-left: auto; width: auto; flex: 1; max-width: 260px; } .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--glass); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--line); } .tabbar__link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; color: var(--ink-3); } .tabbar__link:hover { text-decoration: none; } .tabbar__icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r); border: 1px solid var(--line-2); font-size: 13px; color: var(--ink-2); } .tabbar__link.is-active { color: var(--ink); font-weight: 600; } .tabbar__link.is-active .tabbar__icon { background: var(--ink); border-color: var(--ink); color: var(--paper); } .stats { margin-left: 0; width: 100%; } .stat { flex: 1 1 0; min-width: 0; padding: 6px 10px; } .stat__value { font-size: var(--fs-lg); } .bill-summary { gap: var(--sp-2); } .sum { padding: var(--sp-2) var(--sp-3); } .sum__value { font-size: var(--fs-xl); } .cal__day { min-height: 74px; } } @media (max-width: 600px) { :root { --ctl-h: 44px; --fs-base: 16px; } /* 触控 44px；16px 防 iOS 放大 */ .wrap { padding-inline: var(--sp-4); } .page { padding-top: var(--sp-4); } .brand__name { display: none; } .btn--new .btn__text { display: none; } .stats { gap: 6px; } .stat { flex: 1 1 auto; padding: 6px 8px; min-width: 64px; } .stat__value { font-size: var(--fs-md); white-space: nowrap; } .page-title { font-size: var(--fs-lg); } .home-date { font-size: var(--fs-xl); } .item { gap: var(--sp-2); padding-right: var(--sp-3); } .item__meta .tag:nth-of-type(n+3) { display: none; } .field-row, .field-row--3 { grid-template-columns: minmax(0, 1fr); } .settings-grid { grid-template-columns: minmax(0, 1fr); } .month-picks { grid-template-columns: repeat(6, minmax(0, 1fr)); } .seg--kind { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; } .seg--kind .seg__opt > span { width: 100%; justify-content: center; } .bill-summary { grid-template-columns: 1fr 1fr; } .sum--main { grid-column: 1 / -1; } /* 月历：格子里只留圆点与当日合计，明细看下方列表 */ .cal__day { min-height: 54px; padding: 3px 2px; text-align: center; } .cal__bills { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; } .cal__bill { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--lv, var(--ink-3)); } .cal__bill.is-paid { background: var(--normal); opacity: .6; } .cal__bill-title, .cal__bill-amt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .cal__daytotal { display: block; font-size: 10px; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-top: 2px; } .bill__date { width: 34px; } .bill__action { min-width: 0; } .log__add { grid-template-columns: minmax(0, 1fr) auto; } .log__add .input[type="date"] { grid-column: 1 / -1; } .log__item { grid-template-columns: minmax(0, 1fr) auto; } .log__date { grid-column: 1 / -1; margin-bottom: -6px; } .countdown--lg .countdown__num { font-size: var(--fs-num); } .gov-grid { grid-template-columns: minmax(0, 1fr); } .repeater__row--2 { grid-template-columns: auto minmax(0, 1fr) auto; } .repeater__row--2 > :nth-child(3) { grid-column: 2; } .tree__actions { opacity: 1; } .check-item__edit, .log__del { opacity: 1; } .dialog__actions { flex-wrap: wrap; } .dialog__actions .btn { flex: 1 1 auto; } } /* 18. 减弱动效 ------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ===== v1.1 garbage ===== */ /* 垃圾回收页 /life/garbage + 首页「今天」段提示行。规范：DESIGN_SPEC §10；样稿：research/design/mockup-garbage.html 类色只在垃圾组件里用，表示「哪一类」，不表示紧急程度（紧急程度仍只用 data-level 三色）。 JS 只设 data-gc=""（API 原值），不写颜色值。sodai 与未知 / 缺省 token → 中性 --ink-3。 G1 类色变量 G2 类标 .gcat G3 首页提示行 .garbage-hint G4 今天 / 明天 G5 本周条 / 月历 G6 品目搜索 G7 各类卡片 G8 粗大受付、来源 G9 响应式（动效由 §18 统一关闭） */ /* G1 类色（6 个变量；浅色对 --surface 均 ≥5.1:1，图标字用 --surface 反白） */ :root { --garbage-burnable: #8A5A2B; /* 栗　燃やす */ --garbage-nonburnable: #47627F; /* 青鈍 不燃 */ --garbage-bottle: #23756F; /* 青竹 びん・かん */ --garbage-pet: #6B4FA0; /* 菫　ペットボトル */ --garbage-paper: #6E6A2E; /* 鶯茶 紙・布 */ --garbage-hazard: #A33A6B; /* 牡丹 有害 */ } /* 深色：提亮，图标字用深色 --surface 反白（均 ≥5.7:1）。两段内容相同，改一处同步另一处 */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --garbage-burnable: #D39A63; --garbage-nonburnable: #8FA8C4; --garbage-bottle: #5FB8AE; --garbage-pet: #A992D6; --garbage-paper: #B8B26A; --garbage-hazard: #D9799F; } } :root[data-theme="dark"] { --garbage-burnable: #D39A63; --garbage-nonburnable: #8FA8C4; --garbage-bottle: #5FB8AE; --garbage-pet: #A992D6; --garbage-paper: #B8B26A; --garbage-hazard: #D9799F; } /* data-gc → --gc（类色）/ --gc-wash（12% 底）。默认中性，先写 */ [data-gc] { --gc: var(--ink-3); --gc-wash: color-mix(in srgb, var(--gc) 12%, transparent); } [data-gc="burnable"] { --gc: var(--garbage-burnable); } [data-gc="nonburnable"] { --gc: var(--garbage-nonburnable); } [data-gc="bottle"] { --gc: var(--garbage-bottle); } [data-gc="pet"] { --gc: var(--garbage-pet); } [data-gc="paper"] { --gc: var(--garbage-paper); } [data-gc="hazard"] { --gc: var(--garbage-hazard); } /* G2 类标：方块字（icon）+ 名称。尺寸 --sm（日历）/ 默认 / --md（明天）/ --lg（今天） */ .gcat { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; vertical-align: middle; font-size: var(--fs-sm); line-height: 1.3; color: var(--ink); white-space: nowrap; } a.gcat:hover { text-decoration: none; } a.gcat:hover .gcat__name { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); } .gcat__icon { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: var(--r-sm); background: var(--gc, var(--ink-3)); color: var(--surface); font-family: var(--font-ja); font-size: 12px; font-weight: 700; line-height: 1; } .gcat__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .gcat__state { flex: none; font-size: var(--fs-xs); font-weight: 400; color: var(--ink-3); letter-spacing: 0; } .gcat--sm { gap: 4px; padding: 1px 6px 1px 1px; border-radius: var(--r-sm); background: var(--gc-wash, var(--paper-2)); font-size: var(--fs-xs); } .gcat--sm .gcat__icon { width: 16px; height: 16px; font-size: 10px; border-radius: 3px; } .gcat--md { gap: 8px; font-size: var(--fs-lg); font-weight: 600; } .gcat--md .gcat__icon { width: 28px; height: 28px; font-size: 15px; border-radius: var(--r); } .gcat--lg { gap: 10px; font-size: var(--fs-2xl); font-weight: 600; letter-spacing: .01em; } .gcat--lg .gcat__icon { width: 40px; height: 40px; font-size: 20px; border-radius: var(--r); } .gcat.is-passed .gcat__icon { opacity: .4; } .gcat.is-passed .gcat__name { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-4); text-decoration-thickness: 1px; } /* G3 首页提示行：放在 section[data-sec=today] 的 .section__head 之后、列表之前。安静：小字、无阴影、不用提醒色 */ .garbage-hint { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; height: 34px; margin: 0 0 var(--sp-2); padding: 0 10px 0 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .garbage-hint:hover { text-decoration: none; border-color: var(--line-2); background: var(--paper-2); } .garbage-hint__icon { flex: none; font-size: 14px; line-height: 1; filter: grayscale(1); opacity: .7; } .garbage-hint__dots { flex: none; display: inline-flex; gap: 3px; } .garbage-hint__dot { width: 8px; height: 8px; border-radius: 2px; background: var(--gc, var(--ink-3)); } .garbage-hint__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .garbage-hint__text b { font-weight: 600; color: var(--ink); } .garbage-hint__go { flex: none; color: var(--ink-4); font-size: var(--fs-md); line-height: 1; } .garbage-hint[data-when="tomorrow"] { background: transparent; border-style: dashed; border-color: var(--line-2); color: var(--ink-3); } .garbage-hint[data-when="tomorrow"] .garbage-hint__text b { color: var(--ink-2); font-weight: 500; } .garbage-hint[data-when="none"] { background: transparent; border-style: dashed; border-color: var(--line-2); color: var(--accent-ink); } /* /life 入口：无提示时 */ /* G4 今天 / 明天（页面顶部大字） */ .gb-today { display: grid; grid-template-columns: minmax(0, 1fr); margin-bottom: var(--sp-3); overflow: hidden; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--shadow-2); } .gb-day { min-width: 0; padding: var(--sp-4) var(--sp-5) var(--sp-5); } .gb-day--tomorrow { background: var(--surface-2); border-top: 1px solid var(--line); } .gb-day__label { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-3); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); } .gb-day__date { font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; } .gb-day__list { display: grid; gap: var(--sp-3); } .gb-day--tomorrow .gb-day__list { gap: var(--sp-2); } .gb-day__item { min-width: 0; } .gb-day__meta { display: flex; flex-wrap: wrap; gap: 0 var(--sp-3); margin: 2px 0 0 50px; font-size: var(--fs-sm); color: var(--ink-3); } .gb-day--tomorrow .gb-day__meta { margin-left: 36px; font-size: var(--fs-xs); } .gb-day__time { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .gb-day__none { margin: 0; font-size: var(--fs-xl); color: var(--ink-3); } .gb-day--tomorrow .gb-day__none { font-size: var(--fs-lg); } .gb-notes { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-3); } .gb-area { width: auto; min-width: 160px; } /* G5 本周条 / 月历（.gb-sched[data-mode=week|month] 切换） */ .gb-sched { margin: var(--sp-5) 0 var(--sp-6); } .gb-sched__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: 0 2px var(--sp-2); } .gb-sched__head .month-nav { margin-left: auto; } .gb-sched[data-mode="week"] .gb-sched__month, .gb-sched[data-mode="week"] .gb-sched__head .month-nav, .gb-sched[data-mode="month"] .gb-sched__week { display: none; } .gb-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); } .gb-week__day { min-width: 0; min-height: 112px; display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 10px; border-right: 1px solid var(--line); } .gb-week__day:last-child { border-right: 0; } .gb-week__day.is-weekend { background: var(--surface-2); } .gb-week__day.is-past > * { opacity: .5; } .gb-week__head { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--ink-3); } .gb-week__num { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px; border-radius: 12px; font-size: var(--fs-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; } .gb-week__day.is-today .gb-week__num { background: var(--ink); color: var(--paper); font-weight: 700; } .gb-week__day.is-today .gb-week__head { color: var(--ink); font-weight: 600; } .gb-week__cats, .gb-cal__cats { display: grid; gap: 4px; justify-items: start; min-width: 0; } .gb-cal__cats { gap: 3px; margin-top: 2px; } .gb-week__none { color: var(--ink-4); font-size: var(--fs-sm); } .gb-week__note, .gb-cal__note { display: block; font-size: 11px; line-height: 1.35; color: var(--ink-2); overflow-wrap: anywhere; } .gb-cal__note { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gb-week__note::before, .gb-cal__note::before { content: "※"; color: var(--ink-3); margin-right: 1px; font-size: 11px; } .gb-cal .cal__day { min-height: 84px; } .gb-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: var(--sp-2); padding: 0 2px; } /* G6 品目搜索：输入即查（防抖 150ms），结果 品目 → 类 → 出し方 */ .gb-search .input--search { max-width: 640px; } .gb-search__hint, .gb-search__count { margin: var(--sp-2) 2px; font-size: var(--fs-sm); color: var(--ink-3); } .gb-search__cats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 2px var(--sp-2); font-size: var(--fs-xs); color: var(--ink-3); } .gb-results { max-width: 760px; } .gb-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px var(--sp-3); padding: 10px var(--sp-4); } .gb-result__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2); min-width: 0; } .gb-result__name { font-size: var(--fs-md); font-weight: 600; overflow-wrap: anywhere; } .gb-result__kana { font-size: var(--fs-xs); color: var(--ink-3); } .gb-result__cat { display: flex; align-items: center; gap: 6px; justify-self: end; min-width: 0; } .gb-result__arrow { color: var(--ink-4); } .gb-result__how { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 var(--sp-3); font-size: var(--fs-sm); color: var(--ink-2); } .gb-result__note { color: var(--ink); font-weight: 500; } /* G7 各类卡片：左色条 = 类色；可收 / 不可收折叠 */ .gb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); align-items: start; } .gb-card { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; padding: var(--sp-4) var(--sp-4) var(--sp-3) 20px; scroll-margin-top: calc(var(--header-h) + 16px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); } .gb-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: var(--r-lg) 0 0 var(--r-lg); background: var(--gc, var(--line)); } .gb-card:target { border-color: var(--gc); box-shadow: 0 0 0 3px var(--gc-wash, var(--paper-3)), var(--shadow-1); } .gb-card__top { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; } .gb-card__top .gcat { font-size: var(--fs-md); font-weight: 600; } .gb-card__top .gcat__icon { width: 24px; height: 24px; font-size: 13px; } .gb-card__group { flex: none; padding: 0 5px; border: 1px solid var(--line-2); border-radius: var(--r-sm); font-size: var(--fs-xs); line-height: 18px; color: var(--ink-3); } .gb-card__next { margin-left: auto; flex: none; text-align: right; font-size: var(--fs-xs); line-height: 1.3; color: var(--ink-3); font-variant-numeric: tabular-nums; } .gb-card__next b { display: block; font-size: var(--fs-md); font-weight: 600; color: var(--ink); } .gb-card__rule { margin: 0; font-size: var(--fs-sm); font-weight: 500; color: var(--ink); } .gb-card .kv { grid-template-columns: 3.5em minmax(0, 1fr); gap: 4px var(--sp-3); } .gb-card__how { display: grid; gap: 2px; font-size: var(--fs-sm); color: var(--ink-2); } .gb-card__how li { position: relative; padding-left: 14px; } .gb-card__how li::before { content: ""; position: absolute; left: 3px; top: .68em; width: 5px; height: 5px; border-radius: 50%; background: var(--gc, var(--ink-4)); } .gb-card__note { margin: 0; font-size: var(--fs-xs); color: var(--ink-3); } .gb-fold { margin-top: 2px; padding-top: 4px; border-top: 1px dashed var(--line-2); } .gb-fold > summary { display: flex; align-items: center; gap: 4px; padding: 4px 0; cursor: pointer; list-style: none; font-size: var(--fs-sm); color: var(--accent-ink); } .gb-fold > summary::-webkit-details-marker { display: none; } .gb-fold > summary::after { content: ""; width: 16px; height: 16px; background: var(--chev-img) center / 16px no-repeat; transition: transform var(--dur) var(--ease); } .gb-fold[open] > summary::after { transform: rotate(180deg); } .gb-fold__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); padding: 2px 0 4px; } .gb-fold__title { margin-bottom: 2px; font-size: var(--fs-xs); color: var(--ink-3); } .gb-fold__list { display: grid; gap: 2px; font-size: var(--fs-sm); } .gb-fold__list li::before { content: "○"; margin-right: 5px; color: var(--ink-3); font-size: .85em; } .gb-fold__list--no li { color: var(--ink-2); } .gb-fold__list--no li::before { content: "✕"; } /* G8 粗大受付、问合せ、来源与查证日 */ .gb-bottom { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: start; margin-top: var(--sp-6); } .gb-sodai { scroll-margin-top: calc(var(--header-h) + 16px); } .gb-sodai .kv { grid-template-columns: 5em minmax(0, 1fr); } .gb-tel { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .gb-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; } .gb-flow li { position: relative; padding: 1px 8px; border-radius: var(--r-sm); background: var(--paper-2); } .gb-flow li + li::before { content: "→"; position: absolute; left: -17px; color: var(--ink-4); } .gb-source { display: grid; gap: 4px; padding: var(--sp-3) var(--sp-4); border: 1px dashed var(--line-2); border-radius: var(--r-lg); font-size: var(--fs-xs); color: var(--ink-3); } .gb-source__row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-2); } .gb-source a { overflow-wrap: anywhere; } .gb-source .more { margin: 2px 0 0; } .gb-source .more li { font-family: var(--font-mono); overflow-wrap: anywhere; } /* G9 响应式 */ @media (min-width: 720px) { .gb-today { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } .gb-day--tomorrow { border-top: 0; border-left: 1px solid var(--line); } } @media (min-width: 1100px) { .gb-bottom { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } } @media (max-width: 899px) { .gb-week__day { min-height: 96px; padding: 6px 5px 8px; } } @media (max-width: 600px) { .garbage-hint { height: 40px; } .gb-day { padding: var(--sp-3) var(--sp-4) var(--sp-4); } .gcat--lg { gap: 8px; font-size: var(--fs-xl); } .gcat--lg .gcat__icon { width: 34px; height: 34px; font-size: 17px; } .gb-day__meta { margin-left: 42px; } .gb-sched__head .seg { order: 3; } /* 本周条 / 月历：只留方块字，名称给读屏；注释只留 ※（全文在 title） */ .gb-week__day { min-height: 84px; align-items: center; gap: 4px; padding: 6px 2px 8px; text-align: center; } .gb-week__head { flex-direction: column; gap: 0; } .gb-week__cats, .gb-cal__cats { justify-items: center; } .gb-cal__cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; } .gb-week .gcat--sm, .gb-cal .gcat--sm { padding: 0; background: none; } .gb-week .gcat__name, .gb-cal .gcat__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .gb-week__note, .gb-cal__note { font-size: 0; } .gb-cal .cal__day { min-height: 60px; } .gb-cards { grid-template-columns: minmax(0, 1fr); } .gb-fold__body { grid-template-columns: minmax(0, 1fr); } .gb-result { grid-template-columns: minmax(0, 1fr); } .gb-result__cat { justify-self: start; } } /* ===== v1.3 garbage tile & images ===== */ /* 规范：DESIGN_SPEC §11；样稿：mockup-garbage.html「v1.3 磁贴・配图」视图。界面文字日文（契约 1.3）。 配图 = app/static/img/garbage/*.svg，**内联**进 HTML（不用 ： 里的 SVG 拿不到 currentColor 和 --gc，深色会糊）。 SVG 内部：线 = currentColor（由 .gb-img 设为 --ink-2），色块 = var(--gc)（由 data-gc 给），淡底 = var(--gc) 25%。 H1 补类色 plastic / battery H2 配图框 .gb-img H3 配图进垃圾页 H4 磁贴网格 .tile-grid / .tile H5 垃圾磁贴 .gb-tile H6 响应式 */ /* H1 补两个类色（数据里已有 color:"plastic" / "battery"，v1.1 未定义 → 曾退成中性灰）。浅色对 --surface ≥5.9:1，深色反白 ≥6.8:1 */ :root { --garbage-plastic: #1E6A8C; /* 縹 */ --garbage-battery: #4E5D78; /* 鈍色 */ } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --garbage-plastic: #6CB4D4; --garbage-battery: #9AA8C2; } } :root[data-theme="dark"] { --garbage-plastic: #6CB4D4; --garbage-battery: #9AA8C2; } [data-gc="plastic"] { --gc: var(--garbage-plastic); } [data-gc="battery"] { --gc: var(--garbage-battery); } /* H2 配图框： 尺寸 --sm 32 / 默认 40 / --lg 64；底 = 类色 12% 淡底（旧浏览器无底色），线 = --ink-2，深浅主题自动跟随 */ .gb-img { --s: 40px; flex: none; display: inline-grid; place-items: center; width: var(--s); height: var(--s); padding: calc(var(--s) * .1); border-radius: calc(var(--s) * .22); background: var(--gc-wash, var(--paper-2)); color: var(--ink-2); line-height: 0; } .gb-img > svg { display: block; width: 100%; height: 100%; } .gb-img--sm { --s: 32px; } .gb-img--lg { --s: 64px; } .gb-img.is-fallback { color: var(--ink-3); } /* 品目无图 → 用类图，线稍淡 */ .gb-img.is-passed { opacity: .4; } /* 今日の収集が終わった類 */ .gb-img--none { background: transparent; border: 1px dashed var(--line-2); } /* 无品目图且无类（市の収集外） */ .gb-img--none::before { content: "?"; font-size: calc(var(--s) * .4); line-height: 1; color: var(--ink-4); } /* H3 配图进垃圾页：有图的行 / 卡加 .has-img，CSS 自动隐藏同处的方块字 .gcat__icon（名称照留：颜色与图之外永远有字） */ /* 今日 / 明日：
  • …
    .gcat + .gb-day__meta
    • */ .gb-day__item.has-img { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; } .gb-day__item.has-img .gcat__icon { display: none; } .gb-day__item.has-img .gb-day__meta { margin-left: 0; } .gb-day--tomorrow .gb-day__item.has-img { column-gap: 10px; } .gb-day__pic { display: block; line-height: 0; border-radius: 14px; } .gb-day__pic:hover .gb-img { box-shadow: inset 0 0 0 1px var(--gc, var(--line-2)); } .gb-day__body { min-width: 0; } /* 各类卡片：.gb-card.has-img 的 .gb-card__top 最前放 .gb-img（默认 40） */ .gb-card.has-img .gb-card__top { gap: 10px; } .gb-card.has-img .gb-card__top .gcat__icon { display: none; } /* 品目搜索结果：.gb-result.has-img 最前放 .gb-result__pic > .gb-img（品目图；没有 → 类图 + .is-fallback；都没有 → .gb-img--none） */ .gb-result.has-img { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--sp-3); } .gb-result__pic { grid-row: 1 / span 2; align-self: start; line-height: 0; } .gb-result.has-img .gb-result__how { grid-column: 2 / -1; } /* H4 磁贴网格（生活页；以后的磁贴同用）：方块、自动换列，390 宽两列 */ .tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); } .tile { position: relative; display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; min-height: 156px; aspect-ratio: 1 / 1; padding: var(--sp-3); overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); color: var(--ink); text-decoration: none; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } a.tile:hover { text-decoration: none; border-color: var(--line-2); box-shadow: var(--shadow-2); } .tile__head { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); } .tile__icon { flex: none; width: 22px; height: 22px; color: var(--ink-2); line-height: 0; } .tile__icon > svg { width: 100%; height: 100%; } .tile__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tile__go { flex: none; color: var(--ink-4); font-size: var(--fs-md); line-height: 1; } /* H5 垃圾磁贴 .gb-tile[data-when=today|tomorrow|none]：主区 = 要出的那天（类方块 + 短名），底行 = 另一天 */ .gb-tile__main { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; } .gb-tile__label { display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; } .gb-tile__label b { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); } .gb-tile__time { font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; } .gb-tile__cats { display: flex; gap: 4px; min-width: 0; } .gb-tile__cats .gcat__icon { width: 30px; height: 30px; font-size: 16px; border-radius: var(--r); } .gb-tile__cats .is-passed { opacity: .35; } .gb-tile__more { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px dashed var(--line-2); border-radius: var(--r); font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; } .gb-tile__names { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-ja); font-size: var(--fs-base); font-weight: 600; } .gb-tile__none { margin: 0; font-family: var(--font-ja); font-size: var(--fs-sm); color: var(--ink-3); } .gb-tile__foot { display: flex; align-items: center; gap: 5px; min-width: 0; padding-top: 6px; border-top: 1px dashed var(--line); font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; } .gb-tile__foot b { flex: none; font-weight: 600; color: var(--ink-2); } .gb-tile__dot { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--gc, var(--ink-3)); } .gb-tile__ftext { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-ja); } .gb-tile[data-when="tomorrow"] .gb-tile__label b { color: var(--ink-2); } .gb-tile[data-when="none"] .tile__icon { color: var(--ink-3); } /* H6 响应式：磁贴在任何宽度都是方块；手机上配图缩一档（动效由 §18 统一关闭） */ @media (max-width: 600px) { .tile-grid { gap: 10px; } .gb-day__item.has-img .gb-img--lg { --s: 52px; } .gb-result.has-img { grid-template-columns: auto minmax(0, 1fr); } .gb-result.has-img .gb-result__cat { grid-column: 2; } .gb-result__pic { grid-row: 1 / span 3; } .gb-result__pic .gb-img { --s: 36px; } } /* ===== v1.8 login & lang ===== */ /* 规范：DESIGN_SPEC §12；样稿：research/design/mockup-login.html。契约 1.7（界面双语）/ 1.8（单用户登录）。 类名沿用 base.html 已写的 .lang-btn（不另起 .lang-toggle）。颜色只用变量。 */ /* L1 语言切换「中 / 日」： 当前语言 = .is-on（墨色 + 浅底）；另一个是灰字。整个按钮一次点击 = 切到另一种语言。 */ .icon-btn.lang-btn, .lang-btn { display: inline-flex; align-items: center; justify-content: center; gap: 2px; width: auto; min-width: 54px; height: var(--ctl-h); padding: 0 6px; border: 0; border-radius: var(--r); background: transparent; font-size: var(--fs-sm); line-height: 1; white-space: nowrap; color: var(--ink-3); } .lang-btn:hover { background: var(--paper-2); } .lang-btn__opt { display: inline-grid; place-items: center; width: 22px; height: 24px; border-radius: var(--r-sm); color: var(--ink-3); font-weight: 400; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .lang-btn__opt:lang(zh) { font-family: var(--font-sans); } .lang-btn__opt.is-on { color: var(--ink); background: var(--paper-3); font-weight: 600; } .lang-btn:hover .lang-btn__opt:not(.is-on) { color: var(--ink); } .lang-btn__sep { color: var(--ink-4); font-size: var(--fs-xs); } .lang-btn[aria-busy="true"] { opacity: .55; pointer-events: none; } /* 写 cookie 后整页重载期间 */ /* 与主题按钮成对：两者间距 4px（其余仍 8px） */ .header-actions [data-theme-toggle] + .lang-btn, .auth__tools [data-theme-toggle] + .lang-btn { margin-left: -4px; } /* L2 页眉在日文下防撑爆（body[data-lang="ja"]）。中文不受影响 */ .header-search { min-width: 0; } /* 原 width 固定，允许收缩 */ [data-lang="ja"] { line-break: strict; } /* 不在行首放「ー」「ッ」「。」 */ @media (min-width: 900px) and (max-width: 1199px) { [data-lang="ja"] .brand__name { display: none; } /* 只留「任」字标 */ [data-lang="ja"] .nav__link { padding-inline: 9px; } } @media (min-width: 900px) and (max-width: 1023px) { [data-lang="ja"] .btn--new .btn__text { display: none; } } /* 单行控件：不换行，放不下就省略（模板同时写 title=全文） */ [data-lang="ja"] .stat__label, [data-lang="ja"] .sum__label, [data-lang="ja"] .tabbar__link, [data-lang="ja"] .chip, [data-lang="ja"] .month-nav__today { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } [data-lang="ja"] .badge { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; line-height: 20px; vertical-align: middle; } [data-lang="ja"] .pay-btn { padding-inline: 10px; } [data-lang="ja"] .bill__action { min-width: 84px; } /* 多行文字：自然换行，词不拆开（段标题、范围、提示） */ [data-lang="ja"] .section__title, [data-lang="ja"] .page-title, [data-lang="ja"] .home-range, [data-lang="ja"] .empty__hint, [data-lang="ja"] .field__hint { overflow-wrap: anywhere; } [data-lang="ja"] .section__head { flex-wrap: wrap; } [data-lang="ja"] .section__aside { white-space: nowrap; } /* L3 手机页眉：搜索 + 新建 + 主题 + 中/日 + ⚙。≤600 只显示当前语言一个字（印章样），点一下切到另一种 */ @media (max-width: 600px) { .app-header__inner { gap: var(--sp-3); } .header-actions { gap: 4px; } .header-actions .icon-btn { width: 40px; } .icon-btn.lang-btn, .lang-btn { min-width: 0; width: 36px; padding: 0; } .lang-btn__sep, .lang-btn__opt:not(.is-on) { display: none; } .lang-btn__opt.is-on { width: 24px; height: 24px; background: transparent; border: 1.5px solid var(--ink-2); font-weight: 600; } .header-actions [data-theme-toggle] + .lang-btn, .auth__tools [data-theme-toggle] + .lang-btn { margin-left: 0; } [data-lang="ja"] .tabbar__link { font-size: 10.5px; } } /* L4 登录 / 首次设密码：（无页眉、无 tabbar）
    .auth__tools（右上：主题 + 中/日） .auth__card > .auth__brand（.auth__mark 任 + .auth__name + .auth__sub） > form.auth__panel（.auth__title .auth__lead .auth__msg .field… .auth__remember .auth__submit） > .auth__foot */ .auth-page { padding-bottom: 0; } .auth { position: relative; min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 72px var(--sp-4) var(--sp-8); } /* minmax(0,1fr)：否则长句把 auto 列撑过 390 宽 */ .auth__tools { position: absolute; top: var(--sp-3); right: var(--sp-4); display: flex; align-items: center; gap: var(--sp-2); } .auth__card { width: min(380px, 100%); } .auth__brand { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: var(--sp-5); text-align: center; } .auth__mark { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-lg); background: var(--ink); color: var(--paper); font-size: 30px; font-weight: 600; line-height: 1; box-shadow: var(--shadow-1); } .auth__name { font-size: var(--fs-lg); font-weight: 600; letter-spacing: .06em; margin-top: 4px; } .auth__sub { font-size: var(--fs-xs); color: var(--ink-3); letter-spacing: .04em; } .auth__panel { display: block; padding: var(--sp-6) var(--sp-6) var(--sp-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); } .auth__title { font-size: var(--fs-lg); margin-bottom: 4px; } .auth__lead { font-size: var(--fs-sm); color: var(--ink-3); margin-bottom: var(--sp-4); } .auth__msg { margin-bottom: var(--sp-4); animation: dialog-in 160ms var(--ease); } .auth__msg strong { display: block; color: var(--ink); } .auth__msg-icon { flex: none; font-weight: 700; } .notice--danger .auth__msg-icon { color: var(--overdue-ink); } .notice--warn .auth__msg-icon { color: var(--near-ink); } .auth__timer { font-variant-numeric: tabular-nums; font-weight: 600; } .auth__panel .field:last-of-type { margin-bottom: var(--sp-3); } .auth__remember { display: flex; align-items: center; gap: var(--sp-2); min-height: 32px; margin-bottom: var(--sp-4); font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; } .auth__remember small { color: var(--ink-3); font-size: var(--fs-xs); } .auth__submit { height: 44px; font-size: var(--fs-md); } .auth__foot { margin-top: var(--sp-4); text-align: center; font-size: var(--fs-xs); color: var(--ink-3); } .auth__foot .mono { color: var(--ink-2); } .auth.is-locked .auth__panel .field, .auth.is-locked .auth__remember { opacity: .6; } /* 密码框 + 显示 / 隐藏（文字按钮，在框内右侧） */ .pw { position: relative; } .pw .input { padding-right: 64px; font-family: var(--font-mono); letter-spacing: .04em; } .pw .input::placeholder { font-family: var(--font-sans); letter-spacing: 0; } .pw__toggle { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); height: calc(100% - 8px); padding: 0 10px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-3); font-size: var(--fs-xs); white-space: nowrap; } .pw__toggle:hover { background: var(--paper-2); color: var(--ink); } .pw .input:disabled + .pw__toggle { visibility: hidden; } /* 强度：四格 + 一个词。0 太短 / 1 弱（朱）/ 2 一般（琥珀）/ 3 好 / 4 很强（松绿）。只提示，不拦（拦以契约规则为准） */ .pw-meter { display: flex; align-items: center; gap: var(--sp-2); margin-top: 6px; font-size: var(--fs-xs); color: var(--ink-3); } .pw-meter__bars { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; } .pw-meter__bars > i { height: 4px; border-radius: 2px; background: var(--paper-3); transition: background var(--dur) var(--ease); } .pw-meter__text { flex: none; min-width: 4.5em; text-align: right; } .pw-meter[data-strength="1"] { --pw: var(--overdue); --pw-ink: var(--overdue-ink); } .pw-meter[data-strength="2"] { --pw: var(--near); --pw-ink: var(--near-ink); } .pw-meter[data-strength="3"], .pw-meter[data-strength="4"] { --pw: var(--normal); --pw-ink: var(--normal-ink); } .pw-meter[data-strength="1"] .pw-meter__bars > i:nth-child(-n+1), .pw-meter[data-strength="2"] .pw-meter__bars > i:nth-child(-n+2), .pw-meter[data-strength="3"] .pw-meter__bars > i:nth-child(-n+3), .pw-meter[data-strength="4"] .pw-meter__bars > i { background: var(--pw); } .pw-meter:not([data-strength="0"]) .pw-meter__text { color: var(--pw-ink); font-weight: 600; } @media (max-width: 600px) { .auth { place-items: start center; padding-top: 64px; } .auth__brand { margin-bottom: var(--sp-4); } .auth__mark { width: 48px; height: 48px; font-size: 26px; } .auth__panel { padding: var(--sp-5) var(--sp-4) var(--sp-4); } .auth__submit { height: 48px; } } @media (min-height: 760px) and (min-width: 601px) { .auth__card { margin-top: -6vh; } /* 大屏视觉中心略偏上 */ }