unknownandClaude Opus 5.5
1b825b44c4
Sechs Designs (Klemmbaustein, Warm, Nachtblau, Bonbon, Bauklotz, Schlicht) als Tokens je data-design, gewaehlt unter Konto und pro Geraet im Cookie gespeichert. Dazu Noppen, Steinkontur, Platzhalter fuer Sets ohne Bild, neues Logo, lokal gebuendelte Schriften und eine Startseite mit Steinreihe und naechstem Termin. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
302 lines
8.0 KiB
CSS
302 lines
8.0 KiB
CSS
/*
|
|
* Selectable designs. Each one is a set of tokens under :root[data-design=...]
|
|
* (the attribute is set in the root layout from a cookie, see src/lib/design.ts).
|
|
* The neutral "schlicht" design uses the defaults from globals.css.
|
|
*
|
|
* Token additions on top of shadcn:
|
|
* --font-display headings and big numbers
|
|
* --edge, --edge-w outline of cards, buttons and badges
|
|
* --lift(-sm) the hard bottom edge that makes a card look like a brick
|
|
* --studs "flex" shows the studs on top of cards, "none" hides them
|
|
* --tone-1..5 placeholder colours for sets without an image
|
|
* --owned the "Vorhanden" badge
|
|
*/
|
|
|
|
/* --- Klemmbaustein (default) --------------------------------------------- */
|
|
:root[data-design='klemmbaustein'] {
|
|
--font-sans: 'Nunito Variable', ui-sans-serif, system-ui, sans-serif;
|
|
--font-display: 'Fredoka Variable', ui-sans-serif, system-ui, sans-serif;
|
|
--radius: 1rem;
|
|
|
|
--background: #fff6e5;
|
|
--foreground: #24203f;
|
|
--card: #ffffff;
|
|
--card-foreground: #24203f;
|
|
--popover: #ffffff;
|
|
--popover-foreground: #24203f;
|
|
--primary: #d63a30;
|
|
--primary-foreground: #ffffff;
|
|
--secondary: #ffc93c;
|
|
--secondary-foreground: #24203f;
|
|
--muted: #f6ead0;
|
|
--muted-foreground: #5f5a78;
|
|
--accent: #ffe9b0;
|
|
--accent-foreground: #24203f;
|
|
--destructive: #c62828;
|
|
--border: rgb(36 32 63 / 0.16);
|
|
--input: #24203f;
|
|
--ring: #2f6bea;
|
|
|
|
--logo: #ffc93c;
|
|
--edge: #24203f;
|
|
--edge-w: 2px;
|
|
--lift: 0 4px 0 #24203f;
|
|
--lift-sm: 0 3px 0 #24203f;
|
|
--studs: flex;
|
|
--owned: #2ebd85;
|
|
--owned-foreground: #24203f;
|
|
--tone-ink: #24203f;
|
|
--tone-1: #ffe08a;
|
|
--tone-2: #bfd6ff;
|
|
--tone-3: #bdebd3;
|
|
--tone-4: #ffc9d9;
|
|
--tone-5: #e2d6ff;
|
|
}
|
|
|
|
/* --- Warm ---------------------------------------------------------------- */
|
|
:root[data-design='warm'] {
|
|
--font-sans: 'Inter Variable', ui-sans-serif, system-ui, sans-serif;
|
|
--font-display: 'Bricolage Grotesque Variable', ui-sans-serif, system-ui, sans-serif;
|
|
--radius: 0.875rem;
|
|
|
|
--background: #f6f3ec;
|
|
--foreground: #1d1b17;
|
|
--card: #ffffff;
|
|
--card-foreground: #1d1b17;
|
|
--popover: #ffffff;
|
|
--popover-foreground: #1d1b17;
|
|
--primary: #c8381f;
|
|
--primary-foreground: #ffffff;
|
|
--secondary: #fbe3a6;
|
|
--secondary-foreground: #1d1b17;
|
|
--muted: #ece6da;
|
|
--muted-foreground: #5f594f;
|
|
--accent: #fbe3a6;
|
|
--accent-foreground: #1d1b17;
|
|
--destructive: #b42318;
|
|
--border: #e2dbcd;
|
|
--input: #d6cebf;
|
|
--ring: #c8381f;
|
|
|
|
--edge: transparent;
|
|
--edge-w: 0px;
|
|
--lift: 0 1px 2px rgb(29 27 23 / 0.06);
|
|
--lift-sm: none;
|
|
--studs: none;
|
|
--owned: #1f7a4d;
|
|
--owned-foreground: #ffffff;
|
|
--tone-ink: #1d1b17;
|
|
--tone-1: #fbe3a6;
|
|
--tone-2: #d6e6f5;
|
|
--tone-3: #dde8d2;
|
|
--tone-4: #f6d5cc;
|
|
--tone-5: #e5ddf0;
|
|
}
|
|
|
|
/* --- Nachtblau (dark) ---------------------------------------------------- */
|
|
:root[data-design='nacht'] {
|
|
color-scheme: dark;
|
|
--font-sans: 'Inter Variable', ui-sans-serif, system-ui, sans-serif;
|
|
--font-display: 'Outfit Variable', ui-sans-serif, system-ui, sans-serif;
|
|
--radius: 1.125rem;
|
|
|
|
--background: #0e1422;
|
|
--foreground: #f2f4f8;
|
|
--card: #182136;
|
|
--card-foreground: #f2f4f8;
|
|
--popover: #1b2540;
|
|
--popover-foreground: #f2f4f8;
|
|
--primary: #ffc93c;
|
|
--primary-foreground: #1a1300;
|
|
--secondary: #222d45;
|
|
--secondary-foreground: #f2f4f8;
|
|
--muted: #222d45;
|
|
--muted-foreground: #a3adc2;
|
|
--accent: #2a3654;
|
|
--accent-foreground: #f2f4f8;
|
|
--destructive: #f87171;
|
|
--border: #2c3854;
|
|
--input: #34405e;
|
|
--ring: #ffc93c;
|
|
|
|
--edge: transparent;
|
|
--edge-w: 0px;
|
|
--lift: none;
|
|
--lift-sm: none;
|
|
--studs: none;
|
|
--owned: #1e4d3a;
|
|
--owned-foreground: #8fe3b8;
|
|
--tone-ink: #f2f4f8;
|
|
--tone-1: #3a3218;
|
|
--tone-2: #1b2c44;
|
|
--tone-3: #22331e;
|
|
--tone-4: #3d2230;
|
|
--tone-5: #2c2546;
|
|
}
|
|
|
|
/* --- Bonbon -------------------------------------------------------------- */
|
|
:root[data-design='bonbon'] {
|
|
--font-sans: 'Nunito Variable', ui-sans-serif, system-ui, sans-serif;
|
|
--font-display: 'Fredoka Variable', ui-sans-serif, system-ui, sans-serif;
|
|
--radius: 1.5rem;
|
|
|
|
--background: #f4f0ff;
|
|
--foreground: #23194a;
|
|
--card: #ffffff;
|
|
--card-foreground: #23194a;
|
|
--popover: #ffffff;
|
|
--popover-foreground: #23194a;
|
|
--primary: #6d4aff;
|
|
--primary-foreground: #ffffff;
|
|
--secondary: #ede7ff;
|
|
--secondary-foreground: #4b2fc4;
|
|
--muted: #ede7ff;
|
|
--muted-foreground: #5e567c;
|
|
--accent: #ede7ff;
|
|
--accent-foreground: #23194a;
|
|
--destructive: #c62828;
|
|
--border: #e4ddf7;
|
|
--input: #d8cff3;
|
|
--ring: #6d4aff;
|
|
|
|
--edge: transparent;
|
|
--edge-w: 0px;
|
|
--lift: 0 8px 24px rgb(35 25 74 / 0.08);
|
|
--lift-sm: none;
|
|
--studs: none;
|
|
--owned: #157a57;
|
|
--owned-foreground: #ffffff;
|
|
--tone-ink: #23194a;
|
|
--tone-1: #fff1c7;
|
|
--tone-2: #dff0ff;
|
|
--tone-3: #ddf7ea;
|
|
--tone-4: #ffe1d1;
|
|
--tone-5: #ffddeb;
|
|
}
|
|
|
|
/* --- Bauklotz ------------------------------------------------------------ */
|
|
:root[data-design='bauklotz'] {
|
|
--font-sans: 'Archivo Variable', ui-sans-serif, system-ui, sans-serif;
|
|
--font-display: 'Archivo Variable', ui-sans-serif, system-ui, sans-serif;
|
|
--radius: 0.75rem;
|
|
|
|
--background: #fffbef;
|
|
--foreground: #111111;
|
|
--card: #ffffff;
|
|
--card-foreground: #111111;
|
|
--popover: #ffffff;
|
|
--popover-foreground: #111111;
|
|
--primary: #1e5eff;
|
|
--primary-foreground: #ffffff;
|
|
--secondary: #ffd500;
|
|
--secondary-foreground: #111111;
|
|
--muted: #f3eedc;
|
|
--muted-foreground: #4a4a4a;
|
|
--accent: #ffd500;
|
|
--accent-foreground: #111111;
|
|
--destructive: #c62828;
|
|
--border: rgb(17 17 17 / 0.2);
|
|
--input: #111111;
|
|
--ring: #1e5eff;
|
|
|
|
--logo: #ffd500;
|
|
--edge: #111111;
|
|
--edge-w: 2.5px;
|
|
--lift: 4px 4px 0 #111111;
|
|
--lift-sm: 3px 3px 0 #111111;
|
|
--studs: none;
|
|
--owned: #111111;
|
|
--owned-foreground: #ffffff;
|
|
--tone-ink: #111111;
|
|
--tone-1: #ffd500;
|
|
--tone-2: #7fb2ff;
|
|
--tone-3: #8bd17c;
|
|
--tone-4: #ff8a7a;
|
|
--tone-5: #c9a7ff;
|
|
}
|
|
|
|
:root[data-design='bauklotz'] :is(h1, h2) {
|
|
font-weight: 900;
|
|
text-transform: uppercase;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
/*
|
|
* Surfaces. Unlayered on purpose: these must win over the utility classes of
|
|
* the shadcn components, which carry the neutral look. Focused elements keep
|
|
* their ring (also a box-shadow), so the lift steps aside for it.
|
|
*/
|
|
[data-slot='card'] {
|
|
border: var(--edge-w) solid var(--edge);
|
|
box-shadow: var(--lift);
|
|
}
|
|
|
|
:root:is([data-design='klemmbaustein'], [data-design='bauklotz']) {
|
|
& [data-slot='button']:is(
|
|
[data-variant='default'],
|
|
[data-variant='outline'],
|
|
[data-variant='secondary'],
|
|
[data-variant='destructive']
|
|
) {
|
|
border-width: var(--edge-w);
|
|
border-color: var(--edge);
|
|
font-weight: 700;
|
|
|
|
&:not(:focus-visible) {
|
|
box-shadow: var(--lift-sm);
|
|
}
|
|
|
|
&:active:not(:disabled) {
|
|
translate: 0 2px;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
& [data-slot='badge'] {
|
|
border-width: 2px;
|
|
border-color: var(--edge);
|
|
border-radius: calc(var(--radius) * 0.5);
|
|
font-weight: 800;
|
|
}
|
|
|
|
& :is([data-slot='input'], [data-slot='textarea'], [data-slot='native-select'], [data-slot='select-trigger']) {
|
|
border-width: var(--edge-w);
|
|
border-color: var(--edge);
|
|
}
|
|
|
|
& :is([data-slot='dialog-content'], [data-slot='alert-dialog-content'], [data-slot='popover-content'], [data-slot='dropdown-menu-content'], [data-slot='select-content']) {
|
|
border: var(--edge-w) solid var(--edge);
|
|
box-shadow: var(--lift);
|
|
}
|
|
}
|
|
|
|
/* A surface outside the shadcn components (set tiles, list entries). */
|
|
@utility brick {
|
|
border: var(--edge-w) solid var(--edge);
|
|
box-shadow: var(--lift);
|
|
}
|
|
|
|
/* --- Studs ---------------------------------------------------------------- */
|
|
/* In a layer, so a utility class on a stud (collector colour) still wins. */
|
|
@layer components {
|
|
.studs {
|
|
display: var(--studs);
|
|
position: absolute;
|
|
top: calc(var(--edge-w) - 10px);
|
|
left: 16px;
|
|
gap: 10px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.stud {
|
|
display: block;
|
|
width: 20px;
|
|
height: 10px;
|
|
box-sizing: border-box;
|
|
border: var(--edge-w) solid var(--edge);
|
|
border-bottom: 0;
|
|
border-radius: 7px 7px 0 0;
|
|
background: var(--card);
|
|
}
|
|
}
|