style(ui): refactor reader layout grid, fix focus mode layout collapse, fix SVG rendering dots, reorganize intelligence toolbar
This commit is contained in:
@@ -33,12 +33,11 @@
|
|||||||
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
|
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
|
||||||
break;
|
break;
|
||||||
case "search":
|
case "search":
|
||||||
<circle cx="11" cy="11" r="8" />
|
<circle cx="11" cy="11" r="8" fill="none" stroke="currentColor" stroke-width="2" />
|
||||||
|
<line x1="21" y1="21" x2="16.65" y2="16.65" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
|
||||||
<path d="m21 21-4.3-4.3" />
|
|
||||||
break;
|
break;
|
||||||
case "message-square":
|
case "message-square":
|
||||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
|
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
break;
|
break;
|
||||||
case "diamond":
|
case "diamond":
|
||||||
<path d="M12 3L3 12L12 21L21 12L12 3Z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
<path d="M12 3L3 12L12 21L21 12L12 3Z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
@@ -63,47 +62,44 @@
|
|||||||
<circle cx="12" cy="12" r="3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
<circle cx="12" cy="12" r="3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
break;
|
break;
|
||||||
case "bookmark":
|
case "bookmark":
|
||||||
<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" />
|
<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
break;
|
break;
|
||||||
case "target":
|
case "target":
|
||||||
<circle cx="12" cy="12" r="10" />
|
<circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2" />
|
||||||
|
<circle cx="12" cy="12" r="6" fill="none" stroke="currentColor" stroke-width="2" />
|
||||||
<circle cx="12" cy="12" r="6" />
|
<circle cx="12" cy="12" r="2" fill="none" stroke="currentColor" stroke-width="2" />
|
||||||
|
|
||||||
<circle cx="12" cy="12" r="2" />
|
|
||||||
break;
|
break;
|
||||||
case "trash":
|
case "trash":
|
||||||
<path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M10 11v6M14 11v6" />
|
<polyline points="3 6 5 6 21 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
|
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
|
<line x1="10" y1="11" x2="10" y2="17" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
|
<line x1="14" y1="11" x2="14" y2="17" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
break;
|
break;
|
||||||
case "mail":
|
case "mail":
|
||||||
<rect width="20" height="16" x="2" y="4" rx="2" />
|
<rect width="20" height="16" x="2" y="4" rx="2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
|
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
|
|
||||||
break;
|
break;
|
||||||
case "lock":
|
case "lock":
|
||||||
<rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
|
<rect width="18" height="11" x="3" y="11" rx="2" ry="2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
|
<path d="M7 11V7a5 5 0 0 1 10 0v4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
<path d="M7 11V7a5 5 0 0 1 10 0v4" />
|
|
||||||
break;
|
break;
|
||||||
case "eye":
|
case "eye":
|
||||||
<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
|
<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
|
<circle cx="12" cy="12" r="3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
<circle cx="12" cy="12" r="3" />
|
|
||||||
break;
|
break;
|
||||||
case "eye-off":
|
case "eye-off":
|
||||||
<path d="M9.88 9.88a3 3 0 1 0 4.24 4.24" />
|
<path d="M9.88 9.88a3 3 0 1 0 4.24 4.24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
|
<path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
<path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" />
|
<path d="M6.61 6.61A13.52 13.52 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
|
<line x1="2" x2="22" y1="2" y2="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
<path d="M6.61 6.61A13.52 13.52 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" />
|
|
||||||
|
|
||||||
<line x1="2" x2="22" y1="2" y2="22" />
|
|
||||||
break;
|
break;
|
||||||
case "arrow-left":
|
case "arrow-left":
|
||||||
<path d="M19 12H5M12 19l-7-7 7-7" />
|
<line x1="19" y1="12" x2="5" y2="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
|
<polyline points="12 19 5 12 12 5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
break;
|
break;
|
||||||
case "arrow-right":
|
case "arrow-right":
|
||||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
<line x1="5" y1="12" x2="19" y2="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
|
<polyline points="12 5 19 12 12 19" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
break;
|
break;
|
||||||
case "log-out":
|
case "log-out":
|
||||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
@@ -119,6 +115,13 @@
|
|||||||
<line x1="18" y1="6" x2="6" y2="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
<line x1="18" y1="6" x2="6" y2="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
<line x1="6" y1="6" x2="18" y2="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
<line x1="6" y1="6" x2="18" y2="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
break;
|
break;
|
||||||
|
case "sun":
|
||||||
|
<circle cx="12" cy="12" r="4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
|
<path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
|
break;
|
||||||
|
case "moon":
|
||||||
|
<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
|
break;
|
||||||
default:
|
default:
|
||||||
<!-- Fallback circle -->
|
<!-- Fallback circle -->
|
||||||
<circle cx="12" cy="12" r="10" />
|
<circle cx="12" cy="12" r="10" />
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 12 KiB |
@@ -76,7 +76,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Light theme support */
|
/* Light theme support */
|
||||||
:global(.theme-light) .nexus-callout-box {
|
.theme-light .nexus-callout-box {
|
||||||
background-color: #fcfcfb;
|
background-color: #fcfcfb;
|
||||||
border: 1px solid rgba(0, 0, 0, 0.03);
|
border: 1px solid rgba(0, 0, 0, 0.03);
|
||||||
border-left-width: 4px;
|
border-left-width: 4px;
|
||||||
@@ -84,39 +84,39 @@
|
|||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.015);
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.015);
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .nexus-callout-info {
|
.theme-light .nexus-callout-info {
|
||||||
border-left-color: #10b981;
|
border-left-color: #10b981;
|
||||||
background-color: rgba(16, 185, 129, 0.04);
|
background-color: rgba(16, 185, 129, 0.04);
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .nexus-callout-info .nexus-callout-header {
|
.theme-light .nexus-callout-info .nexus-callout-header {
|
||||||
color: #059669;
|
color: #059669;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .nexus-callout-warning {
|
.theme-light .nexus-callout-warning {
|
||||||
border-left-color: #d97706;
|
border-left-color: #d97706;
|
||||||
background-color: rgba(217, 119, 6, 0.04);
|
background-color: rgba(217, 119, 6, 0.04);
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .nexus-callout-warning .nexus-callout-header {
|
.theme-light .nexus-callout-warning .nexus-callout-header {
|
||||||
color: #d97706;
|
color: #d97706;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .nexus-callout-success {
|
.theme-light .nexus-callout-success {
|
||||||
border-left-color: #10b981;
|
border-left-color: #10b981;
|
||||||
background-color: rgba(16, 185, 129, 0.04);
|
background-color: rgba(16, 185, 129, 0.04);
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .nexus-callout-success .nexus-callout-header {
|
.theme-light .nexus-callout-success .nexus-callout-header {
|
||||||
color: #059669;
|
color: #059669;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .nexus-callout-error {
|
.theme-light .nexus-callout-error {
|
||||||
border-left-color: #e11d48;
|
border-left-color: #e11d48;
|
||||||
background-color: rgba(225, 29, 72, 0.04);
|
background-color: rgba(225, 29, 72, 0.04);
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .nexus-callout-error .nexus-callout-header {
|
.theme-light .nexus-callout-error .nexus-callout-header {
|
||||||
color: #e11d48;
|
color: #e11d48;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,45 +1,43 @@
|
|||||||
@using NexusReader.UI.Shared.Services
|
@using NexusReader.UI.Shared.Services
|
||||||
@using NexusReader.Application.Abstractions.Services
|
@using NexusReader.Application.Abstractions.Services
|
||||||
@inject IFocusModeService FocusMode
|
@inject IFocusModeService FocusMode
|
||||||
@inject IKnowledgeService KnowledgeService
|
|
||||||
@inject IIdentityService IdentityService
|
@inject IIdentityService IdentityService
|
||||||
@inject NavigationManager NavigationManager
|
@inject NavigationManager NavigationManager
|
||||||
|
@inject IThemeService ThemeService
|
||||||
|
@inject IKnowledgeService KnowledgeService
|
||||||
|
@implements IDisposable
|
||||||
|
|
||||||
<aside class="intelligence-toolbar">
|
<aside class="intelligence-toolbar">
|
||||||
<div class="toolbar-top">
|
<div class="toolbar-top">
|
||||||
<button class="toolbar-item" @onclick='() => NavigationManager.NavigateTo("/")' title="Back to Dashboard">
|
<button class="toolbar-item" @onclick='() => NavigationManager.NavigateTo("/")' title="Back to Dashboard">
|
||||||
<NexusIcon Name="arrow-left" Size="20" />
|
<NexusIcon Name="arrow-left" Size="20" />
|
||||||
</button>
|
</button>
|
||||||
<button class="toolbar-item active" title="Chat">
|
|
||||||
<NexusIcon Name="message-square" Size="20" />
|
@if (FocusMode.IsFocusModeActive)
|
||||||
</button>
|
{
|
||||||
</div>
|
<button class="toolbar-item active" @onclick="FocusMode.ToggleAsync" title="Focus Mode Active (Click to Exit)">
|
||||||
|
<NexusIcon Name="target" Size="20" />
|
||||||
<div class="toolbar-middle">
|
</button>
|
||||||
<button class="toolbar-item" title="Settings">
|
}
|
||||||
<NexusIcon Name="settings" Size="20" />
|
else
|
||||||
</button>
|
{
|
||||||
<button class="toolbar-item" title="Bookmarks">
|
<button class="toolbar-item active" @onclick="FocusMode.ToggleAsync" title="Chat Active (Click to Focus)">
|
||||||
<NexusIcon Name="bookmark" Size="20" />
|
<NexusIcon Name="message-square" Size="20" />
|
||||||
</button>
|
</button>
|
||||||
<button class="toolbar-item" title="Search">
|
}
|
||||||
<NexusIcon Name="search" Size="20" />
|
|
||||||
</button>
|
|
||||||
<button class="toolbar-item danger" @onclick="HandleClearCache" title="Clear AI Cache">
|
|
||||||
<NexusIcon Name="trash" Size="20" />
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="toolbar-bottom">
|
<div class="toolbar-bottom">
|
||||||
<button class="toolbar-item @(FocusMode.IsFocusModeActive ? "active focus-active" : "")"
|
<div class="toolbar-separator"></div>
|
||||||
@onclick="FocusMode.ToggleAsync" title="Focus Mode (F)">
|
|
||||||
<NexusIcon Name="target" Size="20" />
|
<button class="toolbar-item" @onclick="ThemeService.ToggleTheme" title="Przełącz motyw">
|
||||||
|
<NexusIcon Name="@(ThemeService.IsLightMode ? "sun" : "moon")" Size="20" />
|
||||||
</button>
|
</button>
|
||||||
<button class="toolbar-item" @onclick='() => NavigationManager.NavigateTo("/")' title="Global Hub">
|
|
||||||
<NexusIcon Name="layers" Size="20" />
|
<div class="toolbar-separator"></div>
|
||||||
</button>
|
|
||||||
<button class="toolbar-item logout-item" @onclick="HandleLogout" title="Exit">
|
<button class="toolbar-item clear-cache-item" @onclick="HandleClearCache" title="Wyczyść pamięć AI">
|
||||||
<NexusIcon Name="log-out" Size="20" />
|
<NexusIcon Name="trash" Size="20" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
@@ -48,11 +46,11 @@
|
|||||||
protected override void OnInitialized()
|
protected override void OnInitialized()
|
||||||
{
|
{
|
||||||
FocusMode.OnFocusModeChanged += HandleUpdate;
|
FocusMode.OnFocusModeChanged += HandleUpdate;
|
||||||
|
ThemeService.OnThemeChanged += HandleThemeChangedAsync;
|
||||||
}
|
}
|
||||||
|
|
||||||
private async Task HandleClearCache()
|
private async Task HandleClearCache()
|
||||||
{
|
{
|
||||||
// For now, a simple console log confirm or just do it
|
|
||||||
Console.WriteLine("[IntelligenceToolbar] Requesting cache clear...");
|
Console.WriteLine("[IntelligenceToolbar] Requesting cache clear...");
|
||||||
var result = await KnowledgeService.ClearCacheAsync();
|
var result = await KnowledgeService.ClearCacheAsync();
|
||||||
if (result.IsSuccess)
|
if (result.IsSuccess)
|
||||||
@@ -61,16 +59,13 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private async Task HandleLogout()
|
|
||||||
{
|
|
||||||
await IdentityService.LogoutAsync();
|
|
||||||
NavigationManager.NavigateTo("/account/logout-form", true);
|
|
||||||
}
|
|
||||||
|
|
||||||
private Task HandleUpdate() => InvokeAsync(StateHasChanged);
|
private Task HandleUpdate() => InvokeAsync(StateHasChanged);
|
||||||
|
|
||||||
|
private async Task HandleThemeChangedAsync() => await InvokeAsync(StateHasChanged);
|
||||||
|
|
||||||
public void Dispose()
|
public void Dispose()
|
||||||
{
|
{
|
||||||
FocusMode.OnFocusModeChanged -= HandleUpdate;
|
FocusMode.OnFocusModeChanged -= HandleUpdate;
|
||||||
|
ThemeService.OnThemeChanged -= HandleThemeChangedAsync;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -71,27 +71,54 @@
|
|||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar-item.danger:hover {
|
|
||||||
color: #ff4d4d;
|
|
||||||
background: rgba(255, 77, 77, 0.1);
|
.toolbar-separator {
|
||||||
|
width: 24px;
|
||||||
|
height: 1px;
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
margin: 0.2rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar-item.logout-item {
|
/* Light mode overrides */
|
||||||
margin-top: 1rem;
|
.theme-light .intelligence-toolbar {
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
background: #ffffff;
|
||||||
padding-top: 1.5rem;
|
border-right: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
height: auto;
|
box-shadow: inset -1px 0 0 rgba(0,0,0,0.02);
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 0;
|
|
||||||
color: #444;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar-item.logout-item:hover {
|
.theme-light .toolbar-item {
|
||||||
color: #ff4d4d;
|
color: #71717a;
|
||||||
background: none;
|
}
|
||||||
filter: drop-shadow(0 0 8px rgba(255, 77, 77, 0.4));
|
|
||||||
|
.theme-light .toolbar-item:hover {
|
||||||
|
color: #10b981;
|
||||||
|
background: rgba(16, 185, 129, 0.05);
|
||||||
|
box-shadow: 0 0 15px rgba(16, 185, 129, 0.15);
|
||||||
|
filter: drop-shadow(0 0 5px rgba(16, 185, 129, 0.2));
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .toolbar-item.active {
|
||||||
|
color: #10b981;
|
||||||
|
background: rgba(16, 185, 129, 0.08);
|
||||||
|
box-shadow: 0 0 20px rgba(16, 185, 129, 0.25);
|
||||||
|
filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.3));
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .toolbar-item.active::after {
|
||||||
|
background: #10b981;
|
||||||
|
box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .toolbar-item.focus-active {
|
||||||
|
color: #10b981;
|
||||||
|
filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.3));
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.theme-light .toolbar-separator {
|
||||||
|
background: rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -336,139 +336,139 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Light mode overrides */
|
/* Light mode overrides */
|
||||||
:global(.theme-light) .knowledge-check {
|
.theme-light .knowledge-check {
|
||||||
background: #fafaf9;
|
background: #fafaf9;
|
||||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .header-title {
|
.theme-light .header-title {
|
||||||
color: #1c1917;
|
color: #1c1917;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .question-text {
|
.theme-light .question-text {
|
||||||
color: #44403c;
|
color: #44403c;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .option-item {
|
.theme-light .option-item {
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .option-item:hover {
|
.theme-light .option-item:hover {
|
||||||
background: #f5f5f4;
|
background: #f5f5f4;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .option-item.selected {
|
.theme-light .option-item.selected {
|
||||||
border-color: #10b981;
|
border-color: #10b981;
|
||||||
background: rgba(16, 185, 129, 0.04);
|
background: rgba(16, 185, 129, 0.04);
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .option-letter {
|
.theme-light .option-letter {
|
||||||
color: #059669;
|
color: #059669;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .option-text {
|
.theme-light .option-text {
|
||||||
color: #292524;
|
color: #292524;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .option-correct {
|
.theme-light .option-correct {
|
||||||
border-color: #10b981 !important;
|
border-color: #10b981 !important;
|
||||||
background: rgba(16, 185, 129, 0.08) !important;
|
background: rgba(16, 185, 129, 0.08) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .option-incorrect {
|
.theme-light .option-incorrect {
|
||||||
border-color: #f43f5e !important;
|
border-color: #f43f5e !important;
|
||||||
background: rgba(244, 63, 94, 0.08) !important;
|
background: rgba(244, 63, 94, 0.08) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .option-revealed-correct {
|
.theme-light .option-revealed-correct {
|
||||||
border-color: #10b981 !important;
|
border-color: #10b981 !important;
|
||||||
background: rgba(16, 185, 129, 0.06) !important;
|
background: rgba(16, 185, 129, 0.06) !important;
|
||||||
box-shadow: 0 0 8px rgba(16, 185, 129, 0.1);
|
box-shadow: 0 0 8px rgba(16, 185, 129, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .loading-state.shimmer {
|
.theme-light .loading-state.shimmer {
|
||||||
background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.03), transparent);
|
background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.03), transparent);
|
||||||
color: #10b981;
|
color: #10b981;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .submit-btn {
|
.theme-light .submit-btn {
|
||||||
background: rgba(0, 0, 0, 0.03);
|
background: rgba(0, 0, 0, 0.03);
|
||||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||||
color: #78716c;
|
color: #78716c;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .submit-btn:not(:disabled) {
|
.theme-light .submit-btn:not(:disabled) {
|
||||||
background: #10b981;
|
background: #10b981;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
border-color: #10b981;
|
border-color: #10b981;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .submitted-title {
|
.theme-light .submitted-title {
|
||||||
color: #1c1917;
|
color: #1c1917;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .submitted-text {
|
.theme-light .submitted-text {
|
||||||
color: #78716c;
|
color: #78716c;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .score-card {
|
.theme-light .score-card {
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .score-num {
|
.theme-light .score-num {
|
||||||
color: #10b981;
|
color: #10b981;
|
||||||
text-shadow: none;
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .score-divider {
|
.theme-light .score-divider {
|
||||||
color: #e7e5e4;
|
color: #e7e5e4;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .score-total {
|
.theme-light .score-total {
|
||||||
color: #292524;
|
color: #292524;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .score-percent {
|
.theme-light .score-percent {
|
||||||
color: #78716c;
|
color: #78716c;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .reset-quiz-btn {
|
.theme-light .reset-quiz-btn {
|
||||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||||
color: #44403c;
|
color: #44403c;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .reset-quiz-btn:hover {
|
.theme-light .reset-quiz-btn:hover {
|
||||||
background: rgba(0, 0, 0, 0.03);
|
background: rgba(0, 0, 0, 0.03);
|
||||||
border-color: #1c1917;
|
border-color: #1c1917;
|
||||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.03);
|
box-shadow: 0 0 15px rgba(0, 0, 0, 0.03);
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .empty-title {
|
.theme-light .empty-title {
|
||||||
color: #1c1917;
|
color: #1c1917;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .empty-text {
|
.theme-light .empty-text {
|
||||||
color: #78716c;
|
color: #78716c;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .empty-icon-wrapper {
|
.theme-light .empty-icon-wrapper {
|
||||||
background: rgba(16, 185, 129, 0.02);
|
background: rgba(16, 185, 129, 0.02);
|
||||||
border: 1px solid rgba(16, 185, 129, 0.1);
|
border: 1px solid rgba(16, 185, 129, 0.1);
|
||||||
box-shadow: 0 0 20px rgba(16, 185, 129, 0.02);
|
box-shadow: 0 0 20px rgba(16, 185, 129, 0.02);
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .empty-quiz-state:hover .empty-icon-wrapper {
|
.theme-light .empty-quiz-state:hover .empty-icon-wrapper {
|
||||||
background: rgba(16, 185, 129, 0.06);
|
background: rgba(16, 185, 129, 0.06);
|
||||||
border-color: rgba(16, 185, 129, 0.3);
|
border-color: rgba(16, 185, 129, 0.3);
|
||||||
box-shadow: 0 0 25px rgba(16, 185, 129, 0.1);
|
box-shadow: 0 0 25px rgba(16, 185, 129, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .generate-quiz-btn {
|
.theme-light .generate-quiz-btn {
|
||||||
background: rgba(16, 185, 129, 0.05);
|
background: rgba(16, 185, 129, 0.05);
|
||||||
border: 1px solid #10b981;
|
border: 1px solid #10b981;
|
||||||
color: #10b981;
|
color: #10b981;
|
||||||
@@ -476,32 +476,32 @@
|
|||||||
box-shadow: 0 0 15px rgba(16, 185, 129, 0.05);
|
box-shadow: 0 0 15px rgba(16, 185, 129, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .generate-quiz-btn:not(:disabled):hover {
|
.theme-light .generate-quiz-btn:not(:disabled):hover {
|
||||||
background: #10b981;
|
background: #10b981;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
box-shadow: 0 0 25px rgba(16, 185, 129, 0.2);
|
box-shadow: 0 0 25px rgba(16, 185, 129, 0.2);
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .generate-quiz-btn:disabled {
|
.theme-light .generate-quiz-btn:disabled {
|
||||||
border-color: rgba(0, 0, 0, 0.1);
|
border-color: rgba(0, 0, 0, 0.1);
|
||||||
background: rgba(0, 0, 0, 0.02);
|
background: rgba(0, 0, 0, 0.02);
|
||||||
color: #a8a29e;
|
color: #a8a29e;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .success-icon-wrapper {
|
.theme-light .success-icon-wrapper {
|
||||||
background: rgba(16, 185, 129, 0.05);
|
background: rgba(16, 185, 129, 0.05);
|
||||||
border: 1px solid rgba(16, 185, 129, 0.2);
|
border: 1px solid rgba(16, 185, 129, 0.2);
|
||||||
box-shadow: 0 0 20px rgba(16, 185, 129, 0.08);
|
box-shadow: 0 0 20px rgba(16, 185, 129, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .success-glow {
|
.theme-light .success-glow {
|
||||||
color: #10b981;
|
color: #10b981;
|
||||||
filter: none;
|
filter: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .neon-glow {
|
.theme-light .neon-glow {
|
||||||
color: #10b981;
|
color: #10b981;
|
||||||
filter: none;
|
filter: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -118,31 +118,31 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Light mode overrides */
|
/* Light mode overrides */
|
||||||
:global(.theme-light) .selection-ai-panel {
|
.theme-light .selection-ai-panel {
|
||||||
background: rgba(254, 254, 254, 0.95);
|
background: rgba(254, 254, 254, 0.95);
|
||||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.04);
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.04);
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .toolbar-btn {
|
.theme-light .toolbar-btn {
|
||||||
color: #57524e;
|
color: #57524e;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .toolbar-btn:hover:not(.disabled) {
|
.theme-light .toolbar-btn:hover:not(.disabled) {
|
||||||
background: rgba(0, 0, 0, 0.04);
|
background: rgba(0, 0, 0, 0.04);
|
||||||
color: #1c1917;
|
color: #1c1917;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .toolbar-btn.primary {
|
.theme-light .toolbar-btn.primary {
|
||||||
color: #10b981;
|
color: #10b981;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .toolbar-btn.primary:hover:not(.disabled) {
|
.theme-light .toolbar-btn.primary:hover:not(.disabled) {
|
||||||
background: rgba(16, 185, 129, 0.06);
|
background: rgba(16, 185, 129, 0.06);
|
||||||
box-shadow: 0 0 12px rgba(16, 185, 129, 0.1);
|
box-shadow: 0 0 12px rgba(16, 185, 129, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .toolbar-divider {
|
.theme-light .toolbar-divider {
|
||||||
background: rgba(0, 0, 0, 0.08);
|
background: rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
|
transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .reader-footer {
|
.theme-light .reader-footer {
|
||||||
background: rgba(254, 254, 254, 0.75);
|
background: rgba(254, 254, 254, 0.75);
|
||||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
|
||||||
@@ -68,14 +68,14 @@
|
|||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .nav-btn {
|
.theme-light .nav-btn {
|
||||||
background: rgba(0, 0, 0, 0.02);
|
background: rgba(0, 0, 0, 0.02);
|
||||||
border-color: rgba(0, 0, 0, 0.08);
|
border-color: rgba(0, 0, 0, 0.08);
|
||||||
color: #78716c; /* Warm stone-500 */
|
color: #78716c; /* Warm stone-500 */
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .nav-btn:hover:not(:disabled),
|
.theme-light .nav-btn:hover:not(:disabled),
|
||||||
:global(.theme-light) .nav-btn:focus:not(:disabled) {
|
.theme-light .nav-btn:focus:not(:disabled) {
|
||||||
background: rgba(16, 185, 129, 0.05);
|
background: rgba(16, 185, 129, 0.05);
|
||||||
border-color: #10b981;
|
border-color: #10b981;
|
||||||
color: #10b981;
|
color: #10b981;
|
||||||
@@ -92,7 +92,7 @@
|
|||||||
color: #e2e8f0; /* Slate-200 for clean high readability */
|
color: #e2e8f0; /* Slate-200 for clean high readability */
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .chapter-info {
|
.theme-light .chapter-info {
|
||||||
color: #292524; /* Warm charcoal for legibility */
|
color: #292524; /* Warm charcoal for legibility */
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -111,7 +111,7 @@
|
|||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .chapter-count {
|
.theme-light .chapter-count {
|
||||||
color: #78716c; /* Warm stone-500 secondary info */
|
color: #78716c; /* Warm stone-500 secondary info */
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -125,7 +125,7 @@
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .progress-container {
|
.theme-light .progress-container {
|
||||||
background: rgba(0, 0, 0, 0.08);
|
background: rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -136,7 +136,7 @@
|
|||||||
transition: width 0.3s ease;
|
transition: width 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .progress-bar {
|
.theme-light .progress-bar {
|
||||||
background: #10b981;
|
background: #10b981;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -150,7 +150,7 @@
|
|||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .meta-info {
|
.theme-light .meta-info {
|
||||||
color: #78716c;
|
color: #78716c;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -9,6 +9,7 @@
|
|||||||
|
|
||||||
|
|
||||||
.reader-pane {
|
.reader-pane {
|
||||||
|
grid-column: 1;
|
||||||
background: var(--nexus-bg);
|
background: var(--nexus-bg);
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -28,6 +29,7 @@ main {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.intelligence-sidebar {
|
.intelligence-sidebar {
|
||||||
|
grid-column: 3;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 50px 1fr;
|
grid-template-columns: 50px 1fr;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -42,19 +44,50 @@ main {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.resizer {
|
.resizer {
|
||||||
width: 4px;
|
grid-column: 2;
|
||||||
|
width: 12px;
|
||||||
cursor: col-resize;
|
cursor: col-resize;
|
||||||
background: rgba(255, 255, 255, 0.02);
|
background: transparent;
|
||||||
transition: background 0.2s, width 0.2s;
|
|
||||||
z-index: 20;
|
z-index: 20;
|
||||||
border-left: 1px solid rgba(255, 255, 255, 0.05);
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.resizer:hover,
|
.resizer::before {
|
||||||
.app-container.is-resizing .resizer {
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
top: 0;
|
||||||
|
width: 1px;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
transition: background 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resizer::after {
|
||||||
|
content: '';
|
||||||
|
width: 4px;
|
||||||
|
height: 60px;
|
||||||
|
background: rgba(255, 255, 255, 0.15);
|
||||||
|
border-radius: 9999px;
|
||||||
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.resizer:hover::before,
|
||||||
|
.app-container.is-resizing .resizer::before {
|
||||||
|
background: rgba(255, 255, 255, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.resizer:hover::after,
|
||||||
|
.app-container.is-resizing .resizer::after {
|
||||||
background: var(--nexus-neon);
|
background: var(--nexus-neon);
|
||||||
width: 6px;
|
width: 6px;
|
||||||
box-shadow: 0 0 10px var(--nexus-neon);
|
height: 80px;
|
||||||
|
box-shadow: 0 0 12px var(--nexus-neon);
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-container.is-resizing {
|
.app-container.is-resizing {
|
||||||
@@ -67,6 +100,7 @@ main {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.app-container.focus-mode-active .intelligence-sidebar {
|
.app-container.focus-mode-active .intelligence-sidebar {
|
||||||
|
grid-column: 3;
|
||||||
grid-template-columns: 50px 0px;
|
grid-template-columns: 50px 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -715,14 +749,29 @@ main {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.app-container.theme-light .resizer {
|
.app-container.theme-light .resizer {
|
||||||
background: rgba(0, 0, 0, 0.02);
|
background: transparent;
|
||||||
border-left: 1px solid rgba(0, 0, 0, 0.08);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-container.theme-light .resizer:hover,
|
.app-container.theme-light .resizer::before {
|
||||||
.app-container.theme-light.is-resizing .resizer {
|
background: rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-container.theme-light .resizer::after {
|
||||||
|
background: rgba(0, 0, 0, 0.12);
|
||||||
|
box-shadow: 0 2px 8px rgba(139, 130, 115, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-container.theme-light .resizer:hover::before,
|
||||||
|
.app-container.theme-light.is-resizing .resizer::before {
|
||||||
|
background: rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-container.theme-light .resizer:hover::after,
|
||||||
|
.app-container.theme-light.is-resizing .resizer::after {
|
||||||
background: #10b981;
|
background: #10b981;
|
||||||
box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
|
width: 6px;
|
||||||
|
height: 80px;
|
||||||
|
box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-container.theme-light .intelligence-header {
|
.app-container.theme-light .intelligence-header {
|
||||||
|
|||||||
@@ -12,6 +12,41 @@
|
|||||||
|
|
||||||
/* Global Selection Style Override */
|
/* Global Selection Style Override */
|
||||||
--nexus-selection: rgba(0, 255, 153, 0.25);
|
--nexus-selection: rgba(0, 255, 153, 0.25);
|
||||||
|
|
||||||
|
/* Graph Nodes Theme Custom Properties (Dark Mode) */
|
||||||
|
--nexus-graph-bg: radial-gradient(circle, #1a1a1a 0%, #121212 100%);
|
||||||
|
--nexus-graph-link-secondary: rgba(255, 255, 255, 0.2);
|
||||||
|
--nexus-graph-link-default: rgba(255, 255, 255, 0.1);
|
||||||
|
|
||||||
|
--nexus-node-pill-bg: rgba(20, 20, 20, 0.95);
|
||||||
|
|
||||||
|
--nexus-node-rule: #ff4646;
|
||||||
|
--nexus-node-rule-bg: rgba(255, 70, 70, 0.1);
|
||||||
|
--nexus-node-rule-text: #ff8b8b;
|
||||||
|
|
||||||
|
--nexus-node-definition: #ffb03a;
|
||||||
|
--nexus-node-definition-bg: rgba(255, 176, 58, 0.1);
|
||||||
|
--nexus-node-definition-text: #ffd18c;
|
||||||
|
|
||||||
|
--nexus-node-table: #d946ef;
|
||||||
|
--nexus-node-table-bg: rgba(217, 70, 239, 0.1);
|
||||||
|
--nexus-node-table-text: #f5d0fe;
|
||||||
|
|
||||||
|
--nexus-node-section: #3b82f6;
|
||||||
|
--nexus-node-section-bg: rgba(59, 130, 246, 0.1);
|
||||||
|
--nexus-node-section-text: #93c5fd;
|
||||||
|
|
||||||
|
--nexus-node-bridge: #06b6d4;
|
||||||
|
--nexus-node-bridge-bg: rgba(6, 182, 212, 0.1);
|
||||||
|
--nexus-node-bridge-text: #67e8f9;
|
||||||
|
|
||||||
|
--nexus-node-current: var(--nexus-neon);
|
||||||
|
--nexus-node-current-bg: rgba(0, 255, 153, 0.15);
|
||||||
|
--nexus-node-current-text: #ffffff;
|
||||||
|
|
||||||
|
--nexus-node-concept: #00d2c4;
|
||||||
|
--nexus-node-concept-bg: rgba(0, 210, 196, 0.05);
|
||||||
|
--nexus-node-concept-text: #e0e0e0;
|
||||||
}
|
}
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
@@ -103,6 +138,43 @@
|
|||||||
--nexus-card: #ffffff;
|
--nexus-card: #ffffff;
|
||||||
--nexus-text: #2d2a26;
|
--nexus-text: #2d2a26;
|
||||||
--nexus-selection: rgba(16, 185, 129, 0.18);
|
--nexus-selection: rgba(16, 185, 129, 0.18);
|
||||||
|
|
||||||
|
/* Graph Nodes Theme Custom Properties (Light Mode) */
|
||||||
|
--nexus-graph-bg: radial-gradient(circle, #ffffff 0%, #e8e4da 100%);
|
||||||
|
--nexus-graph-link-secondary: rgba(0, 0, 0, 0.15);
|
||||||
|
--nexus-graph-link-default: rgba(0, 0, 0, 0.08);
|
||||||
|
|
||||||
|
--nexus-node-pill-bg: #fbfafa;
|
||||||
|
|
||||||
|
--nexus-node-rule: #dc2626;
|
||||||
|
--nexus-node-rule-bg: rgba(220, 38, 38, 0.05);
|
||||||
|
--nexus-node-rule-text: #991b1b;
|
||||||
|
|
||||||
|
--nexus-node-definition: #d97706;
|
||||||
|
--nexus-node-definition-bg: rgba(217, 119, 6, 0.05);
|
||||||
|
--nexus-node-definition-text: #92400e;
|
||||||
|
|
||||||
|
--nexus-node-table: #c084fc;
|
||||||
|
--nexus-node-table-bg: rgba(192, 132, 252, 0.05);
|
||||||
|
--nexus-node-table-text: #6b21a8;
|
||||||
|
|
||||||
|
--nexus-node-section: #2563eb;
|
||||||
|
--nexus-node-section-bg: rgba(37, 99, 235, 0.05);
|
||||||
|
--nexus-node-section-text: #1e3a8a;
|
||||||
|
|
||||||
|
--nexus-node-bridge: #0891b2;
|
||||||
|
--nexus-node-bridge-bg: rgba(8, 145, 178, 0.05);
|
||||||
|
--nexus-node-bridge-text: #155e75;
|
||||||
|
|
||||||
|
--nexus-node-current: #10b981;
|
||||||
|
--nexus-node-current-bg: rgba(16, 185, 129, 0.08);
|
||||||
|
--nexus-node-current-text: #064e3b;
|
||||||
|
|
||||||
|
--nexus-node-concept: #0d9488;
|
||||||
|
--nexus-node-concept-bg: rgba(13, 148, 136, 0.03);
|
||||||
|
--nexus-node-concept-text: #115e59;
|
||||||
|
|
||||||
|
--nexus-accent: #10b981;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Scoped Component overrides for Light Mode (Bypassing Blazor CSS isolation) */
|
/* Scoped Component overrides for Light Mode (Bypassing Blazor CSS isolation) */
|
||||||
|
|||||||
@@ -40,70 +40,70 @@ const getCategoryStyle = d => {
|
|||||||
// 1. Rule (red/coral)
|
// 1. Rule (red/coral)
|
||||||
if (type === 'rule') {
|
if (type === 'rule') {
|
||||||
return {
|
return {
|
||||||
color: '#ff4646',
|
color: 'var(--nexus-node-rule, #ff4646)',
|
||||||
fill: 'rgba(255, 70, 70, 0.1)',
|
fill: 'var(--nexus-node-rule-bg, rgba(255, 70, 70, 0.1))',
|
||||||
opacity: 0.8,
|
opacity: 0.8,
|
||||||
glowKey: 'rule',
|
glowKey: 'rule',
|
||||||
textColor: '#ff8b8b'
|
textColor: 'var(--nexus-node-rule-text, #ff8b8b)'
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
// 2. Definition (gold/amber)
|
// 2. Definition (gold/amber)
|
||||||
if (type === 'definition') {
|
if (type === 'definition') {
|
||||||
return {
|
return {
|
||||||
color: '#ffb03a',
|
color: 'var(--nexus-node-definition, #ffb03a)',
|
||||||
fill: 'rgba(255, 176, 58, 0.1)',
|
fill: 'var(--nexus-node-definition-bg, rgba(255, 176, 58, 0.1))',
|
||||||
opacity: 0.8,
|
opacity: 0.8,
|
||||||
glowKey: 'definition',
|
glowKey: 'definition',
|
||||||
textColor: '#ffd18c'
|
textColor: 'var(--nexus-node-definition-text, #ffd18c)'
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
// 3. Table (purple/magenta)
|
// 3. Table (purple/magenta)
|
||||||
if (type === 'table') {
|
if (type === 'table') {
|
||||||
return {
|
return {
|
||||||
color: '#d946ef',
|
color: 'var(--nexus-node-table, #d946ef)',
|
||||||
fill: 'rgba(217, 70, 239, 0.1)',
|
fill: 'var(--nexus-node-table-bg, rgba(217, 70, 239, 0.1))',
|
||||||
opacity: 0.8,
|
opacity: 0.8,
|
||||||
glowKey: 'table',
|
glowKey: 'table',
|
||||||
textColor: '#f5d0fe'
|
textColor: 'var(--nexus-node-table-text, #f5d0fe)'
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
// 4. Section (blue/indigo)
|
// 4. Section (blue/indigo)
|
||||||
if (type === 'section') {
|
if (type === 'section') {
|
||||||
return {
|
return {
|
||||||
color: '#3b82f6',
|
color: 'var(--nexus-node-section, #3b82f6)',
|
||||||
fill: 'rgba(59, 130, 246, 0.1)',
|
fill: 'var(--nexus-node-section-bg, rgba(59, 130, 246, 0.1))',
|
||||||
opacity: 0.8,
|
opacity: 0.8,
|
||||||
glowKey: 'section',
|
glowKey: 'section',
|
||||||
textColor: '#93c5fd'
|
textColor: 'var(--nexus-node-section-text, #93c5fd)'
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
// 5. Bridge (cyan/comparison)
|
// 5. Bridge (cyan/comparison)
|
||||||
if (group === 'bridge') {
|
if (group === 'bridge') {
|
||||||
return {
|
return {
|
||||||
color: '#06b6d4',
|
color: 'var(--nexus-node-bridge, #06b6d4)',
|
||||||
fill: 'rgba(6, 182, 212, 0.1)',
|
fill: 'var(--nexus-node-bridge-bg, rgba(6, 182, 212, 0.1))',
|
||||||
opacity: 0.7,
|
opacity: 0.7,
|
||||||
glowKey: 'bridge',
|
glowKey: 'bridge',
|
||||||
textColor: '#67e8f9'
|
textColor: 'var(--nexus-node-bridge-text, #67e8f9)'
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
// 6. Current (active/focus landmark - neon green)
|
// 6. Current (active/focus landmark - neon green)
|
||||||
if (group === 'current') {
|
if (group === 'current') {
|
||||||
return {
|
return {
|
||||||
color: 'var(--nexus-neon)',
|
color: 'var(--nexus-node-current, var(--nexus-neon))',
|
||||||
fill: 'rgba(0, 255, 153, 0.15)',
|
fill: 'var(--nexus-node-current-bg, rgba(0, 255, 153, 0.15))',
|
||||||
opacity: 0.9,
|
opacity: 0.9,
|
||||||
glowKey: 'current',
|
glowKey: 'current',
|
||||||
textColor: '#ffffff'
|
textColor: 'var(--nexus-node-current-text, #ffffff)'
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
// 7. Concept / Default (subtle cool steel blue/teal)
|
// 7. Concept / Default (subtle cool steel blue/teal)
|
||||||
return {
|
return {
|
||||||
color: '#00d2c4',
|
color: 'var(--nexus-node-concept, #00d2c4)',
|
||||||
fill: 'rgba(0, 210, 196, 0.05)',
|
fill: 'var(--nexus-node-concept-bg, rgba(0, 210, 196, 0.05))',
|
||||||
opacity: 0.4,
|
opacity: 0.4,
|
||||||
glowKey: 'concept',
|
glowKey: 'concept',
|
||||||
textColor: '#e0e0e0'
|
textColor: 'var(--nexus-node-concept-text, #e0e0e0)'
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -208,7 +208,7 @@ export function mount(containerId, data, dotNetHelper) {
|
|||||||
.attr("viewBox", [0, 0, width, height])
|
.attr("viewBox", [0, 0, width, height])
|
||||||
.attr("width", "100%")
|
.attr("width", "100%")
|
||||||
.attr("height", "100%")
|
.attr("height", "100%")
|
||||||
.style("background", "radial-gradient(circle, #1a1a1a 0%, #121212 100%)");
|
.style("background", "var(--nexus-graph-bg, radial-gradient(circle, #1a1a1a 0%, #121212 100%))");
|
||||||
|
|
||||||
// Radial gradients for Nebula effects
|
// Radial gradients for Nebula effects
|
||||||
const defs = svgElement.append("defs");
|
const defs = svgElement.append("defs");
|
||||||
@@ -223,13 +223,13 @@ export function mount(containerId, data, dotNetHelper) {
|
|||||||
radialGradient.append("stop").attr("offset", "100%").attr("stop-color", "var(--nexus-neon)").attr("stop-opacity", 0);
|
radialGradient.append("stop").attr("offset", "100%").attr("stop-color", "var(--nexus-neon)").attr("stop-opacity", 0);
|
||||||
|
|
||||||
const colors = {
|
const colors = {
|
||||||
'rule': '#ff4646',
|
'rule': 'var(--nexus-node-rule, #ff4646)',
|
||||||
'definition': '#ffb03a',
|
'definition': 'var(--nexus-node-definition, #ffb03a)',
|
||||||
'table': '#d946ef',
|
'table': 'var(--nexus-node-table, #d946ef)',
|
||||||
'section': '#3b82f6',
|
'section': 'var(--nexus-node-section, #3b82f6)',
|
||||||
'bridge': '#06b6d4',
|
'bridge': 'var(--nexus-node-bridge, #06b6d4)',
|
||||||
'current': 'var(--nexus-neon)',
|
'current': 'var(--nexus-node-current, var(--nexus-neon))',
|
||||||
'concept': '#00d2c4'
|
'concept': 'var(--nexus-node-concept, #00d2c4)'
|
||||||
};
|
};
|
||||||
|
|
||||||
Object.entries(colors).forEach(([key, color]) => {
|
Object.entries(colors).forEach(([key, color]) => {
|
||||||
@@ -377,9 +377,9 @@ export function updateData(data) {
|
|||||||
enter => enter.append("path")
|
enter => enter.append("path")
|
||||||
.attr("stroke", d => {
|
.attr("stroke", d => {
|
||||||
if (d.type === 'Defines' || d.type === 'maps_to') return 'var(--nexus-accent, #00ffaa)';
|
if (d.type === 'Defines' || d.type === 'maps_to') return 'var(--nexus-accent, #00ffaa)';
|
||||||
if (d.type === 'Next' || d.type === 'relates_to') return 'rgba(255,255,255,0.2)';
|
if (d.type === 'Next' || d.type === 'relates_to') return 'var(--nexus-graph-link-secondary, rgba(255,255,255,0.2))';
|
||||||
if (d.type === 'Contains' || d.type === 'contains') return 'var(--nexus-neon)';
|
if (d.type === 'Contains' || d.type === 'contains') return 'var(--nexus-neon)';
|
||||||
return 'rgba(255,255,255,0.1)';
|
return 'var(--nexus-graph-link-default, rgba(255,255,255,0.1))';
|
||||||
})
|
})
|
||||||
.attr("fill", "none")
|
.attr("fill", "none")
|
||||||
.attr("stroke-width", d => (d.type === 'Defines' || d.type === 'maps_to') ? 2 : 1)
|
.attr("stroke-width", d => (d.type === 'Defines' || d.type === 'maps_to') ? 2 : 1)
|
||||||
@@ -413,7 +413,7 @@ export function updateData(data) {
|
|||||||
|
|
||||||
g.append("rect")
|
g.append("rect")
|
||||||
.attr("class", "node-pill")
|
.attr("class", "node-pill")
|
||||||
.attr("fill", "rgba(20, 20, 20, 0.95)")
|
.attr("fill", "var(--nexus-node-pill-bg, rgba(20, 20, 20, 0.95))")
|
||||||
.attr("stroke", d => getCategoryStyle(d).color)
|
.attr("stroke", d => getCategoryStyle(d).color)
|
||||||
.attr("stroke-width", d => getNodeGroup(d) === 'current' ? 2 : 1.2);
|
.attr("stroke-width", d => getNodeGroup(d) === 'current' ? 2 : 1.2);
|
||||||
|
|
||||||
|
|||||||
@@ -204,7 +204,8 @@ using (var scope = app.Services.CreateScope())
|
|||||||
logger.LogInformation("Próba połączenia z bazą danych (próba {Attempt}/{MaxRetries})...", i + 1, maxRetries);
|
logger.LogInformation("Próba połączenia z bazą danych (próba {Attempt}/{MaxRetries})...", i + 1, maxRetries);
|
||||||
}
|
}
|
||||||
|
|
||||||
await dbContext.Database.MigrateAsync();
|
|
||||||
|
|
||||||
await DbInitializer.SeedAsync(services);
|
await DbInitializer.SeedAsync(services);
|
||||||
await TriggerBackgroundProcessingForUnindexedBooksAsync(services);
|
await TriggerBackgroundProcessingForUnindexedBooksAsync(services);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user