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(
111 var(--page-width-setting),
112 calc(var(--leaflet-width-unitless) - 12)
113 );
114 --page-width-units: min(
115 calc(var(--page-width-unitless) * 1px),
116 calc(100vw - 12px)
117 );
118
119 --gripperSVG: url("/gripperPattern.svg");
120 --gripperSVG2: url("/gripperPattern2.svg");
121 --hatchSVG: url("/hatchPattern.svg");
122 --wavySVG: (url("/RSVPBackground/wavy.svg"));
123
124 --safe-padding-bottom: max(calc(env(safe-area-inset-bottom) - 8px), 16px);
125 }
126 @media (max-width: 640px) {
127 :root {
128 --list-marker-width: 20px;
129 }
130 }
131
132 @media (min-width: 640px) {
133 :root {
134 /*picks between max width and screen width with 64px of padding*/
135 --page-width-unitless: min(
136 var(--page-width-setting),
137 calc(var(--leaflet-width-unitless) - 128)
138 );
139 --page-width-units: min(
140 calc(var(--page-width-unitless) * 1px),
141 calc(100vw - 128px)
142 );
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 sm:p-3;
274 @apply p-2;
275 @apply rounded-md;
276 @apply overflow-auto;
277
278 @media (min-width: 640px) {
279 @apply p-3;
280 }
281}
282
283.highlight:has(+ .highlight) {
284 @apply rounded-r-none;
285}
286.highlight + .highlight {
287 @apply rounded-l-none;
288}
289
290.highlight {
291 @apply px-px;
292 @apply py-px;
293 @apply -mx-px;
294 @apply -my-px;
295 @apply rounded-[4px];
296 @apply box-decoration-clone;
297}
298
299.selected .selection-highlight {
300 background-color: Highlight;
301 @apply py-[1.5px];
302}
303
304.ProseMirror:focus-within .selection-highlight {
305 background-color: transparent;
306}
307
308.ProseMirror .atMention.ProseMirror-selectednode,
309.ProseMirror .didMention.ProseMirror-selectednode {
310 @apply text-accent-contrast;
311 @apply px-0.5;
312 @apply rounded-[4px];
313 @apply box-decoration-clone;
314 background-color: rgba(var(--accent-contrast), 0.2);
315 border: 1px solid rgba(var(--accent-contrast), 1);
316}
317
318.mention {
319 @apply cursor-pointer;
320 @apply text-accent-contrast;
321 @apply px-0.5;
322 @apply rounded-[4px];
323 @apply box-decoration-clone;
324 background-color: rgba(var(--accent-contrast), 0.2);
325 border: 1px solid transparent;
326 display: inline;
327 white-space: normal;
328}
329
330.multiselected:focus-within .selection-highlight {
331 background-color: transparent;
332}
333
334.transparent-outline {
335 @apply outline-solid;
336 @apply outline-transparent;
337}
338
339.selected-outline {
340 @apply border;
341 @apply focus:outline-solid;
342 @apply focus:outline-2;
343 @apply focus:outline-offset-1;
344 @apply focus-within:outline-solid;
345 @apply focus-within:outline-2;
346 @apply focus-within:outline-offset-1;
347 @apply hover:outline-solid;
348 @apply hover:outline-2;
349 @apply hover:outline-offset-1;
350}
351
352.input-with-border {
353 @apply border;
354 @apply border-border;
355 @apply bg-bg-page;
356 @apply rounded-md;
357 @apply px-1;
358 @apply py-0.5;
359 @apply hover:border-tertiary;
360
361 @apply focus:border-tertiary;
362 @apply focus:outline-solid;
363 @apply focus:outline-tertiary;
364 @apply focus:outline-2;
365 @apply focus:outline-offset-1;
366
367 @apply focus-within:border-tertiary;
368 @apply focus-within:outline-solid;
369 @apply focus-within:outline-tertiary;
370 @apply focus-within:outline-2;
371 @apply focus-within:outline-offset-1;
372
373 @apply disabled:border-border-light;
374 @apply disabled:hover:border-border-light;
375 @apply disabled:bg-border-light;
376 @apply disabled:text-tertiary;
377}
378
379.block-border {
380 @apply border;
381 @apply border-border-light;
382 @apply rounded-lg;
383 @apply outline-solid;
384 @apply outline-offset-1;
385 @apply outline-2;
386 @apply outline-transparent;
387 @apply hover:border-border;
388}
389
390.block-border-selected {
391 @apply border;
392 @apply border-border;
393 @apply rounded-lg;
394 @apply outline-solid;
395 @apply outline-offset-1;
396 @apply outline-2;
397 @apply outline-border;
398}
399
400.blockquote {
401 @apply border-l-2;
402 @apply border-border;
403 @apply pl-3;
404 @apply ml-2;
405}
406
407.transparent-container {
408 @apply border;
409 @apply border-border-light;
410 @apply rounded-md;
411}
412
413.container {
414 background: rgba(var(--bg-page), 0.75);
415 @apply border;
416 @apply border-bg-page;
417 @apply rounded-md;
418}
419
420.opaque-container {
421 @apply bg-bg-page;
422 @apply border;
423 @apply border-border-light;
424 @apply rounded-md;
425}
426
427.accent-container {
428 background: color-mix(
429 in oklab,
430 rgb(var(--accent-contrast)),
431 rgb(var(--bg-page)) 85%
432 );
433 @apply rounded-md;
434}
435
436.menuItem {
437 @apply text-secondary;
438 @apply hover:text-secondary;
439 @apply data-highlighted:bg-[var(--accent-light)];
440 @apply data-highlighted:outline-none;
441 @apply hover:bg-[var(--accent-light)];
442 text-align: left;
443 font-weight: 800;
444 padding: 0.25rem 0.5rem;
445 border-radius: 0.25rem;
446 outline: none !important;
447 cursor: pointer;
448 background-color: transparent;
449 display: flex;
450 gap: 0.5rem;
451
452 :hover {
453 text-decoration: none !important;
454 background-color: rgb(var(--accent-light));
455 }
456}
457
458.pwa-padding {
459 padding-top: max(calc(env(safe-area-inset-top) - 8px)) !important;
460}
461.pwa-padding-bottom {
462 padding-bottom: var(--safe-padding-bottom);
463}
464
465/* animation for new star in publish success illustration */
466@keyframes new-star-animation {
467 0% {
468 transform: scale(0);
469 opacity: 0;
470 }
471 50% {
472 transform: scale(0.1);
473 opacity: 0;
474 }
475 80% {
476 transform: scale(1.2);
477 opacity: 1;
478 }
479 100% {
480 transform: scale(1);
481 }
482}
483
484.new-star {
485 animation-name: new-star-animation;
486 animation-duration: 1s;
487 animation-iteration-count: 1;
488 animation-timing-function: ease-in;
489}