/**
* Layout Mode B: Viewport-Full
*
* Für Playground-Seiten mit Toolbar + voller Visualisierungsfläche.
* Optional: seitlicher Parameter-Panel.
*
* Aktivierung:
*
* Struktur:
*
*
*
* -> mobile-only
*
*
* Breakpoints:
* Desktop (>1024px) — Toolbar + Body (Canvas + 280px Panel)
* Tablet (768–1024px) — Panel unterhalb Canvas (max 200px)
* Phone (<768px) — Panel als Bottom-Sheet, FAB-Button
*
* Kompatible Legacy-Klassen (unter .viewport-full scope):
* .viz-toolbar → __toolbar
* .lab-toolbar → __toolbar
* .viz-container → __canvas
* .split-container → __body
* .lab-grid → __body
*
* @version 1.0
* @see docs/conventions/UI_STYLE_PLAN.md
*/
/* =========================================
1. BASE LAYOUT (Desktop)
========================================= */
.viewport-full {
display: flex;
flex-direction: column;
height: 100dvh;
height: 100vh; /* Fallback */
overflow: hidden;
margin: 0;
}
/* --- Dark Toolbars (nav-header dunkle Leiste, lab-toolbar) --- */
.viewport-full__toolbar,
.viewport-full .lab-toolbar,
.viewport-full .nav-header {
flex-shrink: 0;
height: 50px;
display: flex;
align-items: center;
padding: 0 var(--space-md, 1rem);
gap: var(--space-sm, 0.5rem);
background: var(--color-sidebar-header, #34495e);
color: white;
z-index: 20;
}
.viewport-full__toolbar {
flex-wrap: wrap;
min-height: 50px;
height: auto;
}
/* --- White viz-toolbar (Control-Leiste unter nav-header) ---
Farbe + Hintergrund werden von viz-playground.css oder tree-viz.css
gesetzt; hier nur Layout-Basisregeln. */
.viewport-full .viz-toolbar {
flex-shrink: 0;
height: auto;
min-height: 50px;
display: flex;
align-items: center;
flex-wrap: wrap;
padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
gap: var(--space-sm, 0.5rem);
z-index: 20;
overflow: visible;
}
/* --- Body (Canvas + optional Panel) --- */
.viewport-full__body,
.viewport-full .split-container,
.viewport-full .lab-grid {
flex: 1;
display: flex;
flex-direction: row;
overflow: hidden;
min-height: 0;
}
/* --- Main Canvas Area --- */
.viewport-full__canvas,
.viewport-full .viz-container,
.viewport-full .tree-pane {
flex: 1;
min-width: 0;
overflow: hidden;
position: relative;
}
/* --- Optional Side Panel --- */
.viewport-full__panel,
.viewport-full .board-pane {
width: 280px;
flex-shrink: 0;
overflow-y: auto;
background: var(--color-surface, #ffffff);
border-left: 1px solid var(--color-border, #ddd);
padding: var(--space-md, 1rem);
transition: width 0.3s ease;
}
/* --- FAB Button (hidden by default) --- */
.viewport-full__fab {
display: none;
position: fixed;
bottom: var(--space-lg, 1.5rem);
right: var(--space-lg, 1.5rem);
width: 56px;
height: 56px;
border-radius: 50%;
border: none;
background: var(--color-primary, #3498db);
color: white;
font-size: 1.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
cursor: pointer;
z-index: 80;
transition: transform 0.2s ease, box-shadow 0.2s ease;
align-items: center;
justify-content: center;
}
.viewport-full__fab:active {
transform: scale(0.92);
}
/* =========================================
2. 3-COLUMN LAB LAYOUT (Arena, Rules-Lab)
Erweiterung für bestehende .lab-grid Seiten.
========================================= */
.viewport-full .lab-grid {
gap: var(--space-md, 1rem);
padding: var(--space-sm, 0.5rem);
}
.viewport-full .col-tree {
flex: 1;
min-width: 0;
overflow: hidden;
}
.viewport-full .col-game {
flex-shrink: 0;
overflow-y: auto;
}
/* =========================================
3. TABLET (768px – 1024px)
========================================= */
@media (max-width: 1024px) {
/* Toolbar wrapping */
.viewport-full__toolbar,
.viewport-full .viz-toolbar,
.viewport-full .lab-toolbar {
flex-wrap: wrap;
height: auto;
min-height: 50px;
padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
gap: var(--space-xs, 0.25rem);
}
/* Panel unter Canvas statt rechts daneben */
.viewport-full__body {
flex-direction: column;
}
.viewport-full__panel {
width: 100%;
max-height: 200px;
border-left: none;
border-top: 1px solid var(--color-border, #ddd);
}
/* Board pane in split layouts => narrower */
.viewport-full .board-pane {
width: 320px;
}
/* 3-column labs: center column narrower */
.viewport-full .col-game {
flex-shrink: 1;
min-width: 200px;
}
}
/* =========================================
4. PHONE (<768px)
========================================= */
@media (max-width: 768px) {
/* Toolbar kompakter */
.viewport-full__toolbar,
.viewport-full .viz-toolbar,
.viewport-full .lab-toolbar {
font-size: var(--font-size-xs, 0.75rem);
padding: var(--space-xs, 0.25rem);
}
/* Body wird column */
.viewport-full__body,
.viewport-full .split-container,
.viewport-full .lab-grid {
flex-direction: column;
}
/* Canvas bekommt vollen Platz */
.viewport-full__canvas,
.viewport-full .viz-container,
.viewport-full .tree-pane {
flex: 1;
width: 100%;
}
/* Panel wird Bottom-Sheet */
.viewport-full__panel {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100% !important;
max-height: 50vh;
border-top: 1px solid var(--color-border, #ddd);
border-left: none;
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;
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));
transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.viewport-full__panel.open {
transform: translateY(0);
}
/* Board-Pane in split layouts → unterhalb Canvas */
.viewport-full .board-pane {
width: 100%;
max-height: 40vh;
overflow-y: auto;
border-left: none;
border-top: 1px solid var(--color-border, #ddd);
}
/* FAB anzeigen wenn Panel vorhanden */
.viewport-full__fab {
display: flex;
}
/* 3-column Labs */
.viewport-full .lab-grid {
gap: var(--space-xs, 0.25rem);
}
.viewport-full .col-tree {
max-height: 30vh;
overflow-y: auto;
}
.viewport-full .col-game {
order: -1; /* Game-Canvas oben */
width: 100%;
}
/* Backdrop-filter Fallback */
@supports not (backdrop-filter: blur(1px)) {
.viewport-full__panel {
background: rgba(255, 255, 255, 0.97);
}
}
}
/* =========================================
5. VERY SMALL PHONES (<480px)
========================================= */
@media (max-width: 480px) {
/* Toolbar-Gruppen umbrechen */
.viewport-full .toolbar-group,
.viewport-full .viz-control-group {
flex-wrap: wrap;
gap: 2px;
}
.viewport-full .toolbar-group label,
.viewport-full .viz-control-group .viz-label {
font-size: var(--font-size-xs, 0.75rem);
}
/* Touch-targets für Toolbar-Buttons */
.viewport-full .viz-btn,
.viewport-full .toolbar-group button {
min-height: var(--touch-target-min, 44px);
min-width: var(--touch-target-min, 44px);
padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
}
}