/** * Layout Mode A: Viewport-Split * * Für Game-Seiten mit Sidebar + Canvas-Spielfläche. * Aktivierung: * * Breakpoints: * Desktop (>1024px) — Sidebar 320px links, Main flex:1 * Tablet (768–1024px) — Sidebar 280px links * Phone (<768px) — Sidebar wird Bottom-Sheet (48px collapsed) * * Funktioniert mit den bestehenden Klassen: * .sidebar, .sidebar-header, .sidebar-content, .game-area * * @version 1.0 * @see docs/conventions/UI_STYLE_PLAN.md */ /* ========================================= 1. BASE LAYOUT (Desktop) ========================================= */ .viewport-split { display: flex; height: 100dvh; height: 100vh; /* Fallback */ overflow: hidden; margin: 0; } .viewport-split .sidebar { width: var(--sidebar-width, 320px); flex-shrink: 0; display: flex; flex-direction: column; background: var(--color-surface, #ffffff); border-right: 1px solid var(--color-border, #ddd); z-index: 10; box-shadow: 2px 0 10px var(--color-shadow, rgba(0, 0, 0, 0.05)); transition: width 0.3s ease; } .viewport-split .sidebar-header { padding: var(--space-md, 1rem) var(--space-lg, 1.5rem); background: var(--color-sidebar-header, #34495e); color: white; flex-shrink: 0; } .viewport-split .sidebar-content { padding: var(--space-md, 1rem) var(--space-lg, 1.5rem); overflow-y: auto; flex-grow: 1; display: flex; flex-direction: column; gap: var(--space-md, 1rem); } .viewport-split .game-area { flex: 1; min-width: 0; /* Prevent flex overflow */ display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; overflow: hidden; } /* ========================================= 2. TABLET (768px – 1024px) ========================================= */ @media (max-width: 1024px) { .viewport-split .sidebar { width: 280px; } .viewport-split .sidebar-header { padding: var(--space-sm, 0.5rem) var(--space-md, 1rem); } .viewport-split .sidebar-content { padding: var(--space-sm, 0.5rem) var(--space-md, 1rem); gap: var(--space-sm, 0.5rem); } } /* ========================================= 3. PHONE (<768px) – Bottom Sheet ========================================= */ @media (max-width: 768px) { .viewport-split { flex-direction: column; } /* Game-Area bekommt den gesamten Viewport */ .viewport-split .game-area { flex: 1; width: 100%; order: -1; /* Canvas oben, Sidebar unten */ } /* Sidebar wird Bottom-Sheet */ .viewport-split .sidebar { position: fixed; bottom: 0; left: 0; right: 0; width: 100% !important; max-height: 50vh; border-right: none; border-top: 1px solid var(--color-border, #ddd); border-radius: var(--border-radius-lg, 8px) var(--border-radius-lg, 8px) 0 0; box-shadow: 0 -4px 16px var(--color-shadow, rgba(0, 0, 0, 0.1)); z-index: 100; /* Glass-UI */ background: var(--glass-bg, rgba(255, 255, 255, 0.92)); backdrop-filter: blur(var(--glass-blur, 10px)); -webkit-backdrop-filter: blur(var(--glass-blur, 10px)); /* Initial: collapsed, showing only drag handle */ transform: translateY(calc(100% - 48px)); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Expanded State */ .viewport-split .sidebar.open { transform: translateY(0); } /* Drag Handle */ .viewport-split .sidebar-header { position: relative; cursor: grab; padding: var(--space-lg, 1.5rem) var(--space-md, 1rem) var(--space-sm, 0.5rem); background: transparent; color: var(--color-text, #2c3e50); text-align: center; } .viewport-split .sidebar-header::before { content: ''; display: block; width: 40px; height: 4px; background: var(--color-border, #ccc); border-radius: 2px; margin: 0 auto var(--space-xs, 0.25rem); } .viewport-split .sidebar-header h2 { font-size: var(--font-size-sm, 0.85rem); margin: 0; } /* Sidebar-Content scrollbar */ .viewport-split .sidebar-content { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--space-xs, 0.25rem) var(--space-md, 1rem) var(--space-md, 1rem); } /* Buttons im Bottom-Sheet horizontal nebeneinander */ .viewport-split .sidebar-content .viz-btn { min-height: var(--touch-target-min, 44px); } /* Backdrop-filter Fallback */ @supports not (backdrop-filter: blur(1px)) { .viewport-split .sidebar { background: rgba(255, 255, 255, 0.97); } } } /* ========================================= 4. VERY SMALL PHONES (<480px) ========================================= */ @media (max-width: 480px) { .viewport-split .sidebar-header h2 { font-size: var(--font-size-xs, 0.75rem); } .viewport-split .sidebar-content { gap: var(--space-xs, 0.25rem); } /* Kompaktere Controls */ .viewport-split .control-section { padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem); } }