132 lines
3.1 KiB
CSS
132 lines
3.1 KiB
CSS
/*
|
|
* static/css/layout.css
|
|
* Page-level layout: header, main grid, panels.
|
|
*/
|
|
|
|
/* ── Page structure ─────────────────────────────────────────────────────── */
|
|
|
|
.page-header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
background: var(--bg-void);
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
padding: 0 var(--space-6);
|
|
height: 56px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-4);
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
|
|
.header-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.header-brand-name {
|
|
font-size: var(--text-lg);
|
|
font-weight: 800;
|
|
letter-spacing: -0.02em;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.header-brand-name span {
|
|
color: var(--cyan);
|
|
}
|
|
|
|
.header-indicators {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-5);
|
|
}
|
|
|
|
/* ── Main layout ────────────────────────────────────────────────────────── */
|
|
|
|
.page-main {
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
padding: var(--space-8) var(--space-6) var(--space-12);
|
|
display: grid;
|
|
grid-template-columns: 1fr 320px;
|
|
grid-template-rows: auto;
|
|
gap: var(--space-6);
|
|
grid-template-areas:
|
|
"composer sidebar"
|
|
"queue sidebar"
|
|
"history sidebar";
|
|
}
|
|
|
|
.area-composer { grid-area: composer; }
|
|
.area-queue { grid-area: queue; }
|
|
.area-history { grid-area: history; }
|
|
.area-sidebar { grid-area: sidebar; display: flex; flex-direction: column; gap: var(--space-4); }
|
|
|
|
/* ── Panel container ─────────────────────────────────────────────────────── */
|
|
|
|
.panel {
|
|
background: var(--bg-raised);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.panel-header {
|
|
padding: var(--space-4) var(--space-5);
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.panel-title {
|
|
font-size: var(--text-xs);
|
|
font-weight: 700;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--text-secondary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.panel-body {
|
|
padding: var(--space-5);
|
|
}
|
|
|
|
.panel-body--flush {
|
|
padding: 0;
|
|
}
|
|
|
|
/* ── Responsive ──────────────────────────────────────────────────────────── */
|
|
|
|
@media (max-width: 900px) {
|
|
.page-main {
|
|
grid-template-columns: 1fr;
|
|
grid-template-areas:
|
|
"sidebar"
|
|
"composer"
|
|
"queue"
|
|
"history";
|
|
}
|
|
|
|
.area-sidebar {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.area-sidebar > .panel {
|
|
flex: 1 1 260px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
.page-header { padding: 0 var(--space-4); }
|
|
.page-main { padding: var(--space-5) var(--space-4) var(--space-10); gap: var(--space-4); }
|
|
}
|
|
|