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 {