style: refine premium light mode theme overrides and layout styling
This commit is contained in:
@@ -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;
|
||||
@@ -35,7 +35,8 @@
|
||||
}
|
||||
|
||||
.reader-canvas.theme-light {
|
||||
background-color: #F9F9F9; /* Paper-white requirement */
|
||||
background-color: #f4f1ea;
|
||||
/* Warm light beige/gray background */
|
||||
}
|
||||
|
||||
.reader-flow-container {
|
||||
@@ -46,7 +47,8 @@
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
position: relative;
|
||||
padding: 3rem 4rem 15rem 4rem; /* Large padding-bottom for reachability, plus comfortable side margins */
|
||||
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;
|
||||
@@ -61,7 +63,7 @@
|
||||
.theme-light .reader-flow-container {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid rgba(0, 0, 0, 0.04);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 0 4px 20px rgba(139, 130, 115, 0.12);
|
||||
}
|
||||
|
||||
.block-wrapper {
|
||||
@@ -79,11 +81,13 @@
|
||||
font-size: 1.15rem;
|
||||
font-weight: 400;
|
||||
text-align: left !important;
|
||||
color: #e4e4e7; /* Off-white with light gray tint */
|
||||
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 */
|
||||
@@ -99,22 +103,25 @@
|
||||
}
|
||||
|
||||
.theme-light ::deep .nexus-ebook blockquote {
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
color: #333333;
|
||||
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;
|
||||
@@ -141,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;
|
||||
@@ -193,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 */
|
||||
@@ -286,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 */
|
||||
}
|
||||
}
|
||||
|
||||
@@ -378,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 {
|
||||
@@ -412,4 +463,4 @@
|
||||
|
||||
.theme-light .nexus-chapter-nav-btn:hover:not(:disabled) {
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user