Een schaduw op wit geeft diepte maar geen rand, en dat scheelt in het lichte thema
Overgenomen uit AssetApp op verzoek van de gebruiker: de kaders krijgen in het lichte thema een rand naast hun schaduw, en --border en --border-mid gaan van 0,07 en 0,11 naar 0,12 en 0,18 zwart. De schaduw wordt daarom strakker, 2 en 16 pixels in plaats van 3 en 24, zodat het samen niet zwaar wordt. Het donkere thema verandert niet. Daar staat een lichte rand op een donkere ondergrond en die zie je hoe dan ook; dit is een probleem dat alleen op wit bestaat. De opgehoogde randkleur raakt meer dan de kaders: ook de scheidingslijnen tussen lijstregels, het menupaneel, de dialoog en de invoervelden. Dat is de bedoeling. Dezelfde wijziging staat nu in het gedeelde ontwerpdocument onder HomeGit/Docs, want anders neemt de volgende app die dat document volgt de oude waarden weer over. Die map staat niet onder versiebeheer, dus die wijziging zit niet in deze commit. Verder twee verificaties van de gebruiker verwerkt: de pagina is op een telefoon in orde, en de uploadtest met een verkeerde sleutel is op zijn verzoek vervallen. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -62,8 +62,13 @@
|
||||
--bg-elevated: #f7f7f7;
|
||||
--bg-raised: #f0f0f0;
|
||||
--bg-overlay: #e8e8e8;
|
||||
--border: rgba(0,0,0,0.07);
|
||||
--border-mid: rgba(0,0,0,0.11);
|
||||
/* 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;
|
||||
@@ -178,7 +183,15 @@ body {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
[data-theme="dark"] .card { border: 1px solid var(--border); }
|
||||
[data-theme="light"] .card { box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 6px 24px rgba(0,0,0,0.04); }
|
||||
/* 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
|
||||
maar geen begrenzing: waar het kader ophoudt bleef een kwestie van kijken. De
|
||||
rand doet dat werk, en de schaduw is daarom strakker geworden (2 en 16 pixels
|
||||
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; }
|
||||
|
||||
/* ── De bovenste rij ────────────────────────────────────────────────────────
|
||||
|
||||
Reference in New Issue
Block a user