admin
d9445b5888
- oil-ui-pro 升到 0.22.2：references 13→28 份（新增 16、删 imagery.md）、assets 增 cards/（22 组）与 fonts/、SKILL.md 顶层五步结构未改名。 - 升级路径：官方 `npx github:oil-oil/oil-cli update` 稳定失败（error=replace、报「检查目录权限」）。 真身为 EXDEV —— 解压在 os.tmpdir()（C 盘）、技能目录在 E 盘，Windows 上 rename 不能跨盘； CLI 的 catch 把非 CliError 原生异常一律兜底成 replaceFailed，真错误一个字不吐。 做法＝借其 prepare() 只做下载+校验，再 cp 到同盘 stage、rename 交换；官方命令复验 up_to_date。 - 回归：product-planning 按名引用的 visual-review.md／tools.md／design-direction.md／style-explorer.md 全部健在；命名闸门 2061｜0｜27。 - session-mechanism/references/pitfalls.md 新增 P0-98（含通则：更新器把原生错误兜底成指错方向的人话）。
40 lines
3.2 KiB
CSS
40 lines
3.2 KiB
CSS
.metric {
|
|
min-height:calc(var(--_card-heading-height,44px) + 163px);
|
|
& .metric-copy { position:absolute; left:30px; right:55%; top:25px; z-index:2; }
|
|
& .metric-copy h2 { font-size:19px; margin:0 0 9px; font-weight:550; letter-spacing:-.035em; }
|
|
& .metric-copy p { font-size:11px; color:var(--card-muted); margin:0; }
|
|
& .metric-number { position:absolute; left:30px; bottom:42px; display:flex; align-items:center; gap:18px; }
|
|
& .metric-value { display:flex; align-items:baseline; font-size:72px; line-height:1; font-weight:300; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
|
|
& .metric-readable { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
|
|
& .metric-digit { display:block; width:.58em; height:1em; overflow:clip; mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent); }
|
|
& .metric-reel { display:flex; flex-direction:column; }
|
|
& .metric-reel > span { display:block; height:1em; flex:none; }
|
|
& .metric-separator { display:block; width:.22em; }
|
|
& .metric-delta { font-size:12px; white-space:nowrap; color:var(--_card-accent-ink); padding:6px 8px; background:color-mix(in oklab,var(--card-accent) 7%,var(--card-surface)); border-radius:5px; & small { display:none; } }
|
|
& .metric-chart { position:absolute; right:30px; bottom:0; width:45%; height:78%; }
|
|
& .metric-bars { height:100%; display:flex; align-items:flex-end; gap:5px; border-bottom:1px solid var(--card-line);
|
|
& i { flex:1; height:var(--height); background:color-mix(in oklab,var(--card-muted) 23%,var(--card-surface)); transform-origin:bottom; transform:scaleY(var(--bar-growth,1)); border-radius:2px 2px 0 0; }
|
|
& .recent { background:color-mix(in oklab,var(--card-accent) 19%,var(--card-surface)); }
|
|
& .current { background:linear-gradient(in oklab,var(--_card-accent-2),var(--card-accent)); }
|
|
}
|
|
& .metric-today { position:absolute; right:0; top:-16px; font-size:10px; color:var(--_card-accent-ink); opacity:var(--metric-settled,1); }
|
|
& .metric-delta { opacity:var(--metric-settled,1); transform:translateY(calc((1 - var(--metric-settled,1))*3px)); }
|
|
& .metric-axis { display:none; }
|
|
&[data-title="bottom"] { & .metric-copy { top:auto; bottom:23px; } & .metric-number { bottom:auto; top:27px; } & .metric-chart { height:65%; bottom:0; } }
|
|
@media(max-width:950px) { & .metric-value { font-size:55px; } & .metric-delta { font-size:10px; } }
|
|
@media(max-width:650px) {
|
|
min-height:calc(var(--_card-heading-height,44px) + 228px);
|
|
& .metric-copy { left:24px; right:24px; top:24px; }
|
|
& .metric-copy h2 { font-size:18px; }
|
|
& .metric-number { left:24px; top:max(97px,calc(var(--_card-heading-height,44px) + 44px)); bottom:auto; gap:10px; }
|
|
& .metric-value { font-size:52px; }
|
|
& .metric-chart { width:calc(100% - 48px); right:24px; height:min(36%,calc(100% - var(--_card-heading-height,44px) - 132px)); }
|
|
& .metric-bars { gap:4px; }
|
|
&[data-title="bottom"] {
|
|
min-height:calc(var(--_card-heading-height,44px) + 242px);
|
|
& .metric-number { top:32px; }
|
|
& .metric-chart { bottom:max(102px,calc(var(--_card-heading-height,44px) + 55px)); height:min(35%,calc(100% - var(--_card-heading-height,44px) - 162px)); }
|
|
}
|
|
}
|
|
}
|