diff --git a/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor b/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor index c794857..c0a903b 100644 --- a/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor +++ b/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor @@ -7,12 +7,12 @@ {
- @Book.Title + @Book.Title
-

@Book.Title

+

@Book.Title

by @Book.Author.Name
@@ -41,8 +41,8 @@ }
-
diff --git a/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor.css b/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor.css index bb2c941..f2ddade 100644 --- a/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor.css +++ b/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor.css @@ -194,23 +194,102 @@ margin: 0; } -@media (max-width: 768px) { +@media (max-width: 767px) { + .current-reading-card { + background: #1e1e22; /* Lighter anthracite slate for depth */ + box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); /* Ambient card shadow */ + padding: 14px; + border-radius: 16px; + border: 1px solid var(--border); + } + .card-layout { flex-direction: column; - align-items: center; - text-align: center; - gap: 1.5rem; + align-items: stretch; + text-align: left; + gap: 0.75rem; } - .book-title, .chapter-name { + .book-cover { + align-self: center; + width: 90px; + } + + .book-details { + width: 100%; + text-align: left; + } + + .book-title { + font-size: 1.25rem; + text-align: left; white-space: normal; } + + .author-name { + text-align: left; + font-size: 0.8rem; + } .header-info, .chapter-progress { - align-items: center; + align-items: stretch; + } + + .chapter-name { + white-space: normal; + font-size: 0.8rem; + } + + .chapter-progress { + margin: 0.5rem 0; /* Margin separator before tracking bar */ + width: 100%; + } + + .progress-bar-container { + width: 100%; + } + + .book-excerpt { + display: -webkit-box; /* Normal display to wrap synopsis */ + overflow: hidden; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + margin-bottom: 0.75rem; + text-align: left; + font-size: 0.85rem; + } + + .actions { + width: 100%; + margin-top: 0.25rem; + } + + .actions .btn-nexus.outline { + width: 100%; + justify-content: center; + padding: 0.75rem 1.25rem; /* Larger touch target */ + box-sizing: border-box; + background: transparent !important; + color: var(--accent) !important; + border: 1px solid var(--accent) !important; + display: inline-flex !important; + align-items: center !important; + font-weight: 600 !important; + } + + .actions .btn-nexus.outline:hover { + background: var(--accent-glow) !important; + color: var(--accent) !important; + } + + .theme-light .current-reading-card { + background: #ffffff; /* Pure white card surface for light theme */ + box-shadow: 0 12px 24px rgba(139, 130, 115, 0.12); } } + + /* ============================================================ LIGHT THEME OVERRIDES — "Warm Paper / Soft Sepia" ============================================================ */ diff --git a/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor b/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor index 62239f2..5c84fec 100644 --- a/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor +++ b/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor @@ -1,4 +1,5 @@ @inherits LayoutComponentBase +@implements IDisposable @using NexusReader.UI.Shared.Components.Molecules @using NexusReader.UI.Shared.Components.Atoms @using NexusReader.Application.Abstractions.Services @@ -12,7 +13,7 @@
} -
+
@@ -110,6 +111,32 @@
+ + + @@ -124,6 +151,7 @@ [Inject] private AuthenticationStateProvider AuthStateProvider { get; set; } = default!; [Inject] private IIdentityService IdentityService { get; set; } = default!; [Inject] private NavigationManager NavigationManager { get; set; } = default!; + [Inject] private IThemeService ThemeService { get; set; } = default!; private bool _isSyncing = false; private bool _isMobileMenuOpen = false; @@ -131,6 +159,8 @@ protected override async Task OnInitializedAsync() { + ThemeService.OnThemeChanged += HandleThemeChanged; + if (_isSyncing) return; var authState = await AuthStateProvider.GetAuthenticationStateAsync(); @@ -142,6 +172,11 @@ } } + private void HandleThemeChanged(ThemeMode mode) + { + InvokeAsync(StateHasChanged); + } + protected override void OnAfterRender(bool firstRender) { if (firstRender) @@ -167,4 +202,10 @@ await IdentityService.LogoutAsync(); NavigationManager.NavigateTo("/account/logout-form", true); } + + public void Dispose() + { + ThemeService.OnThemeChanged -= HandleThemeChanged; + GC.SuppressFinalize(this); + } } diff --git a/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor.css b/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor.css index fb859da..0e0c4a7 100644 --- a/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor.css +++ b/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor.css @@ -194,7 +194,11 @@ display: none; } -@media (max-width: 768px) { +.reader-mobile-dock { + display: none; +} + +@media (max-width: 767px) { .nexus-mobile-topbar { display: flex; align-items: center; @@ -262,7 +266,7 @@ width: 32px; height: 32px; background: linear-gradient(135deg, var(--nexus-neon) 0%, #0099ff 100%); - border: 1px solid rgba(255, 255, 255, 0.1); + border: 1px solid var(--border); border-radius: 50%; display: flex; align-items: center; @@ -388,7 +392,6 @@ /* User avatar mini: solid accent, white text, no neon glow */ .theme-light .user-avatar-mini { background: #10b981; - border: 1px solid rgba(0, 0, 0, 0.08); color: #ffffff; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15); } @@ -414,8 +417,144 @@ box-shadow: 10px 0 30px rgba(139, 130, 115, 0.2); } - /* Mobile topbar: warm paper border */ - .theme-light .nexus-mobile-topbar { - border-bottom-color: rgba(0, 0, 0, 0.08); + + /* Content padding for bottom navigation dock */ + .hub-content { + padding: 1.25rem 1.25rem calc(1.25rem + 96px + env(safe-area-inset-bottom, 0px)) !important; + } + + /* Reader Mobile Dock v3 */ + ::deep .reader-mobile-dock { + display: flex; + position: fixed; + bottom: calc(16px + env(safe-area-inset-bottom, 0px)); + left: 20px; + right: 20px; + height: 64px; + background: rgba(26, 26, 30, 0.75); /* Translucent dark mode */ + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 1px solid var(--border); /* Microscopic perimeter border */ + border-radius: 30px; /* Floating capsule rounded borders */ + z-index: 150; + padding: 0 16px; + justify-content: space-around; + align-items: center; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); + } + + ::deep .dock-item { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + flex: 1; + height: 100%; + color: var(--text-muted); + text-decoration: none; + transition: color 0.2s ease, filter 0.2s ease; + position: relative; + gap: 2px; + } + + ::deep .dock-item:hover, ::deep .dock-item.active { + color: var(--accent) !important; + filter: drop-shadow(0 0 4px var(--accent-glow)); /* Clean accent glow drop-shadow */ + } + + ::deep .dock-item ::deep svg, + ::deep .dock-item ::deep .nexus-icon, + ::deep .dock-item svg, + ::deep .dock-item .nexus-icon { + color: inherit !important; + fill: currentColor !important; + } + + ::deep .dock-text { + display: block !important; + font-size: 10px; + font-weight: 500; + margin-top: 2px; + white-space: nowrap; + color: inherit; + } + + /* Central action button style */ + ::deep .dock-item.central-action { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + flex: 1; + height: 100%; + gap: 2px; + margin-top: 0; + transform: none !important; + z-index: 160; + } + + ::deep .central-action-inner { + width: 36px; + height: 36px; + border-radius: 50%; + background: var(--accent); /* Solid green background */ + color: #ffffff !important; /* White robot icon */ + display: flex; + align-items: center; + justify-content: center; + border: none !important; + box-shadow: 0 4px 10px rgba(0, 255, 153, 0.3); + transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease; + } + + ::deep .central-action-inner ::deep svg, + ::deep .central-action-inner ::deep .nexus-icon, + ::deep .central-action-inner svg, + ::deep .central-action-inner .nexus-icon { + color: #ffffff !important; + fill: currentColor !important; + } + + ::deep .dock-item.central-action:hover .central-action-inner, + ::deep .dock-item.central-action.active .central-action-inner { + transform: scale(1.05); + box-shadow: 0 4px 14px rgba(0, 255, 153, 0.5); + } + + ::deep .central-action-glow { + display: none; /* Purged background glow */ + } + + /* Light Theme Overrides */ + .theme-light ::deep .reader-mobile-dock { + background: rgba(244, 241, 234, 0.9); /* Translucent light mode warm paper background */ + box-shadow: 0 8px 30px rgba(139, 130, 115, 0.15); + } + + .theme-light ::deep .dock-item { + color: var(--text-muted); + } + + .theme-light ::deep .dock-item:hover, .theme-light ::deep .dock-item.active { + color: var(--accent) !important; + filter: drop-shadow(0 0 3px var(--accent-glow)); + } + + .theme-light ::deep .central-action-inner { + background: var(--accent) !important; + color: #ffffff !important; + border: none !important; + box-shadow: 0 4px 10px rgba(16, 185, 129, 0.25) !important; + } + + .theme-light ::deep .dock-item.central-action:hover .central-action-inner, + .theme-light ::deep .dock-item.central-action.active .central-action-inner { + box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important; + transform: scale(1.05); + } + + .theme-light ::deep .central-action-glow { + display: none; } } diff --git a/src/NexusReader.UI.Shared/Pages/Catalog.razor.css b/src/NexusReader.UI.Shared/Pages/Catalog.razor.css index 1ae0296..9ac910d 100644 --- a/src/NexusReader.UI.Shared/Pages/Catalog.razor.css +++ b/src/NexusReader.UI.Shared/Pages/Catalog.razor.css @@ -388,3 +388,23 @@ color: var(--text-main); text-shadow: none; } + +@media (max-width: 767px) { + .catalog-page { + padding: 1.5rem 1rem calc(1.5rem + 72px + env(safe-area-inset-bottom, 0px)) !important; + } + + .catalog-header { + margin-bottom: 1.5rem; + } + + .catalog-header h1 { + font-size: 1.75rem; + } + + .catalog-grid, .loading-grid { + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 1.25rem; + } +} + diff --git a/src/NexusReader.UI.Shared/Pages/ConceptsDashboard.razor.css b/src/NexusReader.UI.Shared/Pages/ConceptsDashboard.razor.css index 0dbd5ed..51756c2 100644 --- a/src/NexusReader.UI.Shared/Pages/ConceptsDashboard.razor.css +++ b/src/NexusReader.UI.Shared/Pages/ConceptsDashboard.razor.css @@ -453,3 +453,17 @@ .theme-light .header-actions .btn-action:hover { box-shadow: 0 0 12px rgba(16, 185, 129, 0.1); } + +@media (max-width: 767px) { + .concepts-dashboard-container { + padding: 1rem 0.75rem calc(1.5rem + 72px + env(safe-area-inset-bottom, 0px)) !important; + gap: 1rem; + } + .dashboard-header { + padding: 1rem; + gap: 0.75rem; + } + .header-title h1 { + font-size: 1.25rem; + } +} diff --git a/src/NexusReader.UI.Shared/Pages/Dashboard.razor b/src/NexusReader.UI.Shared/Pages/Dashboard.razor index 76be0eb..a59db56 100644 --- a/src/NexusReader.UI.Shared/Pages/Dashboard.razor +++ b/src/NexusReader.UI.Shared/Pages/Dashboard.razor @@ -7,6 +7,8 @@ @inject IIdentityService IdentityService @inject NavigationManager NavigationManager @inject ISyncService SyncService +@inject IJSRuntime JS +@using Microsoft.JSInterop @attribute [Authorize] @implements IDisposable @@ -54,55 +56,86 @@

Integracja Wiedzy

- +
-
-
- - @if (_profile?.MappedConcepts != null && _profile.MappedConcepts.Any()) - { -
- @for (int i = 0; i < _profile.MappedConcepts.Count; i++) - { - var concept = _profile.MappedConcepts[i]; - var angle = i * (360.0 / _profile.MappedConcepts.Count); - var dist = 65; -
-
- } -
- } - else - { -
-
-
-
-
- } - -
- @(string.IsNullOrEmpty(_hoveredConceptLabel) ? "TU JESTEŚ" : _hoveredConceptLabel) -
-
- - @if (_hoveredConcept != null) + + @if (_showSimplifiedList) { -
- @_hoveredConcept.Type -

@_hoveredConcept.Content

+
+ @if (_profile?.MappedConcepts != null && _profile.MappedConcepts.Any()) + { +
+ @foreach (var concept in _profile.MappedConcepts) + { +
+ @concept.Type + @concept.Content +
+ } +
+ } + else + { +
+ +

Brak pojęć. Rozpocznij czytanie, aby AI wyodrębniło kluczowe koncepty.

+
+ }
} else { -
- Mapowanie AI -

Najedź na węzeł, aby zbadać pojęcie wydobyte przez Nexus AI.

+
+
+ + @if (_profile?.MappedConcepts != null && _profile.MappedConcepts.Any()) + { +
+ @for (int i = 0; i < _profile.MappedConcepts.Count; i++) + { + var concept = _profile.MappedConcepts[i]; + var angle = i * (360.0 / _profile.MappedConcepts.Count); + var dist = 65; +
+
+ } +
+ } + else + { +
+
+
+
+
+ } + +
+ @(string.IsNullOrEmpty(_hoveredConceptLabel) ? "TU JESTEŚ" : _hoveredConceptLabel) +
+ + @if (_hoveredConcept != null) + { +
+ @_hoveredConcept.Type +

@_hoveredConcept.Content

+
+ } + else + { +
+ Mapowanie AI +

Najedź na węzeł, aby zbadać pojęcie wydobyte przez Nexus AI.

+
+ } }
@@ -173,6 +206,32 @@ private UserProfileDto? _profile; private MappedConceptDto? _hoveredConcept; private string _hoveredConceptLabel = string.Empty; + private bool _showSimplifiedList = false; + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + try + { + var isMobile = await JS.InvokeAsync("eval", "window.innerWidth < 768"); + if (isMobile) + { + _showSimplifiedList = true; + StateHasChanged(); + } + } + catch + { + // Fallback for tests or prerendering + } + } + } + + private void ToggleGraphMode() + { + _showSimplifiedList = !_showSimplifiedList; + } protected override async Task OnInitializedAsync() { diff --git a/src/NexusReader.UI.Shared/Pages/Dashboard.razor.css b/src/NexusReader.UI.Shared/Pages/Dashboard.razor.css index 29e079a..e4c85b5 100644 --- a/src/NexusReader.UI.Shared/Pages/Dashboard.razor.css +++ b/src/NexusReader.UI.Shared/Pages/Dashboard.razor.css @@ -524,28 +524,29 @@ } /* Mobile Dashboard Overrides */ -@media (max-width: 768px) { +@media (max-width: 767px) { .dashboard-content { - padding: 1.25rem 0.75rem; + padding: 0.5rem 0.5rem calc(1.5rem + 64px) !important; } .profile-header { - padding: 1.5rem 1rem; - border-radius: 16px; + padding: 10px 12px; + background: var(--bg-surface); + border: 1px solid var(--border); + border-radius: 12px; + margin-bottom: 10px; } .profile-visual { - flex-direction: row; - flex-wrap: wrap; - justify-content: flex-start; + display: grid; + grid-template-columns: auto 1fr; align-items: center; - text-align: left; - gap: 1.25rem; + gap: 0.5rem; } .avatar-wrapper { - width: 70px; - height: 70px; + width: 40px; + height: 40px; margin: 0; } @@ -553,45 +554,91 @@ flex: 1; } - .user-name { - font-size: 1.5rem; - margin-bottom: 0.25rem; + .username { + font-size: 1.05rem; + font-weight: 600; + text-align: left; + margin: 0; + letter-spacing: 0px; } .user-role { - font-size: 0.85rem; + font-size: 0.8rem; } .status-pills { + grid-column: span 2; + display: flex; + flex-direction: row; + justify-content: space-between; width: 100%; - margin-top: 0.5rem; - justify-content: flex-start; - flex-wrap: wrap; - gap: 0.5rem; + gap: 0.25rem; + margin-top: 0.15rem; } .status-pill { - padding: 0.35rem 0.75rem; - font-size: 0.75rem; + flex: 1; + display: flex; + justify-content: center; + align-items: center; + padding: 0.25rem 0.4rem; + font-size: 0.65rem; + gap: 0.2rem; + white-space: nowrap; + border-radius: 6px; + } + + .section-title { + font-size: 1.25rem; + font-weight: 700; + letter-spacing: -0.5px; + margin-top: 4px; + margin-bottom: 8px; + color: var(--text-main); } .main-grid { grid-template-columns: 1fr !important; - gap: 1.25rem !important; + gap: 0.75rem !important; } .secondary-grid { + display: grid !important; grid-template-columns: 1fr !important; - gap: 1.25rem !important; + gap: 0.75rem !important; } /* Force all widgets to take 100% width and fit inside parent container nicely */ .glass-panel { width: 100% !important; - padding: 1.25rem !important; + padding: 12px !important; box-sizing: border-box; } + /* Compress Knowledge Graph and Concept stack heights to maximize visible fold space */ + .graph-placeholder { + height: 120px; + } + + .concepts-linear-stack { + height: 120px !important; + max-height: 120px !important; + overflow-y: auto !important; + padding-right: 4px; + } + + .concept-linear-item { + padding: 6px 8px !important; + font-size: 0.75rem !important; + gap: 0.5rem !important; + min-height: auto !important; /* Prevent touch target min-height expansion */ + } + + .concept-badge { + padding: 2px 6px !important; + font-size: 0.65rem !important; + } + /* Expand touch-targets to 48px min height for interactive elements */ .btn-nexus, .quiz-option, .satellite, .logout-btn, .nav-item, .quiz-item { min-height: 48px; @@ -725,5 +772,188 @@ color: var(--accent); } +/* --- Concepts Linear Stack for Mobile/Utility Switch --- */ +.concepts-linear-stack { + height: 180px; + display: flex; + flex-direction: column; + overflow-y: auto; + gap: 0.5rem; + padding-right: 0.5rem; +} + +.concept-linear-list { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.concept-linear-item { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.6rem 0.75rem; + background: rgba(255, 255, 255, 0.02); + border: 1px solid var(--border); + border-radius: 8px; + font-size: 0.85rem; + color: var(--text-main); + transition: all 0.2s ease; +} + +.concept-linear-item:hover { + background: rgba(255, 255, 255, 0.04); + border-color: rgba(0, 255, 153, 0.2); + transform: translateX(2px); +} + +.concept-badge { + padding: 2px 8px; + border-radius: 4px; + font-size: 0.7rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.5px; + white-space: nowrap; +} + +.concept-badge.rule { + background: rgba(255, 70, 70, 0.1); + color: #ff8b8b; + border: 1px solid rgba(255, 70, 70, 0.2); +} + +.concept-badge.definition { + background: rgba(255, 176, 58, 0.1); + color: #ffd18c; + border: 1px solid rgba(255, 176, 58, 0.2); +} + +.concept-badge.table { + background: rgba(217, 70, 239, 0.1); + color: #f5d0fe; + border: 1px solid rgba(217, 70, 239, 0.2); +} + +.concept-badge.section { + background: rgba(59, 130, 246, 0.1); + color: #93c5fd; + border: 1px solid rgba(59, 130, 246, 0.2); +} + +.concept-badge.bridge { + background: rgba(6, 182, 212, 0.1); + color: #67e8f9; + border: 1px solid rgba(6, 182, 212, 0.2); +} + +.concept-badge.concept { + background: rgba(0, 210, 196, 0.05); + color: #e0e0e0; + border: 1px solid rgba(0, 210, 196, 0.2); +} + +.concept-text { + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-weight: 500; +} + +.concepts-empty-list { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + color: var(--text-muted); + font-size: 0.85rem; + text-align: center; + gap: 0.5rem; +} + +.concepts-empty-list p { + margin: 0; +} + +.view-toggle-btn { + display: inline-flex; + align-items: center; + gap: 0.35rem; + background: rgba(255, 255, 255, 0.03); + border: 1px solid var(--border); + color: var(--text-muted); + padding: 0.35rem 0.75rem; + border-radius: 6px; + font-size: 0.75rem; + font-weight: 600; + cursor: pointer; + transition: all 0.2s ease; +} + +.view-toggle-btn:hover { + background: rgba(0, 255, 153, 0.08); + border-color: var(--accent); + color: var(--accent); +} + +/* --- Light Theme Overrides for Concepts Stack --- */ +.theme-light .concept-linear-item { + background: rgba(0, 0, 0, 0.02); + color: var(--text-main); +} + +.theme-light .concept-linear-item:hover { + background: rgba(0, 0, 0, 0.04); + border-color: rgba(16, 185, 129, 0.2); +} + +.theme-light .concept-badge.rule { + background: rgba(220, 38, 38, 0.05); + color: #991b1b; + border-color: rgba(220, 38, 38, 0.15); +} + +.theme-light .concept-badge.definition { + background: rgba(217, 119, 6, 0.05); + color: #92400e; + border-color: rgba(217, 119, 6, 0.15); +} + +.theme-light .concept-badge.table { + background: rgba(192, 132, 252, 0.05); + color: #6b21a8; + border-color: rgba(192, 132, 252, 0.15); +} + +.theme-light .concept-badge.section { + background: rgba(37, 99, 235, 0.05); + color: #1e3a8a; + border-color: rgba(37, 99, 235, 0.15); +} + +.theme-light .concept-badge.bridge { + background: rgba(8, 145, 178, 0.05); + color: #155e75; + border-color: rgba(8, 145, 178, 0.15); +} + +.theme-light .concept-badge.concept { + background: rgba(13, 148, 136, 0.03); + color: #115e59; + border-color: rgba(13, 148, 136, 0.1); +} + +.theme-light .view-toggle-btn { + background: rgba(0, 0, 0, 0.02); +} + +.theme-light .view-toggle-btn:hover { + background: rgba(16, 185, 129, 0.08); + border-color: var(--accent); + color: var(--accent); +} + diff --git a/src/NexusReader.UI.Shared/Pages/MyBooks.razor.css b/src/NexusReader.UI.Shared/Pages/MyBooks.razor.css index 4b089b4..62c8c96 100644 --- a/src/NexusReader.UI.Shared/Pages/MyBooks.razor.css +++ b/src/NexusReader.UI.Shared/Pages/MyBooks.razor.css @@ -407,3 +407,41 @@ .theme-light .progress-bar { background: #e4e1d9; } + +@media (max-width: 767px) { + .my-books-page { + padding: 1.5rem 1rem calc(1.5rem + 72px + env(safe-area-inset-bottom, 0px)) !important; + } + + .my-books-header { + margin-bottom: 1.5rem; + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + + .header-title-section h1 { + font-size: 1.75rem; + text-align: center; + } + + .header-title-section .subtitle { + text-align: center; + } + + .add-book-trigger { + width: 100%; + text-align: center; + padding: 0.9rem 1.5rem; + } + + .books-grid, .loading-grid { + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + gap: 1.25rem; + } + + .book-cover-container { + height: 200px !important; + } +} + diff --git a/src/NexusReader.UI.Shared/wwwroot/app.css b/src/NexusReader.UI.Shared/wwwroot/app.css index 81690bc..ebb1893 100644 --- a/src/NexusReader.UI.Shared/wwwroot/app.css +++ b/src/NexusReader.UI.Shared/wwwroot/app.css @@ -8,6 +8,7 @@ --text-muted: #a1a1aa; --accent: #00ff99; --accent-glow: rgba(0, 255, 153, 0.3); + --border: rgba(255, 255, 255, 0.05); /* Legacy mapping for backwards compatibility */ --nexus-neon: var(--accent); @@ -91,7 +92,7 @@ .glass-panel { background: rgba(20, 20, 20, 0.85); /* Darker fallback for readability */ - border: 1px solid rgba(255, 255, 255, 0.05); + border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 1.5rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); @@ -152,6 +153,7 @@ --text-muted: #a1a1aa; --accent: #00ff99; --accent-glow: rgba(0, 255, 153, 0.3); + --border: rgba(255, 255, 255, 0.05); /* Legacy mapping for backwards compatibility */ --nexus-bg: var(--bg-base); @@ -169,6 +171,7 @@ --text-muted: #78716c; --accent: #10b981; --accent-glow: rgba(16, 185, 129, 0.2); + --border: rgba(0, 0, 0, 0.08); /* Legacy mapping for backwards compatibility */ --nexus-bg: var(--bg-base);