mjasin/Nexus.Reader
1
0
Fork 0
Code Issues 9 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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:
Antigravity
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
Download Patch File Download Diff File Expand all files Collapse all files
src/NexusReader.UI.Shared/Pages/Account/Profile.razor.css
+34 -21
View File
@@ -2,8 +2,8 @@
position: relative;
width: 100%;
min-height: 100vh;
background-color: #0a0c10;
color: #e0e6ed;
background-color: #121214;
color: #e4e4e7;
overflow-x: hidden;
display: flex;
justify-content: center;
@@ -18,7 +18,7 @@
transform: translate(-50%, -50%);
width: 800px;
height: 800px;
background: radial-gradient(circle, rgba(0, 255, 153, 0.05) 0%, transparent 70%);
background: radial-gradient(circle, rgba(16, 185, 129, 0.03) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
@@ -63,17 +63,17 @@
.avatar-inner {
width: 120px;
height: 120px;
background: #151921;
border: 2px solid var(--nexus-neon);
background: #1a1a1e;
border: 2px solid #10b981;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 3.5rem;
font-weight: 800;
color: var(--nexus-neon);
color: #10b981;
z-index: 2;
box-shadow: 0 0 30px rgba(0, 255, 153, 0.2), inset 0 0 20px rgba(0, 255, 153, 0.1);
box-shadow: 0 0 30px rgba(16, 185, 129, 0.2), inset 0 0 20px rgba(16, 185, 129, 0.1);
position: relative;
}
@@ -81,7 +81,7 @@
position: absolute;
width: 140px;
height: 140px;
border: 1px solid rgba(0, 255, 153, 0.3);
border: 1px solid rgba(16, 185, 129, 0.3);
border-radius: 50%;
animation: pulse-ring 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@@ -104,7 +104,7 @@
.system-rank {
font-family: 'Inter', 'Courier New', Courier, monospace;
font-size: 0.9rem;
color: var(--nexus-neon);
color: #10b981;
text-transform: uppercase;
letter-spacing: 0.2em;
opacity: 0.8;
@@ -120,11 +120,17 @@
.glass-panel {
padding: 32px;
background: #1a1a1e;
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 12px;
transition: all 0.3s ease;
}
.glass-panel:hover {
border-color: rgba(0, 255, 153, 0.2);
border-color: rgba(16, 185, 129, 0.2);
transform: translateY(-4px);
background: #1e1e24;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.metric-card {
@@ -185,8 +191,8 @@
.progress-bar {
height: 100%;
background: var(--nexus-neon);
box-shadow: 0 0 15px rgba(0, 255, 153, 0.5);
background: #10b981;
box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
border-radius: 10px;
}
@@ -206,7 +212,7 @@
.score-value {
font-size: 2.5rem;
font-weight: 800;
color: var(--nexus-neon);
color: #10b981;
line-height: 1;
}
@@ -223,7 +229,8 @@
align-items: center;
gap: 8px;
padding: 10px 16px;
background: rgba(0, 255, 153, 0.05);
background: rgba(16, 185, 129, 0.05);
border: 1px solid rgba(16, 185, 129, 0.1);
border-radius: 12px;
font-size: 0.85rem;
color: #cbd5e0;
@@ -259,10 +266,16 @@
width: fit-content;
}
.plan-badge.pro {
background: rgba(0, 255, 153, 0.1);
color: var(--nexus-neon);
border: 1px solid rgba(0, 255, 153, 0.2);
.plan-badge.pro, .plan-badge.enterprise {
background: rgba(16, 185, 129, 0.15);
color: #10b981;
border: 1px solid rgba(16, 185, 129, 0.3);
}
.plan-badge.free {
background: rgba(255, 255, 255, 0.05);
color: #a1a1aa;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.tenant-tag {
@@ -318,11 +331,11 @@
.nexus-loader {
width: 60px;
height: 60px;
border: 4px solid rgba(0, 255, 153, 0.1);
border-top-color: var(--nexus-neon);
border: 4px solid rgba(16, 185, 129, 0.1);
border-top-color: #10b981;
border-radius: 50%;
animation: spin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
filter: drop-shadow(0 0 10px var(--nexus-neon));
filter: drop-shadow(0 0 10px #10b981);
}
@keyframes spin { to { transform: rotate(360deg); } }