init

2026-03-27 03:58:57 +08:00
commit 86eba27a24
38 changed files with 4074 additions and 0 deletions
--- a/static/css/layout.css
+++ b/static/css/layout.css
@@ -0,0 +1,131 @@
+/*
+ * 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); }
+}
+