| 1 | :root {
|
| 2 | --bg: #f6f5f1;
|
| 3 | --panel: #ffffff;
|
| 4 | --text: #1d1d1b;
|
| 5 | --muted: #6b6a66;
|
| 6 | --line: #dddbd3;
|
| 7 | --accent: #e4572e;
|
| 8 | --accent-text: #ffffff;
|
| 9 | --plan: #a8a69d;
|
| 10 | --ink: #1f5fbf;
|
| 11 | --danger: #b3261e;
|
| 12 | --bed: #fffefb;
|
| 13 | --radius: 8px;
|
| 14 | font: 15px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
|
| 15 | }
|
| 16 |
|
| 17 | @media (prefers-color-scheme: dark) {
|
| 18 | :root {
|
| 19 | --bg: #161614;
|
| 20 | --panel: #1f1f1d;
|
| 21 | --text: #ecebe6;
|
| 22 | --muted: #9c9a92;
|
| 23 | --line: #34332f;
|
| 24 | --plan: #5f5d56;
|
| 25 | --ink: #6aa5ff;
|
| 26 | --danger: #ff6b5e;
|
| 27 | --bed: #11110f;
|
| 28 | }
|
| 29 | }
|
| 30 |
|
| 31 | * { box-sizing: border-box; }
|
| 32 |
|
| 33 | body {
|
| 34 | margin: 0;
|
| 35 | background: var(--bg);
|
| 36 | color: var(--text);
|
| 37 | }
|
| 38 |
|
| 39 | header {
|
| 40 | display: flex;
|
| 41 | flex-wrap: wrap;
|
| 42 | gap: 12px;
|
| 43 | align-items: center;
|
| 44 | justify-content: space-between;
|
| 45 | padding: 14px 20px;
|
| 46 | border-bottom: 1px solid var(--line);
|
| 47 | }
|
| 48 |
|
| 49 | h1 {
|
| 50 | margin: 0;
|
| 51 | font-size: 22px;
|
| 52 | letter-spacing: -0.02em;
|
| 53 | }
|
| 54 |
|
| 55 | .dot { color: var(--accent); }
|
| 56 |
|
| 57 | .conn {
|
| 58 | display: flex;
|
| 59 | flex-wrap: wrap;
|
| 60 | gap: 8px;
|
| 61 | align-items: center;
|
| 62 | }
|
| 63 |
|
| 64 | .status {
|
| 65 | font-size: 13px;
|
| 66 | padding: 3px 10px;
|
| 67 | border-radius: 999px;
|
| 68 | border: 1px solid var(--line);
|
| 69 | color: var(--muted);
|
| 70 | }
|
| 71 |
|
| 72 | .status.on { color: var(--text); border-color: var(--ink); }
|
| 73 | .status.busy { border-color: var(--accent); }
|
| 74 |
|
| 75 | button, select, input[type="number"] {
|
| 76 | font: inherit;
|
| 77 | color: inherit;
|
| 78 | background: var(--panel);
|
| 79 | border: 1px solid var(--line);
|
| 80 | border-radius: 6px;
|
| 81 | padding: 6px 12px;
|
| 82 | }
|
| 83 |
|
| 84 | button { cursor: pointer; white-space: nowrap; }
|
| 85 | button:hover:not(:disabled) { border-color: var(--muted); }
|
| 86 | button:disabled { opacity: 0.45; cursor: default; }
|
| 87 | button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
|
| 88 | button.danger { color: var(--danger); border-color: var(--danger); }
|
| 89 | input[type="number"] { width: 5em; padding: 4px 6px; }
|
| 90 |
|
| 91 | .banner {
|
| 92 | margin: 12px 20px 0;
|
| 93 | padding: 10px 14px;
|
| 94 | border-radius: var(--radius);
|
| 95 | border: 1px solid var(--accent);
|
| 96 | }
|
| 97 |
|
| 98 | main {
|
| 99 | display: grid;
|
| 100 | grid-template-columns: minmax(0, 1fr) 340px;
|
| 101 | gap: 20px;
|
| 102 | padding: 20px;
|
| 103 | align-items: start;
|
| 104 | }
|
| 105 |
|
| 106 | @media (max-width: 860px) {
|
| 107 | main { grid-template-columns: minmax(0, 1fr); padding: 16px; }
|
| 108 | header { padding: 12px 16px; }
|
| 109 | }
|
| 110 |
|
| 111 | .stage {
|
| 112 | position: sticky;
|
| 113 | top: 12px;
|
| 114 | }
|
| 115 |
|
| 116 | .canvas-wrap {
|
| 117 | background: var(--panel);
|
| 118 | border: 1px solid var(--line);
|
| 119 | border-radius: var(--radius);
|
| 120 | padding: 12px;
|
| 121 | }
|
| 122 |
|
| 123 | #bed {
|
| 124 | display: block;
|
| 125 | width: 100%;
|
| 126 | height: auto;
|
| 127 | overflow: visible;
|
| 128 | }
|
| 129 |
|
| 130 | .bed { fill: var(--bed); stroke: var(--line); stroke-width: 0.02; }
|
| 131 | .plan { fill: none; stroke: var(--plan); stroke-width: 0.012; stroke-linejoin: round; stroke-linecap: round; }
|
| 132 | .ink { fill: none; stroke: var(--ink); stroke-width: 0.02; stroke-linejoin: round; stroke-linecap: round; }
|
| 133 | .carriage { fill: var(--accent); opacity: 0.85; }
|
| 134 |
|
| 135 | .legend {
|
| 136 | display: flex;
|
| 137 | flex-wrap: wrap;
|
| 138 | gap: 16px;
|
| 139 | margin-top: 8px;
|
| 140 | font-size: 13px;
|
| 141 | color: var(--muted);
|
| 142 | }
|
| 143 |
|
| 144 | .sw {
|
| 145 | display: inline-block;
|
| 146 | width: 14px;
|
| 147 | height: 3px;
|
| 148 | margin-right: 6px;
|
| 149 | vertical-align: middle;
|
| 150 | border-radius: 2px;
|
| 151 | }
|
| 152 |
|
| 153 | .sw.plan { background: var(--plan); }
|
| 154 | .sw.ink { background: var(--ink); }
|
| 155 | .sw.carriage { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
|
| 156 |
|
| 157 | .panels { display: grid; gap: 12px; min-width: 0; }
|
| 158 |
|
| 159 | details {
|
| 160 | background: var(--panel);
|
| 161 | border: 1px solid var(--line);
|
| 162 | border-radius: var(--radius);
|
| 163 | padding: 10px 14px;
|
| 164 | }
|
| 165 |
|
| 166 | summary {
|
| 167 | cursor: pointer;
|
| 168 | font-weight: 600;
|
| 169 | margin: -2px 0;
|
| 170 | }
|
| 171 |
|
| 172 | details[open] summary { margin-bottom: 10px; }
|
| 173 |
|
| 174 | .row { margin: 8px 0; }
|
| 175 | .inline { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
|
| 176 | .muted { color: var(--muted); font-size: 13px; margin: 8px 0; }
|
| 177 |
|
| 178 | .grid {
|
| 179 | display: grid;
|
| 180 | grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
|
| 181 | gap: 6px;
|
| 182 | }
|
| 183 |
|
| 184 | .jog {
|
| 185 | display: grid;
|
| 186 | grid-template-columns: repeat(3, 1fr);
|
| 187 | grid-template-areas: ". up ." "left mid right" ". down .";
|
| 188 | gap: 6px;
|
| 189 | max-width: 240px;
|
| 190 | }
|
| 191 |
|
| 192 | .jog [data-jog="0,-1"] { grid-area: up; }
|
| 193 | .jog [data-jog="-1,0"] { grid-area: left; }
|
| 194 | .jog select { grid-area: mid; }
|
| 195 | .jog [data-jog="1,0"] { grid-area: right; }
|
| 196 | .jog [data-jog="0,1"] { grid-area: down; }
|
| 197 |
|
| 198 | #settings { display: grid; gap: 8px; }
|
| 199 | #settings label { display: grid; gap: 2px; font-size: 13px; }
|
| 200 | #settings label.inline { display: flex; }
|
| 201 | #settings output { color: var(--muted); }
|
| 202 |
|
| 203 | progress { width: 100%; margin-top: 8px; accent-color: var(--accent); }
|
| 204 |
|
| 205 | .log {
|
| 206 | margin: 0;
|
| 207 | padding: 0;
|
| 208 | list-style: none;
|
| 209 | max-height: 220px;
|
| 210 | overflow: auto;
|
| 211 | font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
|
| 212 | }
|
| 213 |
|
| 214 | .log li { padding: 1px 0; border-bottom: 1px dotted var(--line); overflow-wrap: anywhere; }
|
| 215 | .log li.err { color: var(--danger); }
|
| 216 |
|
| 217 | footer {
|
| 218 | padding: 16px 20px 28px;
|
| 219 | color: var(--muted);
|
| 220 | font-size: 13px;
|
| 221 | }
|
| 222 |
|
| 223 | footer a { color: inherit; }
|