diff --git a/src/NexusReader.UI.Shared/Components/Organisms/MobileReaderToolbar.razor b/src/NexusReader.UI.Shared/Components/Organisms/MobileReaderToolbar.razor index 168cd08..8d1bc0e 100644 --- a/src/NexusReader.UI.Shared/Components/Organisms/MobileReaderToolbar.razor +++ b/src/NexusReader.UI.Shared/Components/Organisms/MobileReaderToolbar.razor @@ -3,56 +3,58 @@ @using NexusReader.UI.Shared.Models @using NexusReader.Application.Utilities @namespace NexusReader.UI.Shared.Components.Organisms +@implements IDisposable @inject IReaderInteractionService InteractionService @inject IReaderStateService StateService +@inject IThemeService ThemeService -
- -
+
+ +
+ Postęp + - -
+ + + + +
+ AI
- -
- - - -
+ + + + +
@@ -107,11 +109,17 @@ private bool IsCheckpointsOpen { get; set; } + protected override void OnInitialized() + { + ThemeService.OnThemeChanged += HandleThemeChanged; + } + + private Task HandleThemeChanged() => InvokeAsync(StateHasChanged); private double GetDashOffset() { - // Circumference of r=16 is 2 * pi * 16 = 100.53 - double circumference = 100.53; + // Circumference of r=12 is 2 * pi * 12 = 75.40 + double circumference = 75.40; double progress = Math.Clamp(ScrollPercentage, 0, 100); return circumference - (progress / 100.0) * circumference; } @@ -148,4 +156,9 @@ await OnAssistantClick.InvokeAsync(); } } + + public void Dispose() + { + ThemeService.OnThemeChanged -= HandleThemeChanged; + } } diff --git a/src/NexusReader.UI.Shared/Components/Organisms/MobileReaderToolbar.razor.css b/src/NexusReader.UI.Shared/Components/Organisms/MobileReaderToolbar.razor.css index e8569c3..092943c 100644 --- a/src/NexusReader.UI.Shared/Components/Organisms/MobileReaderToolbar.razor.css +++ b/src/NexusReader.UI.Shared/Components/Organisms/MobileReaderToolbar.razor.css @@ -4,38 +4,75 @@ left: 16px; right: 16px; height: 64px; - background: rgba(18, 18, 18, 0.75); - backdrop-filter: blur(24px); - -webkit-backdrop-filter: blur(24px); - border: 1px solid rgba(0, 255, 153, 0.2); border-radius: 16px; - display: grid; - grid-template-columns: 1fr auto 1fr; + display: flex; + justify-content: space-between; align-items: center; - padding: 0 1rem; + padding: 0 0.5rem; z-index: 1000; - box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); box-sizing: border-box; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; + overflow: visible; /* Critical to show elevated FAB */ } -.toolbar-slot { +/* Light Mode: Premium Paper Look */ +.nexus-unified-mobile-toolbar.theme-light { + background: rgba(244, 241, 234, 0.9); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid rgba(139, 130, 115, 0.18); + box-shadow: 0 8px 30px rgba(139, 130, 115, 0.15); +} + +/* Dark Mode: Translucent Slate */ +.nexus-unified-mobile-toolbar.theme-dark { + background: rgba(18, 18, 18, 0.8); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid rgba(255, 255, 255, 0.08); + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); +} + +.nav-toggle-btn { + flex: 1; display: flex; + flex-direction: column; align-items: center; + justify-content: center; + background: none; + border: none; + color: #8b8273; /* Inactive items earthy gray */ + padding: 6px 0; + cursor: pointer; + transition: all 0.2s ease; + min-width: 0; + position: relative; + height: 100%; } -/* LEFT SLOT: Progress circular ring */ -.left-slot { - justify-content: flex-start; - gap: 0.65rem; - cursor: pointer; - user-select: none; +.nav-toggle-btn.active { + color: #10b981; /* Active items vibrant green */ +} + +.nav-toggle-btn ::deep .nexus-icon { + transition: transform 0.2s ease; +} + +.nav-toggle-btn.active ::deep .nexus-icon { + transform: scale(1.1); +} + +.tab-label { + font-size: 11px; + font-weight: 500; + margin-top: 4px; + white-space: nowrap; } .progress-ring-wrapper { position: relative; - width: 38px; - height: 38px; + width: 28px; + height: 28px; display: flex; align-items: center; justify-content: center; @@ -45,65 +82,53 @@ transform: rotate(-90deg); } -.progress-ring-indicator { - transition: stroke-dashoffset 0.35s cubic-bezier(0.4, 0, 0.2, 1); -} - .progress-text { position: absolute; - font-size: 0.65rem; - font-weight: 700; - color: #FFFFFF; -} - -.progress-info { - display: flex; - flex-direction: column; -} - -.slot-label { - font-size: 0.75rem; - font-weight: 600; - color: #FFFFFF; -} - -.slot-desc { font-size: 0.6rem; - color: rgba(255,255,255,0.4); + font-weight: 700; + color: #8b8273; } -/* CENTER SLOT: Glowing AI Core Button */ -.center-slot { - justify-content: center; - position: relative; +.nav-toggle-btn.active .progress-text { + color: #10b981; +} + +/* Center AI FAB container & button */ +.center-ai-container { + overflow: visible; } .btn-nexus-ai-core { - width: 52px; - height: 52px; + width: 48px; + height: 48px; border-radius: 50%; - background: linear-gradient(135deg, #00FF99 0%, #00F0FF 100%); + background: linear-gradient(135deg, #10b981 0%, #059669 100%); border: none; display: flex; align-items: center; justify-content: center; - color: #0B0C10; + color: #ffffff; cursor: pointer; - position: relative; + position: absolute; + top: -20px; + left: 50%; + transform: translateX(-50%); z-index: 5; - box-shadow: 0 0 20px rgba(0, 255, 153, 0.4); - transform: translateY(-8px); + box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .btn-nexus-ai-core:active { - transform: translateY(-6px) scale(0.95); - box-shadow: 0 0 10px rgba(0, 255, 153, 0.3); + transform: translateX(-50%) translateY(-18px) scale(0.95); + box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3); } .ai-core-icon { - color: #0b0c10; - filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2)); + color: #ffffff !important; +} + +.center-ai-container .tab-label { + margin-top: 32px; } /* Pulse effects */ @@ -114,7 +139,7 @@ right: -4px; bottom: -4px; border-radius: 50%; - border: 2px solid rgba(0, 255, 153, 0.4); + border: 2px solid rgba(16, 185, 129, 0.4); opacity: 0; animation: corePulse 2s cubic-bezier(0.24, 0, 0.38, 1) infinite; pointer-events: none; @@ -128,7 +153,7 @@ right: -8px; bottom: -8px; border-radius: 50%; - border: 1px solid rgba(0, 240, 255, 0.2); + border: 1px solid rgba(16, 185, 129, 0.2); opacity: 0; animation: corePulseOuter 2.5s cubic-bezier(0.24, 0, 0.38, 1) infinite; pointer-events: none; @@ -147,43 +172,6 @@ 100% { transform: scale(1.25); opacity: 0; } } -/* RIGHT SLOT: Layout Switching */ -.right-slot { - justify-content: flex-end; - gap: 0.35rem; -} - -.nav-toggle-btn { - background: none; - border: none; - display: flex; - flex-direction: column; - align-items: center; - gap: 2px; - padding: 6px 8px; - border-radius: 8px; - color: rgba(255, 255, 255, 0.45); - cursor: pointer; - transition: all 0.25s ease; -} - -.nav-toggle-btn.active { - color: var(--nexus-neon, #00FF99); - background-color: rgba(0, 255, 153, 0.06); -} - -.nav-toggle-btn ::deep .nexus-icon { - transition: transform 0.2s ease; -} - -.nav-toggle-btn.active ::deep .nexus-icon { - transform: scale(1.08); -} - -.nav-toggle-btn span { - font-size: 0.6rem; - font-weight: 500; -} /* SECTION CHECKPOINTS OVERLAY */ .checkpoints-overlay { @@ -360,3 +348,54 @@ .checkpoint-item:active .arrow-icon { transform: translateX(2px); } + +/* Light Mode overrides for Checkpoints Overlay */ +.theme-light .checkpoints-sheet { + background: rgba(244, 241, 234, 0.95); + border-top: 1px solid rgba(139, 130, 115, 0.15); + box-shadow: 0 -8px 30px rgba(139, 130, 115, 0.15); +} + +.theme-light .checkpoints-header { + border-bottom: 1px solid rgba(139, 130, 115, 0.1); +} + +.theme-light .checkpoints-header h4 { + color: #292524; +} + +.theme-light .close-checkpoints-btn { + color: #8b8273; +} + +.theme-light .checkpoint-item { + background-color: rgba(139, 130, 115, 0.03); + border: 1px solid rgba(139, 130, 115, 0.06); +} + +.theme-light .checkpoint-item.active { + background-color: rgba(16, 185, 129, 0.08); + border-color: rgba(16, 185, 129, 0.25); +} + +.theme-light .checkpoint-item.active .checkpoint-id { + color: #10b981; +} + +.theme-light .checkpoint-item.active .indicator-dot { + background-color: #10b981; + box-shadow: 0 0 8px rgba(16, 185, 129, 0.6); +} + +.theme-light .checkpoint-id { + color: #292524; +} + +.theme-light .checkpoint-label { + color: #8b8273; +} + +.theme-light .arrow-icon { + color: #8b8273; +} + diff --git a/src/NexusReader.UI.Shared/Components/Organisms/ReaderCanvas.razor.css b/src/NexusReader.UI.Shared/Components/Organisms/ReaderCanvas.razor.css index 6b00afe..1916fb3 100644 --- a/src/NexusReader.UI.Shared/Components/Organisms/ReaderCanvas.razor.css +++ b/src/NexusReader.UI.Shared/Components/Organisms/ReaderCanvas.razor.css @@ -340,7 +340,7 @@ @media (max-width: 768px) { .reader-canvas { padding-top: 54px !important; - padding-bottom: 80px !important; + padding-bottom: 120px !important; /* Ensure content is clear of bottom toolbar */ } @@ -350,6 +350,22 @@ } } +@media (max-width: 767px) { + ::deep .nexus-ebook, + ::deep .nexus-ebook p { + font-size: 16px !important; + line-height: 1.55 !important; + } + + ::deep .nexus-ebook h1 { + font-size: 1.35rem !important; + line-height: 1.4 !important; + margin-top: 1.5rem !important; + margin-bottom: 1rem !important; + } +} + + .nexus-mobile-reader-header { position: fixed; top: 0;