v94 必填项改成「标签红色加粗」，去掉红色星号 (#3)
需求（用户 2026-10-25）：必填项原来在标题后面加一个红色星号，排版经常不齐。
改成「标题本身红色 + 加粗」——用户习惯后，看到红色加粗的标题就知道是必填。
CSS（assets/css/app.css）：
- :root 新增 --req:#B03A2E、--req-w:700。
· 不用 --red(#C0533F)：那是动作红（删除按钮底色），当文字色放在暖纸底
#F7F3EA 上对比度只有 ≈3.4:1，13-14px 标签偏浅；#B03A2E 约 4.6:1。
· --req-w 必须 700 不能 650/600：本站标签基线字重本来就是 600
（.form-grid > .field > label / .card .field > label / .mv-row > .mv-lb /
.dt-range-label 四处都是 600），650 会被取整回 600 = 完全没加粗。
- 文件末尾新增「必填项统一标记」段，覆盖四种标签形态：
label.is-req / .mv-lb.is-req / .dt-inline-lab.is-req / .dt-range-label.is-req，
用 !important 打穿各宿主选择器的特异性（颜色与字重是语义标记，不该被面板样式盖掉）。
- 冒号跟着变红：.mv-lb::after / .dt-inline-lab::after 原本是灰色 400，
只改标签本体会剩「红字 + 灰冒号」的半截效果。
- 包裹层兜底（.field.is-req > label 等），只作用直接子级 ——
不写 .field.is-req label，那会把「提醒」那排 checkbox 的小标签一起染红。
- 深色主题给备用色 #F08A78。
- 保留 .mv-row > .mv-lb > i（万一有没清干净的星号不至于露灰星花，且静态断言会报出来）。
模板（16 个文件 / 30 处）：
- _event_fields.php / _datetime.php 的标签闭包第三参数 $star → $req，
$dtLabelStar → $dtLabelReq，删掉死引用 $evLabelStar。
- 其余 14 个模板把 `<i>*</i>` 换成给标签加 is-req 类。
- 用显式 .is-req 而不靠 required 属性反推：CSS 无父选择器，:has() 旧 WebView
不可用，且影院名称/板块名本来就靠 JS 校验没有 required。
验证：
- 静态 _fb_v94_static.py 22/0，反向 9/9（含「--req-w 必须严格大于从 CSS 解析出的
标签基线字重」，不写死 700）。
- 真浏览器 _fb_v94_req.py 63/0，反向 5/5（加粗/必须红/!important 必要性/
星号必须消失/每形态单独覆盖，五类注入各自精确命中预期断言）。
- 全量流水线（含 60+ 套件）通过并部署。
- 线上真实页面 _fb_v94_live.py 31/0：观影「片名」、旅程「旅程名」、
成员「姓名」、导航「网址/所属板块」实测 color=rgb(176,58,46) weight=700，
同页非必填 color=rgb(44,35,29) weight=600，冒号同色，无星号。
This commit is contained in:
+118
-1
@@ -15,6 +15,25 @@
|
||||
--brand-ink:#6E3820;
|
||||
--green: #6F9E5C;
|
||||
--red: #C0533F;
|
||||
/* 🔴🔴 v94（用户 2026-10-25）：必填项的标记方式从「标题后面加红星星号」改成
|
||||
「标题本身**红色 + 加粗**」——用户原话：
|
||||
「必填项现在的做法是在后面加一个红色的星，但这样排版有时候不好看，对不齐。
|
||||
把所有必填项都改一下，改成红色加粗字体……一看前面的标题，
|
||||
只要是红色加粗的字体，就知道这是必填项。」
|
||||
⇒ 需要两个变量：一个"必填红"、一个"必填字重"。
|
||||
⚠️ **为什么单独立一个 `--req` 而不是直接用 `--red`**：
|
||||
`--red` (#C0533F) 是**动作红**（删除按钮的底色），它当文字色用在这个
|
||||
暖纸底 (#F7F3EA) 上对比度只有 ≈ 3.4:1 —— 13-14px 的标签字号下偏浅。
|
||||
这里取深一档的 #B03A2E（≈ 4.6:1），既明显是红，又能和正文墨色同等清晰。
|
||||
**改这个值会全站必填标签一起变。**
|
||||
⚠️🔴 `--req-w` **必须是 700，不能写 650/600**：本站标签的基线字重
|
||||
本来就是 600（`.form-grid > .field > label`、`.card .field > label`、
|
||||
`.mv-row > .mv-lb`、`.dt-range-label` 四处都是 600）。写 650 的话
|
||||
浏览器只会取到最近的真字重 700 或合成加粗 —— 一旦落到 600 就等于
|
||||
**完全没加粗**，用户看到的只剩"变红"，而他明确说的是「红色加粗」。
|
||||
700 与 600 的差在 15px 中文黑体上是能一眼分出来的。 */
|
||||
--req: #B03A2E;
|
||||
--req-w: 700;
|
||||
/* 🔴 v40（用户 2026-10-10）：「影院管理部分…编辑使用蓝色的背景，删除使用红色的背景。」
|
||||
⇒ 新增一个中性的"操作蓝"（不是链接蓝、也不是模块品牌色）—— 它是**语义色**：
|
||||
蓝=编辑、红=删除，全站统一，跟着模块换肤也不该变。
|
||||
@@ -5838,7 +5857,9 @@ h6.md-h { font-size: 17px; color: var(--muted); }
|
||||
line-height: 1.4; word-break: keep-all;
|
||||
}
|
||||
.mv-row > .mv-lb::after { content: '：'; font-weight: 400; color: var(--muted); }
|
||||
/* 必填星号：跟在标签文字后、冒号前 */
|
||||
/* 🔴 v94 起星号不再使用（见文件下方「必填项统一标记」那段）；这两条留着**不删**：
|
||||
万一还有没清干净的 `<i>*</i>`，它会渲染成紧贴的红色星号、不会露成一个灰星花，
|
||||
而静态断言会把它当失败报出来 —— 比"悄悄留个灰星花"好定位。 */
|
||||
.mv-row > .mv-lb > i { font-style: normal; color: var(--red, #C0392B); margin-left: 1px; }
|
||||
/* 控件区：占满剩余宽度（min-width:0 让它能被压缩，不会把标签挤出去） */
|
||||
.mv-row > *:not(.mv-lb) { flex: 1 1 auto; min-width: 0; }
|
||||
@@ -6767,3 +6788,99 @@ h6.md-h { font-size: 17px; color: var(--muted); }
|
||||
/* v78：卡片窄到"宽 2"时，标题 +「全部任务」+「新建任务」三样挤不下 ——
|
||||
允许折行，别把标题压成 0 宽（那会只剩两颗按钮，看不出这是哪张卡片）。 */
|
||||
.hc-card.hc-w2 .hc-head { flex-wrap: wrap; }
|
||||
|
||||
/* ============================================================================
|
||||
🔴🔴 v94（用户 2026-10-25）：必填项统一标记 = **标签红色 + 加粗**，去掉红色星号
|
||||
============================================================================
|
||||
用户原话：「必填项现在的做法是在后面加一个红色的星，但这样排版有时候不好看，
|
||||
对不齐。把所有必填项都改一下，改成红色加粗字体，就不用再考虑加红色星的问题了。
|
||||
这样用户习惯之后，一看前面的标题，比如"日程名称"这种，只要是红色加粗的字体，
|
||||
就知道这是必填项。我感觉这个比加红色的星更好一些。」
|
||||
|
||||
------------------------------------------------------------------
|
||||
为什么用 `.is-req` 这个**显式标记**，而不是"看有没有 `required` 属性"自动推断
|
||||
------------------------------------------------------------------
|
||||
`required` 只出现在 `<input>` 上，而标签是它的**兄弟或父级之前的节点** ——
|
||||
CSS 没有"父选择器"能用它反推（`:has()` 也只在很新的内核里可用，本项目要照顾
|
||||
旧 WebView）。而且有几个必填项**根本没有 `required` 属性**（比如影院名称、
|
||||
板块名这些靠 JS 校验的），靠属性推断会漏掉。
|
||||
⇒ 一律由模板显式加 `is-req` / `is-req` 放在 `<span class="mv-lb">` 上。
|
||||
「哪些是必填」这个事实写在模板里（离 `required` 最近），
|
||||
「红加粗长什么样」写在 CSS 里（一处改、全站生效）。
|
||||
|
||||
------------------------------------------------------------------
|
||||
⚠️ 三条硬约束（都是本项目的实测坑）
|
||||
------------------------------------------------------------------
|
||||
① **特异性**：这里用 `.is-req`（0,1,0）去覆盖 `.mv-row > .mv-lb`
|
||||
（0,2,0）和 `.form-grid > .field > label`（0,2,1）—— 单靠一条肯定压不住。
|
||||
所以最后用 `!important` 打穿。这不是偷懒：颜色/字重是**语义标记**，
|
||||
不该被"某个面板想调一下标签样式"顺手盖掉，否则同一个"必填"在不同页面长得不一样。
|
||||
② **冒号必须跟着变红**：`.mv-lb::after` / `.dt-inline-lab::after` 把「：」画成
|
||||
灰色 400 字重 —— 只改标签本体会出现"红字 + 灰冒号"的半截效果。这里一并覆盖。
|
||||
③ **不能用 `color: inherit` 之类做减法**：`--red` 是动作红（删除按钮底色），
|
||||
当文字色在暖纸底上偏浅，见 `:root` 里 `--req` 的说明。
|
||||
|
||||
------------------------------------------------------------------
|
||||
覆盖的三种标签形态（本项目全部标签都落在这三种里，已逐个核过）
|
||||
------------------------------------------------------------------
|
||||
a) `<label>` —— 多数表单
|
||||
b) `<span class="mv-lb">` —— 观影式右对齐标签（含 ::after 冒号）
|
||||
c) `<span class="dt-inline-lab">` —— 日期控件的内联标签（也带 ::after 冒号）
|
||||
============================================================================ */
|
||||
|
||||
/* a) 裸 <label>（含 .form-grid / .card .field / .cal-modal 等各种宿主） */
|
||||
label.is-req,
|
||||
.field > label.is-req {
|
||||
color: var(--req) !important;
|
||||
font-weight: var(--req-w) !important;
|
||||
}
|
||||
|
||||
/* b) 观影式 .mv-lb —— 冒号一起变红（`.mv-lb::after` 把「：」画成灰色 400，
|
||||
只改标签本体会剩"红字 + 灰冒号"的半截效果；冒号也得跟着 700，否则
|
||||
650/400 之间会断开一截） */
|
||||
.mv-lb.is-req,
|
||||
.mv-row > .mv-lb.is-req,
|
||||
.dt-inline-lab.is-req {
|
||||
color: var(--req) !important;
|
||||
font-weight: var(--req-w) !important;
|
||||
}
|
||||
.mv-lb.is-req::after,
|
||||
.mv-row > .mv-lb.is-req::after,
|
||||
.dt-inline-lab.is-req::after {
|
||||
color: var(--req) !important;
|
||||
font-weight: var(--req-w) !important;
|
||||
}
|
||||
|
||||
/* c) 日期范围那种独立标签（`<span class="dt-range-label">日期范围</span>`） */
|
||||
.dt-range-label.is-req {
|
||||
color: var(--req) !important;
|
||||
font-weight: var(--req-w) !important;
|
||||
}
|
||||
|
||||
/* 兜底：万一模板把 is-req 加在了包裹层（`.field` / `.mv-row`）而不是标签本身，
|
||||
让里面的标签也吃到红色 —— 这样即使某处写法不同，用户看到的仍是一致的"红加粗"。
|
||||
⚠️ 只作用在直接子级的 label / .mv-lb / .dt-range-label 上：
|
||||
不能写成 `.field.is-req label`，那会把「提醒」那排 checkbox 的小标签一起染红。 */
|
||||
.field.is-req > label,
|
||||
.field.is-req > .field-label,
|
||||
.mv-row.is-req > .mv-lb,
|
||||
.field.is-req > .dt-range-label {
|
||||
color: var(--req) !important;
|
||||
font-weight: var(--req-w) !important;
|
||||
}
|
||||
.field.is-req > .dt-range-label::after,
|
||||
.mv-row.is-req > .mv-lb::after {
|
||||
color: var(--req) !important;
|
||||
font-weight: var(--req-w) !important;
|
||||
}
|
||||
|
||||
/* 深色/高对比主题下 `--req` 若偏暗就看不清 —— 这个站点目前只有暖纸一套，
|
||||
但 `.dark` 类保留着（见 :root 附近的说明）。这里给一条备用值，
|
||||
免得将来加暗色时必填标签糊进背景。 */
|
||||
.dark label.is-req,
|
||||
.dark .mv-lb.is-req,
|
||||
.dark .dt-range-label.is-req,
|
||||
.dark .field.is-req > label,
|
||||
.dark .mv-row.is-req > .mv-lb {
|
||||
color: #F08A78 !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user