leaflet.pub
a tool for shared writing and social publishing
cozylittle.house
1@import "tailwindcss";
2
3@theme inline {
4 --breakpoint-*: initial;
5 --breakpoint-sm: 640px;
6 --breakpoint-md: 960px;
7 --breakpoint-lg: 1280px;
8
9 --radius-*: initial;
10 --radius-none: 0;
11 --radius-md: 0.25rem;
12 --radius-lg: 0.5rem;
13 --radius-full: 9999px;
14
15 --color-*: initial;
16 --color-inherit: inherit;
17 --color-transparent: transparent;
18 --color-current: currentColor;
19 --color-primary: rgb(var(--primary));
20 --color-secondary: color-mix(
21 in oklab,
22 rgb(var(--primary)),
23 rgb(var(--bg-page)) 25%
24 );
25 --color-tertiary: color-mix(
26 in oklab,
27 rgb(var(--primary)),
28 rgb(var(--bg-page)) 55%
29 );
30 --color-border: color-mix(
31 in oklab,
32 rgb(var(--primary)),
33 rgb(var(--bg-page)) 75%
34 );
35 --color-border-light: color-mix(
36 in oklab,
37 rgb(var(--primary)),
38 rgb(var(--bg-page)) 85%
39 );
40 --color-white: #ffffff;
41 --color-accent-1: rgb(var(--accent-1));
42 --color-accent-2: rgb(var(--accent-2));
43 --color-accent-contrast: rgb(var(--accent-contrast));
44 --color-bg-leaflet: rgb(var(--bg-leaflet));
45 --color-bg-page: rgb(var(--bg-page));
46 --color-highlight-1: var(--highlight-1);
47 --color-highlight-2: rgb(var(--highlight-2));
48 --color-highlight-3: rgb(var(--highlight-3));
49 --color-test: #e18181;
50 --color-test-blue: #48d1ef;
51
52 --text-*: initial;
53 --text-xs: 0.75rem;
54 --text-sm: 0.875rem;
55 --text-base: 1rem;
56 --text-lg: 1.125rem;
57 --text-xl: 1.625rem;
58 --text-2xl: 2rem;
59
60 --shadow-sm: 0.9px 1.5px 1.7px -1.8px rgba(var(--primary), 0.2),
61 4.2px 6.9px 7.8px -3.5px rgba(var(--primary), 0.15);
62 --shadow-md: 1.2px 2.5px 2.7px -1.8px rgba(var(--primary), 0.1),
63 5.6px 11.6px 12.5px -3.5px rgba(var(--primary), 0.15);
64
65 --font-sans: var(--font-quattro);
66 --font-serif: Garamond;
67}
68
69/*
70 The default border color has changed to `currentcolor` in Tailwind CSS v4,
71 so we've added these compatibility styles to make sure everything still
72 looks the same as it did with Tailwind CSS v3.
73
74 If we ever want to remove these styles, we need to add an explicit border
75 color utility to any element that depends on these defaults.
76*/
77@layer base {
78 *,
79 ::after,
80 ::before,
81 ::backdrop,
82 ::file-selector-button {
83 border-color: var(--color-gray-200, currentcolor);
84 }
85}
86
87@layer base {
88 :root {
89 --bg-leaflet: 240, 247, 250;
90 --bg-page: 255, 255, 255;
91 --bg-page-alpha: 1;
92
93 --primary: 39, 39, 39;
94
95 --accent-1: 0, 0, 225;
96 --accent-2: 255, 255, 255;
97 --accent-contrast: 0, 0, 225;
98 --accent-1-is-contrast: "true";
99 --accent-light: color-mix(
100 in oklab,
101 rgb(var(--accent-contrast)),
102 rgb(var(--bg-page)) 85%
103 );
104
105 --highlight-1: 255, 177, 177;
106 --highlight-2: 253, 245, 203;
107 --highlight-3: 255, 205, 195;
108
109 --list-marker-width: 36px;
110 --page-width-unitless: min(624, calc(var(--leaflet-width-unitless) - 12));
111 --page-width-units: min(624px, calc(100vw - 12px));
112
113 --gripperSVG: url("/gripperPattern.svg");
114 --gripperSVG2: url("/gripperPattern2.svg");
115 --hatchSVG: url("/hatchPattern.svg");
116 --wavySVG: (url("/RSVPBackground/wavy.svg"));
117
118 --safe-padding-bottom: max(calc(env(safe-area-inset-bottom) - 8px), 16px);
119 }
120 @media (max-width: 640px) {
121 :root {
122 --list-marker-width: 20px;
123 }
124 }
125
126 @media (min-width: 640px) {
127 :root {
128 --page-width-unitless: min(
129 624,
130 calc(var(--leaflet-width-unitless) - 128)
131 );
132 --page-width-units: min(624px, calc(100vw - 128px));
133 }
134 }
135
136 @media (min-width: 1280px) {
137 :root {
138 --page-width-unitless: min(
139 624,
140 calc((var(--leaflet-width-unitless) / 2) - 32)
141 );
142 --page-width-units: min(624px, calc((100vw / 2) - 32px));
143 }
144 }
145
146 html,
147 body {
148 @apply h-full;
149 @apply p-0;
150 @apply overscroll-y-none;
151 min-height: -webkit-fill-available;
152 @apply font-sans;
153 font-synthesis: none;
154 }
155
156 #__next {
157 height: 100%;
158 }
159
160 /* START FONT STYLING */
161 h1 {
162 @apply text-2xl;
163 @apply font-bold;
164 }
165
166 h2 {
167 @apply text-xl;
168 @apply font-bold;
169 }
170
171 h3 {
172 @apply text-lg;
173 @apply font-bold;
174 }
175
176 h4 {
177 @apply text-base;
178 @apply font-bold;
179 }
180
181 p {
182 @apply text-base;
183 }
184
185 small {
186 @apply text-sm;
187 }
188
189 a {
190 @apply text-accent-contrast;
191 @apply hover:cursor-pointer;
192 @apply no-underline;
193 @apply hover:underline;
194 }
195
196 pre {
197 font-family: var(--font-quattro);
198 }
199
200 p {
201 font-size: inherit;
202 }
203
204 ::placeholder {
205 @apply text-tertiary;
206 @apply italic;
207 }
208 /*END FONT STYLING*/
209
210 /* START GLOBAL STYLING */
211
212 /* END GLOBAL STYLING */
213}
214
215img {
216 font-size: 0;
217}
218
219button:hover {
220 cursor: pointer;
221}
222
223blockquote {
224 margin: 0;
225}
226
227/* Hide scrollbar for Chrome, Safari and Opera */
228.no-scrollbar::-webkit-scrollbar {
229 display: none;
230}
231.no-scrollbar {
232 scrollbar-width: none;
233}
234
235input::-webkit-outer-spin-button,
236input::-webkit-inner-spin-button {
237 -webkit-appearance: none;
238 margin: 0;
239}
240input[type="number"] {
241 -moz-appearance: textfield;
242}
243
244::-webkit-calendar-picker-indicator {
245 mask-image: url(/timeInputIcon.svg);
246 mask-size: 100% 100%;
247 background-image: url(/gripperPattern1.svg);
248 background-color: color-mix(
249 in oklab,
250 rgb(var(--primary)),
251 rgb(var(--bg-page)) 55%
252 );
253}
254
255.inline-code {
256 display: inline;
257 font-size: 1em;
258 @apply bg-border-light;
259 @apply font-mono;
260 @apply px-px;
261 @apply py-px;
262 @apply -mx-px;
263 @apply -my-px;
264 @apply rounded-[4px];
265 @apply box-decoration-clone;
266}
267
268pre.shiki code {
269 display: block;
270}
271
272pre.shiki {
273 @apply p-2;
274 @apply rounded-md;
275 @apply overflow-auto;
276}
277
278.highlight:has(+ .highlight) {
279 @apply rounded-r-none;
280}
281.highlight + .highlight {
282 @apply rounded-l-none;
283}
284
285.highlight {
286 @apply px-px;
287 @apply py-px;
288 @apply -mx-px;
289 @apply -my-px;
290 @apply rounded-[4px];
291 @apply box-decoration-clone;
292}
293
294.selected .selection-highlight {
295 background-color: Highlight;
296 @apply py-[1.5px];
297}
298
299.ProseMirror:focus-within .selection-highlight {
300 background-color: transparent;
301}
302
303.ProseMirror .atMention.ProseMirror-selectednode,
304.ProseMirror .didMention.ProseMirror-selectednode {
305 @apply text-accent-contrast;
306 @apply px-0.5;
307 @apply -mx-[3px]; /* extra px to account for the border*/
308 @apply -my-px; /*to account for the border*/
309 @apply rounded-[4px];
310 @apply box-decoration-clone;
311 background-color: rgba(var(--accent-contrast), 0.2);
312 border: 1px solid rgba(var(--accent-contrast), 1);
313}
314
315.mention {
316 @apply cursor-pointer;
317 @apply text-accent-contrast;
318 @apply px-0.5;
319 @apply -mx-[3px];
320 @apply -my-px; /*to account for the border*/
321 @apply rounded-[4px];
322 @apply box-decoration-clone;
323 background-color: rgba(var(--accent-contrast), 0.2);
324 border: 1px solid transparent;
325}
326
327.multiselected:focus-within .selection-highlight {
328 background-color: transparent;
329}
330
331.transparent-outline {
332 @apply outline-solid;
333 @apply outline-transparent;
334}
335
336.selected-outline {
337 @apply border;
338 @apply focus:outline-solid;
339 @apply focus:outline-2;
340 @apply focus:outline-offset-1;
341 @apply focus-within:outline-solid;
342 @apply focus-within:outline-2;
343 @apply focus-within:outline-offset-1;
344 @apply hover:outline-solid;
345 @apply hover:outline-2;
346 @apply hover:outline-offset-1;
347}
348
349.input-with-border {
350 @apply border;
351 @apply border-border;
352 @apply bg-bg-page;
353 @apply rounded-md;
354 @apply px-1;
355 @apply py-0.5;
356 @apply hover:border-tertiary;
357
358 @apply focus:border-tertiary;
359 @apply focus:outline-solid;
360 @apply focus:outline-tertiary;
361 @apply focus:outline-2;
362 @apply focus:outline-offset-1;
363
364 @apply focus-within:border-tertiary;
365 @apply focus-within:outline-solid;
366 @apply focus-within:outline-tertiary;
367 @apply focus-within:outline-2;
368 @apply focus-within:outline-offset-1;
369
370 @apply disabled:border-border-light;
371 @apply disabled:hover:border-border-light;
372 @apply disabled:bg-border-light;
373 @apply disabled:text-tertiary;
374}
375
376.block-border {
377 @apply border;
378 @apply border-border-light;
379 @apply rounded-lg;
380 @apply outline-solid;
381 @apply outline-offset-1;
382 @apply outline-2;
383 @apply outline-transparent;
384 @apply hover:border-border;
385}
386
387.block-border-selected {
388 @apply border;
389 @apply border-border;
390 @apply rounded-lg;
391 @apply outline-solid;
392 @apply outline-offset-1;
393 @apply outline-2;
394 @apply outline-border;
395}
396
397.blockquote {
398 @apply border-l-2;
399 @apply border-border;
400 @apply pl-3;
401 @apply ml-2;
402}
403
404.transparent-container {
405 @apply border;
406 @apply border-border-light;
407 @apply rounded-md;
408}
409
410.container {
411 background: rgba(var(--bg-page), 0.75);
412 @apply border;
413 @apply border-bg-page;
414 @apply rounded-md;
415}
416
417.opaque-container {
418 @apply bg-bg-page;
419 @apply border;
420 @apply border-border-light;
421 @apply rounded-md;
422}
423
424.accent-container {
425 background: color-mix(
426 in oklab,
427 rgb(var(--accent-contrast)),
428 rgb(var(--bg-page)) 85%
429 );
430 @apply rounded-md;
431}
432
433.menuItem {
434 @apply text-secondary;
435 @apply hover:text-secondary;
436 @apply data-highlighted:bg-[var(--accent-light)];
437 @apply data-highlighted:outline-none;
438 @apply hover:bg-[var(--accent-light)];
439 text-align: left;
440 font-weight: 800;
441 padding: 0.25rem 0.5rem;
442 border-radius: 0.25rem;
443 outline: none !important;
444 cursor: pointer;
445 background-color: transparent;
446 display: flex;
447 gap: 0.5rem;
448
449 :hover {
450 text-decoration: none !important;
451 background-color: rgb(var(--accent-light));
452 }
453}
454
455.pwa-padding {
456 padding-top: max(calc(env(safe-area-inset-top) - 8px)) !important;
457}
458.pwa-padding-bottom {
459 padding-bottom: var(--safe-padding-bottom);
460}
461
462/* animation for new star in publish success illustration */
463@keyframes new-star-animation {
464 0% {
465 transform: scale(0);
466 opacity: 0;
467 }
468 50% {
469 transform: scale(0.1);
470 opacity: 0;
471 }
472 80% {
473 transform: scale(1.2);
474 opacity: 1;
475 }
476 100% {
477 transform: scale(1);
478 }
479}
480
481.new-star {
482 animation-name: new-star-animation;
483 animation-duration: 1s;
484 animation-iteration-count: 1;
485 animation-timing-function: ease-in;
486}