From 7b5d4dbf524ceec72b5f861fb23ed0294eac82d4 Mon Sep 17 00:00:00 2001 From: Bendik Aagaard Lynghaug Date: Fri, 14 Aug 2026 23:05:43 +0200 Subject: [PATCH] No translucent input chrome: solid ink-dim placeholders and embed meta One placeholder rule for native inputs and the prosekit editor alike; kills ProseKit's 0.3-opacity placeholder and Firefox's UA dimming. The embed description drops inline opacity for a fixed mid-gray that stays dim on both the newsletter's light background and our dark paper. Co-Authored-By: Claude Fable 5 --- prosekit-editor.js | 4 +++- style/main.css | 11 +++++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/prosekit-editor.js b/prosekit-editor.js index bbaf7c6..13b7380 100644 --- a/prosekit-editor.js +++ b/prosekit-editor.js @@ -137,7 +137,9 @@ function defineGiteaRepoEmbed() { { href: url, style: 'font-weight:600;text-decoration:none;color:inherit;' }, `${owner}/${repo}`, ], - ['div', { style: 'opacity:0.7;font-size:0.9rem;margin-top:0.25em;' }, description], + // Solid mid-gray, not opacity - dim on both the newsletter's + // light client background and this app's dark paper. + ['div', { style: 'color:#9a9a9a;font-size:0.9rem;margin-top:0.25em;' }, description], ] }, }) diff --git a/style/main.css b/style/main.css index 5d6ca22..240ca04 100644 --- a/style/main.css +++ b/style/main.css @@ -444,6 +444,17 @@ textarea:focus { box-shadow: 0 0 0 0.18rem var(--accent-soft); } +/* One placeholder treatment for every input-like surface: solid + ink-dim, no translucency. opacity: 1 also undoes the UA's own + placeholder dimming (Firefox) and ProseKit's 0.3 on its + placeholder pseudo-element, which read far dimmer than the + native inputs next to it. */ +::placeholder, +.prosekit-editor .prosekit-placeholder::before { + color: var(--ink-dim); + opacity: 1; +} + .prosekit-wrap { background: var(--paper); border: 0.06rem solid var(--line);