Hugging Face's logo

Spaces:
Shinhati2023
/
Holded_Blog
Running

App Files Community
Shinhati2023 commited on
Commit
c34c87f
·
verified ·
1 Parent(s): ef8b68c

Create styles/components.css

Browse files
Files changed (1) hide show
  1. styles/components.css +653 -0
styles/components.css ADDED
@@ -0,0 +1,653 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* ============================================================
2
+ GLASSGRID — COMPONENT VISUAL STYLES
3
+ Visual rules for each named component.
4
+ Structure lives in layout.css.
5
+ Colors/effects ONLY via token variables.
6
+ ============================================================ */
7
+
8
+ /* ═══ NAVBAR ═══ */
9
+ .navbar {
10
+ /* layout in layout.css */
11
+ }
12
+
13
+ .navbar__logo {
14
+ font: var(--text-subheading);
15
+ background: var(--color-accent-gradient);
16
+ -webkit-background-clip: text;
17
+ background-clip: text;
18
+ -webkit-text-fill-color: transparent;
19
+ letter-spacing: var(--letter-spacing-tight);
20
+ }
21
+
22
+ .navbar__icon-btn {
23
+ width: 36px;
24
+ height: 36px;
25
+ border-radius: var(--radius-full);
26
+ display: flex;
27
+ align-items: center;
28
+ justify-content: center;
29
+ transition: background var(--duration-fast) var(--ease-out);
30
+ color: var(--color-text-secondary);
31
+ }
32
+
33
+ .navbar__icon-btn:hover,
34
+ .navbar__icon-btn:active {
35
+ background: var(--color-interactive-hover);
36
+ color: var(--color-text-primary);
37
+ }
38
+
39
+ /* ═══ BOTTOM NAVIGATION ═══ */
40
+ .bottombar-item {
41
+ cursor: pointer;
42
+ transition: transform var(--duration-fast) var(--ease-spring);
43
+ color: var(--color-text-muted);
44
+ border-radius: var(--radius-lg);
45
+ }
46
+
47
+ .bottombar-item:active {
48
+ transform: scale(0.92);
49
+ }
50
+
51
+ .bottombar-item.active {
52
+ color: var(--color-accent-primary);
53
+ }
54
+
55
+ .bottombar-item__label {
56
+ font: var(--text-micro);
57
+ letter-spacing: var(--letter-spacing-wide);
58
+ }
59
+
60
+ .bottombar-item__dot {
61
+ width: 4px;
62
+ height: 4px;
63
+ border-radius: var(--radius-full);
64
+ background: var(--color-accent-primary);
65
+ margin: 0 auto;
66
+ }
67
+
68
+ /* ═══ POST CARD ═══ */
69
+ .post-card {
70
+ background: var(--color-glass-fill);
71
+ border: 1px solid var(--color-glass-border);
72
+ box-shadow: var(--shadow-md);
73
+ transition: box-shadow var(--duration-normal) var(--ease-out);
74
+ }
75
+
76
+ .post-card:focus-within {
77
+ box-shadow: var(--shadow-lg);
78
+ }
79
+
80
+ .post-card__username {
81
+ font-weight: var(--font-weight-semibold);
82
+ font-size: var(--font-size-sm);
83
+ color: var(--color-text-primary);
84
+ letter-spacing: var(--letter-spacing-tight);
85
+ }
86
+
87
+ .post-card__handle {
88
+ font-size: var(--font-size-xs);
89
+ color: var(--color-text-muted);
90
+ }
91
+
92
+ .post-card__timestamp {
93
+ font-size: var(--font-size-xs);
94
+ color: var(--color-text-muted);
95
+ margin-left: auto;
96
+ }
97
+
98
+ .post-card__more-btn {
99
+ color: var(--color-text-muted);
100
+ transition: color var(--duration-fast);
101
+ border-radius: var(--radius-full);
102
+ width: 32px;
103
+ height: 32px;
104
+ display: flex;
105
+ align-items: center;
106
+ justify-content: center;
107
+ }
108
+
109
+ .post-card__more-btn:hover { color: var(--color-text-primary); }
110
+
111
+ .post-card__media img {
112
+ width: 100%;
113
+ height: 100%;
114
+ object-fit: cover;
115
+ transition: transform var(--duration-slow) var(--ease-out);
116
+ }
117
+
118
+ /* ── Action Icons ── */
119
+ .post-card__like-btn {
120
+ display: flex;
121
+ align-items: center;
122
+ gap: var(--space-2);
123
+ color: var(--color-like-default);
124
+ transition: color var(--duration-fast) var(--ease-out),
125
+ transform var(--duration-fast) var(--ease-spring);
126
+ font-size: var(--font-size-sm);
127
+ font-weight: var(--font-weight-medium);
128
+ }
129
+
130
+ .post-card__like-btn.liked {
131
+ color: var(--color-like-active);
132
+ }
133
+
134
+ .post-card__like-btn:active {
135
+ transform: scale(0.88);
136
+ }
137
+
138
+ .post-card__comment-btn {
139
+ display: flex;
140
+ align-items: center;
141
+ gap: var(--space-2);
142
+ color: var(--color-comment);
143
+ font-size: var(--font-size-sm);
144
+ font-weight: var(--font-weight-medium);
145
+ transition: transform var(--duration-fast) var(--ease-spring);
146
+ }
147
+
148
+ .post-card__comment-btn:active {
149
+ transform: scale(0.88);
150
+ }
151
+
152
+ .post-card__save-btn {
153
+ margin-left: auto;
154
+ color: var(--color-save-default);
155
+ transition: color var(--duration-fast) var(--ease-out);
156
+ }
157
+
158
+ .post-card__save-btn.saved {
159
+ color: var(--color-save-active);
160
+ }
161
+
162
+ .post-card__caption-text {
163
+ font-size: var(--font-size-sm);
164
+ color: var(--color-text-secondary);
165
+ line-height: var(--line-height-normal);
166
+ }
167
+
168
+ .post-card__caption-username {
169
+ font-weight: var(--font-weight-semibold);
170
+ color: var(--color-text-primary);
171
+ margin-right: var(--space-2);
172
+ }
173
+
174
+ .post-card__view-comments {
175
+ font-size: var(--font-size-xs);
176
+ color: var(--color-text-muted);
177
+ cursor: pointer;
178
+ transition: color var(--duration-fast);
179
+ }
180
+
181
+ .post-card__view-comments:hover {
182
+ color: var(--color-text-accent);
183
+ }
184
+
185
+ /* ═══ STORY REEL ═══ */
186
+ .story-item__ring {
187
+ background: var(--story-ring-gradient);
188
+ }
189
+
190
+ .story-item__ring--seen {
191
+ background: var(--color-glass-border-md);
192
+ }
193
+
194
+ .story-item__avatar {
195
+ border: 2px solid var(--color-bg-base);
196
+ border-radius: var(--radius-full);
197
+ }
198
+
199
+ .story-item__label {
200
+ font: var(--text-micro);
201
+ color: var(--color-text-secondary);
202
+ max-width: 60px;
203
+ overflow: hidden;
204
+ text-overflow: ellipsis;
205
+ white-space: nowrap;
206
+ text-align: center;
207
+ }
208
+
209
+ .story-item--add .story-item__ring {
210
+ background: var(--color-glass-fill-md);
211
+ border: 1px dashed var(--color-glass-border-md);
212
+ }
213
+
214
+ /* ��══ PROFILE HEADER ═══ */
215
+ .profile-header__stat-value {
216
+ font: var(--text-subheading);
217
+ color: var(--color-text-primary);
218
+ }
219
+
220
+ .profile-header__stat-label {
221
+ font: var(--text-micro);
222
+ color: var(--color-text-muted);
223
+ text-transform: uppercase;
224
+ letter-spacing: var(--letter-spacing-wider);
225
+ }
226
+
227
+ .profile-header__stat-divider {
228
+ width: 1px;
229
+ background: var(--color-border-subtle);
230
+ height: 32px;
231
+ align-self: center;
232
+ }
233
+
234
+ .profile-header__name {
235
+ font: var(--text-subheading);
236
+ color: var(--color-text-primary);
237
+ }
238
+
239
+ .profile-header__username {
240
+ font: var(--text-caption);
241
+ color: var(--color-text-accent);
242
+ }
243
+
244
+ .profile-header__bio {
245
+ font: var(--text-caption);
246
+ color: var(--color-text-secondary);
247
+ line-height: var(--line-height-loose);
248
+ }
249
+
250
+ .profile-header__location {
251
+ font: var(--text-micro);
252
+ color: var(--color-text-muted);
253
+ display: flex;
254
+ align-items: center;
255
+ gap: var(--space-1);
256
+ }
257
+
258
+ /* ═══ COMMENT BOX ═══ */
259
+ .comment-box__item__body {
260
+ padding: var(--space-2) var(--space-3);
261
+ border-radius: var(--radius-md);
262
+ background: var(--color-glass-fill);
263
+ border: 1px solid var(--color-glass-border);
264
+ flex: 1;
265
+ }
266
+
267
+ .comment-box__item__username {
268
+ font-weight: var(--font-weight-semibold);
269
+ font-size: var(--font-size-xs);
270
+ color: var(--color-text-primary);
271
+ margin-bottom: var(--space-1);
272
+ }
273
+
274
+ .comment-box__item__text {
275
+ font-size: var(--font-size-sm);
276
+ color: var(--color-text-secondary);
277
+ line-height: var(--line-height-normal);
278
+ }
279
+
280
+ .comment-box__item__meta {
281
+ display: flex;
282
+ align-items: center;
283
+ gap: var(--space-4);
284
+ margin-top: var(--space-2);
285
+ }
286
+
287
+ .comment-box__item__time {
288
+ font: var(--text-micro);
289
+ color: var(--color-text-muted);
290
+ }
291
+
292
+ .comment-box__item__like {
293
+ font: var(--text-micro);
294
+ color: var(--color-text-muted);
295
+ transition: color var(--duration-fast);
296
+ }
297
+
298
+ .comment-box__item__like.liked {
299
+ color: var(--color-like-active);
300
+ }
301
+
302
+ .comment-box__item__reply {
303
+ font: var(--text-micro);
304
+ color: var(--color-text-muted);
305
+ font-weight: var(--font-weight-medium);
306
+ transition: color var(--duration-fast);
307
+ }
308
+
309
+ .comment-box__item__reply:hover {
310
+ color: var(--color-text-accent);
311
+ }
312
+
313
+ .comment-box__input-row {
314
+ border-top: 1px solid var(--color-glass-border);
315
+ }
316
+
317
+ .comment-box__input {
318
+ flex: 1;
319
+ height: 40px;
320
+ padding: 0 var(--space-4);
321
+ border-radius: var(--radius-full);
322
+ font-size: var(--font-size-sm);
323
+ color: var(--color-text-primary);
324
+ }
325
+
326
+ .comment-box__submit {
327
+ color: var(--color-accent-primary);
328
+ font-weight: var(--font-weight-semibold);
329
+ font-size: var(--font-size-sm);
330
+ transition: opacity var(--duration-fast);
331
+ }
332
+
333
+ .comment-box__submit:disabled {
334
+ opacity: 0.4;
335
+ cursor: not-allowed;
336
+ }
337
+
338
+ /* ═══ BUTTONS ═══ */
339
+ .btn-primary {
340
+ background: var(--color-accent-gradient);
341
+ color: var(--color-text-primary);
342
+ font-weight: var(--font-weight-semibold);
343
+ font-size: var(--font-size-sm);
344
+ box-shadow: var(--shadow-glow);
345
+ }
346
+
347
+ .btn-primary:hover {
348
+ box-shadow: var(--shadow-glow-accent);
349
+ transform: translateY(-1px);
350
+ }
351
+
352
+ .btn-primary:active {
353
+ transform: scale(0.97) translateY(0);
354
+ }
355
+
356
+ .btn-secondary {
357
+ background: var(--color-glass-fill-md);
358
+ border: 1px solid var(--color-glass-border-md);
359
+ color: var(--color-text-primary);
360
+ font-weight: var(--font-weight-medium);
361
+ font-size: var(--font-size-sm);
362
+ }
363
+
364
+ .btn-secondary:hover {
365
+ background: var(--color-glass-fill-lg);
366
+ }
367
+
368
+ .btn-ghost {
369
+ color: var(--color-text-secondary);
370
+ font-size: var(--font-size-sm);
371
+ font-weight: var(--font-weight-medium);
372
+ }
373
+
374
+ .btn-ghost:hover {
375
+ background: var(--color-interactive-hover);
376
+ color: var(--color-text-primary);
377
+ }
378
+
379
+ .btn-danger {
380
+ background: rgba(239, 68, 68, 0.15);
381
+ border: 1px solid rgba(239, 68, 68, 0.3);
382
+ color: var(--color-error);
383
+ font-weight: var(--font-weight-medium);
384
+ font-size: var(--font-size-sm);
385
+ }
386
+
387
+ .btn-danger:hover {
388
+ background: rgba(239, 68, 68, 0.25);
389
+ }
390
+
391
+ /* ═══ AVATAR ═══ */
392
+ .avatar {
393
+ background: var(--color-glass-fill-lg);
394
+ border: 1.5px solid var(--avatar-border-color);
395
+ }
396
+
397
+ .avatar--ring {
398
+ padding: 2px;
399
+ background: var(--story-ring-gradient);
400
+ border: none;
401
+ }
402
+
403
+ .avatar--ring .avatar__img {
404
+ border: 2px solid var(--color-bg-base);
405
+ border-radius: var(--radius-full);
406
+ }
407
+
408
+ /* ═══ BADGE ═══ */
409
+ .badge-accent {
410
+ background: rgba(168, 85, 247, 0.15);
411
+ border: 1px solid rgba(168, 85, 247, 0.3);
412
+ color: var(--color-accent-primary);
413
+ }
414
+
415
+ .badge-success {
416
+ background: rgba(74, 222, 128, 0.12);
417
+ border: 1px solid rgba(74, 222, 128, 0.25);
418
+ color: var(--color-success);
419
+ }
420
+
421
+ .badge-error {
422
+ background: rgba(248, 113, 113, 0.12);
423
+ border: 1px solid rgba(248, 113, 113, 0.25);
424
+ color: var(--color-error);
425
+ }
426
+
427
+ /* ═══ EXPLORE GRID ═══ */
428
+ .explore-grid-item img {
429
+ width: 100%;
430
+ height: 100%;
431
+ object-fit: cover;
432
+ transition: transform var(--duration-slow) var(--ease-out);
433
+ }
434
+
435
+ .explore-grid-item:hover img {
436
+ transform: scale(1.04);
437
+ }
438
+
439
+ .explore-grid-item__overlay {
440
+ position: absolute;
441
+ inset: 0;
442
+ background: var(--color-bg-scrim);
443
+ display: flex;
444
+ align-items: center;
445
+ justify-content: center;
446
+ opacity: 0;
447
+ transition: opacity var(--duration-normal) var(--ease-out);
448
+ }
449
+
450
+ .explore-grid-item:hover .explore-grid-item__overlay {
451
+ opacity: 1;
452
+ }
453
+
454
+ .explore-grid-item__stats {
455
+ display: flex;
456
+ gap: var(--space-4);
457
+ color: var(--color-text-primary);
458
+ font-weight: var(--font-weight-semibold);
459
+ font-size: var(--font-size-sm);
460
+ }
461
+
462
+ /* ═══ TOAST ═══ */
463
+ .toast {
464
+ background: var(--color-glass-fill-lg);
465
+ backdrop-filter: blur(var(--glass-blur));
466
+ -webkit-backdrop-filter: blur(var(--glass-blur));
467
+ border: 1px solid var(--color-glass-border-md);
468
+ box-shadow: var(--shadow-lg);
469
+ font-size: var(--font-size-sm);
470
+ font-weight: var(--font-weight-medium);
471
+ color: var(--color-text-primary);
472
+ white-space: nowrap;
473
+ }
474
+
475
+ /* ═══ INPUT ═══ */
476
+ .input-field {
477
+ width: 100%;
478
+ height: 48px;
479
+ padding: 0 var(--space-4);
480
+ border-radius: var(--input-radius);
481
+ font-size: var(--font-size-base);
482
+ color: var(--color-text-primary);
483
+ }
484
+
485
+ .textarea-field {
486
+ width: 100%;
487
+ padding: var(--space-3) var(--space-4);
488
+ border-radius: var(--input-radius);
489
+ font-size: var(--font-size-base);
490
+ color: var(--color-text-primary);
491
+ resize: none;
492
+ line-height: var(--line-height-normal);
493
+ }
494
+
495
+ /* ═══ SECTION HEADERS ═══ */
496
+ .section-header {
497
+ display: flex;
498
+ align-items: center;
499
+ justify-content: space-between;
500
+ padding: var(--space-2) var(--page-padding);
501
+ }
502
+
503
+ .section-header__title {
504
+ font: var(--text-subheading);
505
+ color: var(--color-text-primary);
506
+ letter-spacing: var(--letter-spacing-tight);
507
+ }
508
+
509
+ .section-header__action {
510
+ font-size: var(--font-size-sm);
511
+ color: var(--color-text-accent);
512
+ font-weight: var(--font-weight-medium);
513
+ }
514
+
515
+ /* ═══ ADMIN PANEL ═══ */
516
+ .admin-nav-item {
517
+ display: flex;
518
+ align-items: center;
519
+ gap: var(--space-3);
520
+ padding: var(--space-3) var(--space-4);
521
+ border-radius: var(--radius-md);
522
+ font-size: var(--font-size-sm);
523
+ font-weight: var(--font-weight-medium);
524
+ color: var(--color-text-secondary);
525
+ transition: all var(--duration-fast) var(--ease-out);
526
+ cursor: pointer;
527
+ }
528
+
529
+ .admin-nav-item:hover {
530
+ background: var(--color-interactive-hover);
531
+ color: var(--color-text-primary);
532
+ }
533
+
534
+ .admin-nav-item.active {
535
+ background: var(--color-glass-fill-md);
536
+ color: var(--color-text-accent);
537
+ border: 1px solid var(--color-glass-border);
538
+ }
539
+
540
+ .admin-card {
541
+ border-radius: var(--card-radius);
542
+ padding: var(--space-5);
543
+ }
544
+
545
+ .admin-card__title {
546
+ font: var(--text-subheading);
547
+ color: var(--color-text-primary);
548
+ margin-bottom: var(--space-4);
549
+ }
550
+
551
+ .admin-card__label {
552
+ font: var(--text-micro);
553
+ color: var(--color-text-muted);
554
+ text-transform: uppercase;
555
+ letter-spacing: var(--letter-spacing-wider);
556
+ margin-bottom: var(--space-2);
557
+ }
558
+
559
+ .admin-token-swatch {
560
+ width: 32px;
561
+ height: 32px;
562
+ border-radius: var(--radius-sm);
563
+ border: 1px solid var(--color-glass-border-md);
564
+ cursor: pointer;
565
+ flex-shrink: 0;
566
+ }
567
+
568
+ .admin-token-name {
569
+ font: var(--text-caption);
570
+ color: var(--color-text-secondary);
571
+ font-family: var(--font-family-mono);
572
+ flex: 1;
573
+ }
574
+
575
+ .admin-token-value {
576
+ font: var(--text-micro);
577
+ color: var(--color-text-muted);
578
+ font-family: var(--font-family-mono);
579
+ }
580
+
581
+ .theme-card {
582
+ border-radius: var(--card-radius);
583
+ padding: var(--space-4);
584
+ cursor: pointer;
585
+ transition: all var(--duration-normal) var(--ease-out);
586
+ position: relative;
587
+ overflow: hidden;
588
+ }
589
+
590
+ .theme-card.selected {
591
+ border-color: var(--color-accent-primary);
592
+ box-shadow: var(--shadow-glow);
593
+ }
594
+
595
+ .theme-card__preview {
596
+ display: flex;
597
+ gap: var(--space-2);
598
+ margin-bottom: var(--space-3);
599
+ }
600
+
601
+ .theme-card__dot {
602
+ width: 20px;
603
+ height: 20px;
604
+ border-radius: var(--radius-full);
605
+ }
606
+
607
+ /* ═══ TOGGLE SWITCH ═══ */
608
+ .toggle-switch {
609
+ position: relative;
610
+ width: 48px;
611
+ height: 26px;
612
+ flex-shrink: 0;
613
+ }
614
+
615
+ .toggle-switch__track {
616
+ width: 100%;
617
+ height: 100%;
618
+ border-radius: var(--radius-full);
619
+ background: var(--color-glass-fill-md);
620
+ border: 1px solid var(--color-glass-border-md);
621
+ transition: background var(--duration-normal) var(--ease-out);
622
+ cursor: pointer;
623
+ display: flex;
624
+ align-items: center;
625
+ padding: 0 var(--space-1);
626
+ }
627
+
628
+ .toggle-switch__track.on {
629
+ background: rgba(168, 85, 247, 0.25);
630
+ border-color: var(--color-accent-primary);
631
+ }
632
+
633
+ .toggle-switch__thumb {
634
+ width: 20px;
635
+ height: 20px;
636
+ border-radius: var(--radius-full);
637
+ background: var(--color-text-muted);
638
+ transition: transform var(--duration-normal) var(--ease-spring),
639
+ background var(--duration-normal) var(--ease-out);
640
+ flex-shrink: 0;
641
+ }
642
+
643
+ .toggle-switch__track.on .toggle-switch__thumb {
644
+ transform: translateX(22px);
645
+ background: var(--color-accent-primary);
646
+ }
647
+
648
+ /* ═══ DIVIDER ═══ */
649
+ .divider {
650
+ height: 1px;
651
+ background: var(--color-border-subtle);
652
+ margin: var(--space-4) 0;
653
+ }