ClaudeandClaude Sonnet 5.5
25ff496548
- Router: Routen home, gestalten, cards, community/<id>, reset; Umleitung /?karte=<id> nach /gestalten?karte=<id>; Titel je Route (titleFor); Hash-Ziele (/#community) scrollen den Anker ins Bild, nur-Hash-Wechsel bauen die Seite nicht neu auf. - Kopfzeile: Navigation, Suche (Enter -> /?q=...#community), Spenden-Knopf, Hell/Dunkel-Schalter, Menue unter 900 px, Konto als Avatar-Kreis mit Menue. - Theme: data-theme auf <html> (Skript im <head> gegen Aufblitzen), helle Tokens, danger-/warn-/ok-text-Tokens statt fester Farben. - Spenden-Banner (schliessbar); ohne DONATE_URL bleiben Banner und Knopf weg. - User.labels und isAdmin; Platzhalter fuer Startseite und Detailseite. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
108 lines
1.9 KiB
CSS
108 lines
1.9 KiB
CSS
:root,
|
|
:root[data-theme='dark'] {
|
|
--bg: #0F1828;
|
|
--panel: #162133;
|
|
--panel-2: #1B2738;
|
|
--line: #2A3A52;
|
|
--line-strong: #3D5576;
|
|
--sel-bg: #1F3150;
|
|
--sel-line: #8FB4E8;
|
|
--text: #E8EEF7;
|
|
--muted: #9DB0C8;
|
|
--primary: #2A4566;
|
|
--primary-hover: #34557C;
|
|
--on-primary: #E8EEF7;
|
|
--danger: #E5484D;
|
|
--danger-text: #ff9a9d;
|
|
--warn-text: #f2c66d;
|
|
--ok-text: #8fd9a8;
|
|
--backdrop: rgb(6 11 20 / 0.72);
|
|
--shadow-lg: 0 24px 80px rgb(0 0 0 / 0.55);
|
|
--shadow-card: 0 10px 34px rgb(0 0 0 / 0.45);
|
|
--radius: 14px;
|
|
|
|
color-scheme: dark;
|
|
}
|
|
|
|
/* Hell: nur die Oberfläche; die Kartenfarben (Vorschau, PNG) hängen nicht vom Theme ab. */
|
|
:root[data-theme='light'] {
|
|
--bg: #F4F6FB;
|
|
--panel: #FFFFFF;
|
|
--panel-2: #EEF1F7;
|
|
--line: #D9DFEA;
|
|
--line-strong: #B8C2D3;
|
|
--sel-bg: #E3ECFB;
|
|
--sel-line: #3A6FD8;
|
|
--text: #0F1828;
|
|
--muted: #5B6B82;
|
|
--primary: #2A4566;
|
|
--primary-hover: #34557C;
|
|
--on-primary: #FFFFFF;
|
|
--danger-text: #B42318;
|
|
--warn-text: #8A5A00;
|
|
--ok-text: #1B6B3A;
|
|
--backdrop: rgb(15 24 40 / 0.5);
|
|
--shadow-lg: 0 24px 80px rgb(15 24 40 / 0.28);
|
|
--shadow-card: 0 10px 34px rgb(15 24 40 / 0.22);
|
|
|
|
color-scheme: light;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: 'Nunito Sans Variable', system-ui, sans-serif;
|
|
font-size: 16px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
a {
|
|
color: var(--sel-line);
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--sel-line);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
#app-root {
|
|
flex: 1;
|
|
width: 100%;
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
padding: 24px 20px;
|
|
}
|
|
|
|
#app-root h1 {
|
|
margin: 0 0 16px;
|
|
font-size: 1.6rem;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
#app-footer {
|
|
padding: 16px 20px;
|
|
border-top: 1px solid var(--line);
|
|
color: var(--muted);
|
|
font-size: 0.85rem;
|
|
text-align: center;
|
|
}
|
|
|
|
#app-footer p {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
}
|