|
1 | | -/* |
2 | | - * A deliberately small "minimal vite-devtools" skin (Next.js edition): an icon |
3 | | - * dock on the left, the selected tool's iframe filling the stage, and a drawer |
4 | | - * of hub subsystems (commands / messages / terminals) along the bottom. Mirrors |
5 | | - * the Vite example so the same protocol reads identically across hosts. |
6 | | - */ |
7 | | -:root { |
8 | | - color-scheme: light dark; |
9 | | - font-family: Inter, system-ui, -apple-system, sans-serif; |
10 | | - line-height: 1.5; |
| 1 | +/* The hub UI's design tokens, base layer, and component vocabulary come from the |
| 2 | + shared devframe design system. `@unocss` is replaced by UnoCSS (via |
| 3 | + `@unocss/postcss`, see ../postcss.config.mjs) with the generated preflights + |
| 4 | + utilities; `@internal/design/theme.css` (imported after this file in |
| 5 | + layout.tsx) supplies the `--df-*` token values + base element styling. */ |
11 | 6 |
|
12 | | - --accent: #845eee; |
13 | | - --bg: #ffffff; |
14 | | - --bg-sunken: #f6f6f8; |
15 | | - --bg-raised: #ffffff; |
16 | | - --fg: #1c1c22; |
17 | | - --fg-muted: #6b6b78; |
18 | | - --border: #e6e6ec; |
19 | | - --border-strong: #d6d6e0; |
20 | | - --ok: #16a34a; |
21 | | - --err: #e1326a; |
22 | | -} |
23 | | - |
24 | | -@media (prefers-color-scheme: dark) { |
25 | | - :root { |
26 | | - --bg: #0e0e12; |
27 | | - --bg-sunken: #131318; |
28 | | - --bg-raised: #1a1a22; |
29 | | - --fg: #e9e9f0; |
30 | | - --fg-muted: #9b9bac; |
31 | | - --border: #26262f; |
32 | | - --border-strong: #34343f; |
33 | | - --ok: #4ade80; |
34 | | - --err: #ff6b9d; |
35 | | - } |
36 | | -} |
37 | | - |
38 | | -* { |
39 | | - box-sizing: border-box; |
40 | | -} |
41 | | - |
42 | | -body { |
43 | | - margin: 0; |
44 | | - height: 100vh; |
45 | | - overflow: hidden; |
46 | | - background: var(--bg); |
47 | | - color: var(--fg); |
48 | | -} |
49 | | - |
50 | | -.app-shell { |
51 | | - display: grid; |
52 | | - grid-template-columns: 248px 1fr; |
53 | | - grid-template-rows: auto 1fr auto; |
54 | | - grid-template-areas: |
55 | | - "header header" |
56 | | - "sidebar main" |
57 | | - "footer footer"; |
58 | | - height: 100vh; |
59 | | -} |
60 | | - |
61 | | -/* ── Header ───────────────────────────────────────────────── */ |
62 | | -.app-header { |
63 | | - grid-area: header; |
64 | | - display: flex; |
65 | | - align-items: baseline; |
66 | | - gap: 0.75rem; |
67 | | - padding: 0.7rem 1.1rem; |
68 | | - border-bottom: 1px solid var(--border); |
69 | | - background: var(--bg-raised); |
70 | | -} |
71 | | - |
72 | | -.app-header h1 { |
73 | | - margin: 0; |
74 | | - font-size: 0.92rem; |
75 | | - font-weight: 650; |
76 | | - letter-spacing: 0.02em; |
77 | | -} |
78 | | - |
79 | | -.app-header p { |
80 | | - margin: 0; |
81 | | - font-family: ui-monospace, monospace; |
82 | | - font-size: 0.74rem; |
83 | | - color: var(--fg-muted); |
84 | | -} |
85 | | - |
86 | | -.app-tagline { |
87 | | - margin-left: auto !important; |
88 | | - font-style: italic; |
89 | | - opacity: 0.8; |
90 | | -} |
91 | | - |
92 | | -#status span::before { |
93 | | - content: ""; |
94 | | - display: inline-block; |
95 | | - width: 7px; |
96 | | - height: 7px; |
97 | | - margin-right: 0.4em; |
98 | | - border-radius: 50%; |
99 | | - background: var(--fg-muted); |
100 | | - vertical-align: middle; |
101 | | -} |
102 | | - |
103 | | -#status.ready span { color: var(--ok); } |
104 | | -#status.ready span::before { background: var(--ok); } |
105 | | -#status.error span { color: var(--err); } |
106 | | -#status.error span::before { background: var(--err); } |
107 | | - |
108 | | -/* ── Dock (sidebar) ───────────────────────────────────────── */ |
109 | | -.app-sidebar { |
110 | | - grid-area: sidebar; |
111 | | - border-right: 1px solid var(--border); |
112 | | - padding: 0.6rem; |
113 | | - overflow: auto; |
114 | | - background: var(--bg-sunken); |
115 | | -} |
116 | | - |
117 | | -.app-sidebar h2 { |
118 | | - padding: 0 0.5rem; |
119 | | -} |
120 | | - |
121 | | -.app-sidebar ul { |
122 | | - gap: 0.15rem; |
123 | | -} |
124 | | - |
125 | | -.app-sidebar li { |
126 | | - padding: 0; |
127 | | - border: 0; |
128 | | - background: transparent; |
129 | | -} |
130 | | - |
131 | | -.dock-btn { |
132 | | - display: flex; |
133 | | - align-items: center; |
134 | | - gap: 0.6rem; |
135 | | - width: 100%; |
136 | | - text-align: left; |
137 | | - padding: 0.5rem 0.6rem; |
138 | | - font: inherit; |
139 | | - font-size: 0.85rem; |
140 | | - color: var(--fg); |
141 | | - background: transparent; |
142 | | - border: 0; |
143 | | - border-radius: 0.5rem; |
144 | | - cursor: pointer; |
145 | | - position: relative; |
146 | | - transition: background 0.12s ease, color 0.12s ease; |
147 | | -} |
148 | | - |
149 | | -.dock-btn:hover { |
150 | | - background: color-mix(in srgb, var(--accent) 9%, transparent); |
151 | | -} |
152 | | - |
153 | | -.dock-btn.active { |
154 | | - background: color-mix(in srgb, var(--accent) 14%, transparent); |
155 | | - color: color-mix(in srgb, var(--accent) 65%, var(--fg)); |
156 | | - font-weight: 550; |
157 | | -} |
158 | | - |
159 | | -.dock-btn.active::before { |
160 | | - content: ""; |
161 | | - position: absolute; |
162 | | - left: -0.6rem; |
163 | | - top: 50%; |
164 | | - transform: translateY(-50%); |
165 | | - width: 3px; |
166 | | - height: 1.1rem; |
167 | | - border-radius: 0 3px 3px 0; |
168 | | - background: var(--accent); |
169 | | -} |
170 | | - |
171 | | -.dock-ico { |
172 | | - display: inline-flex; |
173 | | - align-items: center; |
174 | | - justify-content: center; |
175 | | - width: 22px; |
176 | | - height: 22px; |
177 | | - flex: none; |
178 | | - color: var(--fg-muted); |
179 | | -} |
180 | | - |
181 | | -.dock-btn.active .dock-ico { |
182 | | - color: var(--accent); |
183 | | -} |
184 | | - |
185 | | -.dock-ico svg { |
186 | | - width: 20px; |
187 | | - height: 20px; |
188 | | -} |
189 | | - |
190 | | -.dock-initial { |
191 | | - display: inline-grid; |
192 | | - place-items: center; |
193 | | - width: 20px; |
194 | | - height: 20px; |
195 | | - border-radius: 0.35rem; |
196 | | - background: color-mix(in srgb, var(--accent) 20%, transparent); |
197 | | - font-size: 0.7rem; |
198 | | - font-weight: 700; |
199 | | -} |
200 | | - |
201 | | -.dock-label { |
202 | | - overflow: hidden; |
203 | | - text-overflow: ellipsis; |
204 | | - white-space: nowrap; |
205 | | -} |
206 | | - |
207 | | -/* ── Stage ────────────────────────────────────────────────── */ |
208 | | -.app-main { |
209 | | - grid-area: main; |
210 | | - overflow: hidden; |
211 | | - background: var(--bg-sunken); |
212 | | -} |
213 | | - |
214 | | -.app-main iframe { |
215 | | - width: 100%; |
216 | | - height: 100%; |
217 | | - border: 0; |
218 | | - display: block; |
219 | | - background: var(--bg); |
220 | | -} |
221 | | - |
222 | | -/* ── Drawer (footer) ──────────────────────────────────────── */ |
223 | | -.app-footer { |
224 | | - grid-area: footer; |
225 | | - display: flex; |
226 | | - gap: 1.25rem; |
227 | | - padding: 0.8rem 1.1rem; |
228 | | - border-top: 1px solid var(--border); |
229 | | - background: var(--bg-raised); |
230 | | - max-height: 30vh; |
231 | | - overflow: auto; |
232 | | -} |
233 | | - |
234 | | -.app-footer section { |
235 | | - flex: 1; |
236 | | - min-width: 0; |
237 | | -} |
238 | | - |
239 | | -h2 { |
240 | | - font-size: 0.68rem; |
241 | | - text-transform: uppercase; |
242 | | - letter-spacing: 0.07em; |
243 | | - color: var(--fg-muted); |
244 | | - margin: 0 0 0.55rem; |
245 | | -} |
246 | | - |
247 | | -ul { |
248 | | - list-style: none; |
249 | | - padding-left: 0; |
250 | | - margin: 0; |
251 | | - display: flex; |
252 | | - flex-direction: column; |
253 | | - gap: 0.3rem; |
254 | | -} |
255 | | - |
256 | | -.app-footer li { |
257 | | - padding: 0.4rem 0.6rem; |
258 | | - border: 1px solid var(--border); |
259 | | - border-radius: 0.45rem; |
260 | | - background: var(--bg-sunken); |
261 | | - font-family: ui-monospace, monospace; |
262 | | - font-size: 0.78rem; |
263 | | -} |
264 | | - |
265 | | -li.muted { |
266 | | - opacity: 0.55; |
267 | | - font-style: italic; |
268 | | - border-style: dashed; |
269 | | -} |
270 | | - |
271 | | -code { |
272 | | - font-family: ui-monospace, monospace; |
273 | | - font-size: 0.92em; |
274 | | - background: color-mix(in srgb, var(--fg) 8%, transparent); |
275 | | - padding: 0.1em 0.35em; |
276 | | - border-radius: 0.25em; |
277 | | - color: var(--fg-muted); |
278 | | -} |
279 | | - |
280 | | -.actions { |
281 | | - display: flex; |
282 | | - flex-wrap: wrap; |
283 | | - gap: 0.75rem; |
284 | | - align-items: flex-start; |
285 | | - margin-top: 0.6rem; |
286 | | -} |
287 | | - |
288 | | -button { |
289 | | - font: inherit; |
290 | | - font-size: 0.82rem; |
291 | | - padding: 0.4rem 0.8rem; |
292 | | - border-radius: 0.45rem; |
293 | | - border: 1px solid var(--border-strong); |
294 | | - background: var(--bg-raised); |
295 | | - cursor: pointer; |
296 | | - color: var(--fg); |
297 | | - transition: background 0.12s ease, border-color 0.12s ease; |
298 | | -} |
299 | | - |
300 | | -button:hover { |
301 | | - border-color: var(--accent); |
302 | | - background: color-mix(in srgb, var(--accent) 8%, transparent); |
303 | | -} |
| 7 | +@unocss; |
0 commit comments