Conversation
Co-authored-by: nkanf-dev <172456830+nkanf-dev@users.noreply.github.com>
… icons Co-authored-by: nkanf-dev <172456830+nkanf-dev@users.noreply.github.com>
Copilot
AI
changed the title
[WIP] Fix UI styles and icon display issues for Kindle
Fix Kindle-style UI: remove conflicting button hover/focus styles and fix invisible icons
Mar 10, 2026
nkanf-dev
reviewed
Mar 10, 2026
|
|
||
| body { | ||
| margin: 0; | ||
| display: flex; |
Copilot stopped work on behalf of
nkanf-dev due to an error
March 10, 2026 03:39
Owner
|
@copilot Try again. |
Copilot stopped work on behalf of
nkanf-dev due to an error
March 10, 2026 03:42
Owner
|
@copilot 重试 |
Copilot stopped work on behalf of
nkanf-dev due to an error
March 10, 2026 03:49
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The Vite-generated
index.cssdefaults (dark button backgrounds, purple hover borders#646cff, browser focus rings) conflicted with the Kindle light theme. Additionally, several icon buttons were invisible due to near-white foreground colors (#eee) on light backgrounds.Root cause
index.cssshipped dark-mode-first button resets that component CSS couldn't fully override — specificallybutton:hover { border-color: #646cff }(specificity 0-1-1) leaked through on any button with a visible border, andbutton:focus { outline: 4px auto }outweighed the* { outline: none }reset inApp.css.Changes
src/index.css— Stripped all conflicting button defaults (dark bg, purple hover border, focus ring, dark:rootcolor scheme). Retained only font and text-rendering resets.src/styles/HeldPagesPanel.css—del-btn-uxwascolor: #eee(invisible on#fff). Changed tovar(--kindle-subtle)with progressive reveal on card hover →var(--kindle-gray), and red on direct hover.src/styles/ReaderViewport.css— Added explicit Kindle hover/active states for.ux-btnand.mode-btnso they no longer fall through to the (now-removed) purple border default.src/styles/WorkspaceCanvas.css— Tightenedpane-actionsandactionsbutton interactions: addedborder-radius,transition,:activescale, and danger-specific red background tint.src/app/App.css— Addedbody.is-panning(was missing;WorkspaceCanvas.tsxtoggles it during drag). Added.kindle-btn.outline:hoverfill inversion. Extracted--kindle-subtle: #c8c4beand--kindle-danger: #ef4444as theme variables.Original prompt
💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.