e.xyehr.cn
One Calendar is a privacy-first calendar web app built with Next.js. It has modern security features, including e2ee, password-protected sharing, and self-destructing share links 馃搮
calendar.xyehr.cn
1@tailwind base;
2@tailwind components;
3@tailwind utilities;
4
5html {
6 scroll-behavior: smooth;
7}
8
9body {
10 font-family: Arial, Helvetica, sans-serif;
11}
12
13@layer utilities {
14 .text-balance {
15 text-wrap: balance;
16 }
17
18}
19
20@keyframes landing-title-in-view {
21 from {
22 opacity: 0;
23 filter: blur(12px);
24 transform: translateY(10px);
25 }
26 to {
27 opacity: 1;
28 filter: blur(0);
29 transform: translateY(0);
30 }
31}
32
33
34.landing-title {
35 opacity: 0;
36 filter: blur(12px);
37 transform: translateY(10px);
38}
39
40.landing-title-visible {
41 animation: landing-title-in-view 1300ms cubic-bezier(0.22, 1, 0.36, 1) both;
42}
43
44@layer components {
45 .cn-toast {
46 background-color: hsl(var(--popover));
47 color: hsl(var(--popover-foreground));
48 border: 1px solid hsl(var(--border));
49 box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
50 }
51}
52
53@layer base {
54 :root {
55 --landing-bg: #080808;
56 --landing-panel: #0b0b0b;
57 --landing-text: #ffffff;
58 --landing-muted: #9b9b9b;
59 --landing-subtle: #6f6f6f;
60 --background: 0 0% 100%;
61 --foreground: 0 0% 3.9%;
62 --card: 0 0% 100%;
63 --card-foreground: 0 0% 3.9%;
64 --popover: 0 0% 100%;
65 --popover-foreground: 0 0% 3.9%;
66 --primary: 0 0% 9%;
67 --primary-foreground: 0 0% 98%;
68 --secondary: 0 0% 96.1%;
69 --secondary-foreground: 0 0% 9%;
70 --muted: 0 0% 96.1%;
71 --muted-foreground: 0 0% 45.1%;
72 --accent: 0 0% 96.1%;
73 --accent-foreground: 0 0% 9%;
74 --destructive: 0 84.2% 60.2%;
75 --destructive-foreground: 0 0% 98%;
76 --border: 0 0% 89.8%;
77 --input: 0 0% 89.8%;
78 --ring: 0 0% 3.9%;
79 --chart-1: 12 76% 61%;
80 --chart-2: 173 58% 39%;
81 --chart-3: 197 37% 24%;
82 --chart-4: 43 74% 66%;
83 --chart-5: 27 87% 67%;
84 --radius: 0.5rem;
85 --sidebar-background: 0 0% 98%;
86 --sidebar-foreground: 240 5.3% 26.1%;
87 --sidebar-primary: 240 5.9% 10%;
88 --sidebar-primary-foreground: 0 0% 98%;
89 --sidebar-accent: 240 4.8% 95.9%;
90 --sidebar-accent-foreground: 240 5.9% 10%;
91 --sidebar-border: 220 13% 91%;
92 --sidebar-ring: 217.2 91.2% 59.8%;
93 }
94 .dark {
95 --background: 0 0% 3.9%;
96 --foreground: 0 0% 98%;
97 --card: 0 0% 3.9%;
98 --card-foreground: 0 0% 98%;
99 --popover: 0 0% 3.9%;
100 --popover-foreground: 0 0% 98%;
101 --primary: 0 0% 98%;
102 --primary-foreground: 0 0% 9%;
103 --secondary: 0 0% 14.9%;
104 --secondary-foreground: 0 0% 98%;
105 --muted: 0 0% 14.9%;
106 --muted-foreground: 0 0% 63.9%;
107 --accent: 0 0% 14.9%;
108 --accent-foreground: 0 0% 98%;
109 --destructive: 0 62.8% 30.6%;
110 --destructive-foreground: 0 0% 98%;
111 --border: 0 0% 14.9%;
112 --input: 0 0% 14.9%;
113 --ring: 0 0% 83.1%;
114 --chart-1: 220 70% 50%;
115 --chart-2: 160 60% 45%;
116 --chart-3: 30 80% 55%;
117 --chart-4: 280 65% 60%;
118 --chart-5: 340 75% 55%;
119 --sidebar-background: 240 5.9% 10%;
120 --sidebar-foreground: 240 4.8% 95.9%;
121 --sidebar-primary: 224.3 76.3% 48%;
122 --sidebar-primary-foreground: 0 0% 100%;
123 --sidebar-accent: 240 3.7% 15.9%;
124 --sidebar-accent-foreground: 240 4.8% 95.9%;
125 --sidebar-border: 240 3.7% 15.9%;
126 --sidebar-ring: 217.2 91.2% 59.8%;
127 }
128
129.green,
130.green .app-theme-scope {
131 --background: 142 35% 92%;
132 --foreground: 140 20% 15%;
133 --card: 142 30% 88%;
134 --card-foreground: 140 20% 15%;
135 --popover: 142 30% 88%;
136 --popover-foreground: 140 20% 15%;
137 --primary: 142 65% 40%;
138 --primary-foreground: 0 0% 100%;
139 --secondary: 138 20% 82%;
140 --secondary-foreground: 140 20% 15%;
141 --muted: 138 20% 87%;
142 --muted-foreground: 140 15% 40%;
143 --accent: 142 35% 85%;
144 --accent-foreground: 142 65% 40%;
145 --destructive: 0 84% 60%;
146 --destructive-foreground: 0 0% 100%;
147 --border: 141 32% 72%;
148 --input: 141 25% 83%;
149 --ring: 142 65% 40%;
150 --chart-1: 142 65% 40%;
151 --chart-2: 217 91% 60%;
152 --chart-3: 38 92% 50%;
153 --chart-4: 270 95% 75%;
154 --chart-5: 340 82% 52%;
155 --sidebar-background: 142 30% 88%;
156 --sidebar-foreground: 140 20% 15%;
157 --sidebar-primary: 142 65% 40%;
158 --sidebar-primary-foreground: 0 0% 100%;
159 --sidebar-accent: 138 20% 82%;
160 --sidebar-accent-foreground: 140 20% 15%;
161 --sidebar-border: 141 32% 72%;
162 --sidebar-ring: 142 65% 40%;
163}
164
165.orange,
166.orange .app-theme-scope {
167 --background: 28 50% 92%;
168 --foreground: 20 24% 15%;
169 --card: 28 45% 88%;
170 --card-foreground: 20 24% 15%;
171 --popover: 28 45% 88%;
172 --popover-foreground: 20 24% 15%;
173 --primary: 25 85% 48%;
174 --primary-foreground: 0 0% 100%;
175 --secondary: 28 20% 82%;
176 --secondary-foreground: 20 24% 15%;
177 --muted: 28 20% 87%;
178 --muted-foreground: 20 15% 40%;
179 --accent: 25 50% 87%;
180 --accent-foreground: 25 85% 48%;
181 --destructive: 0 84% 60%;
182 --destructive-foreground: 0 0% 100%;
183 --border: 28 32% 72%;
184 --input: 28 25% 83%;
185 --ring: 25 85% 48%;
186 --chart-1: 25 85% 48%;
187 --chart-2: 142 71% 45%;
188 --chart-3: 217 91% 60%;
189 --chart-4: 270 95% 75%;
190 --chart-5: 340 82% 52%;
191 --sidebar-background: 28 45% 88%;
192 --sidebar-foreground: 20 24% 15%;
193 --sidebar-primary: 25 85% 48%;
194 --sidebar-primary-foreground: 0 0% 100%;
195 --sidebar-accent: 28 20% 82%;
196 --sidebar-accent-foreground: 20 24% 15%;
197 --sidebar-border: 28 32% 72%;
198 --sidebar-ring: 25 85% 48%;
199}
200
201.azalea,
202.azalea .app-theme-scope {
203 --background: 331 25% 95%;
204 --foreground: 331 15% 18%;
205 --card: 331 20% 90%;
206 --card-foreground: 331 15% 18%;
207 --popover: 331 20% 90%;
208 --popover-foreground: 331 15% 18%;
209 --primary: 331 63% 49%;
210 --primary-foreground: 0 0% 100%;
211 --secondary: 328 15% 85%;
212 --secondary-foreground: 331 15% 18%;
213 --muted: 328 15% 88%;
214 --muted-foreground: 331 12% 42%;
215 --accent: 331 25% 87%;
216 --accent-foreground: 331 63% 49%;
217 --destructive: 0 84% 60%;
218 --destructive-foreground: 0 0% 100%;
219 --border: 331 20% 75%;
220 --input: 331 18% 85%;
221 --ring: 331 63% 49%;
222 --chart-1: 331 63% 49%;
223 --chart-2: 217 91% 60%;
224 --chart-3: 38 92% 50%;
225 --chart-4: 270 95% 75%;
226 --chart-5: 340 82% 52%;
227 --sidebar-background: 331 20% 90%;
228 --sidebar-foreground: 331 15% 18%;
229 --sidebar-primary: 331 63% 49%;
230 --sidebar-primary-foreground: 0 0% 100%;
231 --sidebar-accent: 328 15% 85%;
232 --sidebar-accent-foreground: 331 15% 18%;
233 --sidebar-border: 331 20% 75%;
234 --sidebar-ring: 331 63% 49%;
235}
236
237
238
239
240.green,
241.green .app-theme-scope,
242.orange,
243.orange .app-theme-scope,
244.azalea,
245.azalea .app-theme-scope {
246 --card: var(--background);
247 --popover: var(--background);
248}
249
250.green .app-theme-scope button[variant="outline"],
251.orange .app-theme-scope button[variant="outline"],
252.azalea .app-theme-scope button[variant="outline"] {
253 border: 1px solid hsl(var(--border));
254 background: transparent;
255}
256
257.green .app-theme-scope button[variant="ghost"],
258.orange .app-theme-scope button[variant="ghost"],
259.azalea .app-theme-scope button[variant="ghost"] {
260 border: none;
261 background: transparent;
262}
263
264.green .app-theme-scope hr, .green .app-theme-scope .divider,
265.orange .app-theme-scope hr, .orange .app-theme-scope .divider,
266.azalea .app-theme-scope hr, .azalea .app-theme-scope .divider {
267 border-color: hsl(var(--border));
268 opacity: 0.8;
269}
270
271.green .app-theme-scope .separator,
272.orange .app-theme-scope .separator,
273.azalea .app-theme-scope .separator {
274 height: 1px;
275 background: hsl(var(--border));
276 opacity: 0.6;
277}
278}
279
280@layer base {
281 * {
282 @apply border-border;
283 scrollbar-width: none;
284 -ms-overflow-style: none;
285 }
286
287 *::-webkit-scrollbar {
288 display: none;
289 width: 0;
290 height: 0;
291 }
292
293 body {
294 @apply bg-background text-foreground;
295 }
296}
297
298
299.text-balance {
300 text-wrap: balance;
301}
302
303.text-pretty {
304 text-wrap: pretty;
305}
306
307.font-inter {
308 font-family: var(--font-inter), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
309}
310
311.font-instrument-serif {
312 font-family: var(--font-instrument-serif);
313 font-display: swap;
314}
315
316/* Added explicit font loading optimization */
317@supports (font-display: swap) {
318 @font-face {
319 font-family: "Instrument Serif";
320 font-display: swap;
321 }
322}
323
324.mix-blend-multiply {
325 mix-blend-mode: multiply;
326}
327
328.backdrop-blur-custom {
329 backdrop-filter: blur(8.25px);
330}