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

style(theme): complete warm sepia dashboard styles

Browse Source
This commit is contained in:
Marek Jaisński
2026-06-07 14:01:52 +02:00
parent 1eacf7ed93
commit f6277bacfe
8 changed files with 267 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/NexusReader.UI.Shared/Pages/Catalog.razor.css
+23 -22
View File
@@ -14,13 +14,13 @@
font-size: 2.5rem;
font-weight: 700;
margin: 0 0 0.5rem 0;
color: #ffffff;
color: var(--text-main);
letter-spacing: -0.5px;
}
.catalog-header .subtitle {
font-size: 1rem;
color: #a1a1aa;
color: var(--text-muted);
margin: 0;
}
@@ -38,27 +38,27 @@
height: 100%;
overflow: hidden;
border-radius: 12px;
background: #1a1a1e;
border: 1px solid rgba(255, 255, 255, 0.05);
background: var(--bg-surface);
border: 1px solid var(--border);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.course-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
border-color: rgba(16, 185, 129, 0.2);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
border-color: var(--accent);
}
.card-cover-container {
position: relative;
height: 200px;
background: rgba(0, 0, 0, 0.2);
background: rgba(0, 0, 0, 0.05);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
border-bottom: 1px solid var(--border);
}
.card-cover {
@@ -147,8 +147,9 @@
align-self: flex-start;
font-size: 0.7rem;
font-weight: 700;
color: #a1a1aa;
background: rgba(255, 255, 255, 0.05);
color: var(--text-muted);
background: var(--bg-base);
border: 1px solid var(--border);
padding: 0.2rem 0.5rem;
border-radius: 4px;
text-transform: uppercase;
@@ -175,21 +176,21 @@
font-size: 1.25rem;
font-weight: 600;
margin: 0 0 0.4rem 0;
color: #ffffff;
color: var(--text-main);
line-height: 1.3;
font-family: var(--nexus-font-sans, "Outfit", sans-serif);
}
.course-author {
font-size: 0.85rem;
color: #a1a1aa;
color: var(--text-muted);
margin: 0 0 1rem 0;
}
.course-desc {
font-size: 0.88rem;
line-height: 1.5;
color: #a1a1aa;
color: var(--text-muted);
margin: 0 0 1.5rem 0;
display: -webkit-box;
-webkit-line-clamp: 3;
@@ -204,8 +205,8 @@
justify-content: space-between;
align-items: center;
font-size: 0.8rem;
color: #a1a1aa;
border-top: 1px solid rgba(255, 255, 255, 0.05);
color: var(--text-muted);
border-top: 1px solid var(--border);
padding-top: 0.75rem;
}
@@ -256,14 +257,14 @@
border-radius: 12px;
overflow: hidden;
height: 440px;
background: #1a1a1e;
border: 1px solid rgba(255, 255, 255, 0.05);
background: var(--bg-surface);
border: 1px solid var(--border);
opacity: 0.6;
}
.skeleton-cover {
height: 200px;
background: linear-gradient(90deg, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.02) 75%);
background: linear-gradient(90deg, var(--bg-base) 25%, var(--border) 50%, var(--bg-base) 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@@ -276,7 +277,7 @@
}
.skeleton-line {
background: linear-gradient(90deg, rgba(255,255,255,0.02) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.02) 75%);
background: linear-gradient(90deg, var(--bg-base) 25%, var(--border) 50%, var(--bg-base) 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
border-radius: 4px;
@@ -314,9 +315,9 @@
gap: 1.25rem;
padding: 1.25rem 2.25rem;
border-radius: 40px;
background: rgba(13, 13, 15, 0.85);
background: var(--bg-surface);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.08);
border: 1px solid var(--border);
animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@@ -332,7 +333,7 @@
.loader-text {
font-weight: 500;
color: #ffffff;
color: var(--text-main);
font-size: 0.95rem;
}