htmlboard 0.2.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +83 -69
- package/bin/htmlboard.js +83 -46
- package/package.json +1 -1
- package/skills/htmlboard/SKILL.md +39 -34
- package/src/client/explorer.css +69 -34
- package/src/client/explorer.js +148 -25
- package/src/client/index.html +2 -0
- package/src/designs.js +398 -0
- package/src/index.js +7 -2
- package/src/migrate.js +193 -0
- package/src/server.js +1 -198
- package/src/templates/{artboards/desktop.html → 01-screens/01-desktop.html} +51 -167
- package/src/templates/{artboards/mobile.html → 01-screens/02-mobile.html} +48 -143
- package/src/templates/02-components/01-ui-kit.html +77 -0
- package/src/templates/styles.css +133 -0
- package/src/templates/artboards/components.html +0 -199
- package/src/templates/designs.json +0 -50
|
@@ -4,39 +4,21 @@
|
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
6
|
<title>Mobile Feed Screen</title>
|
|
7
|
+
<meta name="description" content="Smartphone screen with balance card, quick actions, and transaction feed">
|
|
8
|
+
<meta name="htmlboard" content="width=390, height=844">
|
|
9
|
+
<link rel="stylesheet" href="../styles.css">
|
|
7
10
|
<style>
|
|
8
|
-
* {
|
|
9
|
-
box-sizing: border-box;
|
|
10
|
-
margin: 0;
|
|
11
|
-
padding: 0;
|
|
12
|
-
-webkit-font-smoothing: antialiased;
|
|
13
|
-
}
|
|
14
|
-
:root {
|
|
15
|
-
--bg: #090a0f;
|
|
16
|
-
--card-bg: #13151f;
|
|
17
|
-
--card-border: #232738;
|
|
18
|
-
--accent: #6366f1;
|
|
19
|
-
--accent-glow: rgba(99, 102, 241, 0.35);
|
|
20
|
-
--emerald: #10b981;
|
|
21
|
-
--rose: #f43f5e;
|
|
22
|
-
--text-main: #f8fafc;
|
|
23
|
-
--text-muted: #94a3b8;
|
|
24
|
-
}
|
|
25
11
|
body {
|
|
26
|
-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
27
|
-
background: var(--bg);
|
|
28
|
-
color: var(--text-main);
|
|
29
12
|
min-height: 100vh;
|
|
30
13
|
display: flex;
|
|
31
14
|
flex-direction: column;
|
|
32
15
|
overflow-x: hidden;
|
|
33
16
|
padding-bottom: 80px;
|
|
17
|
+
background: #090a0f;
|
|
34
18
|
}
|
|
35
|
-
/* Status bar simulated */
|
|
36
19
|
.status-bar {
|
|
37
20
|
display: flex;
|
|
38
21
|
justify-content: space-between;
|
|
39
|
-
align-items: center;
|
|
40
22
|
padding: 14px 24px 8px;
|
|
41
23
|
font-size: 13px;
|
|
42
24
|
font-weight: 600;
|
|
@@ -49,49 +31,29 @@
|
|
|
49
31
|
align-items: center;
|
|
50
32
|
padding: 16px 20px;
|
|
51
33
|
}
|
|
52
|
-
.
|
|
53
|
-
display: flex;
|
|
54
|
-
align-items: center;
|
|
55
|
-
gap: 12px;
|
|
56
|
-
}
|
|
57
|
-
.avatar {
|
|
34
|
+
.header .avatar {
|
|
58
35
|
width: 44px;
|
|
59
36
|
height: 44px;
|
|
60
|
-
border-radius: 50%;
|
|
61
|
-
background: linear-gradient(135deg, #6366f1, #a855f7);
|
|
62
|
-
display: flex;
|
|
63
|
-
align-items: center;
|
|
64
|
-
justify-content: center;
|
|
65
|
-
font-weight: 700;
|
|
66
37
|
font-size: 16px;
|
|
67
38
|
box-shadow: 0 0 16px var(--accent-glow);
|
|
68
39
|
}
|
|
69
|
-
.greeting {
|
|
70
|
-
|
|
71
|
-
color: var(--text-muted);
|
|
72
|
-
}
|
|
73
|
-
.username {
|
|
74
|
-
font-size: 17px;
|
|
75
|
-
font-weight: 700;
|
|
76
|
-
}
|
|
40
|
+
.greeting { font-size: 13px; }
|
|
41
|
+
.username { font-size: 17px; font-weight: 700; }
|
|
77
42
|
.icon-btn {
|
|
78
43
|
width: 40px;
|
|
79
44
|
height: 40px;
|
|
80
45
|
border-radius: 12px;
|
|
81
|
-
background: var(--
|
|
82
|
-
border: 1px solid var(--
|
|
83
|
-
color: var(--text-main);
|
|
46
|
+
background: var(--surface);
|
|
47
|
+
border: 1px solid var(--border);
|
|
84
48
|
display: flex;
|
|
85
49
|
align-items: center;
|
|
86
50
|
justify-content: center;
|
|
87
|
-
cursor: pointer;
|
|
88
51
|
position: relative;
|
|
89
52
|
}
|
|
90
|
-
.badge-dot {
|
|
53
|
+
.icon-btn .badge-dot {
|
|
91
54
|
width: 8px;
|
|
92
55
|
height: 8px;
|
|
93
56
|
background: var(--rose);
|
|
94
|
-
border-radius: 50%;
|
|
95
57
|
position: absolute;
|
|
96
58
|
top: 10px;
|
|
97
59
|
right: 10px;
|
|
@@ -103,7 +65,7 @@
|
|
|
103
65
|
background: linear-gradient(135deg, #1e1b4b 0%, #1e293b 100%);
|
|
104
66
|
border: 1px solid rgba(99, 102, 241, 0.3);
|
|
105
67
|
border-radius: 24px;
|
|
106
|
-
box-shadow: 0 12px 30px -10px
|
|
68
|
+
box-shadow: 0 12px 30px -10px var(--accent-glow);
|
|
107
69
|
position: relative;
|
|
108
70
|
overflow: hidden;
|
|
109
71
|
}
|
|
@@ -117,30 +79,13 @@
|
|
|
117
79
|
background: radial-gradient(circle, rgba(99, 102, 241, 0.4) 0%, transparent 70%);
|
|
118
80
|
pointer-events: none;
|
|
119
81
|
}
|
|
120
|
-
.
|
|
121
|
-
font-size: 13px;
|
|
122
|
-
color: #cbd5e1;
|
|
123
|
-
text-transform: uppercase;
|
|
124
|
-
letter-spacing: 0.05em;
|
|
125
|
-
margin-bottom: 6px;
|
|
126
|
-
}
|
|
82
|
+
.hero-card .label { color: #cbd5e1; font-size: 13px; margin-bottom: 6px; }
|
|
127
83
|
.balance-value {
|
|
128
84
|
font-size: 34px;
|
|
129
85
|
font-weight: 800;
|
|
130
86
|
letter-spacing: -0.02em;
|
|
131
87
|
margin-bottom: 12px;
|
|
132
88
|
}
|
|
133
|
-
.balance-trend {
|
|
134
|
-
display: inline-flex;
|
|
135
|
-
align-items: center;
|
|
136
|
-
gap: 6px;
|
|
137
|
-
background: rgba(16, 185, 129, 0.15);
|
|
138
|
-
color: var(--emerald);
|
|
139
|
-
padding: 4px 10px;
|
|
140
|
-
border-radius: 20px;
|
|
141
|
-
font-size: 12px;
|
|
142
|
-
font-weight: 600;
|
|
143
|
-
}
|
|
144
89
|
/* Quick Actions */
|
|
145
90
|
.actions-grid {
|
|
146
91
|
display: grid;
|
|
@@ -153,14 +98,14 @@
|
|
|
153
98
|
flex-direction: column;
|
|
154
99
|
align-items: center;
|
|
155
100
|
gap: 8px;
|
|
156
|
-
|
|
101
|
+
font-size: 12px;
|
|
102
|
+
font-weight: 500;
|
|
157
103
|
}
|
|
158
104
|
.action-circle {
|
|
159
105
|
width: 52px;
|
|
160
106
|
height: 52px;
|
|
107
|
+
padding: 0;
|
|
161
108
|
border-radius: 18px;
|
|
162
|
-
background: var(--card-bg);
|
|
163
|
-
border: 1px solid var(--card-border);
|
|
164
109
|
display: flex;
|
|
165
110
|
align-items: center;
|
|
166
111
|
justify-content: center;
|
|
@@ -172,29 +117,15 @@
|
|
|
172
117
|
border-color: var(--accent);
|
|
173
118
|
transform: translateY(-2px);
|
|
174
119
|
}
|
|
175
|
-
|
|
176
|
-
font-size: 12px;
|
|
177
|
-
font-weight: 500;
|
|
178
|
-
color: var(--text-muted);
|
|
179
|
-
}
|
|
180
|
-
/* Section Title */
|
|
120
|
+
/* Transactions */
|
|
181
121
|
.section-header {
|
|
182
122
|
display: flex;
|
|
183
123
|
justify-content: space-between;
|
|
184
124
|
align-items: center;
|
|
185
125
|
padding: 16px 20px 8px;
|
|
186
126
|
}
|
|
187
|
-
.section-title {
|
|
188
|
-
|
|
189
|
-
font-weight: 700;
|
|
190
|
-
}
|
|
191
|
-
.see-all {
|
|
192
|
-
font-size: 13px;
|
|
193
|
-
color: var(--accent);
|
|
194
|
-
text-decoration: none;
|
|
195
|
-
font-weight: 600;
|
|
196
|
-
}
|
|
197
|
-
/* Transactions */
|
|
127
|
+
.section-title { font-size: 17px; font-weight: 700; }
|
|
128
|
+
.see-all { font-size: 13px; color: var(--accent); font-weight: 600; }
|
|
198
129
|
.tx-list {
|
|
199
130
|
display: flex;
|
|
200
131
|
flex-direction: column;
|
|
@@ -206,41 +137,23 @@
|
|
|
206
137
|
align-items: center;
|
|
207
138
|
justify-content: space-between;
|
|
208
139
|
padding: 14px 16px;
|
|
209
|
-
background: var(--card-bg);
|
|
210
|
-
border: 1px solid var(--card-border);
|
|
211
140
|
border-radius: 16px;
|
|
212
141
|
}
|
|
213
|
-
.tx-
|
|
214
|
-
display: flex;
|
|
215
|
-
align-items: center;
|
|
216
|
-
gap: 14px;
|
|
217
|
-
}
|
|
142
|
+
.tx-item .row { gap: 14px; }
|
|
218
143
|
.tx-icon {
|
|
219
144
|
width: 40px;
|
|
220
145
|
height: 40px;
|
|
221
146
|
border-radius: 12px;
|
|
222
|
-
background:
|
|
147
|
+
background: var(--surface-2);
|
|
223
148
|
display: flex;
|
|
224
149
|
align-items: center;
|
|
225
150
|
justify-content: center;
|
|
226
151
|
font-size: 18px;
|
|
227
152
|
}
|
|
228
|
-
.tx-name {
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
}
|
|
232
|
-
.tx-date {
|
|
233
|
-
font-size: 12px;
|
|
234
|
-
color: var(--text-muted);
|
|
235
|
-
margin-top: 2px;
|
|
236
|
-
}
|
|
237
|
-
.tx-amount {
|
|
238
|
-
font-size: 14px;
|
|
239
|
-
font-weight: 700;
|
|
240
|
-
}
|
|
241
|
-
.tx-amount.positive {
|
|
242
|
-
color: var(--emerald);
|
|
243
|
-
}
|
|
153
|
+
.tx-name, .tx-amount { font-size: 14px; font-weight: 600; }
|
|
154
|
+
.tx-amount { font-weight: 700; }
|
|
155
|
+
.tx-amount.positive { color: var(--emerald); }
|
|
156
|
+
.tx-date { font-size: 12px; margin-top: 2px; }
|
|
244
157
|
/* Bottom Navigation */
|
|
245
158
|
.bottom-nav {
|
|
246
159
|
position: fixed;
|
|
@@ -250,7 +163,7 @@
|
|
|
250
163
|
height: 72px;
|
|
251
164
|
background: rgba(9, 10, 15, 0.85);
|
|
252
165
|
backdrop-filter: blur(16px);
|
|
253
|
-
border-top: 1px solid var(--
|
|
166
|
+
border-top: 1px solid var(--border);
|
|
254
167
|
display: flex;
|
|
255
168
|
justify-content: space-around;
|
|
256
169
|
align-items: center;
|
|
@@ -263,15 +176,9 @@
|
|
|
263
176
|
gap: 4px;
|
|
264
177
|
color: var(--text-muted);
|
|
265
178
|
font-size: 11px;
|
|
266
|
-
text-decoration: none;
|
|
267
|
-
cursor: pointer;
|
|
268
|
-
}
|
|
269
|
-
.nav-btn.active {
|
|
270
|
-
color: var(--accent);
|
|
271
|
-
}
|
|
272
|
-
.nav-icon {
|
|
273
|
-
font-size: 20px;
|
|
274
179
|
}
|
|
180
|
+
.nav-btn.active { color: var(--accent); }
|
|
181
|
+
.nav-icon { font-size: 20px; }
|
|
275
182
|
</style>
|
|
276
183
|
</head>
|
|
277
184
|
<body>
|
|
@@ -281,10 +188,10 @@
|
|
|
281
188
|
</div>
|
|
282
189
|
|
|
283
190
|
<header class="header">
|
|
284
|
-
<div class="
|
|
191
|
+
<div class="row">
|
|
285
192
|
<div class="avatar">LC</div>
|
|
286
193
|
<div>
|
|
287
|
-
<div class="greeting">Welcome back,</div>
|
|
194
|
+
<div class="greeting muted">Welcome back,</div>
|
|
288
195
|
<div class="username">Luiz Carlos</div>
|
|
289
196
|
</div>
|
|
290
197
|
</div>
|
|
@@ -295,29 +202,27 @@
|
|
|
295
202
|
</header>
|
|
296
203
|
|
|
297
204
|
<section class="hero-card">
|
|
298
|
-
<div class="
|
|
205
|
+
<div class="label">Total Portfolio Value</div>
|
|
299
206
|
<div class="balance-value">$42,850.75</div>
|
|
300
|
-
<div class="
|
|
301
|
-
▲ +14.2% this month
|
|
302
|
-
</div>
|
|
207
|
+
<div class="badge badge-emerald">▲ +14.2% this month</div>
|
|
303
208
|
</section>
|
|
304
209
|
|
|
305
210
|
<nav class="actions-grid">
|
|
306
211
|
<div class="action-item">
|
|
307
|
-
<div class="action-circle">↗</div>
|
|
308
|
-
<div class="
|
|
212
|
+
<div class="action-circle card">↗</div>
|
|
213
|
+
<div class="muted">Send</div>
|
|
309
214
|
</div>
|
|
310
215
|
<div class="action-item">
|
|
311
|
-
<div class="action-circle">↙</div>
|
|
312
|
-
<div class="
|
|
216
|
+
<div class="action-circle card">↙</div>
|
|
217
|
+
<div class="muted">Receive</div>
|
|
313
218
|
</div>
|
|
314
219
|
<div class="action-item">
|
|
315
|
-
<div class="action-circle">⚡</div>
|
|
316
|
-
<div class="
|
|
220
|
+
<div class="action-circle card">⚡</div>
|
|
221
|
+
<div class="muted">Swap</div>
|
|
317
222
|
</div>
|
|
318
223
|
<div class="action-item">
|
|
319
|
-
<div class="action-circle">⋯</div>
|
|
320
|
-
<div class="
|
|
224
|
+
<div class="action-circle card">⋯</div>
|
|
225
|
+
<div class="muted">More</div>
|
|
321
226
|
</div>
|
|
322
227
|
</nav>
|
|
323
228
|
|
|
@@ -327,34 +232,34 @@
|
|
|
327
232
|
</div>
|
|
328
233
|
|
|
329
234
|
<div class="tx-list">
|
|
330
|
-
<div class="tx-item">
|
|
331
|
-
<div class="
|
|
235
|
+
<div class="tx-item card">
|
|
236
|
+
<div class="row">
|
|
332
237
|
<div class="tx-icon">🛍️</div>
|
|
333
238
|
<div>
|
|
334
239
|
<div class="tx-name">Apple Store</div>
|
|
335
|
-
<div class="tx-date">Today, 2:15 PM • Electronics</div>
|
|
240
|
+
<div class="tx-date muted">Today, 2:15 PM • Electronics</div>
|
|
336
241
|
</div>
|
|
337
242
|
</div>
|
|
338
243
|
<div class="tx-amount">-$199.00</div>
|
|
339
244
|
</div>
|
|
340
245
|
|
|
341
|
-
<div class="tx-item">
|
|
342
|
-
<div class="
|
|
246
|
+
<div class="tx-item card">
|
|
247
|
+
<div class="row">
|
|
343
248
|
<div class="tx-icon">💼</div>
|
|
344
249
|
<div>
|
|
345
250
|
<div class="tx-name">Client Invoice #1042</div>
|
|
346
|
-
<div class="tx-date">Yesterday • Wire Transfer</div>
|
|
251
|
+
<div class="tx-date muted">Yesterday • Wire Transfer</div>
|
|
347
252
|
</div>
|
|
348
253
|
</div>
|
|
349
254
|
<div class="tx-amount positive">+$3,450.00</div>
|
|
350
255
|
</div>
|
|
351
256
|
|
|
352
|
-
<div class="tx-item">
|
|
353
|
-
<div class="
|
|
257
|
+
<div class="tx-item card">
|
|
258
|
+
<div class="row">
|
|
354
259
|
<div class="tx-icon">☕</div>
|
|
355
260
|
<div>
|
|
356
261
|
<div class="tx-name">Blue Bottle Coffee</div>
|
|
357
|
-
<div class="tx-date">Oct 26 • Food & Beverage</div>
|
|
262
|
+
<div class="tx-date muted">Oct 26 • Food & Beverage</div>
|
|
358
263
|
</div>
|
|
359
264
|
</div>
|
|
360
265
|
<div class="tx-amount">-$6.75</div>
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Component Library Preview</title>
|
|
7
|
+
<meta name="description" content="Buttons, inputs, badges, cards, and interactive elements">
|
|
8
|
+
<meta name="htmlboard" content="width=780, height=720, category=components">
|
|
9
|
+
<link rel="stylesheet" href="../styles.css">
|
|
10
|
+
<style>
|
|
11
|
+
body {
|
|
12
|
+
padding: 24px;
|
|
13
|
+
display: flex;
|
|
14
|
+
flex-direction: column;
|
|
15
|
+
gap: 24px;
|
|
16
|
+
}
|
|
17
|
+
.header {
|
|
18
|
+
border-bottom: 1px solid var(--border);
|
|
19
|
+
padding-bottom: 16px;
|
|
20
|
+
}
|
|
21
|
+
.title { font-size: 20px; font-weight: 700; }
|
|
22
|
+
.subtitle { font-size: 13px; margin-top: 4px; }
|
|
23
|
+
.card { display: flex; flex-direction: column; gap: 16px; }
|
|
24
|
+
.row { flex-wrap: wrap; }
|
|
25
|
+
.field { flex: 1; min-width: 200px; }
|
|
26
|
+
</style>
|
|
27
|
+
</head>
|
|
28
|
+
<body>
|
|
29
|
+
<div class="header">
|
|
30
|
+
<h1 class="title">Design System Components</h1>
|
|
31
|
+
<p class="subtitle muted">Everything here comes from styles.css, shared by all the designs</p>
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
<div class="card">
|
|
35
|
+
<div class="label">Buttons & Interactive Triggers</div>
|
|
36
|
+
<div class="row">
|
|
37
|
+
<button class="btn btn-primary"><span>✨</span> Primary Action</button>
|
|
38
|
+
<button class="btn btn-secondary">Secondary Action</button>
|
|
39
|
+
<button class="btn btn-outline">Outline Button</button>
|
|
40
|
+
<button class="btn btn-danger"><span>🗑️</span> Danger Action</button>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<div class="card">
|
|
45
|
+
<div class="label">Status Pills & Badges</div>
|
|
46
|
+
<div class="row">
|
|
47
|
+
<div class="badge"><span class="badge-dot"></span> In Progress</div>
|
|
48
|
+
<div class="badge badge-emerald"><span class="badge-dot"></span> Active / Healthy</div>
|
|
49
|
+
<div class="badge badge-amber"><span class="badge-dot"></span> Review Required</div>
|
|
50
|
+
<div class="badge badge-rose"><span class="badge-dot"></span> Error / Offline</div>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
|
|
54
|
+
<div class="card">
|
|
55
|
+
<div class="label">Form Controls</div>
|
|
56
|
+
<div class="row">
|
|
57
|
+
<label class="field">
|
|
58
|
+
<span>Project Name</span>
|
|
59
|
+
<input type="text" class="input" value="HtmlBoard Studio">
|
|
60
|
+
</label>
|
|
61
|
+
<label class="field">
|
|
62
|
+
<span>Environment Target</span>
|
|
63
|
+
<input type="text" class="input" value="production-edge-01">
|
|
64
|
+
</label>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
<div class="card">
|
|
69
|
+
<div class="label">Avatars</div>
|
|
70
|
+
<div class="row">
|
|
71
|
+
<div class="avatar">LC</div>
|
|
72
|
+
<div class="avatar" style="background: linear-gradient(135deg, #ec4899, #8b5cf6)">AM</div>
|
|
73
|
+
<div class="avatar" style="width: 44px; height: 44px; font-size: 16px">JS</div>
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
</body>
|
|
77
|
+
</html>
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Shared styles for every design in this folder: tokens, base and components.
|
|
3
|
+
* Designs link it (<link rel="stylesheet" href="../styles.css">) and keep only
|
|
4
|
+
* what is specific to them in their own <style>.
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
/* Tokens */
|
|
8
|
+
:root {
|
|
9
|
+
--bg: #0b0d13;
|
|
10
|
+
--surface: #141724;
|
|
11
|
+
--surface-2: #1c2030;
|
|
12
|
+
--border: #23283c;
|
|
13
|
+
--text: #f1f5f9;
|
|
14
|
+
--text-muted: #94a3b8;
|
|
15
|
+
--text-subtle: #64748b;
|
|
16
|
+
--accent: #6366f1;
|
|
17
|
+
--accent-hover: #4f46e5;
|
|
18
|
+
--accent-light: #818cf8;
|
|
19
|
+
--accent-glow: rgba(99, 102, 241, 0.35);
|
|
20
|
+
--emerald: #10b981;
|
|
21
|
+
--amber: #f59e0b;
|
|
22
|
+
--rose: #f43f5e;
|
|
23
|
+
--purple: #a855f7;
|
|
24
|
+
--radius: 8px;
|
|
25
|
+
--radius-lg: 14px;
|
|
26
|
+
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/* Base */
|
|
30
|
+
* {
|
|
31
|
+
box-sizing: border-box;
|
|
32
|
+
margin: 0;
|
|
33
|
+
padding: 0;
|
|
34
|
+
-webkit-font-smoothing: antialiased;
|
|
35
|
+
}
|
|
36
|
+
body {
|
|
37
|
+
font-family: var(--font);
|
|
38
|
+
background: var(--bg);
|
|
39
|
+
color: var(--text);
|
|
40
|
+
}
|
|
41
|
+
a { color: inherit; text-decoration: none; }
|
|
42
|
+
|
|
43
|
+
/* Text */
|
|
44
|
+
.muted { color: var(--text-muted); }
|
|
45
|
+
.label {
|
|
46
|
+
font-size: 12px;
|
|
47
|
+
font-weight: 600;
|
|
48
|
+
color: var(--text-subtle);
|
|
49
|
+
text-transform: uppercase;
|
|
50
|
+
letter-spacing: 0.06em;
|
|
51
|
+
}
|
|
52
|
+
.row {
|
|
53
|
+
display: flex;
|
|
54
|
+
align-items: center;
|
|
55
|
+
gap: 12px;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* Card */
|
|
59
|
+
.card {
|
|
60
|
+
background: var(--surface);
|
|
61
|
+
border: 1px solid var(--border);
|
|
62
|
+
border-radius: var(--radius-lg);
|
|
63
|
+
padding: 20px;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/* Buttons */
|
|
67
|
+
.btn {
|
|
68
|
+
display: inline-flex;
|
|
69
|
+
align-items: center;
|
|
70
|
+
gap: 8px;
|
|
71
|
+
padding: 9px 16px;
|
|
72
|
+
border: 1px solid transparent;
|
|
73
|
+
border-radius: var(--radius);
|
|
74
|
+
font: 600 13px var(--font);
|
|
75
|
+
color: var(--text);
|
|
76
|
+
background: var(--surface-2);
|
|
77
|
+
cursor: pointer;
|
|
78
|
+
transition: background 0.15s ease;
|
|
79
|
+
}
|
|
80
|
+
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); }
|
|
81
|
+
.btn-primary:hover { background: var(--accent-hover); }
|
|
82
|
+
.btn-secondary { border-color: var(--border); }
|
|
83
|
+
.btn-secondary:hover { background: #262c44; }
|
|
84
|
+
.btn-outline { background: transparent; border-color: #3b4260; }
|
|
85
|
+
.btn-outline:hover { background: rgba(255, 255, 255, 0.05); }
|
|
86
|
+
.btn-danger { background: rgba(244, 63, 94, 0.15); border-color: rgba(244, 63, 94, 0.3); color: var(--rose); }
|
|
87
|
+
.btn-danger:hover { background: rgba(244, 63, 94, 0.25); }
|
|
88
|
+
|
|
89
|
+
/* Badges */
|
|
90
|
+
.badge {
|
|
91
|
+
display: inline-flex;
|
|
92
|
+
align-items: center;
|
|
93
|
+
gap: 6px;
|
|
94
|
+
padding: 4px 10px;
|
|
95
|
+
border-radius: 20px;
|
|
96
|
+
font-size: 12px;
|
|
97
|
+
font-weight: 600;
|
|
98
|
+
background: rgba(99, 102, 241, 0.15);
|
|
99
|
+
color: var(--accent-light);
|
|
100
|
+
}
|
|
101
|
+
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
|
|
102
|
+
.badge-emerald { background: rgba(16, 185, 129, 0.15); color: var(--emerald); }
|
|
103
|
+
.badge-amber { background: rgba(245, 158, 11, 0.15); color: var(--amber); }
|
|
104
|
+
.badge-rose { background: rgba(244, 63, 94, 0.15); color: var(--rose); }
|
|
105
|
+
|
|
106
|
+
/* Inputs */
|
|
107
|
+
.field { display: flex; flex-direction: column; gap: 6px; }
|
|
108
|
+
.field > span { font-size: 12px; font-weight: 500; color: var(--text-muted); }
|
|
109
|
+
.input {
|
|
110
|
+
background: var(--bg);
|
|
111
|
+
border: 1px solid var(--border);
|
|
112
|
+
border-radius: var(--radius);
|
|
113
|
+
padding: 9px 12px;
|
|
114
|
+
font: 13px var(--font);
|
|
115
|
+
color: var(--text);
|
|
116
|
+
outline: none;
|
|
117
|
+
transition: border-color 0.15s ease;
|
|
118
|
+
}
|
|
119
|
+
.input:focus { border-color: var(--accent); }
|
|
120
|
+
|
|
121
|
+
/* Avatar */
|
|
122
|
+
.avatar {
|
|
123
|
+
display: flex;
|
|
124
|
+
align-items: center;
|
|
125
|
+
justify-content: center;
|
|
126
|
+
flex-shrink: 0;
|
|
127
|
+
width: 36px;
|
|
128
|
+
height: 36px;
|
|
129
|
+
border-radius: 50%;
|
|
130
|
+
background: linear-gradient(135deg, var(--accent), var(--purple));
|
|
131
|
+
font-size: 14px;
|
|
132
|
+
font-weight: 700;
|
|
133
|
+
}
|