From 0564b4dd48efe8664a0f67a41215d1de1b3d6def Mon Sep 17 00:00:00 2001
From: iFocuspace <dev@ifocuspace.com>
Date: Sat, 23 May 2026 01:32:01 +0800
Subject: [PATCH] fix(eink): restore [data-eink='true'] button rule grouping
 (#4273)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In #4230 the new .btn-contrast block was inserted into the middle of
the existing rule

  [data-eink='true'] button,
  [data-eink='true'] .btn {
    color: theme('colors.base-content') !important;
  }

which left [data-eink='true'] button grouped with .btn-contrast
(applying background-color/border/color: base-100) and orphaned
[data-eink='true'] .btn as its own rule. Net effect on any button
that also has class="btn" — toolbar icon buttons, popup actions, etc.:

  [data-eink='true'] button    bg=base-content, color=base-100   (specificity 0,1,1)
  [data-eink='true'] .btn      color=base-content                (specificity 0,2,0)

The .btn rule wins on color, so the button ends up with a base-content
background AND base-content text color. react-icons children render
with fill: currentColor → invisible icon on solid background → every
toolbar/popup button becomes a solid black (light mode) or solid white
(dark mode) square in e-ink mode.

Fix is the minimal regroup that #4230 was apparently trying to make:
put the new .btn-contrast block AFTER the existing eink button/.btn
selector list rather than splitting it.

Tested locally: in e-ink mode, all annotation toolbar / quick-action
popup buttons recover their icon glyphs; .btn-contrast still renders
as the intended solid-CTA in both modes.
---
 apps/readest-app/src/styles/globals.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/readest-app/src/styles/globals.css b/apps/readest-app/src/styles/globals.css
index aa8ea698..2ec32482 100644
--- a/apps/readest-app/src/styles/globals.css
+++ b/apps/readest-app/src/styles/globals.css
@@ -565,6 +565,10 @@ input[type='range'].slider-input {
 }
 
 [data-eink='true'] button,
+[data-eink='true'] .btn {
+  color: theme('colors.base-content') !important;
+}
+
 /* btn-contrast — a solid, high-contrast CTA: base-content background with a
    base-100 label. Theme-neutral (unlike the colored btn-primary); fits the
    minimalist themes and is already e-ink-correct. */
@@ -577,10 +581,6 @@ input[type='range'].slider-input {
   opacity: 0.9;
 }
 
-[data-eink='true'] .btn {
-  color: theme('colors.base-content') !important;
-}
-
 [data-eink='true'] .btn-primary,
 [data-eink='true'] .btn-outline,
 [data-eink='true'] .btn-contrast {