feat: implement dashboard mobile responsiveness v3 overhaul #80
@@ -7,12 +7,12 @@
|
||||
{
|
||||
<div @key='"current-reading-book"' class="card-layout">
|
||||
<div class="book-cover">
|
||||
<img src="@(string.IsNullOrEmpty(Book.CoverUrl) ? "https://via.placeholder.com/120x180?text=No+Cover" : Book.CoverUrl)" alt="@Book.Title" />
|
||||
<img src="@(string.IsNullOrEmpty(Book.CoverUrl) ? "https://via.placeholder.com/120x180?text=No+Cover" : Book.CoverUrl)" alt="@Book.Title" aria-describedby="book-title-@Book.Id" />
|
||||
</div>
|
||||
|
||||
<div class="book-details">
|
||||
<div class="header-info">
|
||||
<h3 class="book-title">@Book.Title</h3>
|
||||
<h3 id="book-title-@Book.Id" class="book-title">@Book.Title</h3>
|
||||
<span class="author-name">by @Book.Author.Name</span>
|
||||
</div>
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
}
|
||||
|
||||
<div class="actions">
|
||||
<button class="btn-nexus outline" @onclick="HandleContinueReading">
|
||||
<button class="btn-nexus outline" @onclick="HandleContinueReading" aria-label="Kontynuuj czytanie">
|
||||
Kontynuuj czytanie
|
||||
<NexusIcon Name="arrow-right" Size="16" />
|
||||
</button>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -206,5 +206,6 @@
|
||||
public void Dispose()
|
||||
{
|
||||
ThemeService.OnThemeChanged -= HandleThemeChanged;
|
||||
GC.SuppressFinalize(this);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user