feat: Release v1.2.0 - Concepts Map, RAG Search & Core Consolidations #59
@@ -7,6 +7,18 @@
|
||||
<base href="/" />
|
||||
<link rel="stylesheet" href="_content/NexusReader.UI.Shared/app.css" />
|
||||
<link rel="icon" type="image/png" href="favicon.png" />
|
||||
<script>
|
||||
(function () {
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
const isLight = savedTheme === 'light' || (!savedTheme && !systemPrefersDark);
|
||||
if (isLight) {
|
||||
document.documentElement.classList.add('theme-light');
|
||||
} else {
|
||||
document.documentElement.classList.remove('theme-light');
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -73,6 +85,7 @@
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<script src="_content/NexusReader.UI.Shared/js/theme.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -543,3 +543,208 @@
|
||||
from { transform: translateY(20px); opacity: 0; }
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Light Mode Theme Overrides
|
||||
========================================================================== */
|
||||
|
||||
.theme-light .sheet-content {
|
||||
background: rgba(244, 241, 234, 0.95); /* Matches Premium Paper theme */
|
||||
border-top-color: rgba(16, 185, 129, 0.3);
|
||||
box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.theme-light .sheet-drag-handle {
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.theme-light .sheet-header {
|
||||
border-bottom-color: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.theme-light .header-info h3 {
|
||||
color: #2d2a26;
|
||||
}
|
||||
|
||||
.theme-light .header-info .subtitle {
|
||||
color: #7c766b;
|
||||
}
|
||||
|
||||
.theme-light .close-btn {
|
||||
color: #7c766b;
|
||||
}
|
||||
|
||||
.theme-light .close-btn:hover {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
color: #2d2a26;
|
||||
}
|
||||
|
||||
.theme-light .welcome-container h4 {
|
||||
color: #2d2a26;
|
||||
}
|
||||
|
||||
.theme-light .welcome-container p {
|
||||
color: #7c766b;
|
||||
}
|
||||
|
||||
.theme-light .ai-avatar-badge {
|
||||
background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(6, 182, 212, 0.08) 100%);
|
||||
border-color: rgba(16, 185, 129, 0.25);
|
||||
}
|
||||
|
||||
.theme-light .ai-avatar-badge ::deep i {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.theme-light .welcome-glow-icon {
|
||||
background: rgba(16, 185, 129, 0.05);
|
||||
border-color: rgba(16, 185, 129, 0.25);
|
||||
box-shadow: 0 0 20px rgba(16, 185, 129, 0.08);
|
||||
}
|
||||
|
||||
.theme-light .welcome-glow-icon ::deep i {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
/* Chat bubble styling overrides */
|
||||
.theme-light .ai-bubble {
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
border-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.theme-light .ai-bubble .sender-name {
|
||||
color: #7c766b;
|
||||
}
|
||||
|
||||
.theme-light .user-bubble {
|
||||
background-color: rgba(16, 185, 129, 0.06);
|
||||
border-color: rgba(16, 185, 129, 0.18);
|
||||
}
|
||||
|
||||
.theme-light .user-bubble .sender-name {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.theme-light .message-time {
|
||||
color: #8c867b;
|
||||
}
|
||||
|
||||
.theme-light .message-text {
|
||||
color: #2d2a26;
|
||||
}
|
||||
|
||||
.theme-light .message-text strong {
|
||||
color: #1a1917;
|
||||
}
|
||||
|
||||
/* Code block / Citation styling overrides */
|
||||
.theme-light .nexus-mobile-code-block {
|
||||
background-color: #faf8f5;
|
||||
border-left-color: #10b981;
|
||||
color: #2d2a26;
|
||||
}
|
||||
|
||||
.theme-light .nexus-mobile-inline-code {
|
||||
background-color: rgba(0, 0, 0, 0.04);
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.theme-light .nexus-mobile-citation {
|
||||
background-color: rgba(16, 185, 129, 0.08);
|
||||
border-color: rgba(16, 185, 129, 0.25);
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.theme-light .typing-indicator span {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.theme-light .loading-label {
|
||||
color: #7c766b;
|
||||
}
|
||||
|
||||
/* Footer / Input overrides */
|
||||
.theme-light .sheet-footer {
|
||||
background-color: rgba(234, 230, 221, 0.6);
|
||||
border-top-color: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.theme-light .scope-indicator {
|
||||
color: #7c766b;
|
||||
}
|
||||
|
||||
.theme-light .scope-indicator ::deep i {
|
||||
color: #8c867b;
|
||||
}
|
||||
|
||||
.theme-light .nexus-mobile-input {
|
||||
background-color: rgba(255, 255, 255, 0.85);
|
||||
border-color: rgba(0, 0, 0, 0.08);
|
||||
color: #2d2a26;
|
||||
}
|
||||
|
||||
.theme-light .nexus-mobile-input:focus {
|
||||
border-color: rgba(16, 185, 129, 0.4);
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 0 8px rgba(16, 185, 129, 0.15);
|
||||
}
|
||||
|
||||
.theme-light .send-btn.disabled {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
/* Citation modal overrides */
|
||||
.theme-light .citation-modal {
|
||||
background: #ffffff;
|
||||
border-color: rgba(0, 0, 0, 0.06);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.theme-light .citation-modal .modal-header {
|
||||
border-bottom-color: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.theme-light .citation-modal .book-title {
|
||||
color: #2d2a26;
|
||||
}
|
||||
|
||||
.theme-light .citation-modal .book-title ::deep i {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.theme-light .citation-modal .modal-body {
|
||||
color: #2d2a26;
|
||||
}
|
||||
|
||||
.theme-light .citation-modal .citation-author,
|
||||
.theme-light .citation-modal .citation-page {
|
||||
color: #7c766b;
|
||||
}
|
||||
|
||||
.theme-light .citation-modal .citation-author strong,
|
||||
.theme-light .citation-modal .citation-page strong {
|
||||
color: #2d2a26;
|
||||
}
|
||||
|
||||
.theme-light .citation-modal .citation-snippet {
|
||||
background: rgba(16, 185, 129, 0.04);
|
||||
border-left-color: #10b981;
|
||||
color: #2d2a26;
|
||||
}
|
||||
|
||||
.theme-light .citation-modal .modal-footer {
|
||||
border-top-color: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.theme-light .citation-modal .btn-nexus {
|
||||
background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(6, 182, 212, 0.08) 100%);
|
||||
border-color: rgba(16, 185, 129, 0.3);
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.theme-light .citation-modal .btn-nexus:hover {
|
||||
background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(6, 182, 212, 0.15) 100%);
|
||||
border-color: rgba(16, 185, 129, 0.5);
|
||||
box-shadow: 0 0 10px rgba(16, 185, 129, 0.15);
|
||||
}
|
||||
|
||||
@@ -3,56 +3,58 @@
|
||||
@using NexusReader.UI.Shared.Models
|
||||
@using NexusReader.Application.Utilities
|
||||
@namespace NexusReader.UI.Shared.Components.Organisms
|
||||
@implements IDisposable
|
||||
@inject IReaderInteractionService InteractionService
|
||||
@inject IReaderStateService StateService
|
||||
@inject IThemeService ThemeService
|
||||
|
||||
<div class="nexus-unified-mobile-toolbar">
|
||||
<!-- LEFT SLOT: Progress & Section Checkpoints -->
|
||||
<div class="toolbar-slot left-slot" @onclick="ToggleCheckpoints" title="Rozdziały i checkpoints">
|
||||
<div class="nexus-unified-mobile-toolbar @(ThemeService.IsLightMode ? "theme-light" : "theme-dark")">
|
||||
<!-- Tab 1: Progress (Postęp) -->
|
||||
<button class="nav-toggle-btn progress-btn" @onclick="ToggleCheckpoints" aria-label="Postęp" title="Rozdziały i checkpoints">
|
||||
<div class="progress-ring-wrapper">
|
||||
<svg class="progress-ring" width="38" height="38">
|
||||
<circle class="progress-ring-track" stroke="rgba(255,255,255,0.06)" stroke-width="2.5" fill="transparent" r="16" cx="19" cy="19" />
|
||||
<circle class="progress-ring-indicator" stroke="var(--nexus-neon, #00FF99)" stroke-width="2.5" fill="transparent" r="16" cx="19" cy="19"
|
||||
stroke-dasharray="100.53" stroke-dashoffset="@GetDashOffset()" />
|
||||
<svg class="progress-ring" width="28" height="28">
|
||||
<circle class="progress-ring-track" stroke="rgba(139, 130, 115, 0.15)" stroke-width="2" fill="transparent" r="12" cx="14" cy="14" />
|
||||
<circle class="progress-ring-indicator" stroke="#10b981" stroke-width="2" fill="transparent" r="12" cx="14" cy="14"
|
||||
stroke-dasharray="75.4" stroke-dashoffset="@GetDashOffset()" />
|
||||
</svg>
|
||||
<span class="progress-text">@ScrollPercentage%</span>
|
||||
</div>
|
||||
<div class="progress-info">
|
||||
<span class="slot-label">Postęp</span>
|
||||
<span class="slot-desc">Checkpoints</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CENTER SLOT: Global AI Assistant Glowing Trigger -->
|
||||
<div class="toolbar-slot center-slot">
|
||||
<button class="btn-nexus-ai-core" @onclick="HandleAssistantClick" aria-label="Asystent AI">
|
||||
<div class="pulse-ring"></div>
|
||||
<div class="pulse-ring-outer"></div>
|
||||
<NexusIcon Name="robot" Size="22" Class="ai-core-icon" />
|
||||
<span class="tab-label">Postęp</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT SLOT: Context View Toggles -->
|
||||
<div class="toolbar-slot right-slot">
|
||||
<!-- Tab 2: Text (Tekst) -->
|
||||
<button class="nav-toggle-btn @(ActiveTab == MobileReaderTab.Reader ? "active" : "")"
|
||||
@onclick="() => ChangeTab(MobileReaderTab.Reader)"
|
||||
aria-label="Tekst">
|
||||
<NexusIcon Name="book-open" Size="18" />
|
||||
<span>Tekst</span>
|
||||
<span class="tab-label">Tekst</span>
|
||||
</button>
|
||||
|
||||
<!-- Tab 3: Center AI Button (Asystent AI) -->
|
||||
<div class="nav-toggle-btn center-ai-container">
|
||||
<button class="btn-nexus-ai-core" @onclick="HandleAssistantClick" aria-label="Asystent AI">
|
||||
<div class="pulse-ring"></div>
|
||||
<div class="pulse-ring-outer"></div>
|
||||
<NexusIcon Name="robot" Size="20" Class="ai-core-icon" />
|
||||
</button>
|
||||
<span class="tab-label">AI</span>
|
||||
</div>
|
||||
|
||||
<!-- Tab 4: Graph (Graf) -->
|
||||
<button class="nav-toggle-btn @(ActiveTab == MobileReaderTab.Graph ? "active" : "")"
|
||||
@onclick="() => ChangeTab(MobileReaderTab.Graph)"
|
||||
aria-label="Graf">
|
||||
<NexusIcon Name="share-2" Size="18" />
|
||||
<span>Graf</span>
|
||||
<span class="tab-label">Graf</span>
|
||||
</button>
|
||||
|
||||
<!-- Tab 5: Map (Mapa) -->
|
||||
<button class="nav-toggle-btn @(ActiveTab == MobileReaderTab.Concepts ? "active" : "")"
|
||||
@onclick="() => ChangeTab(MobileReaderTab.Concepts)"
|
||||
aria-label="Mapa">
|
||||
<NexusIcon Name="map" Size="18" />
|
||||
<span>Mapa</span>
|
||||
<span class="tab-label">Mapa</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SECTION CHECKPOINTS OVERLAY -->
|
||||
@@ -107,11 +109,17 @@
|
||||
|
||||
private bool IsCheckpointsOpen { get; set; }
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
ThemeService.OnThemeChanged += HandleThemeChanged;
|
||||
}
|
||||
|
||||
private Task HandleThemeChanged() => InvokeAsync(StateHasChanged);
|
||||
|
||||
private double GetDashOffset()
|
||||
{
|
||||
// Circumference of r=16 is 2 * pi * 16 = 100.53
|
||||
double circumference = 100.53;
|
||||
// Circumference of r=12 is 2 * pi * 12 = 75.40
|
||||
double circumference = 75.40;
|
||||
double progress = Math.Clamp(ScrollPercentage, 0, 100);
|
||||
return circumference - (progress / 100.0) * circumference;
|
||||
}
|
||||
@@ -148,4 +156,9 @@
|
||||
await OnAssistantClick.InvokeAsync();
|
||||
}
|
||||
}
|
||||
|
||||
public void Dispose()
|
||||
{
|
||||
ThemeService.OnThemeChanged -= HandleThemeChanged;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,38 +4,75 @@
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
height: 64px;
|
||||
background: rgba(18, 18, 18, 0.75);
|
||||
backdrop-filter: blur(24px);
|
||||
-webkit-backdrop-filter: blur(24px);
|
||||
border: 1px solid rgba(0, 255, 153, 0.2);
|
||||
border-radius: 16px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 1rem;
|
||||
padding: 0 0.5rem;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
|
||||
box-sizing: border-box;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
overflow: visible; /* Critical to show elevated FAB */
|
||||
}
|
||||
|
||||
.toolbar-slot {
|
||||
/* Light Mode: Premium Paper Look */
|
||||
.nexus-unified-mobile-toolbar.theme-light {
|
||||
background: rgba(244, 241, 234, 0.9);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(139, 130, 115, 0.18);
|
||||
box-shadow: 0 8px 30px rgba(139, 130, 115, 0.15);
|
||||
}
|
||||
|
||||
/* Dark Mode: Translucent Slate */
|
||||
.nexus-unified-mobile-toolbar.theme-dark {
|
||||
background: rgba(18, 18, 18, 0.8);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.nav-toggle-btn {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #8b8273; /* Inactive items earthy gray */
|
||||
padding: 6px 0;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* LEFT SLOT: Progress circular ring */
|
||||
.left-slot {
|
||||
justify-content: flex-start;
|
||||
gap: 0.65rem;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
.nav-toggle-btn.active {
|
||||
color: #10b981; /* Active items vibrant green */
|
||||
}
|
||||
|
||||
.nav-toggle-btn ::deep .nexus-icon {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-toggle-btn.active ::deep .nexus-icon {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.tab-label {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
margin-top: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.progress-ring-wrapper {
|
||||
position: relative;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -45,65 +82,53 @@
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.progress-ring-indicator {
|
||||
transition: stroke-dashoffset 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
position: absolute;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.progress-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.slot-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.slot-desc {
|
||||
font-size: 0.6rem;
|
||||
color: rgba(255,255,255,0.4);
|
||||
font-weight: 700;
|
||||
color: #8b8273;
|
||||
}
|
||||
|
||||
/* CENTER SLOT: Glowing AI Core Button */
|
||||
.center-slot {
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
.nav-toggle-btn.active .progress-text {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
/* Center AI FAB container & button */
|
||||
.center-ai-container {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.btn-nexus-ai-core {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #00FF99 0%, #00F0FF 100%);
|
||||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #0B0C10;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 5;
|
||||
box-shadow: 0 0 20px rgba(0, 255, 153, 0.4);
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
|
||||
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
|
||||
.btn-nexus-ai-core:active {
|
||||
transform: translateY(-6px) scale(0.95);
|
||||
box-shadow: 0 0 10px rgba(0, 255, 153, 0.3);
|
||||
transform: translateX(-50%) translateY(-18px) scale(0.95);
|
||||
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
.ai-core-icon {
|
||||
color: #0b0c10;
|
||||
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.center-ai-container .tab-label {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
/* Pulse effects */
|
||||
@@ -114,7 +139,7 @@
|
||||
right: -4px;
|
||||
bottom: -4px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(0, 255, 153, 0.4);
|
||||
border: 2px solid rgba(16, 185, 129, 0.4);
|
||||
opacity: 0;
|
||||
animation: corePulse 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
|
||||
pointer-events: none;
|
||||
@@ -128,7 +153,7 @@
|
||||
right: -8px;
|
||||
bottom: -8px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(0, 240, 255, 0.2);
|
||||
border: 1px solid rgba(16, 185, 129, 0.2);
|
||||
opacity: 0;
|
||||
animation: corePulseOuter 2.5s cubic-bezier(0.24, 0, 0.38, 1) infinite;
|
||||
pointer-events: none;
|
||||
@@ -147,43 +172,6 @@
|
||||
100% { transform: scale(1.25); opacity: 0; }
|
||||
}
|
||||
|
||||
/* RIGHT SLOT: Layout Switching */
|
||||
.right-slot {
|
||||
justify-content: flex-end;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.nav-toggle-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
padding: 6px 8px;
|
||||
border-radius: 8px;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
cursor: pointer;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.nav-toggle-btn.active {
|
||||
color: var(--nexus-neon, #00FF99);
|
||||
background-color: rgba(0, 255, 153, 0.06);
|
||||
}
|
||||
|
||||
.nav-toggle-btn ::deep .nexus-icon {
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-toggle-btn.active ::deep .nexus-icon {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.nav-toggle-btn span {
|
||||
font-size: 0.6rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* SECTION CHECKPOINTS OVERLAY */
|
||||
.checkpoints-overlay {
|
||||
@@ -360,3 +348,54 @@
|
||||
.checkpoint-item:active .arrow-icon {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
/* Light Mode overrides for Checkpoints Overlay */
|
||||
.theme-light .checkpoints-sheet {
|
||||
background: rgba(244, 241, 234, 0.95);
|
||||
border-top: 1px solid rgba(139, 130, 115, 0.15);
|
||||
box-shadow: 0 -8px 30px rgba(139, 130, 115, 0.15);
|
||||
}
|
||||
|
||||
.theme-light .checkpoints-header {
|
||||
border-bottom: 1px solid rgba(139, 130, 115, 0.1);
|
||||
}
|
||||
|
||||
.theme-light .checkpoints-header h4 {
|
||||
color: #292524;
|
||||
}
|
||||
|
||||
.theme-light .close-checkpoints-btn {
|
||||
color: #8b8273;
|
||||
}
|
||||
|
||||
.theme-light .checkpoint-item {
|
||||
background-color: rgba(139, 130, 115, 0.03);
|
||||
border: 1px solid rgba(139, 130, 115, 0.06);
|
||||
}
|
||||
|
||||
.theme-light .checkpoint-item.active {
|
||||
background-color: rgba(16, 185, 129, 0.08);
|
||||
border-color: rgba(16, 185, 129, 0.25);
|
||||
}
|
||||
|
||||
.theme-light .checkpoint-item.active .checkpoint-id {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.theme-light .checkpoint-item.active .indicator-dot {
|
||||
background-color: #10b981;
|
||||
box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
|
||||
}
|
||||
|
||||
.theme-light .checkpoint-id {
|
||||
color: #292524;
|
||||
}
|
||||
|
||||
.theme-light .checkpoint-label {
|
||||
color: #8b8273;
|
||||
}
|
||||
|
||||
.theme-light .arrow-icon {
|
||||
color: #8b8273;
|
||||
}
|
||||
|
||||
|
||||
@@ -39,6 +39,29 @@
|
||||
<NexusIcon Name="chevron-right" Size="14" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button class="nexus-theme-toggle-btn" @onclick="ThemeService.ToggleTheme" aria-label="Przełącz motyw" title="Przełącz motyw">
|
||||
@if (ThemeService.IsLightMode)
|
||||
{
|
||||
<svg class="theme-toggle-icon sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="4"></circle>
|
||||
<path d="M12 2v2"></path>
|
||||
<path d="M12 20v2"></path>
|
||||
<path d="M4.93 4.93l1.41 1.41"></path>
|
||||
<path d="M17.66 17.66l1.41 1.41"></path>
|
||||
<path d="M2 12h2"></path>
|
||||
<path d="M20 12h2"></path>
|
||||
<path d="M6.34 17.66l-1.41 1.41"></path>
|
||||
<path d="M19.07 4.93l-1.41 1.41"></path>
|
||||
</svg>
|
||||
}
|
||||
else
|
||||
{
|
||||
<svg class="theme-toggle-icon moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
|
||||
</svg>
|
||||
}
|
||||
</button>
|
||||
</header>
|
||||
}
|
||||
|
||||
@@ -409,9 +432,17 @@
|
||||
{
|
||||
try
|
||||
{
|
||||
// Ensure the JS module is loaded and the component is fully rendered before invoking interop.
|
||||
if (!_isJsInitialized)
|
||||
{
|
||||
await InitViewportDetectionAsync();
|
||||
}
|
||||
var module = await EnsureViewportModuleAsync();
|
||||
if (module != null)
|
||||
{
|
||||
await module.InvokeVoidAsync("scrollToTop", ".reader-canvas");
|
||||
}
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
Logger.LogWarning(ex, "Failed to scroll reader canvas to top.");
|
||||
|
||||
@@ -340,7 +340,7 @@
|
||||
@media (max-width: 768px) {
|
||||
.reader-canvas {
|
||||
padding-top: 54px !important;
|
||||
padding-bottom: 80px !important;
|
||||
padding-bottom: 120px !important;
|
||||
/* Ensure content is clear of bottom toolbar */
|
||||
}
|
||||
|
||||
@@ -350,6 +350,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
::deep .nexus-ebook,
|
||||
::deep .nexus-ebook p {
|
||||
font-size: 16px !important;
|
||||
line-height: 1.55 !important;
|
||||
}
|
||||
|
||||
::deep .nexus-ebook h1 {
|
||||
font-size: 1.35rem !important;
|
||||
line-height: 1.4 !important;
|
||||
margin-top: 1.5rem !important;
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.nexus-mobile-reader-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -400,6 +416,7 @@
|
||||
gap: 0.25rem;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
margin-right: 40px; /* Space to prevent overlap with absolute theme toggle button */
|
||||
}
|
||||
|
||||
.nexus-mobile-chapter-title {
|
||||
@@ -464,3 +481,90 @@
|
||||
.theme-light .nexus-chapter-nav-btn:hover:not(:disabled) {
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
/* Minimalist Theme Toggle Button with Glassmorphism */
|
||||
.nexus-theme-toggle-btn {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
z-index: 1001;
|
||||
padding: 0;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.nexus-theme-toggle-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
transform: translateY(-50%) scale(1.05);
|
||||
}
|
||||
|
||||
.nexus-theme-toggle-btn:active {
|
||||
transform: translateY(-50%) scale(0.95);
|
||||
}
|
||||
|
||||
/* Theme specifics for Light Mode */
|
||||
.theme-light .nexus-theme-toggle-btn {
|
||||
border-color: rgba(0, 0, 0, 0.08);
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.theme-light .nexus-theme-toggle-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
border-color: rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
/* Icon Styling and Transition */
|
||||
.theme-toggle-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
/* In Dark Mode, the icon should be brand green (#10b981) */
|
||||
.theme-toggle-icon.moon {
|
||||
color: #10b981;
|
||||
filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.3));
|
||||
animation: morphMoon 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
||||
}
|
||||
|
||||
/* In Light Mode, the icon should be a dark earthy gray (#2d2a26) */
|
||||
.theme-toggle-icon.sun {
|
||||
color: #2d2a26;
|
||||
animation: morphSun 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
||||
}
|
||||
|
||||
@keyframes morphMoon {
|
||||
0% {
|
||||
transform: rotate(-45deg) scale(0.7);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes morphSun {
|
||||
0% {
|
||||
transform: rotate(45deg) scale(0.7);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -458,6 +458,8 @@
|
||||
{
|
||||
if (firstRender)
|
||||
{
|
||||
await ThemeService.InitializeAsync();
|
||||
|
||||
try
|
||||
{
|
||||
var module = await JS.InvokeAsync<IJSObjectReference>("import", "./_content/NexusReader.UI.Shared/js/layoutResizer.js");
|
||||
|
||||
@@ -4,5 +4,6 @@ public interface IThemeService
|
||||
{
|
||||
bool IsLightMode { get; }
|
||||
event Func<Task>? OnThemeChanged;
|
||||
Task InitializeAsync();
|
||||
Task ToggleTheme();
|
||||
}
|
||||
|
||||
@@ -1,13 +1,42 @@
|
||||
using Microsoft.JSInterop;
|
||||
|
||||
namespace NexusReader.UI.Shared.Services;
|
||||
|
||||
public sealed class ThemeService : IThemeService
|
||||
{
|
||||
private readonly IJSRuntime _jsRuntime;
|
||||
public bool IsLightMode { get; private set; } = false;
|
||||
public event Func<Task>? OnThemeChanged;
|
||||
|
||||
public ThemeService(IJSRuntime jsRuntime)
|
||||
{
|
||||
_jsRuntime = jsRuntime;
|
||||
}
|
||||
|
||||
public async Task InitializeAsync()
|
||||
{
|
||||
try
|
||||
{
|
||||
IsLightMode = await _jsRuntime.InvokeAsync<bool>("themeInterop.isLightMode");
|
||||
if (OnThemeChanged != null) await OnThemeChanged();
|
||||
}
|
||||
catch
|
||||
{
|
||||
// Fail silently during prerendering or if JS is not available yet
|
||||
}
|
||||
}
|
||||
|
||||
public async Task ToggleTheme()
|
||||
{
|
||||
IsLightMode = !IsLightMode;
|
||||
try
|
||||
{
|
||||
await _jsRuntime.InvokeVoidAsync("themeInterop.setLightMode", IsLightMode);
|
||||
}
|
||||
catch
|
||||
{
|
||||
// Fail silently
|
||||
}
|
||||
if (OnThemeChanged != null) await OnThemeChanged();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -283,6 +283,10 @@ body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body, .reader-canvas, .reader-flow-container, .nexus-mobile-reader-header, .nexus-mobile-chapter-title, .nexus-mobile-escape-btn {
|
||||
transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
|
||||
}
|
||||
|
||||
/* Modern Scrollbars */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
window.themeInterop = {
|
||||
isLightMode: function () {
|
||||
return document.documentElement.classList.contains('theme-light');
|
||||
},
|
||||
setLightMode: function (isLight) {
|
||||
if (isLight) {
|
||||
document.documentElement.classList.add('theme-light');
|
||||
localStorage.setItem('theme', 'light');
|
||||
} else {
|
||||
document.documentElement.classList.remove('theme-light');
|
||||
localStorage.setItem('theme', 'dark');
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -9,6 +9,19 @@
|
||||
<link rel="stylesheet" href="NexusReader.Web.styles.css" />
|
||||
<ImportMap />
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
const isLight = savedTheme === 'light' || (!savedTheme && !systemPrefersDark);
|
||||
if (isLight) {
|
||||
document.documentElement.classList.add('theme-light');
|
||||
} else {
|
||||
document.documentElement.classList.remove('theme-light');
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
<HeadOutlet @rendermode="InteractiveAuto" />
|
||||
</head>
|
||||
|
||||
@@ -42,6 +55,7 @@
|
||||
setTimeout(hidePreloader, 3000);
|
||||
})();
|
||||
</script>
|
||||
<script src="_content/NexusReader.UI.Shared/js/theme.js"></script>
|
||||
<script src="_content/NexusReader.UI.Shared/js/auth.js"></script>
|
||||
</body>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user