Dorian
27864cf92e
- Glassmorphism chat window matching Proux design rules (glass layers, gradient backgrounds, glow effects, blur intensities, inner glows) - Conversation ID displayed in header, side-switching (left/right layout) - Chat store with Pinia: conversations, messages, streaming state - OpenRouter AI integration with SSE streaming (Llama 4 Maverick free model) - Chat components: ChatWindow, ChatHeader, ChatInput, ChatMessage, StreamingDots (typing indicator) - Embeddable widget system: floating action button (FAB) + modal popup with scale-in animation, side-aware positioning - Widget demo page (/widget-demo) showing AIUI embedded in a mock "Acme App" with documentation of 4 integration methods: script tag, web component, npm package, and iframe - Theme composable with dark/light mode, system preference detection - Custom CSS: glass variants (subtle/medium/strong/light/dark), glow effects, gradient text, animation keyframes, thin scrollbar - Responsive: mobile-first, 44px touch targets, dvh viewport Made-with: Cursor
148 lines
3.2 KiB
CSS
148 lines
3.2 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--color-primary: #606060;
|
|
--color-primary-light: #808080;
|
|
--color-primary-dark: #404040;
|
|
|
|
--color-accent: #F7931A;
|
|
--color-accent-hover: #E88410;
|
|
|
|
--color-success: #10B981;
|
|
--color-error: #EF4444;
|
|
--color-warning: #F59E0B;
|
|
--color-info: #3B82F6;
|
|
|
|
--color-glass-bg: rgba(255, 255, 255, 0.08);
|
|
--color-glass-border: rgba(255, 255, 255, 0.12);
|
|
--color-glass-bg-hover: rgba(255, 255, 255, 0.14);
|
|
--color-glass-border-hover: rgba(255, 255, 255, 0.22);
|
|
|
|
--color-glass-bg-light: rgba(255, 255, 255, 0.65);
|
|
--color-glass-border-light: rgba(255, 255, 255, 0.45);
|
|
|
|
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
|
|
--font-mono: 'Menlo', 'Monaco', 'Courier New', monospace;
|
|
}
|
|
|
|
html {
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
body {
|
|
overscroll-behavior: none;
|
|
}
|
|
|
|
.glass {
|
|
background: var(--color-glass-bg);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
border: 1px solid var(--color-glass-border);
|
|
}
|
|
|
|
.glass-subtle {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.glass-strong {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255, 255, 255, 0.18);
|
|
}
|
|
|
|
.glass-light {
|
|
background: var(--color-glass-bg-light);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
border: 1px solid var(--color-glass-border-light);
|
|
}
|
|
|
|
.glass-dark {
|
|
background: rgba(0, 0, 0, 0.45);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
}
|
|
|
|
.glass:hover {
|
|
background: var(--color-glass-bg-hover);
|
|
border-color: var(--color-glass-border-hover);
|
|
}
|
|
|
|
.glow-accent {
|
|
box-shadow: 0 0 20px rgba(247, 147, 26, 0.15),
|
|
0 0 40px rgba(247, 147, 26, 0.05);
|
|
}
|
|
|
|
.glow-soft {
|
|
box-shadow: 0 0 20px rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.inner-glow {
|
|
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.06);
|
|
}
|
|
|
|
.gradient-text {
|
|
background: linear-gradient(to right, #ffffff, #9ca3af);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
@keyframes fadeSlideUp {
|
|
from { opacity: 0; transform: translateY(12px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes scaleIn {
|
|
from { opacity: 0; transform: scale(0.92); }
|
|
to { opacity: 1; transform: scale(1); }
|
|
}
|
|
|
|
@keyframes pulseGlow {
|
|
0%, 100% { opacity: 0.4; }
|
|
50% { opacity: 1; }
|
|
}
|
|
|
|
.animate-fade-up {
|
|
animation: fadeSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
}
|
|
|
|
.animate-scale-in {
|
|
animation: scaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
|
|
}
|
|
|
|
.animate-pulse-glow {
|
|
animation: pulseGlow 2s ease-in-out infinite;
|
|
}
|
|
|
|
.scrollbar-thin {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|