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

style(ui): refactor reader layout grid, fix focus mode layout collapse, fix SVG rendering dots, reorganize intelligence toolbar (#69)

Browse Source 
Reorganized the reader toolbar and layout grid to improve visual consistency and layout robustness in Focus Mode. Fixed outline SVG rendering bugs that caused icons to show as solid dots.

Closes #70

---------

Co-authored-by: Marek Jasiński <jasins.marek@gmail.com>
Reviewed-on: #69
Co-authored-by: Antigravity <antigravity@google.com>
Co-committed-by: Antigravity <antigravity@google.com>
This commit was merged in pull request #69.
This commit is contained in:
Antigravity
2026-06-05 09:51:29 +00:00
committed by Marek Jaisński
parent 081c6f7940
commit f18663426b
24 changed files with 2022 additions and 571 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/NexusReader.UI.Shared/Components/Organisms/ReaderCanvas.razor.css
+116 -25
View File
@@ -6,7 +6,7 @@
padding: 2rem 0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
/* Dedicated Scrollbar Styling */
scrollbar-width: thin;
scrollbar-color: rgba(0, 255, 153, 0.2) transparent;
@@ -30,18 +30,40 @@
background-color: rgba(0, 255, 153, 0.5);
}
.reader-canvas.theme-dark {
background-color: #121214;
}
.reader-canvas.theme-light {
background-color: #F9F9F9; /* Paper-white requirement */
background-color: #f4f1ea;
/* Warm light beige/gray background */
}
.reader-flow-container {
max-width: 800px;
margin: 0 auto;
max-width: 680px;
margin: 2rem auto;
min-height: calc(100vh - 180px);
display: flex;
flex-direction: column;
gap: 1.5rem;
position: relative;
padding: 0 1.5rem 15rem 1.5rem; /* Large padding-bottom for reachability */
padding: 3rem 4rem 15rem 4rem;
/* Large padding-bottom for reachability, plus comfortable side margins */
border-radius: 12px;
box-sizing: border-box;
transition: background-color 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.theme-dark .reader-flow-container {
background-color: #1a1a1e;
border: 1px solid rgba(255, 255, 255, 0.03);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}
.theme-light .reader-flow-container {
background-color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.04);
box-shadow: 0 4px 20px rgba(139, 130, 115, 0.12);
}
.block-wrapper {
@@ -57,24 +79,49 @@
line-height: 1.65 !important;
letter-spacing: -0.01em !important;
font-size: 1.15rem;
font-weight: 300;
font-weight: 400;
text-align: left !important;
color: #e4e4e7;
/* Off-white with light gray tint */
}
.theme-light ::deep .nexus-ebook {
color: #1a1a1a;
color: #292524;
/* Warm charcoal for legibility */
}
/* Callout Box styling for legacy blockquote segments */
::deep .nexus-ebook blockquote {
background-color: rgba(255, 255, 255, 0.02);
border-left: 4px solid var(--nexus-neon);
padding: 1rem 1.25rem;
margin: 1.5rem 0 1.5rem 0;
border-radius: 0 8px 8px 0;
font-size: 1.05rem;
color: #e2e8f0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.theme-light ::deep .nexus-ebook blockquote {
background-color: rgba(245, 158, 11, 0.04);
border-left: 4px solid #f59e0b;
color: #44403c;
}
/* Technical Code Block Container */
::deep .nexus-ebook pre {
background-color: #2d2d2d; /* Dark theme for code for better contrast */
background-color: #2d2d2d;
/* Dark theme for code for better contrast */
color: #e0e0e0;
padding: 1.25rem;
border-radius: 8px;
margin: 2rem 0;
overflow-x: auto;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
border-left: 4px solid var(--nexus-neon); /* Nexus neon accent */
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
border-left: 4px solid var(--nexus-neon);
/* Nexus neon accent */
/* Dedicated Scrollbar for Code */
scrollbar-width: thin;
scrollbar-color: rgba(0, 255, 153, 0.3) transparent;
@@ -101,7 +148,8 @@
/* Inline Code Highlight */
::deep .nexus-ebook p code {
background-color: rgba(0, 0, 0, 0.05);
color: #d63384; /* Classic differentiator for inline code */
color: #d63384;
/* Classic differentiator for inline code */
padding: 0.2rem 0.4rem;
border-radius: 4px;
font-size: 0.9em;
@@ -153,9 +201,20 @@
}
@keyframes pulse-small {
0% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.8; }
100% { transform: scale(1); opacity: 1; }
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.1);
opacity: 0.8;
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* Chapter Loading Overlay and Spinners */
@@ -246,29 +305,48 @@
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes scaleIn {
from { transform: scale(0.9) translateY(10px); opacity: 0; }
to { transform: scale(1) translateY(0); opacity: 1; }
from {
transform: scale(0.9) translateY(10px);
opacity: 0;
}
to {
transform: scale(1) translateY(0);
opacity: 1;
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* MOBILE READER UI OVERRIDES */
@media (max-width: 768px) {
.reader-canvas {
padding-top: 54px !important;
padding-bottom: 80px !important; /* Ensure content is clear of bottom toolbar */
padding-bottom: 80px !important;
/* Ensure content is clear of bottom toolbar */
}
.reader-flow-container {
padding-bottom: 4rem; /* Safe breathing room */
padding-bottom: 4rem;
/* Safe breathing room */
}
}
@@ -338,7 +416,20 @@
}
.theme-light .nexus-mobile-chapter-title {
color: #1a1a1a;
color: #292524;
}
.theme-light .nexus-mobile-escape-btn {
color: #78716c;
}
.theme-light .nexus-mobile-escape-btn:hover {
color: #10b981;
background-color: rgba(16, 185, 129, 0.05);
}
.theme-light .nexus-mobile-escape-btn:active {
background-color: rgba(16, 185, 129, 0.08);
}
.nexus-chapter-nav-btn {
@@ -372,4 +463,4 @@
.theme-light .nexus-chapter-nav-btn:hover:not(:disabled) {
background: rgba(0, 0, 0, 0.06);
}
}