From 34c6f45a10286476ef3807cc9bd261586e47e91e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Jasi=C5=84ski?= Date: Sun, 7 Jun 2026 19:16:39 +0200 Subject: [PATCH 1/4] feat: implement high-fidelity dashboard mobile responsiveness v3 overhaul --- .../Organisms/CurrentReadingWidget.razor.css | 78 ++++++- .../Layout/MainHubLayout.razor | 26 +++ .../Layout/MainHubLayout.razor.css | 125 ++++++++++- .../Pages/Catalog.razor.css | 20 ++ .../Pages/Dashboard.razor | 143 +++++++++---- .../Pages/Dashboard.razor.css | 200 +++++++++++++++++- .../Pages/MyBooks.razor.css | 34 +++ src/NexusReader.UI.Shared/wwwroot/app.css | 3 + 8 files changed, 578 insertions(+), 51 deletions(-) diff --git a/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor.css b/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor.css index bb2c941..910e14b 100644 --- a/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor.css +++ b/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor.css @@ -194,23 +194,89 @@ 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: 20px; + border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.08); + } + .card-layout { flex-direction: column; - align-items: center; - text-align: center; - gap: 1.5rem; + align-items: stretch; + text-align: left; + gap: 1.25rem; } - .book-title, .chapter-name { + .book-cover { + align-self: center; + width: 120px; + } + + .book-details { + width: 100%; + text-align: left; + } + + .book-title { + font-size: 1.5rem; + text-align: left; white-space: normal; } + + .author-name { + text-align: left; + } .header-info, .chapter-progress { - align-items: center; + align-items: stretch; + } + + .chapter-name { + white-space: normal; + } + + .chapter-progress { + margin: 1.25rem 0; /* Margin separator before tracking bar */ + width: 100%; + } + + .progress-bar-container { + width: 100%; + } + + .book-excerpt { + display: block; /* Normal display to wrap synopsis */ + overflow: visible; + -webkit-line-clamp: none; + text-overflow: clip; + margin-bottom: 1.25rem; + text-align: left; + } + + .actions { + width: 100%; + margin-top: 0.5rem; + } + + .actions .btn-nexus { + width: 100%; + justify-content: center; + padding: 0.95rem 1.5rem; /* Larger touch target */ + box-sizing: border-box; + } + + .theme-light .current-reading-card { + background: #ffffff; /* Pure white card surface for light theme */ + border-color: rgba(45, 42, 38, 0.08); + 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..5b27574 100644 --- a/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor +++ b/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor @@ -110,6 +110,32 @@ + + + diff --git a/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor.css b/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor.css index fb859da..d7cd26a 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; @@ -418,4 +422,123 @@ .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 + 72px + env(safe-area-inset-bottom, 0px)) !important; + } + + /* Reader Mobile Dock v3 */ + .reader-mobile-dock { + display: flex; + position: fixed; + bottom: 0; + left: 0; + right: 0; + height: calc(64px + env(safe-area-inset-bottom, 0px)); + background: rgba(26, 26, 30, 0.75); /* Translucent dark mode */ + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border-top: 1px solid rgba(255, 255, 255, 0.08); /* Microscopic border */ + z-index: 150; + padding-bottom: env(safe-area-inset-bottom, 0px); + justify-content: space-around; + align-items: center; + box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3); + } + + .dock-item { + display: flex; + align-items: center; + justify-content: center; + flex: 1; + height: 100%; + color: var(--text-muted); + text-decoration: none; + transition: color 0.2s ease, transform 0.2s ease; + position: relative; + } + + .dock-item:hover, .dock-item.active { + color: var(--accent); + } + + .dock-text { + display: none !important; /* Eliminate visual noise */ + } + + /* Central action button style */ + .dock-item.central-action { + display: flex; + align-items: center; + justify-content: center; + position: relative; + flex: 0 0 58px; + width: 58px; + height: 58px; + margin-top: 0; + transform: translateY(-20px); /* Elevate layout */ + z-index: 160; + } + + .central-action-inner { + width: 58px; + height: 58px; + border-radius: 50%; + background: var(--accent); /* brand-green */ + color: #0a0a0a; + display: flex; + align-items: center; + justify-content: center; + border: 2px solid var(--accent); /* Crisp green edge */ + box-shadow: 0 8px 24px rgba(0, 255, 153, 0.2); /* Neon drop shadow */ + transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease; + } + + .dock-item.central-action:hover .central-action-inner, + .dock-item.central-action.active .central-action-inner { + transform: scale(1.08) translateY(-2px); + box-shadow: 0 12px 28px rgba(0, 255, 153, 0.4); + } + + .central-action-glow { + position: absolute; + inset: 4px; + border-radius: 50%; + background: var(--accent); + filter: blur(10px); + opacity: 0.3; + z-index: -1; + } + + /* Light Theme Overrides */ + .theme-light .reader-mobile-dock { + background: rgba(255, 255, 255, 0.85); /* Translucent light mode */ + border-top-color: rgba(45, 42, 38, 0.08); /* Light theme microscopic border */ + box-shadow: 0 -10px 30px rgba(139, 130, 115, 0.06); + } + + .theme-light .dock-item { + color: var(--text-muted); + } + + .theme-light .dock-item:hover, .theme-light .dock-item.active { + color: var(--accent); + } + + .theme-light .central-action-inner { + background: var(--accent); + color: #ffffff; + border: 2px solid var(--accent); + box-shadow: 0 8px 24px rgba(16, 185, 129, 0.2); + } + + .theme-light .dock-item.central-action:hover .central-action-inner, + .theme-light .dock-item.central-action.active .central-action-inner { + box-shadow: 0 12px 28px rgba(16, 185, 129, 0.4); + } + + .theme-light .central-action-glow { + background: var(--accent); + } } diff --git a/src/NexusReader.UI.Shared/Pages/Catalog.razor.css b/src/NexusReader.UI.Shared/Pages/Catalog.razor.css index 1ae0296..eda30ac 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; + } + + .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/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..cc5a907 100644 --- a/src/NexusReader.UI.Shared/Pages/Dashboard.razor.css +++ b/src/NexusReader.UI.Shared/Pages/Dashboard.razor.css @@ -524,14 +524,17 @@ } /* Mobile Dashboard Overrides */ -@media (max-width: 768px) { +@media (max-width: 767px) { .dashboard-content { padding: 1.25rem 0.75rem; } .profile-header { - padding: 1.5rem 1rem; + padding: 24px 16px; + background: var(--bg-surface); + border: 1px solid var(--border); border-radius: 16px; + margin-bottom: 24px; } .profile-visual { @@ -575,6 +578,14 @@ font-size: 0.75rem; } + .section-title { + font-size: 2rem; + font-weight: 700; + letter-spacing: -0.5px; + margin-bottom: 16px; + color: var(--text-main); + } + .main-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; @@ -725,5 +736,190 @@ 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 rgba(255, 255, 255, 0.05); + 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 rgba(255, 255, 255, 0.08); + 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); + border-color: rgba(0, 0, 0, 0.05); + 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); + border-color: rgba(0, 0, 0, 0.08); +} + +.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..84e02d5 100644 --- a/src/NexusReader.UI.Shared/Pages/MyBooks.razor.css +++ b/src/NexusReader.UI.Shared/Pages/MyBooks.razor.css @@ -407,3 +407,37 @@ .theme-light .progress-bar { background: #e4e1d9; } + +@media (max-width: 767px) { + .my-books-page { + padding: 1.5rem 1rem; + } + + .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; + } +} + diff --git a/src/NexusReader.UI.Shared/wwwroot/app.css b/src/NexusReader.UI.Shared/wwwroot/app.css index 81690bc..a2333a9 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); @@ -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); -- 2.52.0 From de6cee06ad78c903771204322a2acd2a75c9dc43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Jasi=C5=84ski?= Date: Sun, 7 Jun 2026 19:22:53 +0200 Subject: [PATCH 2/4] feat: re-engineer bottom dock to floating capsule and compress dashboard mobile layout --- .../Layout/MainHubLayout.razor.css | 63 +++++++++--------- .../Pages/Dashboard.razor.css | 66 ++++++++++++------- 2 files changed, 72 insertions(+), 57 deletions(-) diff --git a/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor.css b/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor.css index d7cd26a..91d9cb7 100644 --- a/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor.css +++ b/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor.css @@ -425,26 +425,27 @@ /* Content padding for bottom navigation dock */ .hub-content { - padding: 1.25rem 1.25rem calc(1.25rem + 72px + env(safe-area-inset-bottom, 0px)) !important; + padding: 1.25rem 1.25rem calc(1.25rem + 96px + env(safe-area-inset-bottom, 0px)) !important; } /* Reader Mobile Dock v3 */ .reader-mobile-dock { display: flex; position: fixed; - bottom: 0; - left: 0; - right: 0; - height: calc(64px + env(safe-area-inset-bottom, 0px)); + bottom: calc(16px + env(safe-area-inset-bottom, 0px)); + left: 20px; + right: 20px; + height: 60px; background: rgba(26, 26, 30, 0.75); /* Translucent dark mode */ backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); - border-top: 1px solid rgba(255, 255, 255, 0.08); /* Microscopic border */ + border: 1px solid rgba(255, 255, 255, 0.08); /* Microscopic perimeter border */ + border-radius: 30px; /* Floating capsule rounded borders */ z-index: 150; - padding-bottom: env(safe-area-inset-bottom, 0px); + padding: 0 16px; justify-content: space-around; align-items: center; - box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } .dock-item { @@ -455,12 +456,13 @@ height: 100%; color: var(--text-muted); text-decoration: none; - transition: color 0.2s ease, transform 0.2s ease; + transition: color 0.2s ease, filter 0.2s ease; position: relative; } .dock-item:hover, .dock-item.active { color: var(--accent); + filter: drop-shadow(0 0 4px var(--accent-glow)); /* Clean accent glow drop-shadow */ } .dock-text { @@ -473,49 +475,43 @@ align-items: center; justify-content: center; position: relative; - flex: 0 0 58px; - width: 58px; - height: 58px; + flex: 0 0 54px; + width: 54px; + height: 54px; margin-top: 0; transform: translateY(-20px); /* Elevate layout */ z-index: 160; } .central-action-inner { - width: 58px; - height: 58px; + width: 54px; + height: 54px; border-radius: 50%; - background: var(--accent); /* brand-green */ - color: #0a0a0a; + background: var(--bg-surface); /* Pure background instead of green bleed */ + color: var(--accent); /* brand-green robot icon */ display: flex; align-items: center; justify-content: center; - border: 2px solid var(--accent); /* Crisp green edge */ - box-shadow: 0 8px 24px rgba(0, 255, 153, 0.2); /* Neon drop shadow */ + border: 2px solid var(--accent); /* Crisp green edge container wrapper */ + box-shadow: 0 8px 24px var(--accent-glow); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease; } .dock-item.central-action:hover .central-action-inner, .dock-item.central-action.active .central-action-inner { transform: scale(1.08) translateY(-2px); - box-shadow: 0 12px 28px rgba(0, 255, 153, 0.4); + box-shadow: 0 12px 28px var(--accent-glow); } .central-action-glow { - position: absolute; - inset: 4px; - border-radius: 50%; - background: var(--accent); - filter: blur(10px); - opacity: 0.3; - z-index: -1; + display: none; /* Purged background glow */ } /* Light Theme Overrides */ .theme-light .reader-mobile-dock { background: rgba(255, 255, 255, 0.85); /* Translucent light mode */ - border-top-color: rgba(45, 42, 38, 0.08); /* Light theme microscopic border */ - box-shadow: 0 -10px 30px rgba(139, 130, 115, 0.06); + border: 1px solid rgba(45, 42, 38, 0.08); /* Light theme microscopic border */ + box-shadow: 0 8px 32px rgba(139, 130, 115, 0.1); } .theme-light .dock-item { @@ -524,21 +520,22 @@ .theme-light .dock-item:hover, .theme-light .dock-item.active { color: var(--accent); + filter: drop-shadow(0 0 3px var(--accent-glow)); } .theme-light .central-action-inner { - background: var(--accent); - color: #ffffff; + background: var(--bg-surface); + color: var(--accent); border: 2px solid var(--accent); - box-shadow: 0 8px 24px rgba(16, 185, 129, 0.2); + box-shadow: 0 8px 24px var(--accent-glow); } .theme-light .dock-item.central-action:hover .central-action-inner, .theme-light .dock-item.central-action.active .central-action-inner { - box-shadow: 0 12px 28px rgba(16, 185, 129, 0.4); + box-shadow: 0 12px 28px var(--accent-glow); } .theme-light .central-action-glow { - background: var(--accent); + display: none; } } diff --git a/src/NexusReader.UI.Shared/Pages/Dashboard.razor.css b/src/NexusReader.UI.Shared/Pages/Dashboard.razor.css index cc5a907..c6fdb0b 100644 --- a/src/NexusReader.UI.Shared/Pages/Dashboard.razor.css +++ b/src/NexusReader.UI.Shared/Pages/Dashboard.razor.css @@ -526,29 +526,27 @@ /* Mobile Dashboard Overrides */ @media (max-width: 767px) { .dashboard-content { - padding: 1.25rem 0.75rem; + padding: 1rem 0.5rem; } .profile-header { - padding: 24px 16px; + padding: 16px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 16px; - margin-bottom: 24px; + margin-bottom: 16px; } .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.75rem; } .avatar-wrapper { - width: 70px; - height: 70px; + width: 48px; + height: 48px; margin: 0; } @@ -556,9 +554,12 @@ flex: 1; } - .user-name { - font-size: 1.5rem; - margin-bottom: 0.25rem; + .username { + font-size: 1.15rem; + font-weight: 600; + text-align: left; + margin: 0; + letter-spacing: 0px; } .user-role { @@ -566,43 +567,60 @@ } .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.35rem; + margin-top: 0.25rem; } .status-pill { - padding: 0.35rem 0.75rem; - font-size: 0.75rem; + flex: 1; + display: flex; + justify-content: center; + align-items: center; + padding: 0.35rem 0.5rem; + font-size: 0.7rem; + gap: 0.25rem; + white-space: nowrap; } .section-title { - font-size: 2rem; + font-size: 1.5rem; font-weight: 700; letter-spacing: -0.5px; - margin-bottom: 16px; + margin-bottom: 12px; color: var(--text-main); } .main-grid { grid-template-columns: 1fr !important; - gap: 1.25rem !important; + gap: 1rem !important; } .secondary-grid { grid-template-columns: 1fr !important; - gap: 1.25rem !important; + gap: 1rem !important; } /* Force all widgets to take 100% width and fit inside parent container nicely */ .glass-panel { width: 100% !important; - padding: 1.25rem !important; + padding: 1rem !important; box-sizing: border-box; } + /* Compress Knowledge Graph and Concept stack heights to maximize visible fold space */ + .graph-placeholder { + height: 140px; + } + + .concepts-linear-stack { + height: 150px; + } + /* Expand touch-targets to 48px min height for interactive elements */ .btn-nexus, .quiz-option, .satellite, .logout-btn, .nav-item, .quiz-item { min-height: 48px; -- 2.52.0 From d3f5d02a6c93545eb88569fb27aca840bbce9a65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Jasi=C5=84ski?= Date: Mon, 8 Jun 2026 12:55:59 +0200 Subject: [PATCH 3/4] fix: resolve horizontal layout blowout in mobile dashboard list view --- .../Organisms/CurrentReadingWidget.razor | 4 +- .../Organisms/CurrentReadingWidget.razor.css | 42 ++++--- .../Layout/MainHubLayout.razor | 20 +++- .../Layout/MainHubLayout.razor.css | 105 +++++++++++------- .../Pages/Catalog.razor.css | 2 +- .../Pages/ConceptsDashboard.razor.css | 14 +++ .../Pages/Dashboard.razor.css | 60 ++++++---- .../Pages/MyBooks.razor.css | 6 +- 8 files changed, 171 insertions(+), 82 deletions(-) diff --git a/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor b/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor index c794857..4e0f000 100644 --- a/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor +++ b/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor @@ -7,7 +7,7 @@ {
- @Book.Title + @Book.Title
@@ -42,7 +42,7 @@
diff --git a/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor.css b/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor.css index 910e14b..59d336b 100644 --- a/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor.css +++ b/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor.css @@ -198,8 +198,8 @@ .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: 20px; - border-radius: 20px; + padding: 14px; + border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08); } @@ -207,12 +207,12 @@ flex-direction: column; align-items: stretch; text-align: left; - gap: 1.25rem; + gap: 0.75rem; } .book-cover { align-self: center; - width: 120px; + width: 90px; } .book-details { @@ -221,13 +221,14 @@ } .book-title { - font-size: 1.5rem; + font-size: 1.25rem; text-align: left; white-space: normal; } .author-name { text-align: left; + font-size: 0.8rem; } .header-info, .chapter-progress { @@ -236,10 +237,11 @@ .chapter-name { white-space: normal; + font-size: 0.8rem; } .chapter-progress { - margin: 1.25rem 0; /* Margin separator before tracking bar */ + margin: 0.5rem 0; /* Margin separator before tracking bar */ width: 100%; } @@ -248,24 +250,36 @@ } .book-excerpt { - display: block; /* Normal display to wrap synopsis */ - overflow: visible; - -webkit-line-clamp: none; - text-overflow: clip; - margin-bottom: 1.25rem; + 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.5rem; + margin-top: 0.25rem; } - .actions .btn-nexus { + .actions .btn-nexus.outline { width: 100%; justify-content: center; - padding: 0.95rem 1.5rem; /* Larger touch target */ + 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 { diff --git a/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor b/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor index 5b27574..5c526f1 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 @@
} -
+
@@ -122,10 +123,10 @@ Katalog -
- +
+ AI @@ -150,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; @@ -157,6 +159,8 @@ protected override async Task OnInitializedAsync() { + ThemeService.OnThemeChanged += HandleThemeChanged; + if (_isSyncing) return; var authState = await AuthStateProvider.GetAuthenticationStateAsync(); @@ -168,6 +172,11 @@ } } + private void HandleThemeChanged(ThemeMode mode) + { + InvokeAsync(StateHasChanged); + } + protected override void OnAfterRender(bool firstRender) { if (firstRender) @@ -193,4 +202,9 @@ await IdentityService.LogoutAsync(); NavigationManager.NavigateTo("/account/logout-form", true); } + + public void Dispose() + { + ThemeService.OnThemeChanged -= HandleThemeChanged; + } } diff --git a/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor.css b/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor.css index 91d9cb7..12207c8 100644 --- a/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor.css +++ b/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor.css @@ -429,13 +429,13 @@ } /* Reader Mobile Dock v3 */ - .reader-mobile-dock { + ::deep .reader-mobile-dock { display: flex; position: fixed; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: 20px; right: 20px; - height: 60px; + height: 64px; background: rgba(26, 26, 30, 0.75); /* Translucent dark mode */ backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); @@ -448,8 +448,9 @@ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } - .dock-item { + ::deep .dock-item { display: flex; + flex-direction: column; align-items: center; justify-content: center; flex: 1; @@ -458,84 +459,108 @@ text-decoration: none; transition: color 0.2s ease, filter 0.2s ease; position: relative; + gap: 2px; } - .dock-item:hover, .dock-item.active { - color: var(--accent); + ::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; + } - .dock-text { - display: none !important; /* Eliminate visual noise */ + ::deep .dock-text { + display: block !important; + font-size: 10px; + font-weight: 500; + margin-top: 2px; + white-space: nowrap; + color: inherit; } /* Central action button style */ - .dock-item.central-action { + ::deep .dock-item.central-action { display: flex; + flex-direction: column; align-items: center; justify-content: center; position: relative; - flex: 0 0 54px; - width: 54px; - height: 54px; + flex: 1; + height: 100%; + gap: 2px; margin-top: 0; - transform: translateY(-20px); /* Elevate layout */ + transform: none !important; z-index: 160; } - .central-action-inner { - width: 54px; - height: 54px; + ::deep .central-action-inner { + width: 36px; + height: 36px; border-radius: 50%; - background: var(--bg-surface); /* Pure background instead of green bleed */ - color: var(--accent); /* brand-green robot icon */ + background: var(--accent); /* Solid green background */ + color: #ffffff !important; /* White robot icon */ display: flex; align-items: center; justify-content: center; - border: 2px solid var(--accent); /* Crisp green edge container wrapper */ - box-shadow: 0 8px 24px var(--accent-glow); + 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; + } - .dock-item.central-action:hover .central-action-inner, - .dock-item.central-action.active .central-action-inner { - transform: scale(1.08) translateY(-2px); - box-shadow: 0 12px 28px var(--accent-glow); + ::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); } - .central-action-glow { + ::deep .central-action-glow { display: none; /* Purged background glow */ } /* Light Theme Overrides */ - .theme-light .reader-mobile-dock { - background: rgba(255, 255, 255, 0.85); /* Translucent light mode */ - border: 1px solid rgba(45, 42, 38, 0.08); /* Light theme microscopic border */ - box-shadow: 0 8px 32px rgba(139, 130, 115, 0.1); + .theme-light ::deep .reader-mobile-dock { + background: rgba(244, 241, 234, 0.9); /* Translucent light mode warm paper background */ + border: 1px solid rgba(139, 130, 115, 0.18); /* Light theme sepia border */ + box-shadow: 0 8px 30px rgba(139, 130, 115, 0.15); } - .theme-light .dock-item { + .theme-light ::deep .dock-item { color: var(--text-muted); } - .theme-light .dock-item:hover, .theme-light .dock-item.active { - color: var(--accent); + .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 .central-action-inner { - background: var(--bg-surface); - color: var(--accent); - border: 2px solid var(--accent); - box-shadow: 0 8px 24px 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 .dock-item.central-action:hover .central-action-inner, - .theme-light .dock-item.central-action.active .central-action-inner { - box-shadow: 0 12px 28px var(--accent-glow); + .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 .central-action-glow { + .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 eda30ac..9ac910d 100644 --- a/src/NexusReader.UI.Shared/Pages/Catalog.razor.css +++ b/src/NexusReader.UI.Shared/Pages/Catalog.razor.css @@ -391,7 +391,7 @@ @media (max-width: 767px) { .catalog-page { - padding: 1.5rem 1rem; + padding: 1.5rem 1rem calc(1.5rem + 72px + env(safe-area-inset-bottom, 0px)) !important; } .catalog-header { 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.css b/src/NexusReader.UI.Shared/Pages/Dashboard.razor.css index c6fdb0b..58edbe9 100644 --- a/src/NexusReader.UI.Shared/Pages/Dashboard.razor.css +++ b/src/NexusReader.UI.Shared/Pages/Dashboard.razor.css @@ -526,27 +526,27 @@ /* Mobile Dashboard Overrides */ @media (max-width: 767px) { .dashboard-content { - padding: 1rem 0.5rem; + padding: 0.5rem 0.5rem calc(1.5rem + 64px) !important; } .profile-header { - padding: 16px; + padding: 10px 12px; background: var(--bg-surface); border: 1px solid var(--border); - border-radius: 16px; - margin-bottom: 16px; + border-radius: 12px; + margin-bottom: 10px; } .profile-visual { display: grid; grid-template-columns: auto 1fr; align-items: center; - gap: 0.75rem; + gap: 0.5rem; } .avatar-wrapper { - width: 48px; - height: 48px; + width: 40px; + height: 40px; margin: 0; } @@ -555,7 +555,7 @@ } .username { - font-size: 1.15rem; + font-size: 1.05rem; font-weight: 600; text-align: left; margin: 0; @@ -563,7 +563,7 @@ } .user-role { - font-size: 0.85rem; + font-size: 0.8rem; } .status-pills { @@ -572,8 +572,8 @@ flex-direction: row; justify-content: space-between; width: 100%; - gap: 0.35rem; - margin-top: 0.25rem; + gap: 0.25rem; + margin-top: 0.15rem; } .status-pill { @@ -581,44 +581,62 @@ display: flex; justify-content: center; align-items: center; - padding: 0.35rem 0.5rem; - font-size: 0.7rem; - gap: 0.25rem; + padding: 0.25rem 0.4rem; + font-size: 0.65rem; + gap: 0.2rem; white-space: nowrap; + border-radius: 6px; } .section-title { - font-size: 1.5rem; + font-size: 1.25rem; font-weight: 700; letter-spacing: -0.5px; - margin-bottom: 12px; + margin-top: 4px; + margin-bottom: 8px; color: var(--text-main); } .main-grid { grid-template-columns: 1fr !important; - gap: 1rem !important; + gap: 0.75rem !important; } .secondary-grid { + display: grid !important; grid-template-columns: 1fr !important; - gap: 1rem !important; + gap: 0.75rem !important; } /* Force all widgets to take 100% width and fit inside parent container nicely */ .glass-panel { width: 100% !important; - padding: 1rem !important; + padding: 12px !important; box-sizing: border-box; } /* Compress Knowledge Graph and Concept stack heights to maximize visible fold space */ .graph-placeholder { - height: 140px; + height: 120px; } .concepts-linear-stack { - height: 150px; + 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 */ diff --git a/src/NexusReader.UI.Shared/Pages/MyBooks.razor.css b/src/NexusReader.UI.Shared/Pages/MyBooks.razor.css index 84e02d5..62c8c96 100644 --- a/src/NexusReader.UI.Shared/Pages/MyBooks.razor.css +++ b/src/NexusReader.UI.Shared/Pages/MyBooks.razor.css @@ -410,7 +410,7 @@ @media (max-width: 767px) { .my-books-page { - padding: 1.5rem 1rem; + padding: 1.5rem 1rem calc(1.5rem + 72px + env(safe-area-inset-bottom, 0px)) !important; } .my-books-header { @@ -439,5 +439,9 @@ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.25rem; } + + .book-cover-container { + height: 200px !important; + } } -- 2.52.0 From 82fcc9a71734f166e11dd0b39a615b81b0d3d61c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Jasi=C5=84ski?= Date: Mon, 8 Jun 2026 13:05:14 +0200 Subject: [PATCH 4/4] style: resolve PR #80 review comments, standardize border variables, improve a11y & disposal --- .../Components/Organisms/CurrentReadingWidget.razor | 6 +++--- .../Organisms/CurrentReadingWidget.razor.css | 3 +-- src/NexusReader.UI.Shared/Layout/MainHubLayout.razor | 1 + .../Layout/MainHubLayout.razor.css | 10 ++-------- src/NexusReader.UI.Shared/Pages/Dashboard.razor.css | 6 ++---- src/NexusReader.UI.Shared/wwwroot/app.css | 2 +- 6 files changed, 10 insertions(+), 18 deletions(-) diff --git a/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor b/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor index 4e0f000..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,7 +41,7 @@ }
- diff --git a/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor.css b/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor.css index 59d336b..f2ddade 100644 --- a/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor.css +++ b/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor.css @@ -200,7 +200,7 @@ box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); /* Ambient card shadow */ padding: 14px; border-radius: 16px; - border: 1px solid rgba(255, 255, 255, 0.08); + border: 1px solid var(--border); } .card-layout { @@ -284,7 +284,6 @@ .theme-light .current-reading-card { background: #ffffff; /* Pure white card surface for light theme */ - border-color: rgba(45, 42, 38, 0.08); box-shadow: 0 12px 24px rgba(139, 130, 115, 0.12); } } diff --git a/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor b/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor index 5c526f1..5c84fec 100644 --- a/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor +++ b/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor @@ -206,5 +206,6 @@ 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 12207c8..0e0c4a7 100644 --- a/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor.css +++ b/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor.css @@ -266,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; @@ -392,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); } @@ -418,10 +417,6 @@ 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 { @@ -439,7 +434,7 @@ background: rgba(26, 26, 30, 0.75); /* Translucent dark mode */ backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); - border: 1px solid rgba(255, 255, 255, 0.08); /* Microscopic perimeter border */ + border: 1px solid var(--border); /* Microscopic perimeter border */ border-radius: 30px; /* Floating capsule rounded borders */ z-index: 150; padding: 0 16px; @@ -534,7 +529,6 @@ /* Light Theme Overrides */ .theme-light ::deep .reader-mobile-dock { background: rgba(244, 241, 234, 0.9); /* Translucent light mode warm paper background */ - border: 1px solid rgba(139, 130, 115, 0.18); /* Light theme sepia border */ box-shadow: 0 8px 30px rgba(139, 130, 115, 0.15); } diff --git a/src/NexusReader.UI.Shared/Pages/Dashboard.razor.css b/src/NexusReader.UI.Shared/Pages/Dashboard.razor.css index 58edbe9..e4c85b5 100644 --- a/src/NexusReader.UI.Shared/Pages/Dashboard.razor.css +++ b/src/NexusReader.UI.Shared/Pages/Dashboard.razor.css @@ -794,7 +794,7 @@ gap: 0.75rem; padding: 0.6rem 0.75rem; background: rgba(255, 255, 255, 0.02); - border: 1px solid rgba(255, 255, 255, 0.05); + border: 1px solid var(--border); border-radius: 8px; font-size: 0.85rem; color: var(--text-main); @@ -882,7 +882,7 @@ align-items: center; gap: 0.35rem; background: rgba(255, 255, 255, 0.03); - border: 1px solid rgba(255, 255, 255, 0.08); + border: 1px solid var(--border); color: var(--text-muted); padding: 0.35rem 0.75rem; border-radius: 6px; @@ -901,7 +901,6 @@ /* --- Light Theme Overrides for Concepts Stack --- */ .theme-light .concept-linear-item { background: rgba(0, 0, 0, 0.02); - border-color: rgba(0, 0, 0, 0.05); color: var(--text-main); } @@ -948,7 +947,6 @@ .theme-light .view-toggle-btn { background: rgba(0, 0, 0, 0.02); - border-color: rgba(0, 0, 0, 0.08); } .theme-light .view-toggle-btn:hover { diff --git a/src/NexusReader.UI.Shared/wwwroot/app.css b/src/NexusReader.UI.Shared/wwwroot/app.css index a2333a9..ebb1893 100644 --- a/src/NexusReader.UI.Shared/wwwroot/app.css +++ b/src/NexusReader.UI.Shared/wwwroot/app.css @@ -92,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); -- 2.52.0