style: refine callout box margins, selection popover positioning, and footer hover contrast

This commit is contained in:
2026-06-02 20:00:02 +02:00
parent 01bc8e37b9
commit 900690875f
6 changed files with 31 additions and 19 deletions
@@ -1,6 +1,6 @@
.nexus-callout-box { .nexus-callout-box {
padding: 1.25rem 1.5rem; padding: 1rem 1.25rem;
margin: 1.5rem 0; margin: 1.5rem 0 1.5rem 0;
border-radius: 0 8px 8px 0; border-radius: 0 8px 8px 0;
font-family: var(--nexus-font-sans, sans-serif); font-family: var(--nexus-font-sans, sans-serif);
font-size: 0.95rem; font-size: 0.95rem;
@@ -58,7 +58,7 @@
private bool IsVisible => !string.IsNullOrEmpty(SelectedText) && Coordinates != null; private bool IsVisible => !string.IsNullOrEmpty(SelectedText) && Coordinates != null;
private bool IsLoading = false; private bool IsLoading = false;
private KnowledgePacket? Packet; private KnowledgePacket? Packet;
private bool PositionBelow => Coordinates != null && Coordinates.Top < 320; private bool PositionBelow => Coordinates != null && Coordinates.Top < 250;
protected override void OnParametersSet() protected override void OnParametersSet()
{ {
@@ -69,7 +69,7 @@
private string PanelStyle => Coordinates != null private string PanelStyle => Coordinates != null
? string.Create(System.Globalization.CultureInfo.InvariantCulture, ? 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; " + $"left: {Math.Clamp(Coordinates.Left + Coordinates.Width / 2, 280, 1600):F1}px !important; " +
$"transform: translate(-50%, {(PositionBelow ? "0" : "-100%")}) !important;") $"transform: translate(-50%, {(PositionBelow ? "0" : "-100%")}) !important;")
: ""; : "";
@@ -89,8 +89,8 @@
::deep .nexus-ebook blockquote { ::deep .nexus-ebook blockquote {
background-color: rgba(255, 255, 255, 0.02); background-color: rgba(255, 255, 255, 0.02);
border-left: 4px solid var(--nexus-neon); border-left: 4px solid var(--nexus-neon);
padding: 1.25rem 1.5rem; padding: 1rem 1.25rem;
margin: 1.5rem 0; margin: 1.5rem 0 1.5rem 0;
border-radius: 0 8px 8px 0; border-radius: 0 8px 8px 0;
font-size: 1.05rem; font-size: 1.05rem;
color: #e2e8f0; color: #e2e8f0;
@@ -51,14 +51,17 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; 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: #e4e4e7; color: #a1a1aa; /* Zinc-400 default contrast */
} }
.nav-btn:hover:not(:disabled) { .nav-btn:hover:not(:disabled),
background: rgba(255, 255, 255, 0.1); .nav-btn:focus:not(:disabled) {
border-color: rgba(255, 255, 255, 0.2); 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); transform: scale(1.05);
outline: none;
} }
.nav-btn:disabled { .nav-btn:disabled {
@@ -69,12 +72,15 @@
:global(.theme-light) .nav-btn { :global(.theme-light) .nav-btn {
background: rgba(0, 0, 0, 0.02); background: rgba(0, 0, 0, 0.02);
border-color: rgba(0, 0, 0, 0.08); 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); 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 { .chapter-info {
@@ -84,11 +90,11 @@
justify-content: center; justify-content: center;
min-width: 0; min-width: 0;
flex: 1; flex: 1;
color: #e4e4e7; color: #e2e8f0; /* Slate-200 for clean high readability */
} }
:global(.theme-light) .chapter-info { :global(.theme-light) .chapter-info {
color: #333333; color: #18181b; /* Zinc-900 for high light contrast */
} }
.chapter-title { .chapter-title {
@@ -102,10 +108,14 @@
} }
.chapter-count { .chapter-count {
opacity: 0.5; color: #a1a1aa; /* Zinc-400 for secondary info clarity */
font-size: 0.7rem; font-size: 0.7rem;
} }
:global(.theme-light) .chapter-count {
color: #71717a; /* Zinc-500 secondary info for light mode */
}
.progress-container { .progress-container {
width: 80px; width: 80px;
height: 4px; height: 4px;
@@ -15,7 +15,7 @@ public enum MobileReaderTab
/// <summary> /// <summary>
/// Screen coordinates for text selection popup positioning. /// Screen coordinates for text selection popup positioning.
/// </summary> /// </summary>
public record SelectionCoordinates(double Top, double Left, double Width); public record SelectionCoordinates(double Top, double Left, double Width, double Height, double Bottom);
/// <summary> /// <summary>
/// Represents a message in the KM-RAG global and mobile intelligence chat threads. /// Represents a message in the KM-RAG global and mobile intelligence chat threads.
@@ -27,7 +27,9 @@ export function initSelectionListener(dotNetHelper, container) {
{ {
Top: rect.top, Top: rect.top,
Left: rect.left, Left: rect.left,
Width: rect.width Width: rect.width,
Height: rect.height,
Bottom: rect.bottom
}); });
} }
} else { } else {