leaflet.pub
a tool for shared writing and social publishing
awarm.space
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 p {
197 font-size: inherit;
198 }
199
200 ::placeholder {
201 @apply text-tertiary;
202 @apply italic;
203 }
204
205 /* Scope custom fonts to document content only (not sidebar/UI chrome) */
206 .pageScrollWrapper {
207 font-family: var(--theme-font, var(--font-quattro));
208 font-size: var(--theme-font-base-size, 16px);
209 }
210
211 .pageScrollWrapper h1,
212 .pageScrollWrapper h2,
213 .pageScrollWrapper h3,
214 .pageScrollWrapper h4 {
215 font-family: var(--theme-heading-font, var(--theme-font, var(--font-quattro)));
216 }
217
218 /* Scale heading sizes relative to the custom base font size */
219 .pageScrollWrapper h1 { font-size: 2em; }
220 .pageScrollWrapper h2 { font-size: 1.625em; }
221 .pageScrollWrapper h3 { font-size: 1.125em; }
222 .pageScrollWrapper h4 { font-size: 1em; }
223
224 /* Scale text size classes relative to the custom base font size.
225 Tailwind's text-sm/text-base/text-lg compile to fixed rem values
226 which ignore the custom base size set on .pageScrollWrapper. */
227 .pageScrollWrapper .textSizeSmall { font-size: 0.875em; }
228 .pageScrollWrapper .textSizeLarge { font-size: 1.125em; }
229
230 .pageScrollWrapper pre {
231 font-family: var(--theme-font, var(--font-quattro));
232 }
233
234 /* Apply custom fonts to publication homepage */
235 .pubWrapper {
236 font-family: var(--theme-font, var(--font-quattro));
237 }
238
239 .pubWrapper h1,
240 .pubWrapper h2,
241 .pubWrapper h3,
242 .pubWrapper h4 {
243 font-family: var(--theme-heading-font, var(--theme-font, var(--font-quattro)));
244 }
245 /*END FONT STYLING*/
246
247 /* START GLOBAL STYLING */
248
249 /* END GLOBAL STYLING */
250}
251
252img {
253 font-size: 0;
254}
255
256button:hover {
257 cursor: pointer;
258}
259
260blockquote {
261 margin: 0;
262}
263
264/* Hide scrollbar for Chrome, Safari and Opera */
265.no-scrollbar::-webkit-scrollbar {
266 display: none;
267}
268.no-scrollbar {
269 scrollbar-width: none;
270}
271
272input::-webkit-outer-spin-button,
273input::-webkit-inner-spin-button {
274 -webkit-appearance: none;
275 margin: 0;
276}
277input[type="number"] {
278 -moz-appearance: textfield;
279}
280
281::-webkit-calendar-picker-indicator {
282 mask-image: url(/timeInputIcon.svg);
283 mask-size: 100% 100%;
284 background-image: url(/gripperPattern1.svg);
285 background-color: color-mix(
286 in oklab,
287 rgb(var(--primary)),
288 rgb(var(--bg-page)) 55%
289 );
290}
291
292.inline-code {
293 display: inline;
294 font-size: 1em;
295 @apply bg-border-light;
296 @apply font-mono;
297 @apply px-px;
298 @apply py-px;
299 @apply -mx-px;
300 @apply -my-px;
301 @apply rounded-[4px];
302 @apply box-decoration-clone;
303}
304
305pre.shiki code {
306 display: block;
307}
308
309pre.shiki {
310 @apply sm:p-3;
311 @apply p-2;
312 @apply rounded-md;
313 @apply overflow-auto;
314 @apply sm:min-h-12;
315 @apply min-h-10;
316
317 @media (min-width: 640px) {
318 @apply p-3;
319 }
320}
321
322.highlight:has(+ .highlight) {
323 @apply rounded-r-none;
324}
325.highlight + .highlight {
326 @apply rounded-l-none;
327}
328
329.highlight {
330 @apply px-px;
331 @apply py-px;
332 @apply -mx-px;
333 @apply -my-px;
334 @apply rounded-[4px];
335 @apply box-decoration-clone;
336}
337
338.selected .selection-highlight {
339 background-color: Highlight;
340 @apply py-[1.5px];
341}
342
343.ProseMirror:focus-within .selection-highlight {
344 background-color: transparent;
345}
346
347.ProseMirror .atMention.ProseMirror-selectednode,
348.ProseMirror .didMention.ProseMirror-selectednode {
349 @apply text-accent-contrast;
350 @apply px-0.5;
351 @apply rounded-[4px];
352 @apply box-decoration-clone;
353 background-color: rgba(var(--accent-contrast), 0.2);
354 border: 1px solid rgba(var(--accent-contrast), 1);
355}
356
357.mention {
358 @apply cursor-pointer;
359 @apply text-accent-contrast;
360 @apply px-0.5;
361 @apply rounded-[4px];
362 @apply box-decoration-clone;
363 background-color: rgba(var(--accent-contrast), 0.2);
364 border: 1px solid transparent;
365 display: inline;
366 white-space: normal;
367}
368
369.multiselected:focus-within .selection-highlight {
370 background-color: transparent;
371}
372
373.transparent-outline {
374 @apply outline-solid;
375 @apply outline-transparent;
376}
377
378.selected-outline {
379 @apply border;
380 @apply focus:outline-solid;
381 @apply focus:outline-2;
382 @apply focus:outline-offset-1;
383 @apply focus-within:outline-solid;
384 @apply focus-within:outline-2;
385 @apply focus-within:outline-offset-1;
386 @apply hover:outline-solid;
387 @apply hover:outline-2;
388 @apply hover:outline-offset-1;
389}
390
391.input-with-border {
392 @apply border;
393 @apply border-border;
394 @apply bg-bg-page;
395 @apply rounded-md;
396 @apply px-1;
397 @apply py-0.5;
398 @apply hover:border-tertiary;
399
400 @apply focus:border-tertiary;
401 @apply focus:outline-solid;
402 @apply focus:outline-tertiary;
403 @apply focus:outline-2;
404 @apply focus:outline-offset-1;
405
406 @apply focus-within:border-tertiary;
407 @apply focus-within:outline-solid;
408 @apply focus-within:outline-tertiary;
409 @apply focus-within:outline-2;
410 @apply focus-within:outline-offset-1;
411
412 @apply disabled:border-border-light;
413 @apply disabled:hover:border-border-light;
414 @apply disabled:bg-border-light;
415 @apply disabled:text-tertiary;
416}
417
418.block-border {
419 @apply border;
420 @apply border-border-light;
421 @apply rounded-lg;
422 @apply outline-solid;
423 @apply outline-offset-1;
424 @apply outline-2;
425 @apply outline-transparent;
426 @apply hover:border-border;
427}
428
429.block-border-selected {
430 @apply border;
431 @apply border-border;
432 @apply rounded-lg;
433 @apply outline-solid;
434 @apply outline-offset-1;
435 @apply outline-2;
436 @apply outline-border;
437}
438
439.blockquote {
440 @apply border-l-2;
441 @apply border-border;
442 @apply pl-3;
443 @apply ml-2;
444}
445
446.transparent-container {
447 @apply border;
448 @apply border-border-light;
449 @apply rounded-md;
450}
451
452.container {
453 background: rgba(var(--bg-page), 0.75);
454 @apply border;
455 @apply border-bg-page;
456 @apply rounded-md;
457}
458
459.opaque-container {
460 @apply bg-bg-page;
461 @apply border;
462 @apply border-border-light;
463 @apply rounded-md;
464}
465
466.accent-container {
467 background: color-mix(
468 in oklab,
469 rgb(var(--accent-contrast)),
470 rgb(var(--bg-page)) 85%
471 );
472 @apply rounded-md;
473}
474
475.menuItem {
476 @apply text-secondary;
477 @apply hover:text-secondary;
478 @apply data-highlighted:bg-[var(--accent-light)];
479 @apply data-highlighted:outline-none;
480 @apply hover:bg-[var(--accent-light)];
481 text-align: left;
482 font-weight: 800;
483 padding: 0.25rem 0.5rem;
484 border-radius: 0.25rem;
485 outline: none !important;
486 cursor: pointer;
487 background-color: transparent;
488 display: flex;
489 gap: 0.5rem;
490
491 :hover {
492 text-decoration: none !important;
493 background-color: rgb(var(--accent-light));
494 }
495}
496
497.pwa-padding {
498 padding-top: max(calc(env(safe-area-inset-top) - 8px)) !important;
499}
500.pwa-padding-bottom {
501 padding-bottom: var(--safe-padding-bottom);
502}
503
504/* animation for new star in publish success illustration */
505@keyframes new-star-animation {
506 0% {
507 transform: scale(0);
508 opacity: 0;
509 }
510 50% {
511 transform: scale(0.1);
512 opacity: 0;
513 }
514 80% {
515 transform: scale(1.2);
516 opacity: 1;
517 }
518 100% {
519 transform: scale(1);
520 }
521}
522
523.new-star {
524 animation-name: new-star-animation;
525 animation-duration: 1s;
526 animation-iteration-count: 1;
527 animation-timing-function: ease-in;
528}
529
530.footnote-scope {
531 counter-reset: footnote;
532}
533.footnote-ref {
534 counter-increment: footnote;
535 cursor: pointer;
536 color: rgb(var(--color-tertiary));
537 opacity: 0.7;
538}
539.footnote-ref::after {
540 content: counter(footnote);
541 vertical-align: super;
542 padding-left: 2px;
543 font-size: 75%;
544 line-height: 0rem;
545}
546.footnote-ref ~ br.ProseMirror-trailingBreak {
547 display: inline;
548 width: 4px;
549}
550.footnote-ref ~ img.ProseMirror-separator {
551 display: none;
552}
553
554.footnote-side-enter {
555 animation: footnote-fade-in 200ms ease-out;
556}
557@keyframes footnote-fade-in {
558 from {
559 opacity: 0;
560 transform: translateX(-8px);
561 }
562 to {
563 opacity: 1;
564 transform: translateX(0);
565 }
566}
567
568.footnote-side-item {
569 max-height: 4.5em;
570 overflow: hidden;
571 transition: max-height 200ms ease, mask-image 200ms ease;
572}
573.footnote-side-item.has-overflow {
574 mask-image: linear-gradient(to bottom, white 50%, transparent 100%);
575}
576.footnote-side-item:hover,
577.footnote-side-item:focus-within,
578.footnote-side-item.footnote-side-focused {
579 max-height: 40em;
580 mask-image: none;
581}