Antigravity
72905aa119
Resolves #55 # gamified Concepts Map Dashboard, Architecture Cleanup, & CSS Unification This Pull Request completes the gamified **Concepts Map** interactive experience and executes a strict visual and architectural clean-up of the **NexusReader SaaS** platform by consolidating styling around the centralized **Nexus Neon** design system, enforcing Native AOT-compliant scoped-CSS, and resolving style drift. --- ### 🚀 Key Implementations #### 1. Gamified Interactive Concepts Map Dashboard * **Dynamic Skill-Tree Visualizer:** Implemented a gamified node-based interactive tree that reads concept connections dynamically, rendering progress nodes, unlocked/locked states, and active visual connection lines. * **Premium UX Details:** Integrated high-fidelity hover effects, detailed sidebar popovers showing unlocked stats/summaries, and smooth parallax backdrops. * **Secure Multi-Tenant Gating:** Hardened data queries using explicit `TenantId` gating to ensure complete layout isolation between system tenants. #### 2. Architecture & Service Optimization * **Service Abstraction (`IConceptsMapService`):** Introduced a clean service interface decoupled from the UI layers. * **Polyglot Fallback Implementations:** - **WasmConceptsMapService:** Implements efficient client-side fetching with error recovery/loading states. - **ServerConceptsMapService:** Handles deep database graph mapping, relationship resolution, and multi-tenant checks. * **CQRS Integrity:** Enforced the CQRS Result Pattern by using `MediatR` handlers to fetch data structures instead of placing database queries in UI modules. #### 3. Nexus Neon CSS Unification & Zero-Style-Tag Standards * **Central Design Tokens:** Solidified typography (`Inter` / `Merriweather`), primary brand green hues (`var(--nexus-neon)` at `#00ff99`), and glow variables inside the global `app.css`. * **Zero Inline Style Tags:** Standardized all dashboard modules by completely eliminating inline `<style>` blocks in favor of scoped `.razor.css` companion files. * **Consolidated Buttons & Glass Panels:** - Standardized `.btn-nexus`, `.btn-nexus-primary`, and `.btn-nexus-secondary` throughout header/footer/card operations. - Removed duplicate `.glass-panel` background, blur, and support-declaration overrides, making components cleanly inherit standard global styles. * **Eliminated Brand Splitting:** Resolved legacy purple-indigo user avatar and conversation bubble gradients inside the AI Intelligence Hub (`Intelligence.razor.css`), migrating them to premium glassmorphic surfaces (`rgba(255, 255, 255, 0.05)`) contrasting beautifully against the emerald green AI theme. --- ### 🧪 Verification & Build Gate Status * **Successful Compilation Check:** Run `dotnet build NexusReader.slnx --no-restore` from the workspace root. Flawlessly succeeded with **zero compilation errors** (`Liczba błędów: 0`) under target `.NET 10`. * **Verified Skills Synchrony:** The companion design guidelines skill (`nexus-ui-engine/SKILL.md`) has been fully updated to secure these layout and styling conventions for future dashboard features. --------- Co-authored-by: Marek Jasiński <jasins.marek@gmail.com> Reviewed-on: #54 Co-authored-by: Antigravity <antigravity@google.com> Co-committed-by: Antigravity <antigravity@google.com>
369 lines
8.0 KiB
CSS
369 lines
8.0 KiB
CSS
.intelligence-page {
|
|
padding: 2rem;
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
height: calc(100vh - 100px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
animation: fadeIn 0.5s ease-out;
|
|
}
|
|
|
|
.intelligence-header {
|
|
margin-bottom: 1.5rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.neon-glow-text {
|
|
font-family: var(--nexus-font-sans);
|
|
font-size: 2.5rem;
|
|
font-weight: 800;
|
|
margin: 0 0 0.25rem 0;
|
|
background: linear-gradient(135deg, var(--nexus-neon) 0%, rgba(0, 255, 153, 0.7) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
filter: drop-shadow(0 0 8px rgba(0, 255, 153, 0.2));
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 0.95rem;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
margin: 0;
|
|
}
|
|
|
|
.intelligence-layout {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
}
|
|
|
|
.chat-thread-container {
|
|
flex-grow: 1;
|
|
overflow-y: auto;
|
|
padding: 2rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Custom Scrollbars */
|
|
.chat-thread-container::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
.chat-thread-container::-webkit-scrollbar-track {
|
|
background: rgba(255, 255, 255, 0.01);
|
|
}
|
|
.chat-thread-container::-webkit-scrollbar-thumb {
|
|
background: rgba(0, 255, 153, 0.2);
|
|
border-radius: 4px;
|
|
}
|
|
.chat-thread-container::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(0, 255, 153, 0.4);
|
|
}
|
|
|
|
.chat-bubbles-scroll {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.message-row {
|
|
display: flex;
|
|
gap: 1rem;
|
|
width: 100%;
|
|
max-width: 85%;
|
|
animation: bubble-fade-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
}
|
|
|
|
.user-row {
|
|
align-self: flex-end;
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.ai-row {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.message-avatar {
|
|
width: 38px;
|
|
height: 38px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.1rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.user-row .message-avatar {
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
|
|
color: #ffffff;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.ai-row .message-avatar {
|
|
background: linear-gradient(135deg, #005f38 0%, #004024 100%);
|
|
color: #e6fffa;
|
|
border: 1px solid rgba(0, 255, 153, 0.4);
|
|
box-shadow: 0 0 10px rgba(0, 255, 153, 0.25);
|
|
}
|
|
|
|
.message-bubble {
|
|
padding: 1.25rem 1.5rem;
|
|
border-radius: var(--radius-lg);
|
|
position: relative;
|
|
line-height: 1.6;
|
|
font-size: 0.975rem;
|
|
}
|
|
|
|
.user-bubble {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
color: #ffffff;
|
|
border-top-right-radius: 4px;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.ai-bubble {
|
|
background: rgba(10, 20, 30, 0.55);
|
|
border: 1px solid rgba(0, 255, 153, 0.2);
|
|
color: #e2e8f0;
|
|
border-top-left-radius: 4px;
|
|
box-shadow: 0 4px 15px rgba(0, 255, 153, 0.05);
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.message-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 0.5rem;
|
|
font-size: 0.75rem;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.sender-name {
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.message-time {
|
|
font-family: monospace;
|
|
}
|
|
|
|
.message-content {
|
|
word-break: break-word;
|
|
}
|
|
|
|
/* Paragraph Spacing & Markdown */
|
|
.message-content p {
|
|
margin: 0 0 1rem 0;
|
|
}
|
|
.message-content p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.nexus-code-block {
|
|
background: rgba(0, 0, 0, 0.4) !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.08) !important;
|
|
border-radius: var(--radius-sm);
|
|
padding: 1rem;
|
|
margin: 1rem 0;
|
|
overflow-x: auto;
|
|
font-family: 'Fira Code', monospace;
|
|
font-size: 0.85rem;
|
|
color: #a7f3d0;
|
|
}
|
|
|
|
.nexus-inline-code {
|
|
background: rgba(255, 255, 255, 0.06);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 4px;
|
|
padding: 0.15rem 0.35rem;
|
|
font-family: monospace;
|
|
font-size: 0.9em;
|
|
color: #f472b6; /* Light pink for inline code */
|
|
}
|
|
|
|
/* Pending State Bubble */
|
|
.pending-bubble {
|
|
border-color: rgba(0, 255, 153, 0.4);
|
|
box-shadow: 0 0 15px rgba(0, 255, 153, 0.1);
|
|
}
|
|
|
|
.typing-indicator {
|
|
display: flex;
|
|
gap: 4px;
|
|
align-items: center;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.typing-indicator span {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: var(--nexus-neon);
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
animation: typing-bounce 1.4s infinite ease-in-out both;
|
|
}
|
|
|
|
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
|
|
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
|
|
|
|
.loading-label {
|
|
font-size: 0.85rem;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Input Controls */
|
|
.chat-input-controls {
|
|
padding: 1.5rem 2rem 2rem 2rem;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.input-panel-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.scope-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.scope-selector {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 0.85rem;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.nexus-select {
|
|
background: rgba(255, 255, 255, 0.02);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
color: #ffffff;
|
|
padding: 0.35rem 2rem 0.35rem 0.75rem;
|
|
border-radius: var(--radius-sm);
|
|
outline: none;
|
|
cursor: pointer;
|
|
font-size: 0.85rem;
|
|
transition: all 0.3s ease;
|
|
appearance: none;
|
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
|
|
background-repeat: no-repeat;
|
|
background-position: right 0.75rem center;
|
|
background-size: 0.85em;
|
|
}
|
|
|
|
.nexus-select:focus {
|
|
border-color: var(--nexus-neon);
|
|
box-shadow: 0 0 8px rgba(0, 255, 153, 0.2);
|
|
}
|
|
|
|
.input-field-group {
|
|
display: flex;
|
|
background: rgba(255, 255, 255, 0.02);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
border-radius: var(--radius-md);
|
|
padding: 0.35rem;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.input-field-group:focus-within {
|
|
border-color: var(--nexus-neon);
|
|
background: rgba(0, 255, 153, 0.01);
|
|
box-shadow: 0 0 15px rgba(0, 255, 153, 0.15);
|
|
}
|
|
|
|
.nexus-input {
|
|
flex-grow: 1;
|
|
background: transparent;
|
|
border: none;
|
|
color: #ffffff;
|
|
font-size: 1rem;
|
|
outline: none;
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
|
|
.nexus-input::placeholder {
|
|
color: rgba(255, 255, 255, 0.35);
|
|
}
|
|
|
|
.search-btn {
|
|
width: 46px;
|
|
height: 46px;
|
|
padding: 0 !important;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.welcome-state {
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
padding: 4rem 2rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.welcome-icon {
|
|
color: rgba(0, 255, 153, 0.4);
|
|
margin-bottom: 1.5rem;
|
|
filter: drop-shadow(0 0 10px rgba(0, 255, 153, 0.2));
|
|
animation: pulse 2.5s infinite alternate;
|
|
}
|
|
|
|
.welcome-state h3 {
|
|
color: #ffffff;
|
|
font-size: 1.5rem;
|
|
margin: 0 0 0.75rem 0;
|
|
}
|
|
|
|
.welcome-state p {
|
|
max-width: 550px;
|
|
margin: 0;
|
|
font-size: 0.95rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.btn-spinner {
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid rgba(0, 0, 0, 0.1);
|
|
border-radius: 50%;
|
|
border-top-color: #000000;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
/* Keyframe Animations */
|
|
@keyframes bubble-fade-in {
|
|
0% { opacity: 0; transform: translateY(10px) scale(0.98); }
|
|
100% { opacity: 1; transform: translateY(0) scale(1); }
|
|
}
|
|
|
|
@keyframes typing-bounce {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-4px); }
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% { transform: scale(0.96); opacity: 0.8; }
|
|
100% { transform: scale(1.04); opacity: 1; }
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|