style: refactor light theme CSS overrides to use Blazor isolated scoping
This commit is contained in:
@@ -266,3 +266,49 @@
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
LIGHT THEME OVERRIDES — "Warm Paper / Soft Sepia"
|
||||
============================================================ */
|
||||
|
||||
.theme-light .ai-row .message-avatar {
|
||||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||
color: #ffffff;
|
||||
border: 1px solid rgba(16, 185, 129, 0.2);
|
||||
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
|
||||
}
|
||||
|
||||
.theme-light .user-row .message-avatar {
|
||||
box-shadow: 0 2px 8px rgba(139, 130, 115, 0.1);
|
||||
}
|
||||
|
||||
.theme-light .upsell-card {
|
||||
box-shadow: 0 8px 32px rgba(16, 185, 129, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.theme-light .btn-primary {
|
||||
background: var(--accent);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.theme-light .btn-primary:hover:not(:disabled) {
|
||||
background: #059669;
|
||||
color: #ffffff;
|
||||
opacity: 1;
|
||||
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
|
||||
}
|
||||
|
||||
.theme-light .btn-secondary {
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.theme-light .btn-secondary:hover {
|
||||
background: rgba(16, 185, 129, 0.05);
|
||||
}
|
||||
|
||||
.theme-light .paywall-teaser {
|
||||
-webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
|
||||
mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
|
||||
}
|
||||
|
||||
|
||||
@@ -233,3 +233,126 @@
|
||||
.lock-icon {
|
||||
color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
LIGHT THEME OVERRIDES — "Warm Paper / Soft Sepia"
|
||||
============================================================ */
|
||||
|
||||
.theme-light .concepts-map::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.theme-light .empty-map-state {
|
||||
background: rgba(0, 0, 0, 0.01);
|
||||
border-color: var(--border);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.theme-light .empty-map-state .dim-icon {
|
||||
color: var(--text-muted);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.theme-light .timeline-step:hover {
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.theme-light .timeline-step.unlocked:hover {
|
||||
border-color: rgba(16, 185, 129, 0.15);
|
||||
box-shadow: 0 4px 20px rgba(16, 185, 129, 0.05);
|
||||
}
|
||||
|
||||
.theme-light .timeline-step.selected {
|
||||
background: rgba(16, 185, 129, 0.04);
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 12px rgba(16, 185, 129, 0.15);
|
||||
}
|
||||
|
||||
.theme-light .node-circle {
|
||||
background: var(--bg-surface);
|
||||
}
|
||||
|
||||
.theme-light .unlocked .node-circle {
|
||||
background: var(--bg-surface);
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.theme-light .locked .node-circle {
|
||||
background: var(--bg-base);
|
||||
border-color: var(--border);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.theme-light .node-glow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.theme-light .track-active {
|
||||
background: var(--accent);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.theme-light .track-inactive {
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
.theme-light .node-content {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.theme-light .timeline-step.selected .node-content {
|
||||
background: var(--bg-surface);
|
||||
border-color: rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.theme-light .segment-tag {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.theme-light .unlocked .segment-tag {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.theme-light .badge-unlocked {
|
||||
background: rgba(16, 185, 129, 0.08);
|
||||
color: var(--accent);
|
||||
border-color: rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.theme-light .badge-locked {
|
||||
background: var(--bg-base);
|
||||
color: var(--text-muted);
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
.theme-light .node-title {
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.theme-light .timeline-step.unlocked:hover .node-title {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.theme-light .locked .node-title {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.theme-light .node-desc {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.theme-light .locked .node-desc {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.theme-light .check-icon {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.theme-light .lock-icon {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
|
||||
+77
@@ -251,3 +251,80 @@
|
||||
padding: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
LIGHT THEME OVERRIDES — "Warm Paper / Soft Sepia"
|
||||
============================================================ */
|
||||
|
||||
.theme-light .recommendations-panel {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.theme-light .recommendations-panel:hover {
|
||||
box-shadow: 0 8px 24px rgba(139, 130, 115, 0.12);
|
||||
}
|
||||
|
||||
.theme-light .header-left h4 {
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.theme-light .spinner-track {
|
||||
border: 3px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.theme-light .loading-label,
|
||||
.theme-light .empty-state {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.theme-light .recommendation-item {
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.theme-light .recommendation-item:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.theme-light .recommendation-item.premium {
|
||||
border-color: rgba(245, 158, 11, 0.2);
|
||||
}
|
||||
|
||||
.theme-light .recommendation-item.premium:hover {
|
||||
border-color: rgba(245, 158, 11, 0.4);
|
||||
background: rgba(245, 158, 11, 0.04);
|
||||
}
|
||||
|
||||
.theme-light .recommendation-item.owned {
|
||||
border-color: rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
.theme-light .recommendation-item.owned:hover {
|
||||
border-color: rgba(16, 185, 129, 0.25);
|
||||
}
|
||||
|
||||
.theme-light .rec-book-title {
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.theme-light .rec-chapter-title {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.theme-light .rec-action-btn {
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.theme-light .rec-action-btn:hover {
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
border-color: rgba(16, 185, 129, 0.3);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.theme-light .premium .rec-action-btn:hover {
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
border-color: rgba(245, 158, 11, 0.3);
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
@@ -210,3 +210,60 @@
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
LIGHT THEME OVERRIDES — "Warm Paper / Soft Sepia"
|
||||
============================================================ */
|
||||
|
||||
.theme-light .current-reading-card {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.theme-light .current-reading-card:hover {
|
||||
background: var(--bg-surface);
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 10px 30px rgba(139, 130, 115, 0.12);
|
||||
}
|
||||
|
||||
.theme-light .book-cover img {
|
||||
box-shadow: 0 15px 35px rgba(139, 130, 115, 0.18);
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.theme-light .book-title {
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.theme-light .author-name {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.theme-light .chapter-name {
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.theme-light .progress-bar-container {
|
||||
background: #e4e1d9;
|
||||
}
|
||||
|
||||
.theme-light .progress-bar-fill {
|
||||
box-shadow: 0 0 6px rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.theme-light .book-excerpt {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.theme-light .empty-text h3 {
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.theme-light .empty-text p {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.theme-light .empty-icon {
|
||||
color: var(--accent);
|
||||
filter: none;
|
||||
}
|
||||
|
||||
@@ -342,4 +342,80 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
LIGHT THEME OVERRIDES — "Warm Paper / Soft Sepia"
|
||||
Scoped via .theme-light on an ancestor element.
|
||||
============================================================ */
|
||||
|
||||
/* --- Desktop Sidebar: warm paper shadow --- */
|
||||
.theme-light ::deep .hub-sidebar {
|
||||
box-shadow: 4px 0 20px rgba(139, 130, 115, 0.08);
|
||||
}
|
||||
|
||||
/* --- Logo icon: remove neon glow --- */
|
||||
.theme-light ::deep .logo-icon {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
/* --- Nav item hover: ensure green text, warm hover bg --- */
|
||||
.theme-light ::deep .nav-item:hover {
|
||||
color: #10b981;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
/* --- Nav active indicator: reduced glow --- */
|
||||
.theme-light ::deep .nav-item.active::before {
|
||||
box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
/* --- Nexus loader: remove neon drop-shadow --- */
|
||||
.theme-light ::deep .nexus-loader {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
/* --- Mobile Styles --- */
|
||||
@media (max-width: 768px) {
|
||||
|
||||
/* Hamburger button: dark text on warm paper */
|
||||
.theme-light .hamburger-btn {
|
||||
color: #292524;
|
||||
}
|
||||
|
||||
.theme-light .hamburger-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
/* User avatar mini: solid accent, white text, no neon glow */
|
||||
.theme-light .user-avatar-mini {
|
||||
background: #10b981;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
color: #ffffff;
|
||||
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
|
||||
}
|
||||
|
||||
/* Pulsing logo: subtle accent pulse, no neon glow */
|
||||
.theme-light .pulsing-logo {
|
||||
animation: pulse-glow-light 2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes pulse-glow-light {
|
||||
0%, 100% {
|
||||
filter: none;
|
||||
opacity: 0.85;
|
||||
}
|
||||
50% {
|
||||
filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.2));
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile sidebar open state: warm shadow instead of dark */
|
||||
.theme-light .mobile-menu-open ::deep .hub-sidebar {
|
||||
box-shadow: 10px 0 30px rgba(139, 130, 115, 0.2);
|
||||
}
|
||||
|
||||
/* Mobile topbar: warm paper border */
|
||||
.theme-light .nexus-mobile-topbar {
|
||||
border-bottom-color: rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -400,3 +400,59 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Light Theme Overrides — Warm Paper / Soft Sepia
|
||||
============================================ */
|
||||
|
||||
/* Background radial — warmer, slightly stronger glow */
|
||||
.theme-light .background-radial {
|
||||
background: radial-gradient(circle, rgba(16, 185, 129, 0.04) 0%, transparent 70%);
|
||||
}
|
||||
|
||||
/* Avatar — keep green accent, reduce glow intensity */
|
||||
.theme-light .avatar-inner {
|
||||
box-shadow: 0 0 20px rgba(16, 185, 129, 0.12), inset 0 0 15px rgba(16, 185, 129, 0.05);
|
||||
}
|
||||
|
||||
/* Avatar glow ring — softer border */
|
||||
.theme-light .avatar-glow {
|
||||
border-color: rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
/* Glass panel hover — warm sepia shadow instead of pure black */
|
||||
.theme-light .glass-panel:hover {
|
||||
box-shadow: 0 10px 30px rgba(139, 130, 115, 0.12);
|
||||
}
|
||||
|
||||
/* Progress bar — reduce neon glow */
|
||||
.theme-light .progress-bar {
|
||||
box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
/* Decorative text — dark ink on light bg instead of light on dark */
|
||||
.theme-light .decoration {
|
||||
color: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
/* Tenant tag — warm stone gray */
|
||||
.theme-light .tenant-tag {
|
||||
color: #78716c;
|
||||
}
|
||||
|
||||
/* Loader — disable neon drop-shadow, softer border */
|
||||
.theme-light .nexus-loader {
|
||||
border-color: rgba(16, 185, 129, 0.15);
|
||||
border-top-color: #10b981;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
/* Theme option active — reduce glow in light mode */
|
||||
.theme-light .theme-option-btn.active {
|
||||
box-shadow: 0 0 10px rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
/* Progress bar track — light stone gray */
|
||||
.theme-light .usage-progress {
|
||||
background: #e4e1d9;
|
||||
}
|
||||
|
||||
@@ -357,3 +357,34 @@
|
||||
from { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
|
||||
to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
LIGHT THEME OVERRIDES — Warm Paper / Soft Sepia
|
||||
============================================ */
|
||||
|
||||
.theme-light .course-card:hover {
|
||||
box-shadow: 0 12px 30px rgba(139, 130, 115, 0.15);
|
||||
}
|
||||
|
||||
.theme-light .card-cover-container {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.theme-light .cover-overlay {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.theme-light .course-card:hover .start-action {
|
||||
color: #292524;
|
||||
}
|
||||
|
||||
.theme-light .dotnet-gradient,
|
||||
.theme-light .blazor-gradient,
|
||||
.theme-light .graph-gradient {
|
||||
background: #e4e1d9;
|
||||
}
|
||||
|
||||
.theme-light .cover-code-text {
|
||||
color: var(--text-main);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
@@ -402,3 +402,54 @@
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Light Theme Overrides — Warm Paper / Soft Sepia
|
||||
============================================ */
|
||||
|
||||
/* Dashboard header — warm sepia shadow instead of pure black */
|
||||
.theme-light .dashboard-header {
|
||||
box-shadow: 0 4px 30px rgba(139, 130, 115, 0.05);
|
||||
}
|
||||
|
||||
/* Neon pulse icon — disable glow filter entirely */
|
||||
.theme-light .neon-pulse {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
/* Override the neon pulse keyframe states in light mode */
|
||||
.theme-light .neon-pulse {
|
||||
animation-name: robot-pulse-light;
|
||||
}
|
||||
|
||||
@keyframes robot-pulse-light {
|
||||
0% { transform: scale(1); filter: none; }
|
||||
50% { transform: scale(1.08); filter: none; }
|
||||
100% { transform: scale(1); filter: none; }
|
||||
}
|
||||
|
||||
/* Scan line — reduce glow intensity */
|
||||
.theme-light .scan-line {
|
||||
box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Glowing brain empty state — subtle warm glow */
|
||||
.theme-light .empty-glowing-brain {
|
||||
box-shadow: 0 0 12px rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
/* Error icon — reduce drop-shadow intensity */
|
||||
.theme-light .error-icon {
|
||||
filter: drop-shadow(0 0 4px rgba(255, 74, 74, 0.2));
|
||||
}
|
||||
|
||||
/* Back button hover — warm glow instead of neon */
|
||||
.theme-light .header-back .btn-back:hover {
|
||||
box-shadow: 0 0 8px rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
/* Action button hover — warm glow */
|
||||
.theme-light .header-actions .btn-action:hover {
|
||||
box-shadow: 0 0 12px rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
@@ -639,4 +639,91 @@
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
LIGHT THEME OVERRIDES — "Warm Paper / Soft Sepia"
|
||||
============================================================ */
|
||||
|
||||
.theme-light .username::before,
|
||||
.theme-light .username::after {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.theme-light .avatar-glow {
|
||||
background: var(--accent);
|
||||
filter: blur(15px);
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.theme-light .progress-container {
|
||||
background: #e4e1d9;
|
||||
}
|
||||
|
||||
.theme-light .progress-bar {
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 8px rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.theme-light .progress-bubble {
|
||||
background: var(--accent);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.theme-light .graph-node {
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.theme-light .graph-node.central {
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 12px rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.theme-light .graph-node.satellite {
|
||||
background: rgba(16, 185, 129, 0.15);
|
||||
border: 1px solid var(--accent);
|
||||
}
|
||||
|
||||
.theme-light .graph-node.satellite:hover {
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 10px var(--accent);
|
||||
}
|
||||
|
||||
.theme-light .active-node-label {
|
||||
background: rgba(16, 185, 129, 0.06);
|
||||
border: 1px solid var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.theme-light .quiz-option.active {
|
||||
background: rgba(16, 185, 129, 0.06);
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.theme-light .btn-nexus.primary {
|
||||
background: var(--accent);
|
||||
color: #0d0d0d;
|
||||
}
|
||||
|
||||
.theme-light .btn-nexus.primary:hover {
|
||||
background: #059669;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.theme-light .empty-icon {
|
||||
color: var(--accent);
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.theme-light .badge-success {
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
color: var(--accent);
|
||||
border: 1px solid rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.theme-light .concept-type {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -262,3 +262,66 @@
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
LIGHT THEME OVERRIDES — "Warm Paper / Soft Sepia"
|
||||
============================================================ */
|
||||
|
||||
.theme-light .welcome-prompt {
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.theme-light .welcome-icon svg {
|
||||
stroke: var(--text-muted);
|
||||
}
|
||||
|
||||
.theme-light .welcome-icon svg circle {
|
||||
fill: var(--text-muted);
|
||||
}
|
||||
|
||||
.theme-light .welcome-icon svg path[stroke^="rgba(139"] {
|
||||
stroke: rgba(120, 113, 108, 0.4);
|
||||
}
|
||||
|
||||
.theme-light .welcome-icon svg path[stroke^="rgba(139"][stroke-dasharray] {
|
||||
stroke: rgba(120, 113, 108, 0.3);
|
||||
}
|
||||
|
||||
.theme-light .input-field-group {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: 0 10px 30px rgba(139, 130, 115, 0.08);
|
||||
}
|
||||
|
||||
.theme-light .input-field-group:focus-within {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 10px 35px rgba(16, 185, 129, 0.15);
|
||||
}
|
||||
|
||||
.theme-light .nexus-input {
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.theme-light .nexus-input::placeholder {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.theme-light .nexus-select {
|
||||
background-color: var(--bg-surface);
|
||||
border-color: var(--border);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.theme-light .nexus-select:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 8px var(--accent-glow);
|
||||
}
|
||||
|
||||
.theme-light .chat-thread-container::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.theme-light .chat-thread-container::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
|
||||
@@ -383,3 +383,27 @@
|
||||
from { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
|
||||
to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
LIGHT THEME OVERRIDES — Warm Paper / Soft Sepia
|
||||
============================================ */
|
||||
|
||||
.theme-light .book-card:hover {
|
||||
box-shadow: 0 12px 30px rgba(139, 130, 115, 0.15);
|
||||
}
|
||||
|
||||
.theme-light .book-cover-container {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.theme-light .cover-overlay {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.theme-light .book-card:hover .read-action {
|
||||
color: #292524;
|
||||
}
|
||||
|
||||
.theme-light .progress-bar {
|
||||
background: #e4e1d9;
|
||||
}
|
||||
|
||||
@@ -72,3 +72,40 @@
|
||||
from { opacity: 0; transform: translateY(15px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
LIGHT THEME OVERRIDES — "Warm Paper / Soft Sepia"
|
||||
============================================================ */
|
||||
|
||||
.theme-light .settings-page > h1 {
|
||||
background: none;
|
||||
-webkit-text-fill-color: initial;
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.theme-light .settings-page > p {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.theme-light .settings-section h2 {
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.theme-light .settings-section p {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.theme-light .diag-btn {
|
||||
background: rgba(16, 185, 129, 0.05);
|
||||
color: var(--accent);
|
||||
border: 1px solid rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.theme-light .diag-btn:hover {
|
||||
background: var(--accent);
|
||||
color: #ffffff;
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user