diff --git a/src/NexusReader.UI.Shared/Components/Molecules/CalloutBox.razor.css b/src/NexusReader.UI.Shared/Components/Molecules/CalloutBox.razor.css
index 79c604d..3ee7e8d 100644
--- a/src/NexusReader.UI.Shared/Components/Molecules/CalloutBox.razor.css
+++ b/src/NexusReader.UI.Shared/Components/Molecules/CalloutBox.razor.css
@@ -1,6 +1,6 @@
.nexus-callout-box {
- padding: 1.25rem 1.5rem;
- margin: 1.5rem 0;
+ padding: 1rem 1.25rem;
+ margin: 1.5rem 0 1.5rem 0;
border-radius: 0 8px 8px 0;
font-family: var(--nexus-font-sans, sans-serif);
font-size: 0.95rem;
diff --git a/src/NexusReader.UI.Shared/Components/Molecules/SelectionAiPanel.razor b/src/NexusReader.UI.Shared/Components/Molecules/SelectionAiPanel.razor
index 9c10153..341fc1b 100644
--- a/src/NexusReader.UI.Shared/Components/Molecules/SelectionAiPanel.razor
+++ b/src/NexusReader.UI.Shared/Components/Molecules/SelectionAiPanel.razor
@@ -58,7 +58,7 @@
private bool IsVisible => !string.IsNullOrEmpty(SelectedText) && Coordinates != null;
private bool IsLoading = false;
private KnowledgePacket? Packet;
- private bool PositionBelow => Coordinates != null && Coordinates.Top < 320;
+ private bool PositionBelow => Coordinates != null && Coordinates.Top < 250;
protected override void OnParametersSet()
{
@@ -69,7 +69,7 @@
private string PanelStyle => Coordinates != null
? string.Create(System.Globalization.CultureInfo.InvariantCulture,
- $"top: {(PositionBelow ? Coordinates.Top + 35 : Coordinates.Top - 15):F1}px !important; " +
+ $"top: {(PositionBelow ? Coordinates.Bottom + 8 : Coordinates.Top - 8):F1}px !important; " +
$"left: {Math.Clamp(Coordinates.Left + Coordinates.Width / 2, 280, 1600):F1}px !important; " +
$"transform: translate(-50%, {(PositionBelow ? "0" : "-100%")}) !important;")
: "";
diff --git a/src/NexusReader.UI.Shared/Components/Organisms/ReaderCanvas.razor.css b/src/NexusReader.UI.Shared/Components/Organisms/ReaderCanvas.razor.css
index cfe152f..17c8e39 100644
--- a/src/NexusReader.UI.Shared/Components/Organisms/ReaderCanvas.razor.css
+++ b/src/NexusReader.UI.Shared/Components/Organisms/ReaderCanvas.razor.css
@@ -89,8 +89,8 @@
::deep .nexus-ebook blockquote {
background-color: rgba(255, 255, 255, 0.02);
border-left: 4px solid var(--nexus-neon);
- padding: 1.25rem 1.5rem;
- margin: 1.5rem 0;
+ padding: 1rem 1.25rem;
+ margin: 1.5rem 0 1.5rem 0;
border-radius: 0 8px 8px 0;
font-size: 1.05rem;
color: #e2e8f0;
diff --git a/src/NexusReader.UI.Shared/Components/Organisms/ReaderFooter.razor.css b/src/NexusReader.UI.Shared/Components/Organisms/ReaderFooter.razor.css
index a97f723..f8da658 100644
--- a/src/NexusReader.UI.Shared/Components/Organisms/ReaderFooter.razor.css
+++ b/src/NexusReader.UI.Shared/Components/Organisms/ReaderFooter.razor.css
@@ -51,14 +51,17 @@
align-items: center;
justify-content: center;
cursor: pointer;
- transition: all 0.2s ease;
- color: #e4e4e7;
+ transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, transform 0.2s ease-in-out;
+ color: #a1a1aa; /* Zinc-400 default contrast */
}
-.nav-btn:hover:not(:disabled) {
- background: rgba(255, 255, 255, 0.1);
- border-color: rgba(255, 255, 255, 0.2);
+.nav-btn:hover:not(:disabled),
+.nav-btn:focus:not(:disabled) {
+ background: rgba(255, 255, 255, 0.08);
+ border-color: var(--nexus-neon, #00ff99);
+ color: var(--nexus-neon, #00ff99); /* Brand neon green hover/focus signal */
transform: scale(1.05);
+ outline: none;
}
.nav-btn:disabled {
@@ -69,12 +72,15 @@
:global(.theme-light) .nav-btn {
background: rgba(0, 0, 0, 0.02);
border-color: rgba(0, 0, 0, 0.08);
- color: #333333;
+ color: #71717a; /* Zinc-500 for light mode */
}
-:global(.theme-light) .nav-btn:hover:not(:disabled) {
+:global(.theme-light) .nav-btn:hover:not(:disabled),
+:global(.theme-light) .nav-btn:focus:not(:disabled) {
background: rgba(0, 0, 0, 0.05);
- border-color: rgba(0, 0, 0, 0.15);
+ border-color: var(--nexus-neon, #00bb77);
+ color: var(--nexus-neon, #00bb77);
+ outline: none;
}
.chapter-info {
@@ -84,11 +90,11 @@
justify-content: center;
min-width: 0;
flex: 1;
- color: #e4e4e7;
+ color: #e2e8f0; /* Slate-200 for clean high readability */
}
:global(.theme-light) .chapter-info {
- color: #333333;
+ color: #18181b; /* Zinc-900 for high light contrast */
}
.chapter-title {
@@ -102,10 +108,14 @@
}
.chapter-count {
- opacity: 0.5;
+ color: #a1a1aa; /* Zinc-400 for secondary info clarity */
font-size: 0.7rem;
}
+:global(.theme-light) .chapter-count {
+ color: #71717a; /* Zinc-500 secondary info for light mode */
+}
+
.progress-container {
width: 80px;
height: 4px;
diff --git a/src/NexusReader.UI.Shared/Models/ReaderModels.cs b/src/NexusReader.UI.Shared/Models/ReaderModels.cs
index de527e2..2f369ef 100644
--- a/src/NexusReader.UI.Shared/Models/ReaderModels.cs
+++ b/src/NexusReader.UI.Shared/Models/ReaderModels.cs
@@ -15,7 +15,7 @@ public enum MobileReaderTab
///
/// Screen coordinates for text selection popup positioning.
///
-public record SelectionCoordinates(double Top, double Left, double Width);
+public record SelectionCoordinates(double Top, double Left, double Width, double Height, double Bottom);
///
/// Represents a message in the KM-RAG global and mobile intelligence chat threads.
diff --git a/src/NexusReader.UI.Shared/wwwroot/js/selectionHandler.js b/src/NexusReader.UI.Shared/wwwroot/js/selectionHandler.js
index f054250..80ad56b 100644
--- a/src/NexusReader.UI.Shared/wwwroot/js/selectionHandler.js
+++ b/src/NexusReader.UI.Shared/wwwroot/js/selectionHandler.js
@@ -27,7 +27,9 @@ export function initSelectionListener(dotNetHelper, container) {
{
Top: rect.top,
Left: rect.left,
- Width: rect.width
+ Width: rect.width,
+ Height: rect.height,
+ Bottom: rect.bottom
});
}
} else {