@appscode/design-system 2.17.40 → 2.17.42
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/package.json
CHANGED
|
@@ -0,0 +1,696 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="columns is-multiline is-mobile ">
|
|
3
|
+
<!-- MariaDB Card -->
|
|
4
|
+
<div class="column is-half-mobile is-one-third-tablet is-one-fifth-desktop">
|
|
5
|
+
<div class="card db-card db-card-blue">
|
|
6
|
+
<div class="card-gradient"></div>
|
|
7
|
+
<div class="card-glow"></div>
|
|
8
|
+
|
|
9
|
+
<div class="card-content">
|
|
10
|
+
<div class="level is-mobile mb-4">
|
|
11
|
+
<div class="level-left">
|
|
12
|
+
<div class="icon-wrapper icon-blue">
|
|
13
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
14
|
+
<ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
|
|
15
|
+
<path d="M3 5V19A9 3 0 0 0 21 19V5"></path>
|
|
16
|
+
<path d="M3 12A9 3 0 0 0 21 12"></path>
|
|
17
|
+
</svg>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
20
|
+
<div class="level-right">
|
|
21
|
+
<span class="status-badge">
|
|
22
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
23
|
+
<circle cx="12" cy="12" r="10"></circle>
|
|
24
|
+
<path d="m9 12 2 2 4-4"></path>
|
|
25
|
+
</svg>
|
|
26
|
+
</span>
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
<div class="content">
|
|
31
|
+
<h3 class="title is-5 mb-2 mt-8 db-title">MariaDB</h3>
|
|
32
|
+
|
|
33
|
+
<div class="mb-3">
|
|
34
|
+
<div class="level is-mobile mb-2">
|
|
35
|
+
<div class="level-left">
|
|
36
|
+
<span class="is-size-7 has-text-weight-semibold has-text-grey">Instances</span>
|
|
37
|
+
</div>
|
|
38
|
+
<div class="level-right">
|
|
39
|
+
<span class="tag is-small is-info is-light has-text-weight-bold">1/3</span>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
<progress class="progress is-small progress-blue" value="33" max="100">33%</progress>
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
<div class="stats-section">
|
|
46
|
+
<div class="level is-mobile">
|
|
47
|
+
<div class="level-left">
|
|
48
|
+
<span class="is-size-7 has-text-grey">Storage</span>
|
|
49
|
+
</div>
|
|
50
|
+
<div class="level-right">
|
|
51
|
+
<span class="tag is-small has-text-weight-bold">1500m / 1500m</span>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
<div class="level is-mobile">
|
|
55
|
+
<div class="level-left">
|
|
56
|
+
<span class="is-size-7 has-text-grey">Memory</span>
|
|
57
|
+
</div>
|
|
58
|
+
<div class="level-right">
|
|
59
|
+
<span class="tag is-small has-text-weight-bold">6Gi / 6Gi</span>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
|
|
68
|
+
<!-- MongoDB Card -->
|
|
69
|
+
<div class="column is-half-mobile is-one-third-tablet is-one-fifth-desktop">
|
|
70
|
+
<div class="card db-card db-card-green">
|
|
71
|
+
<div class="card-gradient"></div>
|
|
72
|
+
<div class="card-glow"></div>
|
|
73
|
+
|
|
74
|
+
<div class="card-content">
|
|
75
|
+
<div class="level is-mobile mb-4">
|
|
76
|
+
<div class="level-left">
|
|
77
|
+
<div class="icon-wrapper icon-green">
|
|
78
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
79
|
+
<ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
|
|
80
|
+
<path d="M3 5V19A9 3 0 0 0 21 19V5"></path>
|
|
81
|
+
<path d="M3 12A9 3 0 0 0 21 12"></path>
|
|
82
|
+
</svg>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
<div class="level-right">
|
|
86
|
+
<span class="status-badge">
|
|
87
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
88
|
+
<circle cx="12" cy="12" r="10"></circle>
|
|
89
|
+
<path d="m9 12 2 2 4-4"></path>
|
|
90
|
+
</svg>
|
|
91
|
+
</span>
|
|
92
|
+
</div>
|
|
93
|
+
</div>
|
|
94
|
+
|
|
95
|
+
<div class="content">
|
|
96
|
+
<h3 class="title is-5 mb-2 mt-8 db-title">MongoDB</h3>
|
|
97
|
+
|
|
98
|
+
<div class="mb-3">
|
|
99
|
+
<div class="level is-mobile mb-2">
|
|
100
|
+
<div class="level-left">
|
|
101
|
+
<span class="is-size-7 has-text-weight-semibold has-text-grey">Instances</span>
|
|
102
|
+
</div>
|
|
103
|
+
<div class="level-right">
|
|
104
|
+
<span class="tag is-small is-success is-light has-text-weight-bold">1/3</span>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
<progress class="progress is-small progress-green" value="33" max="100">33%</progress>
|
|
108
|
+
</div>
|
|
109
|
+
|
|
110
|
+
<div class="stats-section">
|
|
111
|
+
<div class="level is-mobile">
|
|
112
|
+
<div class="level-left">
|
|
113
|
+
<span class="is-size-7 has-text-grey">Storage</span>
|
|
114
|
+
</div>
|
|
115
|
+
<div class="level-right">
|
|
116
|
+
<span class="tag is-small has-text-weight-bold">2700m / 2700m</span>
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
<div class="level is-mobile">
|
|
120
|
+
<div class="level-left">
|
|
121
|
+
<span class="is-size-7 has-text-grey">Memory</span>
|
|
122
|
+
</div>
|
|
123
|
+
<div class="level-right">
|
|
124
|
+
<span class="tag is-small has-text-weight-bold">3Gi / 3Gi</span>
|
|
125
|
+
</div>
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
129
|
+
</div>
|
|
130
|
+
</div>
|
|
131
|
+
</div>
|
|
132
|
+
|
|
133
|
+
<!-- MySQL Card -->
|
|
134
|
+
<div class="column is-half-mobile is-one-third-tablet is-one-fifth-desktop">
|
|
135
|
+
<div class="card db-card db-card-orange">
|
|
136
|
+
<div class="card-gradient"></div>
|
|
137
|
+
<div class="card-glow"></div>
|
|
138
|
+
|
|
139
|
+
<div class="card-content">
|
|
140
|
+
<div class="level is-mobile mb-4">
|
|
141
|
+
<div class="level-left">
|
|
142
|
+
<div class="icon-wrapper icon-orange">
|
|
143
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
144
|
+
<ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
|
|
145
|
+
<path d="M3 5V19A9 3 0 0 0 21 19V5"></path>
|
|
146
|
+
<path d="M3 12A9 3 0 0 0 21 12"></path>
|
|
147
|
+
</svg>
|
|
148
|
+
</div>
|
|
149
|
+
</div>
|
|
150
|
+
<div class="level-right">
|
|
151
|
+
<span class="status-badge">
|
|
152
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
153
|
+
<circle cx="12" cy="12" r="10"></circle>
|
|
154
|
+
<path d="m9 12 2 2 4-4"></path>
|
|
155
|
+
</svg>
|
|
156
|
+
</span>
|
|
157
|
+
</div>
|
|
158
|
+
</div>
|
|
159
|
+
|
|
160
|
+
<div class="content">
|
|
161
|
+
<h3 class="title is-5 mb-2 mt-8 db-title">MySQL</h3>
|
|
162
|
+
|
|
163
|
+
<div class="mb-3">
|
|
164
|
+
<div class="level is-mobile mb-2">
|
|
165
|
+
<div class="level-left">
|
|
166
|
+
<span class="is-size-7 has-text-weight-semibold has-text-grey">Instances</span>
|
|
167
|
+
</div>
|
|
168
|
+
<div class="level-right">
|
|
169
|
+
<span class="tag is-small is-warning is-light has-text-weight-bold">3/3</span>
|
|
170
|
+
</div>
|
|
171
|
+
</div>
|
|
172
|
+
<progress class="progress is-small progress-orange" value="100" max="100">100%</progress>
|
|
173
|
+
</div>
|
|
174
|
+
|
|
175
|
+
<div class="stats-section">
|
|
176
|
+
<div class="level is-mobile">
|
|
177
|
+
<div class="level-left">
|
|
178
|
+
<span class="is-size-7 has-text-grey">Storage</span>
|
|
179
|
+
</div>
|
|
180
|
+
<div class="level-right">
|
|
181
|
+
<span class="tag is-small has-text-weight-bold">3500m / 3500m</span>
|
|
182
|
+
</div>
|
|
183
|
+
</div>
|
|
184
|
+
<div class="level is-mobile">
|
|
185
|
+
<div class="level-left">
|
|
186
|
+
<span class="is-size-7 has-text-grey">Memory</span>
|
|
187
|
+
</div>
|
|
188
|
+
<div class="level-right">
|
|
189
|
+
<span class="tag is-small has-text-weight-bold">14Gi / 14Gi</span>
|
|
190
|
+
</div>
|
|
191
|
+
</div>
|
|
192
|
+
</div>
|
|
193
|
+
</div>
|
|
194
|
+
</div>
|
|
195
|
+
</div>
|
|
196
|
+
</div>
|
|
197
|
+
|
|
198
|
+
<!-- Postgres Card -->
|
|
199
|
+
<div class="column is-half-mobile is-one-third-tablet is-one-fifth-desktop">
|
|
200
|
+
<div class="card db-card db-card-cyan">
|
|
201
|
+
<div class="card-gradient"></div>
|
|
202
|
+
<div class="card-glow"></div>
|
|
203
|
+
|
|
204
|
+
<div class="card-content">
|
|
205
|
+
<div class="level is-mobile mb-4">
|
|
206
|
+
<div class="level-left">
|
|
207
|
+
<div class="icon-wrapper icon-cyan">
|
|
208
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
209
|
+
<ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
|
|
210
|
+
<path d="M3 5V19A9 3 0 0 0 21 19V5"></path>
|
|
211
|
+
<path d="M3 12A9 3 0 0 0 21 12"></path>
|
|
212
|
+
</svg>
|
|
213
|
+
</div>
|
|
214
|
+
</div>
|
|
215
|
+
<div class="level-right">
|
|
216
|
+
<span class="status-badge">
|
|
217
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
218
|
+
<circle cx="12" cy="12" r="10"></circle>
|
|
219
|
+
<path d="m9 12 2 2 4-4"></path>
|
|
220
|
+
</svg>
|
|
221
|
+
</span>
|
|
222
|
+
</div>
|
|
223
|
+
</div>
|
|
224
|
+
|
|
225
|
+
<div class="content">
|
|
226
|
+
<h3 class="title is-5 mb-2 mt-8 db-title">Postgres</h3>
|
|
227
|
+
|
|
228
|
+
<div class="mb-3">
|
|
229
|
+
<div class="level is-mobile mb-2">
|
|
230
|
+
<div class="level-left">
|
|
231
|
+
<span class="is-size-7 has-text-weight-semibold has-text-grey">Instances</span>
|
|
232
|
+
</div>
|
|
233
|
+
<div class="level-right">
|
|
234
|
+
<span class="tag is-small is-link is-light has-text-weight-bold">1/3</span>
|
|
235
|
+
</div>
|
|
236
|
+
</div>
|
|
237
|
+
<progress class="progress is-small progress-cyan" value="33" max="100">33%</progress>
|
|
238
|
+
</div>
|
|
239
|
+
|
|
240
|
+
<div class="stats-section">
|
|
241
|
+
<div class="level is-mobile">
|
|
242
|
+
<div class="level-left">
|
|
243
|
+
<span class="is-size-7 has-text-grey">Storage</span>
|
|
244
|
+
</div>
|
|
245
|
+
<div class="level-right">
|
|
246
|
+
<span class="tag is-small has-text-weight-bold">1500m / 1500m</span>
|
|
247
|
+
</div>
|
|
248
|
+
</div>
|
|
249
|
+
<div class="level is-mobile">
|
|
250
|
+
<div class="level-left">
|
|
251
|
+
<span class="is-size-7 has-text-grey">Memory</span>
|
|
252
|
+
</div>
|
|
253
|
+
<div class="level-right">
|
|
254
|
+
<span class="tag is-small has-text-weight-bold">3Gi / 3Gi</span>
|
|
255
|
+
</div>
|
|
256
|
+
</div>
|
|
257
|
+
</div>
|
|
258
|
+
</div>
|
|
259
|
+
</div>
|
|
260
|
+
</div>
|
|
261
|
+
</div>
|
|
262
|
+
|
|
263
|
+
<!-- Redis Card -->
|
|
264
|
+
<div class="column is-half-mobile is-one-third-tablet is-one-fifth-desktop">
|
|
265
|
+
<div class="card db-card db-card-red">
|
|
266
|
+
<div class="card-gradient"></div>
|
|
267
|
+
<div class="card-glow"></div>
|
|
268
|
+
|
|
269
|
+
<div class="card-content">
|
|
270
|
+
<div class="level is-mobile mb-4">
|
|
271
|
+
<div class="level-left">
|
|
272
|
+
<div class="icon-wrapper icon-red">
|
|
273
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
274
|
+
<rect width="20" height="8" x="2" y="2" rx="2" ry="2"></rect>
|
|
275
|
+
<rect width="20" height="8" x="2" y="14" rx="2" ry="2"></rect>
|
|
276
|
+
<line x1="6" x2="6.01" y1="6" y2="6"></line>
|
|
277
|
+
<line x1="6" x2="6.01" y1="18" y2="18"></line>
|
|
278
|
+
</svg>
|
|
279
|
+
</div>
|
|
280
|
+
</div>
|
|
281
|
+
<div class="level-right">
|
|
282
|
+
<span class="status-badge">
|
|
283
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
284
|
+
<circle cx="12" cy="12" r="10"></circle>
|
|
285
|
+
<path d="m9 12 2 2 4-4"></path>
|
|
286
|
+
</svg>
|
|
287
|
+
</span>
|
|
288
|
+
</div>
|
|
289
|
+
</div>
|
|
290
|
+
|
|
291
|
+
<div class="content">
|
|
292
|
+
<h3 class="title is-5 mb-2 mt-8 db-title">Redis</h3>
|
|
293
|
+
|
|
294
|
+
<div class="mb-3">
|
|
295
|
+
<div class="level is-mobile mb-2">
|
|
296
|
+
<div class="level-left">
|
|
297
|
+
<span class="is-size-7 has-text-weight-semibold has-text-grey">Instances</span>
|
|
298
|
+
</div>
|
|
299
|
+
<div class="level-right">
|
|
300
|
+
<span class="tag is-small is-danger is-light has-text-weight-bold">2/3</span>
|
|
301
|
+
</div>
|
|
302
|
+
</div>
|
|
303
|
+
<progress class="progress is-small progress-red" value="67" max="100">67%</progress>
|
|
304
|
+
</div>
|
|
305
|
+
|
|
306
|
+
<div class="stats-section">
|
|
307
|
+
<div class="level is-mobile">
|
|
308
|
+
<div class="level-left">
|
|
309
|
+
<span class="is-size-7 has-text-grey">Storage</span>
|
|
310
|
+
</div>
|
|
311
|
+
<div class="level-right">
|
|
312
|
+
<span class="tag is-small has-text-weight-bold">1750m / 1750m</span>
|
|
313
|
+
</div>
|
|
314
|
+
</div>
|
|
315
|
+
<div class="level is-mobile">
|
|
316
|
+
<div class="level-left">
|
|
317
|
+
<span class="is-size-7 has-text-grey">Memory</span>
|
|
318
|
+
</div>
|
|
319
|
+
<div class="level-right">
|
|
320
|
+
<span class="tag is-small has-text-weight-bold">3584Mi / 4Gi</span>
|
|
321
|
+
</div>
|
|
322
|
+
</div>
|
|
323
|
+
</div>
|
|
324
|
+
</div>
|
|
325
|
+
</div>
|
|
326
|
+
</div>
|
|
327
|
+
</div>
|
|
328
|
+
|
|
329
|
+
|
|
330
|
+
</div>
|
|
331
|
+
</template>
|
|
332
|
+
|
|
333
|
+
<script setup>
|
|
334
|
+
|
|
335
|
+
</script>
|
|
336
|
+
|
|
337
|
+
<style scoped>
|
|
338
|
+
/* Container */
|
|
339
|
+
.db-cards-container {
|
|
340
|
+
padding: 1rem;
|
|
341
|
+
gap: 1.5rem;
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
/* Base Card Styling */
|
|
345
|
+
.db-card {
|
|
346
|
+
position: relative;
|
|
347
|
+
overflow: hidden;
|
|
348
|
+
border-radius: 1rem;
|
|
349
|
+
cursor: pointer;
|
|
350
|
+
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
351
|
+
/* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); */
|
|
352
|
+
border: 1px solid rgba(0, 0, 0, 0.05);
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
.db-card:hover {
|
|
356
|
+
transform: translateY(-0.5rem);
|
|
357
|
+
/* box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); */
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
/* Gradient Background Overlays */
|
|
361
|
+
.card-gradient {
|
|
362
|
+
position: absolute;
|
|
363
|
+
inset: 0;
|
|
364
|
+
opacity: 0;
|
|
365
|
+
transition: opacity 0.5s ease;
|
|
366
|
+
border-radius: 1rem;
|
|
367
|
+
pointer-events: none;
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
.db-card:hover .card-gradient {
|
|
371
|
+
opacity: 1;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
/* Glow Effects */
|
|
375
|
+
.card-glow {
|
|
376
|
+
position: absolute;
|
|
377
|
+
inset: -2px;
|
|
378
|
+
opacity: 0;
|
|
379
|
+
filter: blur(20px);
|
|
380
|
+
transition: opacity 0.5s ease;
|
|
381
|
+
border-radius: 1rem;
|
|
382
|
+
pointer-events: none;
|
|
383
|
+
z-index: -1;
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
.db-card:hover .card-glow {
|
|
387
|
+
opacity: 0.2;
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
/* Color Variants */
|
|
391
|
+
.db-card-blue .card-gradient {
|
|
392
|
+
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%);
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
.db-card-blue .card-glow {
|
|
396
|
+
background: linear-gradient(135deg, #3b82f6 0%, #9333ea 100%);
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
.db-card-green .card-gradient {
|
|
400
|
+
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(20, 184, 166, 0.1) 100%);
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
.db-card-green .card-glow {
|
|
404
|
+
background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
.db-card-orange .card-gradient {
|
|
408
|
+
background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(239, 68, 68, 0.1) 100%);
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
.db-card-orange .card-glow {
|
|
412
|
+
background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
|
|
413
|
+
}
|
|
414
|
+
|
|
415
|
+
.db-card-cyan .card-gradient {
|
|
416
|
+
background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
.db-card-cyan .card-glow {
|
|
420
|
+
background: linear-gradient(135deg, #06b6d4 0%, #6366f1 100%);
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
.db-card-red .card-gradient {
|
|
424
|
+
background: linear-gradient(135deg, rgba(244, 63, 94, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
.db-card-red .card-glow {
|
|
428
|
+
background: linear-gradient(135deg, #f43f5e 0%, #ec4899 100%);
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
.db-card-yellow .card-gradient {
|
|
432
|
+
background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(249, 115, 22, 0.1) 100%);
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
.db-card-yellow .card-glow {
|
|
436
|
+
background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
/* Icon Wrapper */
|
|
440
|
+
.icon-wrapper {
|
|
441
|
+
width: 3rem;
|
|
442
|
+
height: 3rem;
|
|
443
|
+
border-radius: 0.75rem;
|
|
444
|
+
display: flex;
|
|
445
|
+
align-items: center;
|
|
446
|
+
justify-content: center;
|
|
447
|
+
color: white;
|
|
448
|
+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
|
|
449
|
+
transition: all 0.5s ease;
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
.db-card:hover .icon-wrapper {
|
|
453
|
+
transform: scale(1.1) rotate(3deg);
|
|
454
|
+
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
|
|
455
|
+
}
|
|
456
|
+
|
|
457
|
+
/* Icon Color Variants */
|
|
458
|
+
.icon-blue {
|
|
459
|
+
background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
|
|
460
|
+
}
|
|
461
|
+
|
|
462
|
+
.db-card:hover .icon-blue {
|
|
463
|
+
background: linear-gradient(135deg, #60a5fa 0%, #9333ea 100%);
|
|
464
|
+
}
|
|
465
|
+
|
|
466
|
+
.icon-green {
|
|
467
|
+
background: linear-gradient(135deg, #10b981 0%, #047857 100%);
|
|
468
|
+
}
|
|
469
|
+
|
|
470
|
+
.db-card:hover .icon-green {
|
|
471
|
+
background: linear-gradient(135deg, #34d399 0%, #14b8a6 100%);
|
|
472
|
+
}
|
|
473
|
+
|
|
474
|
+
.icon-orange {
|
|
475
|
+
background: linear-gradient(135deg, #f97316 0%, #c2410c 100%);
|
|
476
|
+
}
|
|
477
|
+
|
|
478
|
+
.db-card:hover .icon-orange {
|
|
479
|
+
background: linear-gradient(135deg, #fb923c 0%, #ef4444 100%);
|
|
480
|
+
}
|
|
481
|
+
|
|
482
|
+
.icon-cyan {
|
|
483
|
+
background: linear-gradient(135deg, #06b6d4 0%, #0369a1 100%);
|
|
484
|
+
}
|
|
485
|
+
|
|
486
|
+
.db-card:hover .icon-cyan {
|
|
487
|
+
background: linear-gradient(135deg, #22d3ee 0%, #6366f1 100%);
|
|
488
|
+
}
|
|
489
|
+
|
|
490
|
+
.icon-red {
|
|
491
|
+
background: linear-gradient(135deg, #f43f5e 0%, #be123c 100%);
|
|
492
|
+
}
|
|
493
|
+
|
|
494
|
+
.db-card:hover .icon-red {
|
|
495
|
+
background: linear-gradient(135deg, #fb7185 0%, #ec4899 100%);
|
|
496
|
+
}
|
|
497
|
+
|
|
498
|
+
.icon-yellow {
|
|
499
|
+
background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
.db-card:hover .icon-yellow {
|
|
503
|
+
background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
|
|
504
|
+
}
|
|
505
|
+
|
|
506
|
+
/* Status Badge */
|
|
507
|
+
.status-badge {
|
|
508
|
+
display: flex;
|
|
509
|
+
align-items: center;
|
|
510
|
+
justify-content: center;
|
|
511
|
+
width: 2rem;
|
|
512
|
+
height: 2rem;
|
|
513
|
+
border-radius: 50%;
|
|
514
|
+
background: rgba(16, 185, 129, 0.1);
|
|
515
|
+
border: 2px solid rgba(16, 185, 129, 0.2);
|
|
516
|
+
animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
517
|
+
}
|
|
518
|
+
|
|
519
|
+
.status-badge svg {
|
|
520
|
+
color: #10b981;
|
|
521
|
+
}
|
|
522
|
+
|
|
523
|
+
@keyframes pulse-ring {
|
|
524
|
+
0% {
|
|
525
|
+
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
|
|
526
|
+
}
|
|
527
|
+
70% {
|
|
528
|
+
box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
|
|
529
|
+
}
|
|
530
|
+
100% {
|
|
531
|
+
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
|
|
532
|
+
}
|
|
533
|
+
}
|
|
534
|
+
|
|
535
|
+
/* Title */
|
|
536
|
+
.db-title {
|
|
537
|
+
font-weight: 700;
|
|
538
|
+
letter-spacing: -0.025em;
|
|
539
|
+
transition: color 0.3s ease;
|
|
540
|
+
}
|
|
541
|
+
|
|
542
|
+
.db-card-blue:hover .db-title {
|
|
543
|
+
color: #3b82f6;
|
|
544
|
+
}
|
|
545
|
+
|
|
546
|
+
.db-card-green:hover .db-title {
|
|
547
|
+
color: #10b981;
|
|
548
|
+
}
|
|
549
|
+
|
|
550
|
+
.db-card-orange:hover .db-title {
|
|
551
|
+
color: #f97316;
|
|
552
|
+
}
|
|
553
|
+
|
|
554
|
+
.db-card-cyan:hover .db-title {
|
|
555
|
+
color: #06b6d4;
|
|
556
|
+
}
|
|
557
|
+
|
|
558
|
+
.db-card-red:hover .db-title {
|
|
559
|
+
color: #f43f5e;
|
|
560
|
+
}
|
|
561
|
+
|
|
562
|
+
.db-card-yellow:hover .db-title {
|
|
563
|
+
color: #f59e0b;
|
|
564
|
+
}
|
|
565
|
+
|
|
566
|
+
/* Progress Bars */
|
|
567
|
+
.progress {
|
|
568
|
+
height: 0.5rem;
|
|
569
|
+
border-radius: 9999px;
|
|
570
|
+
position: relative;
|
|
571
|
+
overflow: hidden;
|
|
572
|
+
}
|
|
573
|
+
|
|
574
|
+
.progress::-webkit-progress-bar {
|
|
575
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
576
|
+
border-radius: 9999px;
|
|
577
|
+
}
|
|
578
|
+
|
|
579
|
+
.progress::-webkit-progress-value {
|
|
580
|
+
border-radius: 9999px;
|
|
581
|
+
transition: width 0.7s ease;
|
|
582
|
+
position: relative;
|
|
583
|
+
}
|
|
584
|
+
|
|
585
|
+
.progress::-moz-progress-bar {
|
|
586
|
+
border-radius: 9999px;
|
|
587
|
+
transition: width 0.7s ease;
|
|
588
|
+
}
|
|
589
|
+
|
|
590
|
+
/* Progress Bar Colors */
|
|
591
|
+
.progress-blue::-webkit-progress-value {
|
|
592
|
+
background: linear-gradient(90deg, #3b82f6 0%, #9333ea 100%);
|
|
593
|
+
}
|
|
594
|
+
|
|
595
|
+
.progress-blue::-moz-progress-bar {
|
|
596
|
+
background: linear-gradient(90deg, #3b82f6 0%, #9333ea 100%);
|
|
597
|
+
}
|
|
598
|
+
|
|
599
|
+
.progress-green::-webkit-progress-value {
|
|
600
|
+
background: linear-gradient(90deg, #10b981 0%, #14b8a6 100%);
|
|
601
|
+
}
|
|
602
|
+
|
|
603
|
+
.progress-green::-moz-progress-bar {
|
|
604
|
+
background: linear-gradient(90deg, #10b981 0%, #14b8a6 100%);
|
|
605
|
+
}
|
|
606
|
+
|
|
607
|
+
.progress-orange::-webkit-progress-value {
|
|
608
|
+
background: linear-gradient(90deg, #f97316 0%, #ef4444 100%);
|
|
609
|
+
}
|
|
610
|
+
|
|
611
|
+
.progress-orange::-moz-progress-bar {
|
|
612
|
+
background: linear-gradient(90deg, #f97316 0%, #ef4444 100%);
|
|
613
|
+
}
|
|
614
|
+
|
|
615
|
+
.progress-cyan::-webkit-progress-value {
|
|
616
|
+
background: linear-gradient(90deg, #06b6d4 0%, #6366f1 100%);
|
|
617
|
+
}
|
|
618
|
+
|
|
619
|
+
.progress-cyan::-moz-progress-bar {
|
|
620
|
+
background: linear-gradient(90deg, #06b6d4 0%, #6366f1 100%);
|
|
621
|
+
}
|
|
622
|
+
|
|
623
|
+
.progress-red::-webkit-progress-value {
|
|
624
|
+
background: linear-gradient(90deg, #f43f5e 0%, #ec4899 100%);
|
|
625
|
+
}
|
|
626
|
+
|
|
627
|
+
.progress-red::-moz-progress-bar {
|
|
628
|
+
background: linear-gradient(90deg, #f43f5e 0%, #ec4899 100%);
|
|
629
|
+
}
|
|
630
|
+
|
|
631
|
+
.progress-yellow::-webkit-progress-value {
|
|
632
|
+
background: linear-gradient(90deg, #f59e0b 0%, #f97316 100%);
|
|
633
|
+
}
|
|
634
|
+
|
|
635
|
+
.progress-yellow::-moz-progress-bar {
|
|
636
|
+
background: linear-gradient(90deg, #f59e0b 0%, #f97316 100%);
|
|
637
|
+
}
|
|
638
|
+
|
|
639
|
+
/* Stats Section */
|
|
640
|
+
.stats-section {
|
|
641
|
+
padding-top: 0.75rem;
|
|
642
|
+
margin-top: 0.5rem;
|
|
643
|
+
}
|
|
644
|
+
|
|
645
|
+
.stats-section .level {
|
|
646
|
+
margin-bottom: 0.5rem;
|
|
647
|
+
}
|
|
648
|
+
|
|
649
|
+
.stats-section .level:last-child {
|
|
650
|
+
margin-bottom: 0;
|
|
651
|
+
}
|
|
652
|
+
|
|
653
|
+
.stats-section .tag {
|
|
654
|
+
font-family: 'Courier New', monospace;
|
|
655
|
+
background-color: rgba(0, 0, 0, 0.03);
|
|
656
|
+
}
|
|
657
|
+
|
|
658
|
+
.db-card:hover .stats-section .tag {
|
|
659
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
660
|
+
}
|
|
661
|
+
|
|
662
|
+
/* Card Fade In Animation */
|
|
663
|
+
@keyframes fadeInUp {
|
|
664
|
+
from {
|
|
665
|
+
opacity: 0;
|
|
666
|
+
transform: translateY(1rem);
|
|
667
|
+
}
|
|
668
|
+
to {
|
|
669
|
+
opacity: 1;
|
|
670
|
+
transform: translateY(0);
|
|
671
|
+
}
|
|
672
|
+
}
|
|
673
|
+
|
|
674
|
+
.db-card {
|
|
675
|
+
animation: fadeInUp 0.5s ease-out;
|
|
676
|
+
}
|
|
677
|
+
|
|
678
|
+
.column:nth-child(1) .db-card { animation-delay: 0ms; }
|
|
679
|
+
.column:nth-child(2) .db-card { animation-delay: 50ms; }
|
|
680
|
+
.column:nth-child(3) .db-card { animation-delay: 100ms; }
|
|
681
|
+
.column:nth-child(4) .db-card { animation-delay: 150ms; }
|
|
682
|
+
.column:nth-child(5) .db-card { animation-delay: 200ms; }
|
|
683
|
+
.column:nth-child(6) .db-card { animation-delay: 250ms; }
|
|
684
|
+
|
|
685
|
+
/* Responsive adjustments */
|
|
686
|
+
@media screen and (max-width: 768px) {
|
|
687
|
+
.db-cards-container {
|
|
688
|
+
padding: 0.5rem;
|
|
689
|
+
}
|
|
690
|
+
|
|
691
|
+
.icon-wrapper {
|
|
692
|
+
width: 2.5rem;
|
|
693
|
+
height: 2.5rem;
|
|
694
|
+
}
|
|
695
|
+
}
|
|
696
|
+
</style>
|