sysop/UmbrelApps
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Gate 0.0.29 en Relay 0.5.5: de gloed uit, als schakelaar

Browse Source 
Op verzoek van de gebruiker, in beide apps. De accentgloed uit Gate 0.0.25 en
Relay 0.5.2 gaat uit; de rand, de schaduw, het randlicht en de doorschijnende
kleur van de vlakken blijven staan.

Het is een schakelaar geworden en geen verwijdering: data-glow="on" op het
html-element zet hem terug, en alleen samen met data-depth="deep". Die tweede
eis is van de gebruiker en hij is juist: de gloed is de onderste van de vier
dieptelagen, dus aanzetten op een vlakke pagina legt een verloop achter vlakken
die er dekkend voor staan.

De blur hangt nu aan de gloed en niet aan de diepte, want een backdrop-filter
op een egale ondergrond levert per definitie niets op. Daarmee verviel het
mobiele terugvalblok (Gate 0.0.26, Relay 0.5.3) volledig: dat zette gloed, blur
en vlakkleur om, en de eerste twee staan nu al uit.

Meegevonden en gerepareerd: een selector met twee attributen wint van de :root
in de prefers-reduced-transparency-query, die daardoor de blur niet meer uit
kreeg. Die query noemt de gloedselector nu letterlijk.

Alle zeven tests groen: 22 + 43 + 39 + 54 + 28 + 115 + 65 goed, 0 fout.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Harmen
2026-09-04 09:55:11 +02:00
co-authored by Claude Opus 5
parent dbec428e62
commit cd4c7da0d7
11 changed files with 235 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
whatsnext-electrum-gate/index.html.template
+60 -34
View File
@@ -17,7 +17,16 @@
niet, dan zegt hij dat. Hij verzint niets, want hij wordt juist geraadpleegd
op het moment dat er iets mis lijkt te zijn.
-->
<html lang="en" data-theme="dark" data-accent="orange" data-depth="deep">
<!-- data-glow schakelt de accentgloed achter de pagina. "off" is de stand sinds
0.0.29 (verzoek van de gebruiker, 04-09-2026); "on" zet hem terug, en dat is
het enige wat er voor nodig is: alles staat in de tokenlaag onder "Diepte" en
geen enkele regel hieronder kent de stand.
De gloed hangt aan de combinatie met data-depth="deep" en niet aan zichzelf.
Dat is een eis van de gebruiker en het is ook de enige zinnige lezing: de
gloed is de onderste van de vier dieptelagen, dus hij aanzetten terwijl de
pagina vlak staat zou een verloop achter dekkende vlakken leggen. -->
<html lang="en" data-theme="dark" data-accent="orange" data-depth="deep" data-glow="off">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -128,18 +137,34 @@
/* -- 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.
AssetApp is dit een instelling; hier is er geen schuif, want dit is een
statuspagina met dark/light en verder geen knoppen. De stand staat dus in het
html-element en niet in een menu.
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. */
**De gloed staat sinds 0.0.29 uit** (verzoek van de gebruiker, 04-09-2026).
Aanzetten is `data-glow="on"` op het html-element en verder niets: het blok
verderop zet
dan de twee verlopen én de blur. Dat blok eist ook `data-depth="deep"`, want
een gloed achter dekkende vlakken is geen stand die iemand bedoelt.
Let op wat in deze app níet aan de diepte hangt: de doorschijnende kleur van de
vlakken en het randlicht staan onder [data-theme] en dus altijd aan. Dat is zo
sinds 0.0.25 en het blijft zo; in het designsysteem hangen die wél aan de
diepte, omdat daar een schuif zit die ze allemaal tegelijk omzet.
Dat die twee aan hetzelfde attribuut hangen is geen gemak maar de kern van hoe
dit werkt. Een backdrop-filter op een egale ondergrond levert per definitie
niets op, dus zonder gloed is de blur rekenwerk zonder resultaat: de gloed is
het eerste deel en het glas het tweede, in die volgorde.
Wat de gloed NIET meeneemt, en dus ook zonder hem gewoon staat: de rand, de
schaduw, het randlicht en de kleur van de vlakken. Dat zijn geen glaseffecten;
ze werken op een egale ondergrond even goed. */
:root {
--surface: var(--bg-elevated);
--surface-inset: var(--bg-raised);
--surface-blur: 16px;
--surface-sat: 135%;
--surface-blur: 0px;
--surface-sat: 100%;
--edge: none;
--ambient: none;
--shadow-1: 0 1px 2px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.05);
@@ -155,7 +180,18 @@
--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"] {
/* De gloed: twee verlopen, één uit de linkerbovenhoek en een tegenlichtje
rechtsboven, zodat het geheel niet als één vlek leest. De blur hoort erbij en
staat daarom in ditzelfde blok; zie de uitleg bovenaan.
De selector heeft twee attributen en dus een specificiteit die `:root` niet
haalt. Dat is de reden dat de media-query hieronder deze selector letterlijk
herhaalt: met alleen `:root` erin zou de wens "minder doorzichtigheid" de blur
niet meer uit krijgen, en dat is een stille regressie in precies de stand waar
iemand om vroeg. */
[data-depth="deep"][data-glow="on"] {
--surface-blur: 16px;
--surface-sat: 135%;
--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%);
}
@@ -167,7 +203,10 @@
iets anders: de ene gaat over doorschijnende vlakken, de andere over
beweging. */
@media (prefers-reduced-transparency: reduce) {
:root {
/* Twee selectors, want de gloedstand hierboven heeft twee attributen en wint
anders van `:root`. Gelijke specificiteit plus later in het bestand is wat
hem hier laat winnen. */
:root, [data-depth="deep"][data-glow="on"] {
--surface: var(--bg-elevated); --surface-inset: var(--bg-raised);
--surface-blur: 0px; --surface-sat: 100%;
}
@@ -176,30 +215,17 @@
body::before, .card { transition: none; }
}
/* -- Mobiel: terug naar de vlakke stand (keuze gebruiker, 31-08-2026) ---------
De gloed is 58rem breed, ongeveer 928 pixels. Op een telefoon is het scherm dus
smaller dan de gloed zelf, en dan is het geen verloop meer maar een egale waas
over de hele pagina: alle nuance die hem op een breed scherm mooi maakt valt
buiten beeld.
/* Hier stond een media-query die op een scherm smaller dan 900 pixels terugviel
op de vlakke stand (keuze gebruiker, 31-08-2026): de gloed is 58rem breed en
op een telefoon dus breder dan het scherm, waardoor het geen verloop meer was
maar een egale waas.
De blur gaat in dezelfde stap eruit, en dat is geen extraatje. Doorzichtigheid
met niets erachter is gewoon grijs, dus zonder de gloed voegt het niets meer
toe; ondertussen kost een backdrop-filter op een telefoon wel per frame
rekenwerk. Wat blijft staan is de rand, de schaduw en het randlicht.
De selector is html[data-depth] en niet :root, want :root heeft dezelfde
specificiteit als de [data-theme]-blokken hierboven en zou dan alleen winnen
zolang hij er in het bestand ONDER staat. Dat is een afhankelijkheid van
volgorde die je bij de eerstvolgende verplaatsing stil kwijtraakt. */
@media (max-width: 900px) {
html[data-depth] {
--surface: var(--bg-elevated);
--surface-inset: var(--bg-raised);
--surface-blur: 0px;
--surface-sat: 100%;
--ambient: none;
}
}
Weggehaald op 04-09-2026, toen de gloed er in het geheel uit ging: hij zette
de gloed uit (die nu al uit staat), de blur uit (die met de gloed meegaat) en
de vlakken op dekkend (het enige dat overbleef, en dat is zonder blur alleen
nog een iets andere grijstoon). Een breekpunt dat in beide standen hetzelfde
oplevert, houdt alleen de suggestie over dat er iets gebeurt. Zet je de gloed
met `data-glow="on"` terug, dan hoort dit blok er ook weer bij. */
/* 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
whatsnext-electrum-gate/umbrel-app.yml
+15 -11
View File
@@ -9,7 +9,7 @@ manifestVersion: 1
id: whatsnext-electrum-gate
category: bitcoin
name: Electrum Gate
version: "0.0.28"
version: "0.0.29"
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,15 @@ 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: >-
The glow behind the page is gone. It arrived in 0.0.25 and it did what it was meant to do, but a status
page is something you glance at, and a coloured wash over the whole window is a lot of decoration for a
glance. The panels keep their edge, their shadow and their top light, so they still read as panels; only
the light behind them is off. The switch is still in the page for anyone who wants it back.
Everything in 0.0.28:
The block height tile is gone. This app is a front door for your Electrum server; what the chain is
doing is not its news to report, and every wallet and block explorer you own already tells you. Four
tiles are left, all of them about this gateway: which server your traffic goes to, whether it answers
@@ -82,19 +91,14 @@ releaseNotes: >-
so it stopped being a gradient and became a haze over everything.
Everything in 0.0.25:
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.
Earlier releases:
0.0.25 was a visual refresh shared with the other app in this store: translucent cards with a light edge
and a shadow, one corner radius for every framed element, and a glow behind the page. That glow is the
one this release switches off; the rest of it is still there.
0.0.24 added an "About this app" item to the menu, and changed the Status card from "Answering" with
"answered in 7 ms, from inside the app" underneath to "Running" with the measurement below it. The
caveat moved into that dialog, where there is room to state it: the check runs inside the app, so a