Files

T

mjasin 39d9423d67 fix(ui): implement ServerIdentityService to resolve SSR profile fetch issues

- Added ServerIdentityService to handle profile requests directly from DB on server
- Updated Program.cs to use ServerIdentityService in the Web project
- Cleaned up diagnostic logs across the solution
- Finalized Dashboard glass panel animations

2026-05-10 09:49:44 +02:00

2.5 KiB

Raw Blame History

name, description

name	description
nexus-ui-engine	Design System & Component rules for Blazor

UI Standards

Atomic Design:
- Build reusable components in NexusReader.UI.Shared/Components.
- Atoms: Base elements (NexusButton, NexusIcon, NexusTypography).
- Molecules: Small groups (AiAssistantBubble, KnowledgeCheck).
- Organisms: High-level sections (KnowledgeGraph, ReaderCanvas).
Styling & Isolation:
- Mandatory use of scoped CSS (.razor.css).
- No global CSS except for design tokens in app.css.
- Use ::deep only when absolutely necessary to style child components.
Design System (Nexus Neon):
- Color Palette:
  - Primary Accent: --nexus-neon (#00ff99) - Used for borders, highlights, and icons.
  - Dark Mode: --nexus-bg (#0a0a0a), --nexus-card (#141414).
  - Light Mode: --nexus-bg (#f8f9fa), --nexus-card (#ffffff).
- Typography:
  - UI Elements: Inter (Sans-Serif) for controls, menus, and labels.
  - Reading Content: Merriweather (Serif) with line-height: 1.65 and letter-spacing: -0.01em for high readability.
- Effects:
  - Subtle neon glows (box-shadow: 0 0 15px rgba(0, 255, 153, 0.3)).
  - Glassmorphism for overlays and modals.
Adaptive Layouts:
- Support .platform-mobile and .platform-desktop context classes.
- Handle safe-area insets (--safe-area-inset-*) for mobile devices.
- Immersive Reader (Zen Mode):
  - Centered content flow: max-width: 800px, margin: 0 auto.
  - Paper-white background: #F9F9F9 for light mode reader canvas.
  - Dedicated Scrollbars: Custom styled, thin scrollbars with --nexus-neon accents.
  - Reachability: Large padding-bottom (e.g., 15rem) to ensure comfortable reading of end-of-page content.
Accessibility (A11y):
- Touch Targets: Min 44x44px on mobile (enforced via CSS variables).
- Contrast: Minimum ratio of 4.5:1.
- Semantic HTML: Use appropriate tags (<button>, <article>, <nav>).
Interactive Flow:
- AI Assistant interactions must be non-blocking and smoothly transition using CSS animations.
- Interactive elements must have clear :hover, :active, and :focus states.
- Glass Panel Standard: All primary data panels (.glass-panel) must implement the following interaction signature:
  - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)
  - :hover state must include: transform: translateY(-4px), increased background opacity, and a subtle --nexus-neon border highlight (e.g., rgba(0, 255, 153, 0.2)).

2.5 KiB Raw Blame History

UI Standards

2.5 KiB

Raw Blame History