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}
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.ProseMirror:focus-within .selection-highlight {
295 background-color: transparent;
296}
297
298.multiselected:focus-within .selection-highlight {
299 background-color: transparent;
300}
301
302.transparent-outline {
303 @apply outline-solid;
304 @apply outline-transparent;
305}
306
307.selected-outline {
308 @apply border;
309 @apply focus:outline-solid;
310 @apply focus:outline-2;
311 @apply focus:outline-offset-1;
312 @apply focus-within:outline-solid;
313 @apply focus-within:outline-2;
314 @apply focus-within:outline-offset-1;
315 @apply hover:outline-solid;
316 @apply hover:outline-2;
317 @apply hover:outline-offset-1;
318}
319
320.input-with-border {
321 @apply border;
322 @apply border-border;
323 @apply bg-bg-page;
324 @apply rounded-md;
325 @apply px-1;
326 @apply py-0.5;
327 @apply hover:border-tertiary;
328
329 @apply focus:border-tertiary;
330 @apply focus:outline-solid;
331 @apply focus:outline-tertiary;
332 @apply focus:outline-2;
333 @apply focus:outline-offset-1;
334
335 @apply focus-within:border-tertiary;
336 @apply focus-within:outline-solid;
337 @apply focus-within:outline-tertiary;
338 @apply focus-within:outline-2;
339 @apply focus-within:outline-offset-1;
340
341 @apply disabled:border-border-light;
342 @apply disabled:bg-border-light;
343 @apply disabled:text-tertiary;
344}
345
346.block-border {
347 @apply border;
348 @apply border-border-light;
349 @apply rounded-lg;
350 @apply outline-solid;
351 @apply outline-offset-1;
352 @apply outline-2;
353 @apply outline-transparent;
354 @apply hover:border-border;
355}
356
357.block-border-selected {
358 @apply border;
359 @apply border-border;
360 @apply rounded-lg;
361 @apply outline-solid;
362 @apply outline-offset-1;
363 @apply outline-2;
364 @apply outline-border;
365}
366
367.blockquote {
368 @apply border-l-2;
369 @apply border-border;
370 @apply pl-3;
371 @apply ml-2;
372}
373
374.transparent-container {
375 @apply border;
376 @apply border-border-light;
377 @apply rounded-md;
378}
379
380.page-container {
381 background: rgba(var(--bg-page), var(--bg-page-alpha));
382 @apply border;
383 @apply border-bg-page;
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
424 :hover {
425 text-decoration: none !important;
426 background-color: rgb(var(--accent-light));
427 }
428}
429
430.pwa-padding {
431 padding-top: max(calc(env(safe-area-inset-top) - 8px)) !important;
432}
433.pwa-padding-bottom {
434 padding-bottom: var(--safe-padding-bottom);
435}
436
437/* animation for new star in publish success illustration */
438@keyframes new-star-animation {
439 0% {
440 transform: scale(0);
441 opacity: 0;
442 }
443 50% {
444 transform: scale(0.1);
445 opacity: 0;
446 }
447 80% {
448 transform: scale(1.2);
449 opacity: 1;
450 }
451 100% {
452 transform: scale(1);
453 }
454}
455
456.new-star {
457 animation-name: new-star-animation;
458 animation-duration: 1s;
459 animation-iteration-count: 1;
460 animation-timing-function: ease-in;
461}