clips-frontend/app/globals.css at 49d455ffc8dd5ed816e96f6c20303eb06b84c416 · RaymondAbiola/clips-frontend · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
@import "tailwindcss";

:root {
  --color-brand: #00E58F;
  --color-brand-hover: #00DE8A;
  --color-warning: #FACC15;
  --color-error: #EF4444;
  --color-tips: #3B82F6;
  --color-legendary-from: #FFD700;
  --color-legendary-to: #FFA500;
  --color-epic-from: #9D4EDD;
  --color-epic-to: #7209B7;
  --color-uncommon: #3A86FF;
  --color-tiktok: #EE1D52;
  --color-tiktok-accent: #69C9D0;
  --color-youtube: #FF0000;
  --color-instagram: #E1306C;
  --color-instagram-start: #f09433;
  --color-instagram-mid: #dc2743;
  --color-instagram-end: #bc1888;
  --color-phantom: #AB9FF2;
  --color-metamask: #E2761B;

  /* Default Dark Mode (also defined in [data-theme="dark"]) */
  --color-background: #080C0B;
  --color-surface: #101614;
  --color-surface-hover: #161D1A;
  --color-border: #1E2923;
  --color-input: #0B100E;
  --color-muted: #8e9895;
  --color-muted-foreground: #5A6F65;
  --color-subtle: #4A5D54;
  --color-text: #FFFFFF;
}

[data-theme="light"] {
  --color-background: #F8FAF9;
  --color-surface: #FFFFFF;
  --color-surface-hover: #F1F5F3;
  --color-border: #E2E8E5;
  --color-input: #F1F5F3;
  --color-muted: #64748B;
  --color-muted-foreground: #475569;
  --color-subtle: #94A3B8;
  --color-text: #080C0B;
}

@theme {
  --color-brand: var(--color-brand);
  --color-brand-hover: var(--color-brand-hover);
  --color-background: var(--color-background);
  --color-surface: var(--color-surface);
  --color-surface-hover: var(--color-surface-hover);
  --color-border: var(--color-border);
  --color-input: var(--color-input);
  --color-muted: var(--color-muted);
  --color-muted-foreground: var(--color-muted-foreground);
  --color-subtle: var(--color-subtle);
  --color-warning: var(--color-warning);
  --color-error: var(--color-error);
  --color-tips: var(--color-tips);
  --color-legendary-from: var(--color-legendary-from);
  --color-legendary-to: var(--color-legendary-to);
  --color-epic-from: var(--color-epic-from);
  --color-epic-to: var(--color-epic-to);
  --color-uncommon: var(--color-uncommon);
  --color-tiktok: var(--color-tiktok);
  --color-tiktok-accent: var(--color-tiktok-accent);
  --color-youtube: var(--color-youtube);
  --color-instagram: var(--color-instagram);
  --color-instagram-start: var(--color-instagram-start);
  --color-instagram-mid: var(--color-instagram-mid);
  --color-instagram-end: var(--color-instagram-end);
  --color-phantom: var(--color-phantom);
  --color-metamask: var(--color-metamask);
}

@layer base {
  body {
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-inter), system-ui, -apple-system, sans-serif;
    font-feature-settings: "rlig" 1, "calt" 1;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  /* Focus visible styles for keyboard navigation */
  *:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
    border-radius: 4px;
  }
}

@layer utilities {
  .radial-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle at 80% 20%, rgba(0, 229, 143, 0.15), transparent 40%),
                radial-gradient(circle at 20% 80%, rgba(0, 229, 143, 0.05), transparent 40%);
    pointer-events: none;
    z-index: -1;
  }

  /* Glow scaling for mobile */
  @media (max-width: 640px) {
    .glow-large {
      transform: scale(0.8);
    }
  }

  /*
   * CSS containment for repeated, self-contained subtrees (grid cards, list
   * rows). `layout` tells the browser that content inside the element can't
   * affect layout outside it and vice versa, so adding/removing/animating
   * one card doesn't force a layout recalculation of its siblings or
   * ancestors; `style` scopes counters. Deliberately omits `paint` (which
   * also clips overflow, like `overflow: hidden`) so it stays safe to apply
   * even where a child intentionally overflows the box (tooltips, dropdown
   * menus). See docs/css-containment-usage.md.
   *
   * Unsupported browsers (Safari < 15.4) ignore the `contain` declaration
   * entirely — layout is unaffected, so no fallback is needed.
   */
  .contain-layout-style {
    contain: layout style;
  }
}

/* Skeleton shimmer animation — used by components/ui/Skeleton.tsx (#871) */
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .animate-spin {
    animation-duration: 0.3s !important;
    animation-iteration-count: infinite !important;
  }
}