From 1f4ff446e92005836dba40e3a8318cfc7896cceb Mon Sep 17 00:00:00 2001 From: Swathi Date: Tue, 21 Apr 2026 09:44:42 +0530 Subject: [PATCH] fix(web): editor icons + subtler toolbar hover MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two problems in the rich-notes editor: 1. Toolbar buttons rendered as blank squares — EasyMDE's CSS expects FontAwesome on the host page but 'autoDownloadFontAwesome: false' in editor.js meant nothing ever loaded. (Keeping autoDownload off is correct: it would inject a CDN at runtime, against our no-CDN posture.) 2. Hover + active button states painted the whole button amber — loud and hard to read the icon. Fix - Vendor FontAwesome 4.7 locally under static/vendor/fontawesome/ (CSS + all font files + licence). URLs in the CSS rewritten from '../fonts/' to an absolute '/static/vendor/fontawesome/' so paths resolve regardless of how a user mounts /static. - Base template now loads font-awesome.min.css before easymde.min.css so toolbar icons render: bold, italic, heading, quote, lists, link, image, code, preview, side-by-side, guide. - Hover state: background flips to surface, icon takes the foreground colour, subtle 1px border — no more amber flood. - Active state: surface background, accent-coloured icon, same border. - Tidied up CodeMirror, preview, and statusbar colours so they read cleanly in both light and dark modes. Not changed - Vendored editor is still served from /static/vendor; no new outbound network calls at runtime. - Existing 46 tests still green. --- khata/web/static/style.css | 105 +- .../static/vendor/fontawesome/FontAwesome.otf | Bin 0 -> 134808 bytes .../web/static/vendor/fontawesome/LICENSE.txt | 4 + .../vendor/fontawesome/font-awesome.min.css | 4 + .../fontawesome/fontawesome-webfont.eot | Bin 0 -> 165742 bytes .../fontawesome/fontawesome-webfont.svg | 2671 +++++++++++++++++ .../fontawesome/fontawesome-webfont.ttf | Bin 0 -> 165548 bytes .../fontawesome/fontawesome-webfont.woff | Bin 0 -> 98024 bytes .../fontawesome/fontawesome-webfont.woff2 | Bin 0 -> 77160 bytes khata/web/templates/base.html | 3 +- 10 files changed, 2770 insertions(+), 17 deletions(-) create mode 100644 khata/web/static/vendor/fontawesome/FontAwesome.otf create mode 100644 khata/web/static/vendor/fontawesome/LICENSE.txt create mode 100644 khata/web/static/vendor/fontawesome/font-awesome.min.css create mode 100644 khata/web/static/vendor/fontawesome/fontawesome-webfont.eot create mode 100644 khata/web/static/vendor/fontawesome/fontawesome-webfont.svg create mode 100644 khata/web/static/vendor/fontawesome/fontawesome-webfont.ttf create mode 100644 khata/web/static/vendor/fontawesome/fontawesome-webfont.woff create mode 100644 khata/web/static/vendor/fontawesome/fontawesome-webfont.woff2 diff --git a/khata/web/static/style.css b/khata/web/static/style.css index 77d75e4..089913b 100644 --- a/khata/web/static/style.css +++ b/khata/web/static/style.css @@ -372,48 +372,121 @@ h2 { font-size: 0.8rem; } -/* EasyMDE surface tuning — adopt the app palette, drop the default blue. */ -.note-block .EasyMDEContainer { - font-family: var(--sans); -} +/* ── EasyMDE surface tuning ────────────────────────────────────── + Adopt the app palette; keep hover/active states subtle rather than + flooding buttons with accent. Uses `button.fa` since EasyMDE + renders toolbar items as