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(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/* Underline mention nodes when selected in ProseMirror */
300.ProseMirror .atMention.ProseMirror-selectednode,
301.ProseMirror .didMention.ProseMirror-selectednode {
302 text-decoration: underline;
303}
304
305.ProseMirror:focus-within .selection-highlight {
306 background-color: transparent;
307}
308
309.multiselected:focus-within .selection-highlight {
310 background-color: transparent;
311}
312
313.transparent-outline {
314 @apply outline-solid;
315 @apply outline-transparent;
316}
317
318.selected-outline {
319 @apply border;
320 @apply focus:outline-solid;
321 @apply focus:outline-2;
322 @apply focus:outline-offset-1;
323 @apply focus-within:outline-solid;
324 @apply focus-within:outline-2;
325 @apply focus-within:outline-offset-1;
326 @apply hover:outline-solid;
327 @apply hover:outline-2;
328 @apply hover:outline-offset-1;
329}
330
331.input-with-border {
332 @apply border;
333 @apply border-border;
334 @apply bg-bg-page;
335 @apply rounded-md;
336 @apply px-1;
337 @apply py-0.5;
338 @apply hover:border-tertiary;
339
340 @apply focus:border-tertiary;
341 @apply focus:outline-solid;
342 @apply focus:outline-tertiary;
343 @apply focus:outline-2;
344 @apply focus:outline-offset-1;
345
346 @apply focus-within:border-tertiary;
347 @apply focus-within:outline-solid;
348 @apply focus-within:outline-tertiary;
349 @apply focus-within:outline-2;
350 @apply focus-within:outline-offset-1;
351
352 @apply disabled:border-border-light;
353 @apply disabled:hover:border-border-light;
354 @apply disabled:bg-border-light;
355 @apply disabled:text-tertiary;
356}
357
358.block-border {
359 @apply border;
360 @apply border-border-light;
361 @apply rounded-lg;
362 @apply outline-solid;
363 @apply outline-offset-1;
364 @apply outline-2;
365 @apply outline-transparent;
366 @apply hover:border-border;
367}
368
369.block-border-selected {
370 @apply border;
371 @apply border-border;
372 @apply rounded-lg;
373 @apply outline-solid;
374 @apply outline-offset-1;
375 @apply outline-2;
376 @apply outline-border;
377}
378
379.blockquote {
380 @apply border-l-2;
381 @apply border-border;
382 @apply pl-3;
383 @apply ml-2;
384}
385
386.transparent-container {
387 @apply border;
388 @apply border-border-light;
389 @apply rounded-md;
390}
391
392.container {
393 background: rgba(var(--bg-page), 0.75);
394 @apply border;
395 @apply border-bg-page;
396 @apply rounded-md;
397}
398
399.opaque-container {
400 @apply bg-bg-page;
401 @apply border;
402 @apply border-border-light;
403 @apply rounded-md;
404}
405
406.accent-container {
407 background: color-mix(
408 in oklab,
409 rgb(var(--accent-contrast)),
410 rgb(var(--bg-page)) 85%
411 );
412 @apply rounded-md;
413}
414
415.menuItem {
416 @apply text-secondary;
417 @apply hover:text-secondary;
418 @apply data-highlighted:bg-[var(--accent-light)];
419 @apply data-highlighted:outline-none;
420 @apply hover:bg-[var(--accent-light)];
421 text-align: left;
422 font-weight: 800;
423 padding: 0.25rem 0.5rem;
424 border-radius: 0.25rem;
425 outline: none !important;
426 cursor: pointer;
427 background-color: transparent;
428 display: flex;
429 gap: 0.5rem;
430
431 :hover {
432 text-decoration: none !important;
433 background-color: rgb(var(--accent-light));
434 }
435}
436
437.pwa-padding {
438 padding-top: max(calc(env(safe-area-inset-top) - 8px)) !important;
439}
440.pwa-padding-bottom {
441 padding-bottom: var(--safe-padding-bottom);
442}
443
444/* animation for new star in publish success illustration */
445@keyframes new-star-animation {
446 0% {
447 transform: scale(0);
448 opacity: 0;
449 }
450 50% {
451 transform: scale(0.1);
452 opacity: 0;
453 }
454 80% {
455 transform: scale(1.2);
456 opacity: 1;
457 }
458 100% {
459 transform: scale(1);
460 }
461}
462
463.new-star {
464 animation-name: new-star-animation;
465 animation-duration: 1s;
466 animation-iteration-count: 1;
467 animation-timing-function: ease-in;
468}