mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-15 01:41:08 +02:00
6e7b671a73
Phase 1-5 implementation: - Keyboard shortcuts (Space, arrows, M, L, +/-) - Dark/Light mode with theme store - Loop regions for practice sections - Mobile responsive view with tabs - Beat library with preview and use functionality Backend: - Add library_beats schema - Add library beat endpoints (GET list, GET download-url, POST use) Frontend: - BeatLibrary component with preview player - BeatUploader tabs (Upload/Library) - Theme-aware waveform colors - Compact mobile playback controls Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
168 lines
3.2 KiB
CSS
168 lines
3.2 KiB
CSS
@import "tailwindcss";
|
|
@import "@manacore/shared-tailwind/themes.css";
|
|
|
|
/* Scan shared packages for Tailwind classes */
|
|
@source "../../../../packages/shared-ui/src";
|
|
@source "../../../../packages/shared-auth-ui/src";
|
|
@source "../../../../packages/shared-branding/src";
|
|
@source "../../../../packages/shared-theme-ui/src";
|
|
@source "../../../../packages/shared-theme-ui/src/components";
|
|
@source "../../../../packages/shared-theme-ui/src/pages";
|
|
@source "../../../../packages/shared-stores/src";
|
|
|
|
/* Waveform styles */
|
|
.waveform-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 128px;
|
|
background: var(--color-surface);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Marker colors */
|
|
.marker-verse { background-color: #3B82F6; }
|
|
.marker-hook { background-color: #EF4444; }
|
|
.marker-bridge { background-color: #8B5CF6; }
|
|
.marker-intro { background-color: #22C55E; }
|
|
.marker-outro { background-color: #F97316; }
|
|
.marker-drop { background-color: #EC4899; }
|
|
.marker-breakdown { background-color: #14B8A6; }
|
|
.marker-custom { background-color: #6B7280; }
|
|
|
|
/* Lyrics editor styles */
|
|
.lyrics-editor {
|
|
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.lyrics-line {
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.lyrics-line:hover {
|
|
background-color: var(--color-surface);
|
|
}
|
|
|
|
.lyrics-line.active {
|
|
background-color: var(--color-primary);
|
|
color: white;
|
|
}
|
|
|
|
.lyrics-line.synced {
|
|
border-left: 3px solid var(--color-primary);
|
|
}
|
|
|
|
/* Karaoke animation */
|
|
@keyframes karaoke-highlight {
|
|
0% { background-position: 0% 50%; }
|
|
100% { background-position: 100% 50%; }
|
|
}
|
|
|
|
.karaoke-word {
|
|
transition: color 0.1s, transform 0.1s;
|
|
}
|
|
|
|
.karaoke-word.active {
|
|
color: var(--color-primary);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.karaoke-word.past {
|
|
color: var(--color-foreground);
|
|
}
|
|
|
|
.karaoke-word.future {
|
|
color: var(--color-foreground-secondary);
|
|
}
|
|
|
|
/* Timeline styles */
|
|
.timeline-ruler {
|
|
height: 24px;
|
|
background: var(--color-surface);
|
|
position: relative;
|
|
}
|
|
|
|
.timeline-marker {
|
|
position: absolute;
|
|
top: 0;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
opacity: 0.8;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.timeline-marker:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Playhead */
|
|
.playhead {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 2px;
|
|
background: var(--color-primary);
|
|
z-index: 10;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.playhead::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -4px;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: var(--color-primary);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* Mobile responsive waveform */
|
|
@media (max-width: 767px) {
|
|
.waveform-container {
|
|
height: 80px;
|
|
}
|
|
|
|
.timeline-ruler {
|
|
height: 20px;
|
|
}
|
|
|
|
.timeline-marker span {
|
|
font-size: 8px;
|
|
}
|
|
}
|
|
|
|
/* Touch-friendly range inputs */
|
|
input[type="range"] {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type="range"]::-webkit-slider-runnable-track {
|
|
background: hsl(var(--color-surface-hover));
|
|
border-radius: 4px;
|
|
height: 8px;
|
|
}
|
|
|
|
input[type="range"]::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
background: hsl(var(--color-primary));
|
|
height: 16px;
|
|
width: 16px;
|
|
border-radius: 50%;
|
|
margin-top: -4px;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
input[type="range"]::-webkit-slider-thumb {
|
|
height: 20px;
|
|
width: 20px;
|
|
margin-top: -6px;
|
|
}
|
|
}
|