66 lines
1.5 KiB
CSS
66 lines
1.5 KiB
CSS
/* ── App shell ────────────────────────────────────────────────────────────── */
|
|
.app-layout {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
padding: 8px;
|
|
gap: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.app-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.app-video {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.app-video video {
|
|
width: 100%;
|
|
max-height: 55vh;
|
|
background: #000;
|
|
display: block;
|
|
}
|
|
|
|
/* ── Controls row ─────────────────────────────────────────────────────────── */
|
|
.controls-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 16px;
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.control-panel {
|
|
min-width: 160px;
|
|
}
|
|
|
|
/* ── Mobile ───────────────────────────────────────────────────────────────── */
|
|
@media (max-width: 640px) {
|
|
.app-layout {
|
|
height: auto;
|
|
min-height: 100dvh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.app-video video {
|
|
max-height: 52vw; /* landscape-ish crop on portrait phone */
|
|
}
|
|
|
|
.controls-row {
|
|
flex-direction: column;
|
|
flex: none;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.control-panel {
|
|
width: 100%;
|
|
min-width: unset;
|
|
}
|
|
}
|