/* Desktop-specific styles for screens 960px and wider */ @media (min-width: 960px) { :root { --content-max-width: 800px; --content-padding: 1.25rem; --section-spacing: 1.5rem; } html { background-color: #111 !important; background-image: repeating-linear-gradient( 45deg, rgba(188, 183, 107, 0.1) 0, rgba(188, 183, 107, 0.1) 1px, transparent 1px, transparent 20px ), repeating-linear-gradient( -45deg, rgba(188, 183, 107, 0.1) 0, rgba(188, 183, 107, 0.1) 1px, transparent 1px, transparent 20px ) !important; background-size: 40px 40px !important; background-repeat: repeat !important; background-attachment: fixed !important; min-height: 100% !important; } body { background: transparent !important; min-height: 100vh !important; display: flex; flex-direction: column; } /* Main content container */ main { flex: 1; width: 100%; max-width: var(--content-max-width); margin: 0 auto; padding: 0 var(--content-padding); box-sizing: border-box; } /* Ensure h2 in legal pages matches other pages */ #privacy-page > article > h2:first-child, #imprint-page > article > h2:first-child { margin-top: 0; padding-top: 0; } /* Streams Page Specific Styles */ #streams-page section { width: 100%; max-width: var(--content-max-width); margin: 0 auto; padding: 2rem; box-sizing: border-box; } .stream-card { margin-bottom: 1rem; background: var(--surface); border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); transition: transform 0.2s ease, box-shadow 0.2s ease; } .stream-card:last-child { margin-bottom: 0; } .stream-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .stream-card .card-content { padding: 1.25rem 1.5rem; } /* Section styles */ section { width: 100%; max-width: var(--content-max-width); margin: 0 auto var(--section-spacing); background: rgba(26, 26, 26, 0.9); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 2rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); transition: transform 0.2s ease, box-shadow 0.2s ease; box-sizing: border-box; } section:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); } /* Navigation */ nav.dashboard-nav { padding: 1rem 0; margin-bottom: 2rem; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px); display: block; } /* Desktop navigation visibility */ nav.dashboard-nav { display: block; } /* Show desktop navigation */ section#links { display: block; } /* Hide mobile navigation elements */ #burger-label, #burger-toggle { display: none !important; } /* Dashboard navigation */ #guest-dashboard, #user-dashboard { display: flex; gap: 1rem; } nav.dashboard-nav a { padding: 0.5rem 1rem; margin: 0 0.5em; border-radius: 4px; transition: background-color 0.2s ease; } nav.dashboard-nav a:hover { background-color: rgba(255, 255, 255, 0.1); } /* Form elements */ input[type="email"], input[type="text"], input[type="password"] { width: 100%; max-width: 400px; padding: 0.75rem; margin: 0.5rem 0; border: 1px solid #444; border-radius: 4px; background: #2a2a2a; color: #f0f0f0; } /* Buttons */ button, .button { padding: 0.75rem 1.5rem; border: none; border-radius: 4px; background: #4a6fa5; color: white; cursor: pointer; transition: background-color 0.2s ease; } button:hover, .button:hover { background: #5a8ad4; } /* Global article styles */ main > section > article, #stream-page > article, #stream-page #stream-list > li .stream-player { max-width: 600px; margin: 2em auto 2em auto; padding: 2em; background: #1e1e1e; border: 1px solid #333; border-radius: 8px; transition: all 0.2s ease; box-sizing: border-box; } /* Add top margin to all stream players except the first one */ #stream-page #stream-list > li:not(:first-child) .stream-player { margin-top: 2px; } /* Stream player styles */ #stream-page #stream-list > li { list-style: none; margin: 0; padding: 0; border: none; background: transparent; } #stream-page #stream-list { padding: 0; margin: 0 auto; max-width: 600px; width: 100%; } /* Stream player specific overrides can be added here if needed in the future */ /* Hover states moved to style.css for consistency */ /* Stream list desktop styles */ #stream-list { max-width: 600px; margin: 0 auto; } /* User upload area - matches article styling */ #user-upload-area { max-width: 600px; width: 100%; margin: 2rem auto; box-sizing: border-box; } }