Gate 0.0.26 en Relay 0.5.3: Running weer accent, gloed uit op mobiel
Twee bijstellingen op de opfrisbeurt van vanochtend, allebei op verzoek van de gebruiker. "Running" staat weer in de accentkleur. In Evolu Relay hing die tekst aan --pos, en die ging van oranje naar groen omdat --pos het accent volgde en dat als merkkleur las in plaats van als betekenis. In Electrum Gate hing hij aan niets en was hij gewoon --text-primary. Beide staan nu op --accent-text, met een eigen .stat-val.ok: "Running" is de eigen toestand van de app en geen positief cijfer, en --pos blijft groen voor "het staat in de plus". In Gate wordt die klasse alleen bij state 'ok' gezet; 'off' en 'pending' zijn niet fout maar ook niet in orde en houden de gewone tekstkleur. Op een telefoon valt de pagina terug op de vlakke stand. De gloed is 58rem breed, ongeveer 928 pixels, dus op een telefoonscherm is het beeld smaller dan de gloed zelf en wordt het een egale waas in plaats van een verloop. De blur gaat in dezelfde stap eruit, en dat is geen extraatje: doorzichtigheid met niets erachter is gewoon grijs, terwijl een backdrop-filter op een telefoon wel per frame rekenwerk kost. Rand, schaduw en randlicht blijven staan. Grens 900 pixels. De selector is html[data-depth] en niet :root, want :root heeft dezelfde specificiteit als de [data-theme]-blokken en zou dan alleen winnen zolang hij er in het bestand onder staat. Alleen de pagina's, dus opnieuw geen nieuwe images. Suite groen: 22 + 43 + 22 + 115 op de geraakte delen. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -176,6 +176,31 @@
|
||||
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.
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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. */
|
||||
@@ -376,6 +401,12 @@ body {
|
||||
/* Rood is voor het geval waar je iets aan moet doen. Bewust niet voor "off": geen
|
||||
certificaat gekozen is de normale begintoestand van een verse installatie, en
|
||||
daar staat de melding bovenaan al voor. */
|
||||
/* De accentkleur en niet --pos (keuze gebruiker, 31-08-2026, gelijk aan Evolu
|
||||
Relay). "Running" is de eigen toestand van de app en geen positief cijfer, dus
|
||||
het accent hoort erbij; --pos betekent sinds het gedeelde palet "het staat in de
|
||||
plus" en is groen. Zo blijven die twee betekenissen uit elkaar en volgt deze
|
||||
tekst het accent mee als de app ooit een andere kleur krijgt. */
|
||||
.stat-val.ok { color: var(--accent-text); }
|
||||
.stat-val.bad { color: var(--neg); }
|
||||
.stat-sub.mono { font-family: var(--font-mono); overflow-wrap: anywhere; }
|
||||
/* Even hoog als de sparkline hieronder, en met dezelfde bovenmarge. Anders staat
|
||||
@@ -1557,7 +1588,7 @@ body {
|
||||
|
||||
if (!kind) {
|
||||
put('self-state', null);
|
||||
node.classList.remove('bad');
|
||||
node.classList.remove('bad', 'ok');
|
||||
// Dit is de toestand op een installatie met een oudere agent. Zwijgen zou
|
||||
// hier als "in orde" lezen.
|
||||
sub.textContent = self ? 'Reported as ' + self.state : 'The agent has not reported this yet.';
|
||||
@@ -1566,6 +1597,9 @@ body {
|
||||
|
||||
put('self-state', kind.label);
|
||||
node.classList.toggle('bad', kind.bad);
|
||||
// Alleen 'ok' krijgt het accent. 'off' en 'pending' zijn niet fout maar ook
|
||||
// niet in orde, en die horen dus de gewone tekstkleur te houden.
|
||||
node.classList.toggle('ok', self.state === 'ok');
|
||||
|
||||
if (self.state === 'ok') {
|
||||
// Wat er gemeten is, in gewone woorden. Het getal blijft, want dat is het
|
||||
|
||||
Reference in New Issue
Block a user