/* 公开站与 app 共用的族（2026-09-25 UI 1.0 接线时收成一份；同日用户令「三族规则要统一」， .dtab .gbtn .ln 也收进来）。用户问过「你真的做了父类吗」：同名同值不等于同一个父类。 这份文件就是那个父类——app 在自己的几份样式表之后读它，公开站读它的一份拷贝 （site/static/basing_family.css，由 scripts/sync_site_tokens.py 抄过去，勿手改那一份）。 收进来的族： .pbtn 键（公开站的「申请邀请」、app 左栏环下的 Upload、登录注册页的提交键） .pseg.brand 字标 Basing（两边左上角那一个） .dtab 文字动作（公开站顶栏、页脚；app 的 A Report can be generated、Copy、Add……） .gbtn 图标键（公开站动效旁的十字；app 的抽屉键、＋、话筒、发送……） .ln 单行输入（公开站的邮箱、登录注册页的每一格；app 入库页加链接那一行） 一族一份规则。两边确实不同的地方（文字动作的字重与下划线、图标键的大小与悬停垫底、输入框的 框与字号）是这一族的格，下面分两段给默认值：:root 是公开站与登录注册页，.screen 是 app。 默认值就是两边原来的样子；主题（themes/*.css）在其上覆盖。 规则分两级：长相写在最低一级（.dtab 这样一个类），各处的位置规则（放在路径里淡一档、在字段行里 只有一条底线……）照旧压得住；状态（选中、开关关着、忙、按下）抬到 :is(:root, .screen) 这一级， 与 app 原来的写法同级，不被位置规则压掉。 */ /* ── 两边一样的格 ── */ :root, .screen { --edge-w: 1px; /* 描边粗细 */ --bad: #d5443c; /* 输入不合格、提交失败 */ --pbtn-fw: var(--fw-regular); --pbtn-tt: none; /* 英文要不要大写 */ --pbtn-ls: 0; --pbtn-px: 14px; /* 左右内边距 */ --pbtn-edge-w: 0.5px; --pbtn-edge-hover: var(--ink4); --pbtn-ink-hover: var(--ink); --pbtn-shadow: none; --pbtn-shadow-hover: none; --pbtn-shadow-press: none; --pbtn-lift: 0px; /* 悬停时往左上抬多少（贴纸式硬阴影才用得上） */ --pbtn-sink: 0px; /* 按下时往右下沉多少 */ --pbtn-hover-opacity: 1; --pbtn-blur: none; /* 底色半透明时的磨砂（primary 开） */ --pbtn-bg-quiet: var(--pbtn-bg); /* 次一档的键（.pbtn.quiet）的底 */ --ln-shadow: none; --ln-shadow-focus: none; } /* ── 公开站与登录注册页 ── */ :root { --dtab-fw: var(--fw-regular); /* 文字动作：常规字重，悬停与当前页出一条下划线 */ --dtab-fw-on: var(--fw-regular); --dtab-line-w: var(--edge-w); --dtab-line: var(--hair); --dtab-line-on: var(--ink); --gbtn-size: 32px; /* 图标键：32 的盒，悬停垫一层底 */ --gbtn-hover-bg: var(--press); --ln-w: 240px; /* 单行输入：与键同高的一块，有底色 */ --ln-h: var(--pbtn-h); --ln-pad: 0 14px; --ln-font: var(--fw-regular) var(--fs-note)/1 var(--ff-ui); --ln-bg: var(--fill); --ln-blur: var(--glass-blur); --ln-edge: transparent; --ln-edge-w: var(--edge-w); --ln-edge-focus: var(--hair); --ln-radius: var(--pbtn-radius); --ln-ph: var(--ink5); } /* ── app（.screen 里）；图标键的大小（--gbtn-size）在 shell.css 的 .screen 上 ── */ .screen { --dtab-fw: var(--fw-strong); /* 文字动作：墨色加粗，不画下划线 */ --dtab-fw-on: var(--fw-strong); --dtab-line-w: 0px; --gbtn-hover-bg: transparent; /* 图标键：悬停不垫底，按下变淡 */ --ln-w: 100%; /* 单行输入：细边胶囊（入库页加链接那一行） */ --ln-h: auto; --ln-pad: 8px 18px; --ln-font: var(--tp-ui-body); --ln-bg: transparent; --ln-blur: none; --ln-edge: var(--hair); --ln-edge-w: 0.5px; --ln-edge-focus: var(--ink5); --ln-radius: var(--r-pill); --ln-ph: var(--ink6); } /* ══ 键 .pbtn：底色、描边、圆角、硬阴影、悬停抬起与按下沉下都由 --pbtn-* 决定 ══ */ .pbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; appearance: none; cursor: pointer; white-space: nowrap; height: var(--pbtn-h); padding: 0 var(--pbtn-px); border: var(--pbtn-edge-w) solid var(--pbtn-edge); border-radius: var(--pbtn-radius); background: var(--pbtn-bg); color: var(--pbtn-ink); -webkit-backdrop-filter: var(--pbtn-blur); backdrop-filter: var(--pbtn-blur); /* 底色半透明时是磨砂纸 */ box-shadow: var(--pbtn-shadow); font: var(--pbtn-fw) var(--fs-note)/1 var(--ff-ui); text-transform: var(--pbtn-tt); letter-spacing: var(--pbtn-ls); text-decoration: none; transition: transform .1s, box-shadow .1s, opacity .12s, color .15s, border-color .15s; } .pbtn > svg { flex: none; display: block; width: 15px; height: 15px; } .pbtn:hover { color: var(--pbtn-ink-hover); border-color: var(--pbtn-edge-hover); transform: translate(var(--pbtn-lift), var(--pbtn-lift)); box-shadow: var(--pbtn-shadow-hover); opacity: var(--pbtn-hover-opacity); } .pbtn:active { transform: translate(var(--pbtn-sink), var(--pbtn-sink)); box-shadow: var(--pbtn-shadow-press); } /* 点不了的时候没有硬阴影：阴影只属于此刻能点的键（app 的不可用态由 [aria-disabled] 那一条管字色） */ .pbtn:disabled, .pbtn[aria-disabled="true"] { cursor: default; transform: none; box-shadow: none; } .pbtn:disabled { opacity: .45; } /* 次一档的键（同一页已经有一个主键时，另一条路：「用 Google 登录」）：只换底色 */ .pbtn.quiet { background: var(--pbtn-bg-quiet); } /* ══ 字标 .pseg.brand：两边左上角同一个 token（--tp-brand） ══ */ .pseg.brand { font: var(--tp-brand); letter-spacing: -0.02em; color: var(--ink); text-decoration: none; } /* ══ 文字动作 .dtab：一件按钮就是一行字，没有底、没有圆角矩形。 选中只动颜色与字重；宽度按最粗那一份预留（同样的字先用 strong 撑出格子，不显形），切换时几何不动 ══ */ .dtab { display: inline-grid; appearance: none; margin: 0; padding: 0; background: none; border: 0; border-bottom: var(--dtab-line-w) solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; font-family: inherit; font-size: var(--fs-note); line-height: inherit; transition: border-color .12s; } .dtab > *, .dtab::before { grid-area: 1 / 1; } .dtab::before { content: attr(data-lbl); font-weight: var(--fw-strong); visibility: hidden; pointer-events: none; } :is(:root, .screen) .dtab { color: var(--ink); font-weight: var(--dtab-fw); } :is(:root, .screen) .dtab:hover { border-bottom-color: var(--dtab-line); } :is(:root, .screen) .dtab.on { color: var(--ink); font-weight: var(--dtab-fw-on); border-bottom-color: var(--dtab-line-on); } /* 开关式的文字动作关着的时候（aria-pressed=false）：灰字常规 */ :is(:root, .screen) .dtab[aria-pressed="false"] { color: var(--ink5); font-weight: var(--fw-regular); } .dtab:active { opacity: .55; } .dtab.busy { opacity: .35; pointer-events: none; } /* ══ 图标键 .gbtn：盒子、居中、按压反馈一处定；图形的颜色跟着它所在的地方 ══ */ .gbtn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--gbtn-size); height: var(--gbtn-size); appearance: none; padding: 0; border: 0; border-radius: var(--r-round); background: none; cursor: pointer; transition: background-color .12s; } button.gbtn { margin: 0; color: inherit; font: inherit; } /*