feat: Refactor dashboard screens to Modern Deep Dark style (#74)

Refactored Pulpit, Katalog, Moje, Konto screens to a unified, premium Modern Deep Dark style.

Resolves #73.

---------

Co-authored-by: Marek Jasiński <jasins.marek@gmail.com>
Reviewed-on: #74
Co-authored-by: Antigravity <antigravity@google.com>
Co-committed-by: Antigravity <antigravity@google.com>
This commit was merged in pull request #74.
This commit is contained in:
2026-06-06 07:58:59 +00:00
committed by Marek Jaisński
parent f6819d50b7
commit bcd5daa3a0
13 changed files with 959 additions and 272 deletions
@@ -57,10 +57,10 @@
</div>
<div class="empty-text">
<h3>Brak aktywnych lektur</h3>
<p>Przejdź do biblioteki, aby rozpocząć przygodę z Nexus Reader.</p>
<p>Przejdź do katalogu lub swoich książek, aby rozpocząć przygodę z Nexus Reader.</p>
</div>
<button class="btn-nexus primary" @onclick='() => NavigationManager.NavigateTo("/library")'>
Przejdź do Biblioteki
<button class="btn-nexus primary" @onclick='() => NavigationManager.NavigateTo("/my-books")'>
Przejdź do Moich Książek
</button>
</div>
}
@@ -2,6 +2,17 @@
width: 100%;
padding: 2rem;
overflow: hidden;
background: #1a1a1e;
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 12px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.current-reading-card:hover {
background: #1e1e24;
border-color: rgba(16, 185, 129, 0.2);
transform: translateY(-4px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.card-layout {
@@ -55,7 +66,7 @@
.author-name {
font-size: 0.9rem;
color: #A0A0A0;
color: #a1a1aa;
font-weight: 500;
}
@@ -80,7 +91,7 @@
}
.percentage {
color: var(--nexus-neon);
color: #10b981;
}
.progress-bar-container {
@@ -92,8 +103,8 @@
.progress-bar-fill {
height: 100%;
background: var(--nexus-neon);
box-shadow: 0 0 10px rgba(0, 255, 153, 0.4);
background: #10b981;
box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
border-radius: 100px;
transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}
@@ -101,7 +112,7 @@
.book-excerpt {
font-size: 0.95rem;
line-height: 1.6;
color: #B0B0B0;
color: #a1a1aa;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
@@ -134,26 +145,26 @@
.btn-nexus.outline {
background: transparent;
color: var(--nexus-neon);
border: 1px solid rgba(0, 255, 153, 0.3);
color: #10b981;
border: 1px solid rgba(16, 185, 129, 0.3);
}
.btn-nexus.outline:hover {
background: rgba(0, 255, 153, 0.05);
border-color: var(--nexus-neon);
background: rgba(16, 185, 129, 0.05);
border-color: #10b981;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 255, 153, 0.1);
box-shadow: 0 5px 15px rgba(16, 185, 129, 0.1);
}
.btn-nexus.primary {
background: var(--nexus-neon);
background: #10b981;
color: #000;
}
.btn-nexus.primary:hover {
transform: translateY(-2px);
filter: brightness(1.1);
box-shadow: 0 5px 15px rgba(0, 255, 153, 0.2);
box-shadow: 0 5px 15px rgba(16, 185, 129, 0.2);
}
/* Empty State */
@@ -168,9 +179,9 @@
}
.empty-icon {
color: var(--nexus-neon);
color: #10b981;
opacity: 0.3;
filter: drop-shadow(0 0 10px rgba(0, 255, 153, 0.2));
filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.2));
}
.empty-text h3 {