@deepgram/styles 0.0.1
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/LICENSE +22 -0
- package/README.md +147 -0
- package/dist/deepgram.css +1596 -0
- package/dist/deepgram.expanded.css +803 -0
- package/lib/deepgram.css +772 -0
- package/package.json +60 -0
- package/postcss.config.js +7 -0
- package/tailwind.config.js +164 -0
package/lib/deepgram.css
ADDED
|
@@ -0,0 +1,772 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Deepgram Styles - Tailwind-based Design System
|
|
3
|
+
*
|
|
4
|
+
* A comprehensive, mobile-first CSS framework for consistent Deepgram starter UIs
|
|
5
|
+
* Built with Tailwind CSS utility classes and custom @apply directives
|
|
6
|
+
*
|
|
7
|
+
* @version 3.0.0 - Tailwind Migration
|
|
8
|
+
* @author Deepgram Starter UIs Team
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
@tailwind base;
|
|
12
|
+
@tailwind components;
|
|
13
|
+
@tailwind utilities;
|
|
14
|
+
|
|
15
|
+
/* ==========================================================================
|
|
16
|
+
COMPONENTS LAYER - Reusable UI Components
|
|
17
|
+
Base styles (html, body, headings, etc.) are defined in tailwind.config.js
|
|
18
|
+
========================================================================== */
|
|
19
|
+
|
|
20
|
+
@layer components {
|
|
21
|
+
/* Button Base Styles */
|
|
22
|
+
.dg-btn {
|
|
23
|
+
@apply inline-flex items-center justify-center;
|
|
24
|
+
@apply px-5 py-1.5 leading-[2];
|
|
25
|
+
@apply font-dg-sans font-semibold text-base;
|
|
26
|
+
@apply rounded capitalize whitespace-nowrap;
|
|
27
|
+
@apply cursor-pointer select-none;
|
|
28
|
+
@apply outline-none w-fit;
|
|
29
|
+
@apply disabled:opacity-50 disabled:cursor-not-allowed;
|
|
30
|
+
gap: 0.5rem;
|
|
31
|
+
height: 3rem; /* 48px */
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* Button Modifier: Small */
|
|
35
|
+
.dg-btn--sm {
|
|
36
|
+
@apply px-5 py-2;
|
|
37
|
+
@apply font-bold text-sm;
|
|
38
|
+
height: 2.25rem; /* 36px */
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* Button Modifier: Primary - Gradient border with glow effect */
|
|
42
|
+
.dg-btn--primary {
|
|
43
|
+
@apply border border-transparent relative text-white;
|
|
44
|
+
@apply dg-gradient-border dg-glow-cyan-green;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.dg-btn--primary:hover {
|
|
48
|
+
@apply border-transparent text-black;
|
|
49
|
+
@apply dg-bg-reset bg-white dg-shadow-subtle;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/* Button Modifier: Secondary - White background with black text */
|
|
53
|
+
.dg-btn--secondary {
|
|
54
|
+
@apply border border-transparent bg-white text-black;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.dg-btn--secondary:hover {
|
|
58
|
+
@apply border border-white bg-black text-white;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/* Button Modifier: Ghost - Transparent with grey border */
|
|
62
|
+
.dg-btn--ghost {
|
|
63
|
+
@apply border text-white;
|
|
64
|
+
background: transparent;
|
|
65
|
+
border-color: rgb(136, 136, 140);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.dg-btn--ghost:hover {
|
|
69
|
+
@apply border-transparent text-black;
|
|
70
|
+
@apply dg-bg-reset bg-white dg-shadow-subtle;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* Button Modifier: Danger Ghost - For destructive actions */
|
|
74
|
+
.dg-btn--danger-ghost {
|
|
75
|
+
@apply border text-white;
|
|
76
|
+
background: transparent;
|
|
77
|
+
border-color: rgb(240, 68, 56); /* --dg-danger */
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.dg-btn--danger-ghost:hover {
|
|
81
|
+
@apply border-transparent text-white;
|
|
82
|
+
background-color: rgb(240, 68, 56);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* Button Modifier: Icon Only */
|
|
86
|
+
.dg-btn--icon-only {
|
|
87
|
+
@apply px-2 size-12;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.dg-btn--icon-only.dg-btn--sm {
|
|
91
|
+
@apply size-6;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* Button Modifier: Collapse - Responsive mobile-adaptive */
|
|
95
|
+
.dg-btn--collapse {
|
|
96
|
+
@apply inline-flex;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
@media (max-width: 768px) {
|
|
100
|
+
.dg-btn--collapse {
|
|
101
|
+
@apply w-full justify-center;
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/* Button Icon Spacing - Prevent icons from shrinking */
|
|
106
|
+
.dg-btn i,
|
|
107
|
+
.dg-btn svg {
|
|
108
|
+
flex-shrink: 0;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/* ==========================================================================
|
|
112
|
+
LAYOUT COMPONENTS
|
|
113
|
+
========================================================================== */
|
|
114
|
+
|
|
115
|
+
/* Section Component - Reusable content section */
|
|
116
|
+
.dg-section {
|
|
117
|
+
@apply w-full;
|
|
118
|
+
padding: 0.75rem;
|
|
119
|
+
margin-bottom: 1rem;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
@media (min-width: 640px) {
|
|
123
|
+
.dg-section {
|
|
124
|
+
padding: 1.25rem 1rem;
|
|
125
|
+
margin-bottom: 1.5rem;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
@media (min-width: 1024px) {
|
|
130
|
+
.dg-section {
|
|
131
|
+
padding: 2rem 1.5rem;
|
|
132
|
+
margin-bottom: 2rem;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.dg-section--compact {
|
|
137
|
+
padding: 0.5rem;
|
|
138
|
+
margin-bottom: 0.5rem;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
@media (min-width: 640px) {
|
|
142
|
+
.dg-section--compact {
|
|
143
|
+
padding: 0.75rem;
|
|
144
|
+
margin-bottom: 0.75rem;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.dg-section--spacious {
|
|
149
|
+
padding: 1.5rem 0.75rem;
|
|
150
|
+
margin-bottom: 2rem;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
@media (min-width: 640px) {
|
|
154
|
+
.dg-section--spacious {
|
|
155
|
+
padding: 2rem 1.5rem;
|
|
156
|
+
margin-bottom: 2.5rem;
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.dg-section--bordered {
|
|
161
|
+
@apply rounded-lg border;
|
|
162
|
+
background-color: rgb(26, 26, 31); /* --dg-charcoal */
|
|
163
|
+
border-color: rgb(78, 78, 82); /* --dg-pebble */
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.dg-section--elevated {
|
|
167
|
+
@apply rounded-lg border;
|
|
168
|
+
background-color: rgb(26, 26, 31); /* --dg-charcoal */
|
|
169
|
+
border-color: rgb(78, 78, 82); /* --dg-pebble */
|
|
170
|
+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
/* Fieldset-style section with legend title */
|
|
174
|
+
.dg-section--fieldset {
|
|
175
|
+
@apply rounded-lg border relative;
|
|
176
|
+
border-color: rgb(78, 78, 82); /* --dg-pebble */
|
|
177
|
+
padding-top: 2rem;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
@media (min-width: 640px) {
|
|
181
|
+
.dg-section--fieldset {
|
|
182
|
+
padding-top: 2.5rem;
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.dg-section--fieldset .dg-section-heading {
|
|
187
|
+
position: absolute;
|
|
188
|
+
top: -0.75rem;
|
|
189
|
+
left: 1rem;
|
|
190
|
+
background-color: rgb(11, 11, 12); /* --dg-black */
|
|
191
|
+
padding: 0 0.5rem;
|
|
192
|
+
margin: 0;
|
|
193
|
+
font-size: 1rem;
|
|
194
|
+
color: rgb(148, 148, 152); /* --dg-slate */
|
|
195
|
+
text-transform: uppercase;
|
|
196
|
+
letter-spacing: 0.05em;
|
|
197
|
+
font-weight: 600;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
@media (min-width: 640px) {
|
|
201
|
+
.dg-section--fieldset .dg-section-heading {
|
|
202
|
+
font-size: 1.125rem;
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
/* Card Component */
|
|
207
|
+
.dg-card {
|
|
208
|
+
@apply w-full rounded-lg border;
|
|
209
|
+
background-color: rgb(26, 26, 31); /* --dg-charcoal */
|
|
210
|
+
border-color: rgb(78, 78, 82); /* --dg-pebble */
|
|
211
|
+
padding: 0.75rem;
|
|
212
|
+
margin-bottom: 0.75rem;
|
|
213
|
+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
214
|
+
transition: box-shadow 200ms;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
@media (min-width: 640px) {
|
|
218
|
+
.dg-card {
|
|
219
|
+
padding: 1rem;
|
|
220
|
+
margin-bottom: 1rem;
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
@media (min-width: 1024px) {
|
|
225
|
+
.dg-card {
|
|
226
|
+
padding: 1.5rem;
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.dg-card:hover {
|
|
231
|
+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.dg-card--compact {
|
|
235
|
+
padding: 0.5rem;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
@media (min-width: 640px) {
|
|
239
|
+
.dg-card--compact {
|
|
240
|
+
padding: 0.75rem;
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
.dg-card--spacious {
|
|
245
|
+
padding: 1rem;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
@media (min-width: 640px) {
|
|
249
|
+
.dg-card--spacious {
|
|
250
|
+
padding: 1.5rem;
|
|
251
|
+
}
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
@media (min-width: 1024px) {
|
|
255
|
+
.dg-card--spacious {
|
|
256
|
+
padding: 2rem;
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.dg-card--bordered {
|
|
261
|
+
border-width: 2px;
|
|
262
|
+
border-color: rgb(148, 148, 152); /* --dg-slate */
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
/* Code Block Component */
|
|
266
|
+
.dg-code-block {
|
|
267
|
+
@apply w-full rounded-lg border overflow-auto;
|
|
268
|
+
background-color: rgb(26, 26, 31);
|
|
269
|
+
border-color: rgb(78, 78, 82);
|
|
270
|
+
padding: 0.5rem;
|
|
271
|
+
margin: 0.75rem 0;
|
|
272
|
+
max-height: 200px;
|
|
273
|
+
-webkit-overflow-scrolling: touch;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
@media (min-width: 640px) {
|
|
277
|
+
.dg-code-block {
|
|
278
|
+
padding: 0.75rem;
|
|
279
|
+
margin: 1rem 0;
|
|
280
|
+
max-height: 250px;
|
|
281
|
+
}
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
@media (min-width: 1024px) {
|
|
285
|
+
.dg-code-block {
|
|
286
|
+
max-height: 300px;
|
|
287
|
+
}
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
.dg-code-block pre {
|
|
291
|
+
@apply m-0 p-0;
|
|
292
|
+
font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
|
|
293
|
+
font-size: 0.75rem;
|
|
294
|
+
line-height: 1.3;
|
|
295
|
+
color: rgb(237, 237, 242); /* --dg-fog-gray */
|
|
296
|
+
white-space: pre-wrap;
|
|
297
|
+
word-wrap: break-word;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
@media (min-width: 640px) {
|
|
301
|
+
.dg-code-block pre {
|
|
302
|
+
font-size: 0.875rem;
|
|
303
|
+
}
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
.dg-code-block--compact {
|
|
307
|
+
max-height: 120px;
|
|
308
|
+
padding: 0.25rem;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
@media (min-width: 640px) {
|
|
312
|
+
.dg-code-block--compact {
|
|
313
|
+
max-height: 150px;
|
|
314
|
+
padding: 0.5rem;
|
|
315
|
+
}
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
.dg-code-block--tall {
|
|
319
|
+
max-height: 300px;
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
@media (min-width: 640px) {
|
|
323
|
+
.dg-code-block--tall {
|
|
324
|
+
max-height: 400px;
|
|
325
|
+
}
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
@media (min-width: 1024px) {
|
|
329
|
+
.dg-code-block--tall {
|
|
330
|
+
max-height: 500px;
|
|
331
|
+
}
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
.dg-code-block--no-scroll {
|
|
335
|
+
@apply overflow-visible;
|
|
336
|
+
max-height: none;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
/* ==========================================================================
|
|
340
|
+
TYPOGRAPHY COMPONENTS
|
|
341
|
+
========================================================================== */
|
|
342
|
+
|
|
343
|
+
/* Hero Title */
|
|
344
|
+
.dg-hero-title {
|
|
345
|
+
@apply text-center font-bold;
|
|
346
|
+
font-family: "Noto Sans", sans-serif;
|
|
347
|
+
background: linear-gradient(90deg, rgb(20, 154, 251) -30.22%, rgb(19, 239, 149) 78.93%);
|
|
348
|
+
-webkit-background-clip: text;
|
|
349
|
+
-webkit-text-fill-color: transparent;
|
|
350
|
+
background-clip: text;
|
|
351
|
+
letter-spacing: -0.02em;
|
|
352
|
+
font-feature-settings: "liga" 0, "dlig" 0, "hlig" 0, "ordn" 0, "ss09", "kern";
|
|
353
|
+
font-kerning: normal;
|
|
354
|
+
font-size: 3rem;
|
|
355
|
+
line-height: 1.1;
|
|
356
|
+
margin: 0 0 1.5rem 0;
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
@media (max-width: 1024px) {
|
|
360
|
+
.dg-hero-title {
|
|
361
|
+
font-size: 2.5rem;
|
|
362
|
+
}
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
@media (max-width: 768px) {
|
|
366
|
+
.dg-hero-title {
|
|
367
|
+
font-size: 2rem;
|
|
368
|
+
}
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
@media (max-width: 640px) {
|
|
372
|
+
.dg-hero-title {
|
|
373
|
+
font-size: 1.75rem;
|
|
374
|
+
}
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
/* Hero Section Container */
|
|
378
|
+
.dg-hero {
|
|
379
|
+
@apply w-full text-center;
|
|
380
|
+
padding: 4rem 1rem;
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
@media (max-width: 768px) {
|
|
384
|
+
.dg-hero {
|
|
385
|
+
padding: 3rem 1rem;
|
|
386
|
+
}
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
@media (max-width: 640px) {
|
|
390
|
+
.dg-hero {
|
|
391
|
+
padding: 2rem 1rem;
|
|
392
|
+
}
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
/* Hero Content Container */
|
|
396
|
+
.dg-hero__content {
|
|
397
|
+
@apply flex flex-col;
|
|
398
|
+
gap: 1.5rem;
|
|
399
|
+
margin-left: auto;
|
|
400
|
+
margin-right: auto;
|
|
401
|
+
max-width: 850px;
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
@media (max-width: 768px) {
|
|
405
|
+
.dg-hero__content {
|
|
406
|
+
gap: 1.25rem;
|
|
407
|
+
}
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
/* Hero Announcement Banner */
|
|
411
|
+
.dg-hero__announcement {
|
|
412
|
+
@apply inline-flex items-center justify-center;
|
|
413
|
+
@apply rounded-full border;
|
|
414
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
415
|
+
border-color: rgba(148, 148, 152, 0.3);
|
|
416
|
+
padding: 0.5rem 1.25rem;
|
|
417
|
+
margin: 0 auto 0.5rem;
|
|
418
|
+
text-decoration: none;
|
|
419
|
+
transition: all 200ms;
|
|
420
|
+
cursor: pointer;
|
|
421
|
+
width: fit-content;
|
|
422
|
+
gap: 0.75rem;
|
|
423
|
+
}
|
|
424
|
+
|
|
425
|
+
.dg-hero__announcement:hover {
|
|
426
|
+
border-color: rgb(19, 239, 149);
|
|
427
|
+
background-color: rgba(19, 239, 149, 0.1);
|
|
428
|
+
transform: translateY(-2px);
|
|
429
|
+
box-shadow: 0 4px 12px rgba(19, 239, 149, 0.15);
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
.dg-hero__announcement-text {
|
|
433
|
+
color: rgb(251, 251, 255);
|
|
434
|
+
font-size: 0.875rem;
|
|
435
|
+
font-weight: 400;
|
|
436
|
+
white-space: nowrap;
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
@media (max-width: 640px) {
|
|
440
|
+
.dg-hero__announcement-text {
|
|
441
|
+
font-size: 0.75rem;
|
|
442
|
+
white-space: normal;
|
|
443
|
+
}
|
|
444
|
+
}
|
|
445
|
+
|
|
446
|
+
.dg-hero__announcement-cta {
|
|
447
|
+
@apply inline-flex items-center;
|
|
448
|
+
color: rgb(20, 154, 251);
|
|
449
|
+
font-size: 0.875rem;
|
|
450
|
+
font-weight: 600;
|
|
451
|
+
gap: 0.5rem;
|
|
452
|
+
transition: gap 200ms;
|
|
453
|
+
}
|
|
454
|
+
|
|
455
|
+
.dg-hero__announcement:hover .dg-hero__announcement-cta {
|
|
456
|
+
gap: 0.75rem;
|
|
457
|
+
}
|
|
458
|
+
|
|
459
|
+
@media (max-width: 640px) {
|
|
460
|
+
.dg-hero__announcement-cta {
|
|
461
|
+
font-size: 0.75rem;
|
|
462
|
+
}
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
/* Hero Body Text */
|
|
466
|
+
.dg-hero__body {
|
|
467
|
+
@apply text-center;
|
|
468
|
+
color: rgb(237, 237, 242);
|
|
469
|
+
font-size: 1.125rem;
|
|
470
|
+
line-height: 1.75;
|
|
471
|
+
font-weight: 400;
|
|
472
|
+
margin: 0 auto;
|
|
473
|
+
max-width: 850px;
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
@media (max-width: 768px) {
|
|
477
|
+
.dg-hero__body {
|
|
478
|
+
font-size: 1rem;
|
|
479
|
+
line-height: 1.6;
|
|
480
|
+
}
|
|
481
|
+
}
|
|
482
|
+
|
|
483
|
+
@media (max-width: 640px) {
|
|
484
|
+
.dg-hero__body {
|
|
485
|
+
font-size: 0.9375rem;
|
|
486
|
+
line-height: 1.5;
|
|
487
|
+
}
|
|
488
|
+
}
|
|
489
|
+
|
|
490
|
+
/* Hero Actions */
|
|
491
|
+
.dg-hero__actions {
|
|
492
|
+
@apply flex items-center justify-center flex-wrap;
|
|
493
|
+
gap: 1rem;
|
|
494
|
+
margin-top: 0.5rem;
|
|
495
|
+
}
|
|
496
|
+
|
|
497
|
+
@media (max-width: 640px) {
|
|
498
|
+
.dg-hero__actions {
|
|
499
|
+
@apply flex-col w-full;
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
.dg-hero__actions > * {
|
|
503
|
+
@apply w-full;
|
|
504
|
+
}
|
|
505
|
+
}
|
|
506
|
+
|
|
507
|
+
/* Section Heading */
|
|
508
|
+
.dg-section-heading {
|
|
509
|
+
@apply font-semibold;
|
|
510
|
+
font-family: "Noto Sans", sans-serif;
|
|
511
|
+
font-size: 1.5rem;
|
|
512
|
+
color: rgb(251, 251, 255); /* --dg-ghost-white */
|
|
513
|
+
margin: 0 0 1.5rem 0;
|
|
514
|
+
}
|
|
515
|
+
|
|
516
|
+
@media (max-width: 640px) {
|
|
517
|
+
.dg-section-heading {
|
|
518
|
+
font-size: 1.25rem;
|
|
519
|
+
margin-bottom: 0.75rem;
|
|
520
|
+
}
|
|
521
|
+
}
|
|
522
|
+
|
|
523
|
+
/* Card Heading */
|
|
524
|
+
.dg-card-heading {
|
|
525
|
+
@apply font-medium;
|
|
526
|
+
font-family: "Noto Sans", sans-serif;
|
|
527
|
+
font-size: 1.25rem;
|
|
528
|
+
color: rgb(251, 251, 255);
|
|
529
|
+
margin: 0 0 0.75rem 0;
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
/* Item Title */
|
|
533
|
+
.dg-item-title {
|
|
534
|
+
@apply font-medium;
|
|
535
|
+
font-family: "Noto Sans", sans-serif;
|
|
536
|
+
font-size: 1rem;
|
|
537
|
+
color: rgb(251, 251, 255);
|
|
538
|
+
margin: 0 0 0.25rem 0;
|
|
539
|
+
}
|
|
540
|
+
|
|
541
|
+
/* Prose Text */
|
|
542
|
+
.dg-prose {
|
|
543
|
+
@apply w-full;
|
|
544
|
+
color: rgb(237, 237, 242); /* --dg-fog-gray */
|
|
545
|
+
font-size: 0.875rem;
|
|
546
|
+
line-height: 1.4;
|
|
547
|
+
margin-bottom: 0.75rem;
|
|
548
|
+
}
|
|
549
|
+
|
|
550
|
+
@media (min-width: 640px) {
|
|
551
|
+
.dg-prose {
|
|
552
|
+
font-size: 1rem;
|
|
553
|
+
margin-bottom: 1rem;
|
|
554
|
+
max-width: 65ch;
|
|
555
|
+
}
|
|
556
|
+
}
|
|
557
|
+
|
|
558
|
+
.dg-prose.dg-prose--block {
|
|
559
|
+
@apply max-w-none w-full;
|
|
560
|
+
}
|
|
561
|
+
|
|
562
|
+
.dg-prose--large {
|
|
563
|
+
font-size: 1rem;
|
|
564
|
+
}
|
|
565
|
+
|
|
566
|
+
@media (min-width: 640px) {
|
|
567
|
+
.dg-prose--large {
|
|
568
|
+
font-size: 1.125rem;
|
|
569
|
+
}
|
|
570
|
+
}
|
|
571
|
+
|
|
572
|
+
@media (min-width: 1024px) {
|
|
573
|
+
.dg-prose--large {
|
|
574
|
+
font-size: 1.25rem;
|
|
575
|
+
}
|
|
576
|
+
}
|
|
577
|
+
|
|
578
|
+
.dg-prose--small {
|
|
579
|
+
font-size: 0.75rem;
|
|
580
|
+
color: rgb(225, 225, 229); /* --dg-platinum */
|
|
581
|
+
}
|
|
582
|
+
|
|
583
|
+
@media (min-width: 640px) {
|
|
584
|
+
.dg-prose--small {
|
|
585
|
+
font-size: 0.875rem;
|
|
586
|
+
}
|
|
587
|
+
}
|
|
588
|
+
|
|
589
|
+
/* ==========================================================================
|
|
590
|
+
STATUS & FEEDBACK COMPONENTS
|
|
591
|
+
========================================================================== */
|
|
592
|
+
|
|
593
|
+
/* Status Banner */
|
|
594
|
+
.dg-status {
|
|
595
|
+
@apply w-full italic;
|
|
596
|
+
color: rgb(237, 237, 242);
|
|
597
|
+
padding: 0.25rem 0;
|
|
598
|
+
margin: 0.5rem 0;
|
|
599
|
+
font-size: 0.875rem;
|
|
600
|
+
line-height: 1.3;
|
|
601
|
+
}
|
|
602
|
+
|
|
603
|
+
@media (min-width: 640px) {
|
|
604
|
+
.dg-status {
|
|
605
|
+
font-size: 1rem;
|
|
606
|
+
padding: 0.5rem 0;
|
|
607
|
+
margin: 0.75rem 0;
|
|
608
|
+
}
|
|
609
|
+
}
|
|
610
|
+
|
|
611
|
+
.dg-status--info {
|
|
612
|
+
color: rgb(237, 237, 242);
|
|
613
|
+
}
|
|
614
|
+
|
|
615
|
+
.dg-status--success {
|
|
616
|
+
color: rgb(18, 183, 106); /* --dg-success */
|
|
617
|
+
}
|
|
618
|
+
|
|
619
|
+
.dg-status--warning {
|
|
620
|
+
color: rgb(254, 200, 75); /* --dg-warning */
|
|
621
|
+
}
|
|
622
|
+
|
|
623
|
+
.dg-status--error {
|
|
624
|
+
color: rgb(240, 68, 56); /* --dg-danger */
|
|
625
|
+
}
|
|
626
|
+
|
|
627
|
+
.dg-status--primary {
|
|
628
|
+
color: rgb(19, 239, 147); /* --dg-primary */
|
|
629
|
+
}
|
|
630
|
+
|
|
631
|
+
.dg-status--secondary {
|
|
632
|
+
color: rgb(20, 154, 251); /* --dg-secondary */
|
|
633
|
+
}
|
|
634
|
+
|
|
635
|
+
.dg-status--with-icon {
|
|
636
|
+
@apply flex items-start;
|
|
637
|
+
gap: 0.25rem;
|
|
638
|
+
}
|
|
639
|
+
|
|
640
|
+
.dg-status--with-icon .dg-status__icon {
|
|
641
|
+
@apply flex-shrink-0;
|
|
642
|
+
font-size: 1em;
|
|
643
|
+
margin-top: 0.1em;
|
|
644
|
+
}
|
|
645
|
+
|
|
646
|
+
.dg-status--compact {
|
|
647
|
+
margin: 0.25rem 0;
|
|
648
|
+
padding: 0.125rem 0;
|
|
649
|
+
font-size: 0.75rem;
|
|
650
|
+
}
|
|
651
|
+
|
|
652
|
+
@media (min-width: 640px) {
|
|
653
|
+
.dg-status--compact {
|
|
654
|
+
font-size: 0.875rem;
|
|
655
|
+
}
|
|
656
|
+
}
|
|
657
|
+
|
|
658
|
+
/* Spinner */
|
|
659
|
+
.dg-spinner {
|
|
660
|
+
@apply rounded-full;
|
|
661
|
+
width: 40px;
|
|
662
|
+
height: 40px;
|
|
663
|
+
border: 3px solid rgb(78, 78, 82);
|
|
664
|
+
border-top: 3px solid rgb(19, 239, 147);
|
|
665
|
+
animation: dg-spin 1s linear infinite;
|
|
666
|
+
margin: 0 auto 0.75rem;
|
|
667
|
+
}
|
|
668
|
+
|
|
669
|
+
@keyframes dg-spin {
|
|
670
|
+
0% {
|
|
671
|
+
transform: rotate(0deg);
|
|
672
|
+
}
|
|
673
|
+
100% {
|
|
674
|
+
transform: rotate(360deg);
|
|
675
|
+
}
|
|
676
|
+
}
|
|
677
|
+
|
|
678
|
+
/* Processing Title */
|
|
679
|
+
.dg-processing-title {
|
|
680
|
+
@apply font-medium;
|
|
681
|
+
font-family: "Noto Sans", sans-serif;
|
|
682
|
+
font-size: 1.25rem;
|
|
683
|
+
color: rgb(251, 251, 255);
|
|
684
|
+
margin: 0 0 0.25rem 0;
|
|
685
|
+
}
|
|
686
|
+
|
|
687
|
+
/* Modal Overlay */
|
|
688
|
+
.dg-modal-overlay {
|
|
689
|
+
@apply hidden fixed inset-0 items-center justify-center;
|
|
690
|
+
background-color: rgba(0, 0, 0, 0.8);
|
|
691
|
+
z-index: 50;
|
|
692
|
+
}
|
|
693
|
+
|
|
694
|
+
.dg-modal-overlay.visible,
|
|
695
|
+
.dg-modal-overlay--visible {
|
|
696
|
+
@apply flex;
|
|
697
|
+
}
|
|
698
|
+
|
|
699
|
+
.dg-modal-content {
|
|
700
|
+
@apply text-center;
|
|
701
|
+
max-width: 400px;
|
|
702
|
+
margin: 0.75rem;
|
|
703
|
+
}
|
|
704
|
+
|
|
705
|
+
/* ==========================================================================
|
|
706
|
+
UTILITY COMPONENTS
|
|
707
|
+
========================================================================== */
|
|
708
|
+
|
|
709
|
+
/* Constrained Width Container */
|
|
710
|
+
.dg-constrain-width {
|
|
711
|
+
@apply w-full;
|
|
712
|
+
}
|
|
713
|
+
|
|
714
|
+
@media (min-width: 640px) {
|
|
715
|
+
.dg-constrain-width {
|
|
716
|
+
max-width: 960px;
|
|
717
|
+
margin-left: auto;
|
|
718
|
+
margin-right: auto;
|
|
719
|
+
}
|
|
720
|
+
}
|
|
721
|
+
|
|
722
|
+
/* Center Horizontally - Complements dg-constrain-width */
|
|
723
|
+
.dg-center-h {
|
|
724
|
+
margin-left: auto;
|
|
725
|
+
margin-right: auto;
|
|
726
|
+
}
|
|
727
|
+
|
|
728
|
+
/* Responsive Grid */
|
|
729
|
+
.dg-grid-mobile-stack {
|
|
730
|
+
@apply flex flex-col;
|
|
731
|
+
gap: 1rem;
|
|
732
|
+
}
|
|
733
|
+
|
|
734
|
+
@media (min-width: 640px) {
|
|
735
|
+
.dg-grid-mobile-stack {
|
|
736
|
+
@apply flex-row;
|
|
737
|
+
gap: 1rem;
|
|
738
|
+
}
|
|
739
|
+
}
|
|
740
|
+
|
|
741
|
+
.dg-grid-mobile-stack > * {
|
|
742
|
+
@apply flex-1;
|
|
743
|
+
}
|
|
744
|
+
|
|
745
|
+
/* Action Group */
|
|
746
|
+
.dg-action-group {
|
|
747
|
+
@apply flex flex-wrap justify-center;
|
|
748
|
+
gap: 1rem;
|
|
749
|
+
}
|
|
750
|
+
|
|
751
|
+
@media (max-width: 640px) {
|
|
752
|
+
.dg-action-group {
|
|
753
|
+
@apply flex-col items-stretch;
|
|
754
|
+
}
|
|
755
|
+
|
|
756
|
+
.dg-action-group .dg-btn {
|
|
757
|
+
@apply w-full;
|
|
758
|
+
}
|
|
759
|
+
}
|
|
760
|
+
|
|
761
|
+
/* Footer */
|
|
762
|
+
.dg-footer {
|
|
763
|
+
@apply text-center border-t;
|
|
764
|
+
border-color: rgb(78, 78, 82);
|
|
765
|
+
margin-top: 4rem;
|
|
766
|
+
}
|
|
767
|
+
|
|
768
|
+
/* Text Center Utility */
|
|
769
|
+
.dg-text-center {
|
|
770
|
+
@apply text-center;
|
|
771
|
+
}
|
|
772
|
+
}
|