main { display: flex; flex-direction: column; align-items: center; /* centers children horizontally */ } /* Global section styles */ main > section { width: 100%; max-width: 100%; margin: 0 0 1.5rem 0; padding: 0; /* Remove padding from section, will be handled by inner elements */ box-sizing: border-box; background: var(--crt-screen, #1a1a1a); border-radius: 8px; overflow: hidden; /* Ensures border-radius clips child elements */ } /* Ensure consistent background for all sections */ #welcome-page, #register-page, #stream-page, #me-page, #terms-page, #privacy-page, #imprint-page { background: var(--crt-screen, #1a1a1a); } /* Style articles within sections */ section > article { background: transparent; padding: 0; margin: 0 auto; box-shadow: none; color: #f0f0f0; max-width: 400px; width: 100%; padding: 2rem 1rem; box-sizing: border-box; } /* Center the register form */ #register-form { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-width: 300px; margin: 0 auto; } #register-form p { margin: 0.5rem 0; width: 100%; } #register-form label { display: block; margin-bottom: 0.5rem; } #register-form input[type="email"], #register-form input[type="text"] { width: 100%; padding: 0.5rem; box-sizing: border-box; } #register-form button[type="submit"] { margin-top: 1rem; width: calc(250px + 1.6em); padding: 0.75rem; cursor: pointer; max-width: 100%; box-sizing: border-box; } /* Style text inputs in register form */ #register-page #register-form input[type="email"], #register-page #register-form input[type="text"] { width: calc(250px + 1.6em); max-width: 100%; box-sizing: border-box; } /* Add subtle dividers between sections */ section + section, article + article { border-top: 1px solid #444; } nav#guest-dashboard.dashboard-nav { width: fit-content; /* optional: shrink to fit content */ margin: 0 auto; /* fallback for block centering */ } /* Toast notification styles */ .toast-container { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 10000; display: flex; flex-direction: column; align-items: center; pointer-events: none; min-width: 300px; max-width: 90%; } .toast { background: rgba(30, 30, 30, 0.95); color: #fff; padding: 1.2em 2em; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1); margin-top: 0.8em; opacity: 0; animation: fadeInOut 3.5s both; font-size: 1.1em; pointer-events: auto; border: 1px solid rgba(255, 255, 255, 0.1); text-align: center; line-height: 1.5; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); transform: translateZ(0); will-change: transform, opacity; } @keyframes fadeInOut { 0% { opacity: 0; transform: translateY(40px) scale(0.96); } 10% { opacity: 1; transform: translateY(0) scale(1); } 90% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(40px) scale(0.96); } } .spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 1.2em; pointer-events: none; /* allow clicks through except for children */ } .spinner > * { pointer-events: auto; } .quota-meter { font-size: 0.9em; margin-top: 0.5em; color: #555; } .footer-hint { font-size: 0.9em; opacity: 0.7; } .cancel-upload { display: none; margin-top: 0.4em; font-size: 0.95em; background: #b22222; color: white; border: none; padding: 0.5em 1.2em; border-radius: 4px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.08); transition: background 0.2s; } .cancel-upload:hover { background: #e74c3c; } .delete-account { margin-top: 1em; background: #ccc; color: black; padding: 0.4em 1em; border-radius: 5px; font-size: 0.9em; border: none; cursor: pointer; } .me-url { width: 100%; font-family: monospace; margin: 0.5em 0; padding: 0.4em; border: 1px solid #ccc; border-radius: 4px; background: #f9f9f9; } button.logout { display: block; margin: 1em auto; padding: 0.4em 1.2em; background: #eee; border: 1px solid #ccc; border-radius: 6px; font-size: 0.95em; cursor: pointer; transition: background 0.2s ease; } button.logout:hover { background: #ddd; } audio { display: block; margin: 0; max-width: 100%; outline: none; border-radius: 6px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); background: #fff; } /* Audio controls base styles */ .audio-controls { display: flex; justify-content: center; align-items: center; gap: 1.5rem; padding: 0; width: 100%; } /* Specific styles for play/pause button in me-page */ #me-page .audio-controls button { border: 2px solid #444; /* Default border color */ transition: all 0.2s ease; } #me-page .audio-controls button:hover { background: #222; transform: scale(1.05); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); border-color: #666; } .audio-controls button { background: rgba(26, 26, 26, 0.9); border: 2px solid #444; border-radius: 12px; color: #f0f0f0; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; padding: 0; margin: 0.5rem; transition: all 0.2s ease; font-size: 1.5rem; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } /* Play/Pause button specific styles */ .audio-controls button#play-pause, .audio-controls button#play-pause-devuser { width: 80px; height: 80px; font-size: 3rem; background: rgba(34, 34, 34, 0.95); } /* Hover and active states */ .audio-controls button:hover { background: #222; transform: scale(1.05); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); border-color: #666; } .audio-controls button:active { transform: scale(0.98); } /* Ensure touch targets are large enough on mobile */ @media (max-width: 959px) { .audio-controls { gap: 1rem; } .audio-controls button { min-width: 64px; min-height: 64px; } .audio-controls button#play-pause, .audio-controls button#play-pause-devuser { min-width: 80px; min-height: 80px; } } .audio-controls button:active { transform: scale(0.98); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); background: #1a1a1a; } .audio-controls svg { width: 40px; height: 40px; fill: currentColor; transition: all 0.2s ease; } .audio-controls button#play-pause svg { width: 56px; height: 56px; } /* Hide the native controls */ audio::-webkit-media-controls-panel { display: none !important; } audio::-webkit-media-controls-play-button { display: none !important; } audio::-webkit-media-controls-volume-slider { display: none !important; } main > section { width: 100%; max-width: 900px; padding: 2em; background: #1a1a1a; border: 1px solid var(--audio-metal); border-radius: 8px; margin-bottom: 1.5em; color: var(--audio-text); text-shadow: 0 0 2px rgba(255, 102, 0, 0.2); position: relative; } main > section article::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(255, 102, 0, 0.03), rgba(255, 102, 0, 0.01)); pointer-events: none; z-index: -1; } main > section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(255, 102, 0, 0.05), rgba(255, 102, 0, 0.02)); pointer-events: none; z-index: -1; } /* Audio controls styling */ button.audio-control { background: #333; border: 2px solid #555; color: #fff; padding: 0.5em 1em; border-radius: 6px; cursor: pointer; transition: all 0.2s; font-family: 'Roboto', sans-serif; font-weight: 500; } #register-form { max-width: 400px; margin: 0 auto; text-align: center; } #register-form p { margin-bottom: 1em; text-align: left; } #register-form label { display: inline; margin-right: 10px; color: #d3d3d3; font-family: 'Courier New', monospace; } #register-form input[type="text"], #register-form input[type="email"], #register-form input[type="password"] { display: inline; background-color: rgb(26, 26, 26); border: 1px solid #444; color: #d3d3d3; padding: 0.8em; border-radius: 4px; width: 250px; transition: all 0.2s ease; } #register-form input[type="text"]:focus, #register-form input[type="email"]:focus, #register-form input[type="password"]:focus { outline: none; border-color: #ff6600; box-shadow: 0 0 0 2px rgba(255, 102, 0, 0.1); } /* Submit button styling */ #register-form button[type="submit"] { display: inline; width: calc(250px + 1.6em); padding: 0.8em; background: transparent; color: #d3d3d3; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; margin-top: 1.25em; transition: color 0.3s; font-family: 'Courier New', monospace; text-align: center; border: 1px solid #444; background: #1a1a1a; } #register-form button[type="submit"]:hover { color: #ff6600; } #register-form button[type="submit"]:active { transform: translateY(-1px); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); transform: translateY(0); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } button.audio-control:hover { background: #444; border-color: #666; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); } /* Audio meter styling */ .audio-meter { background: #333; border: 1px solid #555; height: 10px; border-radius: 5px; overflow: hidden; } .audio-meter-fill { background: linear-gradient(90deg, #ff6600, #ff8800); height: 100%; transition: width 0.3s ease-in-out; } /* Audio list styling */ .audio-list { list-style: none; padding: 0; margin: 0; background: #1a1a1a; border: 1px solid var(--audio-metal); border-radius: 8px; overflow: hidden; } #stream-list > li { background: #1a1a1a; } /* Stream player styling */ .stream-player { background: transparent; border: none; position: relative; overflow: hidden; } .stream-player::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(255, 102, 0, 0.03), rgba(255, 102, 0, 0.01)); pointer-events: none; z-index: -1; } .stream-player h3 { color: var(--audio-accent); margin: 0 0 1em 0; font-size: 1.1em; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; } .stream-player audio { width: 100%; max-width: 500px; margin: 1em 0; background: #1a1a1a; border: 1px solid #444; border-radius: 6px; } .stream-player audio { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #1a1a1a; border: none; border-radius: 6px; width: 100%; max-width: 500px; margin: 1em 0; padding: 0.5em; } /* Custom play button */ .stream-player audio::before { content: '▶️'; position: absolute; left: 0.5em; top: 50%; transform: translateY(-50%); color: #2e8b57; font-size: 1.5em; cursor: pointer; z-index: 1; } /* Custom progress bar */ .stream-player audio::-webkit-progress-bar { background: #444; border-radius: 3px; } .stream-player audio::-webkit-progress-value { background: linear-gradient(90deg, #ff6600, #ff8800); border-radius: 3px; } /* Custom volume slider */ .stream-player audio::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; background: #ff6600; border-radius: 50%; cursor: pointer; } .stream-player audio::-webkit-slider-runnable-track { height: 4px; background: #444; border-radius: 2px; } /* Guest login heading styling */ #guest-login h2 { color: var(--audio-accent); font-size: 1.1em; margin: 0.5em 0; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; text-align: center; display: inline-block; background: #2e8b57; color: white; padding: 0.4em 1em; border-radius: 5px; text-decoration: none; transition: background 0.2s ease; } #guest-login h2:hover { background: #256b45; } .audio-list li { background: #333; border: 1px solid #555; padding: 1em; margin-bottom: 0.5em; border-radius: 6px; transition: all 0.2s; } .audio-list li:hover { background: #444; border-color: #666; transform: translateY(-1px); } #me-wrap { background: #fdfdfd; padding: 1.5em; border: 1px solid #ddd; border-radius: 8px; margin: 2em auto; max-width: 600px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03); transition: opacity 0.6s ease; opacity: 1; } .hidden { display: none !important; } .button:focus { outline: 2px solid #00aaff; outline-offset: 2px; } #quota-bar[value="100"] { accent-color: #b22222; } #quota-bar[value="100"] + #quota-text::after { content: " (Full)"; color: #b22222; font-weight: bold; } input[disabled], button[disabled] { opacity: 0.5; cursor: not-allowed; } .uploading-toast { color: #1e90ff; background: #eaf4ff; border: 1px solid #b3daff; padding: 0.5em 1em; border-radius: 6px; font-size: 0.95em; animation: fadeIn 0.3s ease; display: inline-block; } .success-toast { color: #2e8b57; background: #e7f6ed; border: 1px solid #c2e3d3; padding: 0.5em 1em; border-radius: 6px; font-size: 0.95em; animation: fadeIn 0.3s ease; display: inline-block; } #stream-info, #stream-info * { display: initial !important; visibility: visible !important; color: #222 !important; background: #fff !important; } /* Base document styles */ html { height: 100%; min-height: 100%; margin: 0; padding: 0; background-color: #111; background-image: repeating-linear-gradient( 45deg, rgba(188, 183, 107, 0.1) 0, /* Olive color */ rgba(188, 183, 107, 0.1) 1px, transparent 1px, transparent 20px ), repeating-linear-gradient( -45deg, rgba(188, 183, 107, 0.1) 0, /* Olive color */ rgba(188, 183, 107, 0.1) 1px, transparent 1px, transparent 20px ); background-size: 40px 40px; background-repeat: repeat; background-attachment: fixed; } body { min-height: 100vh; margin: 0; padding: 0; display: flex; flex-direction: column; color: #f0f0f0; font-family: sans-serif; line-height: 1.6; background: transparent; } /* Ensure main content stretches to fill available space */ main { flex: 1 0 auto; width: 100%; max-width: 1200px; margin: 0 auto; padding: 1rem; box-sizing: border-box; } main > section { width: 100%; max-width: inherit; margin: 0 auto; box-sizing: border-box; background: var(--crt-screen, #1a1a1a); border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } section > article { background: transparent; padding: 0; margin: 0; box-shadow: none; } /* Fallback for browsers that don't support flexbox */ @supports not (display: flex) { html { background: #111; } body { min-height: 100%; } main { min-height: 100vh; } } header h1 { animation: slideDown 0.6s ease-out; } header h1::before { content: "🎙️ "; animation: pulse 1.2s ease-in-out infinite; } header p { animation: fadeIn 0.8s ease-out 0.3s both; } header, footer { text-align: center; } footer p { margin: 0.4em 0; font-size: 0.9em; opacity: 0.8; } .dropzone::before { animation: emojiBounce 0.6s ease-out; content: "📤 "; font-size: 1.2em; display: block; margin-bottom: 0.5em; } .dropzone { transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; border: 2px dashed #999; padding: 2em; text-align: center; cursor: pointer; } .dropzone.dragover { background: #e0f7ff; border-color: #00aaff; box-shadow: 0 0 0.4em rgba(0, 170, 255, 0.4); background: #f0f8ff; border-color: #00aaff; } .dropzone.pulse, .dropzone.pulse::before { box-shadow: 0 0 0.6em rgba(0, 170, 255, 0.6); animation: pulse 0.6s ease-in-out; } /* Reusable glowing pulse */ .pulse-glow { animation: pulse 0.4s ease-in-out; box-shadow: 0 0 0.6em rgba(0, 170, 255, 0.6); } @keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } #file-info { animation: fadeIn 0.4s ease; margin-top: 0.8em; font-size: 0.95em; text-align: center; color: #555; } .emoji-bounce { display: inline-block; animation: emojiBounce 0.6s ease-out; } @keyframes emojiBounce { 0% { transform: scale(1); } 30% { transform: scale(1.3); } 60% { transform: scale(0.95); } 100% { transform: scale(1); } } #spinner { border: 3px solid #eee; border-top: 3px solid #2e8b57; border-radius: 50%; width: 24px; height: 24px; animation: spin 1s linear infinite; margin: 0 auto 1em; display: none; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #status { animation: fadeIn 0.4s ease; margin: 1em auto; font-weight: bold; text-align: center; } #status:empty { display: none; } #status.success::before { content: "✅ "; } .error-toast { color: #b22222; background: #fcebea; border: 1px solid #f5c6cb; padding: 0.5em 1em; border-radius: 6px; font-size: 0.95em; animation: fadeIn 0.3s ease; display: inline-block; } #stream-info.fade-out { animation: fadeOut 0.3s ease forwards; } #stream-info { text-align: center; opacity: 0; transition: opacity 0.5s ease; } #stream-info.visible { animation: fadeIn 0.4s ease forwards; opacity: 1; } a.button.pulse-glow { animation: pulse 0.4s ease-in-out; } a.button::before { content: "🔗 "; margin-right: 0.3em; } a.button[aria-label] { position: relative; } a.button[aria-label]::after { content: attr(aria-label); position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); background: #333; color: #fff; font-size: 0.75em; padding: 0.3em 0.6em; border-radius: 4px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; margin-bottom: 0.4em; } a.button[aria-label]:hover::after { opacity: 1; } a.button { display: inline-block; background: #2e8b57; color: white; padding: 0.4em 1em; margin-top: 0.5em; border-radius: 4px; text-decoration: none; font-weight: bold; transition: background 0.2s ease; } a.button:hover { animation: pulse 0.4s ease-in-out; background: #256b45; } /* Stream page specific styles */ /* Article styles moved to desktop.css */ /* Specific styles for stream player */ section article.stream-page { max-width: 800px; margin: 0 auto; padding: 20px; } .stream-player { background: #1a1a1a; border: 1px solid #444; border-radius: 8px; position: relative; color: #d3d3d3; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .stream-player h3 { margin: 0 0 15px 0; color: #d3d3d3; } .stream-audio { width: 100%; margin-bottom: 15px; } /* Stream audio controls (specific to stream items) */ .stream-audio .audio-controls { margin: 0; padding: 0; gap: 1.5rem; } .stream-audio .audio-controls button { width: 64px; height: 64px; padding: 0; margin: 0; font-size: 3rem; background: none; border: none; box-shadow: none; color: #f0f0f0; display: flex; align-items: center; justify-content: center; min-width: auto; min-height: auto; } /* Play button styles are now consolidated above */ .stream-info { margin: 0; color: #666; font-size: 0.9em; } /* Stream list styles */ #stream-page article { background: transparent; border: none; border-radius: 0; box-shadow: none; } /* User upload area styles */ #user-upload-area { width: 100%; margin: 1.5rem auto; padding: 1.5rem; background: var(--crt-screen); border: 1px solid #444; border-radius: 8px; text-align: center; cursor: pointer; transition: all 0.2s ease; } #user-upload-area:hover { transform: translateY(-2px); background: linear-gradient(45deg, rgba(255, 102, 0, 0.05), rgba(255, 102, 0, 0.02)); border: 1px solid #ff6600; } #user-upload-area p { margin: 0; color: #ddd; font-size: 1.1rem; } #stream-list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 1.5rem; width: 100%; } #stream-list > li { background: #222; border: 1px solid #444; border-radius: 8px; overflow: hidden; transition: transform 0.2s ease, border-color 0.2s ease; margin: 0; width: 100%; box-sizing: border-box; } #stream-list > li:hover { transform: translateY(-2px); border-color: #ff6600; } .stream-player { width: 100%; box-sizing: border-box; background: #1e1e1e; border: 1px solid #2a2a2a; border-radius: 10px; transition: all 0.25s ease; } .stream-player:hover { transform: translateY(-2px); border-color: #ff6600; background: linear-gradient(45deg, rgba(255, 102, 0, 0.05), rgba(255, 102, 0, 0.02)); } .stream-player h3 { margin: 0 0 1.25rem; color: #fff; font-size: 1.3rem; font-weight: 500; text-align: center; word-break: break-word; letter-spacing: 0.3px; text-shadow: 0 1px 2px rgba(0,0,0,0.2); } .stream-info { margin: 1.25rem 0 0; color: #a0a0a0 !important; font-size: 0.9rem !important; text-align: center; line-height: 1.6; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* Stream list styles */ #stream-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; max-width: 800px; margin: 0 auto; } #stream-list li { background: transparent; margin: 0 0 1rem 0; padding: 0; transition: transform 0.2s ease; } #stream-list li:hover { transform: translateY(-2px); } #stream-list a { color: #4dabf7; text-decoration: none; font-weight: 500; transition: color 0.2s ease; } #stream-list a:hover { color: #74c0fc; text-decoration: underline; } #stream-list .stream-meta { display: block; color: #888; font-size: 0.85rem; margin-top: 0.5rem; } /* User upload area */ #user-upload-area { max-width: 600px; width: 100%; margin: 0 auto 1.5rem; padding: 1.5rem; background: var(--crt-screen, #1a1a1a); border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } /* Ensure consistent audio player container */ .stream-audio { width: 100%; margin: 1rem 0 0; } /* Style for the play button container */ .audio-controls-container { display: flex; justify-content: center; width: 100%; margin-top: 1rem; } /* Responsive adjustments */ @media (max-width: 767px) { #stream-page article { padding: 1rem; border: none; background: transparent; box-shadow: none; } #stream-list { gap: 1rem; } .stream-player { padding: 1rem; } } /* Section h2 headers */ main > section > h2 { text-align: center; margin: 0; padding: 1rem 1.5rem; color: #f0f0f0; font-size: 1.8rem; font-weight: 500; } /* Article styles consolidated above */ /* Stream page specific styles */ #stream-page > article { max-width: 1200px; /* Wider for the stream list */ padding: 2rem 1rem; /* Match padding of other sections */ margin: 0 auto; /* Ensure centering */ } /* Full width for form elements */ #register-page article, #me-page > article { max-width: 100%; } /* Add padding to the bottom of sections that only contain an h2 */ main > section:has(> h2:only-child) { padding-bottom: 1.5rem; } /* Space between h2 and logout button is now handled inline */ section article a[href^="mailto"]::before { content: "✉️ "; margin-right: 0.3em; } section article a[href^="mailto"] { display: inline-block; background: #2e8b57; color: white; padding: 0.3em 0.9em; margin-top: 0.5em; border-radius: 4px; text-decoration: none; font-weight: bold; transition: background 0.2s ease; } section article a[href^="mailto"]:hover { background: #256b45; } code { background: #1a1a1a; padding: 0.2em 0.4em; border-radius: 4px; font-family: 'Courier New', monospace; color: #fff; text-shadow: 0 0 4px rgba(0, 255, 0, 0.1); } :root { --audio-bg: #222; --audio-metal: #333; --audio-text: #fff; --audio-accent: #ff6600; --audio-shadow: rgba(0, 0, 0, 0.5); } body { margin: 0; font-family: 'Roboto', sans-serif; background-color: var(--audio-bg); color: var(--audio-text); line-height: 1.6; } body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, rgba(255, 102, 0, 0.05) 0%, rgba(255, 102, 0, 0) 20%); pointer-events: none; z-index: -1; } main { display: flex; flex-direction: column; align-items: center; max-width: 960px; width: 95%; margin: 0 auto; padding: 20px; background: var(--audio-bg); border: 2px solid var(--audio-metal); border-radius: 12px; box-shadow: 0 4px 15px var(--audio-shadow); } main::before { content: ''; position: absolute; top: 0; /* Removed olive gradient overlay */ display: none; } nav#guest-dashboard.dashboard-nav, nav#user-dashboard.dashboard-nav { width: fit-content; margin: 20px auto; padding: 10px; background: var(--crt-screen); border: 1px solid var(--crt-border); border-radius: 5px; font-family: 'Courier New', monospace; } /* Dashboard nav base styles (moved to desktop.css and mobile.css) */ nav.dashboard-nav a { color: #d3d3d3; text-decoration: none; font-family: 'Courier New', monospace; transition: color 0.2s ease; } nav.dashboard-nav a:hover { color: #ff6600; } /* Toast notification styles */ /* Footer links styling */ .footer-links { margin-top: 1em; font-size: 0.85em; } .footer-links a { color: #d3d3d3; text-decoration: none; font-family: 'Courier New', monospace; margin: 0 0.5em; } .footer-links a:hover { color: #ff6600; } footer p.footer-hint a { color: #d3d3d3; text-decoration: none; font-family: 'Courier New', monospace; margin: 0 0.5em; transition: color 0.3s; } footer p.footer-hint a:hover { color: #ff6600; } @media (min-width: 960px) { /* Set max-width for content sections */ #register-page > article, #me-page > article, #user-upload-area { max-width: 600px; padding: 2rem; margin-left: auto; margin-right: auto; } #stream-page > article { max-width: 600px; margin-left: auto; margin-right: auto; } section#links { display: flex; flex-direction: column; align-items: center; background: var(--crt-screen); padding: 1em; margin: 2em auto; border-radius: 6px; max-width: 600px; box-shadow: 0 2px 6px rgba(0, 170, 255, 0.1); } section#links p:first-child a, section#links p:nth-child(2) a { display: inline-block; background: #2e8b57; color: white; font-weight: bold; padding: 0.4em 1em; border-radius: 5px; text-decoration: none; transition: background 0.2s ease; margin-bottom: 0.8em; } section#links p:first-child a:hover, section#links p:nth-child(2) a:hover { background: #256b45; } } #burger-toggle { display: none; } #burger-label { display: none; position: absolute; top: 1em; right: 1em; cursor: pointer; z-index: 20; } #burger-label span { display: block; width: 25px; height: 3px; margin: 5px; background-color: #333; transition: all 0.3s ease; } @keyframes slideFadeIn { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes slideFadeOut { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-10px); } } /* Logout button styles */ .logout-btn { background: rgba(34, 34, 34, 0.95); color: #f0f0f0; border: 2px solid #444; border-radius: 6px; padding: 0.5em 1em; cursor: pointer; font-family: inherit; font-size: 1.2rem; transition: all 0.2s ease; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; text-transform: none; letter-spacing: normal; width: auto; height: auto; margin: 0; } .logout-btn:hover { background: #222; transform: scale(1.05); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); border-color: #666; } .logout-btn:active { transform: scale(0.98); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); }