@fastwork/xosmoz-svelte 0.0.21
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 +159 -0
- package/dist/assets/favicon.svg +1 -0
- package/dist/components/Button.svelte +118 -0
- package/dist/components/Button.svelte.d.ts +36 -0
- package/dist/docs/GettingStarted.mdx +190 -0
- package/dist/docs/Welcome.mdx +161 -0
- package/dist/docs/foundation/APCA.svelte +358 -0
- package/dist/docs/foundation/APCA.svelte.d.ts +18 -0
- package/dist/docs/foundation/BoxShadows.svelte +204 -0
- package/dist/docs/foundation/BoxShadows.svelte.d.ts +3 -0
- package/dist/docs/foundation/Colors.svelte +900 -0
- package/dist/docs/foundation/Colors.svelte.d.ts +3 -0
- package/dist/docs/foundation/KitchenSink.svelte +1581 -0
- package/dist/docs/foundation/KitchenSink.svelte.d.ts +18 -0
- package/dist/docs/foundation/Themes.svelte +1048 -0
- package/dist/docs/foundation/Themes.svelte.d.ts +3 -0
- package/dist/docs/foundation/Typography.svelte +622 -0
- package/dist/docs/foundation/Typography.svelte.d.ts +3 -0
- package/dist/index.d.ts +21 -0
- package/dist/index.js +21 -0
- package/dist/styles.css +25 -0
- package/dist/utils/clipboard.d.ts +31 -0
- package/dist/utils/clipboard.js +57 -0
- package/dist/utils/colorCalculations.d.ts +32 -0
- package/dist/utils/colorCalculations.js +69 -0
- package/dist/utils/themeDetection.d.ts +20 -0
- package/dist/utils/themeDetection.js +48 -0
- package/package.json +89 -0
|
@@ -0,0 +1,1581 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { onDestroy } from 'svelte'
|
|
3
|
+
import { watchThemeChanges } from '../../utils/themeDetection'
|
|
4
|
+
|
|
5
|
+
let cleanupThemeWatcher: (() => void) | null = null
|
|
6
|
+
|
|
7
|
+
// Watch for theme changes to trigger reactivity
|
|
8
|
+
cleanupThemeWatcher = watchThemeChanges(() => {
|
|
9
|
+
// Theme changes are handled automatically via CSS variables
|
|
10
|
+
// This watcher ensures Svelte reactivity triggers on theme changes
|
|
11
|
+
})
|
|
12
|
+
|
|
13
|
+
onDestroy(() => {
|
|
14
|
+
cleanupThemeWatcher?.()
|
|
15
|
+
})
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<div class="kitchen-sink">
|
|
19
|
+
<div class="intro">
|
|
20
|
+
<h1>Kitchen Sink</h1>
|
|
21
|
+
<h2>
|
|
22
|
+
🤖🤖🤖 AI generated UI using Xosmoz design tokens for demo purposes
|
|
23
|
+
</h2>
|
|
24
|
+
<br />
|
|
25
|
+
<p class="description">
|
|
26
|
+
A showcase of mock UI components built entirely with Xosmoz color
|
|
27
|
+
tokens. These examples demonstrate how to use semantic colors to
|
|
28
|
+
create consistent, theme-aware interfaces.
|
|
29
|
+
</p>
|
|
30
|
+
<p class="theme-note">
|
|
31
|
+
<i class="fas fa-lightbulb"></i> Try switching between light and dark
|
|
32
|
+
themes using the toolbar to see how all components adapt automatically.
|
|
33
|
+
</p>
|
|
34
|
+
</div>
|
|
35
|
+
|
|
36
|
+
<!-- Buttons Section -->
|
|
37
|
+
<section class="component-section">
|
|
38
|
+
<h2>Buttons</h2>
|
|
39
|
+
<p class="section-desc">
|
|
40
|
+
Semantic color variants for different button actions
|
|
41
|
+
</p>
|
|
42
|
+
|
|
43
|
+
<div class="component-grid">
|
|
44
|
+
<div class="component-example">
|
|
45
|
+
<h3>Solid Buttons</h3>
|
|
46
|
+
<div class="button-group">
|
|
47
|
+
<button class="btn btn-primary">Primary</button>
|
|
48
|
+
<button class="btn btn-danger">Danger</button>
|
|
49
|
+
<button class="btn btn-success">Success</button>
|
|
50
|
+
<button class="btn btn-warning">Warning</button>
|
|
51
|
+
<button class="btn btn-info">Info</button>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
|
|
55
|
+
<div class="component-example">
|
|
56
|
+
<h3>Outline Buttons</h3>
|
|
57
|
+
<div class="button-group">
|
|
58
|
+
<button class="btn btn-outline-primary">Primary</button>
|
|
59
|
+
<button class="btn btn-outline-danger">Danger</button>
|
|
60
|
+
<button class="btn btn-outline-success">Success</button>
|
|
61
|
+
<button class="btn btn-outline-warning">Warning</button>
|
|
62
|
+
<button class="btn btn-outline-info">Info</button>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
<div class="component-example">
|
|
67
|
+
<h3>Soft Buttons</h3>
|
|
68
|
+
<div class="button-group">
|
|
69
|
+
<button class="btn btn-soft-primary">Primary</button>
|
|
70
|
+
<button class="btn btn-soft-danger">Danger</button>
|
|
71
|
+
<button class="btn btn-soft-success">Success</button>
|
|
72
|
+
<button class="btn btn-soft-warning">Warning</button>
|
|
73
|
+
<button class="btn btn-soft-info">Info</button>
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
</section>
|
|
78
|
+
|
|
79
|
+
<!-- Messages/Alerts Section -->
|
|
80
|
+
<section class="component-section">
|
|
81
|
+
<h2>Messages & Alerts</h2>
|
|
82
|
+
<p class="section-desc">
|
|
83
|
+
Color-coded feedback messages using semantic tokens
|
|
84
|
+
</p>
|
|
85
|
+
|
|
86
|
+
<div class="component-grid">
|
|
87
|
+
<div class="message message-primary">
|
|
88
|
+
<strong>Info:</strong> This is an informational message with important
|
|
89
|
+
details.
|
|
90
|
+
</div>
|
|
91
|
+
<div class="message message-success">
|
|
92
|
+
<strong>Success:</strong> Your action was completed successfully!
|
|
93
|
+
</div>
|
|
94
|
+
<div class="message message-warning">
|
|
95
|
+
<strong>Warning:</strong> Please review this before proceeding.
|
|
96
|
+
</div>
|
|
97
|
+
<div class="message message-danger">
|
|
98
|
+
<strong>Error:</strong> Something went wrong. Please try again.
|
|
99
|
+
</div>
|
|
100
|
+
<div class="message message-info">
|
|
101
|
+
<strong>Notice:</strong> Here's something you should know about.
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
</section>
|
|
105
|
+
|
|
106
|
+
<!-- Badges Section -->
|
|
107
|
+
<section class="component-section">
|
|
108
|
+
<h2>Badges</h2>
|
|
109
|
+
<p class="section-desc">Small status indicators with semantic colors</p>
|
|
110
|
+
|
|
111
|
+
<div class="component-grid">
|
|
112
|
+
<div class="component-example">
|
|
113
|
+
<h3>Solid Badges</h3>
|
|
114
|
+
<div class="badge-group">
|
|
115
|
+
<span class="badge badge-primary">Primary</span>
|
|
116
|
+
<span class="badge badge-danger">Danger</span>
|
|
117
|
+
<span class="badge badge-success">Success</span>
|
|
118
|
+
<span class="badge badge-warning">Warning</span>
|
|
119
|
+
<span class="badge badge-info">Info</span>
|
|
120
|
+
</div>
|
|
121
|
+
</div>
|
|
122
|
+
|
|
123
|
+
<div class="component-example">
|
|
124
|
+
<h3>Soft Badges</h3>
|
|
125
|
+
<div class="badge-group">
|
|
126
|
+
<span class="badge badge-soft-primary">Primary</span>
|
|
127
|
+
<span class="badge badge-soft-danger">Danger</span>
|
|
128
|
+
<span class="badge badge-soft-success">Success</span>
|
|
129
|
+
<span class="badge badge-soft-warning">Warning</span>
|
|
130
|
+
<span class="badge badge-soft-info">Info</span>
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
|
|
134
|
+
<div class="component-example">
|
|
135
|
+
<h3>Outline Badges</h3>
|
|
136
|
+
<div class="badge-group">
|
|
137
|
+
<span class="badge badge-outline-primary">Primary</span>
|
|
138
|
+
<span class="badge badge-outline-danger">Danger</span>
|
|
139
|
+
<span class="badge badge-outline-success">Success</span>
|
|
140
|
+
<span class="badge badge-outline-warning">Warning</span>
|
|
141
|
+
<span class="badge badge-outline-info">Info</span>
|
|
142
|
+
</div>
|
|
143
|
+
</div>
|
|
144
|
+
</div>
|
|
145
|
+
</section>
|
|
146
|
+
|
|
147
|
+
<!-- Cards Section -->
|
|
148
|
+
<section class="component-section">
|
|
149
|
+
<h2>Cards</h2>
|
|
150
|
+
<p class="section-desc">Container components using base color tokens</p>
|
|
151
|
+
|
|
152
|
+
<div class="cards-grid">
|
|
153
|
+
<div class="card">
|
|
154
|
+
<h3>Default Card</h3>
|
|
155
|
+
<p>
|
|
156
|
+
Using base background and border colors that adapt to the
|
|
157
|
+
current theme.
|
|
158
|
+
</p>
|
|
159
|
+
<button class="btn btn-primary">Action</button>
|
|
160
|
+
</div>
|
|
161
|
+
</div>
|
|
162
|
+
</section>
|
|
163
|
+
|
|
164
|
+
<!-- Complex Layout Section -->
|
|
165
|
+
<section class="component-section">
|
|
166
|
+
<h2>Complex Layout Example</h2>
|
|
167
|
+
<p class="section-desc">
|
|
168
|
+
A realistic dashboard layout showcasing multiple color tokens
|
|
169
|
+
working together
|
|
170
|
+
</p>
|
|
171
|
+
|
|
172
|
+
<div class="dashboard">
|
|
173
|
+
<!-- Dashboard Header -->
|
|
174
|
+
<div class="dashboard-header">
|
|
175
|
+
<div class="header-left">
|
|
176
|
+
<h3>Project Dashboard</h3>
|
|
177
|
+
<p class="header-subtitle">
|
|
178
|
+
Overview of all active projects
|
|
179
|
+
</p>
|
|
180
|
+
</div>
|
|
181
|
+
<div class="header-actions">
|
|
182
|
+
<button class="btn btn-outline-primary">
|
|
183
|
+
<i class="fas fa-filter"></i> Filter
|
|
184
|
+
</button>
|
|
185
|
+
<button class="btn btn-primary">
|
|
186
|
+
<i class="fas fa-plus"></i> New Project
|
|
187
|
+
</button>
|
|
188
|
+
</div>
|
|
189
|
+
</div>
|
|
190
|
+
|
|
191
|
+
<!-- Stats Grid -->
|
|
192
|
+
<div class="stats-grid">
|
|
193
|
+
<div class="stat-card stat-primary">
|
|
194
|
+
<div class="stat-icon">
|
|
195
|
+
<i class="fas fa-project-diagram"></i>
|
|
196
|
+
</div>
|
|
197
|
+
<div class="stat-content">
|
|
198
|
+
<div class="stat-value">24</div>
|
|
199
|
+
<div class="stat-label">Active Projects</div>
|
|
200
|
+
</div>
|
|
201
|
+
<div class="stat-trend stat-trend-up">
|
|
202
|
+
<i class="fas fa-arrow-up"></i> 12%
|
|
203
|
+
</div>
|
|
204
|
+
</div>
|
|
205
|
+
|
|
206
|
+
<div class="stat-card stat-success">
|
|
207
|
+
<div class="stat-icon">
|
|
208
|
+
<i class="fas fa-check-circle"></i>
|
|
209
|
+
</div>
|
|
210
|
+
<div class="stat-content">
|
|
211
|
+
<div class="stat-value">156</div>
|
|
212
|
+
<div class="stat-label">Completed Tasks</div>
|
|
213
|
+
</div>
|
|
214
|
+
<div class="stat-trend stat-trend-up">
|
|
215
|
+
<i class="fas fa-arrow-up"></i> 8%
|
|
216
|
+
</div>
|
|
217
|
+
</div>
|
|
218
|
+
|
|
219
|
+
<div class="stat-card stat-warning">
|
|
220
|
+
<div class="stat-icon">
|
|
221
|
+
<i class="fas fa-clock"></i>
|
|
222
|
+
</div>
|
|
223
|
+
<div class="stat-content">
|
|
224
|
+
<div class="stat-value">7</div>
|
|
225
|
+
<div class="stat-label">Pending Review</div>
|
|
226
|
+
</div>
|
|
227
|
+
<div class="stat-trend stat-trend-down">
|
|
228
|
+
<i class="fas fa-arrow-down"></i> 3%
|
|
229
|
+
</div>
|
|
230
|
+
</div>
|
|
231
|
+
|
|
232
|
+
<div class="stat-card stat-danger">
|
|
233
|
+
<div class="stat-icon">
|
|
234
|
+
<i class="fas fa-exclamation-triangle"></i>
|
|
235
|
+
</div>
|
|
236
|
+
<div class="stat-content">
|
|
237
|
+
<div class="stat-value">3</div>
|
|
238
|
+
<div class="stat-label">Overdue</div>
|
|
239
|
+
</div>
|
|
240
|
+
<div class="stat-trend stat-trend-up">
|
|
241
|
+
<i class="fas fa-arrow-up"></i> 2%
|
|
242
|
+
</div>
|
|
243
|
+
</div>
|
|
244
|
+
</div>
|
|
245
|
+
|
|
246
|
+
<!-- Main Content Grid -->
|
|
247
|
+
<div class="dashboard-grid">
|
|
248
|
+
<!-- Left Column -->
|
|
249
|
+
<div class="dashboard-col-left">
|
|
250
|
+
<!-- Recent Activity -->
|
|
251
|
+
<div class="activity-card">
|
|
252
|
+
<div class="card-header">
|
|
253
|
+
<h4>Recent Activity</h4>
|
|
254
|
+
<button class="btn-text">View All</button>
|
|
255
|
+
</div>
|
|
256
|
+
<div class="activity-list">
|
|
257
|
+
<div class="activity-item">
|
|
258
|
+
<div
|
|
259
|
+
class="activity-icon activity-icon-success"
|
|
260
|
+
>
|
|
261
|
+
<i class="fas fa-check"></i>
|
|
262
|
+
</div>
|
|
263
|
+
<div class="activity-content">
|
|
264
|
+
<div class="activity-title">
|
|
265
|
+
Task completed
|
|
266
|
+
</div>
|
|
267
|
+
<div class="activity-description">
|
|
268
|
+
Design system documentation updated
|
|
269
|
+
</div>
|
|
270
|
+
<div class="activity-time">2 hours ago</div>
|
|
271
|
+
</div>
|
|
272
|
+
</div>
|
|
273
|
+
|
|
274
|
+
<div class="activity-item">
|
|
275
|
+
<div
|
|
276
|
+
class="activity-icon activity-icon-primary"
|
|
277
|
+
>
|
|
278
|
+
<i class="fas fa-comment"></i>
|
|
279
|
+
</div>
|
|
280
|
+
<div class="activity-content">
|
|
281
|
+
<div class="activity-title">
|
|
282
|
+
New comment
|
|
283
|
+
</div>
|
|
284
|
+
<div class="activity-description">
|
|
285
|
+
John replied to your message
|
|
286
|
+
</div>
|
|
287
|
+
<div class="activity-time">4 hours ago</div>
|
|
288
|
+
</div>
|
|
289
|
+
</div>
|
|
290
|
+
|
|
291
|
+
<div class="activity-item">
|
|
292
|
+
<div
|
|
293
|
+
class="activity-icon activity-icon-warning"
|
|
294
|
+
>
|
|
295
|
+
<i class="fas fa-clock"></i>
|
|
296
|
+
</div>
|
|
297
|
+
<div class="activity-content">
|
|
298
|
+
<div class="activity-title">
|
|
299
|
+
Deadline approaching
|
|
300
|
+
</div>
|
|
301
|
+
<div class="activity-description">
|
|
302
|
+
Q4 Report due in 2 days
|
|
303
|
+
</div>
|
|
304
|
+
<div class="activity-time">6 hours ago</div>
|
|
305
|
+
</div>
|
|
306
|
+
</div>
|
|
307
|
+
|
|
308
|
+
<div class="activity-item">
|
|
309
|
+
<div class="activity-icon activity-icon-info">
|
|
310
|
+
<i class="fas fa-upload"></i>
|
|
311
|
+
</div>
|
|
312
|
+
<div class="activity-content">
|
|
313
|
+
<div class="activity-title">
|
|
314
|
+
File uploaded
|
|
315
|
+
</div>
|
|
316
|
+
<div class="activity-description">
|
|
317
|
+
presentation.pdf added to shared folder
|
|
318
|
+
</div>
|
|
319
|
+
<div class="activity-time">Yesterday</div>
|
|
320
|
+
</div>
|
|
321
|
+
</div>
|
|
322
|
+
</div>
|
|
323
|
+
</div>
|
|
324
|
+
</div>
|
|
325
|
+
|
|
326
|
+
<!-- Right Column -->
|
|
327
|
+
<div class="dashboard-col-right">
|
|
328
|
+
<!-- Team Members -->
|
|
329
|
+
<div class="team-card">
|
|
330
|
+
<div class="card-header">
|
|
331
|
+
<h4>Team Members</h4>
|
|
332
|
+
<button class="btn-text">
|
|
333
|
+
<i class="fas fa-user-plus"></i>
|
|
334
|
+
</button>
|
|
335
|
+
</div>
|
|
336
|
+
<div class="team-list">
|
|
337
|
+
<div class="team-member">
|
|
338
|
+
<div
|
|
339
|
+
class="member-avatar member-avatar-primary"
|
|
340
|
+
>
|
|
341
|
+
SA
|
|
342
|
+
</div>
|
|
343
|
+
<div class="member-info">
|
|
344
|
+
<div class="member-name">
|
|
345
|
+
Sarah Anderson
|
|
346
|
+
</div>
|
|
347
|
+
<div class="member-role">
|
|
348
|
+
Project Manager
|
|
349
|
+
</div>
|
|
350
|
+
</div>
|
|
351
|
+
<span class="badge badge-soft-success"
|
|
352
|
+
>Online</span
|
|
353
|
+
>
|
|
354
|
+
</div>
|
|
355
|
+
|
|
356
|
+
<div class="team-member">
|
|
357
|
+
<div
|
|
358
|
+
class="member-avatar member-avatar-success"
|
|
359
|
+
>
|
|
360
|
+
MC
|
|
361
|
+
</div>
|
|
362
|
+
<div class="member-info">
|
|
363
|
+
<div class="member-name">Michael Chen</div>
|
|
364
|
+
<div class="member-role">
|
|
365
|
+
Lead Developer
|
|
366
|
+
</div>
|
|
367
|
+
</div>
|
|
368
|
+
<span class="badge badge-soft-success"
|
|
369
|
+
>Online</span
|
|
370
|
+
>
|
|
371
|
+
</div>
|
|
372
|
+
|
|
373
|
+
<div class="team-member">
|
|
374
|
+
<div
|
|
375
|
+
class="member-avatar member-avatar-warning"
|
|
376
|
+
>
|
|
377
|
+
ET
|
|
378
|
+
</div>
|
|
379
|
+
<div class="member-info">
|
|
380
|
+
<div class="member-name">Emma Thompson</div>
|
|
381
|
+
<div class="member-role">
|
|
382
|
+
UI/UX Designer
|
|
383
|
+
</div>
|
|
384
|
+
</div>
|
|
385
|
+
<span class="badge badge-soft-warning"
|
|
386
|
+
>Away</span
|
|
387
|
+
>
|
|
388
|
+
</div>
|
|
389
|
+
|
|
390
|
+
<div class="team-member">
|
|
391
|
+
<div class="member-avatar member-avatar-info">
|
|
392
|
+
DR
|
|
393
|
+
</div>
|
|
394
|
+
<div class="member-info">
|
|
395
|
+
<div class="member-name">
|
|
396
|
+
David Rodriguez
|
|
397
|
+
</div>
|
|
398
|
+
<div class="member-role">QA Engineer</div>
|
|
399
|
+
</div>
|
|
400
|
+
<span class="badge badge-soft-danger"
|
|
401
|
+
>Offline</span
|
|
402
|
+
>
|
|
403
|
+
</div>
|
|
404
|
+
</div>
|
|
405
|
+
</div>
|
|
406
|
+
|
|
407
|
+
<!-- Quick Actions -->
|
|
408
|
+
<div class="actions-card">
|
|
409
|
+
<div class="card-header">
|
|
410
|
+
<h4>Quick Actions</h4>
|
|
411
|
+
</div>
|
|
412
|
+
<div class="actions-grid">
|
|
413
|
+
<button class="action-button action-button-primary">
|
|
414
|
+
<i class="fas fa-file-alt"></i>
|
|
415
|
+
<span>New Document</span>
|
|
416
|
+
</button>
|
|
417
|
+
<button class="action-button action-button-success">
|
|
418
|
+
<i class="fas fa-calendar-plus"></i>
|
|
419
|
+
<span>Schedule Meeting</span>
|
|
420
|
+
</button>
|
|
421
|
+
<button class="action-button action-button-warning">
|
|
422
|
+
<i class="fas fa-clipboard-list"></i>
|
|
423
|
+
<span>Create Task</span>
|
|
424
|
+
</button>
|
|
425
|
+
<button class="action-button action-button-info">
|
|
426
|
+
<i class="fas fa-share-alt"></i>
|
|
427
|
+
<span>Share Files</span>
|
|
428
|
+
</button>
|
|
429
|
+
</div>
|
|
430
|
+
</div>
|
|
431
|
+
</div>
|
|
432
|
+
</div>
|
|
433
|
+
</div>
|
|
434
|
+
</section>
|
|
435
|
+
|
|
436
|
+
<!-- Table Section -->
|
|
437
|
+
<section class="component-section">
|
|
438
|
+
<h2>Tables</h2>
|
|
439
|
+
<p class="section-desc">
|
|
440
|
+
Data tables using base and semantic color tokens
|
|
441
|
+
</p>
|
|
442
|
+
|
|
443
|
+
<div class="component-example">
|
|
444
|
+
<h3>Default Table</h3>
|
|
445
|
+
<div class="table-wrapper">
|
|
446
|
+
<table class="table">
|
|
447
|
+
<thead>
|
|
448
|
+
<tr>
|
|
449
|
+
<th>Name</th>
|
|
450
|
+
<th>Status</th>
|
|
451
|
+
<th>Role</th>
|
|
452
|
+
<th>Email</th>
|
|
453
|
+
<th>Actions</th>
|
|
454
|
+
</tr>
|
|
455
|
+
</thead>
|
|
456
|
+
<tbody>
|
|
457
|
+
<tr>
|
|
458
|
+
<td>
|
|
459
|
+
<div class="user-cell">
|
|
460
|
+
<div class="avatar">JD</div>
|
|
461
|
+
<span>John Doe</span>
|
|
462
|
+
</div>
|
|
463
|
+
</td>
|
|
464
|
+
<td
|
|
465
|
+
><span class="badge badge-success">Active</span
|
|
466
|
+
></td
|
|
467
|
+
>
|
|
468
|
+
<td>Administrator</td>
|
|
469
|
+
<td>john.doe@example.com</td>
|
|
470
|
+
<td>
|
|
471
|
+
<div class="action-buttons">
|
|
472
|
+
<button
|
|
473
|
+
class="btn-icon btn-icon-primary"
|
|
474
|
+
title="Edit"
|
|
475
|
+
>
|
|
476
|
+
<i class="fas fa-edit"></i>
|
|
477
|
+
</button>
|
|
478
|
+
<button
|
|
479
|
+
class="btn-icon btn-icon-danger"
|
|
480
|
+
title="Delete"
|
|
481
|
+
>
|
|
482
|
+
<i class="fas fa-trash"></i>
|
|
483
|
+
</button>
|
|
484
|
+
</div>
|
|
485
|
+
</td>
|
|
486
|
+
</tr>
|
|
487
|
+
<tr>
|
|
488
|
+
<td>
|
|
489
|
+
<div class="user-cell">
|
|
490
|
+
<div class="avatar">JS</div>
|
|
491
|
+
<span>Jane Smith</span>
|
|
492
|
+
</div>
|
|
493
|
+
</td>
|
|
494
|
+
<td
|
|
495
|
+
><span class="badge badge-success">Active</span
|
|
496
|
+
></td
|
|
497
|
+
>
|
|
498
|
+
<td>Developer</td>
|
|
499
|
+
<td>jane.smith@example.com</td>
|
|
500
|
+
<td>
|
|
501
|
+
<div class="action-buttons">
|
|
502
|
+
<button
|
|
503
|
+
class="btn-icon btn-icon-primary"
|
|
504
|
+
title="Edit"
|
|
505
|
+
>
|
|
506
|
+
<i class="fas fa-edit"></i>
|
|
507
|
+
</button>
|
|
508
|
+
<button
|
|
509
|
+
class="btn-icon btn-icon-danger"
|
|
510
|
+
title="Delete"
|
|
511
|
+
>
|
|
512
|
+
<i class="fas fa-trash"></i>
|
|
513
|
+
</button>
|
|
514
|
+
</div>
|
|
515
|
+
</td>
|
|
516
|
+
</tr>
|
|
517
|
+
<tr>
|
|
518
|
+
<td>
|
|
519
|
+
<div class="user-cell">
|
|
520
|
+
<div class="avatar">BJ</div>
|
|
521
|
+
<span>Bob Johnson</span>
|
|
522
|
+
</div>
|
|
523
|
+
</td>
|
|
524
|
+
<td
|
|
525
|
+
><span class="badge badge-warning">Pending</span
|
|
526
|
+
></td
|
|
527
|
+
>
|
|
528
|
+
<td>Designer</td>
|
|
529
|
+
<td>bob.johnson@example.com</td>
|
|
530
|
+
<td>
|
|
531
|
+
<div class="action-buttons">
|
|
532
|
+
<button
|
|
533
|
+
class="btn-icon btn-icon-primary"
|
|
534
|
+
title="Edit"
|
|
535
|
+
>
|
|
536
|
+
<i class="fas fa-edit"></i>
|
|
537
|
+
</button>
|
|
538
|
+
<button
|
|
539
|
+
class="btn-icon btn-icon-danger"
|
|
540
|
+
title="Delete"
|
|
541
|
+
>
|
|
542
|
+
<i class="fas fa-trash"></i>
|
|
543
|
+
</button>
|
|
544
|
+
</div>
|
|
545
|
+
</td>
|
|
546
|
+
</tr>
|
|
547
|
+
<tr>
|
|
548
|
+
<td>
|
|
549
|
+
<div class="user-cell">
|
|
550
|
+
<div class="avatar">AW</div>
|
|
551
|
+
<span>Alice Williams</span>
|
|
552
|
+
</div>
|
|
553
|
+
</td>
|
|
554
|
+
<td
|
|
555
|
+
><span class="badge badge-danger">Inactive</span
|
|
556
|
+
></td
|
|
557
|
+
>
|
|
558
|
+
<td>Manager</td>
|
|
559
|
+
<td>alice.williams@example.com</td>
|
|
560
|
+
<td>
|
|
561
|
+
<div class="action-buttons">
|
|
562
|
+
<button
|
|
563
|
+
class="btn-icon btn-icon-primary"
|
|
564
|
+
title="Edit"
|
|
565
|
+
>
|
|
566
|
+
<i class="fas fa-edit"></i>
|
|
567
|
+
</button>
|
|
568
|
+
<button
|
|
569
|
+
class="btn-icon btn-icon-danger"
|
|
570
|
+
title="Delete"
|
|
571
|
+
>
|
|
572
|
+
<i class="fas fa-trash"></i>
|
|
573
|
+
</button>
|
|
574
|
+
</div>
|
|
575
|
+
</td>
|
|
576
|
+
</tr>
|
|
577
|
+
<tr>
|
|
578
|
+
<td>
|
|
579
|
+
<div class="user-cell">
|
|
580
|
+
<div class="avatar">CD</div>
|
|
581
|
+
<span>Charlie Davis</span>
|
|
582
|
+
</div>
|
|
583
|
+
</td>
|
|
584
|
+
<td
|
|
585
|
+
><span class="badge badge-info">Invited</span
|
|
586
|
+
></td
|
|
587
|
+
>
|
|
588
|
+
<td>Developer</td>
|
|
589
|
+
<td>charlie.davis@example.com</td>
|
|
590
|
+
<td>
|
|
591
|
+
<div class="action-buttons">
|
|
592
|
+
<button
|
|
593
|
+
class="btn-icon btn-icon-primary"
|
|
594
|
+
title="Edit"
|
|
595
|
+
>
|
|
596
|
+
<i class="fas fa-edit"></i>
|
|
597
|
+
</button>
|
|
598
|
+
<button
|
|
599
|
+
class="btn-icon btn-icon-danger"
|
|
600
|
+
title="Delete"
|
|
601
|
+
>
|
|
602
|
+
<i class="fas fa-trash"></i>
|
|
603
|
+
</button>
|
|
604
|
+
</div>
|
|
605
|
+
</td>
|
|
606
|
+
</tr>
|
|
607
|
+
</tbody>
|
|
608
|
+
</table>
|
|
609
|
+
</div>
|
|
610
|
+
</div>
|
|
611
|
+
|
|
612
|
+
<div class="component-example" style="margin-top: 2rem;">
|
|
613
|
+
<h3>Striped Table</h3>
|
|
614
|
+
<div class="table-wrapper">
|
|
615
|
+
<table class="table table-striped">
|
|
616
|
+
<thead>
|
|
617
|
+
<tr>
|
|
618
|
+
<th>Product</th>
|
|
619
|
+
<th>Category</th>
|
|
620
|
+
<th>Price</th>
|
|
621
|
+
<th>Stock</th>
|
|
622
|
+
<th>Status</th>
|
|
623
|
+
</tr>
|
|
624
|
+
</thead>
|
|
625
|
+
<tbody>
|
|
626
|
+
<tr>
|
|
627
|
+
<td><strong>Laptop Pro 15</strong></td>
|
|
628
|
+
<td>Electronics</td>
|
|
629
|
+
<td>$1,299.00</td>
|
|
630
|
+
<td>45</td>
|
|
631
|
+
<td
|
|
632
|
+
><span class="badge badge-soft-success"
|
|
633
|
+
>In Stock</span
|
|
634
|
+
></td
|
|
635
|
+
>
|
|
636
|
+
</tr>
|
|
637
|
+
<tr>
|
|
638
|
+
<td><strong>Wireless Mouse</strong></td>
|
|
639
|
+
<td>Accessories</td>
|
|
640
|
+
<td>$29.99</td>
|
|
641
|
+
<td>150</td>
|
|
642
|
+
<td
|
|
643
|
+
><span class="badge badge-soft-success"
|
|
644
|
+
>In Stock</span
|
|
645
|
+
></td
|
|
646
|
+
>
|
|
647
|
+
</tr>
|
|
648
|
+
<tr>
|
|
649
|
+
<td><strong>USB-C Cable</strong></td>
|
|
650
|
+
<td>Accessories</td>
|
|
651
|
+
<td>$12.99</td>
|
|
652
|
+
<td>8</td>
|
|
653
|
+
<td
|
|
654
|
+
><span class="badge badge-soft-warning"
|
|
655
|
+
>Low Stock</span
|
|
656
|
+
></td
|
|
657
|
+
>
|
|
658
|
+
</tr>
|
|
659
|
+
<tr>
|
|
660
|
+
<td><strong>Monitor 27"</strong></td>
|
|
661
|
+
<td>Electronics</td>
|
|
662
|
+
<td>$449.00</td>
|
|
663
|
+
<td>0</td>
|
|
664
|
+
<td
|
|
665
|
+
><span class="badge badge-soft-danger"
|
|
666
|
+
>Out of Stock</span
|
|
667
|
+
></td
|
|
668
|
+
>
|
|
669
|
+
</tr>
|
|
670
|
+
<tr>
|
|
671
|
+
<td><strong>Keyboard Mechanical</strong></td>
|
|
672
|
+
<td>Accessories</td>
|
|
673
|
+
<td>$89.99</td>
|
|
674
|
+
<td>22</td>
|
|
675
|
+
<td
|
|
676
|
+
><span class="badge badge-soft-success"
|
|
677
|
+
>In Stock</span
|
|
678
|
+
></td
|
|
679
|
+
>
|
|
680
|
+
</tr>
|
|
681
|
+
</tbody>
|
|
682
|
+
</table>
|
|
683
|
+
</div>
|
|
684
|
+
</div>
|
|
685
|
+
</section>
|
|
686
|
+
</div>
|
|
687
|
+
|
|
688
|
+
<style>
|
|
689
|
+
.kitchen-sink {
|
|
690
|
+
padding: 2rem 1.5rem;
|
|
691
|
+
max-width: 1200px;
|
|
692
|
+
margin: 0 auto;
|
|
693
|
+
color: var(--xz-color-content-100);
|
|
694
|
+
background-color: var(--xz-color-bg-100);
|
|
695
|
+
}
|
|
696
|
+
|
|
697
|
+
.intro {
|
|
698
|
+
margin-bottom: 3rem;
|
|
699
|
+
}
|
|
700
|
+
|
|
701
|
+
.intro h1 {
|
|
702
|
+
font-size: 2.5rem;
|
|
703
|
+
font-weight: 700;
|
|
704
|
+
margin-bottom: 1rem;
|
|
705
|
+
color: var(--xz-color-content-100);
|
|
706
|
+
}
|
|
707
|
+
|
|
708
|
+
.description {
|
|
709
|
+
font-size: 1.125rem;
|
|
710
|
+
color: var(--xz-color-content-200);
|
|
711
|
+
margin-bottom: 1rem;
|
|
712
|
+
line-height: 1.6;
|
|
713
|
+
}
|
|
714
|
+
|
|
715
|
+
.theme-note {
|
|
716
|
+
padding: 1rem;
|
|
717
|
+
background: var(--xz-color-primary-soft-100);
|
|
718
|
+
border-left: 4px solid var(--xz-color-primary-bg-100);
|
|
719
|
+
border-radius: 0.375rem;
|
|
720
|
+
color: var(--xz-color-primary-content-100);
|
|
721
|
+
font-size: 0.9375rem;
|
|
722
|
+
}
|
|
723
|
+
|
|
724
|
+
.theme-note i {
|
|
725
|
+
margin-right: 0.5rem;
|
|
726
|
+
}
|
|
727
|
+
|
|
728
|
+
.component-section {
|
|
729
|
+
margin-bottom: 3rem;
|
|
730
|
+
}
|
|
731
|
+
|
|
732
|
+
.component-section h2 {
|
|
733
|
+
font-size: 2rem;
|
|
734
|
+
font-weight: 600;
|
|
735
|
+
margin-bottom: 0.5rem;
|
|
736
|
+
color: var(--xz-color-content-100);
|
|
737
|
+
}
|
|
738
|
+
|
|
739
|
+
.section-desc {
|
|
740
|
+
color: var(--xz-color-content-200);
|
|
741
|
+
margin-bottom: 1.5rem;
|
|
742
|
+
}
|
|
743
|
+
|
|
744
|
+
.component-grid {
|
|
745
|
+
display: grid;
|
|
746
|
+
gap: 1.5rem;
|
|
747
|
+
}
|
|
748
|
+
|
|
749
|
+
.component-example h3 {
|
|
750
|
+
font-size: 1rem;
|
|
751
|
+
font-weight: 600;
|
|
752
|
+
margin-bottom: 0.75rem;
|
|
753
|
+
color: var(--xz-color-content-100);
|
|
754
|
+
}
|
|
755
|
+
|
|
756
|
+
/* Buttons */
|
|
757
|
+
.button-group {
|
|
758
|
+
display: flex;
|
|
759
|
+
flex-wrap: wrap;
|
|
760
|
+
gap: 0.75rem;
|
|
761
|
+
}
|
|
762
|
+
|
|
763
|
+
.btn {
|
|
764
|
+
padding: 0.75rem 1.5rem;
|
|
765
|
+
border-radius: 9999px;
|
|
766
|
+
font-weight: 500;
|
|
767
|
+
font-size: 0.9375rem;
|
|
768
|
+
cursor: pointer;
|
|
769
|
+
border: 1px solid transparent;
|
|
770
|
+
transition: all 0.15s ease;
|
|
771
|
+
}
|
|
772
|
+
|
|
773
|
+
.btn:hover {
|
|
774
|
+
transform: translateY(-1px);
|
|
775
|
+
}
|
|
776
|
+
|
|
777
|
+
/* Solid Buttons */
|
|
778
|
+
.btn-primary {
|
|
779
|
+
background: var(--xz-color-primary-bg-100);
|
|
780
|
+
color: var(--xz-color-primary-fg);
|
|
781
|
+
}
|
|
782
|
+
.btn-primary:hover {
|
|
783
|
+
background: var(--xz-color-primary-bg-200);
|
|
784
|
+
}
|
|
785
|
+
|
|
786
|
+
.btn-danger {
|
|
787
|
+
background: var(--xz-color-danger-bg-100);
|
|
788
|
+
color: var(--xz-color-danger-fg);
|
|
789
|
+
}
|
|
790
|
+
.btn-danger:hover {
|
|
791
|
+
background: var(--xz-color-danger-bg-200);
|
|
792
|
+
}
|
|
793
|
+
|
|
794
|
+
.btn-success {
|
|
795
|
+
background: var(--xz-color-success-bg-100);
|
|
796
|
+
color: var(--xz-color-success-fg);
|
|
797
|
+
}
|
|
798
|
+
.btn-success:hover {
|
|
799
|
+
background: var(--xz-color-success-bg-200);
|
|
800
|
+
}
|
|
801
|
+
|
|
802
|
+
.btn-warning {
|
|
803
|
+
background: var(--xz-color-warning-bg-100);
|
|
804
|
+
color: var(--xz-color-warning-fg);
|
|
805
|
+
}
|
|
806
|
+
.btn-warning:hover {
|
|
807
|
+
background: var(--xz-color-warning-bg-200);
|
|
808
|
+
}
|
|
809
|
+
|
|
810
|
+
.btn-info {
|
|
811
|
+
background: var(--xz-color-info-bg-100);
|
|
812
|
+
color: var(--xz-color-info-fg);
|
|
813
|
+
}
|
|
814
|
+
.btn-info:hover {
|
|
815
|
+
background: var(--xz-color-info-bg-200);
|
|
816
|
+
}
|
|
817
|
+
|
|
818
|
+
/* Outline Buttons */
|
|
819
|
+
.btn-outline-primary {
|
|
820
|
+
background: transparent;
|
|
821
|
+
color: var(--xz-color-primary-content-100);
|
|
822
|
+
border-color: var(--xz-color-primary-line-200);
|
|
823
|
+
}
|
|
824
|
+
.btn-outline-primary:hover {
|
|
825
|
+
background: var(--xz-color-primary-soft-100);
|
|
826
|
+
}
|
|
827
|
+
|
|
828
|
+
.btn-outline-danger {
|
|
829
|
+
background: transparent;
|
|
830
|
+
color: var(--xz-color-danger-content-100);
|
|
831
|
+
border-color: var(--xz-color-danger-line-200);
|
|
832
|
+
}
|
|
833
|
+
.btn-outline-danger:hover {
|
|
834
|
+
background: var(--xz-color-danger-soft-100);
|
|
835
|
+
}
|
|
836
|
+
|
|
837
|
+
.btn-outline-success {
|
|
838
|
+
background: transparent;
|
|
839
|
+
color: var(--xz-color-success-content-100);
|
|
840
|
+
border-color: var(--xz-color-success-line-200);
|
|
841
|
+
}
|
|
842
|
+
.btn-outline-success:hover {
|
|
843
|
+
background: var(--xz-color-success-soft-100);
|
|
844
|
+
}
|
|
845
|
+
|
|
846
|
+
.btn-outline-warning {
|
|
847
|
+
background: transparent;
|
|
848
|
+
color: var(--xz-color-warning-content-100);
|
|
849
|
+
border-color: var(--xz-color-warning-line-200);
|
|
850
|
+
}
|
|
851
|
+
.btn-outline-warning:hover {
|
|
852
|
+
background: var(--xz-color-warning-soft-100);
|
|
853
|
+
}
|
|
854
|
+
|
|
855
|
+
.btn-outline-info {
|
|
856
|
+
background: transparent;
|
|
857
|
+
color: var(--xz-color-info-content-100);
|
|
858
|
+
border-color: var(--xz-color-info-line-200);
|
|
859
|
+
}
|
|
860
|
+
.btn-outline-info:hover {
|
|
861
|
+
background: var(--xz-color-info-soft-100);
|
|
862
|
+
}
|
|
863
|
+
|
|
864
|
+
/* Soft Buttons */
|
|
865
|
+
.btn-soft-primary {
|
|
866
|
+
background: var(--xz-color-primary-soft-100);
|
|
867
|
+
color: var(--xz-color-primary-content-100);
|
|
868
|
+
border-color: var(--xz-color-primary-soft-100);
|
|
869
|
+
}
|
|
870
|
+
.btn-soft-primary:hover {
|
|
871
|
+
background: var(--xz-color-primary-soft-200);
|
|
872
|
+
border-color: var(--xz-color-primary-soft-200);
|
|
873
|
+
}
|
|
874
|
+
|
|
875
|
+
.btn-soft-danger {
|
|
876
|
+
background: var(--xz-color-danger-soft-100);
|
|
877
|
+
color: var(--xz-color-danger-content-100);
|
|
878
|
+
border-color: var(--xz-color-danger-soft-100);
|
|
879
|
+
}
|
|
880
|
+
.btn-soft-danger:hover {
|
|
881
|
+
background: var(--xz-color-danger-soft-200);
|
|
882
|
+
border-color: var(--xz-color-danger-soft-200);
|
|
883
|
+
}
|
|
884
|
+
|
|
885
|
+
.btn-soft-success {
|
|
886
|
+
background: var(--xz-color-success-soft-100);
|
|
887
|
+
color: var(--xz-color-success-content-100);
|
|
888
|
+
border-color: var(--xz-color-success-soft-100);
|
|
889
|
+
}
|
|
890
|
+
.btn-soft-success:hover {
|
|
891
|
+
background: var(--xz-color-success-soft-200);
|
|
892
|
+
border-color: var(--xz-color-success-soft-200);
|
|
893
|
+
}
|
|
894
|
+
|
|
895
|
+
.btn-soft-warning {
|
|
896
|
+
background: var(--xz-color-warning-soft-100);
|
|
897
|
+
color: var(--xz-color-warning-content-100);
|
|
898
|
+
border-color: var(--xz-color-warning-soft-100);
|
|
899
|
+
}
|
|
900
|
+
.btn-soft-warning:hover {
|
|
901
|
+
background: var(--xz-color-warning-soft-200);
|
|
902
|
+
border-color: var(--xz-color-warning-soft-200);
|
|
903
|
+
}
|
|
904
|
+
|
|
905
|
+
.btn-soft-info {
|
|
906
|
+
background: var(--xz-color-info-soft-100);
|
|
907
|
+
color: var(--xz-color-info-content-100);
|
|
908
|
+
border-color: var(--xz-color-info-soft-100);
|
|
909
|
+
}
|
|
910
|
+
.btn-soft-info:hover {
|
|
911
|
+
background: var(--xz-color-info-soft-200);
|
|
912
|
+
border-color: var(--xz-color-info-soft-200);
|
|
913
|
+
}
|
|
914
|
+
|
|
915
|
+
/* Messages */
|
|
916
|
+
.message {
|
|
917
|
+
padding: 1rem;
|
|
918
|
+
border-radius: 0.375rem;
|
|
919
|
+
margin-bottom: 0.75rem;
|
|
920
|
+
border-left: 4px solid;
|
|
921
|
+
}
|
|
922
|
+
|
|
923
|
+
.message-primary {
|
|
924
|
+
background: var(--xz-color-primary-soft-100);
|
|
925
|
+
color: var(--xz-color-primary-content-100);
|
|
926
|
+
border-color: var(--xz-color-primary-bg-100);
|
|
927
|
+
}
|
|
928
|
+
|
|
929
|
+
.message-success {
|
|
930
|
+
background: var(--xz-color-success-soft-100);
|
|
931
|
+
color: var(--xz-color-success-content-100);
|
|
932
|
+
border-color: var(--xz-color-success-bg-100);
|
|
933
|
+
}
|
|
934
|
+
|
|
935
|
+
.message-warning {
|
|
936
|
+
background: var(--xz-color-warning-soft-100);
|
|
937
|
+
color: var(--xz-color-warning-content-100);
|
|
938
|
+
border-color: var(--xz-color-warning-bg-100);
|
|
939
|
+
}
|
|
940
|
+
|
|
941
|
+
.message-danger {
|
|
942
|
+
background: var(--xz-color-danger-soft-100);
|
|
943
|
+
color: var(--xz-color-danger-content-100);
|
|
944
|
+
border-color: var(--xz-color-danger-bg-100);
|
|
945
|
+
}
|
|
946
|
+
|
|
947
|
+
.message-info {
|
|
948
|
+
background: var(--xz-color-info-soft-100);
|
|
949
|
+
color: var(--xz-color-info-content-100);
|
|
950
|
+
border-color: var(--xz-color-info-bg-100);
|
|
951
|
+
}
|
|
952
|
+
|
|
953
|
+
/* Badges */
|
|
954
|
+
.badge-group {
|
|
955
|
+
display: flex;
|
|
956
|
+
flex-wrap: wrap;
|
|
957
|
+
gap: 0.5rem;
|
|
958
|
+
}
|
|
959
|
+
|
|
960
|
+
.badge {
|
|
961
|
+
display: inline-block;
|
|
962
|
+
padding: 0.25rem 0.75rem;
|
|
963
|
+
border-radius: 9999px;
|
|
964
|
+
font-size: 0.8125rem;
|
|
965
|
+
font-weight: 500;
|
|
966
|
+
border: 1px solid transparent;
|
|
967
|
+
}
|
|
968
|
+
|
|
969
|
+
/* Solid Badges */
|
|
970
|
+
.badge-primary {
|
|
971
|
+
background: var(--xz-color-primary-bg-100);
|
|
972
|
+
color: var(--xz-color-primary-fg);
|
|
973
|
+
}
|
|
974
|
+
|
|
975
|
+
.badge-danger {
|
|
976
|
+
background: var(--xz-color-danger-bg-100);
|
|
977
|
+
color: var(--xz-color-danger-fg);
|
|
978
|
+
}
|
|
979
|
+
|
|
980
|
+
.badge-success {
|
|
981
|
+
background: var(--xz-color-success-bg-100);
|
|
982
|
+
color: var(--xz-color-success-fg);
|
|
983
|
+
}
|
|
984
|
+
|
|
985
|
+
.badge-warning {
|
|
986
|
+
background: var(--xz-color-warning-bg-100);
|
|
987
|
+
color: var(--xz-color-warning-fg);
|
|
988
|
+
}
|
|
989
|
+
|
|
990
|
+
.badge-info {
|
|
991
|
+
background: var(--xz-color-info-bg-100);
|
|
992
|
+
color: var(--xz-color-info-fg);
|
|
993
|
+
}
|
|
994
|
+
|
|
995
|
+
/* Soft Badges */
|
|
996
|
+
.badge-soft-primary {
|
|
997
|
+
background: var(--xz-color-primary-soft-100);
|
|
998
|
+
color: var(--xz-color-primary-content-100);
|
|
999
|
+
}
|
|
1000
|
+
|
|
1001
|
+
.badge-soft-danger {
|
|
1002
|
+
background: var(--xz-color-danger-soft-100);
|
|
1003
|
+
color: var(--xz-color-danger-content-100);
|
|
1004
|
+
}
|
|
1005
|
+
|
|
1006
|
+
.badge-soft-success {
|
|
1007
|
+
background: var(--xz-color-success-soft-100);
|
|
1008
|
+
color: var(--xz-color-success-content-100);
|
|
1009
|
+
}
|
|
1010
|
+
|
|
1011
|
+
.badge-soft-warning {
|
|
1012
|
+
background: var(--xz-color-warning-soft-100);
|
|
1013
|
+
color: var(--xz-color-warning-content-100);
|
|
1014
|
+
}
|
|
1015
|
+
|
|
1016
|
+
.badge-soft-info {
|
|
1017
|
+
background: var(--xz-color-info-soft-100);
|
|
1018
|
+
color: var(--xz-color-info-content-100);
|
|
1019
|
+
}
|
|
1020
|
+
|
|
1021
|
+
/* Outline Badges */
|
|
1022
|
+
.badge-outline-primary {
|
|
1023
|
+
background: transparent;
|
|
1024
|
+
color: var(--xz-color-primary-content-100);
|
|
1025
|
+
border-color: var(--xz-color-primary-line-200);
|
|
1026
|
+
}
|
|
1027
|
+
|
|
1028
|
+
.badge-outline-danger {
|
|
1029
|
+
background: transparent;
|
|
1030
|
+
color: var(--xz-color-danger-content-100);
|
|
1031
|
+
border-color: var(--xz-color-danger-line-200);
|
|
1032
|
+
}
|
|
1033
|
+
|
|
1034
|
+
.badge-outline-success {
|
|
1035
|
+
background: transparent;
|
|
1036
|
+
color: var(--xz-color-success-content-100);
|
|
1037
|
+
border-color: var(--xz-color-success-line-200);
|
|
1038
|
+
}
|
|
1039
|
+
|
|
1040
|
+
.badge-outline-warning {
|
|
1041
|
+
background: transparent;
|
|
1042
|
+
color: var(--xz-color-warning-content-100);
|
|
1043
|
+
border-color: var(--xz-color-warning-line-200);
|
|
1044
|
+
}
|
|
1045
|
+
|
|
1046
|
+
.badge-outline-info {
|
|
1047
|
+
background: transparent;
|
|
1048
|
+
color: var(--xz-color-info-content-100);
|
|
1049
|
+
border-color: var(--xz-color-info-line-200);
|
|
1050
|
+
}
|
|
1051
|
+
|
|
1052
|
+
/* Cards */
|
|
1053
|
+
.cards-grid {
|
|
1054
|
+
display: grid;
|
|
1055
|
+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
1056
|
+
gap: 1.5rem;
|
|
1057
|
+
}
|
|
1058
|
+
|
|
1059
|
+
.card {
|
|
1060
|
+
padding: 1.5rem;
|
|
1061
|
+
border-radius: 0.5rem;
|
|
1062
|
+
background: var(--xz-color-bg-200);
|
|
1063
|
+
border: 1px solid var(--xz-color-line-100);
|
|
1064
|
+
}
|
|
1065
|
+
|
|
1066
|
+
.card h3 {
|
|
1067
|
+
margin-top: 0;
|
|
1068
|
+
margin-bottom: 0.75rem;
|
|
1069
|
+
color: var(--xz-color-content-100);
|
|
1070
|
+
}
|
|
1071
|
+
|
|
1072
|
+
.card p {
|
|
1073
|
+
color: var(--xz-color-content-200);
|
|
1074
|
+
margin-bottom: 1rem;
|
|
1075
|
+
line-height: 1.5;
|
|
1076
|
+
}
|
|
1077
|
+
|
|
1078
|
+
/* Tables */
|
|
1079
|
+
.table-wrapper {
|
|
1080
|
+
overflow-x: auto;
|
|
1081
|
+
border-radius: 0.5rem;
|
|
1082
|
+
border: 1px solid var(--xz-color-line-200);
|
|
1083
|
+
}
|
|
1084
|
+
|
|
1085
|
+
.table {
|
|
1086
|
+
width: 100%;
|
|
1087
|
+
border-collapse: collapse;
|
|
1088
|
+
background: var(--xz-color-bg-100);
|
|
1089
|
+
font-size: 0.9375rem;
|
|
1090
|
+
}
|
|
1091
|
+
|
|
1092
|
+
.table thead {
|
|
1093
|
+
background: var(--xz-color-bg-300);
|
|
1094
|
+
border-bottom: 2px solid var(--xz-color-line-200);
|
|
1095
|
+
}
|
|
1096
|
+
|
|
1097
|
+
.table th {
|
|
1098
|
+
padding: 1rem;
|
|
1099
|
+
text-align: left;
|
|
1100
|
+
font-weight: 600;
|
|
1101
|
+
color: var(--xz-color-content-100);
|
|
1102
|
+
white-space: nowrap;
|
|
1103
|
+
}
|
|
1104
|
+
|
|
1105
|
+
.table td {
|
|
1106
|
+
padding: 1rem;
|
|
1107
|
+
color: var(--xz-color-content-100);
|
|
1108
|
+
border-bottom: 1px solid var(--xz-color-line-100);
|
|
1109
|
+
}
|
|
1110
|
+
|
|
1111
|
+
.table tbody tr:last-child td {
|
|
1112
|
+
border-bottom: none;
|
|
1113
|
+
}
|
|
1114
|
+
|
|
1115
|
+
.table tbody tr {
|
|
1116
|
+
transition: background-color 0.15s ease;
|
|
1117
|
+
}
|
|
1118
|
+
|
|
1119
|
+
.table tbody tr:hover {
|
|
1120
|
+
background: var(--xz-color-bg-200);
|
|
1121
|
+
}
|
|
1122
|
+
|
|
1123
|
+
.table-striped tbody tr:nth-child(even) {
|
|
1124
|
+
background: var(--xz-color-bg-200);
|
|
1125
|
+
}
|
|
1126
|
+
|
|
1127
|
+
.table-striped tbody tr:nth-child(even):hover {
|
|
1128
|
+
background: var(--xz-color-bg-300);
|
|
1129
|
+
}
|
|
1130
|
+
|
|
1131
|
+
.user-cell {
|
|
1132
|
+
display: flex;
|
|
1133
|
+
align-items: center;
|
|
1134
|
+
gap: 0.75rem;
|
|
1135
|
+
}
|
|
1136
|
+
|
|
1137
|
+
.avatar {
|
|
1138
|
+
width: 40px;
|
|
1139
|
+
height: 40px;
|
|
1140
|
+
border-radius: 9999px;
|
|
1141
|
+
background: var(--xz-color-primary-soft-200);
|
|
1142
|
+
color: var(--xz-color-primary-content-100);
|
|
1143
|
+
display: flex;
|
|
1144
|
+
align-items: center;
|
|
1145
|
+
justify-content: center;
|
|
1146
|
+
font-weight: 600;
|
|
1147
|
+
font-size: 0.875rem;
|
|
1148
|
+
flex-shrink: 0;
|
|
1149
|
+
}
|
|
1150
|
+
|
|
1151
|
+
.action-buttons {
|
|
1152
|
+
display: flex;
|
|
1153
|
+
gap: 0.5rem;
|
|
1154
|
+
}
|
|
1155
|
+
|
|
1156
|
+
.btn-icon {
|
|
1157
|
+
width: 32px;
|
|
1158
|
+
height: 32px;
|
|
1159
|
+
border-radius: 0.375rem;
|
|
1160
|
+
border: 1px solid transparent;
|
|
1161
|
+
background: transparent;
|
|
1162
|
+
cursor: pointer;
|
|
1163
|
+
transition: all 0.15s ease;
|
|
1164
|
+
display: flex;
|
|
1165
|
+
align-items: center;
|
|
1166
|
+
justify-content: center;
|
|
1167
|
+
font-size: 0.875rem;
|
|
1168
|
+
padding: 0;
|
|
1169
|
+
}
|
|
1170
|
+
|
|
1171
|
+
.btn-icon i {
|
|
1172
|
+
pointer-events: none;
|
|
1173
|
+
}
|
|
1174
|
+
|
|
1175
|
+
.btn-icon-primary {
|
|
1176
|
+
color: var(--xz-color-primary-content-100);
|
|
1177
|
+
border-color: var(--xz-color-primary-line-200);
|
|
1178
|
+
}
|
|
1179
|
+
|
|
1180
|
+
.btn-icon-primary:hover {
|
|
1181
|
+
background: var(--xz-color-primary-soft-100);
|
|
1182
|
+
border-color: var(--xz-color-primary-line-300);
|
|
1183
|
+
}
|
|
1184
|
+
|
|
1185
|
+
.btn-icon-danger {
|
|
1186
|
+
color: var(--xz-color-danger-content-100);
|
|
1187
|
+
border-color: var(--xz-color-danger-line-200);
|
|
1188
|
+
}
|
|
1189
|
+
|
|
1190
|
+
.btn-icon-danger:hover {
|
|
1191
|
+
background: var(--xz-color-danger-soft-100);
|
|
1192
|
+
border-color: var(--xz-color-danger-line-300);
|
|
1193
|
+
}
|
|
1194
|
+
|
|
1195
|
+
/* Complex Dashboard Layout */
|
|
1196
|
+
.dashboard {
|
|
1197
|
+
background: var(--xz-color-bg-200);
|
|
1198
|
+
border-radius: 0.5rem;
|
|
1199
|
+
padding: 1.5rem;
|
|
1200
|
+
border: 1px solid var(--xz-color-line-200);
|
|
1201
|
+
}
|
|
1202
|
+
|
|
1203
|
+
.dashboard-header {
|
|
1204
|
+
display: flex;
|
|
1205
|
+
justify-content: space-between;
|
|
1206
|
+
align-items: center;
|
|
1207
|
+
margin-bottom: 1.5rem;
|
|
1208
|
+
flex-wrap: wrap;
|
|
1209
|
+
gap: 1rem;
|
|
1210
|
+
}
|
|
1211
|
+
|
|
1212
|
+
.header-left h3 {
|
|
1213
|
+
margin: 0 0 0.25rem 0;
|
|
1214
|
+
font-size: 1.5rem;
|
|
1215
|
+
color: var(--xz-color-content-100);
|
|
1216
|
+
}
|
|
1217
|
+
|
|
1218
|
+
.header-subtitle {
|
|
1219
|
+
margin: 0;
|
|
1220
|
+
color: var(--xz-color-content-200);
|
|
1221
|
+
font-size: 0.875rem;
|
|
1222
|
+
}
|
|
1223
|
+
|
|
1224
|
+
.header-actions {
|
|
1225
|
+
display: flex;
|
|
1226
|
+
gap: 0.75rem;
|
|
1227
|
+
}
|
|
1228
|
+
|
|
1229
|
+
/* Stats Grid */
|
|
1230
|
+
.stats-grid {
|
|
1231
|
+
display: grid;
|
|
1232
|
+
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
1233
|
+
gap: 1rem;
|
|
1234
|
+
margin-bottom: 1.5rem;
|
|
1235
|
+
}
|
|
1236
|
+
|
|
1237
|
+
.stat-card {
|
|
1238
|
+
background: var(--xz-color-bg-100);
|
|
1239
|
+
padding: 1.25rem;
|
|
1240
|
+
border-radius: 0.375rem;
|
|
1241
|
+
border: 1px solid var(--xz-color-line-100);
|
|
1242
|
+
display: flex;
|
|
1243
|
+
flex-direction: column;
|
|
1244
|
+
gap: 0.75rem;
|
|
1245
|
+
transition: all 0.2s ease;
|
|
1246
|
+
}
|
|
1247
|
+
|
|
1248
|
+
.stat-card:hover {
|
|
1249
|
+
transform: translateY(-2px);
|
|
1250
|
+
box-shadow: var(--xz-shadow-md);
|
|
1251
|
+
}
|
|
1252
|
+
|
|
1253
|
+
.stat-icon {
|
|
1254
|
+
width: 48px;
|
|
1255
|
+
height: 48px;
|
|
1256
|
+
border-radius: 0.375rem;
|
|
1257
|
+
display: flex;
|
|
1258
|
+
align-items: center;
|
|
1259
|
+
justify-content: center;
|
|
1260
|
+
font-size: 1.25rem;
|
|
1261
|
+
}
|
|
1262
|
+
|
|
1263
|
+
.stat-primary .stat-icon {
|
|
1264
|
+
background: var(--xz-color-primary-soft-100);
|
|
1265
|
+
color: var(--xz-color-primary-content-100);
|
|
1266
|
+
}
|
|
1267
|
+
|
|
1268
|
+
.stat-success .stat-icon {
|
|
1269
|
+
background: var(--xz-color-success-soft-100);
|
|
1270
|
+
color: var(--xz-color-success-content-100);
|
|
1271
|
+
}
|
|
1272
|
+
|
|
1273
|
+
.stat-warning .stat-icon {
|
|
1274
|
+
background: var(--xz-color-warning-soft-100);
|
|
1275
|
+
color: var(--xz-color-warning-content-100);
|
|
1276
|
+
}
|
|
1277
|
+
|
|
1278
|
+
.stat-danger .stat-icon {
|
|
1279
|
+
background: var(--xz-color-danger-soft-100);
|
|
1280
|
+
color: var(--xz-color-danger-content-100);
|
|
1281
|
+
}
|
|
1282
|
+
|
|
1283
|
+
.stat-value {
|
|
1284
|
+
font-size: 2rem;
|
|
1285
|
+
font-weight: 700;
|
|
1286
|
+
color: var(--xz-color-content-100);
|
|
1287
|
+
line-height: 1;
|
|
1288
|
+
}
|
|
1289
|
+
|
|
1290
|
+
.stat-label {
|
|
1291
|
+
font-size: 0.875rem;
|
|
1292
|
+
color: var(--xz-color-content-200);
|
|
1293
|
+
}
|
|
1294
|
+
|
|
1295
|
+
.stat-trend {
|
|
1296
|
+
font-size: 0.875rem;
|
|
1297
|
+
font-weight: 600;
|
|
1298
|
+
display: flex;
|
|
1299
|
+
align-items: center;
|
|
1300
|
+
gap: 0.25rem;
|
|
1301
|
+
}
|
|
1302
|
+
|
|
1303
|
+
.stat-trend-up {
|
|
1304
|
+
color: var(--xz-color-success-content-100);
|
|
1305
|
+
}
|
|
1306
|
+
|
|
1307
|
+
.stat-trend-down {
|
|
1308
|
+
color: var(--xz-color-danger-content-100);
|
|
1309
|
+
}
|
|
1310
|
+
|
|
1311
|
+
/* Dashboard Grid */
|
|
1312
|
+
.dashboard-grid {
|
|
1313
|
+
display: grid;
|
|
1314
|
+
grid-template-columns: 1.5fr 1fr;
|
|
1315
|
+
gap: 1.5rem;
|
|
1316
|
+
}
|
|
1317
|
+
|
|
1318
|
+
@media (max-width: 1024px) {
|
|
1319
|
+
.dashboard-grid {
|
|
1320
|
+
grid-template-columns: 1fr;
|
|
1321
|
+
}
|
|
1322
|
+
}
|
|
1323
|
+
|
|
1324
|
+
.card-header {
|
|
1325
|
+
display: flex;
|
|
1326
|
+
justify-content: space-between;
|
|
1327
|
+
align-items: center;
|
|
1328
|
+
margin-bottom: 1rem;
|
|
1329
|
+
}
|
|
1330
|
+
|
|
1331
|
+
.card-header h4 {
|
|
1332
|
+
margin: 0;
|
|
1333
|
+
font-size: 1.125rem;
|
|
1334
|
+
font-weight: 600;
|
|
1335
|
+
color: var(--xz-color-content-100);
|
|
1336
|
+
}
|
|
1337
|
+
|
|
1338
|
+
.btn-text {
|
|
1339
|
+
background: none;
|
|
1340
|
+
border: none;
|
|
1341
|
+
color: var(--xz-color-primary-content-100);
|
|
1342
|
+
cursor: pointer;
|
|
1343
|
+
font-size: 0.875rem;
|
|
1344
|
+
font-weight: 500;
|
|
1345
|
+
padding: 0.25rem 0.5rem;
|
|
1346
|
+
border-radius: 0.25rem;
|
|
1347
|
+
transition: all 0.15s ease;
|
|
1348
|
+
}
|
|
1349
|
+
|
|
1350
|
+
.btn-text:hover {
|
|
1351
|
+
background: var(--xz-color-primary-soft-100);
|
|
1352
|
+
}
|
|
1353
|
+
|
|
1354
|
+
/* Activity Card */
|
|
1355
|
+
.activity-card {
|
|
1356
|
+
background: var(--xz-color-bg-100);
|
|
1357
|
+
padding: 1.25rem;
|
|
1358
|
+
border-radius: 0.375rem;
|
|
1359
|
+
border: 1px solid var(--xz-color-line-100);
|
|
1360
|
+
}
|
|
1361
|
+
|
|
1362
|
+
.activity-list {
|
|
1363
|
+
display: flex;
|
|
1364
|
+
flex-direction: column;
|
|
1365
|
+
gap: 1rem;
|
|
1366
|
+
}
|
|
1367
|
+
|
|
1368
|
+
.activity-item {
|
|
1369
|
+
display: flex;
|
|
1370
|
+
gap: 0.75rem;
|
|
1371
|
+
padding-bottom: 1rem;
|
|
1372
|
+
border-bottom: 1px solid var(--xz-color-line-100);
|
|
1373
|
+
}
|
|
1374
|
+
|
|
1375
|
+
.activity-item:last-child {
|
|
1376
|
+
border-bottom: none;
|
|
1377
|
+
padding-bottom: 0;
|
|
1378
|
+
}
|
|
1379
|
+
|
|
1380
|
+
.activity-icon {
|
|
1381
|
+
width: 40px;
|
|
1382
|
+
height: 40px;
|
|
1383
|
+
border-radius: 9999px;
|
|
1384
|
+
display: flex;
|
|
1385
|
+
align-items: center;
|
|
1386
|
+
justify-content: center;
|
|
1387
|
+
flex-shrink: 0;
|
|
1388
|
+
font-size: 0.875rem;
|
|
1389
|
+
}
|
|
1390
|
+
|
|
1391
|
+
.activity-icon-success {
|
|
1392
|
+
background: var(--xz-color-success-soft-100);
|
|
1393
|
+
color: var(--xz-color-success-content-100);
|
|
1394
|
+
}
|
|
1395
|
+
|
|
1396
|
+
.activity-icon-primary {
|
|
1397
|
+
background: var(--xz-color-primary-soft-100);
|
|
1398
|
+
color: var(--xz-color-primary-content-100);
|
|
1399
|
+
}
|
|
1400
|
+
|
|
1401
|
+
.activity-icon-warning {
|
|
1402
|
+
background: var(--xz-color-warning-soft-100);
|
|
1403
|
+
color: var(--xz-color-warning-content-100);
|
|
1404
|
+
}
|
|
1405
|
+
|
|
1406
|
+
.activity-icon-info {
|
|
1407
|
+
background: var(--xz-color-info-soft-100);
|
|
1408
|
+
color: var(--xz-color-info-content-100);
|
|
1409
|
+
}
|
|
1410
|
+
|
|
1411
|
+
.activity-content {
|
|
1412
|
+
flex: 1;
|
|
1413
|
+
}
|
|
1414
|
+
|
|
1415
|
+
.activity-title {
|
|
1416
|
+
font-weight: 600;
|
|
1417
|
+
color: var(--xz-color-content-100);
|
|
1418
|
+
margin-bottom: 0.25rem;
|
|
1419
|
+
font-size: 0.9375rem;
|
|
1420
|
+
}
|
|
1421
|
+
|
|
1422
|
+
.activity-description {
|
|
1423
|
+
color: var(--xz-color-content-200);
|
|
1424
|
+
font-size: 0.875rem;
|
|
1425
|
+
margin-bottom: 0.25rem;
|
|
1426
|
+
}
|
|
1427
|
+
|
|
1428
|
+
.activity-time {
|
|
1429
|
+
color: var(--xz-color-content-200);
|
|
1430
|
+
font-size: 0.8125rem;
|
|
1431
|
+
}
|
|
1432
|
+
|
|
1433
|
+
/* Team Card */
|
|
1434
|
+
.team-card {
|
|
1435
|
+
background: var(--xz-color-bg-100);
|
|
1436
|
+
padding: 1.25rem;
|
|
1437
|
+
border-radius: 0.375rem;
|
|
1438
|
+
border: 1px solid var(--xz-color-line-100);
|
|
1439
|
+
margin-bottom: 1.5rem;
|
|
1440
|
+
}
|
|
1441
|
+
|
|
1442
|
+
.team-list {
|
|
1443
|
+
display: flex;
|
|
1444
|
+
flex-direction: column;
|
|
1445
|
+
gap: 0.75rem;
|
|
1446
|
+
}
|
|
1447
|
+
|
|
1448
|
+
.team-member {
|
|
1449
|
+
display: flex;
|
|
1450
|
+
align-items: center;
|
|
1451
|
+
gap: 0.75rem;
|
|
1452
|
+
padding: 0.75rem;
|
|
1453
|
+
border-radius: 0.25rem;
|
|
1454
|
+
transition: background 0.15s ease;
|
|
1455
|
+
}
|
|
1456
|
+
|
|
1457
|
+
.team-member:hover {
|
|
1458
|
+
background: var(--xz-color-bg-200);
|
|
1459
|
+
}
|
|
1460
|
+
|
|
1461
|
+
.member-avatar {
|
|
1462
|
+
width: 44px;
|
|
1463
|
+
height: 44px;
|
|
1464
|
+
border-radius: 9999px;
|
|
1465
|
+
display: flex;
|
|
1466
|
+
align-items: center;
|
|
1467
|
+
justify-content: center;
|
|
1468
|
+
font-weight: 600;
|
|
1469
|
+
font-size: 0.875rem;
|
|
1470
|
+
flex-shrink: 0;
|
|
1471
|
+
}
|
|
1472
|
+
|
|
1473
|
+
.member-avatar-primary {
|
|
1474
|
+
background: var(--xz-color-primary-soft-200);
|
|
1475
|
+
color: var(--xz-color-primary-content-100);
|
|
1476
|
+
}
|
|
1477
|
+
|
|
1478
|
+
.member-avatar-success {
|
|
1479
|
+
background: var(--xz-color-success-soft-200);
|
|
1480
|
+
color: var(--xz-color-success-content-100);
|
|
1481
|
+
}
|
|
1482
|
+
|
|
1483
|
+
.member-avatar-warning {
|
|
1484
|
+
background: var(--xz-color-warning-soft-200);
|
|
1485
|
+
color: var(--xz-color-warning-content-100);
|
|
1486
|
+
}
|
|
1487
|
+
|
|
1488
|
+
.member-avatar-info {
|
|
1489
|
+
background: var(--xz-color-info-soft-200);
|
|
1490
|
+
color: var(--xz-color-info-content-100);
|
|
1491
|
+
}
|
|
1492
|
+
|
|
1493
|
+
.member-info {
|
|
1494
|
+
flex: 1;
|
|
1495
|
+
}
|
|
1496
|
+
|
|
1497
|
+
.member-name {
|
|
1498
|
+
font-weight: 600;
|
|
1499
|
+
color: var(--xz-color-content-100);
|
|
1500
|
+
font-size: 0.9375rem;
|
|
1501
|
+
margin-bottom: 0.25rem;
|
|
1502
|
+
}
|
|
1503
|
+
|
|
1504
|
+
.member-role {
|
|
1505
|
+
color: var(--xz-color-content-200);
|
|
1506
|
+
font-size: 0.8125rem;
|
|
1507
|
+
}
|
|
1508
|
+
|
|
1509
|
+
/* Actions Card */
|
|
1510
|
+
.actions-card {
|
|
1511
|
+
background: var(--xz-color-bg-100);
|
|
1512
|
+
padding: 1.25rem;
|
|
1513
|
+
border-radius: 0.375rem;
|
|
1514
|
+
border: 1px solid var(--xz-color-line-100);
|
|
1515
|
+
}
|
|
1516
|
+
|
|
1517
|
+
.actions-grid {
|
|
1518
|
+
display: grid;
|
|
1519
|
+
grid-template-columns: repeat(2, 1fr);
|
|
1520
|
+
gap: 0.75rem;
|
|
1521
|
+
}
|
|
1522
|
+
|
|
1523
|
+
.action-button {
|
|
1524
|
+
display: flex;
|
|
1525
|
+
flex-direction: column;
|
|
1526
|
+
align-items: center;
|
|
1527
|
+
gap: 0.5rem;
|
|
1528
|
+
padding: 1rem;
|
|
1529
|
+
border-radius: 0.375rem;
|
|
1530
|
+
border: 1px solid;
|
|
1531
|
+
background: transparent;
|
|
1532
|
+
cursor: pointer;
|
|
1533
|
+
transition: all 0.15s ease;
|
|
1534
|
+
font-size: 0.875rem;
|
|
1535
|
+
font-weight: 500;
|
|
1536
|
+
}
|
|
1537
|
+
|
|
1538
|
+
.action-button i {
|
|
1539
|
+
font-size: 1.25rem;
|
|
1540
|
+
}
|
|
1541
|
+
|
|
1542
|
+
.action-button-primary {
|
|
1543
|
+
color: var(--xz-color-primary-content-100);
|
|
1544
|
+
border-color: var(--xz-color-primary-line-200);
|
|
1545
|
+
}
|
|
1546
|
+
|
|
1547
|
+
.action-button-primary:hover {
|
|
1548
|
+
background: var(--xz-color-primary-soft-100);
|
|
1549
|
+
border-color: var(--xz-color-primary-line-300);
|
|
1550
|
+
}
|
|
1551
|
+
|
|
1552
|
+
.action-button-success {
|
|
1553
|
+
color: var(--xz-color-success-content-100);
|
|
1554
|
+
border-color: var(--xz-color-success-line-200);
|
|
1555
|
+
}
|
|
1556
|
+
|
|
1557
|
+
.action-button-success:hover {
|
|
1558
|
+
background: var(--xz-color-success-soft-100);
|
|
1559
|
+
border-color: var(--xz-color-success-line-300);
|
|
1560
|
+
}
|
|
1561
|
+
|
|
1562
|
+
.action-button-warning {
|
|
1563
|
+
color: var(--xz-color-warning-content-100);
|
|
1564
|
+
border-color: var(--xz-color-warning-line-200);
|
|
1565
|
+
}
|
|
1566
|
+
|
|
1567
|
+
.action-button-warning:hover {
|
|
1568
|
+
background: var(--xz-color-warning-soft-100);
|
|
1569
|
+
border-color: var(--xz-color-warning-line-300);
|
|
1570
|
+
}
|
|
1571
|
+
|
|
1572
|
+
.action-button-info {
|
|
1573
|
+
color: var(--xz-color-info-content-100);
|
|
1574
|
+
border-color: var(--xz-color-info-line-200);
|
|
1575
|
+
}
|
|
1576
|
+
|
|
1577
|
+
.action-button-info:hover {
|
|
1578
|
+
background: var(--xz-color-info-soft-100);
|
|
1579
|
+
border-color: var(--xz-color-info-line-300);
|
|
1580
|
+
}
|
|
1581
|
+
</style>
|