/* This allows the JS to smoothly transition the background color of the canvas */ #tuner-canvas { transition: background-color 0.3s ease; } /* These classes are added/removed by main.js to indicate microphone status */ .status-indicator-off { background-color: #475569; /* Tailwind slate-600 */ } .status-indicator-on { background-color: #10b981; /* Tailwind emerald-500 */ /* Add a subtle glow when active */ box-shadow: 0 0 8px #10b981; } /* The .hidden class is toggled by JS. Tailwind also has a 'hidden' class, but defining it here ensures it's available and avoids any potential conflicts. */ .hidden { display: none; } /* Set the base background for the entire page on the element. This is what the browser uses to color the "safe areas" (like the gesture bar area) when using `viewport-fit=cover`. It is the fallback if the theme-color meta tag is not respected. */ html { background-color: #0f172a; /* Tailwind's slate-900 */ } /* Enhanced full-height coverage for PWA */ html, body { height: 100%; min-height: 100dvh; margin: 0; padding: 0; /* Ensure no scrolling */ overflow: hidden; } /* Additional PWA-specific styling */ body { /* Prevent bounce scroll on iOS */ overscroll-behavior: none; /* Prevent zoom on double tap */ touch-action: manipulation; /* Ensure consistent background on all devices */ background-attachment: fixed; } /* Make sure the main container fills the entire viewport */ main { /* Ensure full viewport coverage */ min-height: 100dvh; } /* Android PWA specific fixes */ @media (display-mode: standalone) { body { /* Ensure background extends to navigation bar area */ background-color: #0f172a; /* This is now inherited from html, but being explicit is okay */ /* Prevent any gaps */ padding: 0; margin: 0; } /* Make sure overlay covers everything in PWA mode */ #start-overlay { /* Ensure overlay covers status bar and navigation areas */ top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(15, 23, 42, 0.8); } } /* Specific fix for Android gesture navigation */ @supports (padding: env(safe-area-inset-bottom)) { body { /* Ensure background extends into safe areas */ padding-bottom: env(safe-area-inset-bottom); background-color: #0f172a; } }