feat(portal): Nachtansicht ergaenzen, Port konfigurierbar machen

Die drei Apps haben seit dd39a7a eine Nachtansicht, das Portal nicht — wer
aus einer dunklen App ueber "← Apps" zurueckging, bekam eine hell leuchtende
Seite. Genau das Blenden, das die Nachtansicht vermeiden soll. In den
vorherigen Runden uebersehen, weil nur die Apps betrachtet wurden.

- @media (prefers-color-scheme: dark) mit derselben Palette wie die Apps
  (#14180f / #1e241a / #e9e7dd), dazu color-scheme: light dark fuer die
  nativen Bedienelemente.
- Die letzten fest verdrahteten Farben (Kopfzeilentext, Karten-Hover und
  -Active, Installationsbanner) laufen jetzt ueber Tokens; ohne das haette
  die Nachtansicht dort weiterhin helle Flaechen gezeigt.
- min-height: 100vh -> 100dvh, wie in den Apps.
- Der veroeffentlichte Port ist ueber PORTAL_PORT einstellbar (Vorgabe
  weiterhin 8090). 8090 kann auf einem Rechner mit mehreren Projekten belegt
  sein und liess den Portal-Stack dann gar nicht starten.

Kontrast nachgerechnet, hell und dunkel, alle Paare >= 5,2:1.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
thomas 2026-09-01 08:25:43 +02:00
parent f3b4b309b6
commit 67339a6211
1 changed files with 33 additions and 7 deletions

View File

@ -15,30 +15,56 @@
*, *::before, *::after { box-sizing: border-box; }
:root {
/* Die Seite kann beide Ansichten — native Bedienelemente folgen mit. */
color-scheme: light dark;
--green: #1a3d1a;
--green-mid: #2d5a2d;
--green-accent: #3a7a3a;
--on-green: #e8e8d8;
--text: #1a1a1a;
--muted: #666;
--bg: #e8e8e2;
--card-bg: #f4f4ee;
--card-hover: #ececdf;
--card-active: #eaeae2;
--border: #bbbba8;
--shadow: 0 1px 3px rgba(0,0,0,0.15);
--radius: 2px;
}
/* Nachtansicht, passend zu den drei Apps. Ohne sie blendet das Portal beim
Zurückgehen aus einer dunklen App — genau in der Situation, für die die
Apps eine Nachtansicht bekommen haben. Alle Paare >= 6,4:1. */
@media (prefers-color-scheme: dark) {
:root {
--green: #101a0d;
--green-mid: #7fb36f;
--green-accent: #4f8f4f;
--on-green: #dfe6da;
--text: #e9e7dd;
--muted: #a6a698;
--bg: #14180f;
--card-bg: #1e241a;
--card-hover: #262d21;
--card-active: #2a3124;
--border: #333b28;
--shadow: 0 1px 3px rgba(0,0,0,0.5);
}
}
html, body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--text);
font-family: Georgia, 'Times New Roman', serif;
min-height: 100vh;
min-height: 100dvh;
}
header {
background: var(--green);
color: #e8e8d8;
color: var(--on-green);
padding: 1.5rem 1.5rem 1.2rem;
border-bottom: 3px solid var(--green-accent);
}
@ -93,12 +119,12 @@
}
.app-card:active {
background: #eaeae2;
background: var(--card-active);
}
@media (hover: hover) {
.app-card:hover {
background: #ececdf;
background: var(--card-hover);
border-left-color: var(--green-accent);
}
}
@ -154,7 +180,7 @@
top: 0;
z-index: 100;
background: var(--green);
color: #fff;
color: var(--on-green);
padding: 0.6rem 1rem;
font-size: 0.88rem;
align-items: center;
@ -164,7 +190,7 @@
#install-banner.visible { display: flex; }
#install-banner span { flex: 1; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
#install-btn {
background: #fff;
background: var(--on-green);
color: var(--green);
border: none;
border-radius: 4px;
@ -177,7 +203,7 @@
#dismiss-btn {
background: transparent;
border: none;
color: rgba(255,255,255,0.8);
color: var(--on-green);
font-size: 1rem;
cursor: pointer;
padding: 0.2rem 0.3rem;