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（含通则：更新器把原生错误兜底成指错方向的人话）。
126 lines
11 KiB
CSS
126 lines
11 KiB
CSS
* { box-sizing: border-box; }
|
|
[hidden] { display:none !important; }
|
|
html { --page-bg:#fff; --page-ink:#283244; --page-muted:#8a929f; --page-line:#e8ecf2; background:var(--page-bg); color:var(--page-ink); color-scheme: light; }
|
|
html[data-theme="dark"] { --page-bg:#0e1117; --page-ink:#edf0f5; --page-muted:#7f8795; --page-line:#ffffff12; color-scheme:dark; }
|
|
/* A quiet host backdrop makes the glass sample's transmission visible. */
|
|
html[data-material="glass"] { background-image:radial-gradient(ellipse at 12% 25%,color-mix(in oklab,var(--gallery-accent) 18%,transparent),transparent 56%),radial-gradient(ellipse at 88% 70%,color-mix(in oklab,var(--gallery-accent) 12%,transparent),transparent 55%); background-attachment:fixed; }
|
|
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB",sans-serif; -webkit-font-smoothing:antialiased; }
|
|
button,input,a { -webkit-tap-highlight-color:transparent; }
|
|
button { font-family:inherit; }
|
|
button:focus-visible,a:focus-visible,input:focus-visible { outline:2px solid var(--page-ink); outline-offset:4px; }
|
|
.gallery-page { max-width:1360px; padding:0 40px; margin:auto; }
|
|
.gallery-header { height:72px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--page-line); }
|
|
.gallery-mark { text-decoration:none; color:inherit; font-size:25px; font-weight:650; letter-spacing:-.08em; & span { font-size:13px; letter-spacing:0; font-weight:400; margin-left:7px; color:var(--page-muted); } }
|
|
.gallery-edition { font-size:11px; color:var(--page-muted); letter-spacing:.02em; }
|
|
.gallery-intro { display:flex; align-items:center; justify-content:space-between; padding:33px 0 32px; gap:20px; & h1 { margin:0; font-size:26px; font-weight:450; letter-spacing:-.055em; } }
|
|
.gallery-controls { display:flex; flex-wrap:wrap; align-items:center; gap:12px; font-size:11px; }
|
|
.theme-options { display:flex; padding:2px; border:1px solid var(--page-line); border-radius:5px; & button { background:transparent; color:var(--page-muted); border:0; padding:4px 7px; font-size:10px; cursor:pointer; border-radius:3px; &.selected { background:var(--page-line); color:var(--page-ink); } } }
|
|
.radius-control { display:flex; align-items:center; gap:7px; color:var(--page-muted); white-space:nowrap; & input { width:54px; height:2px; accent-color:var(--page-ink); cursor:pointer; } & output { width:13px; font:10px ui-monospace,monospace; } }
|
|
figure { margin:0; min-width:0; }
|
|
.replay-motion { font:inherit; color:var(--page-muted); background:transparent; border:1px solid var(--page-line); border-radius:4px; padding:4px 7px; cursor:pointer; }
|
|
figcaption .replay-motion { border:0; padding:0; font-size:10px; text-decoration:underline; text-underline-offset:3px; }
|
|
figcaption { display:flex; justify-content:space-between; gap:8px; padding:12px 1px 0; color:var(--page-muted); font:10px/1.5 ui-monospace,monospace; & > span:last-child { font-family:inherit; font-size:9px; opacity:.75; } }
|
|
.signature-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:18px; }
|
|
.ribbons-figure { margin-top:30px; }
|
|
.promo-figure { margin-top:30px; }
|
|
.exploration-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:18px; margin-top:36px; }
|
|
.renderer-options { display:inline-flex; gap:3px; & button { font-family:inherit; font-size:11px; line-height:1.4; border:1px solid transparent; padding:3px 8px; border-radius:4px; background:transparent; color:var(--page-muted); cursor:pointer; } & button[aria-pressed="true"] { border-color:var(--page-line); color:var(--page-ink); } }
|
|
.utility-grid { margin-top:36px; }
|
|
.metric-figure { margin-top:30px; }
|
|
.utility-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
|
|
.showcase-intro { display:flex; flex-direction:column; justify-content:center; position:relative; padding:45px 0 5px; & > span { font:10px ui-monospace,monospace; color:var(--page-muted); letter-spacing:.07em; } & h2 { margin:18px 0 15px; font-weight:400; font-size:36px; line-height:1.25; letter-spacing:-.06em; } & p { font-size:13px; color:var(--page-muted); margin:0; } }
|
|
.carousel-navigation { position:absolute; bottom:23px; right:0; display:flex; gap:8px; & button { width:34px; height:34px; border:1px solid var(--page-line); background:transparent; border-radius:4px; color:var(--page-ink); font-size:17px; cursor:pointer; &:hover { background:var(--page-line); } } }
|
|
.showcase-section { margin-top:35px; }
|
|
.gallery-footer { border-top:1px solid var(--page-line); padding:25px 0 35px; margin-top:48px; display:flex; justify-content:space-between; font-size:10px; color:var(--page-muted); }
|
|
body.focus-only {
|
|
& .gallery-page { width:440px; padding:20px; }
|
|
& .gallery-header,& .gallery-intro,& .palette-editor,& .category-controls,& .category-summary,& .gallery-footer,& .showcase-intro { display:none; }
|
|
& main { display:block; }
|
|
& .signature-grid,& .utility-grid,& .closing-grid,& .exploration-grid { display:contents; }
|
|
& .exploration-grid.focused { display:grid; margin:0; & figure { display:block; } }
|
|
& figure { display:none; margin:0; }
|
|
& figure.focused { display:block; }
|
|
& .showcase-section { display:none; margin:0; }
|
|
& .showcase-section.focused { display:block; }
|
|
& .showcase-card { flex-basis:calc((100% - 48px) / 4); }
|
|
&.focus-wide .gallery-page { width:min(1280px,100vw); }
|
|
}
|
|
@media(max-width:1050px) { .gallery-intro { flex-direction:column; align-items:flex-start; gap:20px; } .gallery-controls { width:100%; } }
|
|
@media(max-width:650px) {
|
|
.gallery-page { padding:0 20px; }
|
|
.gallery-header { height:60px; }
|
|
.gallery-edition { font-size:9px; }
|
|
.gallery-intro { padding:24px 0; gap:18px; & h1 { font-size:25px; } }
|
|
.gallery-controls { flex-wrap:wrap; gap:10px; justify-content:space-between; }
|
|
.radius-control { gap:5px; & input { width:40px; } }
|
|
.signature-grid { grid-template-columns:1fr; gap:26px; }
|
|
.exploration-grid { grid-template-columns:1fr; gap:26px; }
|
|
.closing-grid { grid-template-columns:1fr; }
|
|
.showcase-intro { grid-column:auto; padding:30px 0 24px; & h2 { font-size:32px; } }
|
|
.gallery-footer { font-size:9px; }
|
|
body.focus-only .gallery-page { width:100%; }
|
|
body.focus-only .showcase-card { flex-basis:min(332px,86vw); }
|
|
}
|
|
|
|
.attribute-control { display:flex; align-items:center; gap:5px; color:var(--page-muted); white-space:nowrap; & select { border:1px solid var(--page-line); border-radius:4px; color:var(--page-ink); background:var(--page-bg); padding:4px; font:inherit; cursor:pointer; } }
|
|
@media(min-width:1051px) { .gallery-intro { flex-wrap:wrap; } .gallery-controls { gap:12px; } }
|
|
@media(max-width:650px) { .utility-grid { grid-template-columns:1fr; } .showcase-intro { padding:35px 0 25px; } }
|
|
|
|
.palette-editor { display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; padding:18px 0; border-top:1px solid var(--page-line); border-bottom:1px solid var(--page-line); }
|
|
.palette-editor .attribute-control { font-size:12px; }
|
|
.palette-editor .attribute-control select { padding:7px 8px; }
|
|
.palette-color { display:flex; align-items:center; gap:8px; min-width:0; }
|
|
.palette-color > label { font-size:12px; color:var(--page-muted); }
|
|
.palette-color input[type="color"] { appearance:none; width:30px; height:30px; flex:none; border:1px solid var(--page-line); padding:3px; border-radius:6px; background:var(--page-bg); cursor:pointer; }
|
|
.palette-color input[type="color"]::-webkit-color-swatch-wrapper { padding:0; }
|
|
.palette-color input[type="color"]::-webkit-color-swatch { border:0; border-radius:3px; }
|
|
.palette-color input[type="color"]::-moz-color-swatch { border:0; border-radius:3px; }
|
|
.palette-hex { width:90px; min-width:0; padding:7px 6px; border:1px solid var(--page-line); border-radius:5px; background:var(--page-bg); color:var(--page-ink); font:12px/1.2 ui-monospace,monospace; }
|
|
.palette-hex[aria-invalid="true"] { border-color:#b94e46; }
|
|
.palette-reset { margin-left:auto; font-family:inherit; font-size:12px; color:var(--page-muted); background:transparent; border:0; padding:8px 0; cursor:pointer; }
|
|
.palette-reset:hover { color:var(--page-ink); }
|
|
.palette-note { color:var(--page-muted); font-size:12px; }
|
|
.palette-feedback { flex-basis:100%; font-size:12px; color:var(--page-ink); }
|
|
.palette-feedback:empty { display:none; }
|
|
.category-controls { display:flex; flex-wrap:wrap; gap:8px 20px; padding-top:20px; margin-bottom:24px; }
|
|
.category-controls button { display:flex; align-items:baseline; gap:7px; font-family:inherit; font-size:13px; border:0; border-bottom:2px solid transparent; padding:8px 0; color:var(--page-muted); background:transparent; cursor:pointer; }
|
|
.category-controls button[aria-pressed="true"] { border-color:var(--page-ink); color:var(--page-ink); }
|
|
.category-controls button span { font:11px ui-monospace,monospace; color:var(--page-muted); }
|
|
.category-summary { margin:0 0 24px; max-width:70ch; font-size:13px; line-height:1.6; color:var(--page-muted); }
|
|
/* Filtered results share tracks; a lone portrait must not stretch into a banner. */
|
|
main[data-category]:not([data-category="all"]) {
|
|
display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr)); gap:30px 18px; align-items:start;
|
|
& .signature-grid,& .exploration-grid,& .utility-grid { display:contents; }
|
|
& .ribbons-figure,& .promo-figure,& .metric-figure,& .showcase-intro,& .showcase-section { grid-column:1 / -1; margin:0; }
|
|
}
|
|
@media(max-width:650px) {
|
|
.palette-editor { gap:14px 20px; }
|
|
.palette-mode { margin-right:calc(100% - 120px); }
|
|
.palette-reset { margin-left:0; }
|
|
.category-controls { column-gap:18px; }
|
|
}
|
|
|
|
/* New studies keep the first three portrait/feature views together. */
|
|
.peer-intro { padding:8px 0 24px; }
|
|
.peer-intro > span { font:10px ui-monospace,monospace; letter-spacing:.06em; color:var(--page-muted); }
|
|
.peer-intro h2 { font-size:24px; line-height:1.3; font-weight:450; letter-spacing:-.04em; margin:12px 0 8px; }
|
|
.peer-intro p { font-size:12px; line-height:1.6; color:var(--page-muted); margin:0; }
|
|
.peer-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:28px 18px; margin-bottom:44px; align-items:start; }
|
|
.peer-grid > figure { grid-column:span 2; }
|
|
.peer-grid > .peer-wide { grid-column:span 3; }
|
|
.peer-grid figcaption { flex-wrap:wrap; }
|
|
.peer-grid figcaption a { color:inherit; text-decoration:none; font:10px/1.5 -apple-system,BlinkMacSystemFont,sans-serif; }
|
|
.peer-grid figcaption a:hover { text-decoration:underline; text-underline-offset:3px; }
|
|
main[data-category]:not([data-category="all"]) {
|
|
& .peer-grid { display:contents; }
|
|
& .peer-grid > figure { grid-column:auto; }
|
|
& .peer-intro { grid-column:1 / -1; padding:0; }
|
|
}
|
|
body.focus-only {
|
|
& .peer-intro { display:none; }
|
|
& .peer-grid { display:contents; }
|
|
& .peer-grid.focused { display:grid; margin:0; & figure { display:block; } }
|
|
}
|
|
@media(max-width:1050px) {.peer-grid {grid-template-columns:repeat(2,minmax(0,1fr)); & > figure,& > .peer-wide {grid-column:auto;}}}
|
|
@media(max-width:650px) {.peer-grid {grid-template-columns:1fr;gap:28px;} .peer-intro h2 {font-size:22px;}}
|