Changeset 16ce669 in Klonkt

Timestamp:

06/19/2026 11:35:34 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

d2078f4

Parents:

a7e8e19

Message:

ui(editor): clear active/inactive state for formatting on mobile

Active formatting button now shown fully filled with the accent colour
(white icon) instead of a vague 14% tint, and :hover only fires on real
hover devices (on touch, hover used to "stick" → unreadable or bold
wouldn't toggle). Now immediately clear whether a style is on; tap again

off.

Co-Authored-By: Claude <noreply@…>

Files:

• CHANGELOG.md (modified) (1 diff)
• src/views/pages/post-edit.ejs (modified) (1 diff)

CHANGELOG.md

@@ -19 +19 @@
   pagina sprong naar beneden. De toolbar houdt de focus nu in de editor
   (mousedown-preventDefault + focus zonder scroll), dus toggelen werkt en er is geen
-  sprong meer. Toolbar-taps zijn ook sneller (touch-action: manipulation).
+  sprong meer. Toolbar-taps zijn ook sneller (touch-action: manipulation). Actieve
+  opmaak is nu duidelijk gevuld met de accentkleur (en :hover plakt niet meer op
+  touch), zodat zichtbaar is of bv. vet aan of uit staat.
 
 ### Toegevoegd

src/views/pages/post-edit.ejs

@@ -405 +405 @@
   -webkit-tap-highlight-color: transparent;
 }
-.pe-toolbar button:hover {
-  background: var(--paper-2);
-  color: var(--accent);
+/* Hover alleen op echte hover-apparaten — op touch blijft :hover anders "plakken"
+   na een tik, waardoor de actief/inactief-staat onleesbaar wordt. */
+@media (hover: hover) {
+  .pe-toolbar button:hover {
+    background: var(--paper-2);
+    color: var(--accent);
+  }
 }
 .pe-toolbar button:active { transform: scale(.94); }
+/* Actieve opmaak = onmiskenbaar gevuld met de accentkleur. Zo is op mobiel
+   meteen duidelijk dat bv. vet AAN staat (tik nogmaals = uit). */
 .pe-toolbar button.is-active {
-  background: color-mix(in srgb, var(--accent) 14%, var(--paper-2));
-  color: var(--accent);
-  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
-}
+  background: var(--accent);
+  color: #fff;
+  border-color: var(--accent);
+}
+.pe-toolbar button.is-active svg { color: #fff; }
 .pe-toolbar button svg { width: 16px; height: 16px; }
 .pe-toolbar button.pe-tb-text { font-family: var(--font-display, serif); font-weight: 700; }