Antigravity
f18663426b
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>
123 lines
2.6 KiB
CSS
123 lines
2.6 KiB
CSS
.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;
|
|
}
|
|
|