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:
parent
f3b4b309b6
commit
67339a6211
|
|
@ -15,30 +15,56 @@
|
||||||
*, *::before, *::after { box-sizing: border-box; }
|
*, *::before, *::after { box-sizing: border-box; }
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
|
/* Die Seite kann beide Ansichten — native Bedienelemente folgen mit. */
|
||||||
|
color-scheme: light dark;
|
||||||
|
|
||||||
--green: #1a3d1a;
|
--green: #1a3d1a;
|
||||||
--green-mid: #2d5a2d;
|
--green-mid: #2d5a2d;
|
||||||
--green-accent: #3a7a3a;
|
--green-accent: #3a7a3a;
|
||||||
|
--on-green: #e8e8d8;
|
||||||
--text: #1a1a1a;
|
--text: #1a1a1a;
|
||||||
--muted: #666;
|
--muted: #666;
|
||||||
--bg: #e8e8e2;
|
--bg: #e8e8e2;
|
||||||
--card-bg: #f4f4ee;
|
--card-bg: #f4f4ee;
|
||||||
|
--card-hover: #ececdf;
|
||||||
|
--card-active: #eaeae2;
|
||||||
--border: #bbbba8;
|
--border: #bbbba8;
|
||||||
--shadow: 0 1px 3px rgba(0,0,0,0.15);
|
--shadow: 0 1px 3px rgba(0,0,0,0.15);
|
||||||
--radius: 2px;
|
--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 {
|
html, body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
font-family: Georgia, 'Times New Roman', serif;
|
font-family: Georgia, 'Times New Roman', serif;
|
||||||
min-height: 100vh;
|
min-height: 100dvh;
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
background: var(--green);
|
background: var(--green);
|
||||||
color: #e8e8d8;
|
color: var(--on-green);
|
||||||
padding: 1.5rem 1.5rem 1.2rem;
|
padding: 1.5rem 1.5rem 1.2rem;
|
||||||
border-bottom: 3px solid var(--green-accent);
|
border-bottom: 3px solid var(--green-accent);
|
||||||
}
|
}
|
||||||
|
|
@ -93,12 +119,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-card:active {
|
.app-card:active {
|
||||||
background: #eaeae2;
|
background: var(--card-active);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (hover: hover) {
|
@media (hover: hover) {
|
||||||
.app-card:hover {
|
.app-card:hover {
|
||||||
background: #ececdf;
|
background: var(--card-hover);
|
||||||
border-left-color: var(--green-accent);
|
border-left-color: var(--green-accent);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -154,7 +180,7 @@
|
||||||
top: 0;
|
top: 0;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
background: var(--green);
|
background: var(--green);
|
||||||
color: #fff;
|
color: var(--on-green);
|
||||||
padding: 0.6rem 1rem;
|
padding: 0.6rem 1rem;
|
||||||
font-size: 0.88rem;
|
font-size: 0.88rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -164,7 +190,7 @@
|
||||||
#install-banner.visible { display: flex; }
|
#install-banner.visible { display: flex; }
|
||||||
#install-banner span { flex: 1; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
|
#install-banner span { flex: 1; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
|
||||||
#install-btn {
|
#install-btn {
|
||||||
background: #fff;
|
background: var(--on-green);
|
||||||
color: var(--green);
|
color: var(--green);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|
@ -177,7 +203,7 @@
|
||||||
#dismiss-btn {
|
#dismiss-btn {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
color: rgba(255,255,255,0.8);
|
color: var(--on-green);
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 0.2rem 0.3rem;
|
padding: 0.2rem 0.3rem;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue