# 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