/* ============================================================ 家书 FamilyBook · 界面样式 配色取自图标：宣纸米 / 砖红封面 / 深褐书脊 / 纸白 原则：扁平、留白充足、字重克制（正文 400，标题 500-600） ============================================================ */ :root { --paper: #F7F3EA; --surface: #FFFFFF; --ink: #2C231D; --muted: #7E6B5A; --faint: #A8988A; --brand: #A84A28; --brand-2: #C96F45; --brand-ink:#6E3820; --green: #6F9E5C; --red: #C0533F; /* 🔴 v40（用户 2026-10-10）：「影院管理部分…编辑使用蓝色的背景，删除使用红色的背景。」 ⇒ 新增一个中性的"操作蓝"（不是链接蓝、也不是模块品牌色）—— 它是**语义色**： 蓝=编辑、红=删除，全站统一，跟着模块换肤也不该变。 ⚠️ 暖纸底上要够暗才压得住白字：这里取 #2F6FB0（对比度 ≈ 4.9:1）。 */ --blue: #2F6FB0; --line: rgba(44, 35, 29, .10); --line-2: rgba(44, 35, 29, .06); --radius: 16px; --radius-s: 10px; --shadow: 0 1px 2px rgba(44, 35, 29, .05); --shadow-l: 0 4px 16px rgba(44, 35, 29, .08); /* ---- 动作按钮的统一度量 ---- 用户提过三次「设置按钮和记一场电影按钮高度要一致」。为杜绝再犯， 这里把按钮高度拆成 4 个变量，并算出唯一的高度： --act-h = 上下内边距 + 行高 + 上下边框 = 9*2 + 14*1.7 + 1*2 = 43.8px 文字按钮靠 padding + line-height 自然撑到这个高度； **只有图标的方形按钮**（.btn-icon）显式写高度，但取的是同一个 --act-h， 这样两边永远相等，改一处就同步。 */ --act-pad-y: 9px; --act-pad-x: 16px; --act-font: 14px; --act-line: 1.7; --act-h: calc(var(--act-pad-y) * 2 + var(--act-font) * var(--act-line) + 1px * 2); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.7 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif; -webkit-font-smoothing: antialiased; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------------- 顶栏 ---------------- */ .topbar { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--line); } .topbar-inner { max-width: 1080px; margin: 0 auto; padding: 0 24px; height: 60px; display: flex; align-items: center; gap: 24px; } .brand { display: flex; align-items: center; gap: 10px; color: var(--ink); } .brand:hover { text-decoration: none; } .brand img { width: 30px; height: 30px; border-radius: 8px; display: block; } .brand span { font-size: 16px; font-weight: 600; letter-spacing: .5px; } .nav { display: flex; gap: 4px; margin-left: 8px; } .nav a { padding: 6px 12px; border-radius: 999px; color: var(--muted); font-size: 14px; } .nav a:hover { background: var(--line-2); text-decoration: none; } .nav a.on { background: var(--brand); color: #fff; } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; } .who { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; } /* 姓名 + 头像是个下拉菜单的「把手」——hover 时给点反馈，让人知道它可点 */ .who-menu { position: relative; } .who-menu > summary { list-style: none; cursor: pointer; padding: 4px 6px; border-radius: 999px; } .who-menu > summary::-webkit-details-marker { display: none; } .who-menu > summary:hover { } /* 统一段处理 */ .who-menu > summary:hover .who-name { color: var(--brand); } .who-menu[open] > summary { background: var(--line-2); } .who-menu[open] > summary .caret { transform: rotate(180deg); } .who img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; } .who img { transition: box-shadow .15s ease; } .who-menu > summary:hover img { box-shadow: 0 0 0 2px var(--brand-2); } /* 那个小三角：没有它，用户不知道"名字能点开" */ .caret { width: 0; height: 0; margin-left: -2px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--faint); transition: transform .15s ease; } .menu-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 148px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); box-shadow: var(--shadow-l); display: flex; flex-direction: column; } .menu-list a { padding: 8px 12px; border-radius: 8px; color: var(--ink); font-size: 14px; white-space: nowrap; } .menu-list a:hover { background: var(--line-2); text-decoration: none; color: var(--brand); } /* 退出放在最下面并隔一条线：它是"离开"，和上面几个"改点什么"不是一类动作 */ .menu-list .menu-exit { margin-top: 4px; padding-top: 9px; border-top: 1px solid var(--line-2); border-radius: 0 0 8px 8px; color: var(--muted); } .menu-list .menu-exit:hover { color: var(--brand); } /* ---- 观影页的「设置」下拉：图标按钮 + 永远贴右 ---- 用户明确要求（2026-10-01）： · 去掉「设置」二字，只留**三条横线**图标（☰）； · 在**所有页面都排在最右侧**（位置统一）； · 点开后的每条条目，**文字前都要有图标**； · 除设置外，其它按钮都要**有颜色**，跟设置区分开。 贴右的做法：`margin-left:auto` 把它推到动作区最右端 —— 这样无论各页把片段 require 在 actions 的哪个位置（有的写在最前、有的写在最后），它都贴右， 不必逐页调顺序，也就不会有"某个页面漏了"的情况。 */ .movie-set { position: relative; margin-left: auto; } .movie-set > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .movie-set > summary::-webkit-details-marker { display: none; } .movie-set[open] > summary { border-color: var(--brand); color: var(--brand); } /* 方形图标按钮：只有图标、无文字。高度**必须**取 --act-h， 与「记一场电影」等实心按钮同高（那个高度由 --act-pad-y/--act-font/--act-line 推出）。 ⚠️ 别在这里另写一个数字（曾写死 40px，比文字按钮的 43.8px 矮了 3.8px，被用户连续投诉）。 */ .btn-icon { background: #fff; color: var(--ink); border: 1px solid var(--line); padding: 0 !important; width: var(--act-h); height: var(--act-h); min-width: var(--act-h); display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .btn-icon:hover { color: var(--brand); border-color: var(--brand); } /* 底色交给统一段 */ .btn-icon svg { display: block; } /* 观影设置菜单：从右上角改成**按钮下方右对齐**（按钮贴右，菜单也贴右才不会跑出屏外） */ .movie-set .menu-list { left: auto; right: 0; top: calc(100% + 8px); } .movie-set .menu-list a { display: flex; align-items: center; gap: 10px; } .movie-set .menu-list a .mi { flex: 0 0 16px; color: var(--muted); } .movie-set .menu-list a:hover .mi, .movie-set .menu-list a.on .mi { color: currentColor; } .movie-set .menu-list a.on { color: var(--brand); background: var(--line-2); } /* ---- 日程页的设置下拉（v24 用户 2026-10-03 第 4、5 条）---- 它比观影/任务那个 ☰ 内容多：里面有个**表单**（默认视图 + 显示哪些本子）。 本子清单会随共享/新建变长，所以给列表一个最大高度 + 滚动， 否则菜单会顶出屏幕、底下的「保存」按钮够不着。 */ .cal-set .menu-list { min-width: 260px; max-width: min(320px, 92vw); } .cal-set-list { padding: 10px; gap: 0; } .cal-set-form { display: block; } .cal-set-block { padding: 6px 2px; } .cal-set-block + .cal-set-block { border-top: 1px solid var(--line-2); margin-top: 4px; } .cal-set-h { font-size: 12px; color: var(--muted); margin-bottom: 6px; } .cal-set-views { display: flex; gap: 12px; flex-wrap: wrap; } .cal-set-view { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; cursor: pointer; } .cal-set-view input { accent-color: var(--brand); } /* 本子清单：最多占 42vh，超了内部滚动 —— 菜单本身不滚，否则保存按钮会被推出可视区 */ .cal-set-books { max-height: 42vh; overflow-y: auto; } .cal-set-book { display: flex; align-items: center; gap: 7px; padding: 5px 4px; font-size: 13px; cursor: pointer; border-radius: 6px; white-space: normal; } .cal-set-book:hover { background: var(--line-2); } .cal-set-book input { accent-color: var(--brand); flex: 0 0 auto; } .cal-set-book .color-preview { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; } .cal-set-book .cal-name { overflow: hidden; text-overflow: ellipsis; } .cal-set-book .node-badge { margin-left: auto; flex: 0 0 auto; } .cal-set-foot { margin-top: 10px; } .cal-set-foot .btn { width: 100%; justify-content: center; } .cal-set-links { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-2); } .cal-set-links a { display: flex; align-items: center; gap: 10px; white-space: normal; } .cal-set-links a .mi { flex: 0 0 16px; color: var(--muted); } .cal-set-links a:hover .mi { color: currentColor; } /* 点了日历空白处就建日程 —— 鼠标要能看出那里可点（用户第 5 条）。 ⚠️ 只给「能写」的人光标：只读账号点上去弹不出表单，给个十字光标是骗人。 */ .tg-col.rt-writable, .cal-cell.rt-writable { cursor: crosshair; } .link-quiet { color: var(--muted); font-size: 14px; } .link-quiet:hover { color: var(--brand); } /* 顶栏里的文字一律不许换行 —— 一换行就是「首/页」「名/册」竖排，很难看 */ .nav a, .topbar-right a, .who-name { white-space: nowrap; } /* ---------------- 布局 ---------------- */ .container { max-width: 1080px; margin: 0 auto; padding: 28px 24px 64px; } .container-narrow { max-width: 560px; margin: 0 auto; padding: 28px 24px 64px; } .page-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px; } .page-head h1 { font-size: 22px; font-weight: 600; margin: 0; } .page-head .sub { color: var(--muted); font-size: 14px; } .page-head .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; } /* ---- 页头动作区的完整规格见**文件靠后**的「页头动作区」一节 ---- 刻意放后面：.btn / .btn-ghost / .btn-icon 等基类定义在文件中部， CSS 同特异性「后写的赢」——放这里会被它们覆盖（踩过：设置按钮被染成品牌底、 btn-ghost 仍是白的）。此处只留布局，样式集中在后面一处，便于对照。 */ .section { margin-top: 28px; } .section-title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; margin: 0 0 12px; } .section-title .hint { font-weight: 400; color: var(--muted); font-size: 13px; } /* ---------------- 卡片 ---------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .card-pad { padding: 20px; } /* 相邻的两块之间一定要有缝 —— 影院管理页「添加影院」与「影院列表」、 年度报告的几张卡，曾经紧贴成一个整块，看不出是两个东西。 统一在这里给间距，而不是每个页面各写一次（写一次就会漏一处）。 */ .card + .card { margin-top: 18px; } /* ⚠️ 上面**只写 .card + .card**：.section 自己有 margin-top:28px， 若在这里再写 `.card + .section { margin-top:18px }`，特异性 0,2,0 会压过 `.section` 的 0,1,0，反而把原本 28px 的间距改小 —— 修 A 不能顺手弄坏 B。 */ /* 🔴🔴 v24 第 25 批 用户第 3 条：**并排的两块不该再吃这条"相邻间距"**。 用户原话：「日程和任务看板，两个模块，现在有点错位，一个高，一个低， 应该完全一样才对。」 根因（实测，不是猜）：`.home-duo` 里左右两块**都是 `.card`**、且在 DOM 里互为 紧邻兄弟 → `.card + .card` 命中**第二块** → 给它加了 `margin-top:18px`。 grid 的 `align-items: stretch` 让两块**高度**相等（那个数是对的）， 但第二块被整体推下去 18px —— 于是"一样高、却一高一低"。 （我上一版只调了 `.home-duo` 的 align-items 与高度，没动这条， 真机探针才把 18px 这个偏移量量出来 —— 光看代码是看不出来的。） ⇒ 并排容器里的 `.card` 一律不吃相邻间距（间距由 `gap` 统一给）。 用 `:first-child` 之外的兄弟选择器把它们点掉，且**特异性要比 0,2,0 高**。 */ .home-duo > .card { margin-top: 0; } .home-duo > .card + .card { margin-top: 0; } /* 首页头图 */ .hero { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 28px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .hero-logo { width: 64px; height: 64px; border-radius: 16px; flex: 0 0 auto; } .hero-main { flex: 1 1 240px; min-width: 0; } .hero h1 { font-size: 24px; font-weight: 600; margin: 0 0 4px; } .hero .motto { color: var(--muted); margin: 0; font-size: 14px; } /* 那句小字到底是谁的：自己写的那句要标一下，否则用户会以为这是系统统一发的 */ .motto-from { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--line-2); font-size: 11px; color: var(--faint); } .motto-edit { margin-left: 8px; font-size: 12px; color: var(--brand-2); white-space: nowrap; } /* 详情页顶部引用本人的一句话 */ .motto-line { margin: -8px 0 16px; padding-left: 12px; border-left: 3px solid var(--brand-2); color: var(--muted); font-size: 14px; } /* ⚠️ .hero-stats / .stat 已随用户 2026-10-03 第 3 条撤掉首页那三个统计， 这里保留规则本身（其它页面可能还在用 .stat 这个类名），不再由首页引用。 */ .hero-stats { margin-left: auto; display: flex; gap: 28px; } .stat { text-align: center; } .stat b { display: block; font-size: 24px; font-weight: 600; line-height: 1.2; } .stat span { font-size: 12px; color: var(--muted); } /* 用户第 3 条：标题下那句个人 slogan */ .hero-slogan { color: var(--muted); margin: 4px 0 0; font-size: 14px; } /* 用户第 3 条：「我的资料 / 我的家谱」换成**图标按钮**（原来是一排文字按钮）。 margin-left:auto 把它推到最右，与原来统计块的位置一致。 */ .hero-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); transition: border-color .15s ease, color .15s ease, background .15s ease; } .icon-btn:hover { color: var(--brand); border-color: var(--brand-2); /* 底色交给文末「全站悬停统一」段（中性薄雾） */ background: var(--hov-veil, rgba(44,35,29,.05)); } .icon-btn svg { display: block; } /* ---- 用户第 3 条：首页的统计信息块（问候 + 天气 + 几个数字） ---- */ /* ⚠️ v24 第 24 批：这里原有 6 条 `.home-brief*` 旧规则（纵向排列的问候/天气/数字）， 本批把首页信息面板改成"左边内容 + 右边天气贴右端"的横排结构后， 那 6 条**全部成了死样式**（模板里已经没有任何元素用 home-brief-hello / home-brief-weather / home-brief-stats / w-icon / w-temp / w-desc）。 ⇒ 就地删掉，不留"两处定义同一个东西"： 上批（第 23 批）就是因为"末尾追加、旧规则留着"，漏了 flex-direction， 四个按钮竖排把标题行撑到 175px —— 那个坑的成因正是**旧规则没删**。 新结构见文件末尾「v24 第 24 批 …首页信息面板」那一段（.hb-* / .hb-weather）。 */ /* ---- 用户第 3 条：首页的模块小结卡 ---- */ .mod-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } .mod-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); border-left: 3px solid var(--mc, var(--brand)); color: var(--ink); text-decoration: none; transition: box-shadow .15s ease, border-color .15s ease; } .mod-card:hover { box-shadow: var(--shadow); text-decoration: none; } .mod-card-head { display: flex; align-items: center; gap: 8px; color: var(--mc, var(--brand)); } .mod-card-icon { display: inline-flex; flex: 0 0 auto; } .mod-card-name { font-size: 13px; font-weight: 600; } .mod-card-big { font-size: 20px; font-weight: 600; color: var(--ink); } .mod-card-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .mod-card-lines li { font-size: 12.5px; color: var(--muted); } /* ---------------- 成员卡 ---------------- */ /* 用户 2026-10-03 第 4 条：名册从「卡片网格」改成**竖向列表**—— 一行一个人，左边头像、中间姓名+关系+手机号/生日、右边操作。 列表形态下拖动排序也更直观（上下移动，不会像网格那样左右跳）。 */ .people-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } /* ⚠️ 整行是**一条 flex**：[拖柄] [头像+信息（占满剩下的）] [右侧动作]。 原来右侧的「编辑 / ⋯」各自写死 right:46px / right:8px 绝对定位， 于是再往里加第三个按钮只能继续猜偏移、且「分组」按钮宽度随分组名变化必然重叠； 改 flex 之后按钮自然排开，姓名那边也不用靠 padding-right 让位了。 */ .person { display: flex; align-items: stretch; color: var(--ink); position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); transition: border-color .15s ease, box-shadow .15s ease; /* v24 第 9 批 #5：千人名册不「卡死」的关键 —— 屏外的卡片浏览器直接跳过 布局/绘制（4 万+ DOM 节点的排版是一次性成本的大头）。 contain-intrinsic-size 给屏外卡片一个估算高度撑滚动条， auto 前缀让浏览器记住真实渲染高度，滚过后就精确了。 ⚠️ 拖动排序用的是实时 getBoundingClientRect：目标被自动滚进视口时 content-visibility 会立刻出真实布局，落点计算不受影响（drag probe 已验证）。 */ content-visibility: auto; contain-intrinsic-size: auto 68px; } .person:hover { border-color: var(--brand-2); box-shadow: var(--shadow); } /* 头像：列表里用小方图（正方形、cover 裁切），不再是整块大图 */ .person .ph { background: #F1E7D6; overflow: hidden; width: 52px; height: 52px; border-radius: 8px; flex: 0 0 auto; } .person .ph img { width: 100%; height: 100%; object-fit: cover; display: block; } .person .person-main { display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: var(--ink); text-decoration: none; flex: 1 1 auto; min-width: 0; /* 剩下的宽度都给它，按钮那头不挤它 */ } .person .pb { flex: 1 1 auto; min-width: 0; } .person .pname { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .person .pmeta { color: var(--muted); font-size: 12.5px; margin-top: 2px; } /* 中间那几个"重要信息"：手机 / 生日 */ .person .pfacts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; font-size: 13px; } .person .pfact { color: var(--ink); display: inline-flex; align-items: baseline; gap: 5px; } .person .pfact-k { color: var(--muted); font-size: 11px; padding: 1px 5px; border-radius: 4px; background: var(--line-2); } /* ⚠️⚠️ 过滤用的行必须能真的藏起来。 `[hidden]` 的 display:none 是**浏览器默认样式**，优先级最低 —— 只要作者样式里 给同一个元素写了 display（.person 是 display:block、.pp-item 是 flex、 .att-item 是 inline-flex…），就会把它盖掉：元素"标注了 hidden 却照样显示"， 于是「输入即筛选」看着完全没反应（列表一条都不少）。 这个坑本项目已经踩过两次（.att-item、.pp-item），所以统一写成一条通则： 凡是靠 [hidden] 隐藏的列表行，都必须在作者样式里显式再声明一次。 */ [data-search][hidden], .pick-row[hidden], .person[hidden] { display: none !important; } .badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; line-height: 1.7; background: var(--line-2); color: var(--muted); } .badge-admin { background: #F6E3D7; color: var(--brand-ink); } .badge-open { background: #E6F0DC; color: #4A7226; } .badge-me { background: var(--brand); color: #fff; } /* 生日条 —— 一个人可能同时出两条（农历与阳历不在同一天）， 落在同一天时并成一条、kinds 里挂多个标签，正好对应"要分别提醒"。 */ .bdays { display: flex; gap: 12px; flex-wrap: wrap; } .bday { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 18px 10px 10px; box-shadow: var(--shadow); color: var(--ink); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; } .bday:hover { transform: translateY(-2px); box-shadow: var(--shadow-l); text-decoration: none; } .bday img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; } .bday b { font-weight: 500; } .bday .d { color: var(--brand); font-size: 13px; } .bday-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 3px; } .bday-date { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; } /* 「身份证生日 / 阳历生日 / 农历生日」的标签，首页与详情页共用 */ .bd-kind { display: inline-block; padding: 0 7px; border-radius: 999px; font-size: 11px; line-height: 1.8; background: var(--line-2); color: var(--muted); } .bd-kind-id { background: #E6F0DC; color: #4A7226; } .bd-kind-solar { background: #F6E3D7; color: var(--brand-ink); } .bd-kind-lunar { background: #E8E4F2; color: #55477E; } /* 详情页的三个生日 */ .bd-list { list-style: none; margin: 0; padding: 0; } .bd-list li { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; flex-wrap: wrap; } .bd-list .bd-val { font-variant-numeric: tabular-nums; } /* ---------------- 表单 ---------------- */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* ⚠️ min-width:0 是必需的（v11 实测踩到）：.field 是 grid 项，默认 min-width:auto 会被内部 换掉： 它的日历弹层是浏览器自己画的，我们碰不到 DOM、也控制不了流程； Chrome 在"点顶部 2026年 10月 切到年月视图"之后要靠用户再点一次日期或 按 Esc 才回得到日期视图，各家还不一致 → 用户遇到的就是"选完年月就卡住、 选不了日"。三个原生下拉选完即生效，不需要任何确定按钮。 这一整段不再有"未升级就藏原生控件"的逻辑（v24~v36 有过）。 服务端给的就是最终形态，JS 只负责绑事件 —— 所以"JS 没跑 / 加载失败"时 控件依然完整可用，不是"骨架占位"。 ============================================================================ */ .dt-input { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .dt-input .dt-native { display: contents; } .dt-input .dt-semi { display: none; flex: 1 1 220px; min-width: 0; } /* ---- 日期：年 / 月 / 日 三个下拉 ---- */ .dt-date-sel { display: flex; align-items: center; gap: 4px; min-width: 0; } .dt-input .dt-year, .dt-input .dt-month, .dt-input .dt-day { padding: 9px 6px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px; font-variant-numeric: tabular-nums; cursor: pointer; min-width: 0; } /* 年最宽（4 位数 + 箭头），月/日短一些 —— 省下来的宽度留给时:分 */ .dt-input .dt-year { flex: 0 1 86px; } .dt-input .dt-month { flex: 0 1 66px; } .dt-input .dt-day { flex: 0 1 64px; } /* 隐藏的 `*_date` 真正的字段（提交契约）—— 它必须留在 DOM 里 */ .dt-input input.dt-date[type="hidden"] { display: none; } /* 旧「原生 date 框」形态（$dtDateType='native' 时才出现）保留样式 */ .dt-input .dt-date:not([type="hidden"]) { flex: 1 1 150px; min-width: 0; cursor: pointer; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); font: inherit; accent-color: var(--brand); } .dt-input .dt-date:not([type="hidden"])::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .65; } /* ---- 时间：时 : 分 ---- */ .dt-time { display: flex; align-items: center; gap: 3px; flex: 0 0 auto; } .dt-input .dt-hour, .dt-input .dt-minute, .dt-input .dt-second { padding: 9px 6px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px; font-variant-numeric: tabular-nums; cursor: pointer; } .dt-input .dt-colon { color: var(--muted); font-weight: 600; } /* 必填但没填时描红（由 app.js 的 guardRequired 打类） */ .dt-input.dt-missing .dt-year, .dt-input.dt-missing .dt-month, .dt-input.dt-missing .dt-day, .dt-input.dt-missing .dt-date { border-color: #C0392B !important; } /* ============================================================================ 起止范围（.dt-range）：两端一行优先，放不下才换行 ============================================================================ 用户原话（2026-10-09 第 4 次反馈）： 现在开始和结束时间分在了两行，导致日期这个特别特别的长，后面的时和分又 非常非常的短，非常不协调。所以这两个日期如果能放一排，如果能放得下的话， 就应该放一排。因为日期和时间，分和时和分的这个长度基本上是固定的， 所以你可以判断一下它到底能不能一行，能不能放得下。如果能放下的话就放在一行。 如果在手机上，比如说它这个页面非常窄，它就可以把它挤到下一行。 但是现在不要让它默认显示在两行上，应该默认显示在一行上才对。 ⇒ 做法：flex 容器 + flex-wrap。每端有一个最小的可用宽度（.dt-part 的 min-width），浏览器在每次布局时自己判断放不放得下；放得下 → 一行； 放不下 → 第二端自然掉到下一行。 ⚠️ 不用 JS 量宽度：字体没加载完 / 容器动画中都会量错，窗口缩放还要重算； flex-wrap 是浏览器布局的一部分，永远是对的。 ⚠️ .dt-range 的标签只在组上留一个（见 _event_fields.php 的说明）： 两端是同一个范围的两个端点，各挂一个标签会变成"看着像两个字段"的错觉。 */ .dt-range { display: flex; flex-direction: column; gap: 8px; } .dt-range-label { font-size: 14px; color: var(--ink); font-weight: 600; } /* 升级（= app.js 挂上 .dt-cols）之后：两端并排、必要才换行 */ .dt-range.dt-cols { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 18px; } /* 两端的"最小可用宽度"：日期(年+月+日) + 时:分 摆得下。 值取 250px —— 实测"年(86)+月(66)+日(64)+时:分(约 96)+间距"约 330px 才舒服， 但最小可用是 250px（会各自压缩一点），这样在常见的 560px+ 容器里 两端（250×2 + 18 间距 = 518）肯定放得下 → 默认就是一行。 */ .dt-range.dt-cols > .dt-input, .dt-range.dt-cols > .field { flex: 1 1 250px; min-width: 250px; display: flex; } .dt-range.dt-cols > .field { flex-direction: column; gap: 6px; } /* 标签占满整行（不然它会跟第一端挤在一起） */ .dt-range.dt-cols > .dt-range-label { flex: 1 1 100%; } /* 极窄屏：两端各自铺满一行（用户说的"手机上就挤到下一行"） */ @media (max-width: 560px) { .dt-range.dt-cols > .dt-input, .dt-range.dt-cols > .field { flex: 1 1 100%; min-width: 0; } } /* ============================================================================ Semi 仅剩的用途：工作经历的「年月选择」（ 的升级） ---------------------------------------------------------------------------- ⚠️ 日期/时间控件（.dt-input）v37 起已完全不用 Semi —— 上面那套自建下拉 就是因为它给的弹层交互不可控（选完年月卡住）。这里保留的是另一处。 ============================================================================ */ .dt-semi.dt-semi-month { display: none; } .dt-semi.dt-semi-month.is-live { display: block; width: 100%; } body[class] { --semi-color-primary: var(--brand, #A84A28); --semi-color-primary-hover: var(--brand-2, #C05F38); --semi-color-primary-active: var(--brand-ink, #8D3C20); --semi-color-focus-border: var(--brand, #A84A28); } body[class] .dt-semi .semi-input-wrapper { width: 100%; height: 40px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); display: flex; align-items: center; } body[class] .dt-semi .semi-input-wrapper:hover { border-color: var(--brand-2); background: var(--surface); } body[class] .dt-semi .semi-input { font: inherit; color: var(--ink); } body[class] .dt-semi .semi-input::placeholder { color: var(--muted); } body[class] .dt-semi .semi-datepicker-input, body[class] .dt-semi .semi-datepicker { background: transparent !important; height: auto !important; min-height: 0 !important; border: 0; padding: 0; } body[class] .dt-semi .semi-input-wrapper .semi-input { height: 100%; line-height: 40px; padding: 0 11px; background: transparent; } body[class] .semi-popover .semi-datepicker { background: var(--surface, #fff); } body[class] .semi-datepicker-day-selected { background-color: var(--brand, #A84A28); } body[class] .semi-datepicker-day-hoverday, body[class] .semi-datepicker-day-inhover { background-color: color-mix(in srgb, var(--brand, #A84A28) 12%, transparent); } /* 「以哪个生日为准」的两块：被选中的那块描一圈，一眼看出填的是哪边 */ .bd-source { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .bd-pane { border: 1px solid transparent; border-radius: var(--radius); padding: 10px 12px 2px; } .bd-pane.is-primary { border-color: var(--brand-2); background: #FDF6F1; } .bd-pane .bd-pane-k { font-size: 13px; font-weight: 600; margin: 0 0 8px; } .bd-readonly { display: inline-block; padding: 6px 10px; border-radius: var(--radius-s); background: var(--line-2); color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; } /* ---------------- 称谓标签 ---------------- */ .rel-label { display: inline-block; padding: 1px 9px; border-radius: 999px; background: #F6E3D7; color: var(--brand-ink); font-size: 11px; font-weight: 500; line-height: 1.8; margin-right: 2px; } /* ---------------- 家谱（以我为中心） ---------------- v22：按 family-chart **官方用法**接（容器 class="f3" + 引 family-chart.css）， 库把 data[0].id 当 main_id，所以把「最高祖先」排第一位以画出尽可能多的血亲旁支； 加载后再把镜头平移回「我」，兼顾"看到全树"与"以自己为中心"。 ⚠️ 免费版 family-chart 的算法只画「树根的祖先链 + 后代 + 树根的兄弟姐妹 + 各人配偶」， **不会从配偶继续向上/向下 walk**。这一点已用**官方示例自己的数据**验证过： 官方 data.json 里 13 人（含配偶 Andrea 的父母 Zadro/Zadra，格式完全按官方）， 库只画出 11 人 —— 配偶方那两位长辈一个都没画。 所以「把数据按格式全塞进去就能画全」在姻亲这一项上不成立，是库的算法边界。 */ .kin-tools { display: flex; gap: 8px; justify-content: flex-end; margin: 0 0 10px; } .kin-chart { position: relative; width: 100%; height: clamp(420px, 62vh, 720px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; cursor: grab; /* 拖拽/缩放由库接管，别让浏览器插手滚动 */ touch-action: none; } .kin-chart:active { cursor: grabbing; } /* 库的 `.f3` 会自带一套**深色主题**（--background-color: rgb(33,33,33) / --text-color: #fff）。 家书是宣纸浅色，必须在这里把库的主题变量改掉；否则卡片文字会变白、看不出内容。 只覆盖颜色变量，**不动**库的结构规则（那些是撑满/定位必需的）。 */ .kin-chart.f3 { --male-color: #F1E7D6; /* 库的男卡底色，改成纸色（我们自己的 .kin-card 会再盖一层） */ --female-color: #F1E7D6; --genderless-color: #F1E7D6; --background-color: transparent; --text-color: var(--ink); font-family: inherit; } /* 隐藏 family-chart 自带的空导航栏（我们用自己的「看全部 / 回到我」按钮） */ .kin-chart .f3-nav-cont { display: none !important; } /* 官方 CSS 已经给了 `.f3 svg.main_svg { width:100%; height:100% }`（撑满画布）， 这里只补一个 display:block，避免 svg 作为 inline 元素多出基线空隙。 */ .kin-chart svg.main_svg { display: block; z-index: 1; } /* family-chart 的 HTML 卡片层 #htmlSvg 与 SVG 连线层由库的 onZoom 同步 transform。 卡片容器 .card_cont 已经 absolute + translate(x,y)；里面再放我们的 .kin-card。 */ .kin-chart #htmlSvg { z-index: 2; } .kin-chart .card_cont { pointer-events: none; } /* ⚠️ 库的性别底色规则是 `.f3 div.card-male .card-inner`（3 段）， 比 `.kin-chart .card_cont .card-inner`（3 段）**同级**，靠先后顺序定胜负 —— 所以这份覆盖必须写在**引库 CSS 之后**（app.css 在 layout 里就是这么排的）。 把外层中转容器全部归零，只留我们自己的 .kin-card。 */ .kin-chart .card_cont > .card, .kin-chart .card_cont .card-inner, .kin-chart.f3 .card_cont .card-inner { background: transparent; padding: 0; border-radius: 0; min-height: 0; width: auto; height: auto; outline: none; } .kin-chart .card_cont .card-inner { display: block; } /* v21：卡片尺寸与 setCardDim({w:140, h:120}) 对齐 */ /* 用户 2026-10-03 第 1 条： · 头像外框改**长方形**（宽 96 × 高 72），宽度基本就是头像显示宽度； img 用 object-fit: contain —— 既不裁切，也不会把外框撑变形。 · 信息（姓名/称呼）在头像**下方**。 · 卡片不再整张是链接：只有 .kin-nm 是 ，右下角是独立的