at2-webapp-dicta2stream/static/desktop.css

/* 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;
  }
}