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/Molecules/CalloutBox.razor.css
+122
View File
@@ -0,0 +1,122 @@
.nexus-callout-box {
padding: 1rem 1.25rem;
margin: 1.5rem 0 1.5rem 0;
border-radius: 0 8px 8px 0;
font-family: var(--nexus-font-sans, sans-serif);
font-size: 0.95rem;
line-height: 1.5;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
border: 1px solid transparent;
border-left-width: 4px;
}
/* Light / Dark default support via variables or custom colors */
.nexus-callout-box {
background-color: rgba(255, 255, 255, 0.02);
color: #e2e8f0;
}
/* Info style */
.nexus-callout-info {
border-left-color: var(--nexus-neon, #00ff99);
}
/* Warning style */
.nexus-callout-warning {
border-left-color: #eab308; /* warning yellow */
background-color: rgba(234, 179, 8, 0.03);
}
/* Success style */
.nexus-callout-success {
border-left-color: #10b981; /* success green */
background-color: rgba(16, 185, 129, 0.03);
}
/* Error style */
.nexus-callout-error {
border-left-color: #f43f5e; /* error red */
background-color: rgba(244, 63, 94, 0.03);
}
.nexus-callout-header {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
margin-bottom: 0.5rem;
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 0.05em;
}
.nexus-callout-info .nexus-callout-header {
color: var(--nexus-neon, #00ff99);
}
.nexus-callout-warning .nexus-callout-header {
color: #eab308;
}
.nexus-callout-success .nexus-callout-header {
color: #10b981;
}
.nexus-callout-error .nexus-callout-header {
color: #f43f5e;
}
.nexus-callout-icon {
flex-shrink: 0;
}
.nexus-callout-body {
opacity: 0.9;
}
/* Light theme support */
.theme-light .nexus-callout-box {
background-color: #fcfcfb;
border: 1px solid rgba(0, 0, 0, 0.03);
border-left-width: 4px;
color: #44403c;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.015);
}
.theme-light .nexus-callout-info {
border-left-color: #10b981;
background-color: rgba(16, 185, 129, 0.04);
}
.theme-light .nexus-callout-info .nexus-callout-header {
color: #059669;
}
.theme-light .nexus-callout-warning {
border-left-color: #d97706;
background-color: rgba(217, 119, 6, 0.04);
}
.theme-light .nexus-callout-warning .nexus-callout-header {
color: #d97706;
}
.theme-light .nexus-callout-success {
border-left-color: #10b981;
background-color: rgba(16, 185, 129, 0.04);
}
.theme-light .nexus-callout-success .nexus-callout-header {
color: #059669;
}
.theme-light .nexus-callout-error {
border-left-color: #e11d48;
background-color: rgba(225, 29, 72, 0.04);
}
.theme-light .nexus-callout-error .nexus-callout-header {
color: #e11d48;
}