DDD1542
6b17c1fadf
Build & Deploy to K8s / build-and-deploy (push) Failing after 8m6s
Include the outstanding numbering-rule admin page changes, TabBar interaction updates, V5 layout theme accent styling, and auto-generation option compatibility fix. Add the local web-prototype skill assets, numbering-rule design variants, control IDE refactor note, and the table canonical cleanup plan/prompts used across phases B through F. This commit captures the remaining workspace files after the canonical table cleanup commit so the branch can be pushed without leaving local dirty work behind.
642 lines
21 KiB
CSS
642 lines
21 KiB
CSS
:root {
|
|
--bg: oklch(98% 0.004 255);
|
|
--bg-subtle: oklch(95% 0.008 255);
|
|
--surface: oklch(100% 0 0);
|
|
--surface-hover: oklch(96.5% 0.009 255);
|
|
--surface-strong: oklch(92% 0.012 255);
|
|
--text: oklch(18% 0.018 255);
|
|
--text-sec: oklch(44% 0.018 255);
|
|
--text-muted: oklch(62% 0.014 255);
|
|
--text-faint: oklch(78% 0.01 255);
|
|
--border: oklch(88% 0.008 255);
|
|
--border-strong: oklch(76% 0.018 255);
|
|
--primary: oklch(58% 0.17 258);
|
|
--primary-soft: color-mix(in oklch, var(--primary) 10%, transparent);
|
|
--cyan: oklch(67% 0.14 205);
|
|
--cyan-soft: color-mix(in oklch, var(--cyan) 13%, transparent);
|
|
--green: oklch(61% 0.16 155);
|
|
--green-soft: color-mix(in oklch, var(--green) 12%, transparent);
|
|
--amber: oklch(70% 0.15 78);
|
|
--amber-soft: color-mix(in oklch, var(--amber) 14%, transparent);
|
|
--red: oklch(58% 0.18 25);
|
|
--red-soft: color-mix(in oklch, var(--red) 11%, transparent);
|
|
--shadow-sm: 0 10px 26px color-mix(in oklch, var(--primary) 9%, transparent);
|
|
--shadow-md: 0 24px 72px color-mix(in oklch, var(--primary) 14%, transparent);
|
|
--font-sans: -apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", system-ui, sans-serif;
|
|
--font-mono: "JetBrains Mono", "D2Coding", ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
--radius-sm: 7px;
|
|
--radius-md: 10px;
|
|
--radius-lg: 14px;
|
|
--topbar-h: 58px;
|
|
}
|
|
|
|
html.dark {
|
|
--bg: oklch(11% 0.012 260);
|
|
--bg-subtle: oklch(15% 0.014 260);
|
|
--surface: oklch(18% 0.014 260);
|
|
--surface-hover: oklch(22% 0.015 260);
|
|
--surface-strong: oklch(25% 0.016 260);
|
|
--text: oklch(94% 0.004 260);
|
|
--text-sec: oklch(72% 0.01 260);
|
|
--text-muted: oklch(54% 0.011 260);
|
|
--text-faint: oklch(38% 0.012 260);
|
|
--border: oklch(29% 0.012 260);
|
|
--border-strong: oklch(42% 0.018 260);
|
|
--primary: oklch(73% 0.13 258);
|
|
--cyan: oklch(80% 0.13 185);
|
|
--green: oklch(76% 0.14 155);
|
|
--amber: oklch(82% 0.13 82);
|
|
--red: oklch(72% 0.16 25);
|
|
--shadow-sm: 0 0 28px color-mix(in oklch, var(--primary) 13%, transparent);
|
|
--shadow-md: 0 0 70px color-mix(in oklch, var(--primary) 18%, transparent);
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html, body { margin: 0; min-height: 100%; }
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: var(--font-sans);
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
button, input, select, textarea { font: inherit; color: inherit; }
|
|
button { cursor: pointer; }
|
|
a { color: inherit; text-decoration: none; }
|
|
h1, h2, h3, h4, p { margin: 0; }
|
|
h1, h2, h3 { letter-spacing: -0.02em; text-wrap: balance; }
|
|
p { text-wrap: pretty; }
|
|
svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
|
|
|
|
.demo-shell {
|
|
min-height: 100vh;
|
|
display: grid;
|
|
grid-template-rows: var(--topbar-h) 1fr;
|
|
background:
|
|
radial-gradient(circle at 82% 10%, color-mix(in oklch, var(--primary) 10%, transparent), transparent 26rem),
|
|
radial-gradient(circle at 12% 88%, color-mix(in oklch, var(--cyan) 10%, transparent), transparent 28rem),
|
|
var(--bg);
|
|
}
|
|
.topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 18px;
|
|
padding: 0 22px;
|
|
border-bottom: 1px solid var(--border);
|
|
background: color-mix(in oklch, var(--surface) 94%, transparent);
|
|
backdrop-filter: blur(14px);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 20;
|
|
}
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
}
|
|
.brand-mark {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 9px;
|
|
display: grid;
|
|
place-items: center;
|
|
color: white;
|
|
background: linear-gradient(135deg, var(--primary), var(--cyan));
|
|
font-family: var(--font-mono);
|
|
font-weight: 900;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
.brand h1 { font-size: 16px; font-weight: 800; }
|
|
.breadcrumb {
|
|
display: flex;
|
|
gap: 6px;
|
|
align-items: center;
|
|
margin-top: 1px;
|
|
color: var(--text-muted);
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
}
|
|
.breadcrumb b { color: var(--text-sec); }
|
|
.top-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
|
|
.btn {
|
|
height: 30px;
|
|
border: 1px solid var(--border);
|
|
background: var(--surface);
|
|
border-radius: var(--radius-sm);
|
|
padding: 0 11px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
font-size: 12px;
|
|
font-weight: 750;
|
|
transition: background .14s, border-color .14s, color .14s, transform .05s;
|
|
white-space: nowrap;
|
|
}
|
|
.btn:hover { border-color: var(--border-strong); background: var(--surface-hover); }
|
|
.btn:active { transform: translateY(1px); }
|
|
.btn.primary { background: var(--primary); border-color: var(--primary); color: white; }
|
|
.btn.cyan { background: var(--cyan); border-color: var(--cyan); color: oklch(15% 0.012 240); }
|
|
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-sec); }
|
|
.btn.ghost:hover { background: var(--surface-hover); color: var(--text); }
|
|
.btn.icon { width: 30px; padding: 0; }
|
|
.kbd, .chip, .status-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
min-height: 23px;
|
|
padding: 2px 7px;
|
|
border-radius: 6px;
|
|
border: 1px solid var(--border);
|
|
background: var(--bg-subtle);
|
|
color: var(--text-sec);
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
font-weight: 750;
|
|
}
|
|
.chip.primary { color: var(--primary); background: var(--primary-soft); border-color: color-mix(in oklch, var(--primary) 30%, var(--border)); }
|
|
.chip.green { color: var(--green); background: var(--green-soft); border-color: color-mix(in oklch, var(--green) 28%, var(--border)); }
|
|
.chip.amber { color: var(--amber); background: var(--amber-soft); border-color: color-mix(in oklch, var(--amber) 30%, var(--border)); }
|
|
.chip.red { color: var(--red); background: var(--red-soft); border-color: color-mix(in oklch, var(--red) 30%, var(--border)); }
|
|
.dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: none; }
|
|
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
|
|
|
|
.viewport { min-height: 0; display: grid; overflow: hidden; }
|
|
.cascade { grid-template-columns: clamp(248px, 18vw, 310px) clamp(260px, 19vw, 330px) minmax(0, 1fr); }
|
|
.workbench { grid-template-columns: clamp(260px, 19vw, 320px) minmax(0, 1fr) clamp(310px, 24vw, 380px); }
|
|
.guard { grid-template-columns: clamp(260px, 18vw, 320px) minmax(0, 1fr); }
|
|
.col {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
border-right: 1px solid var(--border);
|
|
background: color-mix(in oklch, var(--surface) 92%, transparent);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
.col:last-child { border-right: 0; }
|
|
.panel-head {
|
|
padding: 15px 15px 11px;
|
|
border-bottom: 1px solid var(--border);
|
|
flex: none;
|
|
}
|
|
.step-label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: var(--text-muted);
|
|
font-family: var(--font-mono);
|
|
font-size: 9px;
|
|
font-weight: 900;
|
|
letter-spacing: .12em;
|
|
text-transform: uppercase;
|
|
}
|
|
.step-label b {
|
|
color: var(--primary);
|
|
background: var(--primary-soft);
|
|
border: 1px solid color-mix(in oklch, var(--primary) 30%, var(--border));
|
|
padding: 1px 5px;
|
|
border-radius: 4px;
|
|
}
|
|
.panel-head h2 { margin-top: 7px; font-size: 17px; font-weight: 850; }
|
|
.panel-head p { margin-top: 3px; color: var(--text-muted); font-size: 12px; }
|
|
.search {
|
|
padding: 10px 12px;
|
|
border-bottom: 1px solid var(--border);
|
|
position: relative;
|
|
flex: none;
|
|
}
|
|
.search input {
|
|
width: 100%;
|
|
height: 32px;
|
|
padding: 0 34px 0 12px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 9px;
|
|
background: var(--bg-subtle);
|
|
outline: 0;
|
|
font-size: 12px;
|
|
}
|
|
.search input:focus {
|
|
border-color: var(--primary);
|
|
background: var(--surface);
|
|
box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 14%, transparent);
|
|
}
|
|
.search .kbd { position: absolute; right: 18px; top: 15px; min-height: 22px; }
|
|
.scroll { min-height: 0; overflow: auto; padding: 10px; }
|
|
.scroll::-webkit-scrollbar, .main-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
|
|
.scroll::-webkit-scrollbar-thumb, .main-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
|
|
|
|
.scope-card,
|
|
.nav-card,
|
|
.rule-row {
|
|
width: 100%;
|
|
border: 1px solid transparent;
|
|
background: transparent;
|
|
border-radius: var(--radius-md);
|
|
text-align: left;
|
|
padding: 11px;
|
|
display: grid;
|
|
gap: 7px;
|
|
transition: background .14s, border-color .14s, transform .14s;
|
|
}
|
|
.scope-card:hover, .nav-card:hover, .rule-row:hover { background: var(--surface-hover); border-color: var(--border); }
|
|
.scope-card.on, .nav-card.on, .rule-row.on {
|
|
background: var(--primary-soft);
|
|
border-color: color-mix(in oklch, var(--primary) 28%, var(--border));
|
|
}
|
|
.scope-top, .nav-top, .rule-top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
.scope-name, .nav-name, .rule-name { font-weight: 850; font-size: 13px; letter-spacing: -0.01em; }
|
|
.scope-meta, .nav-meta, .rule-meta { color: var(--text-muted); font-size: 11px; }
|
|
.scope-code, .rule-pattern {
|
|
color: var(--text-sec);
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.mini-meter {
|
|
height: 5px;
|
|
border-radius: 999px;
|
|
background: var(--bg-subtle);
|
|
overflow: hidden;
|
|
}
|
|
.mini-meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--cyan)); border-radius: inherit; }
|
|
.section-title {
|
|
padding: 12px 4px 6px;
|
|
color: var(--text-muted);
|
|
font-family: var(--font-mono);
|
|
font-size: 9px;
|
|
font-weight: 900;
|
|
letter-spacing: .14em;
|
|
text-transform: uppercase;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.main-scroll {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
background: var(--bg);
|
|
}
|
|
.detail-head {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
padding: 16px 20px;
|
|
border-bottom: 1px solid var(--border);
|
|
background: color-mix(in oklch, var(--bg) 88%, transparent);
|
|
backdrop-filter: blur(16px);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
align-items: flex-start;
|
|
}
|
|
.title-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
|
.title-line h2 { font-size: 22px; font-weight: 900; }
|
|
.detail-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 7px; color: var(--text-muted); font-size: 12px; }
|
|
.detail-meta b { color: var(--text-sec); font-weight: 800; }
|
|
.content-pad { padding: 18px 20px 86px; display: grid; gap: 14px; }
|
|
.two-col { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: 14px; }
|
|
.three-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
|
|
.card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
box-shadow: 0 1px 0 color-mix(in oklch, var(--surface) 80%, transparent);
|
|
}
|
|
.card.pad { padding: 16px; }
|
|
.card-head {
|
|
min-height: 48px;
|
|
padding: 13px 15px;
|
|
border-bottom: 1px solid var(--border);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.card-head h3 { font-size: 14px; font-weight: 850; }
|
|
.card-head p { margin-top: 2px; color: var(--text-muted); font-size: 11px; }
|
|
|
|
.code-hero {
|
|
position: relative;
|
|
min-height: 220px;
|
|
padding: 24px;
|
|
background:
|
|
linear-gradient(90deg, color-mix(in oklch, var(--primary) 9%, transparent), transparent 42%),
|
|
radial-gradient(circle at 85% 20%, color-mix(in oklch, var(--cyan) 12%, transparent), transparent 16rem),
|
|
var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 18px;
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
.code-hero::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: auto 24px 22px;
|
|
border-bottom: 1px dashed var(--border-strong);
|
|
}
|
|
.hero-kicker {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
color: var(--text-muted);
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
font-weight: 850;
|
|
letter-spacing: .08em;
|
|
text-transform: uppercase;
|
|
}
|
|
.code-line {
|
|
margin-top: 26px;
|
|
display: flex;
|
|
align-items: baseline;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
font-family: var(--font-mono);
|
|
font-size: clamp(34px, 5vw, 62px);
|
|
line-height: 1;
|
|
font-weight: 950;
|
|
letter-spacing: -0.055em;
|
|
}
|
|
.code-token {
|
|
padding: 4px 8px;
|
|
border-radius: 10px;
|
|
border: 1px solid transparent;
|
|
background: color-mix(in oklch, var(--surface) 74%, var(--bg-subtle));
|
|
}
|
|
.code-token.prefix { color: var(--text); }
|
|
.code-token.date { color: var(--cyan); }
|
|
.code-token.seq { color: var(--primary); box-shadow: inset 0 -3px 0 color-mix(in oklch, var(--primary) 24%, transparent); }
|
|
.code-token.scope { color: var(--green); }
|
|
.code-dash { color: var(--text-faint); }
|
|
.hero-foot {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 10px;
|
|
margin-top: 30px;
|
|
}
|
|
.hero-foot span { color: var(--text-muted); font-size: 11px; }
|
|
.hero-foot b { display: block; color: var(--text); margin-top: 2px; font-family: var(--font-mono); font-size: 12px; }
|
|
|
|
.composer { padding: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
|
|
.part {
|
|
min-width: 106px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
background: var(--bg-subtle);
|
|
padding: 11px;
|
|
text-align: left;
|
|
}
|
|
.part:hover { border-color: var(--border-strong); background: var(--surface-hover); }
|
|
.part.on { border-color: var(--primary); background: var(--primary-soft); }
|
|
.part .type { color: var(--text-muted); font-family: var(--font-mono); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
|
|
.part .value { display: block; margin-top: 5px; font-family: var(--font-mono); font-size: 16px; font-weight: 900; }
|
|
.joiner { color: var(--text-faint); font-family: var(--font-mono); font-weight: 900; }
|
|
.add-part {
|
|
border: 1px dashed color-mix(in oklch, var(--primary) 40%, var(--border));
|
|
background: transparent;
|
|
color: var(--primary);
|
|
border-radius: 12px;
|
|
min-height: 58px;
|
|
padding: 0 16px;
|
|
font-weight: 850;
|
|
}
|
|
.field-grid { padding: 15px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
|
|
.field { display: grid; gap: 6px; color: var(--text-sec); font-size: 11px; font-weight: 750; }
|
|
.input, .field input, .field select, .field textarea {
|
|
width: 100%;
|
|
min-height: 32px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
background: var(--bg-subtle);
|
|
padding: 0 10px;
|
|
outline: 0;
|
|
color: var(--text);
|
|
}
|
|
.field textarea { min-height: 74px; padding: 8px 10px; resize: vertical; }
|
|
.input:focus, .field input:focus, .field select:focus, .field textarea:focus {
|
|
border-color: var(--primary);
|
|
background: var(--surface);
|
|
box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 12%, transparent);
|
|
}
|
|
.metric-card { padding: 14px; border-right: 1px solid var(--border); }
|
|
.metric-card:last-child { border-right: 0; }
|
|
.metric-card span { color: var(--text-muted); font-family: var(--font-mono); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
|
|
.metric-card b { display: block; margin-top: 4px; font-size: 24px; font-family: var(--font-mono); }
|
|
.metric-card small { display: block; margin-top: 3px; color: var(--text-muted); font-size: 11px; }
|
|
|
|
.cp-panel { background: var(--surface); }
|
|
.cp-bar {
|
|
min-height: 54px;
|
|
border-bottom: 1px solid var(--border);
|
|
display: grid;
|
|
grid-template-columns: 104px 1fr;
|
|
}
|
|
.cp-kind, .cp-type {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 9px 11px;
|
|
}
|
|
.cp-kind { background: var(--bg-subtle); border-right: 1px solid var(--border); color: var(--text-sec); font-weight: 850; }
|
|
.cp-type strong { display: block; font-size: 12px; }
|
|
.cp-type span { display: block; color: var(--text-muted); font-size: 10px; }
|
|
.cp-icon {
|
|
width: 25px;
|
|
height: 25px;
|
|
border-radius: 7px;
|
|
display: grid;
|
|
place-items: center;
|
|
background: var(--primary-soft);
|
|
color: var(--primary);
|
|
border: 1px solid color-mix(in oklch, var(--primary) 24%, var(--border));
|
|
font-family: var(--font-mono);
|
|
font-weight: 900;
|
|
}
|
|
.cp-scroll { min-height: 0; overflow: auto; padding: 12px; display: grid; gap: 12px; }
|
|
.cp-section {
|
|
border-top: 1px solid var(--border);
|
|
padding-top: 12px;
|
|
}
|
|
.cp-section:first-child { border-top: 0; padding-top: 0; }
|
|
.cp-section-title {
|
|
margin-bottom: 8px;
|
|
color: var(--text-muted);
|
|
font-family: var(--font-mono);
|
|
font-size: 9px;
|
|
font-weight: 900;
|
|
letter-spacing: .14em;
|
|
text-transform: uppercase;
|
|
}
|
|
.cp-row {
|
|
display: grid;
|
|
grid-template-columns: 82px 1fr;
|
|
gap: 9px;
|
|
align-items: center;
|
|
min-height: 34px;
|
|
padding: 4px 0;
|
|
}
|
|
.cp-row label { color: var(--text-sec); font-size: 11px; font-weight: 750; }
|
|
.cp-help { color: var(--text-muted); font-size: 10px; margin-top: 4px; }
|
|
.segment {
|
|
display: inline-flex;
|
|
padding: 2px;
|
|
background: var(--bg-subtle);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
gap: 2px;
|
|
}
|
|
.segment button {
|
|
min-height: 25px;
|
|
border: 0;
|
|
background: transparent;
|
|
border-radius: 6px;
|
|
padding: 0 8px;
|
|
color: var(--text-sec);
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
}
|
|
.segment button.on { background: var(--surface); color: var(--primary); box-shadow: 0 1px 0 var(--border); }
|
|
.toggle {
|
|
width: 34px;
|
|
height: 19px;
|
|
padding: 2px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 999px;
|
|
background: var(--bg-subtle);
|
|
position: relative;
|
|
}
|
|
.toggle::after {
|
|
content: "";
|
|
display: block;
|
|
width: 13px;
|
|
height: 13px;
|
|
border-radius: 50%;
|
|
background: var(--text-faint);
|
|
transition: transform .18s, background .18s;
|
|
}
|
|
.toggle.on { background: var(--primary-soft); border-color: color-mix(in oklch, var(--primary) 35%, var(--border)); }
|
|
.toggle.on::after { transform: translateX(14px); background: var(--primary); }
|
|
|
|
.validation-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; }
|
|
.risk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
|
|
.risk-card {
|
|
padding: 14px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--surface);
|
|
}
|
|
.risk-card strong { display: block; font-size: 18px; margin-top: 8px; font-family: var(--font-mono); }
|
|
.risk-card p { color: var(--text-muted); font-size: 11px; margin-top: 4px; }
|
|
.risk-card.good { border-color: color-mix(in oklch, var(--green) 35%, var(--border)); background: var(--green-soft); }
|
|
.risk-card.warn { border-color: color-mix(in oklch, var(--amber) 40%, var(--border)); background: var(--amber-soft); }
|
|
.risk-card.bad { border-color: color-mix(in oklch, var(--red) 35%, var(--border)); background: var(--red-soft); }
|
|
.audit-row, .test-row {
|
|
display: grid;
|
|
grid-template-columns: 130px 1fr auto;
|
|
gap: 12px;
|
|
align-items: center;
|
|
padding: 12px 15px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.audit-row:last-child, .test-row:last-child { border-bottom: 0; }
|
|
.audit-row .time, .test-row .case { color: var(--text-muted); font-family: var(--font-mono); font-size: 10px; }
|
|
.audit-row strong, .test-row strong { display: block; }
|
|
.audit-row p, .test-row p { color: var(--text-muted); font-size: 11px; margin-top: 2px; }
|
|
.savebar {
|
|
position: sticky;
|
|
bottom: 0;
|
|
z-index: 12;
|
|
min-height: 58px;
|
|
padding: 10px 20px;
|
|
border-top: 1px solid var(--border);
|
|
background: color-mix(in oklch, var(--surface) 94%, transparent);
|
|
backdrop-filter: blur(14px);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
.savebar .note { color: var(--text-sec); font-weight: 800; }
|
|
.savebar .note span { color: var(--amber); }
|
|
|
|
.gallery {
|
|
min-height: 100vh;
|
|
padding: 34px;
|
|
background:
|
|
radial-gradient(circle at 86% 8%, color-mix(in oklch, var(--primary) 12%, transparent), transparent 28rem),
|
|
var(--bg);
|
|
}
|
|
.gallery-inner { max-width: 1180px; margin: 0 auto; display: grid; gap: 22px; }
|
|
.gallery-hero {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
gap: 18px;
|
|
align-items: end;
|
|
padding-bottom: 22px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.gallery-hero h1 { font-size: clamp(32px, 4vw, 52px); max-width: 14ch; }
|
|
.gallery-hero p { color: var(--text-sec); max-width: 58ch; margin-top: 10px; font-size: 15px; }
|
|
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
|
|
.gallery-card {
|
|
min-height: 330px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
gap: 22px;
|
|
padding: 18px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 18px;
|
|
background: var(--surface);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
.gallery-card h2 { font-size: 20px; }
|
|
.gallery-card p { color: var(--text-sec); margin-top: 8px; }
|
|
.preview-mini {
|
|
height: 150px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 14px;
|
|
background:
|
|
linear-gradient(90deg, var(--primary-soft), transparent),
|
|
var(--bg-subtle);
|
|
padding: 12px;
|
|
display: grid;
|
|
grid-template-columns: .45fr 1fr;
|
|
gap: 10px;
|
|
}
|
|
.mini-side, .mini-main {
|
|
border-radius: 10px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
}
|
|
.mini-main { display: grid; align-content: center; justify-items: start; padding: 14px; gap: 8px; }
|
|
.mini-line { height: 7px; border-radius: 999px; background: var(--border); width: 80%; }
|
|
.mini-line.short { width: 48%; background: var(--primary); }
|
|
.gallery-card .btn { align-self: flex-start; }
|
|
|
|
@media (max-width: 1100px) {
|
|
.cascade, .workbench, .guard { grid-template-columns: 1fr; overflow: auto; }
|
|
.col { min-height: auto; border-right: 0; border-bottom: 1px solid var(--border); }
|
|
.col.scope, .col.nav { max-height: none; }
|
|
.two-col, .validation-grid, .gallery-grid { grid-template-columns: 1fr; }
|
|
.field-grid, .three-col, .hero-foot, .risk-grid { grid-template-columns: 1fr; }
|
|
.topbar, .detail-head, .gallery-hero { align-items: flex-start; flex-direction: column; height: auto; padding: 14px; }
|
|
.demo-shell { grid-template-rows: auto 1fr; }
|
|
}
|