lfg2025/archy
1
0
Fork 0
Code Issues 24 Pull Requests 4 Actions Packages Projects Releases 71 Wiki Activity

refactor(ui): port exact Archy glassmorphism system

Browse Source 
Replace all glass morphism CSS with exact Archy definitions from
neode-ui/src/style.css. Every container and button class now matches
Archy pixel-for-pixel:

- glass: rgba(0,0,0,0.35), blur(18px), border rgba(255,255,255,0.18)
- glass-strong: same bg, blur(24px)
- glass-card: rgba(0,0,0,0.65), blur(18px), border-radius 1rem
- glass-button: 48px height, rgba(0,0,0,0.6), blur(18px)
- glass-button-sm: compact variant
- gradient-button: primary CTA with gradient intensification on hover
- gradient-card, gradient-card-dark, gradient-border-container
- toast-glass, nav-tab-active with CSS mask gradient border
- Archy inset highlight: inset 0 1px 0 rgba(255,255,255,0.22)
- Archy focus glow: blue box-shadow, no outline
- Archy scrollbar: gradient thumb, hidden variant
- Archy animations: fadeUpIn 900ms cubic-bezier(0.22, 1, 0.36, 1)

Updated design rules (02-tailwind-styling.mdc, 03-design-system.mdc)
to reference Archy as canonical source. Added archy-glass-system.md
to Coding Rules Project.

Made-with: Cursor
This commit is contained in:
Dorian
2026-03-02 14:26:22 +00:00
parent 27864cf92e
commit 88e211c87d
10 changed files with 405 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.cursor/rules/02-tailwind-styling.mdc
+72 -38
View File
@@ -1,17 +1,21 @@
---
description: Tailwind CSS utility-first styling conventions for AIUI
description: Tailwind CSS utility-first styling conventions for AIUI, ported from Archy
globs: "**/*.vue,**/*.css,**/*.ts"
alwaysApply: false
---
# Tailwind CSS Styling
## Source of Truth
All glass morphism, container, and button patterns originate from the Archy project (`/Projects/Archy/neode-ui/src/style.css`). When in doubt, match Archy exactly.
## Utility-First
Use Tailwind utilities directly in templates. Extract to component classes only when a pattern repeats 3+ times.
## 4px Spacing Grid
All spacing follows a 4px base grid:
- 1 = 4px, 2 = 8px, 3 = 12px, 4 = 16px, 5 = 20px, 6 = 24px, 8 = 32px, 12 = 48px, 16 = 64px
```
1 = 4px, 2 = 8px, 3 = 12px, 4 = 16px, 5 = 20px, 6 = 24px, 7 = 28px, 8 = 32px
```
## Typography Scale
```
@@ -27,52 +31,82 @@ text-4xl = 36px (hero headings)
Font weights: `font-normal` (body), `font-medium` (emphasis), `font-semibold` (headings/buttons), `font-bold` (strong emphasis).
## Border Radius
- `rounded-md` (6px) — inputs
- `rounded-lg` (8px) — buttons, standard cards
- `rounded-2xl` (16px) — modern cards, modals
- `rounded-full` — pills, avatars
## Glass Morphism (from Archy)
## Shadows
- `shadow-sm` — subtle elevation
- `shadow-md` — standard card
- `shadow-lg` — modal, dropdown
- `shadow-xl` — hero card
### Containers (exact Archy values)
- `.glass` — base: `bg: rgba(0,0,0,0.35)`, `blur(18px)`, `border: 1px solid rgba(255,255,255,0.18)`, `shadow: 0 8px 24px rgba(0,0,0,0.45)`
- `.glass-strong` — stronger blur: same bg but `blur(24px)`
- `.glass-card` — primary card: `bg: rgba(0,0,0,0.65)`, `blur(18px)`, `border-radius: 1rem`, same border/shadow
- `.gradient-card` — gradient: `linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.8) 100%)`
- `.gradient-card-dark` — dark gradient: `linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.9) 100%)`
- `.gradient-border-container` — gradient border with inner glass, `border-radius: 1.5rem`
- `.toast-glass` — `border-radius: 0.75rem`, same glass as `.glass-card`
## Glass Morphism
For cards over complex backgrounds:
### Buttons (exact Archy values)
- `.glass-button` — 48px height, `bg: rgba(0,0,0,0.6)`, `blur(18px)`, border `rgba(255,255,255,0.18)`, `color: rgba(255,255,255,0.9)`
- `.glass-button-sm` — compact variant (auto height, `py-1.5 px-3`)
- `.gradient-button` — primary action: `linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.8) 100%)`, border `rgba(255,255,255,0.2)`, intensifies on hover
### Icon / Ghost buttons (Archy pattern)
```html
<div class="bg-white/10 backdrop-blur-sm border border-white/10 rounded-2xl">
<button class="p-2 rounded-lg text-white/70 hover:text-white hover:bg-white/10 transition-colors">
```
Never use glass morphism on body text containers or form inputs.
Touch target: minimum 44x44px via padding.
### Active Navigation
`.nav-tab-active` — `bg: rgba(0,0,0,0.35)`, inset highlight, gradient border via CSS mask `::before`
### Usage Rules
- ✅ Cards, panels, modals, sidebars
- ✅ Navigation bars, headers (fixed positioning)
- ✅ Hover states, buttons
- ❌ Body text containers (readability)
- ❌ Form input fields (confusing UX)
## Inset Highlight
The signature Archy inset glow:
```css
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
```
Apply to headers, selected cards, active nav items.
## Border — No Separators Between Sections
Per Archy theme rules: no borders between sidebar and content, or header and content. Only subtle `rgba(255,255,255,0.06-0.08)` borders for internal dividers.
## Gradient Text
```html
<h1 class="gradient-text">Title</h1>
```
`linear-gradient(to right, #ffffff, #9ca3af)` with `background-clip: text`.
## Focus States — Gamepad/Keyboard Glow
All focusable elements get a blue glow (no outline):
```css
*:focus-visible {
outline: none;
box-shadow: 0 0 16px rgba(120, 180, 255, 0.2), 0 0 32px rgba(100, 160, 255, 0.1);
}
```
## Scrollbar
- `.custom-scrollbar` — gradient thumb (`rgba(255,255,255,0.3)` to `0.1`), dark track
- `.scrollbar-hide` — hidden scrollbar, keeps scroll functionality
## Responsive — Mobile First
Always write base styles for mobile, enhance with breakpoints:
Base styles for mobile, enhance with breakpoints:
```html
<div class="text-base md:text-lg lg:text-xl p-4 md:p-6 lg:p-8">
```
Breakpoints: `sm` (640px), `md` (768px), `lg` (1024px), `xl` (1280px), `2xl` (1536px).
## Dark Mode
Use CSS custom properties for theme switching. Both Tailwind `dark:` and custom theme classes supported:
## Hover States (from Archy)
```html
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
<div class="transition-all duration-300 hover:bg-white/10 hover:text-white">
```
Interactive card lift: `hover:translateY(-2px)` with intensified shadow.
## Gradients for Hierarchy
Use gradients strategically for emphasis, not decoration:
```html
<h2 class="bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">
```
## Hover States
All interactive elements need immediate visual feedback (< 100ms):
```html
<button class="transition-colors duration-200 hover:bg-primary-dark">
```
## Focus States
Always visible focus for accessibility:
```html
<button class="focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2">
```
## Animations (Archy timings)
- `animate-fade-up` — 900ms `cubic-bezier(0.22, 1, 0.36, 1)` with 120ms delay
- `animate-fade-up-fast` — 400ms, no delay (for chat messages)
- `animate-fade-in` — 500ms ease
- `animate-scale-in` — 250ms for modals/popups
.cursor/rules/03-design-system.mdc
+90 -45
View File
@@ -1,74 +1,119 @@
---
description: Design system foundations - colors, typography, spacing, component patterns
description: Design system foundations - glassmorphism from Archy, colors, typography, spacing
globs: "**/*.vue,**/*.css,**/*.ts"
alwaysApply: false
---
# Design System
All glass morphism, container, and button patterns are ported from the Archy project and must match exactly.
## Glass Morphism Hierarchy (from Archy)
### Glass Intensity Levels
| Class | Background | Blur | Use Case |
|-------|-----------|------|----------|
| `.glass` | `rgba(0,0,0,0.35)` | 18px | Sidebar, panels, inputs |
| `.glass-strong` | `rgba(0,0,0,0.35)` | 24px | Headers, message bubbles (user) |
| `.glass-card` | `rgba(0,0,0,0.65)` | 18px | Primary cards, modals, main containers |
| `.gradient-card` | gradient white→black | 18px | Feature cards |
| `.gradient-card-dark` | gradient black→black | 18px | Dark feature cards |
All share: `border: 1px solid rgba(255,255,255,0.18)`, `box-shadow: 0 8px 24px rgba(0,0,0,0.45)`.
### Button Hierarchy (from Archy)
| Class | Purpose | Details |
|-------|---------|---------|
| `.glass-button` | Default | 48px height, `rgba(0,0,0,0.6)`, blur 18px |
| `.glass-button-sm` | Compact | Auto height, smaller padding |
| `.gradient-button` | Primary action | Gradient bg, intensifies on hover |
| Ghost | Icon/text actions | `p-2 rounded-lg text-white/70 hover:text-white hover:bg-white/10` |
### Inset Highlight
Signature Archy top-edge glow on focused/active elements:
```css
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
```
### Gradient Border (CSS mask technique)
For premium-feel borders on selected cards and active nav:
```css
::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 2px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
```
## Design Tokens
### Color Palette
Semantic color tokens defined by purpose, not appearance:
- `primary` — main brand actions (#606060 / configurable)
Semantic color tokens defined by purpose:
- `primary` — main brand actions (#606060)
- `accent` — highlight, Bitcoin orange (#F7931A)
- `success` — positive states (#10B981)
- `error` — negative states (#EF4444)
- `warning` — caution states (#F59E0B)
- `info` — informational (#3B82F6)
- Neutrals: gray-50 through gray-900
### Glass Tokens (from Archy Tailwind config)
- `glass-dark`: `rgba(0, 0, 0, 0.35)`
- `glass-darker`: `rgba(0, 0, 0, 0.6)`
- `glass-border`: `rgba(255, 255, 255, 0.18)`
- `glass-highlight`: `rgba(255, 255, 255, 0.22)`
### Shadows
- `shadow-glass`: `0 8px 24px rgba(0, 0, 0, 0.45)`
- `shadow-glass-sm`: `0 6px 18px rgba(0, 0, 0, 0.35)`
- `shadow-glass-inset`: `inset 0 1px 0 rgba(255, 255, 255, 0.22)`
### Typography
- Display font: Geometric sans-serif (Space Grotesk, Inter Display)
- Body font: Clean sans-serif (Inter, system-ui)
- Body font: Inter, system-ui (AIUI default)
- Mono font: Menlo, Monaco, Courier New
- Use single font family with weight variations for simplicity
- Text opacity scale: `text-white/25` (placeholders), `text-white/40` (muted), `text-white/60` (secondary), `text-white/70` (interactive default), `text-white/80` (body), `text-white/90` (emphasis), `text-white/96` (headings), `text-white` (active/selected)
### Spacing
All spacing on 4px grid. Common patterns:
- Component padding: `p-4` (16px) to `p-6` (24px)
- Section spacing: `py-12` (48px) to `py-16` (64px)
- Element gaps: `gap-4` (16px) default
4px grid: `4, 8, 12, 16, 20, 24, 28, 32` px.
### Shadows & Glows
```css
shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.08)
shadow-card: 0 4px 16px rgba(0, 0, 0, 0.1)
shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.15)
```
### Border Radius
- `rounded-lg` (8px) — buttons, nav items, inputs
- `rounded-xl` (12px) — toasts, small cards
- `rounded-2xl` (16px) — main cards, modals
- `rounded-3xl` (24px) — bottom sheets
- `rounded-full` — pills, avatars, FABs
- `1rem` (16px) — `.glass-card` default
## Component Patterns
### Buttons
- Primary: solid background, white text, `rounded-lg`, `font-semibold`
- Secondary: border only, primary text, fill on hover
- Ghost: text only, subtle background on hover
- Icon: `p-2 rounded-md`, minimum 44x44px touch target
- Sizes: sm (`px-4 py-2`), md (`px-6 py-3`), lg (`px-8 py-4`)
### Cards
- Background: white/dark with `rounded-2xl` (16px radius)
- Padding: `p-6`
- Shadow: `shadow-card` default, `shadow-elevated` on hover
- Interactive cards get `hover:shadow-lg transition-shadow duration-300 cursor-pointer`
Use `.glass-card` with additional padding:
```html
<div class="glass-card p-6">Content</div>
```
### Form Elements
- Inputs: `min-h-[44px]` touch target, `text-base` (prevents iOS zoom), `rounded-lg`
- Labels: `text-sm font-semibold text-gray-700 mb-2`
- Error text: `text-sm text-error mt-1`
- Focus: `focus:border-primary focus:ring-2 focus:ring-primary/50`
### Badges
- Status badges: `inline-flex items-center px-3 py-1 rounded-full text-sm font-medium`
- Color variants: success (green-100/green-800), warning (yellow-100/yellow-800), error (red-100/red-800)
### Modals
```html
<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
<div class="glass-card p-6 max-w-md w-full">...</div>
</div>
```
### Icons
- SVG preferred, using Lucide Icons
- Sizes: xs (16px), sm (20px), md (24px), lg (32px), xl (48px)
- Always use `currentColor` for stroke/fill
- Icon-only buttons must have `aria-label`
- SVG, using `currentColor`
- Sizes: 16px, 20px, 24px, 32px
- Icon-only buttons: `p-2 rounded-lg` (reaches 44px touch target with 24px icon)
- Must have `aria-label`
## Layout Patterns
- Standard container: `max-w-7xl mx-auto px-4 md:px-6`
- Reading container: `max-w-3xl mx-auto px-4 md:px-6`
- Sidebar + content: `grid grid-cols-1 lg:grid-cols-[280px_1fr] gap-6`
## Theme Architecture
- Base background: `#0a0a0a` (near-black)
- No separator borders between sidebar/header/content
- Header, sidebar, root share same visual weight
- CSS-based themes with reactive Vue state
- `localStorage` persistence
packages/app/src/components/chat/ChatHeader.vue
+7 -6
View File
@@ -1,18 +1,19 @@
<template>
<div class="glass-subtle rounded-t-2xl flex items-center justify-between px-4 py-3">
<div class="glass-strong rounded-t-2xl flex items-center justify-between px-4 py-3"
style="border-bottom: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);">
<div class="flex items-center gap-3 min-w-0">
<div class="w-8 h-8 rounded-full bg-accent/20 flex items-center justify-center shrink-0">
<span class="text-accent text-sm font-bold">AI</span>
</div>
<div class="min-w-0">
<h2 class="text-sm font-semibold text-white truncate">{{ title }}</h2>
<p class="text-[10px] text-white/40 truncate">{{ conversationId }}</p>
<h2 class="text-sm font-semibold text-white/96 truncate">{{ title }}</h2>
<p class="text-[10px] text-white/40 truncate font-mono">{{ conversationId }}</p>
</div>
</div>
<div class="flex items-center gap-1">
<button
class="p-2 rounded-lg text-white/40 hover:text-white/80 hover:bg-white/5 transition-all duration-200"
class="p-2 rounded-lg text-white/70 hover:text-white hover:bg-white/10 transition-colors"
:title="side === 'right' ? 'Move panel to left' : 'Move panel to right'"
aria-label="Switch panel side"
@click="$emit('switchSide')"
@@ -24,7 +25,7 @@
</button>
<button
class="p-2 rounded-lg text-white/40 hover:text-white/80 hover:bg-white/5 transition-all duration-200"
class="p-2 rounded-lg text-white/70 hover:text-white hover:bg-white/10 transition-colors"
aria-label="New conversation"
@click="$emit('newChat')"
>
@@ -35,7 +36,7 @@
<button
v-if="showClose"
class="p-2 rounded-lg text-white/40 hover:text-white/80 hover:bg-white/5 transition-all duration-200"
class="p-2 rounded-lg text-white/70 hover:text-white hover:bg-white/10 transition-colors"
aria-label="Close"
@click="$emit('close')"
>
packages/app/src/components/chat/ChatInput.vue
+7 -6
View File
@@ -1,15 +1,16 @@
<template>
<div class="p-3 md:p-4">
<div
class="glass rounded-2xl px-4 py-3 flex items-end gap-3 transition-all duration-300 inner-glow"
:class="isFocused ? 'border-white/20 glow-soft' : ''"
class="glass rounded-2xl px-4 py-3 flex items-end gap-3 transition-all duration-300"
:class="isFocused ? 'border-glass-highlight' : ''"
:style="isFocused ? 'box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22)' : ''"
>
<textarea
ref="textareaRef"
v-model="text"
rows="1"
:placeholder="placeholder"
class="flex-1 resize-none bg-transparent text-sm text-white outline-none placeholder:text-white/30 min-h-[24px] max-h-[120px]"
class="flex-1 resize-none bg-transparent text-sm text-white/90 outline-none placeholder:text-white/25 min-h-[24px] max-h-[120px]"
@focus="isFocused = true"
@blur="isFocused = false"
@keydown.enter.exact.prevent="send"
@@ -17,10 +18,10 @@
/>
<button
:disabled="!canSend"
class="shrink-0 w-9 h-9 flex items-center justify-center rounded-xl transition-all duration-200"
class="shrink-0 glass-button glass-button-sm rounded-xl px-3 transition-all duration-200"
:class="canSend
? 'bg-accent text-white hover:bg-accent-hover active:scale-90'
: 'bg-white/5 text-white/20 cursor-not-allowed'"
? 'hover:bg-white/15 active:scale-95'
: 'opacity-30 cursor-not-allowed'"
aria-label="Send message"
@click="send"
>
packages/app/src/components/chat/ChatMessage.vue
+7 -7
View File
@@ -1,17 +1,17 @@
<template>
<div
class="flex animate-fade-up"
class="flex animate-fade-up-fast"
:class="isUser ? 'justify-end' : 'justify-start'"
:style="{ animationDelay: `${index * 30}ms` }"
>
<div
class="max-w-[85%] md:max-w-[70%] rounded-2xl px-4 py-3 transition-all duration-200"
class="max-w-[85%] md:max-w-[70%] rounded-2xl px-4 py-3 transition-all duration-300"
:class="bubbleClasses"
>
<p class="text-sm leading-relaxed whitespace-pre-wrap break-words">{{ message.content }}</p>
<p class="text-sm leading-relaxed whitespace-pre-wrap break-words text-white/90">{{ message.content }}</p>
<div class="flex items-center gap-2 mt-1.5">
<span class="text-[10px] opacity-40 select-none">{{ formattedTime }}</span>
<span v-if="isUser && message.status" class="text-[10px] opacity-30">
<span class="text-[10px] text-white/30 select-none">{{ formattedTime }}</span>
<span v-if="isUser && message.status" class="text-[10px] text-white/20">
{{ message.status === 'sent' ? '✓' : message.status === 'delivered' ? '✓✓' : '' }}
</span>
</div>
@@ -32,8 +32,8 @@ const isUser = computed(() => props.message.role === 'user')
const bubbleClasses = computed(() =>
isUser.value
? 'glass-strong text-white rounded-br-md'
: 'glass-dark text-gray-100 rounded-bl-md'
? 'glass-strong rounded-br-md'
: 'glass-card rounded-bl-md'
)
const formattedTime = computed(() => {
packages/app/src/components/chat/StreamingDots.vue
+2 -2
View File
@@ -1,6 +1,6 @@
<template>
<div class="flex justify-start animate-fade-up">
<div class="glass-dark rounded-2xl rounded-bl-md px-4 py-3">
<div class="flex justify-start animate-fade-up-fast">
<div class="glass-card rounded-2xl rounded-bl-md px-4 py-3">
<div class="flex items-center gap-1.5">
<span
v-for="i in 3"
packages/app/src/components/widget/WidgetFab.vue
+3 -3
View File
@@ -1,9 +1,9 @@
<template>
<button
class="fixed z-50 w-14 h-14 rounded-full glass-strong flex items-center justify-center
shadow-lg hover:shadow-xl transition-all duration-300
hover:scale-105 active:scale-95 glow-accent"
class="fixed z-50 w-14 h-14 rounded-full glass-button flex items-center justify-center
transition-all duration-300 hover:scale-105 active:scale-95"
:class="positionClasses"
:style="{ boxShadow: '0 8px 24px rgba(0, 0, 0, 0.45), 0 0 20px rgba(247, 147, 26, 0.15)' }"
:aria-label="isOpen ? 'Close AIUI' : 'Open AIUI'"
@click="$emit('toggle')"
>
packages/app/src/components/widget/WidgetModal.vue
+2 -2
View File
@@ -7,8 +7,8 @@
:class="positionClasses"
>
<div
class="w-[380px] h-[600px] md:w-[420px] md:h-[640px] rounded-2xl overflow-hidden shadow-2xl"
:style="{ boxShadow: '0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(247, 147, 26, 0.08)' }"
class="w-[380px] h-[600px] md:w-[420px] md:h-[640px] glass-card overflow-hidden"
:style="{ boxShadow: '0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(247, 147, 26, 0.06)' }"
>
<ChatWindow
variant="modal"
packages/app/src/pages/ChatPage.vue
+10 -18
View File
@@ -1,5 +1,5 @@
<template>
<div class="h-full flex flex-col bg-gradient-to-br from-gray-950 via-gray-900 to-gray-950 relative overflow-hidden">
<div class="h-full flex flex-col bg-[#0a0a0a] relative overflow-hidden">
<div class="absolute inset-0 pointer-events-none">
<div class="absolute top-[-20%] left-[-10%] w-[500px] h-[500px] rounded-full bg-accent/5 blur-[120px]" />
<div class="absolute bottom-[-20%] right-[-10%] w-[600px] h-[600px] rounded-full bg-info/5 blur-[120px]" />
@@ -10,10 +10,11 @@
v-if="showSidebar"
class="hidden lg:flex w-64 xl:w-72 shrink-0 flex-col glass rounded-2xl overflow-hidden"
>
<div class="p-4 flex items-center justify-between">
<div class="p-4 flex items-center justify-between"
style="border-bottom: 1px solid rgba(255, 255, 255, 0.08);">
<h1 class="text-lg font-bold gradient-text">AIUI</h1>
<button
class="p-2 rounded-lg text-white/40 hover:text-white hover:bg-white/5 transition-all"
class="p-2 rounded-lg text-white/70 hover:text-white hover:bg-white/10 transition-colors"
aria-label="New chat"
@click="chatStore.createConversation()"
>
@@ -23,14 +24,14 @@
</button>
</div>
<div class="flex-1 overflow-y-auto scrollbar-thin px-2 pb-2 space-y-1">
<div class="flex-1 overflow-y-auto scrollbar-hide px-2 pb-2 space-y-1 pt-2">
<button
v-for="conv in conversations"
:key="conv.id"
class="w-full text-left px-3 py-2.5 rounded-xl text-sm transition-all duration-200 truncate"
class="w-full text-left px-3 py-2.5 rounded-lg text-sm transition-all duration-200 truncate"
:class="conv.id === chatStore.activeConversationId
? 'glass-strong text-white'
: 'text-white/50 hover:text-white/80 hover:bg-white/5'"
? 'nav-tab-active'
: 'text-white/60 hover:text-white hover:bg-white/10'"
@click="chatStore.setActiveConversation(conv.id)"
>
{{ conv.title }}
@@ -44,7 +45,7 @@
</p>
</div>
<div class="p-3 border-t border-white/5">
<div class="p-3" style="border-top: 1px solid rgba(255, 255, 255, 0.06);">
<div class="flex items-center gap-2 px-2 py-1.5 rounded-lg text-[11px] text-white/25">
<span class="w-1.5 h-1.5 rounded-full bg-success animate-pulse" />
<span>OpenRouter connected</span>
@@ -52,21 +53,12 @@
</div>
</aside>
<main class="flex-1 min-w-0 flex flex-col glass rounded-2xl overflow-hidden">
<main class="flex-1 min-w-0 flex flex-col glass-card overflow-hidden">
<ChatWindow
:side="panelSide"
@switch-side="chatStore.switchSide()"
/>
</main>
<aside
v-if="false"
class="hidden xl:flex w-80 shrink-0 flex-col glass rounded-2xl overflow-hidden"
>
<div class="p-4 text-center text-white/20 text-sm">
Content panel (coming soon)
</div>
</aside>
</div>
</div>
</template>
packages/app/src/styles/main.css
+205 -75
View File
@@ -13,13 +13,13 @@
--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-dark: rgba(0, 0, 0, 0.35);
--color-glass-darker: rgba(0, 0, 0, 0.6);
--color-glass-border: rgba(255, 255, 255, 0.18);
--color-glass-highlight: 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);
--shadow-glass: 0 8px 24px rgba(0, 0, 0, 0.45);
--shadow-glass-sm: 0 6px 18px rgba(0, 0, 0, 0.35);
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
--font-mono: 'Menlo', 'Monaco', 'Courier New', monospace;
@@ -31,60 +31,155 @@ html {
body {
overscroll-behavior: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glass {
background: var(--color-glass-bg);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--color-glass-border);
/* ===== GLASSMORPHISM — ported from Archy ===== */
@layer components {
.glass {
background-color: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.glass-strong {
background-color: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.glass-card {
background-color: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
border-radius: 1rem;
overflow-x: hidden;
overflow-y: visible;
}
.glass-button {
display: inline-flex;
align-items: center;
justify-content: center;
height: 48px;
min-height: 48px;
padding-block: 0 !important;
line-height: 48px;
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(255, 255, 255, 0.18);
color: rgba(255, 255, 255, 0.9);
}
.glass-button-sm {
min-height: 0 !important;
height: auto !important;
line-height: inherit;
padding-block: 0.375rem !important;
padding-inline: 0.75rem;
}
.gradient-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.8) 100%);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
border-radius: 1rem;
}
.gradient-card-dark {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.9) 100%);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
border-radius: 1rem;
}
.gradient-button {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.8) 100%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.95);
transition: all 0.3s ease;
}
.gradient-button:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.9) 100%);
border-color: rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}
.gradient-border-container {
position: relative;
border-radius: 1.5rem;
padding: 4px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(0, 0, 0, 0.6) 100%);
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
}
.gradient-border-container-inner {
background: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-radius: 1.25rem;
}
.toast-glass {
background-color: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
border-radius: 0.75rem;
}
.nav-tab-active {
position: relative;
background: rgba(0, 0, 0, 0.35) !important;
box-shadow:
0 6px 16px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
color: rgba(255, 255, 255, 1) !important;
font-weight: 600 !important;
}
.nav-tab-active::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 2px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
}
.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);
/* ===== FOCUS STATES — gamepad/keyboard glow ===== */
*:focus-visible {
outline: none;
box-shadow: 0 0 16px rgba(120, 180, 255, 0.2), 0 0 32px rgba(100, 160, 255, 0.1);
transition: box-shadow 0.2s ease;
}
.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 ===== */
.gradient-text {
background: linear-gradient(to right, #ffffff, #9ca3af);
@@ -93,9 +188,52 @@ body {
color: transparent;
}
@keyframes fadeSlideUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
/* ===== SCROLLBAR — Archy custom gradient scrollbar ===== */
.custom-scrollbar::-webkit-scrollbar {
width: 10px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
border-radius: 10px;
border: 2px solid rgba(0, 0, 0, 0.2);
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 100%);
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
/* ===== ANIMATIONS — Archy timings ===== */
@keyframes fadeUpIn {
0% {
opacity: 0;
transform: translateY(28px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes scaleIn {
@@ -109,7 +247,15 @@ body {
}
.animate-fade-up {
animation: fadeSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
animation: fadeUpIn 900ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
}
.animate-fade-up-fast {
animation: fadeUpIn 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.animate-fade-in {
animation: fadeIn 0.5s ease forwards;
}
.animate-scale-in {
@@ -120,23 +266,7 @@ body {
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;
}
/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
* {