index.css raw
1 @tailwind base;
2 @tailwind components;
3 @tailwind utilities;
4 @layer base {
5 * {
6 @apply border-border;
7 text-rendering: optimizeLegibility;
8 -webkit-tap-highlight-color: transparent;
9 }
10
11 html {
12 @apply font-sans antialiased;
13 --bc-color-brand: hsl(var(--primary));
14 --bc-color-brand-dark: hsl(var(--primary));
15 --bc-brand-mix: 100%;
16 --bc-color-brand-button-text: hsl(var(--primary-foreground));
17 --bc-color-brand-button-text-dark: hsl(var(--primary-foreground));
18 }
19
20 input,
21 textarea,
22 button {
23 -webkit-appearance: none;
24 -moz-appearance: none;
25 appearance: none;
26 }
27
28 body {
29 @apply bg-background text-foreground;
30 -webkit-overflow-scrolling: touch;
31 text-size-adjust: 100%;
32 -webkit-text-size-adjust: 100%;
33 }
34
35 body,
36 html {
37 overscroll-behavior-y: none;
38 }
39
40 .clickable {
41 cursor: pointer;
42 transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
43 position: relative;
44
45 &:active {
46 background-color: hsl(var(--muted) / 0.4);
47 }
48 }
49
50 .tiptap p.is-editor-empty:first-child::before {
51 color: hsl(var(--muted-foreground));
52 content: attr(data-placeholder);
53 float: left;
54 height: 0;
55 pointer-events: none;
56 }
57
58 .scrollbar-hide {
59 -ms-overflow-style: none; /* Internet Explorer 10+ */
60 scrollbar-width: none; /* Firefox */
61 }
62 .scrollbar-hide::-webkit-scrollbar {
63 display: none; /* Safari and Chrome */
64 }
65
66 /* Custom scrollbar styling */
67 ::-webkit-scrollbar {
68 width: 8px;
69 height: 8px;
70 }
71
72 ::-webkit-scrollbar-track {
73 background: transparent;
74 }
75
76 ::-webkit-scrollbar-thumb {
77 background: hsl(var(--muted) / 0.5);
78 border-radius: 4px;
79 transition: background 0.2s ease;
80 }
81
82 ::-webkit-scrollbar-thumb:hover {
83 background: hsl(var(--muted) / 0.7);
84 }
85
86 @media (hover: hover) and (pointer: fine) {
87 .clickable:hover {
88 background-color: hsl(var(--muted) / 0.4);
89 }
90 }
91
92 @keyframes shimmer {
93 0% {
94 background-position: 400% 0;
95 }
96 100% {
97 background-position: 0% 0;
98 }
99 }
100
101 .animate-shimmer {
102 animation: shimmer 3s ease-in-out infinite;
103 }
104
105 /* Light theme variables */
106 :root, .light {
107 --chrome-background: 0 0% 100%;
108 --surface-background: 0 0% 98%;
109 --background: 0 0% 100%;
110 --foreground: 240 10% 3.9%;
111 --card: 0 0% 100%;
112 --card-foreground: 240 10% 3.9%;
113 --popover: 0 0% 100%;
114 --popover-foreground: 240 10% 3.9%;
115 --primary: 38 92% 50%;
116 --primary-hover: 38 92% 60%;
117 --primary-foreground: 0 0% 10%;
118 --secondary: 240 4.8% 94%;
119 --secondary-foreground: 240 5.9% 10%;
120 --muted: 240 4.8% 94%;
121 --muted-foreground: 240 3.8% 46.1%;
122 --accent: 240 4.8% 94%;
123 --accent-foreground: 240 5.9% 10%;
124 --destructive: 0 84.2% 60.2%;
125 --destructive-foreground: 0 0% 98%;
126 --border: 240 5.9% 92%;
127 --input: 240 5.9% 90%;
128 --ring: 38 92% 50%;
129 --chart-1: 12 76% 61%;
130 --chart-2: 173 58% 39%;
131 --chart-3: 197 37% 24%;
132 --chart-4: 43 74% 66%;
133 --chart-5: 27 87% 67%;
134 --radius: 0.75rem;
135 }
136 /* System dark preference - apply dark theme by default */
137 @media (prefers-color-scheme: dark) {
138 :root:not(.light) {
139 --chrome-background: 0 0% 0%;
140 --surface-background: 240 10% 3.9%;
141 --background: 0 0% 9%;
142 --foreground: 0 0% 98%;
143 --card: 0 0% 12%;
144 --card-foreground: 0 0% 98%;
145 --popover: 0 0% 12%;
146 --popover-foreground: 0 0% 98%;
147 --primary: 38 92% 50%;
148 --primary-hover: 38 92% 60%;
149 --primary-foreground: 240 5.9% 10%;
150 --secondary: 240 3.7% 15.9%;
151 --secondary-foreground: 0 0% 98%;
152 --muted: 240 3.7% 15.9%;
153 --muted-foreground: 240 5% 64.9%;
154 --accent: 240 3.7% 15.9%;
155 --accent-foreground: 0 0% 98%;
156 --destructive: 0 62.8% 30.6%;
157 --destructive-foreground: 0 0% 98%;
158 --border: 240 3.7% 18%;
159 --input: 240 3.7% 15.9%;
160 --ring: 38 92% 50%;
161 --chart-1: 220 70% 50%;
162 --chart-2: 160 60% 45%;
163 --chart-3: 30 80% 55%;
164 --chart-4: 280 65% 60%;
165 --chart-5: 340 75% 55%;
166 --radius: 0.75rem;
167 }
168 }
169 /* Explicit dark class override */
170 .dark {
171 --chrome-background: 0 0% 0%;
172 --surface-background: 240 10% 3.9%;
173 --background: 0 0% 9%;
174 --foreground: 0 0% 98%;
175 --card: 0 0% 12%;
176 --card-foreground: 0 0% 98%;
177 --popover: 0 0% 12%;
178 --popover-foreground: 0 0% 98%;
179 --primary: 38 92% 50%;
180 --primary-hover: 38 92% 60%;
181 --primary-foreground: 240 5.9% 10%;
182 --secondary: 240 3.7% 15.9%;
183 --secondary-foreground: 0 0% 98%;
184 --muted: 240 3.7% 15.9%;
185 --muted-foreground: 240 5% 64.9%;
186 --accent: 240 3.7% 15.9%;
187 --accent-foreground: 0 0% 98%;
188 --destructive: 0 62.8% 30.6%;
189 --destructive-foreground: 0 0% 98%;
190 --border: 240 3.7% 18%;
191 --input: 240 3.7% 15.9%;
192 --ring: 38 92% 50%;
193 --chart-1: 220 70% 50%;
194 --chart-2: 160 60% 45%;
195 --chart-3: 30 80% 55%;
196 --chart-4: 280 65% 60%;
197 --chart-5: 340 75% 55%;
198 --radius: 0.75rem;
199 }
200 .dark.pure-black {
201 --surface-background: 0 0% 0%;
202 --background: 0 0% 0%;
203 --card: 0 0% 5%;
204 --popover: 0 0% 5%;
205 }
206
207 .dark input[type='datetime-local']::-webkit-calendar-picker-indicator {
208 filter: invert(1) brightness(1.5);
209 }
210 }
211
212 @keyframes progressFill {
213 0% {
214 width: 0%;
215 }
216 100% {
217 width: 100%;
218 }
219 }
220
221 @keyframes shake {
222 0%,
223 100% {
224 transform: translate(0, 0) rotate(0deg);
225 }
226 10% {
227 transform: translate(-1px, -1px) rotate(-1deg);
228 }
229 20% {
230 transform: translate(1px, -1px) rotate(1deg);
231 }
232 30% {
233 transform: translate(-1px, 1px) rotate(-1deg);
234 }
235 40% {
236 transform: translate(1px, 1px) rotate(1deg);
237 }
238 50% {
239 transform: translate(-1px, -1px) rotate(-1deg);
240 }
241 60% {
242 transform: translate(1px, -1px) rotate(1deg);
243 }
244 70% {
245 transform: translate(-1px, 1px) rotate(-1deg);
246 }
247 80% {
248 transform: translate(1px, 1px) rotate(1deg);
249 }
250 90% {
251 transform: translate(-1px, -1px) rotate(-1deg);
252 }
253 }
254