style: refine premium light mode theme overrides and layout styling
This commit is contained in:
@@ -2,106 +2,126 @@
|
|||||||
@switch (Name.ToLowerInvariant())
|
@switch (Name.ToLowerInvariant())
|
||||||
{
|
{
|
||||||
case "home":
|
case "home":
|
||||||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
<polyline points="9 22 9 12 15 12 15 22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
<polyline points="9 22 9 12 15 12 15 22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
break;
|
break;
|
||||||
case "map":
|
case "map":
|
||||||
<polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
<polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
<line x1="8" y1="2" x2="8" y2="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
<line x1="8" y1="2" x2="8" y2="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
<line x1="16" y1="6" x2="16" y2="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
<line x1="16" y1="6" x2="16" y2="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
break;
|
break;
|
||||||
case "share":
|
case "share":
|
||||||
case "share-2":
|
case "share-2":
|
||||||
<circle cx="18" cy="5" r="3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
<circle cx="18" cy="5" r="3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
<circle cx="6" cy="12" r="3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
<circle cx="6" cy="12" r="3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
<circle cx="18" cy="19" r="3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
<circle cx="18" cy="19" r="3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
<line x1="8.59" y1="13.51" x2="15.42" y2="17.49" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
<line x1="8.59" y1="13.51" x2="15.42" y2="17.49" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
<line x1="15.41" y1="6.51" x2="8.59" y2="10.49" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
<line x1="15.41" y1="6.51" x2="8.59" y2="10.49" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
break;
|
break;
|
||||||
case "help-circle":
|
case "help-circle":
|
||||||
<circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
<circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
<line x1="12" y1="17" x2="12.01" y2="17" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
<line x1="12" y1="17" x2="12.01" y2="17" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
break;
|
break;
|
||||||
case "robot":
|
case "robot":
|
||||||
<path d="M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h5a2 2 0 0 1 2 2v2a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2V9c0-1.1.9-2 2-2h5V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2zM8 11v4h8v-4H8zm-2 0H4v4h2v-4zm14 0h-2v4h2v-4z" />
|
<path d="M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h5a2 2 0 0 1 2 2v2a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2V9c0-1.1.9-2 2-2h5V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2zM8 11v4h8v-4H8zm-2 0H4v4h2v-4zm14 0h-2v4h2v-4z" />
|
||||||
break;
|
break;
|
||||||
case "play":
|
case "play":
|
||||||
<path d="M8 5v14l11-7z" />
|
<path d="M8 5v14l11-7z" />
|
||||||
break;
|
break;
|
||||||
case "check":
|
case "check":
|
||||||
<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" /><path d="m21 21-4.3-4.3" />
|
<circle cx="11" cy="11" r="8" />
|
||||||
|
|
||||||
|
<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" />
|
||||||
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" />
|
||||||
break;
|
break;
|
||||||
case "layout":
|
case "layout":
|
||||||
<rect width="18" height="18" x="3" y="3" rx="2" ry="2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
<rect width="18" height="18" x="3" y="3" rx="2" ry="2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
<line x1="3" y1="9" x2="21" y2="9" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
<line x1="3" y1="9" x2="21" y2="9" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
<line x1="9" y1="21" x2="9" y2="9" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
<line x1="9" y1="21" x2="9" y2="9" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
break;
|
break;
|
||||||
case "book":
|
case "book":
|
||||||
case "book-open":
|
case "book-open":
|
||||||
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
break;
|
break;
|
||||||
case "user":
|
case "user":
|
||||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
<circle cx="12" cy="7" r="4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
<circle cx="12" cy="7" r="4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
break;
|
break;
|
||||||
case "settings":
|
case "settings":
|
||||||
<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" 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" />
|
<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" 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" />
|
||||||
break;
|
break;
|
||||||
case "target":
|
case "target":
|
||||||
<circle cx="12" cy="12" r="10" /><circle cx="12" cy="12" r="6" /><circle cx="12" cy="12" r="2" />
|
<circle cx="12" cy="12" r="10" />
|
||||||
|
|
||||||
|
<circle cx="12" cy="12" r="6" />
|
||||||
|
|
||||||
|
<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" />
|
<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" />
|
||||||
break;
|
break;
|
||||||
case "mail":
|
case "mail":
|
||||||
<rect width="20" height="16" x="2" y="4" rx="2" /><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
|
<rect width="20" height="16" x="2" y="4" rx="2" />
|
||||||
|
|
||||||
|
<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" /><path d="M7 11V7a5 5 0 0 1 10 0v4" />
|
<rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
|
||||||
|
|
||||||
|
<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" /><circle cx="12" cy="12" r="3" />
|
<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
|
||||||
|
|
||||||
|
<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="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" /><line x1="2" x2="22" y1="2" y2="22" />
|
<path d="M9.88 9.88a3 3 0 1 0 4.24 4.24" />
|
||||||
|
|
||||||
|
<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" />
|
||||||
|
|
||||||
|
<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" />
|
<path d="M19 12H5M12 19l-7-7 7-7" />
|
||||||
break;
|
break;
|
||||||
case "arrow-right":
|
case "arrow-right":
|
||||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||||
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" />
|
||||||
break;
|
break;
|
||||||
case "chevron-left":
|
case "chevron-left":
|
||||||
<polyline points="15 18 9 12 15 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
<polyline points="15 18 9 12 15 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
break;
|
break;
|
||||||
case "chevron-right":
|
case "chevron-right":
|
||||||
<polyline points="9 18 15 12 9 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
<polyline points="9 18 15 12 9 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||||||
break;
|
break;
|
||||||
case "x":
|
case "x":
|
||||||
case "close":
|
case "close":
|
||||||
<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;
|
||||||
default:
|
default:
|
||||||
<!-- Fallback circle -->
|
<!-- Fallback circle -->
|
||||||
<circle cx="12" cy="12" r="10" />
|
<circle cx="12" cy="12" r="10" />
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 8.1 KiB After Width: | Height: | Size: 8.5 KiB |
@@ -77,18 +77,46 @@
|
|||||||
|
|
||||||
/* Light theme support */
|
/* Light theme support */
|
||||||
:global(.theme-light) .nexus-callout-box {
|
:global(.theme-light) .nexus-callout-box {
|
||||||
background-color: rgba(0, 0, 0, 0.02);
|
background-color: #fcfcfb;
|
||||||
color: #333333;
|
border: 1px solid rgba(0, 0, 0, 0.03);
|
||||||
|
border-left-width: 4px;
|
||||||
|
color: #44403c;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.015);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .nexus-callout-info {
|
||||||
|
border-left-color: #10b981;
|
||||||
|
background-color: rgba(16, 185, 129, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .nexus-callout-info .nexus-callout-header {
|
||||||
|
color: #059669;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .nexus-callout-warning {
|
:global(.theme-light) .nexus-callout-warning {
|
||||||
background-color: rgba(234, 179, 8, 0.05);
|
border-left-color: #d97706;
|
||||||
|
background-color: rgba(217, 119, 6, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .nexus-callout-warning .nexus-callout-header {
|
||||||
|
color: #d97706;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .nexus-callout-success {
|
:global(.theme-light) .nexus-callout-success {
|
||||||
background-color: rgba(16, 185, 129, 0.05);
|
border-left-color: #10b981;
|
||||||
|
background-color: rgba(16, 185, 129, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .nexus-callout-success .nexus-callout-header {
|
||||||
|
color: #059669;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .nexus-callout-error {
|
:global(.theme-light) .nexus-callout-error {
|
||||||
background-color: rgba(244, 63, 94, 0.05);
|
border-left-color: #e11d48;
|
||||||
|
background-color: rgba(225, 29, 72, 0.04);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .nexus-callout-error .nexus-callout-header {
|
||||||
|
color: #e11d48;
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -31,8 +31,8 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="toolbar-bottom">
|
<div class="toolbar-bottom">
|
||||||
<button class="toolbar-item @(FocusMode.IsFocusModeActive ? "active focus-active" : "")"
|
<button class="toolbar-item @(FocusMode.IsFocusModeActive ? "active focus-active" : "")"
|
||||||
@onclick="FocusMode.ToggleAsync" title="Focus Mode (F)">
|
@onclick="FocusMode.ToggleAsync" title="Focus Mode (F)">
|
||||||
<NexusIcon Name="target" Size="20" />
|
<NexusIcon Name="target" Size="20" />
|
||||||
</button>
|
</button>
|
||||||
<button class="toolbar-item" @onclick='() => NavigationManager.NavigateTo("/")' title="Global Hub">
|
<button class="toolbar-item" @onclick='() => NavigationManager.NavigateTo("/")' title="Global Hub">
|
||||||
|
|||||||
@@ -94,3 +94,5 @@
|
|||||||
filter: drop-shadow(0 0 8px rgba(255, 77, 77, 0.4));
|
filter: drop-shadow(0 0 8px rgba(255, 77, 77, 0.4));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -335,3 +335,175 @@
|
|||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Light mode overrides */
|
||||||
|
:global(.theme-light) .knowledge-check {
|
||||||
|
background: #fafaf9;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .header-title {
|
||||||
|
color: #1c1917;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .question-text {
|
||||||
|
color: #44403c;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .option-item {
|
||||||
|
background: #ffffff;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .option-item:hover {
|
||||||
|
background: #f5f5f4;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .option-item.selected {
|
||||||
|
border-color: #10b981;
|
||||||
|
background: rgba(16, 185, 129, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .option-letter {
|
||||||
|
color: #059669;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .option-text {
|
||||||
|
color: #292524;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .option-correct {
|
||||||
|
border-color: #10b981 !important;
|
||||||
|
background: rgba(16, 185, 129, 0.08) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .option-incorrect {
|
||||||
|
border-color: #f43f5e !important;
|
||||||
|
background: rgba(244, 63, 94, 0.08) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .option-revealed-correct {
|
||||||
|
border-color: #10b981 !important;
|
||||||
|
background: rgba(16, 185, 129, 0.06) !important;
|
||||||
|
box-shadow: 0 0 8px rgba(16, 185, 129, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .loading-state.shimmer {
|
||||||
|
background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.03), transparent);
|
||||||
|
color: #10b981;
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .submit-btn {
|
||||||
|
background: rgba(0, 0, 0, 0.03);
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||||
|
color: #78716c;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .submit-btn:not(:disabled) {
|
||||||
|
background: #10b981;
|
||||||
|
color: #ffffff;
|
||||||
|
border-color: #10b981;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .submitted-title {
|
||||||
|
color: #1c1917;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .submitted-text {
|
||||||
|
color: #78716c;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .score-card {
|
||||||
|
background: #ffffff;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .score-num {
|
||||||
|
color: #10b981;
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .score-divider {
|
||||||
|
color: #e7e5e4;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .score-total {
|
||||||
|
color: #292524;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .score-percent {
|
||||||
|
color: #78716c;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .reset-quiz-btn {
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||||
|
color: #44403c;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .reset-quiz-btn:hover {
|
||||||
|
background: rgba(0, 0, 0, 0.03);
|
||||||
|
border-color: #1c1917;
|
||||||
|
box-shadow: 0 0 15px rgba(0, 0, 0, 0.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .empty-title {
|
||||||
|
color: #1c1917;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .empty-text {
|
||||||
|
color: #78716c;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .empty-icon-wrapper {
|
||||||
|
background: rgba(16, 185, 129, 0.02);
|
||||||
|
border: 1px solid rgba(16, 185, 129, 0.1);
|
||||||
|
box-shadow: 0 0 20px rgba(16, 185, 129, 0.02);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .empty-quiz-state:hover .empty-icon-wrapper {
|
||||||
|
background: rgba(16, 185, 129, 0.06);
|
||||||
|
border-color: rgba(16, 185, 129, 0.3);
|
||||||
|
box-shadow: 0 0 25px rgba(16, 185, 129, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .generate-quiz-btn {
|
||||||
|
background: rgba(16, 185, 129, 0.05);
|
||||||
|
border: 1px solid #10b981;
|
||||||
|
color: #10b981;
|
||||||
|
text-shadow: none;
|
||||||
|
box-shadow: 0 0 15px rgba(16, 185, 129, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .generate-quiz-btn:not(:disabled):hover {
|
||||||
|
background: #10b981;
|
||||||
|
color: #ffffff;
|
||||||
|
box-shadow: 0 0 25px rgba(16, 185, 129, 0.2);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .generate-quiz-btn:disabled {
|
||||||
|
border-color: rgba(0, 0, 0, 0.1);
|
||||||
|
background: rgba(0, 0, 0, 0.02);
|
||||||
|
color: #a8a29e;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .success-icon-wrapper {
|
||||||
|
background: rgba(16, 185, 129, 0.05);
|
||||||
|
border: 1px solid rgba(16, 185, 129, 0.2);
|
||||||
|
box-shadow: 0 0 20px rgba(16, 185, 129, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .success-glow {
|
||||||
|
color: #10b981;
|
||||||
|
filter: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .neon-glow {
|
||||||
|
color: #10b981;
|
||||||
|
filter: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -117,3 +117,33 @@
|
|||||||
cursor: not-allowed !important;
|
cursor: not-allowed !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Light mode overrides */
|
||||||
|
:global(.theme-light) .selection-ai-panel {
|
||||||
|
background: rgba(254, 254, 254, 0.95);
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .toolbar-btn {
|
||||||
|
color: #57524e;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .toolbar-btn:hover:not(.disabled) {
|
||||||
|
background: rgba(0, 0, 0, 0.04);
|
||||||
|
color: #1c1917;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .toolbar-btn.primary {
|
||||||
|
color: #10b981;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .toolbar-btn.primary:hover:not(.disabled) {
|
||||||
|
background: rgba(16, 185, 129, 0.06);
|
||||||
|
box-shadow: 0 0 12px rgba(16, 185, 129, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .toolbar-divider {
|
||||||
|
background: rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -12,21 +12,21 @@
|
|||||||
<div class="knowledge-graph-container @(GraphService.IsLoading ? "loading" : "")" id="@ContainerId">
|
<div class="knowledge-graph-container @(GraphService.IsLoading ? "loading" : "")" id="@ContainerId">
|
||||||
@if (GraphService.IsLoading || GraphService.CurrentGraphData == null)
|
@if (GraphService.IsLoading || GraphService.CurrentGraphData == null)
|
||||||
{
|
{
|
||||||
<div class="loading-state">
|
<div class="loading-state">
|
||||||
<div class="preloader-robot">
|
<div class="preloader-robot">
|
||||||
<NexusIcon Name="robot" Size="64" Class="neon-pulse" />
|
<NexusIcon Name="robot" Size="64" Class="neon-pulse" />
|
||||||
<div class="scan-line"></div>
|
<div class="scan-line"></div>
|
||||||
|
</div>
|
||||||
|
<NexusTypography Variant="NexusTypography.TypographyVariant.UI">Mapowanie relacji rozdziału...</NexusTypography>
|
||||||
</div>
|
</div>
|
||||||
<NexusTypography Variant="NexusTypography.TypographyVariant.UI">Mapowanie relacji rozdziału...</NexusTypography>
|
|
||||||
</div>
|
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
<div class="graph-controls">
|
<div class="graph-controls">
|
||||||
<button class="zoom-btn" @onclick="ZoomIn" title="Zoom In">+</button>
|
<button class="zoom-btn" @onclick="ZoomIn" title="Zoom In">+</button>
|
||||||
<button class="zoom-btn" @onclick="ZoomOut" title="Zoom Out">−</button>
|
<button class="zoom-btn" @onclick="ZoomOut" title="Zoom Out">−</button>
|
||||||
<button class="zoom-btn reset" @onclick="ZoomReset" title="Reset">⟲</button>
|
<button class="zoom-btn reset" @onclick="ZoomReset" title="Reset">⟲</button>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -49,7 +49,7 @@
|
|||||||
private async Task HandleGraphUpdate()
|
private async Task HandleGraphUpdate()
|
||||||
{
|
{
|
||||||
if (_module == null) return;
|
if (_module == null) return;
|
||||||
|
|
||||||
if (GraphService.CurrentGraphData == null)
|
if (GraphService.CurrentGraphData == null)
|
||||||
{
|
{
|
||||||
await _module.InvokeVoidAsync("clear");
|
await _module.InvokeVoidAsync("clear");
|
||||||
@@ -58,7 +58,7 @@
|
|||||||
{
|
{
|
||||||
await _module.InvokeVoidAsync("updateData", GraphService.CurrentGraphData);
|
await _module.InvokeVoidAsync("updateData", GraphService.CurrentGraphData);
|
||||||
}
|
}
|
||||||
|
|
||||||
await InvokeAsync(StateHasChanged);
|
await InvokeAsync(StateHasChanged);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -78,7 +78,7 @@
|
|||||||
if (firstRender)
|
if (firstRender)
|
||||||
{
|
{
|
||||||
await InitializeGraphAsync();
|
await InitializeGraphAsync();
|
||||||
|
|
||||||
if (GraphService.CurrentGraphData != null)
|
if (GraphService.CurrentGraphData != null)
|
||||||
{
|
{
|
||||||
await HandleGraphUpdate();
|
await HandleGraphUpdate();
|
||||||
@@ -101,7 +101,7 @@
|
|||||||
public async Task OnNodeClicked(string nodeId)
|
public async Task OnNodeClicked(string nodeId)
|
||||||
{
|
{
|
||||||
await InteractionService.NotifyNodeSelected(nodeId);
|
await InteractionService.NotifyNodeSelected(nodeId);
|
||||||
|
|
||||||
if (OnNodeSelected.HasDelegate)
|
if (OnNodeSelected.HasDelegate)
|
||||||
{
|
{
|
||||||
await OnNodeSelected.InvokeAsync(nodeId);
|
await OnNodeSelected.InvokeAsync(nodeId);
|
||||||
@@ -128,7 +128,7 @@
|
|||||||
GraphService.OnGraphUpdated -= HandleGraphUpdate;
|
GraphService.OnGraphUpdated -= HandleGraphUpdate;
|
||||||
GraphService.OnActiveNodeChanged -= HandleActiveNodeChange;
|
GraphService.OnActiveNodeChanged -= HandleActiveNodeChange;
|
||||||
GraphService.OnLoadingChanged -= HandleLoadingChange;
|
GraphService.OnLoadingChanged -= HandleLoadingChange;
|
||||||
|
|
||||||
try
|
try
|
||||||
{
|
{
|
||||||
if (_module is not null)
|
if (_module is not null)
|
||||||
@@ -138,7 +138,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
catch { }
|
catch { }
|
||||||
|
|
||||||
_dotNetHelper?.Dispose();
|
_dotNetHelper?.Dispose();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.knowledge-graph-container.loading > ::deep svg {
|
.knowledge-graph-container.loading> ::deep svg {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -93,9 +93,20 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@keyframes robot-pulse {
|
@keyframes robot-pulse {
|
||||||
0% { transform: scale(1); filter: drop-shadow(0 0 10px var(--nexus-neon)); }
|
0% {
|
||||||
50% { transform: scale(1.1); filter: drop-shadow(0 0 25px var(--nexus-neon)); }
|
transform: scale(1);
|
||||||
100% { transform: scale(1); filter: drop-shadow(0 0 10px var(--nexus-neon)); }
|
filter: drop-shadow(0 0 10px var(--nexus-neon));
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: scale(1.1);
|
||||||
|
filter: drop-shadow(0 0 25px var(--nexus-neon));
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
filter: drop-shadow(0 0 10px var(--nexus-neon));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.scan-line {
|
.scan-line {
|
||||||
@@ -111,9 +122,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@keyframes scan {
|
@keyframes scan {
|
||||||
0% { top: 0; }
|
0% {
|
||||||
50% { top: 100%; }
|
top: 0;
|
||||||
100% { top: 0; }
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
top: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
::deep .nexus-node-active {
|
::deep .nexus-node-active {
|
||||||
@@ -124,11 +143,24 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
::deep @keyframes neon-flash {
|
::deep @keyframes neon-flash {
|
||||||
0% { filter: brightness(1) drop-shadow(0 0 0px var(--nexus-neon)); }
|
0% {
|
||||||
50% { filter: brightness(3) drop-shadow(0 0 30px var(--nexus-neon)); }
|
filter: brightness(1) drop-shadow(0 0 0px var(--nexus-neon));
|
||||||
100% { filter: brightness(1) drop-shadow(0 0 0px var(--nexus-neon)); }
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
filter: brightness(3) drop-shadow(0 0 30px var(--nexus-neon));
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
filter: brightness(1) drop-shadow(0 0 0px var(--nexus-neon));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
::deep .neon-flash-node {
|
::deep .neon-flash-node {
|
||||||
animation: neon-flash 0.8s ease-out;
|
animation: neon-flash 0.8s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.knowledge-graph-container ::deep svg {
|
||||||
|
background: radial-gradient(circle, #1a1a1a 0%, #121212 100%);
|
||||||
|
transition: background 0.3s ease;
|
||||||
|
}
|
||||||
@@ -6,7 +6,7 @@
|
|||||||
padding: 2rem 0;
|
padding: 2rem 0;
|
||||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
/* Dedicated Scrollbar Styling */
|
/* Dedicated Scrollbar Styling */
|
||||||
scrollbar-width: thin;
|
scrollbar-width: thin;
|
||||||
scrollbar-color: rgba(0, 255, 153, 0.2) transparent;
|
scrollbar-color: rgba(0, 255, 153, 0.2) transparent;
|
||||||
@@ -35,7 +35,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.reader-canvas.theme-light {
|
.reader-canvas.theme-light {
|
||||||
background-color: #F9F9F9; /* Paper-white requirement */
|
background-color: #f4f1ea;
|
||||||
|
/* Warm light beige/gray background */
|
||||||
}
|
}
|
||||||
|
|
||||||
.reader-flow-container {
|
.reader-flow-container {
|
||||||
@@ -46,7 +47,8 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 1.5rem;
|
gap: 1.5rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 3rem 4rem 15rem 4rem; /* Large padding-bottom for reachability, plus comfortable side margins */
|
padding: 3rem 4rem 15rem 4rem;
|
||||||
|
/* Large padding-bottom for reachability, plus comfortable side margins */
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
transition: background-color 0.3s, box-shadow 0.3s, border-color 0.3s;
|
transition: background-color 0.3s, box-shadow 0.3s, border-color 0.3s;
|
||||||
@@ -61,7 +63,7 @@
|
|||||||
.theme-light .reader-flow-container {
|
.theme-light .reader-flow-container {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
border: 1px solid rgba(0, 0, 0, 0.04);
|
border: 1px solid rgba(0, 0, 0, 0.04);
|
||||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
|
box-shadow: 0 4px 20px rgba(139, 130, 115, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
.block-wrapper {
|
.block-wrapper {
|
||||||
@@ -79,11 +81,13 @@
|
|||||||
font-size: 1.15rem;
|
font-size: 1.15rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
text-align: left !important;
|
text-align: left !important;
|
||||||
color: #e4e4e7; /* Off-white with light gray tint */
|
color: #e4e4e7;
|
||||||
|
/* Off-white with light gray tint */
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-light ::deep .nexus-ebook {
|
.theme-light ::deep .nexus-ebook {
|
||||||
color: #1a1a1a;
|
color: #292524;
|
||||||
|
/* Warm charcoal for legibility */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Callout Box styling for legacy blockquote segments */
|
/* Callout Box styling for legacy blockquote segments */
|
||||||
@@ -99,22 +103,25 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.theme-light ::deep .nexus-ebook blockquote {
|
.theme-light ::deep .nexus-ebook blockquote {
|
||||||
background-color: rgba(0, 0, 0, 0.02);
|
background-color: rgba(245, 158, 11, 0.04);
|
||||||
color: #333333;
|
border-left: 4px solid #f59e0b;
|
||||||
|
color: #44403c;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Technical Code Block Container */
|
/* Technical Code Block Container */
|
||||||
::deep .nexus-ebook pre {
|
::deep .nexus-ebook pre {
|
||||||
background-color: #2d2d2d; /* Dark theme for code for better contrast */
|
background-color: #2d2d2d;
|
||||||
|
/* Dark theme for code for better contrast */
|
||||||
color: #e0e0e0;
|
color: #e0e0e0;
|
||||||
padding: 1.25rem;
|
padding: 1.25rem;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
margin: 2rem 0;
|
margin: 2rem 0;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
|
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
border-left: 4px solid var(--nexus-neon); /* Nexus neon accent */
|
border-left: 4px solid var(--nexus-neon);
|
||||||
|
/* Nexus neon accent */
|
||||||
|
|
||||||
/* Dedicated Scrollbar for Code */
|
/* Dedicated Scrollbar for Code */
|
||||||
scrollbar-width: thin;
|
scrollbar-width: thin;
|
||||||
scrollbar-color: rgba(0, 255, 153, 0.3) transparent;
|
scrollbar-color: rgba(0, 255, 153, 0.3) transparent;
|
||||||
@@ -141,7 +148,8 @@
|
|||||||
/* Inline Code Highlight */
|
/* Inline Code Highlight */
|
||||||
::deep .nexus-ebook p code {
|
::deep .nexus-ebook p code {
|
||||||
background-color: rgba(0, 0, 0, 0.05);
|
background-color: rgba(0, 0, 0, 0.05);
|
||||||
color: #d63384; /* Classic differentiator for inline code */
|
color: #d63384;
|
||||||
|
/* Classic differentiator for inline code */
|
||||||
padding: 0.2rem 0.4rem;
|
padding: 0.2rem 0.4rem;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
@@ -193,9 +201,20 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@keyframes pulse-small {
|
@keyframes pulse-small {
|
||||||
0% { transform: scale(1); opacity: 1; }
|
0% {
|
||||||
50% { transform: scale(1.1); opacity: 0.8; }
|
transform: scale(1);
|
||||||
100% { transform: scale(1); opacity: 1; }
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: scale(1.1);
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Chapter Loading Overlay and Spinners */
|
/* Chapter Loading Overlay and Spinners */
|
||||||
@@ -286,29 +305,48 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@keyframes spin {
|
@keyframes spin {
|
||||||
0% { transform: rotate(0deg); }
|
0% {
|
||||||
100% { transform: rotate(360deg); }
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes scaleIn {
|
@keyframes scaleIn {
|
||||||
from { transform: scale(0.9) translateY(10px); opacity: 0; }
|
from {
|
||||||
to { transform: scale(1) translateY(0); opacity: 1; }
|
transform: scale(0.9) translateY(10px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
transform: scale(1) translateY(0);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes fadeIn {
|
@keyframes fadeIn {
|
||||||
from { opacity: 0; }
|
from {
|
||||||
to { opacity: 1; }
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* MOBILE READER UI OVERRIDES */
|
/* MOBILE READER UI OVERRIDES */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.reader-canvas {
|
.reader-canvas {
|
||||||
padding-top: 54px !important;
|
padding-top: 54px !important;
|
||||||
padding-bottom: 80px !important; /* Ensure content is clear of bottom toolbar */
|
padding-bottom: 80px !important;
|
||||||
|
/* Ensure content is clear of bottom toolbar */
|
||||||
}
|
}
|
||||||
|
|
||||||
.reader-flow-container {
|
.reader-flow-container {
|
||||||
padding-bottom: 4rem; /* Safe breathing room */
|
padding-bottom: 4rem;
|
||||||
|
/* Safe breathing room */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -378,7 +416,20 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.theme-light .nexus-mobile-chapter-title {
|
.theme-light .nexus-mobile-chapter-title {
|
||||||
color: #1a1a1a;
|
color: #292524;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .nexus-mobile-escape-btn {
|
||||||
|
color: #78716c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .nexus-mobile-escape-btn:hover {
|
||||||
|
color: #10b981;
|
||||||
|
background-color: rgba(16, 185, 129, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .nexus-mobile-escape-btn:active {
|
||||||
|
background-color: rgba(16, 185, 129, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nexus-chapter-nav-btn {
|
.nexus-chapter-nav-btn {
|
||||||
@@ -412,4 +463,4 @@
|
|||||||
|
|
||||||
.theme-light .nexus-chapter-nav-btn:hover:not(:disabled) {
|
.theme-light .nexus-chapter-nav-btn:hover:not(:disabled) {
|
||||||
background: rgba(0, 0, 0, 0.06);
|
background: rgba(0, 0, 0, 0.06);
|
||||||
}
|
}
|
||||||
@@ -18,11 +18,10 @@
|
|||||||
transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
|
transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Light mode override for .reader-footer */
|
|
||||||
:global(.theme-light) .reader-footer {
|
:global(.theme-light) .reader-footer {
|
||||||
background: rgba(255, 255, 255, 0.7);
|
background: rgba(254, 254, 254, 0.75);
|
||||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-content {
|
.footer-content {
|
||||||
@@ -72,14 +71,14 @@
|
|||||||
:global(.theme-light) .nav-btn {
|
:global(.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: #71717a; /* Zinc-500 for light mode */
|
color: #78716c; /* Warm stone-500 */
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .nav-btn:hover:not(:disabled),
|
:global(.theme-light) .nav-btn:hover:not(:disabled),
|
||||||
:global(.theme-light) .nav-btn:focus:not(:disabled) {
|
:global(.theme-light) .nav-btn:focus:not(:disabled) {
|
||||||
background: rgba(0, 0, 0, 0.05);
|
background: rgba(16, 185, 129, 0.05);
|
||||||
border-color: var(--nexus-neon, #00bb77);
|
border-color: #10b981;
|
||||||
color: var(--nexus-neon, #00bb77);
|
color: #10b981;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -94,7 +93,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .chapter-info {
|
:global(.theme-light) .chapter-info {
|
||||||
color: #18181b; /* Zinc-900 for high light contrast */
|
color: #292524; /* Warm charcoal for legibility */
|
||||||
}
|
}
|
||||||
|
|
||||||
.chapter-title {
|
.chapter-title {
|
||||||
@@ -113,7 +112,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .chapter-count {
|
:global(.theme-light) .chapter-count {
|
||||||
color: #71717a; /* Zinc-500 secondary info for light mode */
|
color: #78716c; /* Warm stone-500 secondary info */
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-container {
|
.progress-container {
|
||||||
@@ -137,6 +136,10 @@
|
|||||||
transition: width 0.3s ease;
|
transition: width 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:global(.theme-light) .progress-bar {
|
||||||
|
background: #10b981;
|
||||||
|
}
|
||||||
|
|
||||||
.meta-info {
|
.meta-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -148,7 +151,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
:global(.theme-light) .meta-info {
|
:global(.theme-light) .meta-info {
|
||||||
color: #71717a;
|
color: #78716c;
|
||||||
}
|
}
|
||||||
|
|
||||||
.battery {
|
.battery {
|
||||||
|
|||||||
@@ -30,7 +30,8 @@ main {
|
|||||||
.intelligence-sidebar {
|
.intelligence-sidebar {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 50px 1fr;
|
grid-template-columns: 50px 1fr;
|
||||||
width: 100%; /* controlled by grid */
|
width: 100%;
|
||||||
|
/* controlled by grid */
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: var(--nexus-card);
|
background: var(--nexus-card);
|
||||||
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);
|
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);
|
||||||
@@ -49,7 +50,8 @@ main {
|
|||||||
border-left: 1px solid rgba(255, 255, 255, 0.05);
|
border-left: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.resizer:hover, .app-container.is-resizing .resizer {
|
.resizer:hover,
|
||||||
|
.app-container.is-resizing .resizer {
|
||||||
background: var(--nexus-neon);
|
background: var(--nexus-neon);
|
||||||
width: 6px;
|
width: 6px;
|
||||||
box-shadow: 0 0 10px var(--nexus-neon);
|
box-shadow: 0 0 10px var(--nexus-neon);
|
||||||
@@ -151,9 +153,20 @@ main {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@keyframes quiz-pulse {
|
@keyframes quiz-pulse {
|
||||||
0% { filter: drop-shadow(0 0 2px var(--nexus-neon)); transform: scale(1); }
|
0% {
|
||||||
50% { filter: drop-shadow(0 0 10px var(--nexus-neon)); transform: scale(1.1); }
|
filter: drop-shadow(0 0 2px var(--nexus-neon));
|
||||||
100% { filter: drop-shadow(0 0 2px var(--nexus-neon)); transform: scale(1); }
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
filter: drop-shadow(0 0 10px var(--nexus-neon));
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
filter: drop-shadow(0 0 2px var(--nexus-neon));
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Contextual Intelligence Panel Layout */
|
/* Contextual Intelligence Panel Layout */
|
||||||
@@ -228,9 +241,20 @@ main {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@keyframes glow-pulse {
|
@keyframes glow-pulse {
|
||||||
0% { transform: scale(0.9); opacity: 0.5; }
|
0% {
|
||||||
50% { transform: scale(1.1); opacity: 1; }
|
transform: scale(0.9);
|
||||||
100% { transform: scale(0.9); opacity: 0.5; }
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: scale(1.1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: scale(0.9);
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.placeholder-text {
|
.placeholder-text {
|
||||||
@@ -247,8 +271,15 @@ main {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@keyframes fade-in {
|
@keyframes fade-in {
|
||||||
from { opacity: 0; transform: translateY(5px); }
|
from {
|
||||||
to { opacity: 1; transform: translateY(0); }
|
opacity: 0;
|
||||||
|
transform: translateY(5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.node-header-section {
|
.node-header-section {
|
||||||
@@ -434,9 +465,20 @@ main {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@keyframes quiz-pulse-glow {
|
@keyframes quiz-pulse-glow {
|
||||||
0% { border-color: rgba(0, 240, 255, 0.3); box-shadow: 0 0 5px rgba(0, 240, 255, 0.1); }
|
0% {
|
||||||
50% { border-color: var(--nexus-neon, #00f0ff); box-shadow: 0 0 25px rgba(0, 240, 255, 0.3); }
|
border-color: rgba(0, 240, 255, 0.3);
|
||||||
100% { border-color: rgba(0, 240, 255, 0.3); box-shadow: 0 0 5px rgba(0, 240, 255, 0.1); }
|
box-shadow: 0 0 5px rgba(0, 240, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
border-color: var(--nexus-neon, #00f0ff);
|
||||||
|
box-shadow: 0 0 25px rgba(0, 240, 255, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
border-color: rgba(0, 240, 255, 0.3);
|
||||||
|
box-shadow: 0 0 5px rgba(0, 240, 255, 0.1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Quiz Navigation Header */
|
/* Quiz Navigation Header */
|
||||||
@@ -481,7 +523,8 @@ main {
|
|||||||
|
|
||||||
.platform-mobile .reader-pane {
|
.platform-mobile .reader-pane {
|
||||||
width: 100vw !important;
|
width: 100vw !important;
|
||||||
height: 100vh !important; /* full viewport height */
|
height: 100vh !important;
|
||||||
|
/* full viewport height */
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
@@ -508,9 +551,11 @@ main {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.platform-mobile .nexus-mobile-reader-tabs {
|
.platform-mobile .nexus-mobile-reader-tabs {
|
||||||
display: none; /* Keep hidden by default */
|
display: none;
|
||||||
|
/* Keep hidden by default */
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh; /* full viewport height */
|
height: 100vh;
|
||||||
|
/* full viewport height */
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
@@ -521,7 +566,8 @@ main {
|
|||||||
|
|
||||||
.app-container.platform-mobile.active-mobile-tab-graph .nexus-mobile-reader-tabs,
|
.app-container.platform-mobile.active-mobile-tab-graph .nexus-mobile-reader-tabs,
|
||||||
.app-container.platform-mobile.active-mobile-tab-concepts .nexus-mobile-reader-tabs {
|
.app-container.platform-mobile.active-mobile-tab-concepts .nexus-mobile-reader-tabs {
|
||||||
display: block; /* Show only when graph or concepts tabs are active */
|
display: block;
|
||||||
|
/* Show only when graph or concepts tabs are active */
|
||||||
}
|
}
|
||||||
|
|
||||||
.nexus-mobile-tab-content {
|
.nexus-mobile-tab-content {
|
||||||
@@ -544,6 +590,7 @@ main {
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateY(10px);
|
transform: translateY(10px);
|
||||||
}
|
}
|
||||||
|
|
||||||
to {
|
to {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
@@ -623,9 +670,18 @@ main {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@keyframes quiz-pulse-btn-anim {
|
@keyframes quiz-pulse-btn-anim {
|
||||||
0% { color: rgba(255, 255, 255, 0.5); }
|
0% {
|
||||||
50% { color: #f43f5e; text-shadow: 0 0 8px rgba(244, 63, 94, 0.6); }
|
color: rgba(255, 255, 255, 0.5);
|
||||||
100% { color: rgba(255, 255, 255, 0.5); }
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
color: #f43f5e;
|
||||||
|
text-shadow: 0 0 8px rgba(244, 63, 94, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
color: rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile-insight-body {
|
.mobile-insight-body {
|
||||||
@@ -653,22 +709,42 @@ main {
|
|||||||
|
|
||||||
/* Theme-specific Overrides for Light Mode */
|
/* Theme-specific Overrides for Light Mode */
|
||||||
.app-container.theme-light .intelligence-sidebar {
|
.app-container.theme-light .intelligence-sidebar {
|
||||||
background: #ffffff;
|
background: #f4f1ea;
|
||||||
border-left: 1px solid rgba(0, 0, 0, 0.08);
|
border-left: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
box-shadow: -10px 0 30px rgba(139, 130, 115, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-container.theme-light .resizer {
|
||||||
|
background: rgba(0, 0, 0, 0.02);
|
||||||
|
border-left: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-container.theme-light .resizer:hover,
|
||||||
|
.app-container.theme-light.is-resizing .resizer {
|
||||||
|
background: #10b981;
|
||||||
|
box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-container.theme-light .intelligence-header {
|
.app-container.theme-light .intelligence-header {
|
||||||
background: rgba(0, 0, 0, 0.02);
|
background: rgba(0, 0, 0, 0.02);
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
color: #121212;
|
color: #292524;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-container.theme-light .close-btn {
|
.app-container.theme-light .close-btn {
|
||||||
color: #666;
|
color: #878378;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-container.theme-light .close-btn:hover {
|
||||||
|
color: #292524;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-container.theme-light .visual-workspace {
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-container.theme-light .contextual-intelligence-panel {
|
.app-container.theme-light .contextual-intelligence-panel {
|
||||||
background: rgba(0, 0, 0, 0.02);
|
background: #f4f1ea;
|
||||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -678,31 +754,142 @@ main {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.app-container.theme-light .panel-title {
|
.app-container.theme-light .panel-title {
|
||||||
color: rgba(0, 0, 0, 0.6);
|
color: #78716c;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-container.theme-light .no-node-selected {
|
.app-container.theme-light .no-node-selected {
|
||||||
color: rgba(0, 0, 0, 0.5);
|
color: #878378;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-container.theme-light .placeholder-glow {
|
||||||
|
background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, transparent 70%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-container.theme-light .node-header-section {
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-container.theme-light .node-label {
|
||||||
|
color: #292524;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-container.theme-light .node-details .section-title {
|
.app-container.theme-light .node-details .section-title {
|
||||||
color: #121212;
|
color: #78716c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-container.theme-light .neon-sub-header {
|
||||||
|
border-left: 2px solid #10b981;
|
||||||
|
text-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-container.theme-light .node-description {
|
.app-container.theme-light .node-description {
|
||||||
color: #333333;
|
color: #292524;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-container.theme-light .node-summary {
|
.app-container.theme-light .node-summary {
|
||||||
color: #333333;
|
color: #44403c;
|
||||||
|
background: rgba(0, 0, 0, 0.02);
|
||||||
|
border-left: 2px solid rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-container.theme-light .key-term-item {
|
.app-container.theme-light .key-term-item {
|
||||||
color: #333333;
|
color: #292524;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-container.theme-light .term-bullet {
|
||||||
|
color: #10b981;
|
||||||
|
filter: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-container.theme-light .sidebar-footer {
|
||||||
|
background: #f4f1ea;
|
||||||
|
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-container.theme-light .open-quiz-btn {
|
||||||
|
background: rgba(16, 185, 129, 0.03);
|
||||||
|
border: 1px solid rgba(16, 185, 129, 0.3);
|
||||||
|
color: #10b981;
|
||||||
|
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-container.theme-light .open-quiz-btn:hover {
|
||||||
|
background: rgba(16, 185, 129, 0.08);
|
||||||
|
border-color: #10b981;
|
||||||
|
color: #10b981;
|
||||||
|
box-shadow: 0 0 20px rgba(16, 185, 129, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-container.theme-light .quiz-pulse-btn {
|
||||||
|
animation: quiz-pulse-btn-light 2s infinite ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes quiz-pulse-btn-light {
|
||||||
|
0% {
|
||||||
|
border-color: rgba(16, 185, 129, 0.3);
|
||||||
|
box-shadow: 0 0 5px rgba(16, 185, 129, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
border-color: #10b981;
|
||||||
|
box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
border-color: rgba(16, 185, 129, 0.3);
|
||||||
|
box-shadow: 0 0 5px rgba(16, 185, 129, 0.05);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-container.theme-light .quiz-nav {
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
background: rgba(0, 0, 0, 0.01);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-container.theme-light .back-to-graph-btn {
|
||||||
|
color: #78716c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-container.theme-light .back-to-graph-btn:hover {
|
||||||
|
color: #10b981;
|
||||||
|
background: rgba(0, 0, 0, 0.03);
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-container.theme-light .mobile-insight-body {
|
.app-container.theme-light .mobile-insight-body {
|
||||||
background: #f9f9f9;
|
background: #f4f1ea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-container.theme-light .mobile-insight-header {
|
||||||
|
background: #f4f1ea;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-container.theme-light .mobile-insight-nav {
|
||||||
|
background: rgba(0, 0, 0, 0.02);
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-container.theme-light .mobile-insight-nav-btn {
|
||||||
|
color: #78716c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-container.theme-light .mobile-insight-nav-btn.active {
|
||||||
|
background: rgba(16, 185, 129, 0.1);
|
||||||
|
color: #10b981;
|
||||||
|
box-shadow: 0 0 10px rgba(16, 185, 129, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-container.theme-light .skeleton-line {
|
||||||
|
background: linear-gradient(90deg, rgba(0, 0, 0, 0.03) 25%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.03) 75%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-container.theme-light .clear-summary-btn {
|
||||||
|
color: rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-container.theme-light .clear-summary-btn:hover {
|
||||||
|
color: #ef4444;
|
||||||
|
background: rgba(239, 68, 68, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Skeleton Loader for Selection Summary */
|
/* Skeleton Loader for Selection Summary */
|
||||||
@@ -727,15 +914,27 @@ main {
|
|||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.skeleton-line.w-90 { width: 90%; }
|
.skeleton-line.w-90 {
|
||||||
.skeleton-line.w-80 { width: 80%; }
|
width: 90%;
|
||||||
.skeleton-line.w-70 { width: 70%; }
|
}
|
||||||
.skeleton-line.w-60 { width: 60%; }
|
|
||||||
|
.skeleton-line.w-80 {
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skeleton-line.w-70 {
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skeleton-line.w-60 {
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes skeleton-shimmer {
|
@keyframes skeleton-shimmer {
|
||||||
0% {
|
0% {
|
||||||
background-position: 200% 0;
|
background-position: 200% 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
background-position: -200% 0;
|
background-position: -200% 0;
|
||||||
}
|
}
|
||||||
@@ -767,4 +966,4 @@ main {
|
|||||||
.clear-summary-btn:hover {
|
.clear-summary-btn:hover {
|
||||||
color: #ef4444;
|
color: #ef4444;
|
||||||
background: rgba(239, 68, 68, 0.1);
|
background: rgba(239, 68, 68, 0.1);
|
||||||
}
|
}
|
||||||
@@ -19,31 +19,32 @@
|
|||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Global Semantic Theme Mapping */
|
|
||||||
--nexus-primary: var(--nexus-neon);
|
|
||||||
--nexus-primary-glow: var(--nexus-neon-glow);
|
|
||||||
--nexus-primary-hover: #00e688;
|
|
||||||
|
|
||||||
/* Standard Layout Tokens */
|
|
||||||
--radius-sm: 8px;
|
|
||||||
--radius-md: 12px;
|
|
||||||
--radius-lg: 16px;
|
|
||||||
--radius-xl: 20px;
|
|
||||||
|
|
||||||
/* Safe Area Insets with fallbacks */
|
|
||||||
--safe-area-inset-top: env(safe-area-inset-top, 0px);
|
|
||||||
--safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
|
|
||||||
--safe-area-inset-left: env(safe-area-inset-left, 0px);
|
|
||||||
--safe-area-inset-right: env(safe-area-inset-right, 0px);
|
|
||||||
|
|
||||||
/* Transitions */
|
/* Global Semantic Theme Mapping */
|
||||||
--nexus-transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
--nexus-primary: var(--nexus-neon);
|
||||||
|
--nexus-primary-glow: var(--nexus-neon-glow);
|
||||||
|
--nexus-primary-hover: #00e688;
|
||||||
|
|
||||||
|
/* Standard Layout Tokens */
|
||||||
|
--radius-sm: 8px;
|
||||||
|
--radius-md: 12px;
|
||||||
|
--radius-lg: 16px;
|
||||||
|
--radius-xl: 20px;
|
||||||
|
|
||||||
|
/* Safe Area Insets with fallbacks */
|
||||||
|
--safe-area-inset-top: env(safe-area-inset-top, 0px);
|
||||||
|
--safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
|
||||||
|
--safe-area-inset-left: env(safe-area-inset-left, 0px);
|
||||||
|
--safe-area-inset-right: env(safe-area-inset-right, 0px);
|
||||||
|
|
||||||
|
/* Transitions */
|
||||||
|
--nexus-transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Global Glassmorphism with Fallback */
|
/* Global Glassmorphism with Fallback */
|
||||||
.glass-panel {
|
.glass-panel {
|
||||||
background: rgba(20, 20, 20, 0.85); /* Darker fallback for readability */
|
background: rgba(20, 20, 20, 0.85);
|
||||||
|
/* Darker fallback for readability */
|
||||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
border-radius: var(--radius-xl);
|
border-radius: var(--radius-xl);
|
||||||
padding: 1.5rem;
|
padding: 1.5rem;
|
||||||
@@ -71,33 +72,167 @@
|
|||||||
border: none;
|
border: none;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-nexus-primary {
|
.btn-nexus-primary {
|
||||||
background: var(--nexus-neon);
|
background: var(--nexus-neon);
|
||||||
color: #000000;
|
color: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-nexus-secondary {
|
.btn-nexus-secondary {
|
||||||
background: rgba(255, 255, 255, 0.05);
|
background: rgba(255, 255, 255, 0.05);
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-nexus:hover {
|
.btn-nexus:hover {
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
filter: brightness(1.1);
|
filter: brightness(1.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-nexus-primary:hover {
|
.btn-nexus-primary:hover {
|
||||||
box-shadow: 0 4px 15px var(--nexus-primary-glow);
|
box-shadow: 0 4px 15px var(--nexus-primary-glow);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-nexus-secondary:hover {
|
.btn-nexus-secondary:hover {
|
||||||
box-shadow: 0 4px 15px rgba(255, 255, 255, 0.05);
|
box-shadow: 0 4px 15px rgba(255, 255, 255, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.theme-light {
|
.theme-light {
|
||||||
--nexus-bg: var(--nexus-paper);
|
--nexus-bg: #f4f1ea;
|
||||||
--nexus-card: #ffffff;
|
--nexus-card: #ffffff;
|
||||||
--nexus-text: #121212;
|
--nexus-text: #2d2a26;
|
||||||
|
--nexus-selection: rgba(16, 185, 129, 0.18);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Scoped Component overrides for Light Mode (Bypassing Blazor CSS isolation) */
|
||||||
|
.theme-light .intelligence-toolbar {
|
||||||
|
background: #f5f5f4 !important;
|
||||||
|
border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
|
||||||
|
box-shadow: inset -2px 0 10px rgba(0, 0, 0, 0.02) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .intelligence-toolbar .toolbar-item {
|
||||||
|
color: #78716c !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .intelligence-toolbar .toolbar-item:hover {
|
||||||
|
color: #10b981 !important;
|
||||||
|
background: rgba(16, 185, 129, 0.05) !important;
|
||||||
|
box-shadow: 0 0 10px rgba(16, 185, 129, 0.1) !important;
|
||||||
|
filter: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .intelligence-toolbar .toolbar-item.active {
|
||||||
|
color: #10b981 !important;
|
||||||
|
background: rgba(16, 185, 129, 0.08) !important;
|
||||||
|
box-shadow: 0 0 15px rgba(16, 185, 129, 0.15) !important;
|
||||||
|
filter: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .intelligence-toolbar .toolbar-item.active::after {
|
||||||
|
background: #10b981 !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .intelligence-toolbar .toolbar-item.focus-active {
|
||||||
|
color: #10b981 !important;
|
||||||
|
filter: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .intelligence-toolbar .toolbar-item.logout-item {
|
||||||
|
border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
|
||||||
|
color: #a8a29e !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .intelligence-toolbar .toolbar-item.logout-item:hover {
|
||||||
|
color: #ef4444 !important;
|
||||||
|
filter: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .knowledge-graph-container svg {
|
||||||
|
background: radial-gradient(circle, #ffffff 0%, #e8e4da 100%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .graph-controls {
|
||||||
|
background: rgba(254, 254, 253, 0.4) !important;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.08) !important;
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .zoom-btn {
|
||||||
|
background: rgba(0, 0, 0, 0.02) !important;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.06) !important;
|
||||||
|
color: #78716c !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .zoom-btn:hover {
|
||||||
|
background: rgba(16, 185, 129, 0.05) !important;
|
||||||
|
color: #10b981 !important;
|
||||||
|
border-color: #10b981 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .loading-state {
|
||||||
|
color: #292524 !important;
|
||||||
|
background: rgba(254, 254, 254, 0.85) !important;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.05) !important;
|
||||||
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .neon-pulse {
|
||||||
|
color: #10b981 !important;
|
||||||
|
filter: none !important;
|
||||||
|
animation: robot-pulse-light 2s infinite ease-in-out !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .scan-line {
|
||||||
|
background: #10b981 !important;
|
||||||
|
box-shadow: 0 0 10px rgba(16, 185, 129, 0.5) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .nexus-node-active {
|
||||||
|
stroke: #10b981 !important;
|
||||||
|
filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.2)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes robot-pulse-light {
|
||||||
|
0% { transform: scale(1); }
|
||||||
|
50% { transform: scale(1.05); }
|
||||||
|
100% { transform: scale(1); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light ::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light ::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .glass-panel {
|
||||||
|
background: rgba(255, 255, 255, 0.85);
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports (backdrop-filter: blur(10px)) {
|
||||||
|
.theme-light .glass-panel {
|
||||||
|
background: rgba(255, 255, 255, 0.7);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .btn-nexus-secondary {
|
||||||
|
background: rgba(0, 0, 0, 0.04);
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||||
|
color: #292524;
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-light .btn-nexus-secondary:hover {
|
||||||
|
background: rgba(0, 0, 0, 0.08);
|
||||||
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@@ -111,13 +246,13 @@ body {
|
|||||||
font-family: var(--nexus-font-sans);
|
font-family: var(--nexus-font-sans);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
/* Handle Notches */
|
/* Handle Notches */
|
||||||
padding-top: var(--safe-area-inset-top);
|
padding-top: var(--safe-area-inset-top);
|
||||||
padding-bottom: var(--safe-area-inset-bottom);
|
padding-bottom: var(--safe-area-inset-bottom);
|
||||||
padding-left: var(--safe-area-inset-left);
|
padding-left: var(--safe-area-inset-left);
|
||||||
padding-right: var(--safe-area-inset-right);
|
padding-right: var(--safe-area-inset-right);
|
||||||
|
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
@@ -174,7 +309,8 @@ h1:focus {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Preloader Styles */
|
/* Preloader Styles */
|
||||||
#app-preloader, .app-preloader {
|
#app-preloader,
|
||||||
|
.app-preloader {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
@@ -216,12 +352,25 @@ h1:focus {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@keyframes spin {
|
@keyframes spin {
|
||||||
0% { transform: rotate(0deg); }
|
0% {
|
||||||
100% { transform: rotate(360deg); }
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes pulse {
|
@keyframes pulse {
|
||||||
0%, 100% { opacity: 1; transform: scale(1); }
|
|
||||||
50% { opacity: 0.5; transform: scale(0.95); }
|
0%,
|
||||||
}
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
opacity: 0.5;
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -131,16 +131,16 @@ const getNodeGlyph = d => {
|
|||||||
|
|
||||||
function updateNodeAppearances() {
|
function updateNodeAppearances() {
|
||||||
if (!node) return;
|
if (!node) return;
|
||||||
|
|
||||||
node.each(function(d) {
|
node.each(function (d) {
|
||||||
const g = d3.select(this);
|
const g = d3.select(this);
|
||||||
const rect = g.select(".node-pill");
|
const rect = g.select(".node-pill");
|
||||||
const text = g.select("text");
|
const text = g.select("text");
|
||||||
|
|
||||||
const isCurrent = getNodeGroup(d) === 'current';
|
const isCurrent = getNodeGroup(d) === 'current';
|
||||||
const isSelected = activeNodeId && d.id === activeNodeId;
|
const isSelected = activeNodeId && d.id === activeNodeId;
|
||||||
const showFull = !isMobileMode || isSelected || isCurrent;
|
const showFull = !isMobileMode || isSelected || isCurrent;
|
||||||
|
|
||||||
if (showFull) {
|
if (showFull) {
|
||||||
rect.transition().duration(250)
|
rect.transition().duration(250)
|
||||||
.attr("x", -getPillWidth(d) / 2)
|
.attr("x", -getPillWidth(d) / 2)
|
||||||
@@ -148,7 +148,7 @@ function updateNodeAppearances() {
|
|||||||
.attr("height", 30)
|
.attr("height", 30)
|
||||||
.attr("rx", 15)
|
.attr("rx", 15)
|
||||||
.attr("y", -15);
|
.attr("y", -15);
|
||||||
|
|
||||||
text.text(getDisplayLabel(d))
|
text.text(getDisplayLabel(d))
|
||||||
.attr("font-size", isCurrent || isSelected ? "0.85rem" : "0.8rem")
|
.attr("font-size", isCurrent || isSelected ? "0.85rem" : "0.8rem")
|
||||||
.attr("font-weight", isCurrent || isSelected ? "600" : "normal");
|
.attr("font-weight", isCurrent || isSelected ? "600" : "normal");
|
||||||
@@ -159,7 +159,7 @@ function updateNodeAppearances() {
|
|||||||
.attr("height", 30)
|
.attr("height", 30)
|
||||||
.attr("rx", 15)
|
.attr("rx", 15)
|
||||||
.attr("y", -15);
|
.attr("y", -15);
|
||||||
|
|
||||||
text.text(getNodeGlyph(d))
|
text.text(getNodeGlyph(d))
|
||||||
.attr("font-size", "0.9rem")
|
.attr("font-size", "0.9rem")
|
||||||
.attr("font-weight", "bold");
|
.attr("font-weight", "bold");
|
||||||
@@ -170,7 +170,7 @@ function updateNodeAppearances() {
|
|||||||
export function setMobileMode(isMobile) {
|
export function setMobileMode(isMobile) {
|
||||||
isMobileMode = isMobile;
|
isMobileMode = isMobile;
|
||||||
if (!simulation) return;
|
if (!simulation) return;
|
||||||
|
|
||||||
if (isMobile) {
|
if (isMobile) {
|
||||||
simulation.force("charge", d3.forceManyBody().strength(-60));
|
simulation.force("charge", d3.forceManyBody().strength(-60));
|
||||||
simulation.force("link").distance(180);
|
simulation.force("link").distance(180);
|
||||||
@@ -187,7 +187,7 @@ export function setMobileMode(isMobile) {
|
|||||||
simulation.force("link").distance(120);
|
simulation.force("link").distance(120);
|
||||||
simulation.force("collide", d3.forceCollide().radius(d => (getPillWidth(d) / 2) + 20));
|
simulation.force("collide", d3.forceCollide().radius(d => (getPillWidth(d) / 2) + 20));
|
||||||
}
|
}
|
||||||
|
|
||||||
updateNodeAppearances();
|
updateNodeAppearances();
|
||||||
simulation.alpha(0.3).restart();
|
simulation.alpha(0.3).restart();
|
||||||
}
|
}
|
||||||
@@ -212,7 +212,7 @@ export function mount(containerId, data, dotNetHelper) {
|
|||||||
|
|
||||||
// Radial gradients for Nebula effects
|
// Radial gradients for Nebula effects
|
||||||
const defs = svgElement.append("defs");
|
const defs = svgElement.append("defs");
|
||||||
|
|
||||||
// Fallback radial gradient for legacy nebulaGlow
|
// Fallback radial gradient for legacy nebulaGlow
|
||||||
const radialGradient = defs.append("radialGradient")
|
const radialGradient = defs.append("radialGradient")
|
||||||
.attr("id", "nebulaGlow")
|
.attr("id", "nebulaGlow")
|
||||||
@@ -275,7 +275,7 @@ export function mount(containerId, data, dotNetHelper) {
|
|||||||
zoomBehavior = d3.zoom()
|
zoomBehavior = d3.zoom()
|
||||||
.scaleExtent([0.3, 4])
|
.scaleExtent([0.3, 4])
|
||||||
.on("zoom", (e) => rootGroup.attr("transform", e.transform));
|
.on("zoom", (e) => rootGroup.attr("transform", e.transform));
|
||||||
|
|
||||||
svgElement.call(zoomBehavior).on("wheel.zoom", null);
|
svgElement.call(zoomBehavior).on("wheel.zoom", null);
|
||||||
|
|
||||||
// Use ResizeObserver for more reliable container size tracking
|
// Use ResizeObserver for more reliable container size tracking
|
||||||
@@ -324,7 +324,7 @@ export function mount(containerId, data, dotNetHelper) {
|
|||||||
return `translate(${d.x},${d.y})`;
|
return `translate(${d.x},${d.y})`;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if (badge && badge.style("display") !== "none") {
|
if (badge && badge.style("display") !== "none") {
|
||||||
const activeData = badge.datum();
|
const activeData = badge.datum();
|
||||||
if (activeData) {
|
if (activeData) {
|
||||||
@@ -424,9 +424,9 @@ export function updateData(data) {
|
|||||||
|
|
||||||
g.append("title")
|
g.append("title")
|
||||||
.text(d => d.description ? `${d.label}\n\n${d.description}` : d.label);
|
.text(d => d.description ? `${d.label}\n\n${d.description}` : d.label);
|
||||||
|
|
||||||
g.transition().duration(500).style("opacity", 1);
|
g.transition().duration(500).style("opacity", 1);
|
||||||
|
|
||||||
return g;
|
return g;
|
||||||
},
|
},
|
||||||
update => update.classed("neon-flash-node", false),
|
update => update.classed("neon-flash-node", false),
|
||||||
@@ -466,7 +466,7 @@ function drag(simulation) {
|
|||||||
|
|
||||||
export function setActiveNode(nodeId) {
|
export function setActiveNode(nodeId) {
|
||||||
if (!svgElement || !node) return;
|
if (!svgElement || !node) return;
|
||||||
|
|
||||||
activeNodeId = nodeId;
|
activeNodeId = nodeId;
|
||||||
// Safety check: ensure we only target the first occurrence if IDs are duplicated
|
// Safety check: ensure we only target the first occurrence if IDs are duplicated
|
||||||
const targetNode = node.filter(d => d.id === nodeId);
|
const targetNode = node.filter(d => d.id === nodeId);
|
||||||
@@ -479,7 +479,7 @@ export function setActiveNode(nodeId) {
|
|||||||
const firstMatch = targetNode.filter((d, i) => i === 0);
|
const firstMatch = targetNode.filter((d, i) => i === 0);
|
||||||
const d = firstMatch.datum();
|
const d = firstMatch.datum();
|
||||||
if (!d || d.x === undefined || d.y === undefined || isNaN(d.x) || !isFinite(d.x) || isNaN(d.y) || !isFinite(d.y)) return;
|
if (!d || d.x === undefined || d.y === undefined || isNaN(d.x) || !isFinite(d.x) || isNaN(d.y) || !isFinite(d.y)) return;
|
||||||
|
|
||||||
// Reset all active classes
|
// Reset all active classes
|
||||||
rootGroup.selectAll(".node-pill").classed("nexus-node-active", false);
|
rootGroup.selectAll(".node-pill").classed("nexus-node-active", false);
|
||||||
firstMatch.select(".node-pill").classed("nexus-node-active", true);
|
firstMatch.select(".node-pill").classed("nexus-node-active", true);
|
||||||
@@ -502,7 +502,7 @@ export function setActiveNode(nodeId) {
|
|||||||
return 20;
|
return 20;
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
|
|
||||||
updateNodeAppearances();
|
updateNodeAppearances();
|
||||||
|
|
||||||
// Smooth transition to the first matching node
|
// Smooth transition to the first matching node
|
||||||
@@ -514,10 +514,10 @@ export function setActiveNode(nodeId) {
|
|||||||
|
|
||||||
export function dimNodes(activeNodeId) {
|
export function dimNodes(activeNodeId) {
|
||||||
if (!node) return;
|
if (!node) return;
|
||||||
|
|
||||||
node.transition().duration(500)
|
node.transition().duration(500)
|
||||||
.style("opacity", d => (activeNodeId === null || d.id === activeNodeId) ? 1 : 0.4);
|
.style("opacity", d => (activeNodeId === null || d.id === activeNodeId) ? 1 : 0.4);
|
||||||
|
|
||||||
if (link) {
|
if (link) {
|
||||||
link.transition().duration(500)
|
link.transition().duration(500)
|
||||||
.style("opacity", d => {
|
.style("opacity", d => {
|
||||||
@@ -558,7 +558,7 @@ export function handleResize(containerId) {
|
|||||||
|
|
||||||
svgElement.attr("viewBox", [0, 0, width, height]);
|
svgElement.attr("viewBox", [0, 0, width, height]);
|
||||||
simulation.force("center", d3.forceCenter(width / 2, height / 2));
|
simulation.force("center", d3.forceCenter(width / 2, height / 2));
|
||||||
|
|
||||||
const prevMobileMode = isMobileMode;
|
const prevMobileMode = isMobileMode;
|
||||||
isMobileMode = window.innerWidth < 768;
|
isMobileMode = window.innerWidth < 768;
|
||||||
if (isMobileMode !== prevMobileMode) {
|
if (isMobileMode !== prevMobileMode) {
|
||||||
|
|||||||
Reference in New Issue
Block a user