Dorian
88e211c87d
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
113 lines
4.3 KiB
Plaintext
113 lines
4.3 KiB
Plaintext
---
|
|
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
|
|
```
|
|
1 = 4px, 2 = 8px, 3 = 12px, 4 = 16px, 5 = 20px, 6 = 24px, 7 = 28px, 8 = 32px
|
|
```
|
|
|
|
## Typography Scale
|
|
```
|
|
text-xs = 12px (metadata, timestamps)
|
|
text-sm = 14px (body text, buttons)
|
|
text-base = 16px (default body, inputs)
|
|
text-lg = 18px (subtitles)
|
|
text-xl = 20px (card titles)
|
|
text-2xl = 24px (section headings)
|
|
text-3xl = 30px (page headings)
|
|
text-4xl = 36px (hero headings)
|
|
```
|
|
|
|
Font weights: `font-normal` (body), `font-medium` (emphasis), `font-semibold` (headings/buttons), `font-bold` (strong emphasis).
|
|
|
|
## Glass Morphism (from Archy)
|
|
|
|
### 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`
|
|
|
|
### 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
|
|
<button class="p-2 rounded-lg text-white/70 hover:text-white hover:bg-white/10 transition-colors">
|
|
```
|
|
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
|
|
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).
|
|
|
|
## Hover States (from Archy)
|
|
```html
|
|
<div class="transition-all duration-300 hover:bg-white/10 hover:text-white">
|
|
```
|
|
Interactive card lift: `hover:translateY(-2px)` with intensified shadow.
|
|
|
|
## 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
|