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}
214button:hover {
215 cursor: pointer;
216}
217
218blockquote {
219 margin: 0;
220}
221
222/* Hide scrollbar for Chrome, Safari and Opera */
223.no-scrollbar::-webkit-scrollbar {
224 display: none;
225}
226.no-scrollbar {
227 scrollbar-width: none;
228}
229
230input::-webkit-outer-spin-button,
231input::-webkit-inner-spin-button {
232 -webkit-appearance: none;
233 margin: 0;
234}
235input[type="number"] {
236 -moz-appearance: textfield;
237}
238
239::-webkit-calendar-picker-indicator {
240 mask-image: url(/timeInputIcon.svg);
241 mask-size: 100% 100%;
242 background-image: url(/gripperPattern1.svg);
243 background-color: color-mix(
244 in oklab,
245 rgb(var(--primary)),
246 rgb(var(--bg-page)) 55%
247 );
248}
249
250.inline-code {
251 display: inline;
252 font-size: 1em;
253 @apply bg-border-light;
254 @apply font-mono;
255 @apply px-px;
256 @apply py-px;
257 @apply -mx-px;
258 @apply -my-px;
259 @apply rounded-[4px];
260 @apply box-decoration-clone;
261}
262
263pre.shiki code {
264 display: block;
265}
266
267pre.shiki {
268 @apply p-2;
269 @apply rounded-md;
270 @apply overflow-auto;
271}
272
273.highlight:has(+ .highlight) {
274 @apply rounded-r-none;
275}
276.highlight + .highlight {
277 @apply rounded-l-none;
278}
279
280.highlight {
281 @apply px-px;
282 @apply py-px;
283 @apply -mx-px;
284 @apply -my-px;
285 @apply rounded-[4px];
286 @apply box-decoration-clone;
287}
288
289.selected .selection-highlight {
290 background-color: Highlight;
291 @apply py-[1.5px];
292}
293
294/* Underline mention nodes when selected in ProseMirror */
295.ProseMirror .atMention.ProseMirror-selectednode,
296.ProseMirror .didMention.ProseMirror-selectednode {
297 text-decoration: underline;
298}
299
300.ProseMirror:focus-within .selection-highlight {
301 background-color: transparent;
302}
303
304.multiselected:focus-within .selection-highlight {
305 background-color: transparent;
306}
307
308.transparent-outline {
309 @apply outline-solid;
310 @apply outline-transparent;
311}
312
313.selected-outline {
314 @apply border;
315 @apply focus:outline-solid;
316 @apply focus:outline-2;
317 @apply focus:outline-offset-1;
318 @apply focus-within:outline-solid;
319 @apply focus-within:outline-2;
320 @apply focus-within:outline-offset-1;
321 @apply hover:outline-solid;
322 @apply hover:outline-2;
323 @apply hover:outline-offset-1;
324}
325
326.input-with-border {
327 @apply border;
328 @apply border-border;
329 @apply bg-bg-page;
330 @apply rounded-md;
331 @apply px-1;
332 @apply py-0.5;
333 @apply hover:border-tertiary;
334
335 @apply focus:border-tertiary;
336 @apply focus:outline-solid;
337 @apply focus:outline-tertiary;
338 @apply focus:outline-2;
339 @apply focus:outline-offset-1;
340
341 @apply focus-within:border-tertiary;
342 @apply focus-within:outline-solid;
343 @apply focus-within:outline-tertiary;
344 @apply focus-within:outline-2;
345 @apply focus-within:outline-offset-1;
346
347 @apply disabled:border-border-light;
348 @apply disabled:hover:border-border-light;
349 @apply disabled:bg-border-light;
350 @apply disabled:text-tertiary;
351}
352
353.block-border {
354 @apply border;
355 @apply border-border-light;
356 @apply rounded-lg;
357 @apply outline-solid;
358 @apply outline-offset-1;
359 @apply outline-2;
360 @apply outline-transparent;
361 @apply hover:border-border;
362}
363
364.block-border-selected {
365 @apply border;
366 @apply border-border;
367 @apply rounded-lg;
368 @apply outline-solid;
369 @apply outline-offset-1;
370 @apply outline-2;
371 @apply outline-border;
372}
373
374.blockquote {
375 @apply border-l-2;
376 @apply border-border;
377 @apply pl-3;
378 @apply ml-2;
379}
380
381.transparent-container {
382 @apply border;
383 @apply border-border-light;
384 @apply rounded-md;
385}
386
387.container {
388 background: rgba(var(--bg-page), 0.75);
389 @apply border;
390 @apply border-bg-page;
391 @apply rounded-md;
392}
393
394.opaque-container {
395 @apply bg-bg-page;
396 @apply border;
397 @apply border-border-light;
398 @apply rounded-md;
399}
400
401.accent-container {
402 background: color-mix(
403 in oklab,
404 rgb(var(--accent-contrast)),
405 rgb(var(--bg-page)) 85%
406 );
407 @apply rounded-md;
408}
409
410.menuItem {
411 @apply text-secondary;
412 @apply hover:text-secondary;
413 @apply data-highlighted:bg-[var(--accent-light)];
414 @apply data-highlighted:outline-none;
415 @apply hover:bg-[var(--accent-light)];
416 text-align: left;
417 font-weight: 800;
418 padding: 0.25rem 0.5rem;
419 border-radius: 0.25rem;
420 outline: none !important;
421 cursor: pointer;
422 background-color: transparent;
423 display: flex;
424 gap: 0.5rem;
425
426 :hover {
427 text-decoration: none !important;
428 background-color: rgb(var(--accent-light));
429 }
430}
431
432.pwa-padding {
433 padding-top: max(calc(env(safe-area-inset-top) - 8px)) !important;
434}
435.pwa-padding-bottom {
436 padding-bottom: var(--safe-padding-bottom);
437}
438
439/* animation for new star in publish success illustration */
440@keyframes new-star-animation {
441 0% {
442 transform: scale(0);
443 opacity: 0;
444 }
445 50% {
446 transform: scale(0.1);
447 opacity: 0;
448 }
449 80% {
450 transform: scale(1.2);
451 opacity: 1;
452 }
453 100% {
454 transform: scale(1);
455 }
456}
457
458.new-star {
459 animation-name: new-star-animation;
460 animation-duration: 1s;
461 animation-iteration-count: 1;
462 animation-timing-function: ease-in;
463}