/* Mobile-specific styles for screens up to 959px */ @media (max-width: 959px) { /* Base layout adjustments */ html { height: 100%; min-height: 100%; margin: 0; padding: 0; } body { min-height: 100vh; margin: 0; padding: 0; display: flex; flex-direction: column; font-size: 16px; overflow-x: hidden; width: 100%; max-width: 100%; background: transparent !important; } main { padding: 0.5rem 1rem; margin: 0; width: 100%; max-width: 100%; box-sizing: border-box; box-shadow: none; border: none; background: none; } * { box-sizing: border-box; } header { padding: 0.5rem 1rem; } header h1 { font-size: 1.8rem; margin: 0.5rem 0; } header p { font-size: 1rem; margin: 0.25rem 0 1rem; } .dashboard-nav { width: 100%; padding: 0.5rem; box-sizing: border-box; text-align: center; font-size: 0.9rem; } .dashboard-nav a { padding: 0.5rem; margin: 0 0.25rem; display: inline-block; } main > section { width: 100%; max-width: 100%; padding: 1rem; box-sizing: border-box; } .btn { width: 100%; height: 48px; padding: 0.75rem 1rem; margin: 0.5rem 0; font-size: 1rem; box-sizing: border-box; } .audio-player { width: 100%; margin: 1rem 0; } .audio-controls { flex-direction: column; } .audio-controls button { margin: 0.25rem 0; } .dropzone { padding: 2rem; } #quota-meter { margin: 1rem 0; } .quota-meter { height: 20px; } .stream-item { padding: 0.75rem; } .modal-content { width: 90%; max-width: 90%; } footer { padding: 1rem; } .footer-hint { font-size: 0.9rem; } .desktop-only { display: none !important; } #burger-label { display: block; } section#links { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #1e1e1e; z-index: 1000; } #burger-toggle:checked + #burger-label + section#links { display: block; } /* Make sure all interactive elements are touch-friendly */ a, [role="button"], label, select, textarea { min-height: 44px; min-width: 44px; } .dropzone { padding: 1.5rem; margin: 1rem 0; } .dropzone p { font-size: 1rem; margin: 0.5rem 0; } /* Adjust header text for better mobile display */ header h1 { font-size: 1.5rem; } header p { font-size: 0.9rem; } .dashboard-nav { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; padding: 0.5rem 0; } .dashboard-nav::-webkit-scrollbar { display: none; } nav.dashboard-nav a { all: unset; display: inline-block; background-color: #1e1e1e; color: #fff; padding: 0.5rem 1rem; margin: 0 0.25rem; border-radius: 4px; font-size: 0.9rem; cursor: pointer; text-align: center; min-width: 100px; box-sizing: border-box; transition: background-color 0.2s; } .dashboard-nav a:active { background-color: #333; } /* Stream page specific styles */ #stream-page { padding: 0.5rem; } #stream-page h2 { font-size: 1.5rem; } #stream-page article { padding: 1rem; margin: 0.5rem 0; } #stream-list { padding: 0.5rem; } #stream-list li { margin-bottom: 1rem; } .stream-player { padding: 0.75rem; } .stream-player h3 { font-size: 1.1rem; } .stream-info { font-size: 0.9rem; } #stream-list > li { margin-bottom: 1.5rem; } /* User upload area */ #user-upload-area { margin: 1rem 0; padding: 1.5rem; text-align: center; cursor: pointer; border: 2px dashed #666; border-radius: 8px; } #user-upload-area p { margin: 0.5rem 0; } /* Stream player adjustments */ .stream-player { padding: 1rem; margin: 0.5rem 0; border: 1px solid #444; border-radius: 8px; background-color: #1e1e1e; } .stream-player h3 { margin: 0 0 0.5rem 0; font-size: 1.2rem; } .stream-info { font-size: 0.9rem; color: #aaa; margin-bottom: 0.5rem; } .stream-audio { width: 100%; } /* Form elements */ input[type="text"], input[type="email"], input[type="password"], textarea { width: 100%; padding: 0.75rem; margin: 0.5rem 0; font-size: 1rem; } /* Adjust audio element for mobile */ audio { width: 100% !important; max-width: 100% !important; } /* Toast notifications */ .toast { width: 90%; max-width: 100%; left: 5%; right: 5%; transform: none; margin: 0 auto; } }