tanshu
b13042f0db
Google Stitch produced an Atelier Dining & Hospitality system for this app: warm ivory linen and espresso for the guest surfaces, burnished gold for the single active thing, Playfair Display for the restaurant's voice and Plus Jakarta Sans for everything transactional, editorial rows with dot leaders, pill controls, hairline containment instead of drop shadows. The four screens and the system document are kept in docs/design/stitch/ as the source. Both fonts are now self-hosted with their licences, the guest stylesheet is rebuilt on the system, and the admin is the same system in its dark mode (espresso workspace, obsidian pods, gold actions) by overriding the same tokens at a higher specificity, since the per-Site theme is injected inline after the stylesheets. The Site theme in config/ moves to the system's palette, which is where per-Site branding belongs; the old Archivo font is dropped.
439 lines
6.8 KiB
CSS
439 lines
6.8 KiB
CSS
/* The administrative side of the same system: an espresso workspace with warm
|
|
obsidian pods and burnished gold for the one active thing. See
|
|
docs/design/stitch/atelier-dining-hospitality.md. */
|
|
|
|
body.admin-page {
|
|
--steel: #121110;
|
|
--rail: #1e1c1a;
|
|
--paper: #faf8f5;
|
|
--ink: #faf8f5;
|
|
--ink-soft: #c9c4bd;
|
|
--ink-dim: #a9a29a;
|
|
--ink-on-paper: #121110;
|
|
--accent: #c59b58;
|
|
--copper: #b08544;
|
|
--hairline: #2d2a26;
|
|
--hairline-soft: #262320;
|
|
--sheet-shadow: rgba(0, 0, 0, 0.45);
|
|
--shadow-card: none;
|
|
--shadow-float: 0 12px 36px -4px rgba(0, 0, 0, 0.5);
|
|
--radius-card: 0.5rem;
|
|
--radius-pill: 9999px;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-ui, 'Plus Jakarta Sans', system-ui, sans-serif);
|
|
}
|
|
|
|
.button {
|
|
border-radius: var(--radius-pill);
|
|
font-size: 0.78rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.field input,
|
|
.catrow__name input {
|
|
min-height: 44px;
|
|
border-radius: var(--radius-card);
|
|
}
|
|
|
|
.field input:focus,
|
|
.catrow__name input:focus {
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 2px rgba(197, 155, 88, 0.18);
|
|
outline: none;
|
|
}
|
|
|
|
.page-admin,
|
|
.drop {
|
|
border-radius: var(--radius-card);
|
|
}
|
|
|
|
.pill {
|
|
border-radius: var(--radius-pill);
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
font-size: 0.62rem;
|
|
}
|
|
|
|
/* The admin shares the customer tokens and stays out of the way: forms,
|
|
lists, and thumbnails good enough to judge a page by. */
|
|
|
|
.admin {
|
|
max-width: 62rem;
|
|
margin: 0 auto;
|
|
padding: 1.25rem 1rem 4rem;
|
|
}
|
|
|
|
.admin__bar {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 0.85rem;
|
|
padding-bottom: 0.75rem;
|
|
border-bottom: 1px solid var(--hairline);
|
|
}
|
|
|
|
.admin__title {
|
|
margin: 0;
|
|
font-size: var(--step-2);
|
|
font-weight: 600;
|
|
font-stretch: 116%;
|
|
}
|
|
|
|
.admin__section {
|
|
flex: 1 1 auto;
|
|
color: var(--ink-dim);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.block {
|
|
margin-top: 1.75rem;
|
|
}
|
|
|
|
.block__title {
|
|
margin: 0 0 0.5rem;
|
|
color: var(--ink-dim);
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.setlist {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.setlist li {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 0.75rem;
|
|
padding: 0.55rem 0;
|
|
border-bottom: 1px solid var(--hairline-soft);
|
|
}
|
|
|
|
.setlist__none {
|
|
color: var(--ink-dim);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.setlist__main {
|
|
display: flex;
|
|
align-items: baseline;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.setlist__label {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.setlist__meta {
|
|
color: var(--ink-dim);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.setlist__actions {
|
|
display: flex;
|
|
gap: 0.35rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.pill {
|
|
padding: 0.1rem 0.4rem;
|
|
border: 1px solid var(--hairline);
|
|
color: var(--ink-dim);
|
|
font-size: 0.72rem;
|
|
text-transform: none;
|
|
}
|
|
|
|
.pill--current {
|
|
border-color: transparent;
|
|
background: var(--accent);
|
|
color: var(--steel);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.pill--draft {
|
|
border-color: transparent;
|
|
background: var(--copper);
|
|
color: var(--steel);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.button {
|
|
display: inline-block;
|
|
padding: 0.4rem 0.7rem;
|
|
border: 1px solid var(--hairline);
|
|
background: var(--rail);
|
|
color: var(--ink);
|
|
font: inherit;
|
|
font-size: 0.88rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.button:hover {
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.button--primary {
|
|
border-color: transparent;
|
|
background: var(--accent);
|
|
color: var(--steel);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.button--danger {
|
|
border-color: color-mix(in srgb, #d06a5a 55%, transparent);
|
|
color: #eeb8ae;
|
|
}
|
|
|
|
.button--icon {
|
|
padding: 0.25rem 0.5rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.newset,
|
|
.inline-form {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
margin-top: 0.9rem;
|
|
}
|
|
|
|
.newset {
|
|
padding-top: 0.9rem;
|
|
}
|
|
|
|
.field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.3rem;
|
|
min-width: 12rem;
|
|
}
|
|
|
|
.field label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.3rem;
|
|
color: var(--ink-dim);
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.field input {
|
|
padding: 0.45rem 0.55rem;
|
|
border: 1px solid var(--hairline);
|
|
background: var(--steel);
|
|
color: var(--ink);
|
|
font: inherit;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.field__hint,
|
|
.muted {
|
|
color: var(--ink-dim);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.drop {
|
|
padding: 1.1rem;
|
|
border: 1px dashed var(--hairline);
|
|
color: var(--ink-dim);
|
|
text-align: center;
|
|
}
|
|
|
|
.drop.is-over {
|
|
border-color: var(--accent);
|
|
color: var(--ink);
|
|
}
|
|
|
|
.drop__text {
|
|
margin: 0;
|
|
}
|
|
|
|
.drop__hint {
|
|
margin: 0.4rem 0 0;
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.drop__status {
|
|
margin: 0.6rem 0 0;
|
|
min-height: 1.2em;
|
|
color: var(--accent);
|
|
font-size: 0.88rem;
|
|
}
|
|
|
|
.no-js-upload {
|
|
display: none;
|
|
}
|
|
|
|
.pages-admin {
|
|
display: grid;
|
|
gap: 0.5rem;
|
|
margin: 1rem 0 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.page-admin {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.5rem;
|
|
background: var(--rail);
|
|
}
|
|
|
|
.page-admin.is-dragging {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.page-admin img {
|
|
display: block;
|
|
width: 64px;
|
|
height: auto;
|
|
background: var(--paper);
|
|
}
|
|
|
|
.page-admin__handle {
|
|
color: var(--ink-dim);
|
|
cursor: grab;
|
|
user-select: none;
|
|
}
|
|
|
|
.page-admin__meta {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-direction: column;
|
|
gap: 0.15rem;
|
|
min-width: 0;
|
|
font-size: 0.82rem;
|
|
color: var(--ink-dim);
|
|
}
|
|
|
|
.page-admin__number {
|
|
color: var(--ink);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.page-admin__name {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.page-admin__actions {
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.notice--error {
|
|
border-left-color: #d06a5a;
|
|
background: color-mix(in srgb, #d06a5a 18%, var(--rail));
|
|
}
|
|
|
|
.fold summary {
|
|
color: var(--ink-dim);
|
|
font-size: 0.85rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Login */
|
|
|
|
.login {
|
|
max-width: 21rem;
|
|
margin: 14vh auto 0;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.login__sub {
|
|
margin: 0.2rem 0 1.5rem;
|
|
color: var(--ink-dim);
|
|
}
|
|
|
|
.login form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.login .field {
|
|
width: 100%;
|
|
}
|
|
|
|
.login input {
|
|
width: 100%;
|
|
}
|
|
|
|
/* ---------- Categories ---------- */
|
|
|
|
.catlist {
|
|
margin: 0.4rem 0 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.catrow {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 0.4rem 0.6rem;
|
|
padding: 0.5rem 0;
|
|
border-bottom: 1px solid var(--hairline-soft);
|
|
}
|
|
|
|
.catrow__name {
|
|
display: flex;
|
|
flex: 1 1 13rem;
|
|
gap: 0.4rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.catrow__name input {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
padding: 0.4rem 0.5rem;
|
|
border: 1px solid var(--hairline);
|
|
background: var(--steel);
|
|
color: var(--ink);
|
|
font: inherit;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.catrow__url {
|
|
color: var(--ink-dim);
|
|
font-size: 0.8rem;
|
|
font-variant-numeric: tabular-nums;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.catrow__actions {
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.fold--categories > summary {
|
|
color: var(--ink);
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.fold--categories .muted {
|
|
margin: 0.5rem 0 0;
|
|
}
|