mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-11 21:57:14 +03:00
Paul BakausandClaude Fable 5
7557935fdb
Catalog: mode-aligned staging surfaces (persuade/operate/read/experience), star ratings on approvals feeding challenger draw weights, family retirements, authoring strategy and territory guide, rework and breadth authoring rounds, composition mining from rejected worlds. Seed: six challengers (two per tier), --reroll chains, --mode staging filter, rating-weighted draws. New-work: Present/visualize/re-roll flow, image-gen requirement, register-neutral vocabulary. Pipeline: per-mode staging prompts with split frames, hero-from-board reference generation, render-safety guards. Labs: ratings UI, unrated filter, mode chips, composition approve-guard. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
157 lines
2.8 KiB
CSS
157 lines
2.8 KiB
CSS
@import "./sub-pages.css";
|
|
|
|
.live-ui-lab-page {
|
|
overflow: hidden;
|
|
background: var(--ks-lacquer);
|
|
}
|
|
|
|
.live-ui-lab {
|
|
display: grid;
|
|
grid-template-rows: 64px minmax(0, 1fr);
|
|
height: 100dvh;
|
|
min-height: 0;
|
|
color: var(--ks-text);
|
|
background: var(--ks-lacquer);
|
|
}
|
|
|
|
.live-ui-lab__bar {
|
|
position: relative;
|
|
z-index: 10;
|
|
display: grid;
|
|
grid-template-columns: auto auto minmax(12rem, 1fr) auto;
|
|
gap: var(--spacing-md);
|
|
align-items: center;
|
|
min-width: 0;
|
|
padding: 8px var(--spacing-sm);
|
|
background: var(--ks-lacquer-deep);
|
|
border-bottom: 1px solid var(--ks-rule);
|
|
}
|
|
|
|
.live-ui-lab__brand {
|
|
gap: 9px;
|
|
color: var(--ks-kinpaku);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.live-ui-lab__brand .ks-mark {
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
|
|
.live-ui-lab__brand .ks-mark svg {
|
|
width: 26px;
|
|
height: 26px;
|
|
}
|
|
|
|
.live-ui-lab__heading {
|
|
min-width: 0;
|
|
padding-left: var(--spacing-md);
|
|
border-left: 1px solid var(--ks-rule);
|
|
}
|
|
|
|
.live-ui-lab__heading span {
|
|
display: block;
|
|
color: var(--ks-patina);
|
|
font-family: var(--ks-mono);
|
|
font-size: var(--ks-type-eyebrow-size);
|
|
font-weight: 500;
|
|
letter-spacing: 0.12em;
|
|
line-height: 1.2;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.live-ui-lab__heading h1 {
|
|
margin-top: 3px;
|
|
color: var(--ks-champagne);
|
|
font-family: var(--ks-font);
|
|
font-size: var(--ks-type-title-size);
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.live-ui-lab__bar > p {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
color: var(--ks-text-muted);
|
|
font-size: var(--ks-type-mono-size);
|
|
line-height: 1.4;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.live-ui-lab__back {
|
|
display: inline-flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
min-height: 36px;
|
|
padding: 0 12px;
|
|
color: var(--ks-kinpaku);
|
|
border: 1px solid var(--ks-rule);
|
|
border-radius: 3px;
|
|
font-size: var(--ks-type-mono-size);
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.live-ui-lab__back:hover {
|
|
border-color: var(--ks-kinpaku);
|
|
}
|
|
|
|
.live-ui-lab__brand:focus-visible,
|
|
.live-ui-lab__back:focus-visible {
|
|
outline: 2px solid var(--ks-patina);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.live-ui-lab__canvas {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
padding: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.live-ui-lab__canvas > .live-ui-gallery {
|
|
border: 1px solid var(--ks-rule);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.live-ui-lab__bar {
|
|
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
}
|
|
|
|
.live-ui-lab__bar > p {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 580px) {
|
|
.live-ui-lab {
|
|
grid-template-rows: 58px minmax(0, 1fr);
|
|
}
|
|
|
|
.live-ui-lab__bar {
|
|
gap: 10px;
|
|
padding-inline: 10px;
|
|
}
|
|
|
|
.live-ui-lab__brand .ks-wordmark,
|
|
.live-ui-lab__heading span,
|
|
.live-ui-lab__back span {
|
|
display: none;
|
|
}
|
|
|
|
.live-ui-lab__heading {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.live-ui-lab__back {
|
|
min-height: 34px;
|
|
padding-inline: 9px;
|
|
}
|
|
|
|
.live-ui-lab__canvas {
|
|
padding: 4px;
|
|
}
|
|
}
|