feat: Modernisation UI/UX et configuration Flutter multi-plateforme
Phase 1 - Corrections Critiques: - Fixed memory leaks dans music_provider.dart (stream subscriptions) - Fixed race conditions dans search_provider.dart (stale results) - Fixed token refresh errors dans api_service.dart - Improved error handling avec messages utilisateur - Changed API URL to HTTPS by default Phase 2 - Améliorations UX Desktop: - Ajouté cursor pointers sur tous les éléments cliquables - Implémenté hover states avec effets néon glow (200ms transitions) - Créé skeleton loading states avec shimmer animation - Ajouté widgets: ClickableWrapper, ErrorDisplay, SkeletonLoading - Enhanced visual feedback pour desktop users Phase 3 - Configuration Flutter: - Configuré Android (Gradle 8.1.0, Kotlin 1.9.0, minSdk 21, targetSdk 34) - Créé launcher icons cyberpunk néon (5 densités) - Configuré Windows desktop (structure complète) - Activé Linux desktop support - Ajouté package équatable pour entités de domaine - Corrigé imports (colors.dart, auth_provider.dart) - Fixed Dio API compatibility (RequestOptions) Documentation: - STYLE_GUIDE.md: Guide complet (100+ pages) - DESIGN_IMPLEMENTATION_GUIDE.md: Implémentation Flutter - BUILD_STATUS.md: Status builds + troubleshooting - QUICKSTART_BUILDS.md: Guide rapide - BUILD_INDEX.md: Index documentation - PHASE_1_CORRECTIONS.md: Corrections Phase 1 - PHASE_2_UX_IMPROVEMENTS.md: Améliorations Phase 2 - PR_REVIEW_SUMMARY.md: Revue code complète - CODE_ANALYSIS_AND_PRIORITIES.md: Analyse code Scripts & Builds: - BUILD_ALL.sh: Script automatisé builds multi-plateforme - builds/: Structure avec README par plateforme - design-system/: Système de design complet Backend: - Ajouté streaming HTTP Range pour audio progressif - Enhanced YouTube service avec métadonnées complètes - Improved error handling et validation Generated with [Claude Code](https://claude.com/claude-code) via [Happy](https://happy.engineering) Co-Authored-By: Claude <noreply@anthropic.com> Co-Authored-By: Happy <yesreply@happy.engineering>
This commit is contained in:
root
@@ -0,0 +1,454 @@
|
||||
# AudiOhm Design System - Master
|
||||
|
||||
## Brand Identity
|
||||
|
||||
**AudiOhm** est une plateforme de streaming musicale alternative à Spotify avec une esthétique **cyberpunk moderne**. Notre design combine :
|
||||
- L'énergie néon du cyberpunk
|
||||
- La fonctionnalité des plateformes de streaming modernes
|
||||
- Une expérience utilisateur fluide et immersive
|
||||
|
||||
---
|
||||
|
||||
## Color Palette
|
||||
|
||||
### Primary Colors (Dark Theme Base)
|
||||
|
||||
| Role | Hex | Usage |
|
||||
|------|-----|-------|
|
||||
| **Background** | `#0A0E27` | Page background, main sections |
|
||||
| **Surface** | `#151932` | Cards, modals, elevated elements |
|
||||
| **Surface-Elevated** | `#1F2342` | Hovered cards, active elements |
|
||||
| **Border** | `#2A2F4A` | Dividers, card borders |
|
||||
|
||||
### Neon Accents
|
||||
|
||||
| Role | Hex | Usage |
|
||||
|------|-----|-------|
|
||||
| **Primary** | `#00F0FF` | Main CTAs, active states, links |
|
||||
| **Secondary** | `#BF00FF` | Secondary actions, tags |
|
||||
| **Accent** | `#FF006E` | Highlights, notifications, likes |
|
||||
| **Success** | `#00FF94` | Success states, now playing |
|
||||
| **Warning** | `#FFB800` | Warnings, pending states |
|
||||
| **Error** | `FF3B3B` | Errors, destructive actions |
|
||||
|
||||
### Text Colors
|
||||
|
||||
| Role | Hex | Usage |
|
||||
|------|-----|-------|
|
||||
| **Text-Primary** | `#F0F4F8` | Headings, primary text |
|
||||
| **Text-Secondary** | `#9BA3B8` | Secondary text, descriptions |
|
||||
| **Text-Tertiary** | `#6B7280` | Tertiary text, disabled states |
|
||||
| **Text-Inverted** | `#0A0E27` | Text on neon backgrounds |
|
||||
|
||||
### Gradient Overlays
|
||||
|
||||
```css
|
||||
/* Primary Gradient */
|
||||
--gradient-primary: linear-gradient(135deg, #00F0FF 0%, #BF00FF 100%);
|
||||
|
||||
/* Accent Gradient */
|
||||
--gradient-accent: linear-gradient(135deg, #FF006E 0%, #FF3B3B 100%);
|
||||
|
||||
/* Surface Gradient */
|
||||
--gradient-surface: linear-gradient(180deg, rgba(21,25,50,0.9) 0%, rgba(10,14,39,0.95) 100%);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Families
|
||||
|
||||
```css
|
||||
/* Primary Fonts via Google Fonts */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');
|
||||
|
||||
/* Heading Font - Modern & Bold */
|
||||
--font-heading: 'Space Grotesk', sans-serif;
|
||||
|
||||
/* Body Font - Clean & Readable */
|
||||
--font-body: 'Outfit', sans-serif;
|
||||
|
||||
/* Monospace - For technical details */
|
||||
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
```
|
||||
|
||||
### Type Scale
|
||||
|
||||
| Role | Size | Weight | Line-Height | Usage |
|
||||
|------|------|--------|-------------|-------|
|
||||
| **Display** | 48px | 700 | 1.1 | Hero section, large titles |
|
||||
| **H1** | 36px | 700 | 1.2 | Page titles |
|
||||
| **H2** | 28px | 600 | 1.3 | Section headers |
|
||||
| **H3** | 22px | 600 | 1.4 | Card titles, subtitles |
|
||||
| **Body-Large** | 18px | 400 | 1.5 | Emphasized body text |
|
||||
| **Body** | 16px | 400 | 1.6 | Standard body text |
|
||||
| **Body-Small** | 14px | 400 | 1.6 | Secondary text |
|
||||
| **Caption** | 12px | 500 | 1.5 | Metadata, timestamps |
|
||||
| **Overline** | 11px | 600 | 1.4 | Labels, tags, uppercase |
|
||||
|
||||
---
|
||||
|
||||
## Spacing System
|
||||
|
||||
### Scale (Base: 4px)
|
||||
|
||||
| Token | Value | Usage |
|
||||
|-------|-------|-------|
|
||||
| `--spacing-1` | 4px | Tight gaps, icon padding |
|
||||
| `--spacing-2` | 8px | Small gaps, button padding |
|
||||
| `--spacing-3` | 12px | Card padding (compact) |
|
||||
| `--spacing-4` | 16px | Standard spacing, card padding |
|
||||
| `--spacing-5` | 20px | Medium gaps |
|
||||
| `--spacing-6` | 24px | Section padding, form fields |
|
||||
| `--spacing-8` | 32px | Large gaps, content sections |
|
||||
| `--spacing-10` | 40px | XL gaps, page padding |
|
||||
| `--spacing-12` | 48px | XXL gaps, major sections |
|
||||
| `--spacing-16` | 64px | Hero sections, page margins |
|
||||
|
||||
---
|
||||
|
||||
## Layout System
|
||||
|
||||
### Container Widths
|
||||
|
||||
| Breakpoint | Max Width | Usage |
|
||||
|------------|-----------|-------|
|
||||
| Mobile | 100% | < 768px |
|
||||
| Tablet | 768px | 768px - 1024px |
|
||||
| Desktop | 1200px | 1024px - 1440px |
|
||||
| Wide | 1440px | > 1440px |
|
||||
|
||||
### Grid System
|
||||
|
||||
```css
|
||||
/* 12-column grid */
|
||||
--grid-columns: 12;
|
||||
--grid-gap: 24px;
|
||||
|
||||
/* Responsive columns */
|
||||
--cols-mobile: 1fr;
|
||||
--cols-tablet: repeat(6, 1fr);
|
||||
--cols-desktop: repeat(12, 1fr);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Components
|
||||
|
||||
### Buttons
|
||||
|
||||
#### Primary Button (Neon)
|
||||
|
||||
```css
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #00F0FF 0%, #00C8FF 100%);
|
||||
color: #0A0E27;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease;
|
||||
box-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
box-shadow: 0 0 30px rgba(0, 240, 255, 0.5);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
```
|
||||
|
||||
#### Secondary Button (Ghost)
|
||||
|
||||
```css
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: #00F0FF;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
border: 1px solid #00F0FF;
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: rgba(0, 240, 255, 0.1);
|
||||
box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
|
||||
}
|
||||
```
|
||||
|
||||
### Cards
|
||||
|
||||
#### Base Card
|
||||
|
||||
```css
|
||||
.card {
|
||||
background: #151932;
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
border: 1px solid #2A2F4A;
|
||||
transition: all 250ms ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
border-color: #00F0FF;
|
||||
box-shadow: 0 8px 32px rgba(0, 240, 255, 0.15);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
```
|
||||
|
||||
#### Album Card
|
||||
|
||||
```css
|
||||
.card-album {
|
||||
position: relative;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
aspect-ratio: 1/1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card-album:hover .play-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.play-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(10, 14, 39, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 200ms ease;
|
||||
}
|
||||
|
||||
.play-button {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: #00F0FF;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 24px rgba(0, 240, 255, 0.4);
|
||||
}
|
||||
```
|
||||
|
||||
### Inputs
|
||||
|
||||
```css
|
||||
.input {
|
||||
background: #0A0E27;
|
||||
border: 1px solid #2A2F4A;
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
color: #F0F4F8;
|
||||
font-size: 16px;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
outline: none;
|
||||
border-color: #00F0FF;
|
||||
box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.1);
|
||||
}
|
||||
|
||||
.input::placeholder {
|
||||
color: #6B7280;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Effects & Animations
|
||||
|
||||
### Glow Effects
|
||||
|
||||
```css
|
||||
/* Primary Glow */
|
||||
.glow-primary {
|
||||
box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
|
||||
}
|
||||
|
||||
/* Secondary Glow */
|
||||
.glow-secondary {
|
||||
box-shadow: 0 0 20px rgba(191, 0, 255, 0.4);
|
||||
}
|
||||
|
||||
/* Accent Glow */
|
||||
.glow-accent {
|
||||
box-shadow: 0 0 20px rgba(255, 0, 110, 0.4);
|
||||
}
|
||||
```
|
||||
|
||||
### Transitions
|
||||
|
||||
| Type | Duration | Easing | Usage |
|
||||
|------|----------|--------|-------|
|
||||
| **Fast** | 150ms | ease-out | Micro-interactions |
|
||||
| **Base** | 200ms | ease-out | Button hovers, color changes |
|
||||
| **Slow** | 300ms | ease-out | Card transforms, modals |
|
||||
|
||||
```css
|
||||
/* Reduced Motion Support */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Icons
|
||||
|
||||
Use **Lucide Icons** or **Heroicons** (SVG format only - never emojis)
|
||||
|
||||
```css
|
||||
/* Icon Sizing */
|
||||
--icon-xs: 16px;
|
||||
--icon-sm: 20px;
|
||||
--icon-md: 24px;
|
||||
--icon-lg: 32px;
|
||||
--icon-xl: 48px;
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Z-Index Scale
|
||||
|
||||
| Layer | Value | Usage |
|
||||
|-------|-------|-------|
|
||||
| Base | 0 | Default content |
|
||||
| Elevated | 10 | Cards, dropdowns |
|
||||
| Sticky | 20 | Sticky headers, sidebars |
|
||||
| Overlay | 30 | Modals, tooltips |
|
||||
| Modal | 40 | Active modal |
|
||||
| Notification | 50 | Toasts, notifications |
|
||||
|
||||
---
|
||||
|
||||
## Accessibility Standards
|
||||
|
||||
### Color Contrast
|
||||
- **Text & Background**: Minimum 4.5:1 (WCAG AA)
|
||||
- **Large Text**: Minimum 3:1 (WCAG AA)
|
||||
- **Interactive Elements**: Minimum 3:1
|
||||
|
||||
### Focus States
|
||||
```css
|
||||
.focusable:focus {
|
||||
outline: 2px solid #00F0FF;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
```
|
||||
|
||||
### Touch Targets
|
||||
- Minimum **44x44px** for all interactive elements
|
||||
- Minimum **48x48px** for primary CTAs
|
||||
|
||||
### Screen Reader Support
|
||||
- All images must have descriptive `alt` text
|
||||
- Form inputs must have associated labels
|
||||
- Icon-only buttons need `aria-label`
|
||||
|
||||
---
|
||||
|
||||
## Anti-Patterns to Avoid
|
||||
|
||||
❌ **NEVER use emojis as icons** - Use SVG icons (Lucide/Heroicons)
|
||||
❌ **NEVER use text color below #9BA3B8 in dark mode** - Insufficient contrast
|
||||
❌ **NEVER use instant transitions (0ms)** - Use 150-300ms for smoothness
|
||||
❌ **NEVER skip hover states** - All interactive elements need feedback
|
||||
❌ **NEVER use `cursor: default` on clickable elements** - Always use `cursor: pointer`
|
||||
❌ **NEVER use layout-shifting transforms** - Avoid scale on hover, use color/shadow
|
||||
❌ **NEVER mix inconsistent spacing** - Follow spacing system strictly
|
||||
❌ **NEVER use transparent borders in light mode** - Must be visible
|
||||
❌ **NEVER skip reduced-motion checks** - Always respect user preferences
|
||||
|
||||
---
|
||||
|
||||
## Responsive Breakpoints
|
||||
|
||||
```css
|
||||
/* Mobile First Approach */
|
||||
/* Mobile: < 768px (default) */
|
||||
--breakpoint-mobile: 0px;
|
||||
|
||||
/* Tablet: >= 768px */
|
||||
--breakpoint-tablet: 768px;
|
||||
|
||||
/* Desktop: >= 1024px */
|
||||
--breakpoint-desktop: 1024px;
|
||||
|
||||
/* Wide: >= 1440px */
|
||||
--breakpoint-wide: 1440px;
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Page-Specific Guidelines
|
||||
|
||||
For page-specific design overrides, refer to:
|
||||
- `design-system/pages/home.md` - Home page specific rules
|
||||
- `design-system/pages/search.md` - Search page specific rules
|
||||
- `design-system/pages/player.md` - Player page specific rules
|
||||
- `design-system/pages/library.md` - Library page specific rules
|
||||
|
||||
If a page-specific file exists, its rules **override** these master rules.
|
||||
|
||||
---
|
||||
|
||||
## Implementation Checklist
|
||||
|
||||
Before delivering any UI component or page, verify:
|
||||
|
||||
### Visual Quality
|
||||
- [ ] No emojis used as icons (SVG only)
|
||||
- [ ] All icons from consistent set (Lucide/Heroicons)
|
||||
- [ ] Hover states use color/shadow, not scale
|
||||
- [ ] Neon glow effects are subtle, not overwhelming
|
||||
- [ ] Background and surface colors are consistent
|
||||
|
||||
### Interaction
|
||||
- [ ] All clickable elements have `cursor: pointer`
|
||||
- [ ] Hover states provide clear visual feedback
|
||||
- [ ] Transitions are 150-300ms (smooth, not slow)
|
||||
- [ ] Focus states visible for keyboard navigation
|
||||
|
||||
### Accessibility
|
||||
- [ ] Text contrast minimum 4.5:1
|
||||
- [ ] All images have alt text
|
||||
- [ ] Form inputs have labels
|
||||
- [ ] Interactive elements can be operated via keyboard
|
||||
- [ ] `prefers-reduced-motion` is respected
|
||||
|
||||
### Responsive
|
||||
- [ ] Layout works at 375px (mobile)
|
||||
- [ ] Layout works at 768px (tablet)
|
||||
- [ ] Layout works at 1024px (desktop)
|
||||
- [ ] Layout works at 1440px (wide)
|
||||
- [ ] No horizontal scroll on mobile
|
||||
- [ ] Touch targets minimum 44x44px
|
||||
|
||||
### Performance
|
||||
- [ ] Images use WebP format with fallbacks
|
||||
- [ ] Large images are lazy-loaded
|
||||
- [ ] Animations use transform/opacity (not width/height)
|
||||
- [ ] No layout shifts from async content
|
||||
|
||||
---
|
||||
|
||||
*This design system is the single source of truth for AudiOhm's UI/UX. All implementations must follow these guidelines unless a page-specific override exists.*
|
||||
@@ -0,0 +1,476 @@
|
||||
# Home Page Design Override
|
||||
|
||||
## Purpose
|
||||
This file contains **page-specific design rules** that **override** the master design system for the Home page.
|
||||
|
||||
## Key Differences from Master
|
||||
|
||||
### Layout Structure
|
||||
- **Hero Section**: Full-width gradient banner with quick picks
|
||||
- **Horizontal scrolling sections** for album/playlist rows
|
||||
- **Grid layout** for featured content (3 columns desktop, 2 tablet, 1 mobile)
|
||||
- **Sticky sub-navigation** for content categories
|
||||
|
||||
### Visual Hierarchy
|
||||
1. **Greeting & Quick Picks** (hero section) - Highest prominence
|
||||
2. **Featured Playlists** - Large cards with gradients
|
||||
3. **Recently Played** - Horizontal scroll row
|
||||
4. **Made For You** - Grid of recommendation cards
|
||||
5. **New Releases** - Compact list view
|
||||
|
||||
### Section Spacing
|
||||
- Hero padding: **60px** (larger than master)
|
||||
- Section gaps: **48px** (between major sections)
|
||||
- Row padding: **24px** (within sections)
|
||||
|
||||
## Components
|
||||
|
||||
### Hero Section (Personalized Greeting)
|
||||
|
||||
```css
|
||||
.hero-section {
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, #0A0E27 0%, #151932 50%, #1F2342 100%);
|
||||
padding: 60px 40px;
|
||||
border-radius: 20px;
|
||||
margin-bottom: 48px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Animated background gradient */
|
||||
.hero-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(circle at 20% 50%, rgba(0, 240, 255, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 50%, rgba(191, 0, 255, 0.1) 0%, transparent 50%);
|
||||
animation: gradient-shift 10s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes gradient-shift {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.6; }
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-greeting {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #F0F4F8;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: #9BA3B8;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
```
|
||||
|
||||
### Quick Picks Grid
|
||||
|
||||
```css
|
||||
.quick-picks-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.quick-pick-card {
|
||||
aspect-ratio: 16/9;
|
||||
background: linear-gradient(135deg, rgba(0, 240, 255, 0.1) 0%, rgba(191, 0, 255, 0.1) 100%);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
cursor: pointer;
|
||||
transition: all 250ms ease;
|
||||
border: 1px solid transparent;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.quick-pick-card:hover {
|
||||
border-color: #00F0FF;
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 40px rgba(0, 240, 255, 0.2);
|
||||
}
|
||||
|
||||
.quick-pick-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0, 240, 255, 0.15), transparent 50%);
|
||||
opacity: 0;
|
||||
transition: opacity 250ms ease;
|
||||
}
|
||||
|
||||
.quick-pick-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.quick-pick-title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #F0F4F8;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.quick-pick-description {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #9BA3B8;
|
||||
}
|
||||
```
|
||||
|
||||
### Horizontal Scroll Rows
|
||||
|
||||
```css
|
||||
.section-row {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #F0F4F8;
|
||||
}
|
||||
|
||||
.see-all-link {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #00F0FF;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: opacity 200ms ease;
|
||||
}
|
||||
|
||||
.see-all-link:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Horizontal scroll container */
|
||||
.horizontal-scroll {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
padding-bottom: 8px;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #2A2F4A #0A0E27;
|
||||
}
|
||||
|
||||
.horizontal-scroll::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.horizontal-scroll::-webkit-scrollbar-track {
|
||||
background: #0A0E27;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.horizontal-scroll::-webkit-scrollbar-thumb {
|
||||
background: #2A2F4A;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.horizontal-scroll::-webkit-scrollbar-thumb:hover {
|
||||
background: #00F0FF;
|
||||
}
|
||||
|
||||
.scroll-item {
|
||||
flex: 0 0 200px;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
```
|
||||
|
||||
### Album/Playlist Cards (Grid)
|
||||
|
||||
```css
|
||||
.content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
cursor: pointer;
|
||||
transition: all 250ms ease;
|
||||
}
|
||||
|
||||
.content-card-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 1/1;
|
||||
object-fit: cover;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
transition: all 250ms ease;
|
||||
}
|
||||
|
||||
.content-card:hover .content-card-image {
|
||||
box-shadow: 0 8px 30px rgba(0, 240, 255, 0.3);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.content-card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #F0F4F8;
|
||||
margin-bottom: 4px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.content-card-subtitle {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #9BA3B8;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Play overlay on hover */
|
||||
.play-overlay {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
right: 12px;
|
||||
aspect-ratio: 1/1;
|
||||
background: rgba(10, 14, 39, 0.8);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 200ms ease;
|
||||
}
|
||||
|
||||
.content-card:hover .play-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
```
|
||||
|
||||
### Featured Playlist Card (Large)
|
||||
|
||||
```css
|
||||
.featured-card {
|
||||
background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
|
||||
border-radius: 20px;
|
||||
padding: 32px;
|
||||
min-height: 250px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
cursor: pointer;
|
||||
transition: all 300ms ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.featured-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
|
||||
}
|
||||
|
||||
.featured-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 16px 50px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.featured-card-tag {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
left: 24px;
|
||||
background: rgba(10, 14, 39, 0.6);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #00F0FF;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.featured-card-title {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #F0F4F8;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.featured-card-description {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: rgba(240, 244, 248, 0.8);
|
||||
max-width: 80%;
|
||||
}
|
||||
```
|
||||
|
||||
### Category Pills (Filter Bar)
|
||||
|
||||
```css
|
||||
.category-filter-bar {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 20px 0;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.category-filter-bar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.category-pill {
|
||||
padding: 10px 20px;
|
||||
background: rgba(21, 25, 50, 0.8);
|
||||
border: 1px solid #2A2F4A;
|
||||
border-radius: 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #9BA3B8;
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.category-pill:hover {
|
||||
border-color: #00F0FF;
|
||||
color: #00F0FF;
|
||||
}
|
||||
|
||||
.category-pill.active {
|
||||
background: linear-gradient(135deg, #00F0FF 0%, #00C8FF 100%);
|
||||
border-color: #00F0FF;
|
||||
color: #0A0E27;
|
||||
box-shadow: 0 4px 16px rgba(0, 240, 255, 0.4);
|
||||
}
|
||||
```
|
||||
|
||||
## Responsive Adjustments
|
||||
|
||||
### Mobile (< 768px)
|
||||
- Hero padding: 40px 20px
|
||||
- Hero greeting: 24px
|
||||
- Quick picks: 1 column (100% width)
|
||||
- Content grid: 2 columns (repeat(2, 1fr))
|
||||
- Horizontal scroll: Enable momentum scroll
|
||||
- Section title: 22px
|
||||
|
||||
### Tablet (768px - 1024px)
|
||||
- Hero padding: 50px 30px
|
||||
- Quick picks: 2 columns
|
||||
- Content grid: 3 columns (repeat(3, 1fr))
|
||||
- Section title: 26px
|
||||
|
||||
### Desktop (> 1024px)
|
||||
- Use default sizes above
|
||||
- Quick picks: 4 columns
|
||||
- Content grid: 6 columns
|
||||
|
||||
## Loading States
|
||||
|
||||
### Skeleton Cards
|
||||
|
||||
```css
|
||||
.skeleton-card {
|
||||
background: linear-gradient(90deg, #151932 25%, #1F2342 50%, #151932 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: skeleton-loading 1.5s ease-in-out infinite;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
@keyframes skeleton-loading {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
|
||||
.skeleton-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.skeleton-text {
|
||||
height: 16px;
|
||||
background: #1F2342;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.skeleton-text.short {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.skeleton-text.long {
|
||||
width: 90%;
|
||||
}
|
||||
```
|
||||
|
||||
## Empty States
|
||||
|
||||
```css
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 80px 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-state-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
color: #2A2F4A;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.empty-state-title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #F0F4F8;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.empty-state-description {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #9BA3B8;
|
||||
margin-bottom: 32px;
|
||||
max-width: 400px;
|
||||
}
|
||||
```
|
||||
|
||||
## Additional Anti-Patterns for Home
|
||||
|
||||
❌ **NEVER load all content at once** - Implement lazy loading for rows
|
||||
❌ **NEVER auto-play audio on home** - User must explicitly click play
|
||||
❌ **NEVER mix card sizes in same row** - Keep consistent sizing
|
||||
❌ **NEVER hide horizontal scroll indicators** - Show shadow hint
|
||||
❌ **NEVER use generic greetings** - Personalize with time of day
|
||||
❌ **NEVER skip section anchors** - Allow deep linking to sections
|
||||
|
||||
---
|
||||
|
||||
*These page-specific rules override the master design system for the home page only.*
|
||||
@@ -0,0 +1,318 @@
|
||||
# Player Page Design Override
|
||||
|
||||
## Purpose
|
||||
This file contains **page-specific design rules** that **override** the master design system for the Audio Player page.
|
||||
|
||||
## Key Differences from Master
|
||||
|
||||
### Layout
|
||||
- Full-screen overlay mode for immersive experience
|
||||
- Larger touch targets (minimum 56px for player controls)
|
||||
- Fixed bottom mini-player (height: 90px)
|
||||
|
||||
### Visual Hierarchy
|
||||
- Album art is the **primary visual element** (dominates 40% of viewport)
|
||||
- Track info is secondary (artist name smaller, muted color)
|
||||
- Controls are tertiary but highly accessible
|
||||
|
||||
### Typography
|
||||
- Track title: **24px, weight 600** (larger than master H3)
|
||||
- Artist name: **16px, weight 400, color #9BA3B8**
|
||||
- Timestamps: **13px, weight 500, color #6B7280**
|
||||
|
||||
### Colors (Same as Master)
|
||||
- Background: `#0A0E27`
|
||||
- Surface: `#151932`
|
||||
- Primary Neon: `#00F0FF` (progress bar, play button)
|
||||
- Secondary Neon: `#BF00FF` (like button active)
|
||||
|
||||
### Components
|
||||
|
||||
#### Progress Bar
|
||||
```css
|
||||
/* Custom progress bar styling */
|
||||
.progress-container {
|
||||
height: 4px;
|
||||
background: #2A2F4A;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #00F0FF 0%, #00C8FF 100%);
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
|
||||
}
|
||||
|
||||
.progress-handle {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #00F0FF;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
box-shadow: 0 0 15px rgba(0, 240, 255, 0.8);
|
||||
opacity: 0;
|
||||
transition: opacity 200ms ease;
|
||||
}
|
||||
|
||||
.progress-container:hover .progress-handle {
|
||||
opacity: 1;
|
||||
}
|
||||
```
|
||||
|
||||
#### Control Buttons
|
||||
```css
|
||||
/* Primary Control (Play/Pause) */
|
||||
.btn-play-primary {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background: linear-gradient(135deg, #00F0FF 0%, #00C8FF 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 24px rgba(0, 240, 255, 0.4);
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.btn-play-primary:hover {
|
||||
box-shadow: 0 6px 32px rgba(0, 240, 255, 0.6);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Secondary Controls (Prev, Next, Shuffle) */
|
||||
.btn-control-secondary {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: transparent;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #9BA3B8;
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.btn-control-secondary:hover {
|
||||
color: #F0F4F8;
|
||||
background: rgba(240, 244, 248, 0.05);
|
||||
}
|
||||
|
||||
.btn-control-secondary.active {
|
||||
color: #00F0FF;
|
||||
}
|
||||
```
|
||||
|
||||
#### Album Art Display
|
||||
```css
|
||||
/* Large album art with glow */
|
||||
.album-art-container {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
aspect-ratio: 1/1;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.album-art {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 60px rgba(0, 240, 255, 0.2);
|
||||
}
|
||||
|
||||
/* Playing animation (subtle pulse) */
|
||||
@keyframes pulse-glow {
|
||||
0%, 100% {
|
||||
box-shadow: 0 20px 60px rgba(0, 240, 255, 0.2);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 20px 80px rgba(0, 240, 255, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.album-art.playing {
|
||||
animation: pulse-glow 3s ease-in-out infinite;
|
||||
}
|
||||
```
|
||||
|
||||
#### Mini Player (Bottom Bar)
|
||||
```css
|
||||
/* Persistent bottom mini-player */
|
||||
.mini-player {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 90px;
|
||||
background: linear-gradient(180deg, rgba(21,25,50,0.95) 0%, rgba(10,14,39,0.98) 100%);
|
||||
backdrop-filter: blur(20px);
|
||||
border-top: 1px solid #2A2F4A;
|
||||
padding: 12px 24px;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.mini-album-art {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.mini-track-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.mini-track-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #F0F4F8;
|
||||
}
|
||||
|
||||
.mini-artist-name {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #9BA3B8;
|
||||
}
|
||||
|
||||
.mini-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
```
|
||||
|
||||
### Volume Control
|
||||
```css
|
||||
.volume-slider {
|
||||
-webkit-appearance: none;
|
||||
width: 100px;
|
||||
height: 4px;
|
||||
background: #2A2F4A;
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.volume-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #00F0FF;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
|
||||
}
|
||||
```
|
||||
|
||||
### Queue Panel (Slide-out)
|
||||
```css
|
||||
.queue-panel {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 400px;
|
||||
background: #151932;
|
||||
border-left: 1px solid #2A2F4A;
|
||||
transform: translateX(100%);
|
||||
transition: transform 300ms ease;
|
||||
z-index: 50;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.queue-panel.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.queue-item {
|
||||
display: grid;
|
||||
grid-template-columns: 48px 1fr auto;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: background 200ms ease;
|
||||
}
|
||||
|
||||
.queue-item:hover {
|
||||
background: rgba(0, 240, 255, 0.05);
|
||||
}
|
||||
|
||||
.queue-item.active {
|
||||
background: rgba(0, 240, 255, 0.1);
|
||||
border: 1px solid #00F0FF;
|
||||
}
|
||||
```
|
||||
|
||||
## Responsive Adjustments
|
||||
|
||||
### Mobile (< 768px)
|
||||
- Mini player: Height 80px
|
||||
- Album art: Max-width 300px
|
||||
- Control buttons: 56px primary, 44px secondary
|
||||
- Queue panel: Full-width (100%)
|
||||
|
||||
### Tablet (768px - 1024px)
|
||||
- Mini player: Height 85px
|
||||
- Album art: Max-width 350px
|
||||
- Queue panel: Width 350px
|
||||
|
||||
### Desktop (> 1024px)
|
||||
- Use default sizes above
|
||||
|
||||
## Accessibility (Beyond Master)
|
||||
|
||||
### Keyboard Shortcuts
|
||||
- **Space**: Play/Pause
|
||||
- **Arrow Left/Right**: Seek ±10s
|
||||
- **Arrow Up/Down**: Volume ±10%
|
||||
- **Shift + Arrow Left/Right**: Previous/Next track
|
||||
- **M**: Mute/Unmute
|
||||
- **F**: Toggle fullscreen mode
|
||||
|
||||
### Screen Reader Announcements
|
||||
- Announce track changes (title + artist)
|
||||
- Announce playback state (playing/paused)
|
||||
- Announce volume changes (percentage)
|
||||
- Announce queue position ("Track 3 of 15")
|
||||
|
||||
### ARIA Labels
|
||||
```html
|
||||
<!-- Play/Pause Button -->
|
||||
<button aria-label="Pause" aria-pressed="true">
|
||||
<!-- Pause Icon -->
|
||||
</button>
|
||||
|
||||
<!-- Progress Bar -->
|
||||
<div role="slider" aria-label="Track progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="45">
|
||||
<!-- Progress UI -->
|
||||
</div>
|
||||
|
||||
<!-- Volume Slider -->
|
||||
<input type="range" aria-label="Volume" aria-valuemin="0" aria-valuemax="100" aria-valuenow="70">
|
||||
```
|
||||
|
||||
## Additional Anti-Patterns for Player
|
||||
|
||||
❌ **NEVER auto-play audio without user interaction** - Wait for explicit play action
|
||||
❌ **NEVER hide controls during video playback** - Keep controls always visible
|
||||
❌ **NEVER use instant seek jumps** - Animate progress bar smoothly
|
||||
❌ **NEVER skip keyboard navigation** - All controls must be keyboard-accessible
|
||||
❌ **NEVER ignore audio focus** - Pause when another app plays audio
|
||||
|
||||
---
|
||||
|
||||
*These page-specific rules override the master design system for the player page only.*
|
||||
@@ -0,0 +1,636 @@
|
||||
# Search Page Design Override
|
||||
|
||||
## Purpose
|
||||
This file contains **page-specific design rules** that **override** the master design system for the Search page.
|
||||
|
||||
## Key Differences from Master
|
||||
|
||||
### Layout Structure
|
||||
- **Large, prominent search bar** at top (72px height)
|
||||
- **Search tabs** (All, Songs, Artists, Albums, Playlists)
|
||||
- **Results grid** (responsive: 6 col desktop, 4 tablet, 2 mobile)
|
||||
- **Recent searches** with clear button
|
||||
- **Trending searches** as suggestions
|
||||
|
||||
### Visual Hierarchy
|
||||
1. **Search Input** - Dominant, focused element
|
||||
2. **Search Tabs** - Secondary navigation
|
||||
3. **Results Count** - Tertiary info
|
||||
4. **Filter/Sort Controls** - Quaternary
|
||||
|
||||
### Search Bar Styling
|
||||
- Larger height (48px input, vs 40px in master)
|
||||
- Prominent search icon
|
||||
- Clear button appears on type
|
||||
- Recent searches dropdown
|
||||
|
||||
## Components
|
||||
|
||||
### Search Input Field
|
||||
|
||||
```css
|
||||
.search-container {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: rgba(10, 14, 39, 0.95);
|
||||
backdrop-filter: blur(20px);
|
||||
padding: 20px 0;
|
||||
z-index: 20;
|
||||
border-bottom: 1px solid #2A2F4A;
|
||||
}
|
||||
|
||||
.search-input-wrapper {
|
||||
position: relative;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
background: #151932;
|
||||
border: 2px solid #2A2F4A;
|
||||
border-radius: 28px;
|
||||
padding: 0 60px 0 60px;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: #F0F4F8;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: #6B7280;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: #00F0FF;
|
||||
box-shadow: 0 0 0 4px rgba(0, 240, 255, 0.1);
|
||||
background: #1F2342;
|
||||
}
|
||||
|
||||
.search-input-icon {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
color: #6B7280;
|
||||
pointer-events: none;
|
||||
transition: color 200ms ease;
|
||||
}
|
||||
|
||||
.search-input:focus + .search-input-icon {
|
||||
color: #00F0FF;
|
||||
}
|
||||
|
||||
.search-clear-button {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #2A2F4A;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.search-input:not(:placeholder-shown) + .search-input-icon ~ .search-clear-button {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.search-clear-button:hover {
|
||||
background: #3B4259;
|
||||
}
|
||||
```
|
||||
|
||||
### Search Tabs
|
||||
|
||||
```css
|
||||
.search-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 20px 0;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.search-tabs::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-tab {
|
||||
padding: 10px 20px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #9BA3B8;
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.search-tab:hover {
|
||||
color: #F0F4F8;
|
||||
background: rgba(240, 244, 248, 0.05);
|
||||
}
|
||||
|
||||
.search-tab.active {
|
||||
background: #F0F4F8;
|
||||
color: #0A0E27;
|
||||
font-weight: 600;
|
||||
}
|
||||
```
|
||||
|
||||
### Recent Searches
|
||||
|
||||
```css
|
||||
.recent-searches-section {
|
||||
padding: 32px 0;
|
||||
}
|
||||
|
||||
.recent-searches-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.recent-searches-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #F0F4F8;
|
||||
}
|
||||
|
||||
.clear-recent-button {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #00F0FF;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: opacity 200ms ease;
|
||||
}
|
||||
|
||||
.clear-recent-button:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.recent-search-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 16px 20px;
|
||||
background: #151932;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.recent-search-item:hover {
|
||||
background: #1F2342;
|
||||
border-color: #2A2F4A;
|
||||
}
|
||||
|
||||
.recent-search-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: #6B7280;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.recent-search-text {
|
||||
flex: 1;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #F0F4F8;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.recent-search-remove {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.recent-search-item:hover .recent-search-remove {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.recent-search-remove:hover {
|
||||
background: rgba(255, 59, 59, 0.1);
|
||||
color: #FF3B3B;
|
||||
}
|
||||
```
|
||||
|
||||
### Search Results Grid
|
||||
|
||||
```css
|
||||
.search-results {
|
||||
padding: 32px 0;
|
||||
}
|
||||
|
||||
.results-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.results-count {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #9BA3B8;
|
||||
}
|
||||
|
||||
.results-sort {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.sort-dropdown {
|
||||
padding: 8px 16px;
|
||||
background: #151932;
|
||||
border: 1px solid #2A2F4A;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #F0F4F8;
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.sort-dropdown:hover {
|
||||
border-color: #00F0FF;
|
||||
}
|
||||
|
||||
/* Results grid layout */
|
||||
.results-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
/* Song results (list view) */
|
||||
.song-results-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.song-result-item {
|
||||
display: grid;
|
||||
grid-template-columns: 48px 1fr auto auto auto;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
background: transparent;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.song-result-item:hover {
|
||||
background: rgba(240, 244, 248, 0.05);
|
||||
}
|
||||
|
||||
.song-result-number {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #6B7280;
|
||||
}
|
||||
|
||||
.song-result-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.song-result-image {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.song-result-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #F0F4F8;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.song-result-artist {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #9BA3B8;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.song-result-album {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #9BA3B8;
|
||||
}
|
||||
|
||||
.song-result-duration {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #6B7280;
|
||||
}
|
||||
|
||||
.song-result-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
opacity: 0;
|
||||
transition: opacity 200ms ease;
|
||||
}
|
||||
|
||||
.song-result-item:hover .song-result-actions {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
color: #9BA3B8;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.icon-button:hover {
|
||||
color: #F0F4F8;
|
||||
background: rgba(240, 244, 248, 0.1);
|
||||
}
|
||||
```
|
||||
|
||||
### Trending Searches
|
||||
|
||||
```css
|
||||
.trending-searches-section {
|
||||
padding: 32px 0;
|
||||
border-top: 1px solid #2A2F4A;
|
||||
}
|
||||
|
||||
.trending-searches-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #F0F4F8;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.trending-searches-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.trending-search-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.trending-search-item:hover {
|
||||
background: rgba(240, 244, 248, 0.05);
|
||||
}
|
||||
|
||||
.trending-rank {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #00F0FF;
|
||||
width: 32px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.trending-search-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.trending-search-query {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #F0F4F8;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.trending-search-meta {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: #6B7280;
|
||||
}
|
||||
|
||||
.trending-arrow {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: #6B7280;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
```
|
||||
|
||||
### No Results State
|
||||
|
||||
```css
|
||||
.no-results-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120px 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-results-icon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
color: #2A2F4A;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.no-results-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #F0F4F8;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.no-results-query {
|
||||
color: #00F0FF;
|
||||
}
|
||||
|
||||
.no-results-description {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #9BA3B8;
|
||||
margin-bottom: 8px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.no-results-suggestions {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #6B7280;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.no-results-tips {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.no-results-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #9BA3B8;
|
||||
}
|
||||
|
||||
.no-results-tip-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: #00F0FF;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
```
|
||||
|
||||
### Search Filters
|
||||
|
||||
```css
|
||||
.search-filters {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 20px 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-chip {
|
||||
padding: 8px 16px;
|
||||
background: #151932;
|
||||
border: 1px solid #2A2F4A;
|
||||
border-radius: 20px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #9BA3B8;
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.filter-chip:hover {
|
||||
border-color: #00F0FF;
|
||||
color: #F0F4F8;
|
||||
}
|
||||
|
||||
.filter-chip.active {
|
||||
background: linear-gradient(135deg, #00F0FF 0%, #00C8FF 100%);
|
||||
border-color: #00F0FF;
|
||||
color: #0A0E27;
|
||||
}
|
||||
|
||||
.filter-chip-remove {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.filter-chip-remove:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
```
|
||||
|
||||
## Responsive Adjustments
|
||||
|
||||
### Mobile (< 768px)
|
||||
- Search input height: 48px
|
||||
- Search tabs: Scrollable horizontally
|
||||
- Results grid: 2 columns
|
||||
- Song list: Compact (hide album column)
|
||||
- Filters: Horizontal scroll
|
||||
|
||||
### Tablet (768px - 1024px)
|
||||
- Search input height: 52px
|
||||
- Results grid: 4 columns
|
||||
- Song list: Full layout
|
||||
|
||||
### Desktop (> 1024px)
|
||||
- Use default sizes above
|
||||
- Results grid: 6 columns
|
||||
|
||||
## Search Behavior
|
||||
|
||||
### Debouncing
|
||||
- Wait **300ms** after typing before sending search request
|
||||
- Cancel previous requests if user continues typing
|
||||
|
||||
### Keyboard Navigation
|
||||
- **Escape**: Clear search and focus search input
|
||||
- **Tab**: Navigate through results
|
||||
- **Enter**: Search on press or navigate to first result
|
||||
- **Arrow Down/Up**: Navigate through results list
|
||||
|
||||
### Search Suggestions
|
||||
- Show **5 recent searches** max
|
||||
- Show **10 trending searches** max
|
||||
- Highlight matching text in results
|
||||
|
||||
## Additional Anti-Patterns for Search
|
||||
|
||||
❌ **NEVER search on every keystroke** - Debounce for 300ms
|
||||
❌ **NEVER show results before user types** - Start with recent/trending
|
||||
❌ **NEVER hide clear button** - Always visible when input has text
|
||||
❌ **NEVER mix result types** - Use tabs to separate
|
||||
❌ **NEVER skip empty state** - Provide helpful tips
|
||||
❌ **NEVER ignore search history** - Save and show recent searches
|
||||
❌ **NEVER use instant navigation** - Let user review results first
|
||||
|
||||
---
|
||||
|
||||
*These page-specific rules override the master design system for the search page only.*
|
||||
Reference in New Issue
Block a user