style(今日脚印): 引导占位改用 AI 气泡那套语言(白气泡 + 竖线圆点),不再横跨整块 (v26092218)
用户反馈:原来那张横跨整块的白卡「放在这有点突兀」,要求按 AI 气泡的样式、用白色背景实现。 - 标记改为与 .ai-bubble **同构**:空 .ab-badge 占位(宽度 = --tl-time)+ .ab-dot + .ab-body > .tl-guide-bubble。于是圆点落在**同一条竖线**上,与时间轴/落款行对齐。 - 样式:白底 + 1px --line 描边 + 4px/16px 圆角 + 指向竖线的尖角。 ⚠️ 白底必须带描边:AI 气泡靠暖渐变区分,白气泡压白底只剩阴影会糊成一片。 ⚠️ 尖角用「旋转 45° 的小方块 + 同色描边」(纯 border 三角做不出描边)。 ⚠️ 文案层级:lead(上游引导语)走 15px/600 主文案,下面那行提示走 12.5px 次要色,芯片左对齐。 - 行为不变(文案仍来自接口 lead,芯片仍来自 unused[] 且可点)。 本地验证:guide 模式渲染为竖线上的白气泡(版式已截图确认)、rows 模式不受影响、无 JS 异常。
This commit is contained in:
20
mama-box.css
20
mama-box.css
@@ -639,12 +639,22 @@ a.skip:focus{left:16px;top:16px}
|
||||
320px 视口下 .step 一行内容总宽约 311 > 可用 264,flex 就去压唯一压得动的时间列,
|
||||
把它压到约 36px,圆点跟着左移,看上去就是「时间贴到竖线上」。
|
||||
现在三处统一 flex:0 0 var(--tl-time),谁都不许缩。 */
|
||||
/* 今日脚印:「无档案」时的引导占位(替换掉收起的时间轴) */
|
||||
.tl-guide{background:#fff;border-radius:22px;padding:20px 18px;box-shadow:var(--sh);text-align:center}
|
||||
.tl-guide-t{font-size:15px;font-weight:800;color:var(--ink)}
|
||||
.tl-guide-s{font-size:12.5px;color:var(--ink-2);margin-top:6px;line-height:1.6}
|
||||
/* 引导占位(今天没有任何足迹时):**沿用 AI 气泡那套语言** —— 左列 + 圆点 + 带尖角的气泡,
|
||||
与时间轴共用同一条竖线,不再是一张横跨整块的白卡(用户反馈那样突兀)。
|
||||
⚠️ 底色用白(用户指定):所以要**加一圈描边**才看得出气泡边界 ——
|
||||
AI 气泡靠暖渐变区分,白气泡压白底只剩阴影会糊成一片。
|
||||
⚠️ 尖角用「旋转 45° 的小方块 + 同色描边」,这样描边能跟着拐过去;纯 border 三角做不出描边。 */
|
||||
.tl-guide{position:relative;display:flex;align-items:flex-start;gap:var(--tl-gap);
|
||||
width:100%;padding:10px var(--tl-pad) 0}
|
||||
.tl-guide-bubble{display:block;position:relative;background:#fff;border:1px solid var(--line);
|
||||
border-radius:4px 16px 16px 16px;padding:11px 14px 12px}
|
||||
.tl-guide-bubble::before{content:"";position:absolute;left:-5px;top:11px;width:9px;height:9px;
|
||||
background:#fff;border-left:1px solid var(--line);border-bottom:1px solid var(--line);
|
||||
transform:rotate(45deg);border-radius:0 0 0 2px}
|
||||
.tl-guide-t{display:block;font-size:15px;font-weight:600;line-height:1.55;color:#403430}
|
||||
.tl-guide-s{display:block;font-size:12.5px;color:var(--ink-2);margin-top:4px;line-height:1.6}
|
||||
/* 引导里可点的应用芯片(名字来自接口 unused[];identifier 是 box_app 按 App 表 url 路径解析的) */
|
||||
.tl-guide-apps{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
|
||||
.tl-guide-apps{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
|
||||
.tl-guide-apps:empty{display:none}
|
||||
.tl-chip{font:inherit;font-size:12.5px;font-weight:700;color:var(--brand-dk);
|
||||
background:#FFF1EC;border:1px solid #FFDFD5;border-radius:999px;padding:7px 13px;line-height:1}
|
||||
|
||||
Reference in New Issue
Block a user