G92 > send-to-ESP

public/allApps.css

@@ -0,0 +1,113 @@
+/* =========================================================
+   allApps.css — Gemeinsames UI-Fundament für alle Robot-Apps
+   (layout-neutral)
+   ========================================================= */
+
+/* ---------- Design Tokens ---------- */
+:root {
+    --bg: #0b1c2d;
+    --panel: #132c44;
+    --border: #0e1822;
+    --text: #e0e6ed;
+    --muted: #9aa6b2;
+    --accent: #a4bbd4;
+
+    --radius: 8px;
+    --gap: 16px;
+    --border-subtle: rgba(255,255,255,0.08);
+}
+
+/* ---------- Reset & Base ---------- */
+* {
+    box-sizing: border-box;
+}
+
+html, body {
+    min-height: 100%;
+}
+
+body {
+    margin: 16px;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont,
+                 "Segoe UI", Roboto, Inter, Arial, sans-serif;
+    background: linear-gradient(
+        to bottom,
+        #dddddd -20%,
+        var(--bg) 130%
+    );
+    color: var(--text);
+    font-size: 14px;
+}
+
+/* ---------- Headings ---------- */
+h1 {
+    margin: 0 0 16px;
+    font-size: 20px;
+    color: var(--accent);
+}
+
+h2 {
+    margin: 0;
+    font-size: 15px;
+    color: var(--accent);
+}
+
+/* ---------- Sections Container ---------- */
+/* Grid-Spalten werden von der jeweiligen App definiert */
+.sections {
+    display: grid;
+    gap: var(--gap);
+}
+
+/* ---------- Section Card ---------- */
+.section {
+    background: var(--panel);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 22px 20px;
+}
+
+/* Semantische Breitenklassen (wirken nur,
+   wenn die App ein entsprechendes Grid definiert) */
+.section.full    {}
+.section.half    {}
+.section.quarter {}
+.section.eighth  {}
+
+/* ---------- Section Header / Collapse ---------- */
+.section > h2 {
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    user-select: none;
+}
+
+/* Collapse Arrow */
+.section > h2::after {
+    content: "▼";
+    font-size: 12px;
+    transition: transform 0.2s ease;
+}
+
+/* Collapsed state */
+.section.collapsed > h2::after {
+    transform: rotate(-90deg);
+}
+
+/* Hide content when collapsed */
+.section.collapsed > :not(h2) {
+    display: none;
+}
+
+/* ---------- Generic Lists ---------- */
+.section ul {
+    margin: 10px 0 0;
+    padding: 0;
+    list-style: none;
+}
+
+.section li {
+    padding: 4px 0;
+    border-bottom: 1px solid var(--border-subtle);
+}