Spaces:
Running
Running
| :root { | |
| --bg: #f7f7f8; | |
| --surface: #ffffff; | |
| --border: #e3e3e8; | |
| --text: #1b1b1f; | |
| --muted: #6b6b76; | |
| --accent: #4f46e5; | |
| --ok: #16a34a; | |
| --busy: #d97706; | |
| --off: #9ca3af; | |
| --error: #dc2626; | |
| --reachy_mini: #4f46e5; | |
| --microduck: #ca8a04; | |
| --grabette: #0d9488; | |
| --other: #6b7280; | |
| color-scheme: light; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :root:not([data-theme="light"]) { | |
| --bg: #111114; | |
| --surface: #1b1b20; | |
| --border: #2d2d35; | |
| --text: #ececf1; | |
| --muted: #9a9aa6; | |
| --accent: #818cf8; | |
| --reachy_mini: #818cf8; | |
| --microduck: #facc15; | |
| --grabette: #2dd4bf; | |
| color-scheme: dark; | |
| } | |
| } | |
| :root[data-theme="dark"] { | |
| --bg: #111114; | |
| --surface: #1b1b20; | |
| --border: #2d2d35; | |
| --text: #ececf1; | |
| --muted: #9a9aa6; | |
| --accent: #818cf8; | |
| --reachy_mini: #818cf8; | |
| --microduck: #facc15; | |
| --grabette: #2dd4bf; | |
| color-scheme: dark; | |
| } | |
| * { box-sizing: border-box; } | |
| body { | |
| margin: 0; | |
| background: var(--bg); | |
| color: var(--text); | |
| font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; | |
| } | |
| header, main, footer { max-width: 1100px; margin: 0 auto; padding: 0 16px; } | |
| header { | |
| display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; | |
| padding-top: 20px; padding-bottom: 8px; | |
| } | |
| h1 { font-size: 20px; margin: 0; } | |
| h2 { font-size: 16px; margin: 0; } | |
| h3 { font-size: 15px; margin: 0; overflow-wrap: anywhere; } | |
| section { margin: 20px 0 28px; } | |
| .section-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } | |
| .muted { color: var(--muted); font-size: 13px; } | |
| .error { color: var(--error); } | |
| footer { padding-bottom: 24px; } | |
| button { | |
| font: inherit; cursor: pointer; border-radius: 8px; padding: 6px 12px; | |
| border: 1px solid var(--accent); background: var(--accent); color: #fff; | |
| } | |
| button.ghost { background: transparent; color: var(--text); border-color: var(--border); } | |
| #account { display: flex; align-items: center; gap: 8px; } | |
| .avatar { width: 28px; height: 28px; border-radius: 50%; } | |
| .token-form { display: flex; gap: 6px; flex-wrap: wrap; } | |
| .token-form input { | |
| font: inherit; padding: 6px 10px; border-radius: 8px; min-width: 0; width: 220px; | |
| border: 1px solid var(--border); background: var(--surface); color: var(--text); | |
| } | |
| .filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; } | |
| .chip { background: var(--surface); color: var(--text); border-color: var(--border); border-radius: 999px; font-size: 13px; } | |
| .chip.active { background: var(--accent); border-color: var(--accent); color: #fff; } | |
| .robots { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; } | |
| .robot { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; min-width: 0; } | |
| .robot.offline { opacity: 0.65; } | |
| .robot-head { display: flex; align-items: center; gap: 8px; } | |
| .robot-head h3 { flex: 1; } | |
| .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--off); flex: none; } | |
| .robot.idle .dot { background: var(--ok); } | |
| .robot.busy .dot { background: var(--busy); } | |
| .state { margin: 4px 0 8px; color: var(--muted); font-size: 13px; } | |
| .badge { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; color: var(--other); } | |
| .badge.kind-reachy_mini { color: var(--reachy_mini); } | |
| .badge.kind-microduck { color: var(--microduck); } | |
| .badge.kind-grabette { color: var(--grabette); } | |
| dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0; font-size: 13px; } | |
| dt { color: var(--muted); } | |
| dd { margin: 0; overflow-wrap: anywhere; font-family: ui-monospace, monospace; font-size: 12px; } | |
| details { margin-top: 8px; font-size: 12px; } | |
| summary { cursor: pointer; color: var(--muted); } | |
| pre { overflow-x: auto; background: var(--bg); padding: 8px; border-radius: 8px; margin: 6px 0 0; } | |