diff --git a/Docs/CHANGELOG-electrum-gate.md b/Docs/CHANGELOG-electrum-gate.md
index aae408f..e782812 100644
--- a/Docs/CHANGELOG-electrum-gate.md
+++ b/Docs/CHANGELOG-electrum-gate.md
@@ -8,6 +8,40 @@ Wat er nog moet gebeuren staat **niet** hier maar in de plannen; zie [CONTINUE_H
Een lijst met geplande features op twee plekken loopt uit elkaar, en dan is geen van beide meer te
vertrouwen.
+## [0.0.25] - 2026-08-31
+
+### Changed
+
+- **De opfrisbeurt uit het gedeelde designsysteem** (`HomeGit/Docs/website-design-system.html`), in
+ dezelfde ronde doorgevoerd in Evolu Relay en in AssetApp. Drie dingen:
+
+ - **een accentgloed achter de pagina**, uit de linkerbovenhoek, met een zwakker tegenlichtje
+ rechtsboven. Dit is het deel dat het meeste doet, en het is ook de vóórwaarde voor de rest: een
+ `backdrop-filter` op een egale ondergrond levert per definitie niets op, dus er moet eerst iets
+ áchter de vlakken staan;
+ - **kaarten zijn doorschijnend met een randlicht en een schaduw.** Ze lezen daardoor als panelen
+ die op de pagina liggen in plaats van als vlakken die erop geschilderd zijn;
+ - **één hoek voor élk buitenste kader.** De kaart ging van 28 naar 20 pixels, gelijk aan het
+ logkader en aan AssetApp; twee radii naast elkaar lezen als een fout in plaats van als een
+ keuze. De geneste hoek van het logkader rekent mee.
+
+ De vijf accentkleuren van AssetApp (oranje, blauw, lila, teal, magenta) staan nu in het palet;
+ deze app blijft op oranje. Wisselen kan door `data-accent` op `` te zetten, er is bewust
+ geen knop voor: dit is een statuspagina met licht/donker en verder geen bediening. Om dezelfde
+ reden staat de diepte hier vást aan, terwijl het in AssetApp een instelling is.
+
+- **`--pos` is groen geworden in plaats van oranje.** Hij volgde het accent, en dat las als
+ merkkleur in plaats van als betekenis. Zichtbaar gevolg: de badge "Running" is groen.
+
+### Fixed
+
+- **`prefers-reduced-motion` zette per ongeluk de hele opmaak plat.** Die wens stond samen met
+ `prefers-reduced-transparency` in één media-query. Windows heeft een schakelaar "Animatie-
+ effecten" die bij veel mensen uit staat, en die zet `reduced-motion` op `reduce`; op zo'n machine
+ bleef er van de nieuwe opmaak niets over. De twee zeggen ook echt iets anders: de ene gaat over
+ doorschijnende vlakken, de andere over beweging. Ze staan nu apart, en `reduced-motion` haalt
+ alleen de overgang weg.
+
## [0.0.24] - 2026-08-30
### Added
diff --git a/Docs/CHANGELOG-evolu-relay.md b/Docs/CHANGELOG-evolu-relay.md
index 9093026..12c4ece 100644
--- a/Docs/CHANGELOG-evolu-relay.md
+++ b/Docs/CHANGELOG-evolu-relay.md
@@ -19,6 +19,32 @@ De regel is: **verhoog je `VERSION`, dan verhoog je ook het manifest; andersom n
> geschreven uit de `releaseNotes` in het manifest en uit `PROGRESS.md` van het plan **Umbrelapp**. Ze zijn
> daarom korter dan de rest.
+## 0.5.2 - 31-08-2026
+
+**Alleen de pagina, dus geen nieuwe image.** `VERSION` in `tools/evolu-relay/build.sh` blijft staan; het
+manifest gaat naar 0.5.2. Precies het geval waar de regel bovenaan dit bestand over gaat.
+
+De opfrisbeurt uit het gedeelde designsysteem (`HomeGit/Docs/website-design-system.html`), in dezelfde
+ronde doorgevoerd in Electrum Gate en in AssetApp:
+
+- **een accentgloed achter de pagina**, uit de linkerbovenhoek, met een zwakker tegenlichtje rechtsboven.
+ Dit doet het meeste werk en het is de vóórwaarde voor de rest: een `backdrop-filter` op een egale
+ ondergrond levert per definitie niets op, dus er moet eerst iets áchter de vlakken staan;
+- **kaarten zijn doorschijnend met een randlicht en een schaduw**, zodat ze lezen als panelen die op de
+ pagina liggen in plaats van als vlakken die erop geschilderd zijn;
+- **één hoek voor élk buitenste kader**: de kaart van 28 naar 20 pixels, gelijk aan het logkader en aan
+ AssetApp. De geneste hoek van dat logkader rekent mee.
+
+De vijf accentkleuren van AssetApp staan nu in het palet; deze app blijft op oranje en heeft er bewust
+geen knop voor. Om dezelfde reden staat de diepte hier vást aan, terwijl het in AssetApp een instelling
+is. `--pos` is groen geworden in plaats van oranje: hij volgde het accent, en dat las als merkkleur in
+plaats van als betekenis.
+
+**Eén valkuil is meteen ingebouwd en verdient het om onthouden te worden.** `prefers-reduced-motion` en
+`prefers-reduced-transparency` mogen niet in één media-query: Windows heeft een schakelaar
+"Animatie-effecten" die bij veel mensen uit staat en die zet `reduced-motion` op `reduce`, waarna er van
+de hele opmaak niets overbleef. Ze staan apart, en `reduced-motion` haalt alleen de overgang weg.
+
## 0.5.1 - 30-08-2026
**Reparatie, gemeld door de gebruiker binnen een uur na 0.5.0.** De melding bovenaan de pagina ging nooit
diff --git a/Docs/CONTINUE_HERE.md b/Docs/CONTINUE_HERE.md
index 6818440..284ca2a 100644
--- a/Docs/CONTINUE_HERE.md
+++ b/Docs/CONTINUE_HERE.md
@@ -29,9 +29,9 @@
| Plan | App | Volgende stap | Status |
|-|-|-|-|
-| [Umbrelapp](Plannen/Actief/008-Umbrelapp/TAKEN.md) | Relay | **0.5.1 staat klaar en de pagina is af op de lijst van de gebruiker (30-08-2026):** tijdvenster van twee minuten met de teller in het relay-proces, labels op een eigenaar-id, geblokkeerd en geweigerd in één kader, maatvoering gelijk aan Electrum Gate. De image is dezelfde dag op de Umbrel gebouwd, geduwd en gepind. **Volgende stap is van de gebruiker en is een blik, geen sessie:** verversen, updaten, en dan de drie dingen nakijken die alleen het apparaat kan zeggen (teller met de pagina dicht, label na een herstart, het adres achter de app-proxy). Wat daarna nog open is: data per eigenaar wissen, en een `package-lock.json`. **Het pinnen van `python:3-alpine` en `nginx:alpine` is bewust géén werk meer hier** en wacht op Eigenimage; zie [KNOWLEDGE.md](KNOWLEDGE.md) | 🔶 |
+| [Umbrelapp](Plannen/Actief/008-Umbrelapp/TAKEN.md) | Relay | **0.5.2 staat klaar (31-08-2026): de opfrisbeurt uit het gedeelde designsysteem** (accentgloed, doorschijnende kaarten met randlicht en schaduw, één hoek voor elk buitenste kader, het volle accentpalet met oranje als stand). Alleen de pagina, dus geen nieuwe image. **Nog nakijken op het apparaat, en dat is een blik.** Daarvóór stond er: **0.5.1 staat klaar en de pagina is af op de lijst van de gebruiker (30-08-2026):** tijdvenster van twee minuten met de teller in het relay-proces, labels op een eigenaar-id, geblokkeerd en geweigerd in één kader, maatvoering gelijk aan Electrum Gate. De image is dezelfde dag op de Umbrel gebouwd, geduwd en gepind. **Volgende stap is van de gebruiker en is een blik, geen sessie:** verversen, updaten, en dan de drie dingen nakijken die alleen het apparaat kan zeggen (teller met de pagina dicht, label na een herstart, het adres achter de app-proxy). Wat daarna nog open is: data per eigenaar wissen, en een `package-lock.json`. **Het pinnen van `python:3-alpine` en `nginx:alpine` is bewust géén werk meer hier** en wacht op Eigenimage; zie [KNOWLEDGE.md](KNOWLEDGE.md) | 🔶 |
| [Proefopstelling](Plannen/Actief/007-Proefopstelling/TAKEN.md) | Relay | **Volledig ingehaald op 28-08-2026 en klaar voor het archief.** Beide vragen die het nog bezat zijn beantwoord door **Umbrelapp**: Trezor Suite accepteert een eigen relay, en een eigenaar registreren is niet meer nodig sinds de quota-manager eruit is. Wat er in fase 2 en 3 stond gaat over een pakket dat niet meer bestaat. **Eén beslissing van de gebruiker: opheffen of laten staan** | 🔶 |
-| [Webinterface](Plannen/Actief/005-Webinterface/TAKEN.md) | Gate | **De pagina is af en goedgekeurd, op een breed scherm én op een telefoon (27-08-2026).** Op 28-08-2026 kapotgegaan door de tweede app en gerepareerd in 0.0.23. In 0.0.24 (30-08-2026) is de statuswidget van "Answering" naar "Running" gegaan en is er een menu-item "About this app" bij gekomen; dat kwam uit het werk aan Evolu Relay, waar de gebruiker de twee pagina's naast elkaar zag. **Nog nakijken op het apparaat, en dat is een blik en geen sessie.** Wat er verder staat wacht op tijd (het activiteitenlog een etmaal laten lopen) of is een beslissing van de gebruiker (waar Nginx Proxy Manager zijn certificaten neerzet, en of Zoraxy een harde afhankelijkheid wordt) | 🔶 |
+| [Webinterface](Plannen/Actief/005-Webinterface/TAKEN.md) | Gate | **0.0.25 (31-08-2026): dezelfde opfrisbeurt als de Relay**, uit het gedeelde designsysteem, plus een reparatie die daarbij aan het licht kwam: `prefers-reduced-motion` zette per ongeluk de hele opmaak plat, omdat die wens met `prefers-reduced-transparency` in één media-query stond. **Nog nakijken op het apparaat.** Daarvóór: **De pagina is af en goedgekeurd, op een breed scherm én op een telefoon (27-08-2026).** Op 28-08-2026 kapotgegaan door de tweede app en gerepareerd in 0.0.23. In 0.0.24 (30-08-2026) is de statuswidget van "Answering" naar "Running" gegaan en is er een menu-item "About this app" bij gekomen; dat kwam uit het werk aan Evolu Relay, waar de gebruiker de twee pagina's naast elkaar zag. **Nog nakijken op het apparaat, en dat is een blik en geen sessie.** Wat er verder staat wacht op tijd (het activiteitenlog een etmaal laten lopen) of is een beslissing van de gebruiker (waar Nginx Proxy Manager zijn certificaten neerzet, en of Zoraxy een harde afhankelijkheid wordt) | 🔶 |
| [Appstore](Plannen/Actief/010-Appstore/TAKEN.md) | Gate | De repo `ElectrumTLS` weghalen op de Git-server; daar staat het domein nog in de historie. **De omschakeling naar Fulcrum is op 27-08-2026 gelukt zonder aanpassing**, dus daarvan is alleen de herstartcontrole nog over, en die komt vanzelf bij de eerstvolgende herstart | 🔶 |
## C - Wacht op afhankelijkheid
diff --git a/Docs/Plannen/Actief/005-Webinterface/TAKEN.md b/Docs/Plannen/Actief/005-Webinterface/TAKEN.md
index 65db4af..836cf41 100644
--- a/Docs/Plannen/Actief/005-Webinterface/TAKEN.md
+++ b/Docs/Plannen/Actief/005-Webinterface/TAKEN.md
@@ -28,6 +28,11 @@
## Volgende stap
+- [x] **De opfrisbeurt uit het gedeelde designsysteem (31-08-2026, 0.0.25).** Accentgloed achter de
+ pagina, doorschijnende kaarten met randlicht en schaduw, en één hoek voor elk buitenste kader
+ (28 naar 20 pixels). Het volle accentpalet staat erin, met oranje als stand; er komt bewust geen
+ knop bij, want dit is een statuspagina. Meegevonden en gerepareerd: `prefers-reduced-motion` zette
+ de hele opmaak plat doordat die wens met `prefers-reduced-transparency` in één media-query stond.
- [x] **De statuswidget verduidelijkt en een dialoog "About this app" toegevoegd (30-08-2026, 0.0.24).**
Dit kwam niet uit dit plan maar uit het werk aan Evolu Relay: de gebruiker zag de twee pagina's naast
elkaar en meldde dat de tegel "Answering / answered in 7 ms, from inside the app" onduidelijk is
diff --git a/Docs/Plannen/Actief/008-Umbrelapp/TAKEN.md b/Docs/Plannen/Actief/008-Umbrelapp/TAKEN.md
index a457535..71ef3f7 100644
--- a/Docs/Plannen/Actief/008-Umbrelapp/TAKEN.md
+++ b/Docs/Plannen/Actief/008-Umbrelapp/TAKEN.md
@@ -30,6 +30,10 @@
dus **één architectuur en geen multi-arch index**. Dat is bij bouwen op het apparaat zelf te
verwachten en het klopt per constructie met de host; voor de officiele store hoort er arm64 bij, en
dat staat bij **Publicatie-Relay**
+- [x] **0.5.2: de opfrisbeurt uit het gedeelde designsysteem (31-08-2026).** Dezelfde drie dingen als in
+ Electrum Gate: accentgloed, doorschijnende kaarten met randlicht en schaduw, en één hoek voor elk
+ buitenste kader. Alleen de pagina, dus `VERSION` in `build.sh` blijft staan en het manifest gaat
+ alleen omhoog. Dat is de regel uit de kop van de changelog, en dit is het tweede geval op rij.
- [x] **0.5.1: de melding bovenaan ging nooit weg (30-08-2026).** Gemeld door de gebruiker binnen een uur
na 0.5.0, op de pagina op zijn eigen Umbrel. Eén ontbrekende tak: de ronde zette de melding wel áán
maar nooit uit, dus "Sent." bleef staan tot je herlaadde. Nu is de melding van de ronde en niet van de
diff --git a/whatsnext-electrum-gate/index.html.template b/whatsnext-electrum-gate/index.html.template
index a01aea6..f1a4d9d 100644
--- a/whatsnext-electrum-gate/index.html.template
+++ b/whatsnext-electrum-gate/index.html.template
@@ -17,7 +17,7 @@
niet, dan zegt hij dat. Hij verzint niets, want hij wordt juist geraadpleegd
op het moment dat er iets mis lijkt te zijn.
-->
-
+
@@ -36,52 +36,152 @@
}
[data-theme="dark"][data-accent="orange"] {
- --bg: #080808;
- --bg-elevated: #181818;
- --bg-raised: #242424;
- --bg-overlay: #303030;
- --border: rgba(255,255,255,0.18);
- --border-mid: rgba(255,255,255,0.28);
- --text-primary: #f2f2f2;
- --text-sec: #a3a3a3;
- --text-ter: #6a6a6a;
- --accent: #FF6B00;
- --accent-soft: rgba(255,107,0,0.16);
- --accent-mid: rgba(255,107,0,0.26);
- --accent-text: #FF8124;
- --pos: #FF8124;
- --pos-bg: rgba(255,107,0,0.18);
- --neg: #ff5a5a;
- --neg-bg: rgba(255,69,69,0.18);
- --neutral-bg: rgba(255,255,255,0.08);
- --scrollbar: #2c2c2c;
+ --bg: #080808; --bg-elevated: #181818; --bg-raised: #242424; --bg-overlay: #303030;
+ --border: rgba(255,255,255,0.18); --border-mid: rgba(255,255,255,0.28);
+ --text-primary: #f2f2f2; --text-sec: #a3a3a3; --text-ter: #6a6a6a;
+ --accent: #FF6B00; --accent-soft: rgba(255,107,0,0.16); --accent-mid: rgba(255,107,0,0.26);
+ --accent-glow: rgba(255,107,0,0.30); --accent-text: #FF8124;
+ --pos: #39FF8A; --pos-bg: rgba(57,255,138,0.16); --neg: #ff5a5a; --neg-bg: rgba(255,69,69,0.18);
+ --neutral-bg: rgba(255,255,255,0.08); --input-bg: #1c1c1c; --scrollbar: #2c2c2c;
+}
+[data-theme="light"][data-accent="orange"] {
+ --bg: #ffffff; --bg-elevated: #f7f7f7; --bg-raised: #f0f0f0; --bg-overlay: #e8e8e8;
+ --border: rgba(0,0,0,0.12); --border-mid: rgba(0,0,0,0.18);
+ --text-primary: #0a0a0a; --text-sec: #888888; --text-ter: #bbbbbb;
+ --accent: #E05500; --accent-soft: rgba(224,85,0,0.08); --accent-mid: rgba(224,85,0,0.16);
+ --accent-glow: rgba(224,85,0,0.22); --accent-text: #E05500;
+ --pos: #007a48; --pos-bg: rgba(0,149,90,0.08); --neg: #cc2222; --neg-bg: rgba(204,34,34,0.08);
+ --neutral-bg: rgba(0,0,0,0.04); --input-bg: #f5f5f5; --scrollbar: #ddd;
+}
+[data-theme="dark"][data-accent="blue"] {
+ --bg: #080808; --bg-elevated: #181818; --bg-raised: #242424; --bg-overlay: #303030;
+ --border: rgba(255,255,255,0.18); --border-mid: rgba(255,255,255,0.28);
+ --text-primary: #f2f2f2; --text-sec: #a3a3a3; --text-ter: #6a6a6a;
+ --accent: #3B82F6; --accent-soft: rgba(59,130,246,0.16); --accent-mid: rgba(59,130,246,0.26);
+ --accent-glow: rgba(59,130,246,0.30); --accent-text: #6AA1FF;
+ --pos: #39FF8A; --pos-bg: rgba(57,255,138,0.16); --neg: #ff5a5a; --neg-bg: rgba(255,69,69,0.18);
+ --neutral-bg: rgba(255,255,255,0.08); --input-bg: #1c1c1c; --scrollbar: #2c2c2c;
+}
+[data-theme="light"][data-accent="blue"] {
+ --bg: #ffffff; --bg-elevated: #f7f7f7; --bg-raised: #f0f0f0; --bg-overlay: #e8e8e8;
+ --border: rgba(0,0,0,0.12); --border-mid: rgba(0,0,0,0.18);
+ --text-primary: #0a0a0a; --text-sec: #888888; --text-ter: #bbbbbb;
+ --accent: #2563EB; --accent-soft: rgba(37,99,235,0.08); --accent-mid: rgba(37,99,235,0.16);
+ --accent-glow: rgba(37,99,235,0.22); --accent-text: #2563EB;
+ --pos: #007a48; --pos-bg: rgba(0,149,90,0.08); --neg: #cc2222; --neg-bg: rgba(204,34,34,0.08);
+ --neutral-bg: rgba(0,0,0,0.04); --input-bg: #f5f5f5; --scrollbar: #ddd;
+}
+[data-theme="dark"][data-accent="lila"] {
+ --bg: #080808; --bg-elevated: #181818; --bg-raised: #242424; --bg-overlay: #303030;
+ --border: rgba(255,255,255,0.18); --border-mid: rgba(255,255,255,0.28);
+ --text-primary: #f2f2f2; --text-sec: #a3a3a3; --text-ter: #6a6a6a;
+ --accent: #B388FF; --accent-soft: rgba(179,136,255,0.16); --accent-mid: rgba(179,136,255,0.26);
+ --accent-glow: rgba(179,136,255,0.30); --accent-text: #C7A6FF;
+ --pos: #39FF8A; --pos-bg: rgba(57,255,138,0.16); --neg: #ff5a5a; --neg-bg: rgba(255,69,69,0.18);
+ --neutral-bg: rgba(255,255,255,0.08); --input-bg: #1c1c1c; --scrollbar: #2c2c2c;
+}
+[data-theme="light"][data-accent="lila"] {
+ --bg: #ffffff; --bg-elevated: #f7f7f7; --bg-raised: #f0f0f0; --bg-overlay: #e8e8e8;
+ --border: rgba(0,0,0,0.12); --border-mid: rgba(0,0,0,0.18);
+ --text-primary: #0a0a0a; --text-sec: #888888; --text-ter: #bbbbbb;
+ --accent: #7C3AED; --accent-soft: rgba(124,58,237,0.08); --accent-mid: rgba(124,58,237,0.16);
+ --accent-glow: rgba(124,58,237,0.22); --accent-text: #7C3AED;
+ --pos: #007a48; --pos-bg: rgba(0,149,90,0.08); --neg: #cc2222; --neg-bg: rgba(204,34,34,0.08);
+ --neutral-bg: rgba(0,0,0,0.04); --input-bg: #f5f5f5; --scrollbar: #ddd;
+}
+[data-theme="dark"][data-accent="teal"] {
+ --bg: #080808; --bg-elevated: #181818; --bg-raised: #242424; --bg-overlay: #303030;
+ --border: rgba(255,255,255,0.18); --border-mid: rgba(255,255,255,0.28);
+ --text-primary: #f2f2f2; --text-sec: #a3a3a3; --text-ter: #6a6a6a;
+ --accent: #14B8A6; --accent-soft: rgba(20,184,166,0.16); --accent-mid: rgba(20,184,166,0.26);
+ --accent-glow: rgba(20,184,166,0.30); --accent-text: #2DD4BF;
+ --pos: #39FF8A; --pos-bg: rgba(57,255,138,0.16); --neg: #ff5a5a; --neg-bg: rgba(255,69,69,0.18);
+ --neutral-bg: rgba(255,255,255,0.08); --input-bg: #1c1c1c; --scrollbar: #2c2c2c;
+}
+[data-theme="light"][data-accent="teal"] {
+ --bg: #ffffff; --bg-elevated: #f7f7f7; --bg-raised: #f0f0f0; --bg-overlay: #e8e8e8;
+ --border: rgba(0,0,0,0.12); --border-mid: rgba(0,0,0,0.18);
+ --text-primary: #0a0a0a; --text-sec: #888888; --text-ter: #bbbbbb;
+ --accent: #0D9488; --accent-soft: rgba(13,148,136,0.08); --accent-mid: rgba(13,148,136,0.16);
+ --accent-glow: rgba(13,148,136,0.22); --accent-text: #0D9488;
+ --pos: #007a48; --pos-bg: rgba(0,149,90,0.08); --neg: #cc2222; --neg-bg: rgba(204,34,34,0.08);
+ --neutral-bg: rgba(0,0,0,0.04); --input-bg: #f5f5f5; --scrollbar: #ddd;
+}
+[data-theme="dark"][data-accent="magenta"] {
+ --bg: #080808; --bg-elevated: #181818; --bg-raised: #242424; --bg-overlay: #303030;
+ --border: rgba(255,255,255,0.18); --border-mid: rgba(255,255,255,0.28);
+ --text-primary: #f2f2f2; --text-sec: #a3a3a3; --text-ter: #6a6a6a;
+ --accent: #E24DAE; --accent-soft: rgba(226,77,174,0.16); --accent-mid: rgba(226,77,174,0.26);
+ --accent-glow: rgba(226,77,174,0.30); --accent-text: #F072C4;
+ --pos: #39FF8A; --pos-bg: rgba(57,255,138,0.16); --neg: #ff5a5a; --neg-bg: rgba(255,69,69,0.18);
+ --neutral-bg: rgba(255,255,255,0.08); --input-bg: #1c1c1c; --scrollbar: #2c2c2c;
+}
+[data-theme="light"][data-accent="magenta"] {
+ --bg: #ffffff; --bg-elevated: #f7f7f7; --bg-raised: #f0f0f0; --bg-overlay: #e8e8e8;
+ --border: rgba(0,0,0,0.12); --border-mid: rgba(0,0,0,0.18);
+ --text-primary: #0a0a0a; --text-sec: #888888; --text-ter: #bbbbbb;
+ --accent: #BE2A86; --accent-soft: rgba(190,42,134,0.08); --accent-mid: rgba(190,42,134,0.16);
+ --accent-glow: rgba(190,42,134,0.22); --accent-text: #BE2A86;
+ --pos: #007a48; --pos-bg: rgba(0,149,90,0.08); --neg: #cc2222; --neg-bg: rgba(204,34,34,0.08);
+ --neutral-bg: rgba(0,0,0,0.04); --input-bg: #f5f5f5; --scrollbar: #ddd;
}
-[data-theme="light"][data-accent="orange"] {
- --bg: #ffffff;
- --bg-elevated: #f7f7f7;
- --bg-raised: #f0f0f0;
- --bg-overlay: #e8e8e8;
- /* Steviger dan de 0,07 en 0,11 die hier stonden (27-08-2026). Overgenomen uit
- AssetApp, waar het licht-thema deze stap al gemaakt had: op wit verdwijnt een
- rand van 7 procent zwart vrijwel, en dan drijven de kaders zonder begrenzing
- op de achtergrond. In het donkere thema speelt dat niet, want daar staat een
- lichte rand op een donkere ondergrond en die zie je hoe dan ook. */
- --border: rgba(0,0,0,0.12);
- --border-mid: rgba(0,0,0,0.18);
- --text-primary: #0a0a0a;
- --text-sec: #888888;
- --text-ter: #bbbbbb;
- --accent: #E05500;
- --accent-soft: rgba(224,85,0,0.08);
- --accent-mid: rgba(224,85,0,0.16);
- --accent-text: #E05500;
- --pos: #D04800;
- --pos-bg: rgba(224,85,0,0.08);
- --neg: #cc2222;
- --neg-bg: rgba(204,34,34,0.08);
- --neutral-bg: rgba(0,0,0,0.04);
- --scrollbar: #ddd;
+/* -- Diepte ------------------------------------------------------------------
+ Overgenomen uit HomeGit/Docs/website-design-system.html (31-08-2026). In
+ AssetApp is dit een instelling; hier staat hij vast aan, want dit is een
+ statuspagina met dark/light en verder geen knoppen, en een schuif erbij zou
+ meer bediening zijn dan de pagina zelf.
+
+ Het werkt omdat er iets ACHTER de vlakken komt te staan: een accentgloed uit
+ de linkerbovenhoek. Een backdrop-filter op een egale ondergrond levert per
+ definitie niets op, dus de gloed is het eerste deel en het glas het tweede. */
+:root {
+ --surface: var(--bg-elevated);
+ --surface-inset: var(--bg-raised);
+ --surface-blur: 16px;
+ --surface-sat: 135%;
+ --edge: none;
+ --ambient: none;
+ --shadow-1: 0 1px 2px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.05);
+}
+[data-theme="dark"] {
+ --surface: color-mix(in srgb, #1c1c1c 78%, transparent);
+ --surface-inset: color-mix(in srgb, #262626 76%, transparent);
+ --edge: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 42%);
+ --shadow-1: 0 1px 2px rgba(0,0,0,0.35), 0 10px 30px -18px rgba(0,0,0,0.9);
+}
+[data-theme="light"] {
+ --surface: color-mix(in srgb, #ffffff 72%, transparent);
+ --surface-inset: color-mix(in srgb, #f2f2f2 74%, transparent);
+ --edge: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0) 46%);
+}
+[data-depth="deep"] {
+ --ambient: radial-gradient(58rem 34rem at 8% -8%, var(--accent-glow), transparent 62%),
+ radial-gradient(46rem 30rem at 102% 4%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 66%);
+}
+
+/* De twee toegankelijkheidswensen horen NIET in een gedeelde media-query, en dat
+ is een les die een ronde kostte: Windows heeft een schakelaar "Animatie-
+ effecten" die bij veel mensen uit staat, en die zet prefers-reduced-motion op
+ reduce. Samen in een query deed de hele stand dan niets. Ze zeggen ook echt
+ iets anders: de ene gaat over doorschijnende vlakken, de andere over
+ beweging. */
+@media (prefers-reduced-transparency: reduce) {
+ :root {
+ --surface: var(--bg-elevated); --surface-inset: var(--bg-raised);
+ --surface-blur: 0px; --surface-sat: 100%;
+ }
+}
+@media (prefers-reduced-motion: reduce) {
+ body::before, .card { transition: none; }
+}
+
+/* De gloed ligt achter alles en vangt geen klikken. z-index 0 hier en 1 op .wrap:
+ zonder stapelcontext kan een fixed pseudo-element van body over de inhoud heen
+ komen te liggen. */
+body::before {
+ content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
+ background: var(--ambient); transition: background 0.3s;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
@@ -97,7 +197,7 @@ body {
/* Breed, maar niet oneindig: op een ultrawide monitor zou een kader van 2500px
regels opleveren die niemand leest. 1760 is ruim genoeg voor drie kolommen
statuskaders naast een lijstkader. */
-.wrap { max-width: 1760px; margin: 0 auto; }
+.wrap { position: relative; z-index: 1; max-width: 1760px; margin: 0 auto; }
/* ── Het raster ─────────────────────────────────────────────────────────────
Twaalf kolommen, en de kaders vullen ze in de volgorde waarin ze in de HTML
@@ -175,13 +275,30 @@ body {
/* ── Kaarten ────────────────────────────────────────────────────────────── */
.card {
- background: var(--bg-elevated);
- --radius: var(--radius-xl);
+ position: relative;
+ background: var(--surface);
+ /* --radius-lg en niet --radius-xl (31-08-2026): elk buitenste kader heeft
+ dezelfde hoek, want ze staan in beeld naast en om elkaar heen en twee radii
+ lezen dan als een fout. Het logkader leidt zijn hoek hiervan af. */
+ --radius: var(--radius-lg);
--padding: 1.8rem;
border-radius: var(--radius);
padding: var(--padding);
margin-bottom: 1rem;
+ box-shadow: var(--shadow-1);
+ backdrop-filter: blur(var(--surface-blur)) saturate(var(--surface-sat));
+ -webkit-backdrop-filter: blur(var(--surface-blur)) saturate(var(--surface-sat));
+ transition: background 0.25s, box-shadow 0.25s;
}
+/* Het randlicht: een verloop van licht naar niets over de bovenste 40 procent.
+ Dit is het verschil tussen doorzichtig en glas; zonder deze laag ziet een
+ halftransparante kaart er alleen bleek uit. De inhoud moet erbovenop blijven,
+ anders ligt er een waas over de tekst in plaats van erachter. */
+.card::before {
+ content: ''; position: absolute; inset: 0; border-radius: inherit;
+ background: var(--edge); pointer-events: none;
+}
+.card > * { position: relative; }
[data-theme="dark"] .card { border: 1px solid var(--border); }
/* Rand én schaduw in het lichte thema (27-08-2026), overgenomen uit AssetApp.
Hier stond alleen een schaduw, en een zachte schaduw op wit geeft wel diepte
@@ -190,7 +307,6 @@ body {
in plaats van 3 en 24) zodat het samen niet zwaar wordt. */
[data-theme="light"] .card {
border: 1px solid var(--border);
- box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.05);
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
@@ -375,7 +491,7 @@ body {
/* ── Logregels ──────────────────────────────────────────────────────────── */
.log {
background: var(--bg-raised);
- border-radius: max(4px, calc(var(--radius-xl) - 1.8rem));
+ border-radius: max(4px, calc(var(--radius-lg) - 1.8rem));
padding: 0.9rem 1.1rem;
font-family: var(--font-mono);
font-size: 0.75rem;
diff --git a/whatsnext-electrum-gate/umbrel-app.yml b/whatsnext-electrum-gate/umbrel-app.yml
index dd3b3f8..fb8d3f7 100644
--- a/whatsnext-electrum-gate/umbrel-app.yml
+++ b/whatsnext-electrum-gate/umbrel-app.yml
@@ -9,7 +9,7 @@ manifestVersion: 1
id: whatsnext-electrum-gate
category: bitcoin
name: Electrum Gate
-version: "0.0.24"
+version: "0.0.25"
tagline: Your own node from anywhere, without waiting for Tor
description: >-
The privacy win is already yours: you run the Electrum server. A public one gets asked for
@@ -56,6 +56,16 @@ description: >-
# staan. In 0.0.9 stond er daardoor drie keer "Earlier releases" en twee keer
# dezelfde 0.0.4-regel. De toets let er nu op.
releaseNotes: >-
+ A visual refresh, shared with the other apps in this store. The page now has a soft glow behind it in
+ the accent colour, and the cards are translucent with a light edge and a shadow, so they read as
+ panels sitting on the page instead of flat blocks painted on it. Card corners are a little tighter,
+ and every framed element now uses the same corner radius. Nothing about what the page reports has
+ changed.
+
+
+ Everything in 0.0.24, released the day before:
+
+
The menu has a new "About this app" item: what the app is for, what it asks of you, and what the
Status card does and does not prove. That last one was the reason for this release. The card used to
read "Answering" with "answered in 7 ms, from inside the app" underneath, which was unclear in both
diff --git a/whatsnext-evolu-relay/index.html.template b/whatsnext-evolu-relay/index.html.template
index daf3cec..23fb0e7 100644
--- a/whatsnext-evolu-relay/index.html.template
+++ b/whatsnext-evolu-relay/index.html.template
@@ -35,7 +35,7 @@
is.
═══════════════════════════════════════════════════════════════════════════════
-->
-
+
@@ -54,43 +54,152 @@
}
[data-theme="dark"][data-accent="orange"] {
- --bg: #080808;
- --bg-elevated: #181818;
- --bg-raised: #242424;
- --border: rgba(255,255,255,0.18);
- --border-mid: rgba(255,255,255,0.28);
- --text-primary: #f2f2f2;
- --text-sec: #a3a3a3;
- --text-ter: #6a6a6a;
- --accent: #FF6B00;
- --accent-soft: rgba(255,107,0,0.16);
- --accent-text: #FF8124;
- --pos: #FF8124;
- --pos-bg: rgba(255,107,0,0.18);
- --neg: #ff5a5a;
- --neg-bg: rgba(255,69,69,0.18);
- --neutral-bg: rgba(255,255,255,0.08);
- --scrollbar: #2c2c2c;
+ --bg: #080808; --bg-elevated: #181818; --bg-raised: #242424; --bg-overlay: #303030;
+ --border: rgba(255,255,255,0.18); --border-mid: rgba(255,255,255,0.28);
+ --text-primary: #f2f2f2; --text-sec: #a3a3a3; --text-ter: #6a6a6a;
+ --accent: #FF6B00; --accent-soft: rgba(255,107,0,0.16); --accent-mid: rgba(255,107,0,0.26);
+ --accent-glow: rgba(255,107,0,0.30); --accent-text: #FF8124;
+ --pos: #39FF8A; --pos-bg: rgba(57,255,138,0.16); --neg: #ff5a5a; --neg-bg: rgba(255,69,69,0.18);
+ --neutral-bg: rgba(255,255,255,0.08); --input-bg: #1c1c1c; --scrollbar: #2c2c2c;
+}
+[data-theme="light"][data-accent="orange"] {
+ --bg: #ffffff; --bg-elevated: #f7f7f7; --bg-raised: #f0f0f0; --bg-overlay: #e8e8e8;
+ --border: rgba(0,0,0,0.12); --border-mid: rgba(0,0,0,0.18);
+ --text-primary: #0a0a0a; --text-sec: #888888; --text-ter: #bbbbbb;
+ --accent: #E05500; --accent-soft: rgba(224,85,0,0.08); --accent-mid: rgba(224,85,0,0.16);
+ --accent-glow: rgba(224,85,0,0.22); --accent-text: #E05500;
+ --pos: #007a48; --pos-bg: rgba(0,149,90,0.08); --neg: #cc2222; --neg-bg: rgba(204,34,34,0.08);
+ --neutral-bg: rgba(0,0,0,0.04); --input-bg: #f5f5f5; --scrollbar: #ddd;
+}
+[data-theme="dark"][data-accent="blue"] {
+ --bg: #080808; --bg-elevated: #181818; --bg-raised: #242424; --bg-overlay: #303030;
+ --border: rgba(255,255,255,0.18); --border-mid: rgba(255,255,255,0.28);
+ --text-primary: #f2f2f2; --text-sec: #a3a3a3; --text-ter: #6a6a6a;
+ --accent: #3B82F6; --accent-soft: rgba(59,130,246,0.16); --accent-mid: rgba(59,130,246,0.26);
+ --accent-glow: rgba(59,130,246,0.30); --accent-text: #6AA1FF;
+ --pos: #39FF8A; --pos-bg: rgba(57,255,138,0.16); --neg: #ff5a5a; --neg-bg: rgba(255,69,69,0.18);
+ --neutral-bg: rgba(255,255,255,0.08); --input-bg: #1c1c1c; --scrollbar: #2c2c2c;
+}
+[data-theme="light"][data-accent="blue"] {
+ --bg: #ffffff; --bg-elevated: #f7f7f7; --bg-raised: #f0f0f0; --bg-overlay: #e8e8e8;
+ --border: rgba(0,0,0,0.12); --border-mid: rgba(0,0,0,0.18);
+ --text-primary: #0a0a0a; --text-sec: #888888; --text-ter: #bbbbbb;
+ --accent: #2563EB; --accent-soft: rgba(37,99,235,0.08); --accent-mid: rgba(37,99,235,0.16);
+ --accent-glow: rgba(37,99,235,0.22); --accent-text: #2563EB;
+ --pos: #007a48; --pos-bg: rgba(0,149,90,0.08); --neg: #cc2222; --neg-bg: rgba(204,34,34,0.08);
+ --neutral-bg: rgba(0,0,0,0.04); --input-bg: #f5f5f5; --scrollbar: #ddd;
+}
+[data-theme="dark"][data-accent="lila"] {
+ --bg: #080808; --bg-elevated: #181818; --bg-raised: #242424; --bg-overlay: #303030;
+ --border: rgba(255,255,255,0.18); --border-mid: rgba(255,255,255,0.28);
+ --text-primary: #f2f2f2; --text-sec: #a3a3a3; --text-ter: #6a6a6a;
+ --accent: #B388FF; --accent-soft: rgba(179,136,255,0.16); --accent-mid: rgba(179,136,255,0.26);
+ --accent-glow: rgba(179,136,255,0.30); --accent-text: #C7A6FF;
+ --pos: #39FF8A; --pos-bg: rgba(57,255,138,0.16); --neg: #ff5a5a; --neg-bg: rgba(255,69,69,0.18);
+ --neutral-bg: rgba(255,255,255,0.08); --input-bg: #1c1c1c; --scrollbar: #2c2c2c;
+}
+[data-theme="light"][data-accent="lila"] {
+ --bg: #ffffff; --bg-elevated: #f7f7f7; --bg-raised: #f0f0f0; --bg-overlay: #e8e8e8;
+ --border: rgba(0,0,0,0.12); --border-mid: rgba(0,0,0,0.18);
+ --text-primary: #0a0a0a; --text-sec: #888888; --text-ter: #bbbbbb;
+ --accent: #7C3AED; --accent-soft: rgba(124,58,237,0.08); --accent-mid: rgba(124,58,237,0.16);
+ --accent-glow: rgba(124,58,237,0.22); --accent-text: #7C3AED;
+ --pos: #007a48; --pos-bg: rgba(0,149,90,0.08); --neg: #cc2222; --neg-bg: rgba(204,34,34,0.08);
+ --neutral-bg: rgba(0,0,0,0.04); --input-bg: #f5f5f5; --scrollbar: #ddd;
+}
+[data-theme="dark"][data-accent="teal"] {
+ --bg: #080808; --bg-elevated: #181818; --bg-raised: #242424; --bg-overlay: #303030;
+ --border: rgba(255,255,255,0.18); --border-mid: rgba(255,255,255,0.28);
+ --text-primary: #f2f2f2; --text-sec: #a3a3a3; --text-ter: #6a6a6a;
+ --accent: #14B8A6; --accent-soft: rgba(20,184,166,0.16); --accent-mid: rgba(20,184,166,0.26);
+ --accent-glow: rgba(20,184,166,0.30); --accent-text: #2DD4BF;
+ --pos: #39FF8A; --pos-bg: rgba(57,255,138,0.16); --neg: #ff5a5a; --neg-bg: rgba(255,69,69,0.18);
+ --neutral-bg: rgba(255,255,255,0.08); --input-bg: #1c1c1c; --scrollbar: #2c2c2c;
+}
+[data-theme="light"][data-accent="teal"] {
+ --bg: #ffffff; --bg-elevated: #f7f7f7; --bg-raised: #f0f0f0; --bg-overlay: #e8e8e8;
+ --border: rgba(0,0,0,0.12); --border-mid: rgba(0,0,0,0.18);
+ --text-primary: #0a0a0a; --text-sec: #888888; --text-ter: #bbbbbb;
+ --accent: #0D9488; --accent-soft: rgba(13,148,136,0.08); --accent-mid: rgba(13,148,136,0.16);
+ --accent-glow: rgba(13,148,136,0.22); --accent-text: #0D9488;
+ --pos: #007a48; --pos-bg: rgba(0,149,90,0.08); --neg: #cc2222; --neg-bg: rgba(204,34,34,0.08);
+ --neutral-bg: rgba(0,0,0,0.04); --input-bg: #f5f5f5; --scrollbar: #ddd;
+}
+[data-theme="dark"][data-accent="magenta"] {
+ --bg: #080808; --bg-elevated: #181818; --bg-raised: #242424; --bg-overlay: #303030;
+ --border: rgba(255,255,255,0.18); --border-mid: rgba(255,255,255,0.28);
+ --text-primary: #f2f2f2; --text-sec: #a3a3a3; --text-ter: #6a6a6a;
+ --accent: #E24DAE; --accent-soft: rgba(226,77,174,0.16); --accent-mid: rgba(226,77,174,0.26);
+ --accent-glow: rgba(226,77,174,0.30); --accent-text: #F072C4;
+ --pos: #39FF8A; --pos-bg: rgba(57,255,138,0.16); --neg: #ff5a5a; --neg-bg: rgba(255,69,69,0.18);
+ --neutral-bg: rgba(255,255,255,0.08); --input-bg: #1c1c1c; --scrollbar: #2c2c2c;
+}
+[data-theme="light"][data-accent="magenta"] {
+ --bg: #ffffff; --bg-elevated: #f7f7f7; --bg-raised: #f0f0f0; --bg-overlay: #e8e8e8;
+ --border: rgba(0,0,0,0.12); --border-mid: rgba(0,0,0,0.18);
+ --text-primary: #0a0a0a; --text-sec: #888888; --text-ter: #bbbbbb;
+ --accent: #BE2A86; --accent-soft: rgba(190,42,134,0.08); --accent-mid: rgba(190,42,134,0.16);
+ --accent-glow: rgba(190,42,134,0.22); --accent-text: #BE2A86;
+ --pos: #007a48; --pos-bg: rgba(0,149,90,0.08); --neg: #cc2222; --neg-bg: rgba(204,34,34,0.08);
+ --neutral-bg: rgba(0,0,0,0.04); --input-bg: #f5f5f5; --scrollbar: #ddd;
}
-[data-theme="light"][data-accent="orange"] {
- --bg: #ffffff;
- --bg-elevated: #f7f7f7;
- --bg-raised: #f0f0f0;
- --border: rgba(0,0,0,0.12);
- --border-mid: rgba(0,0,0,0.18);
- --text-primary: #0a0a0a;
- --text-sec: #888888;
- --text-ter: #bbbbbb;
- --accent: #E05500;
- --accent-soft: rgba(224,85,0,0.08);
- --accent-text: #E05500;
- --pos: #D04800;
- --pos-bg: rgba(224,85,0,0.08);
- --neg: #cc2222;
- --neg-bg: rgba(204,34,34,0.08);
- --neutral-bg: rgba(0,0,0,0.04);
- --scrollbar: #ddd;
+/* -- Diepte ------------------------------------------------------------------
+ Overgenomen uit HomeGit/Docs/website-design-system.html (31-08-2026). In
+ AssetApp is dit een instelling; hier staat hij vast aan, want dit is een
+ statuspagina met dark/light en verder geen knoppen, en een schuif erbij zou
+ meer bediening zijn dan de pagina zelf.
+
+ Het werkt omdat er iets ACHTER de vlakken komt te staan: een accentgloed uit
+ de linkerbovenhoek. Een backdrop-filter op een egale ondergrond levert per
+ definitie niets op, dus de gloed is het eerste deel en het glas het tweede. */
+:root {
+ --surface: var(--bg-elevated);
+ --surface-inset: var(--bg-raised);
+ --surface-blur: 16px;
+ --surface-sat: 135%;
+ --edge: none;
+ --ambient: none;
+ --shadow-1: 0 1px 2px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.05);
+}
+[data-theme="dark"] {
+ --surface: color-mix(in srgb, #1c1c1c 78%, transparent);
+ --surface-inset: color-mix(in srgb, #262626 76%, transparent);
+ --edge: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 42%);
+ --shadow-1: 0 1px 2px rgba(0,0,0,0.35), 0 10px 30px -18px rgba(0,0,0,0.9);
+}
+[data-theme="light"] {
+ --surface: color-mix(in srgb, #ffffff 72%, transparent);
+ --surface-inset: color-mix(in srgb, #f2f2f2 74%, transparent);
+ --edge: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0) 46%);
+}
+[data-depth="deep"] {
+ --ambient: radial-gradient(58rem 34rem at 8% -8%, var(--accent-glow), transparent 62%),
+ radial-gradient(46rem 30rem at 102% 4%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 66%);
+}
+
+/* De twee toegankelijkheidswensen horen NIET in een gedeelde media-query, en dat
+ is een les die een ronde kostte: Windows heeft een schakelaar "Animatie-
+ effecten" die bij veel mensen uit staat, en die zet prefers-reduced-motion op
+ reduce. Samen in een query deed de hele stand dan niets. Ze zeggen ook echt
+ iets anders: de ene gaat over doorschijnende vlakken, de andere over
+ beweging. */
+@media (prefers-reduced-transparency: reduce) {
+ :root {
+ --surface: var(--bg-elevated); --surface-inset: var(--bg-raised);
+ --surface-blur: 0px; --surface-sat: 100%;
+ }
+}
+@media (prefers-reduced-motion: reduce) {
+ body::before, .card { transition: none; }
+}
+
+/* De gloed ligt achter alles en vangt geen klikken. z-index 0 hier en 1 op .wrap:
+ zonder stapelcontext kan een fixed pseudo-element van body over de inhoud heen
+ komen te liggen. */
+body::before {
+ content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
+ background: var(--ambient); transition: background 0.3s;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
@@ -105,7 +214,7 @@ body {
/* Dezelfde maat als Electrum Gate. Breed, maar niet oneindig: op een ultrawide
monitor zou een kader van 2500px regels opleveren die niemand leest. */
-.wrap { max-width: 1760px; margin: 0 auto; }
+.wrap { position: relative; z-index: 1; max-width: 1760px; margin: 0 auto; }
/* ── Het raster ─────────────────────────────────────────────────────────────
Twaalf kolommen, en de kaders vullen ze in de volgorde waarin ze in de HTML
@@ -164,19 +273,35 @@ body {
/* ── Kaarten ────────────────────────────────────────────────────────────── */
.card {
- background: var(--bg-elevated);
- --radius: var(--radius-xl);
+ position: relative;
+ background: var(--surface);
+ /* --radius-lg en niet --radius-xl (31-08-2026): elk buitenste kader heeft
+ dezelfde hoek, want ze staan in beeld naast en om elkaar heen en twee radii
+ lezen dan als een fout. Het logkader leidt zijn hoek hiervan af. */
+ --radius: var(--radius-lg);
--padding: 1.8rem;
border-radius: var(--radius);
padding: var(--padding);
margin-bottom: 1rem;
+ box-shadow: var(--shadow-1);
+ backdrop-filter: blur(var(--surface-blur)) saturate(var(--surface-sat));
+ -webkit-backdrop-filter: blur(var(--surface-blur)) saturate(var(--surface-sat));
+ transition: background 0.25s, box-shadow 0.25s;
}
+/* Het randlicht: een verloop van licht naar niets over de bovenste 40 procent.
+ Dit is het verschil tussen doorzichtig en glas; zonder deze laag ziet een
+ halftransparante kaart er alleen bleek uit. De inhoud moet erbovenop blijven,
+ anders ligt er een waas over de tekst in plaats van erachter. */
+.card::before {
+ content: ''; position: absolute; inset: 0; border-radius: inherit;
+ background: var(--edge); pointer-events: none;
+}
+.card > * { position: relative; }
[data-theme="dark"] .card { border: 1px solid var(--border); }
/* Rand én schaduw in het lichte thema: een zachte schaduw op wit geeft wel diepte
maar geen begrenzing. Dezelfde waarden als Electrum Gate. */
[data-theme="light"] .card {
border: 1px solid var(--border);
- box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.05);
}
.card-head {
display: flex; align-items: center; justify-content: space-between;
@@ -247,7 +372,7 @@ body {
font-size: 0.9rem;
background: var(--bg-raised);
border: 1px solid var(--border);
- border-radius: max(4px, calc(var(--radius-xl) - 1.8rem));
+ border-radius: max(4px, calc(var(--radius-lg) - 1.8rem));
padding: 0.9rem 1.1rem;
overflow-wrap: anywhere;
color: var(--accent);
diff --git a/whatsnext-evolu-relay/umbrel-app.yml b/whatsnext-evolu-relay/umbrel-app.yml
index f9cba4e..dd872b4 100644
--- a/whatsnext-evolu-relay/umbrel-app.yml
+++ b/whatsnext-evolu-relay/umbrel-app.yml
@@ -11,7 +11,7 @@ manifestVersion: 1
id: whatsnext-evolu-relay
category: files
name: Evolu Relay
-version: "0.5.1"
+version: "0.5.2"
tagline: Encrypted sync and backup for your local-first apps
description: >-
Local-first apps keep your data on your own device and work whether or not you have a
@@ -43,6 +43,16 @@ description: >-
your app at the address shown there. Away from home you will need a way in, such as Tailscale
or a reverse proxy with your own domain.
releaseNotes: >-
+ A visual refresh, shared with the other apps in this store. The page now has a soft glow behind it in
+ the accent colour, and the cards are translucent with a light edge and a shadow, so they read as
+ panels sitting on the page instead of flat blocks painted on it. Card corners are a little tighter,
+ and every framed element now uses the same corner radius. Nothing about what the relay does has
+ changed.
+
+
+ Everything in 0.5.1:
+
+
Fixes a message at the top of the page that never went away. Confirming that a command was sent is worth
saying for a second or two, but it stayed until you reloaded the page, so it was still there long after it
stopped being true. It now clears itself as soon as the relay has picked the command up. A refusal is the