/* tokens/colors.css */
/* © 2024-2026 Mehdi TMIMI — Vivace Music (vivace-music.org) */
/**
* VIVACE UI - Color Tokens
*
* Color palette and semantic color mappings.
* These are the foundation - themes override the semantic colors.
*/
@layer tokens {
:root {
/* ================================
PRIMITIVE COLORS - Andalousie Gold Palette
================================ */
--vui-gold-50: #fef9e7;
--vui-gold-100: #fcefc1;
--vui-gold-200: #f9e08e;
--vui-gold-300: #f5d05b;
--vui-gold-400: #e8b930;
--vui-gold-500: #c9a227;
--vui-gold-600: #daa520;
--vui-gold-700: #a07d1c;
--vui-gold-800: #7a5f15;
--vui-gold-900: #5a3f20;
--vui-gold-950: #3d2914;
/* Brown/Sepia Palette */
--vui-brown-50: #faf8f0;
--vui-brown-100: #f5f0e0;
--vui-brown-200: #ebe5d5;
--vui-brown-300: #d4c9b5;
--vui-brown-400: #b8a88a;
--vui-brown-500: #8b6d3b;
--vui-brown-600: #6b4f2d;
--vui-brown-700: #5a3f20;
--vui-brown-800: #4a3018;
--vui-brown-900: #2a1f14;
--vui-brown-950: #1a1410;
/* Neutral Palette */
--vui-neutral-0: #ffffff;
--vui-neutral-50: #f9fafb;
--vui-neutral-100: #f3f4f6;
--vui-neutral-200: #e5e7eb;
--vui-neutral-300: #d1d5db;
--vui-neutral-400: #9ca3af;
--vui-neutral-500: #6b7280;
--vui-neutral-600: #4b5563;
--vui-neutral-700: #374151;
--vui-neutral-800: #1f2937;
--vui-neutral-900: #111827;
--vui-neutral-950: #030712;
/* Semantic Status Colors */
--vui-success: #10b981;
--vui-success-light: #d1fae5;
--vui-warning: #f59e0b;
--vui-warning-light: #fef3c7;
--vui-error: #ef4444;
--vui-error-light: #fee2e2;
--vui-info: #3b82f6;
--vui-info-light: #dbeafe;
/* Instrument Family Colors */
--vui-family-strings: #E74C3C;
--vui-family-woodwinds: #3498DB;
--vui-family-brass: #F39C12;
--vui-family-percussion: #9B59B6;
--vui-family-keyboards: #1ABC9C;
--vui-family-plucked: #E67E22;
--vui-family-ethnic: #8D6E63;
--vui-family-score: #8b5cf6;
/* ================================
SEMANTIC COLORS (theme-overridable)
================================ */
/* Primary brand color */
--vui-color-primary: var(--vui-gold-500);
--vui-color-primary-hover: var(--vui-gold-600);
--vui-color-primary-active: var(--vui-gold-700);
--vui-color-primary-muted: rgba(201, 162, 39, 0.2);
/* Surface colors */
--vui-color-surface: var(--vui-neutral-0);
--vui-color-surface-elevated: var(--vui-neutral-50);
--vui-color-surface-sunken: var(--vui-neutral-100);
--vui-color-backdrop: rgba(0, 0, 0, 0.5);
/* Text colors */
--vui-color-text: var(--vui-neutral-900);
--vui-color-text-muted: var(--vui-neutral-500);
--vui-color-text-on-primary: var(--vui-neutral-0);
/* Border colors */
--vui-color-border: var(--vui-neutral-200);
--vui-color-border-muted: var(--vui-neutral-100);
--vui-color-border-strong: var(--vui-neutral-300);
/* Focus ring */
--vui-color-focus: var(--vui-gold-500);
--vui-focus-ring: 0 0 0 3px rgba(201, 162, 39, 0.4);
/* ================================
ALPHA VARIANTS (for overlays)
================================ */
--vui-alpha-5: rgba(0, 0, 0, 0.05);
--vui-alpha-10: rgba(0, 0, 0, 0.1);
--vui-alpha-20: rgba(0, 0, 0, 0.2);
--vui-alpha-50: rgba(0, 0, 0, 0.5);
--vui-alpha-80: rgba(0, 0, 0, 0.8);
--vui-alpha-white-5: rgba(255, 255, 255, 0.05);
--vui-alpha-white-10: rgba(255, 255, 255, 0.1);
--vui-alpha-white-20: rgba(255, 255, 255, 0.2);
--vui-alpha-white-50: rgba(255, 255, 255, 0.5);
--vui-alpha-gold-10: rgba(201, 162, 39, 0.1);
--vui-alpha-gold-20: rgba(201, 162, 39, 0.2);
--vui-alpha-gold-30: rgba(201, 162, 39, 0.3);
--vui-alpha-gold-50: rgba(201, 162, 39, 0.5);
}
/* ================================
GLOBAL SCROLLBAR - Gold Theme
================================ */
/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: var(--vui-color-primary, var(--vui-gold-500)) transparent;
}
/* Light mode scrollbar track */
[data-vui-mode="light"] * {
scrollbar-color: var(--vui-color-primary, var(--vui-gold-600)) rgba(0, 0, 0, 0.05);
}
/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--vui-color-primary, #c9a227);
border-radius: 5px;
border: 2px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background: var(--vui-color-primary-hover, #e8b930);
background-clip: content-box;
}
/* Light mode webkit scrollbar */
[data-vui-mode="light"] ::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.04);
}
[data-vui-mode="light"] ::-webkit-scrollbar-thumb {
background: var(--vui-color-primary, #daa520);
border: 2px solid transparent;
background-clip: content-box;
}
[data-vui-mode="light"] ::-webkit-scrollbar-thumb:hover {
background: var(--vui-color-primary-hover, #c9a227);
background-clip: content-box;
}
/* Notation container - always light scrollbar (matches light sheet background) */
#notation-container::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.06);
}
#notation-container::-webkit-scrollbar-thumb {
background: var(--vui-color-primary, #daa520);
border: 2px solid transparent;
background-clip: content-box;
}
#notation-container {
scrollbar-color: var(--vui-color-primary, #daa520) rgba(0, 0, 0, 0.06);
}
}
/* tokens/spacing.css */
/* © 2024-2026 Mehdi TMIMI — Vivace Music (vivace-music.org) */
/**
* VIVACE UI - Spacing Tokens
*
* Consistent spacing scale based on 4px unit.
* Use these instead of arbitrary pixel values.
*/
@layer tokens {
:root {
/* Base unit */
--vui-space-unit: 4px;
/* Spacing Scale */
--vui-space-0: 0;
--vui-space-px: 1px;
--vui-space-0-5: calc(var(--vui-space-unit) * 0.5); /* 2px */
--vui-space-1: var(--vui-space-unit); /* 4px */
--vui-space-1-5: calc(var(--vui-space-unit) * 1.5); /* 6px */
--vui-space-2: calc(var(--vui-space-unit) * 2); /* 8px */
--vui-space-2-5: calc(var(--vui-space-unit) * 2.5); /* 10px */
--vui-space-3: calc(var(--vui-space-unit) * 3); /* 12px */
--vui-space-3-5: calc(var(--vui-space-unit) * 3.5); /* 14px */
--vui-space-4: calc(var(--vui-space-unit) * 4); /* 16px */
--vui-space-5: calc(var(--vui-space-unit) * 5); /* 20px */
--vui-space-6: calc(var(--vui-space-unit) * 6); /* 24px */
--vui-space-7: calc(var(--vui-space-unit) * 7); /* 28px */
--vui-space-8: calc(var(--vui-space-unit) * 8); /* 32px */
--vui-space-9: calc(var(--vui-space-unit) * 9); /* 36px */
--vui-space-10: calc(var(--vui-space-unit) * 10); /* 40px */
--vui-space-11: calc(var(--vui-space-unit) * 11); /* 44px */
--vui-space-12: calc(var(--vui-space-unit) * 12); /* 48px */
--vui-space-14: calc(var(--vui-space-unit) * 14); /* 56px */
--vui-space-16: calc(var(--vui-space-unit) * 16); /* 64px */
--vui-space-20: calc(var(--vui-space-unit) * 20); /* 80px */
--vui-space-24: calc(var(--vui-space-unit) * 24); /* 96px */
/* Semantic Aliases */
--vui-space-xs: var(--vui-space-1); /* 4px - tight gaps */
--vui-space-sm: var(--vui-space-2); /* 8px - small padding */
--vui-space-md: var(--vui-space-4); /* 16px - default */
--vui-space-lg: var(--vui-space-6); /* 24px - section gaps */
--vui-space-xl: var(--vui-space-8); /* 32px - large sections */
--vui-space-2xl: var(--vui-space-12); /* 48px - hero spacing */
--vui-space-3xl: var(--vui-space-16); /* 64px - page sections */
/* Component-specific spacing */
--vui-space-btn-padding-x: var(--vui-space-4);
--vui-space-btn-padding-y: var(--vui-space-2);
--vui-space-btn-gap: var(--vui-space-2);
--vui-space-card-padding: var(--vui-space-4);
--vui-space-input-padding-x: var(--vui-space-3);
--vui-space-input-padding-y: var(--vui-space-2);
/* Layout spacing */
--vui-space-page-gutter: var(--vui-space-4);
--vui-space-section-gap: var(--vui-space-8);
--vui-space-content-max: 1200px;
}
/* Responsive adjustments */
@media (min-width: 768px) {
:root {
--vui-space-page-gutter: var(--vui-space-6);
}
}
@media (min-width: 1024px) {
:root {
--vui-space-page-gutter: var(--vui-space-8);
}
}
}
/* tokens/typography.css */
/* © 2024-2026 Mehdi TMIMI — Vivace Music (vivace-music.org) */
/**
* VIVACE UI - Typography Tokens
*
* Font families, sizes, weights, and line heights.
*/
@layer tokens {
:root {
/* ================================
FONT FAMILIES
================================ */
/* Poppins is the site face (home, library, tools). Tajawal stays the
Arabic face and is applied by [lang="ar"] / --vui-font-arabic. */
--vui-font-sans: 'Poppins', 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--vui-font-arabic: 'Tajawal', 'Amiri', 'Noto Naskh Arabic', sans-serif;
--vui-font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
/* ================================
FONT SIZES (with line heights)
================================ */
--vui-text-xs: 0.75rem; /* 12px */
--vui-text-sm: 0.875rem; /* 14px */
--vui-text-base: 1rem; /* 16px */
--vui-text-lg: 1.125rem; /* 18px */
--vui-text-xl: 1.25rem; /* 20px */
--vui-text-2xl: 1.5rem; /* 24px */
--vui-text-3xl: 1.875rem; /* 30px */
--vui-text-4xl: 2.25rem; /* 36px */
--vui-text-5xl: 3rem; /* 48px */
/* Line Heights */
--vui-leading-none: 1;
--vui-leading-tight: 1.25;
--vui-leading-snug: 1.375;
--vui-leading-normal: 1.5;
--vui-leading-relaxed: 1.625;
--vui-leading-loose: 2;
/* ================================
FONT WEIGHTS
================================ */
--vui-font-thin: 100;
--vui-font-light: 300;
--vui-font-normal: 400;
--vui-font-medium: 500;
--vui-font-semibold: 600;
--vui-font-bold: 700;
--vui-font-extrabold: 800;
/* ================================
LETTER SPACING
================================ */
--vui-tracking-tighter: -0.05em;
--vui-tracking-tight: -0.025em;
--vui-tracking-normal: 0;
--vui-tracking-wide: 0.025em;
--vui-tracking-wider: 0.05em;
--vui-tracking-widest: 0.1em;
/* ================================
SEMANTIC TYPOGRAPHY
================================ */
/* Body text */
--vui-body-font: var(--vui-font-sans);
--vui-body-size: var(--vui-text-base);
--vui-body-weight: var(--vui-font-normal);
--vui-body-leading: var(--vui-leading-normal);
/* Headings */
--vui-heading-font: var(--vui-font-sans);
--vui-heading-weight: var(--vui-font-bold);
--vui-heading-leading: var(--vui-leading-tight);
/* Labels / UI */
--vui-label-size: var(--vui-text-sm);
--vui-label-weight: var(--vui-font-medium);
/* Small / Caption */
--vui-caption-size: var(--vui-text-xs);
--vui-caption-weight: var(--vui-font-normal);
/* Buttons */
--vui-btn-font-size: var(--vui-text-sm);
--vui-btn-font-weight: var(--vui-font-medium);
}
/* RTL adjustments for Arabic */
[dir="rtl"] {
--vui-body-font: var(--vui-font-arabic);
--vui-heading-font: var(--vui-font-arabic);
}
}
/* tokens/shadows.css */
/* © 2024-2026 Mehdi TMIMI — Vivace Music (vivace-music.org) */
/**
* VIVACE UI - Shadow Tokens
*
* Elevation system for depth and hierarchy.
*/
@layer tokens {
:root {
/* ================================
ELEVATION SHADOWS
================================ */
/* Subtle - barely visible lift */
--vui-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
/* Small - buttons, small cards */
--vui-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1),
0 1px 2px rgba(0, 0, 0, 0.06);
/* Medium - cards, dropdowns */
--vui-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
/* Large - modals, floating panels */
--vui-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
/* Extra large - full overlays */
--vui-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04);
/* 2XL - maximum elevation */
--vui-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
/* Inner shadow (inset) */
--vui-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
/* No shadow */
--vui-shadow-none: none;
/* ================================
GLOW EFFECTS (for active states)
================================ */
/* Gold glow - primary actions */
--vui-glow-gold: 0 0 20px rgba(201, 162, 39, 0.4);
--vui-glow-gold-sm: 0 0 10px rgba(201, 162, 39, 0.3);
--vui-glow-gold-lg: 0 0 30px rgba(201, 162, 39, 0.5);
/* Success glow */
--vui-glow-success: 0 0 20px rgba(16, 185, 129, 0.4);
/* Error glow */
--vui-glow-error: 0 0 20px rgba(239, 68, 68, 0.4);
/* ================================
COMPONENT SHADOWS
================================ */
/* Buttons */
--vui-btn-shadow: var(--vui-shadow-sm);
--vui-btn-shadow-hover: var(--vui-shadow-md);
--vui-btn-shadow-active: var(--vui-glow-gold-sm);
/* Cards */
--vui-card-shadow: var(--vui-shadow-md);
--vui-card-shadow-hover: var(--vui-shadow-lg);
/* Dropdowns/Menus */
--vui-dropdown-shadow: var(--vui-shadow-lg);
/* Modals */
--vui-modal-shadow: var(--vui-shadow-2xl);
/* Sliders (thumb) */
--vui-slider-thumb-shadow: 0 2px 8px rgba(201, 162, 39, 0.5);
}
/* Dark mode shadow adjustments */
[data-vui-mode="dark"] {
--vui-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
--vui-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3),
0 1px 2px rgba(0, 0, 0, 0.2);
--vui-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3),
0 2px 4px -1px rgba(0, 0, 0, 0.2);
--vui-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4),
0 4px 6px -2px rgba(0, 0, 0, 0.2);
--vui-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5),
0 10px 10px -5px rgba(0, 0, 0, 0.2);
--vui-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}
}
/* tokens/borders.css */
/* © 2024-2026 Mehdi TMIMI — Vivace Music (vivace-music.org) */
/**
* VIVACE UI - Border Tokens
*
* Border widths, radii, and styles.
*/
@layer tokens {
:root {
/* ================================
BORDER WIDTHS
================================ */
--vui-border-0: 0;
--vui-border-1: 1px;
--vui-border-2: 2px;
--vui-border-3: 3px;
--vui-border-4: 4px;
/* Semantic */
--vui-border-thin: var(--vui-border-1);
--vui-border-medium: var(--vui-border-2);
--vui-border-thick: var(--vui-border-3);
/* ================================
BORDER RADII
================================ */
--vui-radius-none: 0;
--vui-radius-xs: 2px;
--vui-radius-sm: 4px;
--vui-radius-md: 8px;
--vui-radius-lg: 12px;
--vui-radius-xl: 16px;
--vui-radius-2xl: 24px;
--vui-radius-3xl: 32px;
--vui-radius-full: 9999px;
/* ================================
COMPONENT RADII
================================ */
--vui-btn-radius: var(--vui-radius-md);
--vui-btn-radius-sm: var(--vui-radius-sm);
--vui-btn-radius-lg: var(--vui-radius-lg);
--vui-btn-radius-full: var(--vui-radius-full);
--vui-card-radius: var(--vui-radius-lg);
--vui-input-radius: var(--vui-radius-md);
--vui-modal-radius: var(--vui-radius-xl);
--vui-badge-radius: var(--vui-radius-full);
--vui-slider-radius: var(--vui-radius-full);
/* ================================
BORDER STYLES
================================ */
/* Default border */
--vui-border-default: var(--vui-border-1) solid var(--vui-color-border);
/* Strong border */
--vui-border-strong: var(--vui-border-2) solid var(--vui-color-border-strong);
/* Primary border (gold) */
--vui-border-primary: var(--vui-border-2) solid var(--vui-color-primary);
/* Muted border */
--vui-border-muted: var(--vui-border-1) solid var(--vui-color-border-muted);
/* ================================
DIVIDERS
================================ */
--vui-divider-color: var(--vui-color-border);
--vui-divider-size: var(--vui-border-1);
}
}
/* tokens/animations.css */
/* © 2024-2026 Mehdi TMIMI — Vivace Music (vivace-music.org) */
/**
* VIVACE UI - Animation Tokens
*
* Transitions, timing functions, and keyframe animations.
*/
@layer tokens {
:root {
/* ================================
TRANSITION DURATIONS
================================ */
--vui-duration-fastest: 50ms;
--vui-duration-fast: 100ms;
--vui-duration-normal: 150ms;
--vui-duration-slow: 300ms;
--vui-duration-slower: 500ms;
--vui-duration-slowest: 700ms;
/* ================================
EASING FUNCTIONS
================================ */
--vui-ease-linear: linear;
--vui-ease-in: cubic-bezier(0.4, 0, 1, 1);
--vui-ease-out: cubic-bezier(0, 0, 0.2, 1);
--vui-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
/* Bounce/Spring */
--vui-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--vui-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
/* ================================
COMMON TRANSITIONS
================================ */
--vui-transition-colors: color var(--vui-duration-normal) var(--vui-ease-in-out),
background-color var(--vui-duration-normal) var(--vui-ease-in-out),
border-color var(--vui-duration-normal) var(--vui-ease-in-out);
--vui-transition-opacity: opacity var(--vui-duration-normal) var(--vui-ease-in-out);
--vui-transition-transform: transform var(--vui-duration-normal) var(--vui-ease-in-out);
--vui-transition-shadow: box-shadow var(--vui-duration-normal) var(--vui-ease-in-out);
--vui-transition-all: all var(--vui-duration-normal) var(--vui-ease-in-out);
/* Component-specific */
--vui-btn-transition: var(--vui-transition-colors), var(--vui-transition-shadow), var(--vui-transition-transform);
--vui-input-transition: var(--vui-transition-colors), var(--vui-transition-shadow);
--vui-card-transition: var(--vui-transition-shadow), var(--vui-transition-transform);
/* ================================
Z-INDEX SCALE
================================ */
--vui-z-below: -1;
--vui-z-base: 0;
--vui-z-raised: 10;
--vui-z-dropdown: 100;
--vui-z-sticky: 200;
--vui-z-fixed: 300;
--vui-z-modal-backdrop: 400;
--vui-z-modal: 500;
--vui-z-popover: 600;
--vui-z-tooltip: 700;
--vui-z-toast: 800;
--vui-z-loading: 900;
--vui-z-top: 9999;
}
}
/* ================================
KEYFRAME ANIMATIONS
================================ */
@layer base {
@keyframes vui-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes vui-fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes vui-slide-up {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes vui-slide-down {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes vui-scale-in {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes vui-scale-out {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0.95);
}
}
@keyframes vui-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes vui-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
@keyframes vui-bounce {
0%, 100% {
transform: translateY(0);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
@keyframes vui-shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
20%, 40%, 60%, 80% { transform: translateX(4px); }
}
@keyframes vui-glow-pulse {
0%, 100% {
box-shadow: 0 0 5px rgba(201, 162, 39, 0.4);
}
50% {
box-shadow: 0 0 20px rgba(201, 162, 39, 0.6);
}
}
/* Bottom sheet animation */
@keyframes vui-slide-up-full {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
/* Sidebar animation */
@keyframes vui-slide-in-right {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
@keyframes vui-slide-in-left {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
}
/* themes/theme-light.css */
/* © 2024-2026 Mehdi TMIMI — Vivace Music (vivace-music.org) */
/**
* VIVACE UI - Theme Light
*
* Light mode color overrides.
* Applied when: data-vui-mode="light" or no mode specified
*/
@layer themes {
:root,
[data-vui-mode="light"] {
/* Surface colors */
--vui-color-surface: var(--vui-neutral-0);
--vui-color-surface-elevated: var(--vui-neutral-50);
--vui-color-surface-sunken: var(--vui-neutral-100);
--vui-color-backdrop: rgba(0, 0, 0, 0.5);
/* Text colors */
--vui-color-text: var(--vui-neutral-900);
--vui-color-text-muted: var(--vui-neutral-500);
--vui-color-text-on-primary: var(--vui-neutral-0);
/* Border colors */
--vui-color-border: var(--vui-neutral-200);
--vui-color-border-muted: var(--vui-neutral-100);
--vui-color-border-strong: var(--vui-neutral-300);
}
}
/* themes/theme-dark.css */
/* © 2024-2026 Mehdi TMIMI — Vivace Music (vivace-music.org) */
/**
* VIVACE UI - Theme Dark
*
* Dark mode color overrides.
* Applied when: data-vui-mode="dark"
*/
@layer themes {
[data-vui-mode="dark"] {
/* Surface colors */
--vui-color-surface: var(--vui-neutral-900);
--vui-color-surface-elevated: var(--vui-neutral-800);
--vui-color-surface-sunken: var(--vui-neutral-950);
--vui-color-backdrop: rgba(0, 0, 0, 0.7);
/* Text colors */
--vui-color-text: var(--vui-neutral-50);
--vui-color-text-muted: var(--vui-neutral-400);
--vui-color-text-on-primary: var(--vui-neutral-900);
/* Border colors */
--vui-color-border: var(--vui-neutral-700);
--vui-color-border-muted: var(--vui-neutral-800);
--vui-color-border-strong: var(--vui-neutral-600);
/* Adjust primary for better contrast in dark mode */
--vui-color-primary: var(--vui-gold-600);
--vui-color-primary-hover: var(--vui-gold-500);
}
}
/* themes/theme-andalousie.css */
/* © 2024-2026 Mehdi TMIMI — Vivace Music (vivace-music.org) */
/**
* VIVACE UI - Theme Andalousie
*
* Gold and brown palette for Andalusian music section.
* Designed for WCAG AA contrast compliance.
*
* Color Hierarchy:
* - Primary: Gold (#c9a227) - brand accent
* - Surface: Background layers (3 levels)
* - Text: 3 levels (primary, secondary, muted)
* - Border: 3 levels (default, muted, strong)
*/
@layer themes {
/* ========================================
LIGHT MODE (Default)
======================================== */
[data-vui-theme="andalousie"],
[data-vui-theme="andalousie"][data-vui-mode="light"] {
/* --- PRIMARY (Gold) --- */
--vui-color-primary: #c9a227;
--vui-color-primary-hover: #b8930f;
--vui-color-primary-active: #a07d1c;
--vui-color-primary-muted: rgba(201, 162, 39, 0.15);
/* --- SURFACES (Light warm cream) --- */
--vui-color-surface: #faf8f0;
--vui-color-surface-elevated: #ffffff;
--vui-color-surface-sunken: #f5f0e0;
/* --- TEXT (Dark browns - high contrast) --- */
--vui-color-text: #2a1f14;
--vui-color-text-secondary: #5a4530;
--vui-color-text-muted: #8b7355;
--vui-color-text-on-primary: #ffffff;
/* --- BORDERS --- */
--vui-color-border: rgba(90, 69, 48, 0.25);
--vui-color-border-muted: rgba(90, 69, 48, 0.12);
--vui-color-border-strong: rgba(90, 69, 48, 0.4);
/* --- FOCUS --- */
--vui-color-focus: #c9a227;
--vui-focus-ring: 0 0 0 3px rgba(201, 162, 39, 0.4);
/* --- BUTTONS --- */
--vui-btn-bg: linear-gradient(135deg, #f5f0e0, #ebe5d5);
--vui-btn-bg-hover: linear-gradient(135deg, #ebe5d5, #d4c9b5);
--vui-btn-color: #2a1f14;
--vui-btn-border-color: rgba(90, 69, 48, 0.3);
--vui-btn-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
--vui-btn-active-bg: linear-gradient(135deg, #c9a227, #b8930f);
--vui-btn-active-color: #ffffff;
--vui-btn-active-border: #a07d1c;
--vui-btn-active-shadow: 0 0 8px rgba(201, 162, 39, 0.4);
/* --- LOOP SELECTION --- */
--vui-loop-highlight-fill: rgba(255, 193, 7, 0.2);
--vui-loop-highlight-fill-light: rgba(255, 193, 7, 0.15);
--vui-loop-bracket-stroke: #ff9800;
--vui-loop-btn-bg: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
--vui-loop-btn-color: #1a1a2e;
--vui-loop-btn-shadow: rgba(255, 193, 7, 0.4);
--vui-loop-btn-shadow-hover: rgba(255, 193, 7, 0.5);
--vui-loop-handle-bg: linear-gradient(180deg, #ffc107 0%, #ff9800 100%);
/* --- CURSOR --- */
--vui-cursor-color: #e67e22;
--vui-cursor-glow: rgba(230, 126, 34, 0.6);
--vui-cursor-glow-accent: rgba(241, 196, 15, 0.4);
/* --- SLIDERS --- */
--vui-slider-track-bg: rgba(201, 162, 39, 0.2);
--vui-slider-thumb-bg: linear-gradient(135deg, #c9a227, #b8930f);
--vui-slider-accent: #c9a227;
/* --- CARDS --- */
--vui-card-bg: #ffffff;
--vui-card-border: rgba(90, 69, 48, 0.15);
}
/* ========================================
DARK MODE
======================================== */
[data-vui-theme="andalousie"][data-vui-mode="dark"] {
/* --- PRIMARY (Brighter gold for dark bg) --- */
--vui-color-primary: #daa520;
--vui-color-primary-hover: #e8b930;
--vui-color-primary-active: #f5d05b;
--vui-color-primary-muted: rgba(218, 165, 32, 0.2);
/* --- SURFACES (Warm dark browns) --- */
--vui-color-surface: #1a1410;
--vui-color-surface-elevated: #2d2318;
--vui-color-surface-sunken: #100c08;
/* --- TEXT (All bright for readability) --- */
--vui-color-text: #ffffff;
--vui-color-text-secondary: #e5dcc8;
--vui-color-text-muted: #c9b896;
--vui-color-text-on-primary: #1a1410;
/* --- BORDERS --- */
--vui-color-border: rgba(218, 165, 32, 0.3);
--vui-color-border-muted: rgba(218, 165, 32, 0.15);
--vui-color-border-strong: rgba(218, 165, 32, 0.5);
/* --- FOCUS --- */
--vui-color-focus: #daa520;
--vui-focus-ring: 0 0 0 3px rgba(218, 165, 32, 0.5);
/* --- BUTTONS --- */
--vui-btn-bg: linear-gradient(135deg, #3d2914, #2d2318);
--vui-btn-bg-hover: linear-gradient(135deg, #4d3924, #3d2914);
--vui-btn-color: #ffffff;
--vui-btn-border-color: rgba(218, 165, 32, 0.35);
--vui-btn-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
--vui-btn-active-bg: linear-gradient(135deg, #daa520, #c9a227);
--vui-btn-active-color: #1a1410;
--vui-btn-active-border: #e8b930;
--vui-btn-active-shadow: 0 0 12px rgba(218, 165, 32, 0.5);
/* --- GHOST BUTTONS --- */
--vui-btn-ghost-color: #ffffff;
--vui-btn-ghost-hover-bg: rgba(218, 165, 32, 0.25);
/* --- SLIDERS --- */
--vui-slider-track-bg: rgba(218, 165, 32, 0.25);
--vui-slider-thumb-bg: linear-gradient(135deg, #daa520, #c9a227);
--vui-slider-accent: #daa520;
/* --- LOOP SELECTION --- */
--vui-loop-highlight-fill: rgba(255, 193, 7, 0.25);
--vui-loop-highlight-fill-light: rgba(255, 193, 7, 0.18);
--vui-loop-bracket-stroke: #ff9800;
--vui-loop-btn-bg: linear-gradient(135deg, #ffb300 0%, #f57c00 100%);
--vui-loop-btn-color: #ffffff;
--vui-loop-btn-shadow: rgba(255, 179, 0, 0.5);
--vui-loop-btn-shadow-hover: rgba(255, 179, 0, 0.6);
--vui-loop-handle-bg: linear-gradient(180deg, #daa520 0%, #c9a227 100%);
/* --- CURSOR --- */
--vui-cursor-color: #e67e22;
--vui-cursor-glow: rgba(230, 126, 34, 0.7);
--vui-cursor-glow-accent: rgba(241, 196, 15, 0.5);
/* --- CARDS --- */
--vui-card-bg: #2d2318;
--vui-card-border: rgba(218, 165, 32, 0.2);
}
}
/* themes/theme-orchestra.css */
/* © 2024-2026 Mehdi TMIMI — Vivace Music (vivace-music.org) */
/**
* VIVACE UI - Theme Orchestra
*
* Hot pink & dark palette for orchestra / classical music sections.
* Extracted from the original orchestra/styles.css (13k lines).
*
* Color Hierarchy (from original code):
* - Primary: Hot Pink (#ff6ec7) — accent, glows, gradients
* - Secondary: Orange (#ffb347) — gradient endpoints
* - Light-mode swap: Violet (#8b5cf6) replaces pink
* - Surface dark: Pure black (#0a0a0a / #1a1a1a)
* - Surface light: Clean gray (#f5f5f5 / #ffffff)
*/
@layer themes {
/* ========================================
LIGHT MODE (Default)
In light mode the old page swaps pink → violet (#8b5cf6)
======================================== */
[data-vui-theme="orchestra"],
[data-vui-theme="orchestra"][data-vui-mode="light"] {
/* --- PRIMARY (Violet — light-mode swap from original) --- */
--vui-color-primary: #8b5cf6;
--vui-color-primary-hover: #7c3aed;
--vui-color-primary-active: #6d28d9;
--vui-color-primary-muted: rgba(139, 92, 246, 0.15);
--vui-color-primary-light: #a78bfa;
/* --- SURFACES (from --bg-primary / --bg-secondary light) --- */
--vui-color-surface: #f5f5f5;
--vui-color-surface-elevated: #ffffff;
--vui-color-surface-sunken: #f0f0f0;
/* --- TEXT (from --text-primary/secondary/muted light) --- */
--vui-color-text: #1a1a1a;
--vui-color-text-secondary: #4a4a4a;
--vui-color-text-muted: #707070;
--vui-color-text-on-primary: #ffffff;
/* --- BORDERS (from --border-color light) --- */
--vui-color-border: rgba(0, 0, 0, 0.1);
--vui-color-border-muted: rgba(0, 0, 0, 0.06);
--vui-color-border-strong: rgba(0, 0, 0, 0.2);
/* --- FOCUS --- */
--vui-color-focus: #8b5cf6;
--vui-focus-ring: 0 0 0 3px rgba(139, 92, 246, 0.4);
/* --- BUTTONS --- */
--vui-btn-bg: linear-gradient(135deg, #f0f0f0, #e8e8e8);
--vui-btn-bg-hover: linear-gradient(135deg, #e8e8e8, #d8d8d8);
--vui-btn-color: #1a1a1a;
--vui-btn-border-color: rgba(0, 0, 0, 0.12);
--vui-btn-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
--vui-btn-active-bg: linear-gradient(135deg, #8b5cf6, #a78bfa);
--vui-btn-active-color: #ffffff;
--vui-btn-active-border: #7c3aed;
--vui-btn-active-shadow: 0 0 8px rgba(139, 92, 246, 0.4);
/* --- SLIDERS (violet-tinted) --- */
--vui-slider-track-bg: rgba(139, 92, 246, 0.15);
--vui-slider-thumb-bg: linear-gradient(135deg, #8b5cf6, #a78bfa);
--vui-slider-accent: #8b5cf6;
/* --- CARDS --- */
--vui-card-bg: #ffffff;
--vui-card-border: rgba(0, 0, 0, 0.08);
}
/* ========================================
DARK MODE
Original palette: pink #ff6ec7 + orange #ffb347
======================================== */
[data-vui-theme="orchestra"][data-vui-mode="dark"] {
/* --- PRIMARY (Hot Pink — from original #ff6ec7) --- */
--vui-color-primary: #ff6ec7;
--vui-color-primary-hover: #ff8cd9;
--vui-color-primary-active: #ffb3e6;
--vui-color-primary-muted: rgba(255, 110, 199, 0.2);
--vui-color-primary-light: #ffb347;
/* --- SURFACES (from --bg-primary #0a0a0a, --bg-secondary #1a1a1a) --- */
--vui-color-surface: #0a0a0a;
--vui-color-surface-elevated: #1a1a1a;
--vui-color-surface-sunken: #050505;
/* --- TEXT (from --text-primary #cccccc etc.) --- */
--vui-color-text: #cccccc;
--vui-color-text-secondary: #b0b0b0;
--vui-color-text-muted: #888888;
--vui-color-text-on-primary: #ffffff;
/* --- BORDERS (from --border-color rgba(255,255,255,0.1)) --- */
--vui-color-border: rgba(255, 255, 255, 0.1);
--vui-color-border-muted: rgba(255, 255, 255, 0.06);
--vui-color-border-strong: rgba(255, 110, 199, 0.35);
/* --- FOCUS --- */
--vui-color-focus: #ff6ec7;
--vui-focus-ring: 0 0 0 3px rgba(255, 110, 199, 0.5);
/* --- BUTTONS --- */
--vui-btn-bg: linear-gradient(135deg, #1a1a1a, #121212);
--vui-btn-bg-hover: linear-gradient(135deg, #232323, #1a1a1a);
--vui-btn-color: #cccccc;
--vui-btn-border-color: rgba(255, 255, 255, 0.1);
--vui-btn-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
--vui-btn-active-bg: linear-gradient(135deg, #ff6ec7, #ffb347);
--vui-btn-active-color: #ffffff;
--vui-btn-active-border: #ff6ec7;
--vui-btn-active-shadow: 0 0 12px rgba(255, 110, 199, 0.5);
/* --- GHOST BUTTONS --- */
--vui-btn-ghost-color: #cccccc;
--vui-btn-ghost-hover-bg: rgba(255, 110, 199, 0.15);
/* --- SLIDERS (pink → orange gradient) --- */
--vui-slider-track-bg: rgba(255, 110, 199, 0.2);
--vui-slider-thumb-bg: linear-gradient(135deg, #ff6ec7, #ffb347);
--vui-slider-accent: #ff6ec7;
/* --- CARDS (from --bg-card) --- */
--vui-card-bg: rgba(26, 26, 26, 0.95);
--vui-card-border: rgba(255, 110, 199, 0.15);
}
}
/* base.css */
/* © 2024-2026 Mehdi TMIMI — Vivace Music (vivace-music.org) */
/**
* VIVACE UI - Base Styles
*
* Default element styles that use theme variables.
* Must load AFTER tokens and themes.
*/
@layer base {
/* ================================
RESET
================================ */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
/* ================================
BODY - Uses theme variables
================================ */
html, body {
background-color: var(--vui-color-surface, #faf8f0);
}
body {
margin: 0;
font-family: var(--vui-body-font, 'Tajawal', sans-serif);
font-size: var(--vui-body-size, 1rem);
font-weight: var(--vui-body-weight, 400);
line-height: var(--vui-body-leading, 1.5);
color: var(--vui-color-text, #2a1f14);
overflow-x: hidden;
min-height: 100vh;
}
[dir="rtl"] body {
font-family: var(--vui-font-arabic, 'Tajawal', sans-serif);
}
/* ================================
HEADINGS
================================ */
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-family: var(--vui-heading-font, 'Tajawal', sans-serif);
font-weight: var(--vui-heading-weight, 700);
line-height: var(--vui-heading-leading, 1.25);
color: var(--vui-color-text, #2a1f14);
}
h1 { font-size: var(--vui-text-4xl, 2.25rem); }
h2 { font-size: var(--vui-text-3xl, 1.875rem); }
h3 { font-size: var(--vui-text-2xl, 1.5rem); }
h4 { font-size: var(--vui-text-xl, 1.25rem); }
h5 { font-size: var(--vui-text-lg, 1.125rem); }
h6 { font-size: var(--vui-text-base, 1rem); }
/* ================================
LINKS
================================ */
a {
color: var(--vui-color-primary, #c9a227);
text-decoration: none;
}
a:hover {
color: var(--vui-color-primary-hover, #b8930f);
}
/* ================================
IMAGES & MEDIA
================================ */
img, svg {
display: block;
}
/* Apply max-width to images but NOT to OSMD notation SVGs
(notation SVGs need their original size for cursor positioning) */
img {
max-width: 100%;
}
/* Most images should be auto-height, but OSMD cursor images
must NOT be forced to height:auto or they collapse and become invisible */
img:not([id^="cursorImg"]) {
height: auto;
}
/* OSMD Notation container SVG - let OSMD control size for cursor alignment */
.vui-notation-container svg {
width: auto !important;
max-width: none !important;
height: auto;
}
/* ================================
FORMS
================================ */
button {
font-family: inherit;
font-size: inherit;
line-height: inherit;
margin: 0;
}
/* ================================
FOCUS
================================ */
:focus:not(:focus-visible) {
outline: none;
}
:focus-visible {
outline: 2px solid var(--vui-color-focus, #c9a227);
outline-offset: 2px;
}
/* ================================
MOTION
================================ */
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
}
/* components/buttons.css */
/* © 2024-2026 Mehdi TMIMI — Vivace Music (vivace-music.org) */
/**
* VIVACE UI - Button Component
*
* Usage:
*
*
*
*
*/
@layer components {
/* ================================
BASE BUTTON
================================ */
.vui-btn {
/* Layout */
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--vui-space-btn-gap, var(--vui-space-2));
/* Sizing */
padding: var(--vui-space-btn-padding-y, var(--vui-space-2))
var(--vui-space-btn-padding-x, var(--vui-space-4));
min-height: var(--vui-btn-height, 40px);
/* Appearance */
background: var(--vui-btn-bg, var(--vui-color-surface-elevated));
color: var(--vui-btn-color, var(--vui-color-text));
border: var(--vui-border-medium) solid var(--vui-btn-border-color, var(--vui-color-border));
border-radius: var(--vui-btn-radius, var(--vui-radius-md));
box-shadow: var(--vui-btn-shadow, var(--vui-shadow-sm));
/* Typography */
font-family: var(--vui-body-font);
font-size: var(--vui-btn-font-size, var(--vui-text-sm));
font-weight: var(--vui-btn-font-weight, var(--vui-font-medium));
line-height: 1;
text-decoration: none;
white-space: nowrap;
/* Behavior */
cursor: pointer;
user-select: none;
transition: var(--vui-btn-transition);
/* Remove defaults */
outline: none;
-webkit-tap-highlight-color: transparent;
}
/* Hover state */
.vui-btn:hover:not(:disabled) {
background: var(--vui-btn-bg-hover, var(--vui-color-surface));
border-color: var(--vui-color-primary);
box-shadow: var(--vui-btn-shadow-hover, var(--vui-shadow-md));
transform: translateY(-1px);
}
/* Active/pressed state */
.vui-btn:active:not(:disabled) {
transform: translateY(0);
box-shadow: var(--vui-shadow-sm);
}
/* Focus state */
.vui-btn:focus-visible {
outline: none;
box-shadow: var(--vui-focus-ring);
}
/* Disabled state */
.vui-btn:disabled,
.vui-btn.vui-btn--disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* ================================
ICON BUTTON (.vui-btn--icon)
================================ */
.vui-btn--icon {
--vui-btn-size: 40px;
width: var(--vui-btn-size);
height: var(--vui-btn-size);
min-width: var(--vui-btn-size);
min-height: var(--vui-btn-size);
padding: 0;
aspect-ratio: 1 / 1;
}
.vui-btn--icon i,
.vui-btn--icon svg {
font-size: 1rem;
width: 1rem;
height: 1rem;
}
/* ================================
ACTIVE STATE (.vui-btn--active)
================================ */
.vui-btn--active {
background: var(--vui-btn-active-bg, var(--vui-color-primary));
color: var(--vui-btn-active-color, var(--vui-color-text-on-primary));
border-color: var(--vui-btn-active-border, var(--vui-color-primary));
box-shadow: var(--vui-btn-active-shadow, var(--vui-glow-gold-sm));
}
.vui-btn--active:hover:not(:disabled) {
background: var(--vui-color-primary-hover);
border-color: var(--vui-color-primary-hover);
}
/* ================================
PRIMARY BUTTON (.vui-btn--primary)
================================ */
.vui-btn--primary {
background: var(--vui-color-primary);
color: var(--vui-color-text-on-primary);
border-color: var(--vui-color-primary);
}
.vui-btn--primary:hover:not(:disabled) {
background: var(--vui-color-primary-hover);
border-color: var(--vui-color-primary-hover);
}
/* ================================
GHOST BUTTON (.vui-btn--ghost)
================================ */
.vui-btn--ghost {
background: transparent;
border-color: transparent;
box-shadow: none;
color: var(--vui-btn-ghost-color, var(--vui-color-text));
}
.vui-btn--ghost:hover:not(:disabled) {
background: var(--vui-btn-ghost-hover-bg, var(--vui-color-primary-muted));
border-color: transparent;
box-shadow: none;
}
/* ================================
SIZES
================================ */
.vui-btn--sm {
--vui-btn-size: 32px;
--vui-btn-height: 32px;
font-size: var(--vui-text-xs);
padding: var(--vui-space-1) var(--vui-space-3);
}
.vui-btn--sm.vui-btn--icon i,
.vui-btn--sm.vui-btn--icon svg {
font-size: 0.875rem;
}
.vui-btn--lg {
--vui-btn-size: 48px;
--vui-btn-height: 48px;
font-size: var(--vui-text-base);
padding: var(--vui-space-3) var(--vui-space-6);
}
.vui-btn--lg.vui-btn--icon i,
.vui-btn--lg.vui-btn--icon svg {
font-size: 1.25rem;
}
.vui-btn--xl {
--vui-btn-size: 56px;
--vui-btn-height: 56px;
font-size: var(--vui-text-lg);
padding: var(--vui-space-4) var(--vui-space-8);
}
/* ================================
SHAPES
================================ */
.vui-btn--rounded {
border-radius: var(--vui-radius-full);
}
.vui-btn--square {
border-radius: var(--vui-radius-sm);
}
/* ================================
LOADING STATE (.vui-btn--loading)
================================ */
.vui-btn--loading {
position: relative;
color: transparent;
pointer-events: none;
}
.vui-btn--loading::after {
content: '';
position: absolute;
width: 1em;
height: 1em;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: vui-spin 0.6s linear infinite;
color: var(--vui-color-text-on-primary);
}
/* ================================
BUTTON WITH BADGE
================================ */
.vui-btn .vui-badge {
position: absolute;
top: -4px;
right: -4px;
}
[dir="rtl"] .vui-btn .vui-badge {
right: auto;
left: -4px;
}
/* ================================
BUTTON GROUP
================================ */
.vui-btn-group {
display: inline-flex;
align-items: center;
gap: var(--vui-space-1);
padding: var(--vui-space-1);
background: var(--vui-color-surface-sunken, rgba(0, 0, 0, 0.06));
border-radius: var(--vui-radius-lg);
border: 1px solid var(--vui-color-border);
}
.vui-btn-group .vui-btn {
border: none;
box-shadow: none;
background: transparent;
border-radius: var(--vui-radius-md);
}
.vui-btn-group .vui-btn:hover:not(:disabled) {
background: var(--vui-color-surface-elevated);
box-shadow: var(--vui-shadow-sm);
transform: none;
border-color: transparent;
}
.vui-btn-group .vui-btn--active {
background: var(--vui-color-surface-elevated);
box-shadow: var(--vui-shadow-sm);
color: var(--vui-color-primary);
border-color: transparent;
}
}
/* components/controls.css */
/* © 2024-2026 Mehdi TMIMI — Vivace Music (vivace-music.org) */
/**
* VIVACE UI - Controls (Sliders, Toggles)
*
* Form controls with consistent styling.
*/
@layer components {
/* ================================
RANGE SLIDER
================================ */
.vui-slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
background: var(--vui-slider-track-bg, var(--vui-color-border));
border-radius: var(--vui-radius-full);
cursor: pointer;
outline: none;
}
/* Webkit (Chrome, Safari, Edge) */
.vui-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 18px;
height: 18px;
background: var(--vui-slider-thumb-bg, var(--vui-color-primary));
border: 2px solid var(--vui-color-surface);
border-radius: 50%;
cursor: pointer;
box-shadow: var(--vui-slider-thumb-shadow);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.vui-slider::-webkit-slider-thumb:hover {
transform: scale(1.1);
box-shadow: var(--vui-glow-gold);
}
.vui-slider::-webkit-slider-thumb:active {
transform: scale(0.95);
}
/* Firefox */
.vui-slider::-moz-range-thumb {
width: 18px;
height: 18px;
background: var(--vui-slider-thumb-bg, var(--vui-color-primary));
border: 2px solid var(--vui-color-surface);
border-radius: 50%;
cursor: pointer;
box-shadow: var(--vui-slider-thumb-shadow);
}
.vui-slider::-moz-range-track {
background: var(--vui-slider-track-bg, var(--vui-color-border));
border-radius: var(--vui-radius-full);
height: 6px;
}
/* Focus */
.vui-slider:focus-visible {
outline: none;
}
.vui-slider:focus-visible::-webkit-slider-thumb {
box-shadow: var(--vui-focus-ring);
}
/* Size variants */
.vui-slider--sm {
height: 4px;
}
.vui-slider--sm::-webkit-slider-thumb {
width: 14px;
height: 14px;
}
.vui-slider--lg {
height: 8px;
}
.vui-slider--lg::-webkit-slider-thumb {
width: 22px;
height: 22px;
}
/* ================================
TOGGLE SWITCH
================================ */
.vui-toggle {
--toggle-width: 44px;
--toggle-height: 24px;
--toggle-thumb-size: 18px;
position: relative;
display: inline-block;
width: var(--toggle-width);
height: var(--toggle-height);
}
.vui-toggle input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.vui-toggle__track {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--vui-color-border-strong);
border-radius: var(--vui-radius-full);
transition: background var(--vui-duration-normal) var(--vui-ease-in-out);
}
.vui-toggle__thumb {
position: absolute;
content: '';
height: var(--toggle-thumb-size);
width: var(--toggle-thumb-size);
left: 3px;
bottom: 3px;
background: var(--vui-color-surface);
border-radius: 50%;
box-shadow: var(--vui-shadow-sm);
transition: transform var(--vui-duration-normal) var(--vui-ease-spring);
}
/* Checked state */
.vui-toggle input:checked + .vui-toggle__track {
background: var(--vui-color-primary);
}
.vui-toggle input:checked + .vui-toggle__track .vui-toggle__thumb {
transform: translateX(calc(var(--toggle-width) - var(--toggle-thumb-size) - 6px));
}
/* RTL */
[dir="rtl"] .vui-toggle__thumb {
left: auto;
right: 3px;
}
[dir="rtl"] .vui-toggle input:checked + .vui-toggle__track .vui-toggle__thumb {
transform: translateX(calc(-1 * (var(--toggle-width) - var(--toggle-thumb-size) - 6px)));
}
/* Focus */
.vui-toggle input:focus-visible + .vui-toggle__track {
box-shadow: var(--vui-focus-ring);
}
/* Disabled */
.vui-toggle input:disabled + .vui-toggle__track {
opacity: 0.5;
cursor: not-allowed;
}
/* ================================
CHECKBOX
================================ */
.vui-checkbox {
--checkbox-size: 20px;
display: inline-flex;
align-items: center;
gap: var(--vui-space-2);
cursor: pointer;
}
.vui-checkbox input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.vui-checkbox__box {
width: var(--checkbox-size);
height: var(--checkbox-size);
border: 2px solid var(--vui-color-border-strong);
border-radius: var(--vui-radius-sm);
display: flex;
align-items: center;
justify-content: center;
transition: all var(--vui-duration-normal) var(--vui-ease-in-out);
}
.vui-checkbox__box i,
.vui-checkbox__box svg {
opacity: 0;
transform: scale(0.5);
color: var(--vui-color-text-on-primary);
font-size: 0.75rem;
transition: all var(--vui-duration-normal) var(--vui-ease-spring);
}
/* Checked state */
.vui-checkbox input:checked + .vui-checkbox__box {
background: var(--vui-color-primary);
border-color: var(--vui-color-primary);
}
.vui-checkbox input:checked + .vui-checkbox__box i,
.vui-checkbox input:checked + .vui-checkbox__box svg {
opacity: 1;
transform: scale(1);
}
/* Focus */
.vui-checkbox input:focus-visible + .vui-checkbox__box {
box-shadow: var(--vui-focus-ring);
}
}
/* components/badges.css */
/* © 2024-2026 Mehdi TMIMI — Vivace Music (vivace-music.org) */
/**
* VIVACE UI - Badges
*
* Small status indicators and labels.
*/
@layer components {
.vui-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--vui-space-0-5) var(--vui-space-1-5);
font-size: var(--vui-text-xs);
font-weight: var(--vui-font-semibold);
line-height: 1;
border-radius: var(--vui-badge-radius);
background: var(--vui-color-primary);
color: var(--vui-color-text-on-primary);
white-space: nowrap;
}
/* Variants */
.vui-badge--success {
background: var(--vui-success);
}
.vui-badge--warning {
background: var(--vui-warning);
color: var(--vui-neutral-900);
}
.vui-badge--error {
background: var(--vui-error);
}
.vui-badge--info {
background: var(--vui-info);
}
.vui-badge--muted {
background: var(--vui-color-border);
color: var(--vui-color-text-muted);
}
/* Outline variant */
.vui-badge--outline {
background: transparent;
border: 1px solid currentColor;
color: var(--vui-color-primary);
}
/* Dot badge (no text) */
.vui-badge--dot {
width: 8px;
height: 8px;
padding: 0;
border-radius: 50%;
}
/* Positioned badge (for icons) */
.vui-badge--positioned {
position: absolute;
top: -4px;
right: -4px;
min-width: 16px;
height: 16px;
font-size: 10px;
}
[dir="rtl"] .vui-badge--positioned {
right: auto;
left: -4px;
}
}
/* modules/instrument-selector.css */
/* © 2024-2026 Mehdi TMIMI — Vivace Music (vivace-music.org) */
/**
* VIVACE UI - Instrument Selector Module
*
* Instrument selection interface for music player.
* Uses Vivace UI button component as base.
*
* Usage:
*
*
*
*/
@layer modules {
/* ================================
CONTAINER
================================ */
.vui-instrument-selector {
display: flex;
flex-wrap: wrap;
gap: var(--vui-space-2);
align-items: center;
justify-content: center;
padding: var(--vui-space-3);
}
/* Loading state */
.vui-instrument-selector--loading {
opacity: 0.6;
pointer-events: none;
}
/* ================================
INSTRUMENT BUTTON (base overrides)
================================ */
.vui-instrument-btn i,
.vui-instrument-btn svg {
font-size: 1.25rem;
}
/* ================================
ENHANCED BUTTON STYLES
Pill-shaped buttons with icon + name
================================ */
.vui-instrument-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 38px;
min-width: 38px;
padding: 0 12px 0 8px;
background: var(--vui-inst-bg, #f5f5f5);
border: 2px solid var(--vui-inst-border, #ddd);
border-radius: 20px;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
box-sizing: border-box;
font-family: inherit;
white-space: nowrap;
}
/* Icon wrapper (supports both old .instrument-icon and new .vui-instrument-icon) */
.vui-instrument-btn .vui-instrument-icon,
.vui-instrument-btn .instrument-icon {
font-size: 1.25rem;
line-height: 1;
flex-shrink: 0;
}
/* Image-based icon (e.g. cello, contrabass, qanun) */
.vui-instrument-btn .vui-instrument-img {
width: 24px;
height: 24px;
object-fit: contain;
flex-shrink: 0;
}
/* Name label */
.vui-instrument-btn .vui-instrument-name {
font-size: 0.8rem;
font-weight: 500;
color: var(--vui-inst-text, #555);
letter-spacing: 0.01em;
}
/* Apply instrument color from --instrument-color */
.vui-instrument-btn {
--vui-inst-bg: color-mix(in srgb, var(--instrument-color, #888) 8%, #fff);
--vui-inst-border: color-mix(in srgb, var(--instrument-color, #888) 30%, #ccc);
--vui-inst-text: color-mix(in srgb, var(--instrument-color, #888) 60%, #333);
}
/* Hover */
.vui-instrument-btn:hover {
--vui-inst-bg: color-mix(in srgb, var(--instrument-color, #888) 15%, #fff);
--vui-inst-border: color-mix(in srgb, var(--instrument-color, #888) 55%, #aaa);
transform: translateY(-1px);
box-shadow: 0 3px 10px color-mix(in srgb, var(--instrument-color, #888) 25%, transparent);
}
/* Active / selected */
.vui-instrument-btn.active {
--vui-inst-bg: color-mix(in srgb, var(--instrument-color, #d4a017) 20%, #fff);
--vui-inst-border: var(--instrument-color, #d4a017);
--vui-inst-text: color-mix(in srgb, var(--instrument-color, #d4a017) 80%, #000);
border-width: 2.5px;
box-shadow:
0 0 0 2px color-mix(in srgb, var(--instrument-color, #d4a017) 20%, transparent),
0 2px 8px color-mix(in srgb, var(--instrument-color, #d4a017) 30%, transparent);
font-weight: 600;
}
/* Icon-only fallback (no name) — e.g. buttons not yet updated */
.vui-instrument-btn:not(:has(.vui-instrument-name)) {
padding: 0;
width: 38px;
justify-content: center;
}
/* Legacy .has-image with background-image: override to show the bg */
.vui-instrument-btn.has-image {
background-repeat: no-repeat;
background-position: center;
background-size: 28px;
}
/* Dark mode */
[data-vui-mode="dark"] .vui-instrument-btn {
--vui-inst-bg: color-mix(in srgb, var(--instrument-color, #888) 12%, #2a2a2a);
--vui-inst-border: color-mix(in srgb, var(--instrument-color, #888) 35%, #555);
--vui-inst-text: color-mix(in srgb, var(--instrument-color, #888) 40%, #ccc);
}
[data-vui-mode="dark"] .vui-instrument-btn:hover {
--vui-inst-bg: color-mix(in srgb, var(--instrument-color, #888) 20%, #2a2a2a);
--vui-inst-border: color-mix(in srgb, var(--instrument-color, #888) 55%, #777);
}
[data-vui-mode="dark"] .vui-instrument-btn.active {
--vui-inst-bg: color-mix(in srgb, var(--instrument-color, #d4a017) 25%, #2a2a2a);
--vui-inst-border: var(--instrument-color, #d4a017);
--vui-inst-text: color-mix(in srgb, var(--instrument-color, #d4a017) 50%, #fff);
}
/* ================================
INSTRUMENTS CLOSE BUTTON
Close button for instruments panel (studio mode)
================================ */
.vui-instruments-close {
display: none; /* Hidden by default, shown in studio mode */
position: absolute;
top: var(--vui-space-2);
right: var(--vui-space-2);
width: 32px;
height: 32px;
padding: 0;
border: none;
border-radius: 50%;
background: var(--vui-color-surface-elevated);
color: var(--vui-color-text-muted);
font-size: 1rem;
cursor: pointer;
transition: all var(--vui-transition-fast);
z-index: 10;
}
.vui-instruments-close:hover {
background: var(--vui-color-surface-sunken);
color: var(--vui-color-text);
transform: scale(1.1);
}
.vui-instruments-close:active {
transform: scale(0.95);
}
/* Show close button only in studio mode */
.vui-studio-mode .vui-instruments-close {
display: flex;
align-items: center;
justify-content: center;
}
/* RTL support */
[dir="rtl"] .vui-instruments-close {
right: auto;
left: var(--vui-space-2);
}
/* ================================
RESPONSIVE — compact mobile layout
================================ */
@media (max-width: 767px) {
.vui-instrument-selector {
gap: 5px;
padding: var(--vui-space-2);
}
.vui-instrument-btn {
height: 30px;
min-width: 30px;
padding: 0 8px 0 5px;
gap: 4px;
border-radius: 16px;
border-width: 1.5px;
}
.vui-instrument-btn .vui-instrument-icon,
.vui-instrument-btn .instrument-icon {
font-size: 0.95rem;
}
.vui-instrument-btn .vui-instrument-img {
width: 18px;
height: 18px;
}
.vui-instrument-btn .vui-instrument-name {
font-size: 0.65rem;
}
.vui-instrument-btn.active {
border-width: 2px;
box-shadow:
0 0 0 1.5px color-mix(in srgb, var(--instrument-color, #d4a017) 20%, transparent);
}
/* Icon-only fallback on mobile */
.vui-instrument-btn:not(:has(.vui-instrument-name)) {
width: 30px;
}
}
/* Tiny screens — hide names, icon-only */
@media (max-width: 374px) {
.vui-instrument-btn .vui-instrument-name {
display: none;
}
.vui-instrument-btn {
padding: 0;
width: 30px;
justify-content: center;
}
}
}
/* modules/notation-controls.css */
/* © 2024-2026 Mehdi TMIMI — Vivace Music (vivace-music.org) */
/**
* VIVACE UI - Notation Controls Module
*
* Control bar for sheet music notation (zoom, playback, actions).
* Used in Andalousie player and Orchestra module.
*
* Usage:
*
*/
@layer modules {
/* ================================
CONTAINER
================================ */
.vui-notation-controls {
display: flex;
align-items: center;
gap: var(--vui-space-4);
padding: var(--vui-space-3) var(--vui-space-4);
background: var(--vui-color-surface-elevated);
border-radius: var(--vui-radius-lg);
border: 1px solid var(--vui-color-border);
}
/* ================================
CONTROL GROUPS
================================ */
.vui-notation-controls__zoom,
.vui-notation-controls__playback,
.vui-notation-controls__actions {
display: flex;
align-items: center;
gap: var(--vui-space-2);
}
/* Divider between groups */
.vui-notation-controls__zoom::after,
.vui-notation-controls__playback::after {
content: '';
width: 1px;
height: 24px;
background: var(--vui-color-border);
margin: 0 var(--vui-space-2);
}
/* ================================
ZOOM CONTROLS
================================ */
.vui-zoom-slider-wrapper {
display: flex;
align-items: center;
gap: var(--vui-space-2);
min-width: 120px;
}
.vui-zoom-slider {
flex: 1;
}
.vui-zoom-value {
font-size: var(--vui-text-xs);
color: var(--vui-color-text-muted);
min-width: 45px;
text-align: center;
}
/* ================================
PLAYBACK CONTROLS
================================ */
.vui-playback-group {
display: flex;
gap: var(--vui-space-1);
}
.vui-tempo-display {
display: flex;
align-items: center;
gap: var(--vui-space-2);
padding: var(--vui-space-2) var(--vui-space-3);
background: var(--vui-color-surface);
border-radius: var(--vui-radius-md);
border: 1px solid var(--vui-color-border-muted);
}
.vui-tempo-display i {
color: var(--vui-color-text-muted);
font-size: var(--vui-text-sm);
}
.vui-tempo-value {
font-size: var(--vui-text-sm);
font-weight: var(--vui-font-medium);
color: var(--vui-color-text);
font-variant-numeric: tabular-nums;
}
/* ================================
PROGRESS BAR
================================ */
.vui-progress-wrapper {
display: flex;
align-items: center;
gap: var(--vui-space-2);
flex: 1;
min-width: 200px;
}
.vui-progress-time {
font-size: var(--vui-text-xs);
color: var(--vui-color-text-muted);
font-variant-numeric: tabular-nums;
min-width: 80px;
text-align: center;
}
.vui-progress-bar {
flex: 1;
height: 4px;
background: var(--vui-color-surface-sunken);
border-radius: var(--vui-radius-full);
overflow: hidden;
cursor: pointer;
position: relative;
}
.vui-progress-bar__fill {
height: 100%;
background: linear-gradient(90deg, var(--vui-color-primary), var(--vui-color-primary-hover));
border-radius: var(--vui-radius-full);
transition: width 0.1s linear;
}
/* Progress bar hover */
.vui-progress-bar:hover {
height: 6px;
}
/* ================================
RESPONSIVE - Mobile
================================ */
@media (max-width: 1023px) {
.vui-notation-controls {
flex-wrap: wrap;
gap: var(--vui-space-3);
}
.vui-notation-controls__zoom::after,
.vui-notation-controls__playback::after {
display: none;
}
.vui-progress-wrapper {
order: -1;
width: 100%;
flex-basis: 100%;
}
}
@media (max-width: 767px) {
.vui-notation-controls {
padding: var(--vui-space-2);
gap: var(--vui-space-2);
}
.vui-notation-controls__zoom,
.vui-notation-controls__playback,
.vui-notation-controls__actions {
flex-wrap: wrap;
justify-content: center;
}
.vui-zoom-slider-wrapper {
min-width: 100px;
}
.vui-tempo-display {
padding: var(--vui-space-1-5) var(--vui-space-2);
}
.vui-progress-time {
font-size: var(--vui-text-xs);
min-width: 60px;
}
}
/* ================================
COLLAPSIBLE STATE (for toggle)
================================ */
.vui-notation-controls--collapsed {
max-height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transition: max-height var(--vui-transition-base),
opacity var(--vui-transition-base),
padding var(--vui-transition-base);
}
.vui-notation-controls--expanded {
max-height: 200px;
opacity: 1;
}
}
/* modules/player-overlays.css */
/* © 2024-2026 Mehdi TMIMI — Vivace Music (vivace-music.org) */
/**
* VIVACE UI - Player Overlays Module
*
* Loading overlays and visual feedback for player operations.
* Includes: instrument loading, zoom loading, cursor styling.
*
* @author Vivace Music
* @version 1.0.0
*/
@layer modules {
/* ================================
NOTATION CONTAINER
Fixed height with inner scrolling for auto-scroll to work
================================ */
.vui-notation-container {
width: 100%;
height: min(70vh, 720px);
min-height: 360px;
background: var(--vui-color-surface-sunken);
border-radius: var(--vui-radius-lg);
overflow-y: auto;
overflow-x: hidden;
position: relative;
/* Force LTR scroll layout regardless of page .
Andalusian pages set dir=rtl for Arabic UI text, which would put the
scrollbar gutter on the left side of the score (sheet music itself is
always LTR). Override here so the scrollbar stays on the right. */
direction: ltr;
}
/* CRITICAL: Let OSMD control SVG size for proper cursor positioning
Do NOT set width:100% as it breaks cursor alignment */
.vui-notation-container svg {
width: auto !important;
max-width: none !important;
}
/* Dim notation during loading operations */
.vui-notation-container--loading {
opacity: 0.3;
pointer-events: none;
transition: opacity 0.2s ease;
}
/* ================================
OSMD CURSOR
Rich amber cursor with glow effect
================================ */
.vui-notation-container img[id^="cursorImg"] {
opacity: 0.65;
pointer-events: none;
z-index: 10;
filter:
drop-shadow(0 0 6px var(--vui-cursor-glow, rgba(230, 126, 34, 0.6)))
drop-shadow(0 0 2px var(--vui-cursor-glow-accent, rgba(241, 196, 15, 0.4)));
transition: opacity 0.15s ease, filter 0.15s ease;
}
/* Cursor animation during playback */
.vui-playing .vui-notation-container img[id^="cursorImg"] {
animation: vui-cursor-glow 0.6s ease-in-out infinite;
}
@keyframes vui-cursor-glow {
0%, 100% {
opacity: 0.5;
}
50% {
opacity: 0.75;
}
}
/* ================================
INSTRUMENT LOADING OVERLAY
Full-screen modal for instrument changes
Supports light/dark themes
================================ */
.vui-instrument-loading {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.8);
background: var(--vui-color-surface-elevated, rgba(30, 25, 20, 0.92));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 2147483647; /* Maximum z-index to ensure visibility in fullscreen/studio mode */
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease, transform 0.3s ease;
backdrop-filter: blur(15px);
padding: var(--vui-space-10, 40px) var(--vui-space-15, 60px);
border-radius: var(--vui-radius-2xl, 24px);
border: 1px solid var(--vui-color-primary-muted, rgba(139, 92, 246, 0.3));
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.4),
0 0 40px var(--vui-color-primary-muted, rgba(139, 92, 246, 0.15));
}
/* Light theme adjustments */
[data-vui-mode="light"] .vui-instrument-loading {
background: rgba(255, 252, 248, 0.95);
border-color: var(--vui-color-primary, #8b5cf6);
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.15),
0 0 40px var(--vui-color-primary-muted, rgba(139, 92, 246, 0.15));
}
.vui-instrument-loading.show {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.vui-instrument-loading__icon {
font-size: 5rem;
color: var(--vui-color-primary, #8b5cf6);
margin-bottom: var(--vui-space-5, 20px);
animation: vui-icon-bounce 0.4s ease;
filter: drop-shadow(0 0 25px var(--vui-color-primary-muted, rgba(139, 92, 246, 0.4)));
}
.vui-instrument-loading__icon img {
width: 100px;
height: 100px;
object-fit: contain;
}
.vui-instrument-loading__name {
font-size: 1.8rem;
font-weight: 600;
color: var(--vui-color-primary, #8b5cf6);
margin-bottom: var(--vui-space-6, 25px);
text-shadow: 0 0 15px var(--vui-color-primary-muted, rgba(139, 92, 246, 0.3));
}
/* Light theme: stronger primary for better contrast */
[data-vui-mode="light"] .vui-instrument-loading__name {
color: var(--vui-color-primary-active, #6d28d9);
text-shadow: none;
}
.vui-instrument-loading__spinner {
display: flex;
align-items: center;
gap: var(--vui-space-3, 12px);
color: rgba(255, 255, 255, 0.7);
font-size: 1rem;
padding: var(--vui-space-3, 12px) var(--vui-space-6, 24px);
background: rgba(255, 255, 255, 0.08);
border-radius: 25px;
}
/* Light theme: adjust spinner colors */
[data-vui-mode="light"] .vui-instrument-loading__spinner {
color: rgba(60, 50, 40, 0.8);
background: rgba(0, 0, 0, 0.06);
}
.vui-instrument-loading__spinner i {
font-size: 1.2rem;
color: var(--vui-color-primary, #8b5cf6);
animation: vui-spin 1s linear infinite;
}
/* Light theme: stronger primary for spinner icon */
[data-vui-mode="light"] .vui-instrument-loading__spinner i {
color: var(--vui-color-primary-active, #6d28d9);
}
/* ================================
ZOOM LOADING OVERLAY
Lightweight pill for zoom feedback
================================ */
.vui-zoom-loading {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.8);
z-index: 2147483647; /* Maximum z-index to ensure visibility in fullscreen */
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease, transform 0.15s ease;
}
.vui-zoom-loading.active {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.vui-zoom-loading__content {
display: flex;
align-items: center;
gap: var(--vui-space-3, 12px);
background: var(--vui-color-surface-elevated, rgba(30, 25, 20, 0.92));
backdrop-filter: blur(10px);
padding: var(--vui-space-4, 16px) var(--vui-space-7, 28px);
border-radius: 50px;
border: 1px solid var(--vui-color-primary-muted, rgba(139, 92, 246, 0.3));
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.vui-zoom-loading__icon {
font-size: 1.4rem;
color: var(--vui-color-primary, #8b5cf6);
animation: vui-zoom-pulse 0.6s ease-in-out infinite;
}
.vui-zoom-loading__text {
font-size: 1.2rem;
font-weight: 600;
color: var(--vui-color-primary, #8b5cf6);
min-width: 50px;
text-align: center;
}
/* Light theme adjustments for zoom loading */
[data-vui-mode="light"] .vui-zoom-loading__content {
background: rgba(255, 252, 248, 0.95);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
[data-vui-mode="light"] .vui-zoom-loading__icon,
[data-vui-mode="light"] .vui-zoom-loading__text {
color: var(--vui-color-primary-active, #6d28d9);
}
/* ================================
LOADING OVERLAY (Full page loader)
Vivace-style animated loading screen
================================ */
.vui-loading-overlay {
position: fixed;
inset: 0;
background: linear-gradient(135deg,
rgba(14, 15, 23, 0.98) 0%,
rgba(20, 15, 30, 0.98) 50%,
rgba(14, 15, 23, 0.98) 100%);
backdrop-filter: blur(20px);
display: flex;
align-items: center;
justify-content: center;
z-index: var(--vui-z-modal, 10000);
opacity: 1;
transition: opacity 0.6s ease, transform 0.6s ease;
overflow: hidden;
}
.vui-loading-overlay.hidden {
opacity: 0;
pointer-events: none;
transform: scale(1.05);
}
.vui-loading-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
z-index: 2;
padding: 2rem;
}
/* Floating Music Notes Background */
.vui-loading-bg-notes {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.vui-floating-note {
position: absolute;
font-size: 2rem;
color: rgba(244, 208, 63, 0.15);
animation: vui-float-note 8s ease-in-out infinite;
}
.vui-floating-note:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; font-size: 2.5rem; }
.vui-floating-note:nth-child(2) { left: 85%; top: 15%; animation-delay: 1s; font-size: 1.8rem; }
.vui-floating-note:nth-child(3) { left: 20%; top: 70%; animation-delay: 2s; font-size: 3rem; }
.vui-floating-note:nth-child(4) { left: 75%; top: 75%; animation-delay: 0.5s; font-size: 2rem; }
@keyframes vui-float-note {
0%, 100% {
transform: translateY(0) rotate(0deg) scale(1);
opacity: 0.15;
}
25% {
transform: translateY(-20px) rotate(5deg) scale(1.1);
opacity: 0.25;
}
50% {
transform: translateY(-10px) rotate(-5deg) scale(1);
opacity: 0.2;
}
75% {
transform: translateY(-25px) rotate(3deg) scale(1.05);
opacity: 0.15;
}
}
/* Logo Section */
.vui-loading-logo {
position: relative;
width: 120px;
height: 120px;
margin-bottom: 1.5rem;
animation: vui-logo-pulse 2s ease-in-out infinite;
}
.vui-loading-logo .logo-img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 50%;
position: relative;
z-index: 2;
filter: drop-shadow(0 0 30px rgba(244, 208, 63, 0.5));
}
.vui-loading-logo .logo-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 150%;
height: 150%;
background: radial-gradient(circle,
rgba(244, 208, 63, 0.4) 0%,
rgba(244, 208, 63, 0.1) 40%,
transparent 70%);
border-radius: 50%;
animation: vui-glow-pulse 2s ease-in-out infinite;
z-index: 1;
}
@keyframes vui-logo-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes vui-glow-pulse {
0%, 100% {
opacity: 0.6;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 1;
transform: translate(-50%, -50%) scale(1.2);
}
}
/* Title */
.vui-loading-title {
font-size: 2rem;
font-weight: 700;
margin: 0 0 0.5rem 0;
display: flex;
gap: 0.5rem;
direction: ltr;
}
.vui-loading-title .title-text {
color: #ffffff;
}
.vui-loading-title .title-highlight {
background: linear-gradient(135deg, #f4d03f, #daa520);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.vui-loading-subtitle {
color: rgba(255, 255, 255, 0.85);
font-size: 1rem;
font-weight: 400;
margin: 0 0 2rem 0;
letter-spacing: 0.5px;
}
/* Progress Ring */
.vui-loading-progress {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.vui-progress-ring {
position: relative;
width: 80px;
height: 80px;
}
.vui-progress-ring-svg {
transform: rotate(-90deg);
width: 100%;
height: 100%;
animation: vui-ring-pulse 2s ease-in-out infinite;
}
.vui-progress-ring-bg {
fill: none;
stroke: rgba(255, 255, 255, 0.1);
stroke-width: 6;
}
.vui-progress-ring-fill {
fill: none;
stroke: url(#vuiProgressGradient);
stroke-width: 6;
stroke-linecap: round;
stroke-dasharray: 75 25;
stroke-dashoffset: 0;
filter: drop-shadow(0 0 8px rgba(244, 208, 63, 0.6));
animation: vui-ring-spin 1.5s linear infinite;
transform-origin: center;
}
@keyframes vui-ring-spin {
0% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: -100; }
}
@keyframes vui-ring-pulse {
0%, 100% { filter: drop-shadow(0 0 4px rgba(244, 208, 63, 0.3)); }
50% { filter: drop-shadow(0 0 12px rgba(244, 208, 63, 0.6)); }
}
.vui-progress-percent {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.2rem;
font-weight: 700;
color: #f4d03f;
text-shadow: 0 0 20px rgba(244, 208, 63, 0.5);
}
.vui-loading-status {
color: rgba(255, 255, 255, 0.9);
font-size: 0.95rem;
font-weight: 500;
margin: 0;
min-height: 1.5em;
animation: vui-status-pulse 1.5s ease-in-out infinite;
}
@keyframes vui-status-pulse {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
/* Audio Bars Animation */
.vui-loading-bars {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 4px;
height: 35px;
margin-bottom: 1.5rem;
}
.vui-loading-bars .bar {
width: 5px;
background: linear-gradient(to top, #f4d03f, #daa520);
border-radius: 3px;
animation: vui-bar-bounce 1s ease-in-out infinite;
}
.vui-loading-bars .bar:nth-child(1) { height: 15px; animation-delay: 0s; }
.vui-loading-bars .bar:nth-child(2) { height: 28px; animation-delay: 0.1s; }
.vui-loading-bars .bar:nth-child(3) { height: 20px; animation-delay: 0.2s; }
.vui-loading-bars .bar:nth-child(4) { height: 32px; animation-delay: 0.3s; }
.vui-loading-bars .bar:nth-child(5) { height: 18px; animation-delay: 0.4s; }
@keyframes vui-bar-bounce {
0%, 100% { transform: scaleY(0.5); opacity: 0.5; }
50% { transform: scaleY(1); opacity: 1; }
}
/* Powered by */
.vui-loading-powered {
color: rgba(255, 255, 255, 0.4);
font-size: 0.75rem;
}
.vui-loading-powered a {
color: rgba(244, 208, 63, 0.7);
text-decoration: none;
transition: color 0.2s;
}
.vui-loading-powered a:hover {
color: #f4d03f;
}
/* ================================
SHARED ANIMATIONS
================================ */
@keyframes vui-icon-bounce {
0% { transform: scale(0.5); opacity: 0; }
70% { transform: scale(1.1); }
100% { transform: scale(1); opacity: 1; }
}
@keyframes vui-spin {
to { transform: rotate(360deg); }
}
@keyframes vui-pulse {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
@keyframes vui-zoom-pulse {
0%, 100% { transform: scale(1); opacity: 0.7; }
50% { transform: scale(1.15); opacity: 1; }
}
/* ================================
LOOP SELECTION OVERLAY
On-sheet loop selection for practice mode
================================ */
/* Loop Tooltip - Floating button above cursor */
.vui-loop-tooltip {
position: absolute;
z-index: 100;
padding: 8px 16px;
background: var(--vui-loop-btn-bg, linear-gradient(135deg, #ffc107 0%, #ff9800 100%));
color: var(--vui-loop-btn-color, #1a1a2e);
border: none;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 12px var(--vui-loop-btn-shadow, rgba(255, 193, 7, 0.4));
transition: all 0.2s ease;
white-space: nowrap;
pointer-events: auto;
}
.vui-loop-tooltip:hover {
transform: scale(1.05);
box-shadow: 0 6px 16px var(--vui-loop-btn-shadow-hover, rgba(255, 193, 7, 0.5));
}
.vui-loop-tooltip.hidden {
display: none;
}
/* Loop Overlay Container */
.vui-loop-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 50;
}
.vui-loop-overlay.hidden {
display: none;
}
/* Loop Highlight Rectangles */
.vui-loop-highlight {
position: absolute;
background: linear-gradient(180deg,
var(--vui-loop-highlight-fill, rgba(255, 193, 7, 0.25)) 0%,
var(--vui-loop-highlight-fill-light, rgba(255, 193, 7, 0.15)) 50%,
var(--vui-loop-highlight-fill, rgba(255, 193, 7, 0.25)) 100%);
border-top: 3px solid var(--vui-loop-bracket-stroke, rgba(255, 193, 7, 0.8));
border-bottom: 3px solid var(--vui-loop-bracket-stroke, rgba(255, 193, 7, 0.8));
pointer-events: none;
}
/* Loop Drag Handles */
.vui-loop-drag-handle {
position: absolute;
width: 16px;
background: var(--vui-loop-handle-bg, linear-gradient(180deg, #ffc107 0%, #ff9800 100%));
border-radius: 4px;
cursor: ew-resize;
pointer-events: auto;
z-index: 60;
opacity: 0.9;
transition: opacity 0.2s, transform 0.2s;
}
.vui-loop-drag-handle:hover {
opacity: 1;
transform: scaleX(1.2);
}
.vui-loop-drag-handle.hidden {
display: none;
}
/* Loop Clear Button */
.vui-loop-clear-btn {
position: absolute;
width: 28px;
height: 28px;
background: #e53935;
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
font-size: 14px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto;
z-index: 70;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
transition: all 0.2s;
}
.vui-loop-clear-btn:hover {
background: #c62828;
transform: scale(1.1);
}
.vui-loop-clear-btn.hidden {
display: none;
}
/* Dragging state */
.vui-notation-container.vui-loop-dragging {
cursor: ew-resize;
user-select: none;
}
/* Loop selection active - crosshair cursor when practice mode is ON */
.vui-notation-container.vui-loop-selection-active {
cursor: crosshair;
}
/* ================================
LOOP ACTION BUTTON (New SVG-based system)
Floating button that appears on click
================================ */
.vui-loop-action-btn {
position: absolute;
z-index: 200;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: var(--vui-loop-btn-bg, linear-gradient(135deg, #ffc107 0%, #ff9800 100%));
color: var(--vui-loop-btn-color, #1a1a2e);
border: none;
border-radius: 25px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
box-shadow:
0 4px 15px var(--vui-loop-btn-shadow, rgba(255, 193, 7, 0.4)),
0 2px 6px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease;
white-space: nowrap;
pointer-events: auto;
animation: vui-loop-btn-appear 0.2s ease-out;
}
@keyframes vui-loop-btn-appear {
from {
opacity: 0;
transform: scale(0.8) translateY(10px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.vui-loop-action-btn:hover {
transform: scale(1.05);
box-shadow:
0 6px 20px var(--vui-loop-btn-shadow-hover, rgba(255, 193, 7, 0.5)),
0 4px 10px rgba(0, 0, 0, 0.25);
}
.vui-loop-action-btn:active {
transform: scale(0.98);
}
.vui-loop-action-btn.hidden {
display: none;
}
.vui-loop-action-icon {
font-size: 16px;
}
.vui-loop-action-label {
font-family: inherit;
}
/* Dark theme adjustments - variables handle theme colors,
just ensure text is readable on dark bg */
[data-vui-mode="dark"] .vui-loop-action-btn {
background: var(--vui-loop-btn-bg, linear-gradient(135deg, #ffb300 0%, #f57c00 100%));
color: var(--vui-loop-btn-color, #fff);
box-shadow:
0 4px 15px var(--vui-loop-btn-shadow, rgba(255, 179, 0, 0.5)),
0 2px 6px rgba(0, 0, 0, 0.4);
}
}
/* modules/sidebar.css */
/* © 2024-2026 Mehdi TMIMI — Vivace Music (vivace-music.org) */
/**
* VIVACE UI - Sidebar Module
*
* Collapsible sidebar with tabs for different panels.
* Used for practice mode, mixer, settings, etc.
*
* @author Vivace Music
* @version 1.0.0
*/
@layer modules {
/* ================================
TOGGLE SWITCH (iOS-style)
================================ */
.vui-switch {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
}
.vui-switch input {
opacity: 0;
width: 0;
height: 0;
}
.vui-switch__slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--vui-color-surface-sunken);
border: 1px solid var(--vui-color-border);
transition: all var(--vui-transition-fast);
border-radius: 24px;
}
.vui-switch__slider::before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 2px;
bottom: 2px;
background-color: white;
transition: all var(--vui-transition-fast);
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.vui-switch input:checked + .vui-switch__slider {
background-color: var(--vui-color-primary);
border-color: var(--vui-color-primary);
}
.vui-switch input:checked + .vui-switch__slider::before {
transform: translateX(20px);
}
.vui-switch input:focus + .vui-switch__slider {
box-shadow: 0 0 0 2px rgba(var(--vui-color-primary-rgb, 181, 156, 88), 0.3);
}
/* ================================
SIDEBAR HEADER
================================ */
.vui-sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--vui-space-2) var(--vui-space-3);
border-bottom: 1px solid var(--vui-color-border);
background: var(--vui-color-surface-elevated);
gap: var(--vui-space-3);
}
.vui-sidebar-tabs {
display: flex;
gap: var(--vui-space-1);
flex: 1;
min-width: 0;
overflow: hidden;
}
.vui-sidebar-tab {
padding: var(--vui-space-2);
background: transparent;
border: none;
border-radius: var(--vui-radius-md);
color: var(--vui-color-text-secondary);
cursor: pointer;
transition: all var(--vui-transition-fast);
display: flex;
align-items: center;
gap: var(--vui-space-1);
font-size: var(--vui-text-sm);
white-space: nowrap;
flex-shrink: 1;
min-width: 0;
}
.vui-sidebar-tab:hover {
background: var(--vui-color-surface);
color: var(--vui-color-text);
}
.vui-sidebar-tab.active {
background: var(--vui-color-primary);
color: var(--vui-color-text-on-primary);
}
.vui-sidebar-close {
background: var(--vui-color-surface);
border: 1px solid var(--vui-color-border);
color: var(--vui-color-text-muted);
cursor: pointer;
padding: var(--vui-space-2);
border-radius: var(--vui-radius-md);
transition: all var(--vui-transition-fast);
flex-shrink: 0;
min-width: 32px;
min-height: 32px;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--vui-text-lg);
}
.vui-sidebar-close i {
display: block;
font-size: 1rem;
}
.vui-sidebar-close:hover {
background: var(--vui-color-surface);
color: var(--vui-color-text);
}
/* ================================
SIDEBAR CONTENT
================================ */
.vui-sidebar-content {
overflow-y: auto;
max-height: calc(100vh - 180px);
scrollbar-width: thin;
scrollbar-color: var(--vui-color-primary) transparent;
}
.vui-sidebar-content::-webkit-scrollbar {
width: 8px;
}
.vui-sidebar-content::-webkit-scrollbar-track {
background: transparent;
border-radius: 4px;
}
.vui-sidebar-content::-webkit-scrollbar-thumb {
background: var(--vui-color-primary);
border-radius: 4px;
}
.vui-sidebar-content::-webkit-scrollbar-thumb:hover {
background: var(--vui-color-primary-hover);
}
/* ================================
SIDEBAR PANELS
================================ */
.vui-sidebar-panel {
display: none;
}
.vui-sidebar-panel.active {
display: block;
}
.vui-sidebar-panel__content {
padding: var(--vui-space-4);
}
/* ================================
SIDEBAR SECTIONS
================================ */
.vui-sidebar-section {
margin-bottom: var(--vui-space-4);
padding: var(--vui-space-3);
background: var(--vui-color-surface);
border-radius: var(--vui-radius-md);
border: 1px solid var(--vui-color-border);
}
.vui-sidebar-section__header {
display: flex;
align-items: center;
gap: var(--vui-space-2);
margin-bottom: var(--vui-space-3);
font-weight: 600;
color: var(--vui-color-text);
font-size: var(--vui-text-sm);
}
.vui-sidebar-section__header i {
color: var(--vui-color-primary);
}
/* ================================
MODE BUTTONS
================================ */
.vui-mode-buttons {
display: flex;
gap: var(--vui-space-2);
flex-wrap: wrap;
}
.vui-mode-btn {
flex: 1;
min-width: 80px;
padding: var(--vui-space-2) var(--vui-space-3);
background: var(--vui-color-surface-elevated);
border: 1px solid var(--vui-color-border);
border-radius: var(--vui-radius-md);
color: var(--vui-color-text-secondary);
cursor: pointer;
transition: all var(--vui-transition-fast);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--vui-space-1);
font-size: var(--vui-text-xs);
}
.vui-mode-btn:hover {
border-color: var(--vui-color-primary);
color: var(--vui-color-text);
}
.vui-mode-btn.active {
background: var(--vui-color-primary);
border-color: var(--vui-color-primary);
color: var(--vui-color-text-on-primary);
}
.vui-mode-btn i {
font-size: var(--vui-text-lg);
}
/* ================================
LOOP CONTROLS
================================ */
.vui-loop-display {
padding: var(--vui-space-2);
background: var(--vui-color-surface-sunken);
border-radius: var(--vui-radius-sm);
font-size: var(--vui-text-sm);
color: var(--vui-color-text-muted);
text-align: center;
margin-bottom: var(--vui-space-2);
}
.vui-loop-controls {
display: flex;
gap: var(--vui-space-2);
}
.vui-loop-btn {
flex: 1;
padding: var(--vui-space-2);
background: var(--vui-color-surface-elevated);
border: 1px solid var(--vui-color-border);
border-radius: var(--vui-radius-md);
color: var(--vui-color-text-secondary);
cursor: pointer;
transition: all var(--vui-transition-fast);
display: flex;
align-items: center;
justify-content: center;
gap: var(--vui-space-1);
font-size: var(--vui-text-xs);
}
.vui-loop-btn:hover {
border-color: var(--vui-color-primary);
color: var(--vui-color-text);
}
.vui-loop-btn.loop-a {
border-color: var(--vui-color-success);
}
.vui-loop-btn.loop-b {
border-color: var(--vui-color-info);
}
.vui-loop-btn.loop-a.active {
border-color: var(--vui-color-success);
background: rgba(16, 185, 129, 0.1);
color: var(--vui-color-success);
}
.vui-loop-btn.loop-b.active {
border-color: var(--vui-color-warning);
background: rgba(245, 158, 11, 0.1);
color: var(--vui-color-warning);
}
/* ================================
SIDEBAR STRUCTURE (Player Layout)
================================ */
.vui-player__sidebar {
width: 320px;
min-width: 320px;
background: var(--vui-color-surface);
border-left: 1px solid var(--vui-color-border);
display: flex;
flex-direction: column;
transition: transform var(--vui-transition-normal), opacity var(--vui-transition-normal);
}
.vui-player__sidebar--hidden {
transform: translateX(100%);
opacity: 0;
pointer-events: none;
position: absolute;
right: 0;
height: 100%;
}
.vui-sidebar-panels {
flex: 1;
overflow-y: auto;
position: relative;
}
.vui-sidebar-section__title {
font-size: var(--vui-text-sm);
font-weight: var(--vui-font-semibold);
color: var(--vui-color-text);
margin: 0 0 var(--vui-space-3);
display: flex;
align-items: center;
gap: var(--vui-space-2);
}
.vui-sidebar-section__title i {
color: var(--vui-color-primary);
}
/* ================================
TOAST NOTIFICATIONS
================================ */
.vui-toast-container {
position: fixed;
bottom: var(--vui-space-6);
left: 50%;
transform: translateX(-50%);
z-index: calc(var(--vui-z-modal) + 100);
display: flex;
flex-direction: column;
gap: var(--vui-space-2);
pointer-events: none;
}
.vui-toast {
padding: var(--vui-space-3) var(--vui-space-6);
background: var(--vui-color-surface-elevated);
border: 1px solid var(--vui-color-border);
border-radius: var(--vui-radius-lg);
box-shadow: var(--vui-shadow-xl);
font-size: var(--vui-text-sm);
color: var(--vui-color-text);
animation: vuiToastIn 0.3s ease;
pointer-events: auto;
}
.vui-toast.vui-toast--success {
border-color: var(--vui-color-success);
background: rgba(16, 185, 129, 0.1);
}
.vui-toast.vui-toast--error {
border-color: var(--vui-color-error);
background: rgba(239, 68, 68, 0.1);
}
.vui-toast.vui-toast--out {
animation: vuiToastOut 0.3s ease forwards;
}
@keyframes vuiToastIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes vuiToastOut {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-20px);
}
}
/* ================================
SETTING ROWS (for Settings panel)
================================ */
.vui-setting-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--vui-space-2) 0;
gap: var(--vui-space-3);
}
.vui-setting-row + .vui-setting-row {
border-top: 1px solid var(--vui-color-border-muted);
}
.vui-setting-row__label {
display: flex;
align-items: center;
gap: var(--vui-space-2);
font-size: var(--vui-text-sm);
color: var(--vui-color-text);
}
.vui-setting-row__label i {
color: var(--vui-color-text-muted);
width: 16px;
text-align: center;
}
.vui-setting-row__control {
flex-shrink: 0;
}
/* ================================
SELECT DROPDOWN
================================ */
.vui-select {
padding: var(--vui-space-2) var(--vui-space-3);
font-size: var(--vui-text-sm);
border: 1px solid var(--vui-color-border);
border-radius: var(--vui-radius-md);
background: var(--vui-color-surface-elevated);
color: var(--vui-color-text);
cursor: pointer;
min-width: 100px;
}
.vui-select:focus {
outline: none;
border-color: var(--vui-color-primary);
box-shadow: 0 0 0 2px rgba(var(--vui-color-primary-rgb, 181, 156, 88), 0.2);
}
/* ================================
TOGGLE GROUP (Dark/Light buttons)
================================ */
.vui-toggle-group {
display: flex;
border: 1px solid var(--vui-color-border);
border-radius: var(--vui-radius-md);
overflow: hidden;
}
.vui-toggle-option {
padding: var(--vui-space-2);
background: var(--vui-color-surface-elevated);
border: none;
color: var(--vui-color-text-muted);
cursor: pointer;
transition: all var(--vui-transition-fast);
display: flex;
align-items: center;
justify-content: center;
min-width: 36px;
}
.vui-toggle-option:not(:last-child) {
border-right: 1px solid var(--vui-color-border);
}
.vui-toggle-option:hover {
background: var(--vui-color-surface-sunken);
color: var(--vui-color-text);
}
.vui-toggle-option.active {
background: var(--vui-color-primary);
color: var(--vui-color-text-on-primary);
}
/* ================================
CHECKBOX
================================ */
.vui-checkbox {
width: 18px;
height: 18px;
accent-color: var(--vui-color-primary);
cursor: pointer;
}
}
/* modules/mixer.css */
/* © 2024-2026 Mehdi TMIMI — Vivace Music (vivace-music.org) */
/**
* VIVACE UI - Mixer Module
*
* Audio mixer tracks with volume, pan, mute/solo controls.
* Designed for multi-instrument audio mixing.
*
* @author Vivace Music
* @version 1.0.0
*/
@layer modules {
/* ================================
MIXER GROUP
================================ */
.vui-mixer-group {
margin-bottom: var(--vui-space-3);
border: 1px solid var(--vui-color-border-muted);
border-radius: var(--vui-radius-md);
overflow: visible;
}
.vui-mixer-group__header {
display: flex;
flex-direction: column;
gap: var(--vui-space-1);
padding: var(--vui-space-2) var(--vui-space-3);
background: var(--vui-color-surface-sunken);
border-bottom: 1px solid var(--vui-color-border-muted);
border-radius: var(--vui-radius-md) var(--vui-radius-md) 0 0;
}
/* Row 1: icon + name + M / S / arrow */
.vui-mixer-group__row-top {
display: flex;
align-items: center;
gap: var(--vui-space-2);
}
.vui-mixer-group__icon {
font-size: var(--vui-text-base);
line-height: 1;
flex-shrink: 0;
}
.vui-mixer-group__name {
flex: 1;
font-size: var(--vui-text-sm);
font-weight: var(--vui-font-semibold);
color: var(--vui-color-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vui-mixer-group__actions {
display: flex;
align-items: center;
gap: var(--vui-space-1);
flex-shrink: 0;
}
/* Row 2: full-width volume slider */
.vui-mixer-group__row-vol {
display: flex;
align-items: center;
gap: var(--vui-space-2);
}
.vui-mixer-group__slider {
flex: 1;
height: 4px;
accent-color: var(--vui-color-accent, #8b5cf6);
}
.vui-mixer-group__vol-value {
font-size: var(--vui-text-xs);
color: var(--vui-color-text-muted);
min-width: 34px;
text-align: end;
flex-shrink: 0;
}
/* Group solo button */
.vui-mixer-btn--group-solo {
font-size: var(--vui-text-xs);
font-weight: var(--vui-font-bold);
}
.vui-mixer-btn--group-solo.solo {
background: var(--vui-color-warning, #f59e0b);
color: #000;
}
.vui-mixer-group.group-solo {
border-color: var(--vui-color-warning, #f59e0b);
}
.vui-mixer-group__toggle {
width: 28px;
height: 28px;
border: none;
border-radius: var(--vui-radius-sm);
background: transparent;
color: var(--vui-color-text-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--vui-transition-fast);
}
.vui-mixer-group__toggle:hover {
background: var(--vui-color-surface);
color: var(--vui-color-text);
}
.vui-mixer-group__body {
padding: var(--vui-space-2);
transition: max-height 0.3s ease, opacity 0.2s ease;
}
.vui-mixer-group.collapsed .vui-mixer-group__body {
display: none;
}
.vui-mixer-group.collapsed .vui-mixer-group__header {
border-bottom: none;
}
.vui-mixer-group.group-muted .vui-mixer-group__body {
opacity: 0.5;
}
/* Drum kit badge (percussion tracks) */
.vui-mixer-track__drum-badge {
font-size: var(--vui-text-xs);
color: var(--vui-color-text-muted);
background: var(--vui-color-surface-sunken);
padding: 2px 8px;
border-radius: var(--vui-radius-full);
letter-spacing: 0.5px;
}
/* ================================
MIXER TRACK
================================ */
.vui-mixer-track {
display: flex;
flex-direction: column;
gap: var(--vui-space-2);
padding: var(--vui-space-3);
background: var(--vui-color-surface-elevated);
border: 1px solid var(--vui-color-border-muted);
border-radius: var(--vui-radius-md);
margin-bottom: var(--vui-space-3);
transition: border-color var(--vui-transition-fast);
}
.vui-mixer-track:hover {
border-color: var(--vui-color-border);
}
.vui-mixer-track.muted {
opacity: 0.5;
}
.vui-mixer-track.solo {
border-color: var(--vui-warning, #f59e0b);
box-shadow: 0 0 0 1px var(--vui-warning, #f59e0b);
}
/* ================================
TRACK HEADER
================================ */
.vui-mixer-track__header {
display: flex;
align-items: center;
gap: var(--vui-space-2);
}
.vui-mixer-track__name {
min-width: 0;
flex: 1;
font-size: var(--vui-text-sm);
font-weight: var(--vui-font-medium);
color: var(--vui-color-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vui-mixer-track__actions {
display: flex;
gap: var(--vui-space-1);
flex-shrink: 0;
}
/* ================================
TRACK CONTROLS
================================ */
.vui-mixer-track__controls {
display: flex;
flex-direction: column;
gap: var(--vui-space-2);
}
.vui-mixer-track__control {
display: flex;
align-items: center;
gap: var(--vui-space-2);
}
.vui-mixer-track__label {
min-width: 32px;
font-size: var(--vui-text-xs);
color: var(--vui-color-text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.vui-mixer-track__slider,
.vui-mixer-track__pan {
flex: 1;
}
.vui-mixer-track__value,
.vui-mixer-track__pan-value {
min-width: 36px;
text-align: right;
font-size: var(--vui-text-xs);
color: var(--vui-color-text-muted);
font-variant-numeric: tabular-nums;
}
.vui-mixer-track__pan-value {
min-width: 32px;
text-align: center;
}
/* ================================
SOUNDBANK SELECTOR
================================ */
.vui-mixer-track__soundbank {
display: flex;
align-items: center;
gap: var(--vui-space-2);
padding-top: var(--vui-space-2);
border-top: 1px solid var(--vui-color-border-muted);
}
.vui-mixer-track__soundbank-label {
font-size: var(--vui-text-xs);
color: var(--vui-color-text-muted);
display: flex;
align-items: center;
gap: var(--vui-space-1);
}
.vui-mixer-track__soundbank-select {
flex: 1;
padding: var(--vui-space-1) var(--vui-space-2);
border: 1px solid var(--vui-color-border);
border-radius: var(--vui-radius-sm);
background: var(--vui-color-surface);
color: var(--vui-color-text);
font-size: var(--vui-text-xs);
cursor: pointer;
}
.vui-mixer-track__soundbank-select:focus {
outline: none;
border-color: var(--vui-color-primary);
}
/* ================================
MIXER BUTTONS
================================ */
.vui-mixer-btn {
width: 28px;
height: 28px;
border: 1px solid var(--vui-neutral-300, #d1d5db);
border-radius: var(--vui-radius-sm);
background: var(--vui-neutral-200, #e5e7eb);
color: var(--vui-neutral-700, #374151);
cursor: pointer;
transition: all var(--vui-transition-fast);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--vui-text-xs);
font-weight: var(--vui-font-semibold);
}
.vui-mixer-btn:hover {
background: var(--vui-neutral-300, #d1d5db);
color: var(--vui-neutral-900, #111827);
}
.vui-mixer-btn.muted {
background: var(--vui-error, #ef4444);
color: white;
border-color: var(--vui-error, #ef4444);
}
.vui-mixer-btn.solo {
background: var(--vui-warning, #f59e0b);
color: white;
border-color: var(--vui-warning, #f59e0b);
}
/* ================================
MASTER CONTROLS
================================ */
.vui-master-controls {
display: flex;
gap: var(--vui-space-2);
margin-top: var(--vui-space-3);
}
.vui-master-btn {
flex: 1;
padding: var(--vui-space-2);
background: var(--vui-color-surface-elevated);
border: 1px solid var(--vui-color-border);
border-radius: var(--vui-radius-md);
color: var(--vui-color-text-secondary);
cursor: pointer;
transition: all var(--vui-transition-fast);
font-size: var(--vui-text-xs);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--vui-space-1);
}
.vui-master-btn:hover {
border-color: var(--vui-color-primary);
color: var(--vui-color-text);
}
/* ================================
SOUNDBANK ROW
================================ */
.vui-soundbank-row {
display: flex;
align-items: center;
gap: var(--vui-space-2);
margin-top: var(--vui-space-3);
}
.vui-soundbank-select {
flex: 1;
padding: var(--vui-space-2);
background: var(--vui-color-surface-elevated);
border: 1px solid var(--vui-color-border);
border-radius: var(--vui-radius-md);
color: var(--vui-color-text);
font-size: var(--vui-text-sm);
cursor: pointer;
}
.vui-soundbank-select:focus {
outline: none;
border-color: var(--vui-color-primary);
}
/* ================================
TRACK COUNT BADGE
================================ */
.vui-mixer-track-count {
font-size: var(--vui-text-xs);
color: var(--vui-color-text-muted);
background: var(--vui-color-surface-sunken);
padding: var(--vui-space-1) var(--vui-space-2);
border-radius: var(--vui-radius-full);
}
/* ================================
MIXER HEADER
================================ */
.vui-mixer-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--vui-space-3);
}
.vui-mixer-title {
display: flex;
align-items: center;
gap: var(--vui-space-2);
}
}
/* modules/player-controls.css */
/* © 2024-2026 Mehdi TMIMI — Vivace Music (vivace-music.org) */
/**
* VIVACE UI - Player Controls Module
*
* Transport controls, seek bar, playback buttons.
* Designed for audio/video-like player interfaces.
*
* @author Vivace Music
* @version 1.0.0
*/
@layer modules {
/* ================================
PLAYER CONTROLS CONTAINER
================================ */
.vui-player-controls {
display: flex;
flex-direction: column;
gap: var(--vui-space-3);
padding: var(--vui-space-4);
background: var(--vui-color-surface);
border-top: 1px solid var(--vui-color-border);
}
/* ================================
SEEK BAR
================================ */
.vui-seek-bar {
position: relative;
width: 100%;
height: 8px;
background: var(--vui-color-surface-sunken);
border-radius: var(--vui-radius-full);
cursor: pointer;
overflow: hidden;
}
.vui-seek-bar__track {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: var(--vui-color-surface-elevated);
border-radius: var(--vui-radius-full);
}
.vui-seek-bar__progress {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: linear-gradient(90deg, var(--vui-color-primary), var(--vui-color-primary-light, var(--vui-color-primary)));
border-radius: var(--vui-radius-full);
transition: width 0.1s linear;
}
/* The handle used to be opacity:0 until hover, so during playback there was
no marker on the seek bar at all - only a coloured fill. */
.vui-seek-bar__handle {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
background: var(--vui-color-primary);
border: 2px solid white;
border-radius: var(--vui-radius-full);
box-shadow: var(--vui-shadow-md);
opacity: 1;
transition: opacity var(--vui-transition-fast);
}
.vui-seek-bar:hover .vui-seek-bar__handle {
opacity: 1;
}
/* ================================
TIME DISPLAY
================================ */
.vui-time-display {
display: flex;
justify-content: space-between;
font-size: var(--vui-text-xs);
color: var(--vui-color-text-muted);
font-variant-numeric: tabular-nums;
margin-top: var(--vui-space-1);
}
.vui-time-display__current,
.vui-time-display__duration {
min-width: 48px;
}
.vui-time-display__current {
text-align: left;
}
.vui-time-display__duration {
text-align: right;
}
/* ================================
TRANSPORT CONTROLS
================================ */
.vui-transport-controls {
display: flex;
align-items: center;
justify-content: center;
gap: var(--vui-space-3);
}
.vui-transport-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: none;
border-radius: var(--vui-radius-full);
background: var(--vui-color-surface-elevated);
color: var(--vui-color-text);
cursor: pointer;
transition: all var(--vui-transition-fast);
}
.vui-transport-btn:hover {
background: var(--vui-color-primary);
color: white;
transform: scale(1.05);
}
.vui-transport-btn:active {
transform: scale(0.95);
}
.vui-transport-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.vui-transport-btn--play {
width: 56px;
height: 56px;
background: var(--vui-color-primary);
color: white;
}
.vui-transport-btn--play:hover {
background: var(--vui-color-primary-hover);
}
.vui-transport-btn--prev,
.vui-transport-btn--next {
width: 36px;
height: 36px;
}
.vui-transport-btn--stop {
width: 36px;
height: 36px;
}
/* ================================
PLAYBACK RATE
================================ */
.vui-playback-rate {
display: flex;
align-items: center;
gap: var(--vui-space-2);
}
.vui-playback-rate__label {
font-size: var(--vui-text-xs);
color: var(--vui-color-text-muted);
}
.vui-playback-rate__value {
font-size: var(--vui-text-sm);
font-weight: var(--vui-font-medium);
color: var(--vui-color-text);
font-variant-numeric: tabular-nums;
min-width: 40px;
text-align: center;
}
.vui-playback-rate__slider {
width: 80px;
}
/* ================================
VOLUME CONTROL
================================ */
.vui-volume-control {
display: flex;
align-items: center;
gap: var(--vui-space-2);
}
.vui-volume-control__icon {
width: 20px;
height: 20px;
color: var(--vui-color-text-muted);
}
.vui-volume-control__slider {
width: 80px;
}
.vui-volume-control__value {
font-size: var(--vui-text-xs);
color: var(--vui-color-text-muted);
min-width: 32px;
text-align: right;
}
/* ================================
CONTROLS ROW
================================ */
.vui-controls-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--vui-space-3);
}
.vui-controls-row--center {
justify-content: center;
}
.vui-controls-group {
display: flex;
align-items: center;
gap: var(--vui-space-2);
}
/* ================================
RESPONSIVE
================================ */
@media (max-width: 640px) {
.vui-transport-controls {
gap: var(--vui-space-2);
}
.vui-transport-btn {
width: 36px;
height: 36px;
}
.vui-transport-btn--play {
width: 48px;
height: 48px;
}
.vui-playback-rate__slider,
.vui-volume-control__slider {
width: 60px;
}
}
/* ================================
SEEK BAR FILL (Enhanced)
================================ */
.vui-seek-bar__fill {
height: 100%;
background: var(--vui-color-primary);
border-radius: var(--vui-radius-full);
position: relative;
transition: width 0.1s linear;
}
.vui-seek-bar__fill::after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translate(50%, -50%) scale(0);
width: 14px;
height: 14px;
background: var(--vui-color-primary);
border-radius: 50%;
box-shadow: var(--vui-shadow-md);
transition: transform var(--vui-transition-fast);
}
.vui-seek-bar:hover .vui-seek-bar__fill::after {
transform: translate(50%, -50%) scale(1);
}
/* ================================
SEEK TIME LABELS
================================ */
.vui-seek-time {
font-size: var(--vui-text-sm);
color: var(--vui-color-text-muted);
font-variant-numeric: tabular-nums;
min-width: 45px;
}
.vui-seek-time--current {
text-align: right;
}
.vui-seek-time--total {
text-align: left;
}
/* ================================
TEMPO BADGE
================================ */
.vui-tempo-badge {
display: flex;
align-items: center;
gap: var(--vui-space-2);
padding: var(--vui-space-2) var(--vui-space-3);
background: var(--vui-color-surface);
border: 1px solid var(--vui-color-border);
border-radius: var(--vui-radius-full);
margin-inline-start: var(--vui-space-3);
white-space: nowrap;
}
.vui-tempo-badge i {
color: var(--vui-color-primary);
}
.vui-tempo-badge__value {
font-weight: var(--vui-font-semibold);
font-size: var(--vui-text-base);
color: var(--vui-color-text);
}
.vui-tempo-badge__unit {
font-size: var(--vui-text-xs);
color: var(--vui-color-text-muted);
text-transform: uppercase;
}
/* ================================
VOLUME INLINE
================================ */
.vui-volume-inline {
display: flex;
align-items: center;
gap: var(--vui-space-2);
}
.vui-volume-inline input[type="range"] {
width: 80px;
}
/* ================================
CONTROLS DIVIDER
================================ */
.vui-controls-divider {
width: 1px;
height: 28px;
background: var(--vui-color-border);
}
/* ================================
BUTTON GROUPS (player-specific)
================================ */
/* ================================
ZOOM VALUE DISPLAY
================================ */
.vui-zoom-value {
font-size: var(--vui-text-xs);
font-weight: var(--vui-font-semibold);
color: var(--vui-color-text-muted);
min-width: 40px;
text-align: center;
white-space: nowrap;
user-select: none;
line-height: 32px;
}
/* ================================
TRANSPOSE DISPLAY
================================ */
.vui-transpose-display {
display: inline-flex;
align-items: center;
padding: 0 var(--vui-space-2);
font-size: var(--vui-text-xs);
font-weight: var(--vui-font-semibold);
color: var(--vui-color-text);
white-space: nowrap;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
line-height: 32px;
user-select: none;
}
.vui-transpose-display__key {
overflow: hidden;
text-overflow: ellipsis;
}
/* ================================
NOTATION CONTROLS GROUPS
================================ */
.vui-notation-controls__transpose {
display: flex;
align-items: center;
gap: var(--vui-space-1);
}
.vui-notation-controls__tools {
display: flex;
align-items: center;
gap: var(--vui-space-2);
}
/* ================================
PRACTICE CONTROLS
================================ */
.vui-practice-toggle-sticky {
position: sticky;
top: 0;
z-index: 20;
background: var(--vui-color-surface-elevated);
padding: var(--vui-space-4);
border-bottom: 1px solid var(--vui-color-border);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.vui-practice-controls {
position: relative;
}
.vui-practice-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--vui-color-surface-elevated);
opacity: 0.7;
z-index: 10;
pointer-events: all;
border-radius: var(--vui-radius-md);
display: flex;
align-items: center;
justify-content: center;
cursor: not-allowed;
transition: opacity var(--vui-transition-base);
}
.vui-practice-overlay::after {
content: 'أطلق وضع التمرين';
font-size: var(--vui-text-sm);
color: var(--vui-color-text-muted);
opacity: 0;
transition: opacity var(--vui-transition-base);
}
.vui-practice-overlay:hover::after {
opacity: 1;
}
.vui-practice-controls.practice-active .vui-practice-overlay {
opacity: 0;
pointer-events: none;
}
.vui-practice-controls:not(.practice-active) .vui-sidebar-section {
opacity: 0.5;
}
.vui-practice-controls.practice-active .vui-sidebar-section {
opacity: 1;
}
/* ================================
COUNT-IN SELECTOR
================================ */
.vui-countin-selector {
display: flex;
flex-wrap: wrap;
gap: var(--vui-space-2);
}
.vui-countin-btn {
flex: 1 1 calc(25% - 6px);
min-width: 60px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--vui-space-2);
min-height: 52px;
border: 2px solid var(--vui-color-border);
border-radius: var(--vui-radius-md);
background: var(--vui-color-surface);
color: var(--vui-color-text);
cursor: pointer;
transition: all var(--vui-transition-base);
font-size: var(--vui-text-sm);
}
.vui-countin-btn span {
font-weight: var(--vui-font-semibold);
font-size: var(--vui-text-base);
line-height: 1;
}
.vui-countin-btn small {
font-size: var(--vui-text-xs);
color: var(--vui-color-text-muted);
margin-top: 2px;
white-space: nowrap;
}
.vui-countin-btn:hover {
border-color: var(--vui-color-primary);
background: var(--vui-color-surface-elevated);
}
.vui-countin-btn.active {
border-color: var(--vui-color-primary);
background: rgba(var(--vui-color-primary-rgb, 181, 156, 88), 0.12);
color: var(--vui-color-primary);
}
.vui-countin-btn.active small {
color: var(--vui-color-primary);
}
/* ================================
PRACTICE BADGE
================================ */
.vui-practice-badge {
position: absolute;
top: -4px;
right: -4px;
font-size: 8px;
}
/* Hide old progress wrapper */
.vui-progress-wrapper {
display: none;
}
/* ================================
CONTROLS SEEK ROW
================================ */
.vui-controls-seek {
justify-content: space-between;
}
/* ================================
CONTROLS MAIN ROW
================================ */
.vui-controls-main {
justify-content: space-between;
}
.vui-controls-left {
display: flex;
align-items: center;
gap: var(--vui-space-3);
min-width: 0;
flex-shrink: 1;
}
.vui-controls-center {
display: flex;
align-items: center;
gap: var(--vui-space-2);
flex-shrink: 0;
}
.vui-controls-right {
display: flex;
align-items: center;
gap: var(--vui-space-3);
min-width: 0;
flex-shrink: 1;
justify-content: flex-end;
}
.vui-play-btn {
width: 56px;
height: 56px;
font-size: 1.5rem;
}
}
/* ─── Play button loading state ─── */
.vui-play-btn--loading {
opacity: 0.7;
cursor: wait !important;
pointer-events: none;
}
.vui-play-btn--loading i {
color: var(--vui-color-warning, #f5a623);
}
/* modules/practice-controls.css */
/* © 2024-2026 Mehdi TMIMI — Vivace Music (vivace-music.org) */
/**
* VIVACE UI - Practice Controls Module
*
* Practice mode overlay and controls for focused practice sessions.
* Includes tempo, loop, and metronome controls.
*
* @author Vivace Music
* @version 1.0.0
*/
@layer modules {
/* ================================
PRACTICE OVERLAY
================================ */
.vui-practice-overlay {
position: fixed;
inset: 0;
z-index: var(--vui-z-modal);
background: rgba(0, 0, 0, 0.95);
display: flex;
flex-direction: column;
opacity: 0;
visibility: hidden;
transition: opacity var(--vui-transition-normal), visibility var(--vui-transition-normal);
}
.vui-practice-overlay.active {
opacity: 1;
visibility: visible;
}
/* ================================
PRACTICE HEADER
================================ */
.vui-practice-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--vui-space-3) var(--vui-space-4);
background: var(--vui-color-surface);
border-bottom: 1px solid var(--vui-color-border);
}
.vui-practice-header__title {
font-size: var(--vui-text-lg);
font-weight: var(--vui-font-semibold);
color: var(--vui-color-text);
}
.vui-practice-header__close {
width: 36px;
height: 36px;
border: none;
border-radius: var(--vui-radius-full);
background: transparent;
color: var(--vui-color-text-muted);
cursor: pointer;
transition: all var(--vui-transition-fast);
display: flex;
align-items: center;
justify-content: center;
}
.vui-practice-header__close:hover {
background: var(--vui-color-surface-elevated);
color: var(--vui-color-text);
}
/* ================================
PRACTICE CONTENT
================================ */
.vui-practice-content {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.vui-practice-notation {
flex: 1;
overflow: auto;
padding: var(--vui-space-4);
}
/* ================================
PRACTICE CONTROLS BAR
================================ */
.vui-practice-controls {
display: flex;
align-items: center;
justify-content: center;
gap: var(--vui-space-4);
padding: var(--vui-space-4);
background: var(--vui-color-surface);
border-top: 1px solid var(--vui-color-border);
flex-wrap: wrap;
}
/* ================================
TEMPO CONTROL
================================ */
.vui-tempo-control {
display: flex;
align-items: center;
gap: var(--vui-space-2);
padding: var(--vui-space-2) var(--vui-space-3);
background: var(--vui-color-surface-elevated);
border-radius: var(--vui-radius-md);
}
.vui-tempo-control__label {
font-size: var(--vui-text-xs);
color: var(--vui-color-text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.vui-tempo-control__value {
font-size: var(--vui-text-lg);
font-weight: var(--vui-font-bold);
color: var(--vui-color-primary);
min-width: 48px;
text-align: center;
font-variant-numeric: tabular-nums;
}
.vui-tempo-control__unit {
font-size: var(--vui-text-xs);
color: var(--vui-color-text-muted);
}
.vui-tempo-control__btn {
width: 32px;
height: 32px;
border: none;
border-radius: var(--vui-radius-sm);
background: var(--vui-color-surface);
color: var(--vui-color-text);
cursor: pointer;
transition: all var(--vui-transition-fast);
display: flex;
align-items: center;
justify-content: center;
}
.vui-tempo-control__btn:hover {
background: var(--vui-color-primary);
color: white;
}
.vui-tempo-control__slider {
width: 100px;
}
/* ================================
LOOP CONTROL
================================ */
.vui-loop-control {
display: flex;
align-items: center;
gap: var(--vui-space-2);
padding: var(--vui-space-2) var(--vui-space-3);
background: var(--vui-color-surface-elevated);
border-radius: var(--vui-radius-md);
}
.vui-loop-control__toggle {
width: 40px;
height: 40px;
border: none;
border-radius: var(--vui-radius-sm);
background: var(--vui-color-surface);
color: var(--vui-color-text-muted);
cursor: pointer;
transition: all var(--vui-transition-fast);
display: flex;
align-items: center;
justify-content: center;
}
.vui-loop-control__toggle:hover {
color: var(--vui-color-text);
}
.vui-loop-control__toggle.active {
background: var(--vui-color-primary);
color: white;
}
.vui-loop-control__range {
display: flex;
align-items: center;
gap: var(--vui-space-1);
font-size: var(--vui-text-sm);
color: var(--vui-color-text);
font-variant-numeric: tabular-nums;
}
.vui-loop-control__separator {
color: var(--vui-color-text-muted);
}
.vui-loop-control__set-btn {
padding: var(--vui-space-1) var(--vui-space-2);
border: 1px solid var(--vui-color-border);
border-radius: var(--vui-radius-sm);
background: transparent;
color: var(--vui-color-text-secondary);
font-size: var(--vui-text-xs);
cursor: pointer;
transition: all var(--vui-transition-fast);
}
.vui-loop-control__set-btn:hover {
border-color: var(--vui-color-primary);
color: var(--vui-color-primary);
}
/* ================================
METRONOME CONTROL
================================ */
.vui-metronome-control {
display: flex;
align-items: center;
gap: var(--vui-space-2);
}
.vui-metronome-control__toggle {
width: 40px;
height: 40px;
border: none;
border-radius: var(--vui-radius-sm);
background: var(--vui-color-surface-elevated);
color: var(--vui-color-text-muted);
cursor: pointer;
transition: all var(--vui-transition-fast);
display: flex;
align-items: center;
justify-content: center;
}
.vui-metronome-control__toggle:hover {
color: var(--vui-color-text);
}
.vui-metronome-control__toggle.active {
background: var(--vui-color-success);
color: white;
}
.vui-metronome-control__indicator {
width: 8px;
height: 8px;
border-radius: var(--vui-radius-full);
background: var(--vui-color-text-muted);
transition: background var(--vui-transition-fast);
}
.vui-metronome-control__indicator.beat {
background: var(--vui-color-success);
box-shadow: 0 0 8px var(--vui-color-success);
}
/* ================================
COUNT-IN CONTROL
================================ */
.vui-countin-control {
display: flex;
align-items: center;
gap: var(--vui-space-2);
}
.vui-countin-control__label {
font-size: var(--vui-text-xs);
color: var(--vui-color-text-muted);
}
.vui-countin-control__select {
padding: var(--vui-space-1) var(--vui-space-2);
border: 1px solid var(--vui-color-border);
border-radius: var(--vui-radius-sm);
background: var(--vui-color-surface);
color: var(--vui-color-text);
font-size: var(--vui-text-sm);
cursor: pointer;
}
.vui-countin-control__select:focus {
outline: none;
border-color: var(--vui-color-primary);
}
/* ================================
PRACTICE ACTIONS
================================ */
.vui-practice-actions {
display: flex;
gap: var(--vui-space-2);
}
.vui-practice-action-btn {
padding: var(--vui-space-2) var(--vui-space-3);
border: 1px solid var(--vui-color-border);
border-radius: var(--vui-radius-md);
background: var(--vui-color-surface-elevated);
color: var(--vui-color-text);
font-size: var(--vui-text-sm);
cursor: pointer;
transition: all var(--vui-transition-fast);
display: flex;
align-items: center;
gap: var(--vui-space-1);
}
.vui-practice-action-btn:hover {
border-color: var(--vui-color-primary);
color: var(--vui-color-primary);
}
.vui-practice-action-btn--primary {
background: var(--vui-color-primary);
border-color: var(--vui-color-primary);
color: white;
}
.vui-practice-action-btn--primary:hover {
background: var(--vui-color-primary-hover);
border-color: var(--vui-color-primary-hover);
color: white;
}
/* ================================
RESPONSIVE
================================ */
@media (max-width: 768px) {
.vui-practice-controls {
gap: var(--vui-space-2);
padding: var(--vui-space-3);
}
.vui-tempo-control,
.vui-loop-control {
padding: var(--vui-space-2);
}
.vui-tempo-control__slider {
width: 80px;
}
}
/* ================================
TEMPO PRESET CHIPS
Theme-aware tempo shortcut buttons
================================ */
.vui-preset-chip {
padding: var(--vui-space-2) var(--vui-space-3);
border-radius: var(--vui-radius-md);
font-size: var(--vui-text-sm);
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid var(--vui-color-border);
background: var(--vui-color-surface-elevated);
color: var(--vui-color-text);
}
.vui-preset-chip:hover {
background: var(--vui-color-surface-hover);
border-color: var(--vui-color-primary);
color: var(--vui-color-primary);
}
.vui-preset-chip.active {
background: var(--vui-color-primary);
color: var(--vui-color-on-primary);
border-color: var(--vui-color-primary);
}
.vui-preset-chip.active:hover {
background: var(--vui-color-primary-hover);
border-color: var(--vui-color-primary-hover);
}
/* Light mode specific adjustments */
[data-vui-mode="light"] .vui-preset-chip {
background: var(--vui-color-surface);
border-color: var(--vui-color-border);
color: var(--vui-color-text);
}
[data-vui-mode="light"] .vui-preset-chip:hover {
background: var(--vui-color-surface-hover);
}
/* Dark mode specific adjustments */
[data-vui-mode="dark"] .vui-preset-chip {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.15);
color: var(--vui-color-text);
}
[data-vui-mode="dark"] .vui-preset-chip:hover {
background: rgba(255, 255, 255, 0.12);
border-color: var(--vui-color-primary);
}
}
/* modules/loading-overlay.css */
/* © 2024-2026 Mehdi TMIMI — Vivace Music (vivace-music.org) */
/**
* Vivace UI - Loading Overlay Module
* Full-page loading screen with animated elements
*
* Usage: Include in player pages that need loading screens
*/
@layer modules {
/* ========================================
LOADING OVERLAY - Full Page
======================================== */
.vui-loading-overlay {
position: fixed;
inset: 0;
background: linear-gradient(
135deg,
var(--vui-color-surface) 0%,
var(--vui-color-surface-elevated) 50%,
var(--vui-color-surface) 100%
);
display: flex;
align-items: center;
justify-content: center;
z-index: var(--vui-z-modal);
transition: opacity 0.6s ease, visibility 0.6s ease;
overflow: hidden;
}
.vui-loading-overlay.vui-loading-overlay--hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* ========================================
FLOATING NOTES BACKGROUND
======================================== */
.vui-loading-bg-notes {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.vui-floating-note {
position: absolute;
font-size: 3rem;
color: var(--vui-color-primary);
opacity: 0.08;
animation: vuiFloatNote 12s ease-in-out infinite;
}
.vui-floating-note:nth-child(1) {
top: 15%;
left: 10%;
animation-delay: 0s;
font-size: 4rem;
}
.vui-floating-note:nth-child(2) {
top: 25%;
right: 15%;
animation-delay: 2s;
font-size: 2.5rem;
}
.vui-floating-note:nth-child(3) {
bottom: 30%;
left: 20%;
animation-delay: 4s;
font-size: 3.5rem;
}
.vui-floating-note:nth-child(4) {
bottom: 20%;
right: 25%;
animation-delay: 6s;
font-size: 2rem;
}
@keyframes vuiFloatNote {
0%, 100% {
transform: translateY(0) rotate(0deg) scale(1);
opacity: 0.08;
}
25% {
transform: translateY(-30px) rotate(15deg) scale(1.1);
opacity: 0.15;
}
50% {
transform: translateY(-20px) rotate(-10deg) scale(1.05);
opacity: 0.1;
}
75% {
transform: translateY(-40px) rotate(5deg) scale(1.15);
opacity: 0.12;
}
}
/* ========================================
LOADING CONTENT
======================================== */
.vui-loading-content {
position: relative;
z-index: 1;
text-align: center;
padding: 2rem;
max-width: 90vw;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
/* ========================================
LOGO WITH GLOW EFFECT
======================================== */
.vui-loading-logo {
position: relative;
width: 120px;
height: 120px;
margin: 0 auto var(--vui-space-6);
}
.vui-loading-logo .logo-img {
width: 100%;
height: 100%;
object-fit: contain;
position: relative;
z-index: 2;
animation: vuiLogoPulse 2s ease-in-out infinite;
}
.vui-loading-logo .logo-glow {
position: absolute;
inset: -20px;
background: radial-gradient(
circle,
rgba(var(--vui-color-primary-rgb, 181, 156, 88), 0.3) 0%,
transparent 70%
);
border-radius: 50%;
animation: vuiGlowPulse 2s ease-in-out infinite;
z-index: 1;
}
@keyframes vuiLogoPulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
@keyframes vuiGlowPulse {
0%, 100% {
opacity: 0.5;
transform: scale(1);
}
50% {
opacity: 0.8;
transform: scale(1.1);
}
}
/* ========================================
TITLE STYLES
======================================== */
.vui-loading-title {
font-size: 2.5rem;
font-weight: var(--vui-font-bold);
margin: 0 0 0.5rem;
display: flex;
align-items: center;
justify-content: center;
gap: var(--vui-space-2);
}
.vui-loading-title .title-text {
color: var(--vui-color-text);
}
.vui-loading-title .title-highlight {
background: linear-gradient(
135deg,
var(--vui-color-primary) 0%,
var(--vui-color-primary-light, #e6c65a) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.vui-loading-subtitle {
font-size: var(--vui-text-lg);
color: var(--vui-color-text-muted);
margin: 0 0 2rem;
font-weight: var(--vui-font-normal);
}
/* ========================================
PROGRESS RING (Spinner Style)
======================================== */
.vui-loading-progress {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.vui-progress-ring {
position: relative;
width: 100px;
height: 100px;
}
.vui-progress-ring-svg {
transform: rotate(-90deg);
width: 100%;
height: 100%;
animation: vuiRingPulse 2s ease-in-out infinite;
}
.vui-progress-ring-bg {
fill: none;
stroke: var(--vui-color-surface-sunken, rgba(255, 255, 255, 0.1));
stroke-width: 6;
}
.vui-progress-ring-fill {
fill: none;
stroke-width: 6;
stroke-linecap: round;
stroke-dasharray: 75 25;
stroke-dashoffset: 0;
filter: drop-shadow(0 0 8px rgba(244, 208, 63, 0.6));
animation: vuiRingFillSpin 1.5s linear infinite;
transform-origin: center;
}
@keyframes vuiRingFillSpin {
0% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: -100; }
}
@keyframes vuiRingPulse {
0%, 100% { filter: drop-shadow(0 0 4px rgba(244, 208, 63, 0.3)); }
50% { filter: drop-shadow(0 0 12px rgba(244, 208, 63, 0.6)); }
}
.vui-progress-percent {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.4rem;
font-weight: var(--vui-font-bold);
color: var(--vui-color-primary);
text-shadow: 0 0 20px rgba(244, 208, 63, 0.5);
animation: vuiPercentPulse 1.5s ease-in-out infinite;
}
@keyframes vuiPercentPulse {
0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}
.vui-loading-status {
color: var(--vui-color-text-muted);
font-size: 1rem;
font-weight: var(--vui-font-medium);
margin: 0;
min-height: 1.5em;
animation: vuiStatusPulse 1.5s ease-in-out infinite;
}
@keyframes vuiStatusPulse {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
/* ========================================
AUDIO BARS ANIMATION
======================================== */
.vui-loading-bars {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 6px;
height: 40px;
margin-bottom: var(--vui-space-8);
}
.vui-loading-bars .bar {
width: 6px;
background: linear-gradient(
to top,
var(--vui-color-primary) 0%,
var(--vui-color-primary-light, #e6c65a) 100%
);
border-radius: var(--vui-radius-full);
animation: vuiAudioBar 1s ease-in-out infinite;
}
.vui-loading-bars .bar:nth-child(1) {
height: 20px;
animation-delay: 0s;
}
.vui-loading-bars .bar:nth-child(2) {
height: 35px;
animation-delay: 0.1s;
}
.vui-loading-bars .bar:nth-child(3) {
height: 25px;
animation-delay: 0.2s;
}
.vui-loading-bars .bar:nth-child(4) {
height: 40px;
animation-delay: 0.3s;
}
.vui-loading-bars .bar:nth-child(5) {
height: 15px;
animation-delay: 0.4s;
}
@keyframes vuiAudioBar {
0%, 100% {
transform: scaleY(1);
}
50% {
transform: scaleY(0.4);
}
}
/* ========================================
POWERED BY FOOTER
======================================== */
.vui-loading-powered {
font-size: var(--vui-text-xs);
color: var(--vui-color-text-muted);
opacity: 0.6;
}
.vui-loading-powered a {
color: var(--vui-color-primary);
text-decoration: none;
font-weight: var(--vui-font-medium);
transition: opacity var(--vui-transition-fast);
}
.vui-loading-powered a:hover {
opacity: 0.8;
text-decoration: underline;
}
/* ========================================
MOBILE RESPONSIVE
======================================== */
@media (max-width: 480px) {
.vui-loading-content {
padding: var(--vui-space-4);
max-width: 100%;
width: 100%;
}
.vui-loading-logo {
width: 100px;
height: 100px;
margin-bottom: var(--vui-space-4);
}
.vui-loading-logo .logo-glow {
inset: -10px;
}
.vui-loading-title {
font-size: 1.75rem;
}
.vui-loading-subtitle {
font-size: var(--vui-text-base);
margin-bottom: 1.5rem;
}
.vui-progress-ring {
width: 80px;
height: 80px;
}
.vui-progress-percent {
font-size: 1.1rem;
}
.vui-loading-progress {
margin-bottom: 1rem;
}
.vui-loading-bars {
height: 30px;
margin-bottom: 1.5rem;
}
.vui-floating-note {
font-size: 2rem;
}
}
} /* end @layer modules */
/* modules/settings-panel.css */
/* © 2024-2026 Mehdi TMIMI — Vivace Music (vivace-music.org) */
/**
* VIVACE UI - Settings Panel Module
*
* Settings panel with toggle switches and form controls.
* Used for player settings, preferences, and configuration.
*
* @author Vivace Music
* @version 1.0.0
*/
@layer modules {
/* ================================
SETTINGS PANEL
================================ */
.vui-settings-panel {
display: flex;
flex-direction: column;
gap: var(--vui-space-4);
}
.vui-settings-group {
padding: var(--vui-space-4);
background: var(--vui-color-surface-elevated);
border-radius: var(--vui-radius-lg);
border: 1px solid var(--vui-color-border);
}
.vui-settings-group__title {
font-size: var(--vui-text-sm);
font-weight: var(--vui-font-semibold);
color: var(--vui-color-text);
margin: 0 0 var(--vui-space-3);
display: flex;
align-items: center;
gap: var(--vui-space-2);
}
.vui-settings-group__title i {
color: var(--vui-color-primary);
}
/* ================================
SETTINGS ROW
================================ */
.vui-settings-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--vui-space-2) 0;
}
.vui-settings-row + .vui-settings-row {
border-top: 1px solid var(--vui-color-border-muted);
}
.vui-settings-row__label {
font-size: var(--vui-text-sm);
color: var(--vui-color-text);
display: flex;
align-items: center;
gap: var(--vui-space-2);
}
.vui-settings-row__label i {
color: var(--vui-color-text-muted);
font-size: var(--vui-text-base);
}
.vui-settings-row__value {
font-size: var(--vui-text-sm);
color: var(--vui-color-text-muted);
}
/* ================================
TOGGLE SWITCH
================================ */
.vui-toggle {
position: relative;
width: 44px;
height: 24px;
cursor: pointer;
}
.vui-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.vui-toggle__slider {
position: absolute;
inset: 0;
background: var(--vui-color-surface-sunken);
border: 2px solid var(--vui-color-border);
border-radius: var(--vui-radius-full);
transition: all var(--vui-transition-base);
}
.vui-toggle__slider::before {
content: '';
position: absolute;
width: 16px;
height: 16px;
left: 2px;
bottom: 2px;
background: var(--vui-color-text-muted);
border-radius: 50%;
transition: all var(--vui-transition-base);
}
.vui-toggle input:checked + .vui-toggle__slider {
background: var(--vui-color-primary);
border-color: var(--vui-color-primary);
}
.vui-toggle input:checked + .vui-toggle__slider::before {
transform: translateX(20px);
background: white;
}
.vui-toggle input:focus + .vui-toggle__slider {
box-shadow: 0 0 0 3px rgba(var(--vui-color-primary-rgb, 181, 156, 88), 0.3);
}
/* ================================
ABOUT SECTION
================================ */
.vui-about-section,
.vui-about-info {
text-align: center;
padding: var(--vui-space-4);
}
.vui-about-logo {
display: flex;
align-items: center;
justify-content: center;
gap: var(--vui-space-2);
margin-bottom: var(--vui-space-3);
}
.vui-about-logo i {
font-size: 24px;
color: var(--vui-color-primary);
}
.vui-about-logo span {
font-size: var(--vui-text-lg);
font-weight: var(--vui-font-semibold);
color: var(--vui-color-text);
}
.vui-about-logo img {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
}
.vui-about-title {
font-size: var(--vui-text-lg);
font-weight: var(--vui-font-semibold);
color: var(--vui-color-text);
margin: 0 0 var(--vui-space-1);
}
.vui-about-version {
font-size: var(--vui-text-xs);
color: var(--vui-color-text-muted);
margin: 0 0 var(--vui-space-2);
}
.vui-about-copyright {
font-size: var(--vui-text-xs);
color: var(--vui-color-text-muted);
margin: 0 0 var(--vui-space-2);
}
.vui-about-developer {
font-size: var(--vui-text-sm);
color: var(--vui-color-text-muted);
}
.vui-about-developer a {
color: var(--vui-color-primary);
text-decoration: none;
transition: opacity var(--vui-transition-fast);
}
.vui-about-developer a:hover {
opacity: 0.8;
text-decoration: underline;
}
.vui-about-description {
font-size: var(--vui-text-sm);
color: var(--vui-color-text-muted);
line-height: 1.5;
margin: 0 0 var(--vui-space-4);
}
.vui-about-links {
display: flex;
justify-content: center;
gap: var(--vui-space-3);
}
.vui-about-link {
display: flex;
align-items: center;
gap: var(--vui-space-1);
font-size: var(--vui-text-sm);
color: var(--vui-color-primary);
text-decoration: none;
transition: opacity var(--vui-transition-fast);
}
.vui-about-link:hover {
opacity: 0.8;
}
/* ================================
THEME SELECTOR
================================ */
.vui-theme-selector {
display: flex;
gap: var(--vui-space-2);
}
.vui-theme-btn {
flex: 1;
padding: var(--vui-space-2) var(--vui-space-3);
border: 2px solid var(--vui-color-border);
border-radius: var(--vui-radius-md);
background: var(--vui-color-surface);
color: var(--vui-color-text);
cursor: pointer;
transition: all var(--vui-transition-base);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--vui-space-1);
}
.vui-theme-btn:hover {
border-color: var(--vui-color-primary);
}
.vui-theme-btn.active {
border-color: var(--vui-color-primary);
background: rgba(var(--vui-color-primary-rgb, 181, 156, 88), 0.1);
}
.vui-theme-btn i {
font-size: 1.2rem;
}
.vui-theme-btn span {
font-size: var(--vui-text-xs);
}
/* ================================
SLIDER ROW
================================ */
.vui-slider-row {
display: flex;
align-items: center;
gap: var(--vui-space-2);
}
.vui-slider-row .vui-slider {
flex: 1;
}
.vui-slider-value {
min-width: 35px;
font-size: var(--vui-text-xs);
color: var(--vui-color-text-muted);
text-align: right;
font-variant-numeric: tabular-nums;
}
/* ================================
METRONOME ROW
================================ */
.vui-metronome-row {
display: flex;
align-items: center;
gap: var(--vui-space-3);
}
.vui-metronome-volume {
flex: 1;
display: flex;
align-items: center;
gap: var(--vui-space-2);
}
.vui-metronome-volume .vui-slider {
flex: 1;
}
/* ================================
BPM LABEL
================================ */
.vui-bpm-label {
font-size: var(--vui-text-xs);
color: var(--vui-color-text-muted);
}
}
/* modules/shortcuts-modal.css */
/* © 2024-2026 Mehdi TMIMI — Vivace Music (vivace-music.org) */
/**
* VIVACE UI - Shortcuts Modal Module
*
* Keyboard shortcuts help modal with key badges.
* Displays available keyboard shortcuts in a grid layout.
*
* @author Vivace Music
* @version 1.0.0
*/
@layer modules {
/* ================================
SHORTCUTS MODAL
================================ */
.vui-shortcuts-modal {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: var(--vui-z-modal);
opacity: 0;
visibility: hidden;
transition: opacity var(--vui-transition-normal), visibility var(--vui-transition-normal);
backdrop-filter: blur(4px);
}
.vui-shortcuts-modal.open {
opacity: 1;
visibility: visible;
}
.vui-shortcuts-modal__content {
background: var(--vui-color-surface);
border-radius: var(--vui-radius-xl);
max-width: 600px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
box-shadow: var(--vui-shadow-xl);
animation: vuiModalSlideIn 0.3s ease;
}
.vui-shortcuts-modal.open .vui-shortcuts-modal__content {
animation: vuiModalSlideIn 0.3s ease;
}
@keyframes vuiModalSlideIn {
from {
opacity: 0;
transform: translateY(-20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* ================================
MODAL HEADER
================================ */
.vui-shortcuts-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--vui-space-4) var(--vui-space-5);
border-bottom: 1px solid var(--vui-color-border);
}
.vui-shortcuts-modal__title {
font-size: var(--vui-text-lg);
font-weight: var(--vui-font-semibold);
color: var(--vui-color-text);
margin: 0;
display: flex;
align-items: center;
gap: var(--vui-space-2);
}
.vui-shortcuts-modal__title i {
color: var(--vui-color-primary);
}
.vui-shortcuts-modal__close {
width: 36px;
height: 36px;
border: none;
background: var(--vui-color-surface-sunken);
border-radius: var(--vui-radius-full);
color: var(--vui-color-text-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--vui-transition-fast);
}
.vui-shortcuts-modal__close:hover {
background: var(--vui-color-surface-elevated);
color: var(--vui-color-text);
}
/* ================================
MODAL BODY
================================ */
.vui-shortcuts-modal__body {
padding: var(--vui-space-5);
}
/* ================================
SHORTCUTS GRID
================================ */
.vui-shortcuts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--vui-space-4);
}
.vui-shortcuts-group {
padding: var(--vui-space-4);
background: var(--vui-color-surface-elevated);
border-radius: var(--vui-radius-lg);
border: 1px solid var(--vui-color-border);
}
.vui-shortcuts-group__title {
font-size: var(--vui-text-sm);
font-weight: var(--vui-font-semibold);
color: var(--vui-color-text);
margin: 0 0 var(--vui-space-3);
display: flex;
align-items: center;
gap: var(--vui-space-2);
}
.vui-shortcuts-group__title i {
color: var(--vui-color-primary);
}
/* ================================
SHORTCUT ITEMS
================================ */
.vui-shortcut {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--vui-space-2) 0;
}
.vui-shortcut + .vui-shortcut {
border-top: 1px solid var(--vui-color-border-muted);
}
.vui-shortcut__label {
font-size: var(--vui-text-sm);
color: var(--vui-color-text);
}
.vui-shortcut__keys {
display: flex;
gap: var(--vui-space-1);
}
/* ================================
KEYBOARD KEY BADGES
================================ */
.vui-kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 28px;
padding: 0 var(--vui-space-2);
background: linear-gradient(
to bottom,
var(--vui-color-surface-elevated) 0%,
var(--vui-color-surface) 100%
);
border: 1px solid var(--vui-color-border);
border-radius: var(--vui-radius-sm);
font-size: var(--vui-text-xs);
font-weight: var(--vui-font-semibold);
color: var(--vui-color-text);
font-family: var(--vui-font-mono, monospace);
box-shadow:
0 2px 0 var(--vui-color-border),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
text-transform: uppercase;
}
.vui-kbd--wide {
min-width: 50px;
}
.vui-kbd + span {
font-size: var(--vui-text-xs);
color: var(--vui-color-text-muted);
margin: 0 var(--vui-space-1);
}
/* ================================
HELP FAB
================================ */
.vui-help-fab {
position: fixed;
bottom: 120px;
left: var(--vui-space-4);
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--vui-color-surface-elevated);
border: 1px solid var(--vui-color-border);
color: var(--vui-color-text-muted);
cursor: pointer;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--vui-text-md);
font-weight: var(--vui-font-bold);
transition: all var(--vui-transition-normal);
box-shadow: var(--vui-shadow-sm);
opacity: 0.7;
}
.vui-help-fab:hover {
background: var(--vui-color-primary);
color: var(--vui-color-text-on-primary);
border-color: var(--vui-color-primary);
transform: scale(1.1);
opacity: 1;
}
}
/* modules/studio-mode.css */
/* © 2024-2026 Mehdi TMIMI — Vivace Music (vivace-music.org) */
/**
* VIVACE UI - Studio Mode Module
*
* Immersive fullscreen studio mode for distraction-free practice.
* Includes FABs, overlays, and layout modifications.
*
* CASCADE STRATEGY:
* Layer order: reset → tokens → base → components → modules → layouts → utilities → themes
* This file is in @layer utilities, which naturally wins over
* @layer layouts (player-layout.css) and @layer modules (instrument-selector.css).
* No !important needed — the layer cascade handles all specificity.
*
* @author Vivace Music
* @version 2.0.0
*/
@layer utilities {
/* ================================
STUDIO MODE - BODY CLASS
================================ */
body.vui-studio-mode {
overflow: hidden;
}
/* ================================
PLAYER - Fullscreen takeover
Overrides the grid layout from player-layout.css (@layer layouts)
================================ */
.vui-studio-mode .vui-player {
position: fixed;
inset: 0;
z-index: 1000;
background: var(--vui-color-surface);
display: flex;
flex-direction: column;
height: 100vh;
height: 100dvh; /* Dynamic viewport height for mobile */
padding-bottom: 0;
}
/* ================================
HEADER - Hidden in studio
================================ */
.vui-studio-mode .vui-player__header {
display: none;
height: 0;
overflow: hidden;
}
/* ================================
INSTRUMENTS - Floating vertical panel near FAB
================================ */
.vui-studio-mode .vui-player__instruments-container {
position: fixed;
left: calc(var(--vui-space-4) + 56px); /* 44px FAB + 12px gap */
top: 50%;
transform: translateY(-50%);
z-index: 1001;
background: var(--vui-color-surface-elevated);
padding: var(--vui-space-3);
border-radius: var(--vui-radius-xl);
box-shadow: var(--vui-shadow-xl);
border: 1px solid var(--vui-color-border);
max-height: calc(100dvh - 120px); /* Full viewport minus controls + margin */
overflow-y: auto;
opacity: 0;
visibility: hidden;
transition: opacity var(--vui-transition-normal), visibility var(--vui-transition-normal);
}
.vui-studio-mode .vui-player__instruments-container.visible {
opacity: 1;
visibility: visible;
}
.vui-studio-mode .vui-instrument-selector {
flex-direction: column;
gap: var(--vui-space-2);
}
/* Hide the toggle chevron — FAB + close button handle visibility */
.vui-studio-mode .vui-player__instruments-toggle {
display: none;
}
/* Remove inner max-height/overflow from layouts layer —
the outer container handles sizing in studio mode */
.vui-studio-mode .vui-player__instruments {
max-height: none;
overflow: visible;
padding: 0;
border-bottom: none;
background: transparent;
}
/* ================================
NOTATION - Fills remaining space
================================ */
.vui-studio-mode .vui-player__notation {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0; /* Allow flex child to shrink */
padding: 0;
margin: 0;
overflow: hidden;
padding-bottom: 80px; /* Account for fixed footer */
}
.vui-studio-mode #notation-container,
.vui-studio-mode .vui-notation-container {
flex: 1;
min-height: 0;
height: 100%;
border-radius: 0;
overflow: auto;
}
/* ================================
CONTROLS - Fixed at bottom
================================ */
.vui-studio-mode .vui-player__controls {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
z-index: 1001;
background: var(--vui-color-surface);
border-top: 1px solid var(--vui-color-border);
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
transition: none; /* Instant positioning */
}
/* ================================
SIDEBAR - Fixed overlay
================================ */
.vui-studio-mode .vui-player__sidebar {
position: fixed;
right: 0;
top: 0;
bottom: 0;
z-index: 1002;
width: 360px;
min-width: 360px;
box-shadow: var(--vui-shadow-xl);
}
/* ================================
STUDIO FABs (Floating Action Buttons)
================================ */
.vui-studio-fab {
position: fixed;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--vui-color-surface-elevated);
border: 1px solid var(--vui-color-border);
color: var(--vui-color-text-muted);
cursor: pointer;
z-index: 1003;
display: none;
align-items: center;
justify-content: center;
font-size: 1.2rem;
transition: all var(--vui-transition-normal);
box-shadow: var(--vui-shadow-md);
opacity: 0.8;
}
.vui-studio-fab:hover {
opacity: 1;
transform: scale(1.1);
box-shadow: var(--vui-shadow-xl);
}
.vui-studio-mode .vui-studio-fab {
display: flex;
}
/* Instruments toggle - left middle */
.vui-studio-fab--instruments {
left: var(--vui-space-4);
top: 50%;
transform: translateY(-50%);
}
.vui-studio-fab--instruments:hover {
transform: translateY(-50%) scale(1.1);
}
/* Sidebar toggle - right middle */
.vui-studio-fab--sidebar {
right: var(--vui-space-4);
top: 50%;
transform: translateY(-50%);
}
.vui-studio-fab--sidebar:hover {
transform: translateY(-50%) scale(1.1);
}
/* Exit studio - top right */
.vui-studio-fab--exit {
right: var(--vui-space-4);
top: calc(var(--vui-space-4) + 60px);
}
/* ================================
STUDIO MODE OVERLAY
================================ */
.vui-studio-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: calc(var(--vui-z-modal) - 1);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.vui-studio-mode .vui-player__sidebar:not(.vui-player__sidebar--hidden) ~ .vui-studio-overlay {
opacity: 1;
pointer-events: auto;
}
/* Hide FABs when their target is visible */
.vui-studio-mode .vui-player__sidebar:not(.vui-player__sidebar--hidden) ~ .vui-studio-fab--sidebar {
opacity: 0;
pointer-events: none;
}
.vui-studio-mode .vui-player__instruments-container.visible ~ .vui-studio-fab--instruments {
opacity: 0;
pointer-events: none;
}
}
/* layouts/player-layout.css */
/* © 2024-2026 Mehdi TMIMI — Vivace Music (vivace-music.org) */
/**
* VIVACE UI - Player Layout
*
* Main layout for music sheet player (Andalousie, Orchestra).
* Responsive grid layout with fixed controls.
*
* Structure:
* .vui-player
* .vui-player__header (back button, song info)
* .vui-player__instruments (instrument selector bar)
* .vui-player__notation (sheet music canvas)
* .vui-player__controls (zoom, playback controls)
* .vui-player__sidebar (optional practice/mixer panel)
*/
@layer layouts {
/* ================================
MAIN CONTAINER
================================ */
.vui-player {
display: grid;
grid-template-rows: auto auto 1fr;
grid-template-columns: 1fr;
min-height: 100vh;
background: var(--vui-color-surface);
position: relative;
padding-bottom: 110px; /* Space for fixed controls bar */
}
/* With sidebar (studio mode) */
.vui-player--with-sidebar {
grid-template-columns: 1fr 320px;
grid-template-areas:
"header header"
"instruments instruments"
"notation sidebar";
}
.vui-player--with-sidebar .vui-player__header {
grid-area: header;
}
.vui-player--with-sidebar .vui-player__instruments-container {
grid-area: instruments;
}
.vui-player--with-sidebar .vui-player__notation {
grid-area: notation;
}
.vui-player--with-sidebar .vui-player__sidebar {
grid-area: sidebar;
display: flex !important; /* Override --hidden state when sidebar is active */
}
/* Ensure sidebar takes full height of its grid area */
.vui-player--with-sidebar .vui-player__sidebar:not(.vui-player__sidebar--hidden) {
display: flex !important;
}
/* ================================
HEADER
================================ */
.vui-player__header {
padding: var(--vui-space-4) var(--vui-space-6);
background: var(--vui-color-surface-elevated);
border-bottom: 1px solid var(--vui-color-border);
display: flex;
align-items: center;
gap: var(--vui-space-4);
}
.vui-player__back-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 8px;
font-size: var(--vui-text-sm, 0.875rem);
font-weight: 500;
color: var(--vui-color-text-secondary, #aaa);
background: var(--vui-color-surface-sunken, rgba(255,255,255,0.05));
border: 1px solid var(--vui-color-border, rgba(255,255,255,0.1));
transition: all 0.2s ease;
cursor: pointer;
}
.vui-player__back-btn:hover {
color: var(--vui-color-text, #fff);
background: var(--vui-color-primary-muted, rgba(201,162,39,0.15));
border-color: var(--vui-color-primary, #c9a227);
}
.vui-player__back-btn i {
font-size: 0.75rem;
}
.vui-player__song-info {
flex: 1;
}
.vui-player__song-title {
margin: 0;
font-size: var(--vui-text-2xl);
color: var(--vui-color-text);
}
.vui-player__song-composer {
margin: var(--vui-space-1) 0 0;
font-size: var(--vui-text-base);
color: var(--vui-color-text-secondary);
}
/* ================================
INSTRUMENTS CONTAINER (Always visible wrapper)
================================ */
.vui-player__instruments-container {
position: relative;
background: var(--vui-color-surface-elevated);
}
/* Toggle button - positioned above instruments */
.vui-player__instruments-toggle {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
background: var(--vui-color-primary);
color: var(--vui-color-text-on-primary);
border: none;
border-radius: var(--vui-radius-full);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: var(--vui-shadow-lg);
transition: all var(--vui-transition-base);
z-index: 10;
}
.vui-player__instruments-toggle:hover {
background: var(--vui-color-primary-hover);
transform: translate(-50%, -50%) scale(1.1);
box-shadow: var(--vui-shadow-xl);
}
.vui-player__instruments-toggle i {
font-size: 1rem;
transition: transform var(--vui-transition-base);
}
.vui-player__instruments-toggle.collapsed i {
transform: rotate(180deg);
}
/* ================================
INSTRUMENTS BAR (Collapsible content)
================================ */
.vui-player__instruments {
padding: var(--vui-space-4) var(--vui-space-4);
background: var(--vui-color-surface-elevated);
border-bottom: 1px solid var(--vui-color-border);
display: flex;
justify-content: center;
align-items: center;
transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
max-height: 200px;
opacity: 1;
overflow: hidden;
}
/* Collapsible state */
.vui-player__instruments--collapsed {
max-height: 0;
padding: 0;
overflow: hidden;
border-bottom: none;
}
/* ================================
NOTATION CANVAS
================================ */
.vui-player__notation {
padding: var(--vui-space-6);
overflow: auto;
position: relative;
display: flex;
justify-content: center;
align-items: flex-start;
}
.vui-player__notation-canvas {
width: 100%;
max-width: 1200px;
}
/* Loading state */
.vui-player__notation--loading {
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
}
.vui-player__notation-loader {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--vui-space-4);
color: var(--vui-color-text-muted);
}
/* ================================
CONTROLS BAR (Fixed Bottom)
================================ */
.vui-player__controls {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: var(--vui-space-3) var(--vui-space-6);
background: var(--vui-color-surface-elevated);
border-top: 1px solid var(--vui-color-border);
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
z-index: var(--vui-z-sticky);
display: flex;
flex-direction: column;
gap: var(--vui-space-2);
}
/* Desktop controls: visible by default */
.vui-controls-desktop {
display: contents; /* Let children flow naturally */
}
/* Mobile controls: hidden by default */
.vui-controls-mobile {
display: none;
}
/* Mobile menu: hidden by default */
.vui-mobile-menu {
display: none;
}
/* Spacer to prevent content from being hidden behind fixed controls */
.vui-player__controls-spacer {
height: 120px; /* Approximate height of controls bar */
}
/* ================================
SIDEBAR (Practice/Mixer Panel)
================================ */
.vui-player__sidebar {
background: var(--vui-color-surface-elevated);
border-left: 1px solid var(--vui-color-border);
display: flex;
flex-direction: column;
max-height: calc(100vh - 180px); /* Account for header + fixed controls */
overflow: hidden;
}
[dir="rtl"] .vui-player__sidebar {
border-left: none;
border-right: 1px solid var(--vui-color-border);
}
/* Sidebar content wrapper - this is what scrolls */
.vui-sidebar-content {
flex: 1;
overflow-y: auto;
padding: var(--vui-space-4);
}
/* Sidebar header stays fixed */
.vui-sidebar-header {
flex-shrink: 0;
}
/* Sidebar toggle (floating button) */
.vui-player__sidebar-toggle {
position: fixed;
top: 50%;
right: var(--vui-space-4);
transform: translateY(-50%);
z-index: var(--vui-z-sticky);
}
[dir="rtl"] .vui-player__sidebar-toggle {
right: auto;
left: var(--vui-space-4);
}
/* Hidden sidebar */
.vui-player__sidebar--hidden {
display: none;
}
/* Mobile-only elements - hidden on desktop */
.vui-mobile-only,
.vui-floating-zoom {
display: none;
}
.vui-controls-seek {
width: 100%;
}
/* ================================
RESPONSIVE BREAKPOINTS
Strategy:
- Tablet (768-1023px): Compact layout, overlay sidebar
- Mobile (<768px): Horizontal scroll instruments, minimal controls
================================ */
@media (max-width: 1023px) {
/* Sidebar becomes overlay */
.vui-player--with-sidebar {
grid-template-columns: 1fr;
}
.vui-player__sidebar {
display: none;
}
.vui-player__sidebar:not(.vui-player__sidebar--hidden) {
display: flex;
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 320px;
max-width: 90%;
z-index: var(--vui-z-modal);
box-shadow: var(--vui-shadow-2xl);
}
}
/* ================================
TABLET CONTROLS (768-1023px)
Compact controls bar — wrap left/right
below center when space is tight
================================ */
@media (max-width: 1023px) and (min-width: 768px) {
.vui-player__controls {
padding: var(--vui-space-2) var(--vui-space-4);
}
.vui-controls-main {
flex-wrap: wrap;
justify-content: center;
gap: var(--vui-space-2);
}
.vui-controls-center {
order: -1;
flex-basis: 100%;
justify-content: center;
}
.vui-controls-left,
.vui-controls-right {
flex: 1 1 auto;
justify-content: center;
}
.vui-controls-divider {
height: 24px;
}
.vui-tempo-badge {
padding: var(--vui-space-1) var(--vui-space-2);
}
.vui-tempo-badge__value {
font-size: var(--vui-text-sm);
}
.vui-volume-inline input[type="range"] {
width: 60px;
}
}
@media (max-width: 767px) {
/* ================================
MOBILE HEADER
Simplified: just back + lang + theme
Studio & Mixer moved to controls bar
================================ */
.vui-player__header {
display: flex;
flex-wrap: wrap;
padding: 12px 16px;
gap: 10px;
align-items: center;
}
.vui-player__back-btn {
padding: 5px 10px;
flex-shrink: 0;
margin-right: auto;
font-size: 0.8rem;
}
.vui-player__back-btn span {
display: none;
}
/* Hide studio and mixer in header on mobile */
.vui-player__header .vui-studio-btn,
.vui-player__header #sidebarToggle {
display: none;
}
/* Show mobile PDF button in header on mobile */
.vui-player__header .vui-mobile-pdf-btn {
display: flex !important;
align-items: center;
justify-content: center;
}
/* Song info spans full width */
.vui-player__song-info {
flex: 1 1 100%;
order: 10;
text-align: center;
padding: 12px 0 0;
border-top: 1px solid rgba(0, 0, 0, 0.08);
margin-top: 4px;
}
.vui-player__song-title {
font-size: 1.125rem;
line-height: 1.4;
margin: 0 0 4px 0;
}
.vui-player__song-composer {
font-size: 0.8125rem;
opacity: 0.8;
margin: 0;
}
/* ================================
MOBILE INSTRUMENTS
Horizontal scroll, no wrap
================================ */
.vui-player__instruments-toggle {
display: none;
}
.vui-player__instruments {
padding: var(--vui-space-2) var(--vui-space-3);
max-height: none;
overflow: visible;
}
.vui-instrument-selector,
.vui-studio-mode .vui-instrument-selector {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 5px;
}
/* ================================
MOBILE CONTROLS - Complete Redesign
================================ */
/* Hide desktop controls on mobile */
.vui-controls-desktop {
display: none;
}
/* Show mobile controls */
.vui-controls-mobile {
display: flex;
flex-direction: column;
gap: 16px;
}
.vui-player__controls {
padding: 16px 20px;
}
/* Seek bar */
.vui-controls-mobile .vui-controls-seek {
display: flex;
align-items: center;
gap: 12px;
}
/* Playback row */
.vui-controls-playback {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
/* Menu button - left */
.vui-mobile-menu-btn {
width: 44px;
height: 44px;
flex-shrink: 0;
}
/* Floating zoom over notation - absolute overlay, out of flex flow */
.vui-floating-zoom {
display: flex;
align-items: center;
gap: 4px;
position: absolute;
top: 8px;
left: 8px;
z-index: 20;
background: var(--vui-color-surface-elevated);
border: 1px solid var(--vui-color-border);
border-radius: var(--vui-radius-full);
padding: 4px 8px;
box-shadow: var(--vui-shadow-md);
opacity: 0.85;
transition: opacity 0.2s ease;
}
.vui-floating-zoom:hover,
.vui-floating-zoom:active {
opacity: 1;
}
.vui-floating-zoom__btn {
width: 32px;
height: 32px;
border: none;
background: transparent;
color: var(--vui-color-text-secondary);
cursor: pointer;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
transition: background 0.15s ease, color 0.15s ease;
}
.vui-floating-zoom__btn:hover {
background: var(--vui-color-border);
color: var(--vui-color-text);
}
.vui-floating-zoom__btn:active {
transform: scale(0.9);
}
.vui-floating-zoom__value {
font-size: 0.75rem;
font-weight: 600;
color: var(--vui-color-text-muted);
min-width: 34px;
text-align: center;
user-select: none;
}
/* Playback controls - center */
.vui-mobile-playback {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex: 1;
}
.vui-mobile-playback .vui-play-btn {
width: 64px;
height: 64px;
font-size: 1.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.vui-mobile-playback > .vui-btn:not(.vui-play-btn) {
width: 44px;
height: 44px;
}
/* Mobile dropdown menu */
.vui-mobile-menu {
display: none;
position: absolute;
bottom: 100%;
left: 12px;
right: 12px;
background: var(--vui-color-surface-elevated);
border-radius: 20px;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
padding: 0;
margin-bottom: 12px;
max-height: 65vh;
overflow-y: auto;
overflow-x: hidden;
}
.vui-mobile-menu.active {
display: block;
animation: slideUp 0.25s ease-out;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.vui-mobile-menu__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 20px 14px;
font-weight: 600;
font-size: 1.0625rem;
color: var(--vui-color-text);
position: sticky;
top: 0;
background: var(--vui-color-surface-elevated);
z-index: 1;
}
.vui-mobile-menu__header .vui-btn {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--vui-color-surface);
}
.vui-mobile-menu__content {
padding: 4px 12px 16px;
}
.vui-mobile-menu__item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 12px;
gap: 16px;
background: var(--vui-color-surface);
border-radius: 12px;
margin-bottom: 8px;
}
.vui-mobile-menu__label {
display: flex;
align-items: center;
gap: 12px;
color: var(--vui-color-text);
font-size: 0.9375rem;
font-weight: 500;
}
.vui-mobile-menu__label i {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
color: var(--vui-color-primary);
background: rgba(var(--vui-color-primary-rgb, 181, 156, 88), 0.12);
border-radius: 8px;
}
.vui-mobile-menu__value {
color: var(--vui-color-text-secondary);
font-size: 0.875rem;
}
.vui-mobile-menu__controls {
display: flex;
align-items: center;
gap: 6px;
background: var(--vui-color-surface-elevated);
padding: 4px;
border-radius: 10px;
}
.vui-mobile-menu__controls .vui-btn {
width: 36px;
height: 36px;
border-radius: 8px;
}
.vui-mobile-menu__controls span {
min-width: 48px;
text-align: center;
font-weight: 600;
font-size: 0.875rem;
color: var(--vui-color-text);
}
.vui-mobile-menu__divider {
height: 1px;
background: var(--vui-color-border);
margin: 8px 0 12px;
}
.vui-mobile-menu__action {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 14px 12px;
border: none;
background: transparent;
color: var(--vui-color-text);
font-size: 0.9375rem;
font-weight: 500;
text-align: left;
cursor: pointer;
border-radius: 12px;
transition: background 0.15s ease;
}
.vui-mobile-menu__action:hover,
.vui-mobile-menu__action:active {
background: var(--vui-color-surface);
}
.vui-mobile-menu__action i {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
color: var(--vui-color-text-secondary);
}
/* ================================
MOBILE SIDEBAR
Full screen overlay
================================ */
.vui-player__sidebar:not(.vui-player__sidebar--hidden) {
width: 100%;
max-width: 100%;
}
/* Hide studio mode exit FAB on mobile - use footer button instead */
.vui-studio-fab--exit {
display: none !important;
}
}
}
/* utilities/utilities.css */
/* © 2024-2026 Mehdi TMIMI — Vivace Music (vivace-music.org) */
/**
* VIVACE UI - Utility Classes
*
* Visibility and display helpers.
*/
@layer utilities {
/* ================================
VISIBILITY
================================ */
.vui-hidden {
display: none !important;
}
.vui-invisible {
visibility: hidden !important;
}
/* Screen reader only (accessible hidden) */
.vui-sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* ================================
RESPONSIVE VISIBILITY
================================ */
/* Hide on mobile, show on tablet+ */
.vui-hide-mobile {
display: none !important;
}
@media (min-width: 768px) {
.vui-hide-mobile {
display: initial !important;
}
.vui-show-mobile {
display: none !important;
}
}
/* Hide on desktop */
@media (min-width: 1024px) {
.vui-hide-desktop {
display: none !important;
}
}
/* ================================
FLEX UTILITIES
================================ */
.vui-flex {
display: flex !important;
}
.vui-inline-flex {
display: inline-flex !important;
}
.vui-flex-row {
flex-direction: row !important;
}
.vui-flex-col {
flex-direction: column !important;
}
.vui-flex-wrap {
flex-wrap: wrap !important;
}
.vui-flex-center {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.vui-flex-between {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
.vui-items-center {
align-items: center !important;
}
.vui-items-start {
align-items: flex-start !important;
}
.vui-items-end {
align-items: flex-end !important;
}
.vui-justify-center {
justify-content: center !important;
}
.vui-justify-between {
justify-content: space-between !important;
}
.vui-justify-end {
justify-content: flex-end !important;
}
.vui-flex-1 {
flex: 1 !important;
}
.vui-flex-shrink-0 {
flex-shrink: 0 !important;
}
/* ================================
GAP UTILITIES
================================ */
.vui-gap-0 { gap: 0 !important; }
.vui-gap-1 { gap: var(--vui-space-1) !important; }
.vui-gap-2 { gap: var(--vui-space-2) !important; }
.vui-gap-3 { gap: var(--vui-space-3) !important; }
.vui-gap-4 { gap: var(--vui-space-4) !important; }
.vui-gap-6 { gap: var(--vui-space-6) !important; }
.vui-gap-8 { gap: var(--vui-space-8) !important; }
/* ================================
SPACING UTILITIES
================================ */
/* Margin */
.vui-m-0 { margin: 0 !important; }
.vui-m-auto { margin: auto !important; }
.vui-mx-auto { margin-left: auto !important; margin-right: auto !important; }
.vui-mt-1 { margin-top: var(--vui-space-1) !important; }
.vui-mt-2 { margin-top: var(--vui-space-2) !important; }
.vui-mt-4 { margin-top: var(--vui-space-4) !important; }
.vui-mt-6 { margin-top: var(--vui-space-6) !important; }
.vui-mt-8 { margin-top: var(--vui-space-8) !important; }
.vui-mb-1 { margin-bottom: var(--vui-space-1) !important; }
.vui-mb-2 { margin-bottom: var(--vui-space-2) !important; }
.vui-mb-4 { margin-bottom: var(--vui-space-4) !important; }
.vui-mb-6 { margin-bottom: var(--vui-space-6) !important; }
/* Padding */
.vui-p-0 { padding: 0 !important; }
.vui-p-2 { padding: var(--vui-space-2) !important; }
.vui-p-4 { padding: var(--vui-space-4) !important; }
.vui-p-6 { padding: var(--vui-space-6) !important; }
.vui-px-2 { padding-left: var(--vui-space-2) !important; padding-right: var(--vui-space-2) !important; }
.vui-px-4 { padding-left: var(--vui-space-4) !important; padding-right: var(--vui-space-4) !important; }
.vui-py-2 { padding-top: var(--vui-space-2) !important; padding-bottom: var(--vui-space-2) !important; }
.vui-py-4 { padding-top: var(--vui-space-4) !important; padding-bottom: var(--vui-space-4) !important; }
/* ================================
TEXT UTILITIES
================================ */
.vui-text-center { text-align: center !important; }
.vui-text-left { text-align: left !important; }
.vui-text-right { text-align: right !important; }
.vui-text-xs { font-size: var(--vui-text-xs) !important; }
.vui-text-sm { font-size: var(--vui-text-sm) !important; }
.vui-text-base { font-size: var(--vui-text-base) !important; }
.vui-text-lg { font-size: var(--vui-text-lg) !important; }
.vui-text-xl { font-size: var(--vui-text-xl) !important; }
.vui-font-normal { font-weight: var(--vui-font-normal) !important; }
.vui-font-medium { font-weight: var(--vui-font-medium) !important; }
.vui-font-bold { font-weight: var(--vui-font-bold) !important; }
.vui-text-muted { color: var(--vui-color-text-muted) !important; }
.vui-text-primary { color: var(--vui-color-primary) !important; }
/* ================================
WIDTH/HEIGHT
================================ */
.vui-w-full { width: 100% !important; }
.vui-h-full { height: 100% !important; }
.vui-min-w-0 { min-width: 0 !important; }
.vui-min-h-0 { min-height: 0 !important; }
/* ================================
OVERFLOW
================================ */
.vui-overflow-hidden { overflow: hidden !important; }
.vui-overflow-auto { overflow: auto !important; }
.vui-overflow-x-auto { overflow-x: auto !important; }
.vui-overflow-y-auto { overflow-y: auto !important; }
/* ================================
POSITION
================================ */
.vui-relative { position: relative !important; }
.vui-absolute { position: absolute !important; }
.vui-fixed { position: fixed !important; }
.vui-sticky { position: sticky !important; }
/* ================================
CURSOR
================================ */
.vui-cursor-pointer { cursor: pointer !important; }
.vui-cursor-not-allowed { cursor: not-allowed !important; }
/* ================================
MIN-WIDTH UTILITIES
================================ */
.vui-min-w-35 { min-width: 35px !important; }
.vui-min-w-40 { min-width: 40px !important; }
.vui-min-w-50 { min-width: 50px !important; }
/* ================================
ADDITIONAL MARGIN UTILITIES
================================ */
.vui-mt-3 { margin-top: var(--vui-space-3) !important; }
.vui-mb-3 { margin-bottom: var(--vui-space-3) !important; }
/* ================================
ACCESSIBILITY - Focus Indicators
================================ */
:focus-visible {
outline: 2px solid var(--vui-color-primary);
outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--vui-color-primary);
outline-offset: 2px;
}
.vui-btn:focus-visible {
outline: 2px solid var(--vui-color-primary);
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(var(--vui-color-primary-rgb, 181, 156, 88), 0.2);
}
/* ================================
LANGUAGE TOGGLE BUTTON
Flag icons for language switching
================================ */
.vui-lang-btn {
position: relative;
overflow: hidden;
}
.vui-lang-btn .flag-icon {
display: none;
width: 24px;
height: 18px;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
object-fit: cover;
}
.vui-lang-btn .flag-icon.active {
display: block;
}
/* Hover effect */
.vui-lang-btn:hover .flag-icon {
transform: scale(1.1);
}
}
/* components/pdf-modal.css */
/* © 2024-2026 Mehdi TMIMI — Vivace Music (vivace-music.org) */
/**
* PDF Download Modal Styles
*
* Modal for selecting and downloading PDF scores.
*/
@layer components {
/* Modal Overlay */
.vui-pdf-modal {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.vui-pdf-modal.open {
opacity: 1;
visibility: visible;
}
/* Modal Content */
.vui-pdf-modal__content {
background: var(--vui-color-surface-elevated);
border-radius: var(--vui-radius-xl);
box-shadow: var(--vui-shadow-xl);
width: 90%;
max-width: 420px;
max-height: 80vh;
overflow: hidden;
transform: scale(0.9) translateY(20px);
transition: transform 0.3s ease;
}
.vui-pdf-modal.open .vui-pdf-modal__content {
transform: scale(1) translateY(0);
}
/* Modal Header */
.vui-pdf-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--vui-space-4) var(--vui-space-5);
border-bottom: 1px solid var(--vui-color-border);
background: var(--vui-color-surface);
}
.vui-pdf-modal__title {
display: flex;
align-items: center;
gap: var(--vui-space-3);
font-size: 1.1rem;
font-weight: 600;
color: var(--vui-color-text);
margin: 0;
}
.vui-pdf-modal__title i {
color: var(--vui-color-primary);
}
/* Close Button */
.vui-pdf-modal__close {
background: none;
border: none;
width: 32px;
height: 32px;
border-radius: var(--vui-radius-full);
display: flex;
align-items: center;
justify-content: center;
color: var(--vui-color-text-muted);
cursor: pointer;
transition: all 0.2s ease;
}
.vui-pdf-modal__close:hover {
background: var(--vui-color-surface-sunken);
color: var(--vui-color-text);
}
/* Modal Body */
.vui-pdf-modal__body {
padding: var(--vui-space-4) var(--vui-space-5);
max-height: 60vh;
overflow-y: auto;
}
.vui-pdf-modal__subtitle {
font-size: 0.9rem;
color: var(--vui-color-text-muted);
margin: 0 0 var(--vui-space-4) 0;
text-align: center;
}
/* PDF List */
.vui-pdf-modal__list {
display: flex;
flex-direction: column;
gap: var(--vui-space-2);
}
/* PDF Item */
.vui-pdf-item {
display: flex;
align-items: center;
gap: var(--vui-space-3);
padding: var(--vui-space-3) var(--vui-space-4);
background: var(--vui-color-surface);
border: 1px solid var(--vui-color-border);
border-radius: var(--vui-radius-lg);
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
color: var(--vui-color-text);
}
.vui-pdf-item:hover {
background: var(--vui-color-surface-elevated);
border-color: var(--vui-color-primary);
transform: translateX(-4px);
}
[dir="ltr"] .vui-pdf-item:hover {
transform: translateX(4px);
}
/* PDF Item Icon */
.vui-pdf-item__icon {
width: 40px;
height: 40px;
border-radius: var(--vui-radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
flex-shrink: 0;
}
.vui-pdf-item--tutti .vui-pdf-item__icon {
background: linear-gradient(135deg, var(--vui-color-primary) 0%, var(--vui-color-primary-hover) 100%);
color: white;
}
.vui-pdf-item--instrument .vui-pdf-item__icon {
background: var(--vui-color-surface-sunken);
}
/* PDF Item Info */
.vui-pdf-item__info {
flex: 1;
min-width: 0;
}
.vui-pdf-item__name {
font-weight: 600;
font-size: 0.95rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vui-pdf-item__desc {
font-size: 0.8rem;
color: var(--vui-color-text-muted);
margin-top: 2px;
}
/* Download Icon */
.vui-pdf-item__download {
color: var(--vui-color-primary);
font-size: 1.1rem;
}
} /* end @layer components */
/* player/player.css */
/* © 2024-2026 Mehdi TMIMI — Vivace Music (vivace-music.org)
*
* player.css — layout for the player shell
* Extracted from player-demo.html so every player page loads it from one
* cached URL instead of carrying its own copy (4 KB x 3,652 pages).
* Edit here; the pages pick it up on the next build.
*/
/* ========================================
DEMO-SPECIFIC STYLES
Only page-specific overrides. All component
styles are in module CSS files.
======================================== */
/* Dragging across the score set a loop AND selected the engraving text
("Piano", bar numbers) in blue. A score is not a text document. */
#notation-container, #notation-container svg {
-webkit-user-select: none;
user-select: none;
}
/* The score surface is always paper with black ink, in dark mode too:
re-inking it light-on-dark made dense piano writing, beams and lyrics
hard to read. Dark mode only dims the paper slightly to cut the glare. */
#notation-container {
background: var(--vui-score-paper, #fffcf8) !important;
}
[data-vui-mode="dark"] #notation-container {
--vui-score-paper: #efe9df;
}
/* Placeholder for notation area before load */
.demo-notation-placeholder {
width: 100%;
max-width: 900px;
aspect-ratio: 16 / 9;
background: linear-gradient(135deg, var(--vui-color-surface-sunken), var(--vui-color-surface-elevated));
border: 2px dashed var(--vui-color-border);
border-radius: var(--vui-radius-lg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--vui-space-4);
color: var(--vui-color-text-muted);
}
.demo-notation-placeholder i {
font-size: 4rem;
opacity: 0.5;
}
/* ── PDF download ──
Was a pulsing red gradient: red reads as destructive, it shouted louder
than Play, and the 3 s scale animation never stopped. Brand pink, still
clearly the secondary action next to the transport. */
#downloadPDF {
background: var(--vui-color-primary) !important;
border: none !important;
color: #fff !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
position: relative;
}
#downloadPDF:hover {
transform: translateY(-1px) !important;
filter: brightness(1.08);
box-shadow: 0 6px 16px rgba(0, 0, 0, .22) !important;
}
#downloadPDF:active { transform: translateY(0) !important; }
#downloadPDF i { color: #fff !important; }
/* Mobile PDF button */
#mobilePdfBtn {
background: var(--vui-color-primary) !important;
color: #fff !important;
border-radius: 10px;
font-weight: 600;
}
#mobilePdfBtn i {
color: #fff !important;
}
/* Mobile PDF button (in header, next to theme/language) */
.vui-mobile-pdf-btn {
background: var(--vui-color-primary) !important;
color: #fff !important;
border-radius: 50% !important;
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
display: none; /* Hidden on desktop, shown by mobile media query */
}
.vui-mobile-pdf-btn i {
color: #fff !important;
font-size: 0.85rem;
}
/* Mobile studio toggle - animated glow to attract attention */
@keyframes studioGlow {
0%, 100% { box-shadow: 0 0 0 0 transparent; }
50% { box-shadow: 0 0 12px 3px var(--vui-color-primary-muted, rgba(139, 92, 246, 0.35)); }
}
.vui-mobile-studio-btn {
position: relative;
border: 1.5px solid var(--vui-color-primary, #8b5cf6) !important;
color: var(--vui-color-primary, #8b5cf6) !important;
}
.vui-mobile-studio-btn i {
color: var(--vui-color-primary, #8b5cf6) !important;
}
/* While the sound samples load, the score is already readable and the
transport says so instead of pretending to be dead. */
body[data-audio-arming] #playBtn,
body[data-audio-arming] #mobilePlayBtn {
opacity: .55;
cursor: progress;
position: relative;
}
body[data-audio-arming] #playBtn::after,
body[data-audio-arming] #mobilePlayBtn::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px solid transparent;
border-top-color: currentColor;
animation: vuiArming .9s linear infinite;
}
@keyframes vuiArming { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
body[data-audio-arming] #playBtn::after,
body[data-audio-arming] #mobilePlayBtn::after { animation: none; }
}
/* On a 1920 screen the score stretched edge to edge, which made the staves
SMALLER the wider the display got (about 16 bars per system). Cap the
reading width like any other long-form content. */
@media (min-width: 1500px) {
#notation-container,
.vui-player__controls > .vui-controls-inner,
.vui-player__header > .vui-header-inner {
max-width: 1320px;
margin-inline: auto;
}
}
/* The shortcuts list overflowed the viewport with no way to scroll. */
.vui-shortcuts-modal__content {
max-height: min(80vh, 640px);
overflow: auto;
overscroll-behavior: contain;
}
/* Tempo stepper on the control bar */
.vui-tempo-badge { gap: 6px; }
.vui-tempo-badge__step {
width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer;
background: var(--vui-color-primary-muted); color: var(--vui-color-primary);
font: 700 16px/1 inherit; display: inline-grid; place-items: center; padding: 0;
}
.vui-tempo-badge__step:hover { background: var(--vui-color-primary); color: #fff; }
.vui-tempo-badge__step:focus-visible { outline: 2px solid var(--vui-color-focus); outline-offset: 2px; }
@media (pointer: coarse) { .vui-tempo-badge__step { width: 36px; height: 36px; } }
/* Phone held sideways (844x390): the tablet layout wrapped the controls into
three rows and, with the header, left about 90 px for the score. Short,
wide screens get one slim header line and one row of controls; zoom,
volume and the two dividers go (pinch-zoom and the phone's own volume
keys do those jobs). */
@media (max-height: 500px) and (min-width: 568px) {
.vui-player__header { padding-block: 6px; gap: 10px; }
.vui-player__header .vui-btn,
.vui-player__header button { min-height: 34px; }
.vui-player__song-title {
font-size: 1rem; line-height: 1.25; margin: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vui-player__song-composer { display: none; }
.vui-player__song-info { min-width: 0; }
.vui-player__controls { padding: 4px 12px; }
.vui-controls-desktop .vui-controls-seek { margin-bottom: 2px; }
.vui-controls-main { flex-wrap: nowrap; gap: 8px; }
.vui-controls-center { order: 0; flex-basis: auto; gap: 6px; }
.vui-controls-left, .vui-controls-right { flex: 0 1 auto; gap: 6px; }
.vui-controls-left > .vui-btn-group:first-child,
.vui-volume-inline,
.vui-controls-main .vui-controls-divider { display: none; }
.vui-play-btn { width: 44px; height: 44px; }
.vui-controls-center .vui-btn--icon:not(.vui-play-btn) { width: 36px; height: 36px; }
.vui-tempo-badge__unit { display: none; }
}
/* Studio mode hides the header (studio-mode.css), but that rule sits in the
"utilities" layer, which the "layouts" layer's display:flex outranks: the
header stayed as a 33 px strip with the title cut in half. Unlayered
styles win over every layer. The exit button floats over the score. */
.vui-studio-mode .vui-player__header { display: none; }