Gate 0.0.29 en Relay 0.5.5: de gloed uit, als schakelaar
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
@@ -35,7 +35,16 @@
|
||||
is.
|
||||
═══════════════════════════════════════════════════════════════════════════════
|
||||
-->
|
||||
<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.5.5 (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">
|
||||
@@ -146,18 +155,30 @@
|
||||
|
||||
/* -- 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.5.5 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.
|
||||
|
||||
Dat de blur aan de gloed hangt 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 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.5.2 en het blijft zo; in het designsysteem hangen die wél aan de
|
||||
diepte, omdat daar een schuif zit die ze allemaal tegelijk omzet. */
|
||||
: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);
|
||||
@@ -173,7 +194,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%);
|
||||
}
|
||||
@@ -185,7 +217,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%;
|
||||
}
|
||||
@@ -194,30 +229,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
|
||||
|
||||
@@ -11,7 +11,7 @@ manifestVersion: 1
|
||||
id: whatsnext-evolu-relay
|
||||
category: files
|
||||
name: Evolu Relay
|
||||
version: "0.5.4"
|
||||
version: "0.5.5"
|
||||
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,15 @@ 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: >-
|
||||
The glow behind the page is gone. It arrived in 0.5.2 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.5.4:
|
||||
|
||||
|
||||
The status widget has moved to the right of the top row and is now called Status, matching Electrum
|
||||
Gate. The two pages are one app store and they should read the same way.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user