danieldaum.net
kaneo (minimalist kanban) fork to experiment adding a tangled integration
github.com/usekaneo/kaneo
1@import "tailwindcss";
2
3input:-webkit-autofill,
4input:-webkit-autofill:hover,
5input:-webkit-autofill:focus,
6input:-webkit-autofill:active {
7 -webkit-text-fill-color: var(--foreground) !important;
8 -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
9 transition: background-color 5000s ease-in-out 0s;
10}
11
12@font-face {
13 font-family: "Cal Sans UI";
14 src: url("./assets/fonts/CalSansUI[MODE,wght].woff2") format("woff2");
15 font-display: swap;
16 font-style: normal;
17 font-weight: 300 700;
18}
19
20@font-face {
21 font-family: "Cal Sans Heading";
22 src: url("./assets/fonts/CalSans-SemiBold.woff2") format("woff2");
23 font-display: swap;
24 font-style: normal;
25 font-weight: 600;
26}
27
28@font-face {
29 font-family: "Paper Mono";
30 src: url("./assets/fonts/PaperMono-Regular.woff2") format("woff2");
31 font-display: swap;
32 font-style: normal;
33 font-weight: 400;
34}
35
36@custom-variant dark (&:is(.dark *));
37
38@theme inline {
39 --animate-skeleton: skeleton 2s -1s infinite linear;
40 --font-sans: var(--font-sans);
41 --font-heading: var(--font-heading);
42 --font-mono: var(--font-mono);
43 --color-chart-1: var(--chart-1);
44 --color-chart-2: var(--chart-2);
45 --color-chart-3: var(--chart-3);
46 --color-chart-4: var(--chart-4);
47 --color-chart-5: var(--chart-5);
48 --color-warning-foreground: var(--warning-foreground);
49 --color-warning: var(--warning);
50 --color-success-foreground: var(--success-foreground);
51 --color-success: var(--success);
52 --color-secondary-foreground: var(--secondary-foreground);
53 --color-secondary: var(--secondary);
54 --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
55 --color-sidebar-accent: var(--sidebar-accent);
56 --color-sidebar-border: var(--sidebar-border);
57 --color-sidebar-foreground: var(--sidebar-foreground);
58 --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
59 --color-sidebar-primary: var(--sidebar-primary);
60 --color-sidebar-ring: var(--sidebar-ring);
61 --color-sidebar: var(--sidebar);
62 --color-ring: var(--ring);
63 --color-primary-foreground: var(--primary-foreground);
64 --color-primary: var(--primary);
65 --color-popover-foreground: var(--popover-foreground);
66 --color-popover: var(--popover);
67 --color-muted-foreground: var(--muted-foreground);
68 --color-muted: var(--muted);
69 --color-input: var(--input);
70 --color-info-foreground: var(--info-foreground);
71 --color-info: var(--info);
72 --color-foreground: var(--foreground);
73 --color-destructive-foreground: var(--destructive-foreground);
74 --color-destructive: var(--destructive);
75 --color-card-foreground: var(--card-foreground);
76 --color-card: var(--card);
77 --color-code-foreground: var(--code-foreground);
78 --color-code-highlight: var(--code-highlight);
79 --color-code: var(--code);
80 --color-border: var(--border);
81 --color-background: var(--background);
82 --color-accent-foreground: var(--accent-foreground);
83 --color-accent: var(--accent);
84 --radius-sm: calc(var(--radius) - 4px);
85 --radius-md: calc(var(--radius) - 2px);
86 --radius-lg: var(--radius);
87 --radius-xl: calc(var(--radius) + 4px);
88 @keyframes skeleton {
89 to {
90 background-position: -200% 0;
91 }
92 }
93}
94
95:root {
96 --font-sans:
97 "Cal Sans UI",
98 ui-sans-serif,
99 system-ui,
100 sans-serif;
101 --font-heading: "Cal Sans Heading", var(--font-sans);
102 --font-mono:
103 "Paper Mono",
104 ui-monospace,
105 SFMono-Regular,
106 Menlo,
107 Monaco,
108 Consolas,
109 "Liberation Mono",
110 "Courier New",
111 monospace;
112 --radius: 0.625rem;
113 --accent: --alpha(var(--color-black) / 4%);
114 --accent-foreground: var(--color-neutral-800);
115 --background: var(--color-white);
116 --border: --alpha(var(--color-black) / 8%);
117 --card: var(--color-white);
118 --card-foreground: var(--color-neutral-800);
119 --destructive: var(--color-red-500);
120 --destructive-foreground: var(--color-red-700);
121 --foreground: var(--color-neutral-800);
122 --info: var(--color-blue-500);
123 --info-foreground: var(--color-blue-700);
124 --input: --alpha(var(--color-black) / 10%);
125 --muted: --alpha(var(--color-black) / 4%);
126 --muted-foreground: color-mix(in srgb, var(--color-neutral-500) 90%, var(--color-black));
127 --popover: var(--color-white);
128 --popover-foreground: var(--color-neutral-800);
129 --primary: var(--color-neutral-800);
130 --primary-foreground: var(--color-neutral-50);
131 --ring: var(--color-neutral-400);
132 --secondary: --alpha(var(--color-black) / 4%);
133 --secondary-foreground: var(--color-neutral-800);
134 --success: var(--color-emerald-500);
135 --success-foreground: var(--color-emerald-700);
136 --warning: var(--color-amber-500);
137 --warning-foreground: var(--color-amber-700);
138 --chart-1: var(--color-orange-600);
139 --chart-2: var(--color-teal-600);
140 --chart-3: var(--color-cyan-900);
141 --chart-4: var(--color-amber-400);
142 --chart-5: var(--color-amber-500);
143 --sidebar: var(--color-neutral-50);
144 --sidebar-foreground: color-mix(
145 in srgb,
146 var(--color-neutral-800) 64%,
147 var(--sidebar)
148 );
149 --sidebar-primary: var(--color-neutral-800);
150 --sidebar-primary-foreground: var(--color-neutral-50);
151 --sidebar-accent: --alpha(var(--color-black) / 4%);
152 --sidebar-accent-foreground: var(--color-neutral-800);
153 --sidebar-border: --alpha(var(--color-black) / 6%);
154 --sidebar-ring: var(--color-neutral-400);
155 --code: var(--color-white);
156 --code-foreground: var(--foreground);
157 --code-highlight: --alpha(var(--color-black) / 4%);
158}
159
160.dark {
161 --accent: --alpha(var(--color-white) / 4%);
162 --accent-foreground: var(--color-neutral-100);
163 --background: color-mix(
164 in srgb,
165 var(--color-neutral-950) 96%,
166 var(--color-white)
167 );
168 --border: --alpha(var(--color-white) / 6%);
169 --card: color-mix(in srgb, var(--background) 98%, var(--color-white));
170 --card-foreground: var(--color-neutral-100);
171 --destructive: color-mix(in srgb, var(--color-red-500) 90%, var(--color-white));
172 --destructive-foreground: var(--color-red-400);
173 --foreground: var(--color-neutral-100);
174 --info: var(--color-blue-500);
175 --info-foreground: var(--color-blue-400);
176 --input: --alpha(var(--color-white) / 8%);
177 --muted: --alpha(var(--color-white) / 4%);
178 --muted-foreground: color-mix(in srgb, var(--color-neutral-500) 90%, var(--color-white));
179 --popover: color-mix(in srgb, var(--background) 98%, var(--color-white));
180 --popover-foreground: var(--color-neutral-100);
181 --primary: var(--color-neutral-100);
182 --primary-foreground: var(--color-neutral-800);
183 --ring: var(--color-neutral-500);
184 --secondary: --alpha(var(--color-white) / 4%);
185 --secondary-foreground: var(--color-neutral-100);
186 --success: var(--color-emerald-500);
187 --success-foreground: var(--color-emerald-400);
188 --warning: var(--color-amber-500);
189 --warning-foreground: var(--color-amber-400);
190 --chart-1: var(--color-blue-700);
191 --chart-2: var(--color-emerald-500);
192 --chart-3: var(--color-amber-500);
193 --chart-4: var(--color-purple-500);
194 --chart-5: var(--color-rose-500);
195 --sidebar: color-mix(
196 in srgb,
197 var(--color-neutral-950) 97%,
198 var(--color-white)
199 );
200 --sidebar-foreground: color-mix(
201 in srgb,
202 var(--color-neutral-100) 64%,
203 var(--sidebar)
204 );
205 --sidebar-primary: var(--color-neutral-100);
206 --sidebar-primary-foreground: var(--color-neutral-800);
207 --sidebar-accent: --alpha(var(--color-white) / 4%);
208 --sidebar-accent-foreground: var(--color-neutral-100);
209 --sidebar-border: --alpha(var(--color-white) / 5%);
210 --sidebar-ring: var(--color-neutral-400);
211 --code: color-mix(in srgb, var(--background) 98%, var(--color-white));
212 --code-foreground: var(--foreground);
213 --code-highlight: --alpha(var(--color-white) / 4%);
214}
215
216@layer base {
217 * {
218 @apply border-border outline-ring/50;
219 }
220 body {
221 @apply bg-background font-sans text-foreground antialiased;
222 }
223 h1,
224 h2,
225 h3,
226 h4,
227 h5,
228 h6 {
229 @apply font-heading font-semibold tracking-tight;
230 }
231}
232
233@layer components {
234 .kaneo-tiptap-shell {
235 position: relative;
236 }
237
238 .kaneo-tiptap-shell:focus-within {
239 outline: none;
240 }
241
242 .kaneo-tiptap-shell.is-drag-active,
243 .kaneo-comment-editor-shell.is-drag-active {
244 z-index: 90;
245 }
246
247 .kaneo-editor-quick-attach {
248 position: absolute;
249 right: 0.75rem;
250 bottom: 0.7rem;
251 z-index: 10;
252 display: inline-flex;
253 align-items: center;
254 justify-content: center;
255 width: 2rem;
256 height: 2rem;
257 border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
258 border-radius: 999px;
259 background: color-mix(in srgb, var(--background) 82%, transparent);
260 color: color-mix(in srgb, var(--foreground) 76%, transparent);
261 box-shadow: 0 4px 16px color-mix(in srgb, var(--background) 68%, transparent);
262 transition:
263 background-color 0.15s ease,
264 border-color 0.15s ease,
265 color 0.15s ease,
266 transform 0.15s ease;
267 }
268
269 .kaneo-editor-quick-attach:hover {
270 border-color: color-mix(in srgb, var(--foreground) 18%, var(--border));
271 background: color-mix(in srgb, var(--accent) 72%, transparent);
272 color: var(--foreground);
273 transform: translateY(-1px);
274 }
275
276 .kaneo-editor-quick-attach:focus-visible {
277 outline: none;
278 box-shadow:
279 0 0 0 2px color-mix(in srgb, var(--ring) 24%, transparent),
280 0 4px 16px color-mix(in srgb, var(--background) 68%, transparent);
281 }
282
283 .kaneo-tiptap-bubble {
284 display: inline-flex;
285 align-items: center;
286 gap: 0.1rem;
287 border: 1px solid var(--border);
288 border-radius: calc(var(--radius) - 2px);
289 background: var(--popover);
290 padding: 0.2rem 0.24rem;
291 box-shadow:
292 0 8px 24px --alpha(var(--color-black) / 14%),
293 0 1px 2px --alpha(var(--color-black) / 9%);
294 }
295
296 .kaneo-tiptap-bubble-btn {
297 height: 1.6rem;
298 width: 1.6rem;
299 padding: 0;
300 }
301
302 .kaneo-tiptap-bubble-separator {
303 display: block;
304 width: 1px;
305 height: 1rem;
306 background: color-mix(in srgb, var(--border) 84%, transparent);
307 margin: 0 0.15rem;
308 }
309
310 .kaneo-codeblock-language {
311 position: fixed;
312 z-index: 40;
313 display: inline-flex;
314 align-items: center;
315 gap: 0.3rem;
316 transform: translateX(-100%);
317 }
318
319 .kaneo-codeblock-language-trigger {
320 display: inline-flex;
321 max-width: 10rem;
322 align-items: center;
323 gap: 0.35rem;
324 border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
325 border-radius: 0.45rem;
326 background: color-mix(in srgb, var(--background) 90%, transparent);
327 padding: 0.2rem 0.5rem;
328 font-size: 0.72rem;
329 line-height: 1;
330 color: color-mix(in srgb, var(--foreground) 80%, transparent);
331 backdrop-filter: blur(8px);
332 transition:
333 border-color 0.12s ease,
334 color 0.12s ease,
335 background-color 0.12s ease;
336 }
337
338 .kaneo-codeblock-language-trigger:hover {
339 border-color: color-mix(in srgb, var(--ring) 42%, var(--border));
340 color: var(--foreground);
341 background: color-mix(in srgb, var(--background) 96%, transparent);
342 }
343
344 .kaneo-codeblock-copy-trigger {
345 min-width: 4.6rem;
346 justify-content: center;
347 }
348
349 .kaneo-codeblock-copy-trigger > span {
350 line-height: 1;
351 }
352
353 .kaneo-tiptap-content .ProseMirror {
354 min-height: 1.85rem;
355 padding: 0.2rem 0 2.9rem;
356 font-family: var(--font-sans);
357 font-size: 0.965rem;
358 line-height: 1.72;
359 white-space: pre-wrap;
360 color: var(--foreground);
361 caret-color: var(--foreground);
362 outline: none;
363 }
364
365 .kaneo-tiptap-slash-menu {
366 position: fixed;
367 z-index: 50;
368 min-width: 16rem;
369 border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
370 border-radius: 0.5rem;
371 background: var(--popover);
372 padding: 0.32rem;
373 box-shadow:
374 0 10px 28px --alpha(var(--color-black) / 18%),
375 0 1px 2px --alpha(var(--color-black) / 10%);
376 }
377
378 .kaneo-tiptap-slash-group + .kaneo-tiptap-slash-group {
379 margin-top: 0.2rem;
380 border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
381 padding-top: 0.2rem;
382 }
383
384 .kaneo-tiptap-slash-group-title {
385 padding: 0.22rem 0.42rem 0.3rem;
386 font-size: 0.68rem;
387 font-weight: 600;
388 letter-spacing: 0.01em;
389 text-transform: uppercase;
390 color: color-mix(in srgb, var(--foreground) 48%, transparent);
391 }
392
393 .kaneo-tiptap-slash-item {
394 display: flex;
395 align-items: center;
396 justify-content: space-between;
397 gap: 0.75rem;
398 width: 100%;
399 border-radius: 0.35rem;
400 padding: 0.4rem 0.45rem;
401 text-align: left;
402 font-size: 0.79rem;
403 color: color-mix(in srgb, var(--foreground) 88%, transparent);
404 }
405
406 .kaneo-tiptap-slash-label {
407 min-width: 0;
408 overflow: hidden;
409 text-overflow: ellipsis;
410 white-space: nowrap;
411 }
412
413 .kaneo-tiptap-slash-shortcut {
414 flex-shrink: 0;
415 font-size: 0.68rem;
416 color: color-mix(in srgb, var(--foreground) 52%, transparent);
417 }
418
419 .kaneo-tiptap-slash-item:hover,
420 .kaneo-tiptap-slash-item.is-selected {
421 background: var(--accent);
422 color: var(--accent-foreground);
423 }
424
425 .kaneo-tiptap-slash-empty {
426 padding: 0.4rem 0.55rem;
427 font-size: 0.76rem;
428 color: color-mix(in srgb, var(--foreground) 56%, transparent);
429 }
430
431 .kaneo-tiptap-content .ProseMirror p {
432 margin: 0.2rem 0;
433 }
434
435 .kaneo-tiptap-content .ProseMirror h1,
436 .kaneo-tiptap-content .ProseMirror h2,
437 .kaneo-tiptap-content .ProseMirror h3 {
438 margin: 1.05rem 0 0.45rem;
439 font-family: var(--font-heading);
440 font-weight: 600;
441 letter-spacing: -0.02em;
442 line-height: 1.26;
443 color: var(--foreground);
444 }
445
446 .kaneo-tiptap-content .ProseMirror h1 {
447 font-size: 1.24rem;
448 }
449
450 .kaneo-tiptap-content .ProseMirror h2 {
451 font-size: 1.12rem;
452 }
453
454 .kaneo-tiptap-content .ProseMirror h3 {
455 font-size: 1.02rem;
456 }
457
458 .kaneo-tiptap-content .ProseMirror ul,
459 .kaneo-tiptap-content .ProseMirror ol {
460 margin: 0.3rem 0;
461 padding-inline-start: 1.35rem;
462 }
463
464 .kaneo-tiptap-content .ProseMirror ul {
465 list-style-type: disc;
466 }
467
468 .kaneo-tiptap-content .ProseMirror ol {
469 list-style-type: decimal;
470 }
471
472 .kaneo-tiptap-content .ProseMirror ul ul {
473 list-style-type: circle;
474 }
475
476 .kaneo-tiptap-content .ProseMirror ul ul ul {
477 list-style-type: square;
478 }
479
480 .kaneo-tiptap-content .ProseMirror ol ol {
481 list-style-type: lower-alpha;
482 }
483
484 .kaneo-tiptap-content .ProseMirror li::marker {
485 color: color-mix(in srgb, var(--foreground) 70%, transparent);
486 }
487
488 .kaneo-tiptap-content .ProseMirror li {
489 margin: 0.1rem 0;
490 }
491
492 .kaneo-tiptap-content .ProseMirror ul[data-type="taskList"] {
493 list-style: none;
494 margin: 0.3rem 0;
495 padding-inline-start: 0;
496 }
497
498 .kaneo-tiptap-content .ProseMirror li[data-type="taskItem"] {
499 display: flex;
500 align-items: center;
501 justify-content: flex-start;
502 gap: 0.45rem;
503 margin: 0.18rem 0;
504 text-align: left;
505 }
506
507 .kaneo-tiptap-content
508 .ProseMirror
509 li[data-type="taskItem"]
510 > :is(label, .kaneo-task-item-checkbox) {
511 margin-top: 0;
512 display: inline-flex;
513 flex-shrink: 0;
514 cursor: pointer;
515 }
516
517 .kaneo-tiptap-content .ProseMirror li[data-type="taskItem"] > div {
518 flex: 0 1 auto;
519 min-width: 0;
520 text-align: left;
521 }
522
523 .kaneo-tiptap-content .ProseMirror li[data-type="taskItem"] > div > * {
524 margin-inline: 0;
525 }
526
527 .kaneo-tiptap-content .ProseMirror li[data-type="taskItem"] ul,
528 .kaneo-tiptap-content .ProseMirror li[data-type="taskItem"] ol {
529 margin-top: 0.2rem;
530 }
531
532 .kaneo-tiptap-content .ProseMirror li[data-type="taskItem"] [data-slot="checkbox"] {
533 margin-top: 0;
534 }
535
536 .kaneo-tiptap-content .ProseMirror li[data-type="taskItem"] > div p {
537 margin: 0;
538 line-height: 1.45;
539 }
540
541 .kaneo-tiptap-content .ProseMirror li[data-type="taskItem"][data-checked="true"] > div p {
542 color: color-mix(in srgb, var(--foreground) 62%, transparent);
543 text-decoration: line-through;
544 }
545
546 .kaneo-tiptap-content .ProseMirror a {
547 color: var(--primary);
548 text-decoration-line: underline;
549 text-decoration-thickness: 1px;
550 text-underline-offset: 2px;
551 text-decoration-color: color-mix(
552 in srgb,
553 var(--primary) 68%,
554 transparent
555 );
556 transition:
557 color 0.12s ease,
558 text-decoration-color 0.12s ease;
559 }
560
561 .kaneo-tiptap-content .ProseMirror a:hover {
562 color: color-mix(in srgb, var(--primary) 84%, var(--foreground));
563 text-decoration-color: currentColor;
564 }
565
566 .kaneo-tiptap-content .ProseMirror :not(pre) > code {
567 border: 1px solid var(--border);
568 border-radius: 0.34rem;
569 background: var(--code-highlight);
570 font-family: var(--font-mono);
571 font-size: 0.84em;
572 padding: 0.11rem 0.32rem;
573 }
574
575 .kaneo-tiptap-content .ProseMirror pre {
576 margin: 0.45rem 0;
577 border: 1px solid var(--border);
578 border-radius: calc(var(--radius) - 3px);
579 background: var(--code);
580 padding: 0.75rem 0.9rem;
581 }
582
583 .kaneo-tiptap-content .ProseMirror pre code {
584 font-family: var(--font-mono);
585 font-size: 0.85rem;
586 color: var(--code-foreground);
587 }
588
589 .kaneo-tiptap-content .ProseMirror blockquote {
590 margin: 0.5rem 0;
591 border-left: 2px solid var(--border);
592 padding-left: 0.75rem;
593 color: color-mix(in srgb, var(--foreground) 78%, transparent);
594 }
595
596 .kaneo-tiptap-content .ProseMirror img.kaneo-editor-image,
597 .kaneo-comment-editor-prose img.kaneo-editor-image {
598 display: block;
599 max-width: min(100%, 44rem);
600 width: auto;
601 height: auto;
602 margin: 0.75rem 0;
603 border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
604 border-radius: calc(var(--radius) - 2px);
605 background: color-mix(in srgb, var(--accent) 22%, transparent);
606 object-fit: contain;
607 overflow: hidden;
608 }
609
610 .kaneo-create-task-modal .kaneo-comment-editor-prose img.kaneo-editor-image {
611 max-height: min(50vh, 28rem);
612 width: 100%;
613 }
614
615 .kaneo-tiptap-content .ProseMirror .is-editor-empty:first-child::before {
616 pointer-events: none;
617 content: attr(data-placeholder);
618 height: 0;
619 float: left;
620 color: color-mix(in srgb, var(--foreground) 40%, transparent);
621 }
622
623 .kaneo-tiptap-content .ProseMirror table {
624 border-collapse: collapse;
625 margin: 0.7rem 0;
626 overflow: hidden;
627 table-layout: fixed;
628 width: 100%;
629 border: 1px solid var(--border);
630 border-radius: calc(var(--radius) - 3px);
631 }
632
633 .kaneo-tiptap-content .ProseMirror table td,
634 .kaneo-tiptap-content .ProseMirror table th {
635 min-width: 1em;
636 border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
637 padding: 0.45rem 0.55rem;
638 vertical-align: top;
639 }
640
641 .kaneo-tiptap-content .ProseMirror table th {
642 background: color-mix(in srgb, var(--accent) 70%, transparent);
643 font-weight: 600;
644 text-align: left;
645 }
646
647 .kaneo-tiptap-content .ProseMirror .selectedCell:after {
648 pointer-events: none;
649 position: absolute;
650 inset: 0;
651 z-index: 2;
652 content: "";
653 background: color-mix(in srgb, var(--primary) 16%, transparent);
654 }
655
656 .kaneo-tiptap-content .ProseMirror .tableWrapper {
657 overflow-x: auto;
658 }
659
660 .kaneo-tiptap-content .ProseMirror [data-type="kaneo-embed"] {
661 margin: 0.65rem 0;
662 border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
663 border-radius: calc(var(--radius) - 2px);
664 background: color-mix(in srgb, var(--accent) 28%, transparent);
665 overflow: hidden;
666 transition:
667 border-color 0.12s ease,
668 box-shadow 0.12s ease;
669 }
670
671 .kaneo-tiptap-content .ProseMirror [data-type="kaneo-embed"] iframe {
672 width: 100%;
673 aspect-ratio: 16 / 9;
674 border: 0;
675 display: block;
676 background: black;
677 }
678
679 .kaneo-tiptap-content .ProseMirror [data-type="kaneo-embed"] > a {
680 display: block;
681 padding: 0.6rem 0.7rem;
682 color: var(--foreground);
683 text-decoration: none;
684 font-size: 0.82rem;
685 word-break: break-word;
686 }
687
688 .kaneo-tiptap-content .ProseMirror
689 [data-type="kaneo-embed"].ProseMirror-selectednode {
690 border-color: color-mix(in srgb, var(--ring) 82%, var(--border));
691 box-shadow:
692 0 0 0 2px color-mix(in srgb, var(--ring) 38%, transparent),
693 0 0 0 1px color-mix(in srgb, var(--ring) 70%, transparent) inset;
694 }
695
696 .kaneo-tiptap-content .ProseMirror [data-type="kaneo-embed"] .kaneo-embed-unsupported {
697 padding: 0.62rem 0.72rem;
698 font-size: 0.78rem;
699 color: color-mix(in srgb, var(--foreground) 62%, transparent);
700 }
701
702 .kaneo-issue-link-node {
703 display: inline-flex;
704 vertical-align: baseline;
705 }
706
707 .kaneo-issue-link-chip {
708 display: inline-flex;
709 max-width: min(26rem, 85vw);
710 align-items: center;
711 gap: 0.4rem;
712 border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
713 border-radius: 0.45rem;
714 background: color-mix(in srgb, var(--accent) 22%, transparent);
715 padding: 0.12rem 0.42rem;
716 color: var(--foreground);
717 text-decoration: none;
718 line-height: 1.3;
719 transform: translateY(-0.02rem);
720 }
721
722 .kaneo-issue-link-chip:hover {
723 border-color: color-mix(in srgb, var(--ring) 56%, var(--border));
724 background: color-mix(in srgb, var(--accent) 34%, transparent);
725 }
726
727 .kaneo-issue-link-key {
728 flex-shrink: 0;
729 font-size: 0.76rem;
730 font-weight: 500;
731 color: color-mix(in srgb, var(--foreground) 64%, transparent);
732 }
733
734 .kaneo-issue-link-title {
735 min-width: 0;
736 overflow: hidden;
737 text-overflow: ellipsis;
738 white-space: nowrap;
739 font-size: 0.86rem;
740 font-weight: 500;
741 color: var(--foreground);
742 }
743
744 .kaneo-issue-link-preview {
745 display: flex;
746 flex-direction: column;
747 align-items: stretch;
748 gap: 0;
749 width: min(21rem, calc(100vw - 1.5rem));
750 padding: 0.72rem;
751 text-wrap: pretty;
752 }
753
754 .kaneo-issue-link-preview-top {
755 display: flex;
756 align-items: center;
757 justify-content: space-between;
758 gap: 0.6rem;
759 font-size: 0.75rem;
760 color: color-mix(in srgb, var(--foreground) 68%, transparent);
761 }
762
763 .kaneo-issue-link-preview-key {
764 font-weight: 500;
765 letter-spacing: 0.01em;
766 }
767
768 .kaneo-issue-link-preview-title {
769 margin-top: 0.45rem;
770 font-size: 0.9rem;
771 line-height: 1.35;
772 font-weight: 500;
773 color: var(--foreground);
774 }
775
776 .kaneo-issue-link-preview-meta {
777 margin-top: 0.55rem;
778 display: flex;
779 align-items: center;
780 gap: 0.35rem;
781 border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
782 padding-top: 0.45rem;
783 font-size: 0.76rem;
784 color: color-mix(in srgb, var(--foreground) 72%, transparent);
785 }
786
787 .kaneo-attachment-node {
788 display: inline-flex;
789 max-width: 100%;
790 vertical-align: middle;
791 margin: 0.35rem 0;
792 }
793
794 .kaneo-attachment-card {
795 display: inline-flex;
796 align-items: center;
797 gap: 0.75rem;
798 min-width: min(22rem, 100%);
799 max-width: min(28rem, 100%);
800 padding: 0.75rem 0.95rem;
801 border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
802 border-radius: calc(var(--radius) + 1px);
803 background: linear-gradient(
804 180deg,
805 color-mix(in srgb, var(--accent) 48%, transparent),
806 color-mix(in srgb, var(--accent) 20%, transparent)
807 );
808 text-decoration: none;
809 transition:
810 border-color 0.18s ease,
811 background-color 0.18s ease,
812 transform 0.18s ease;
813 }
814
815 .kaneo-attachment-card:hover {
816 border-color: color-mix(in srgb, var(--foreground) 18%, var(--border));
817 background: linear-gradient(
818 180deg,
819 color-mix(in srgb, var(--accent) 62%, transparent),
820 color-mix(in srgb, var(--accent) 30%, transparent)
821 );
822 transform: translateY(-1px);
823 }
824
825 .kaneo-attachment-card-icon {
826 display: inline-flex;
827 align-items: center;
828 justify-content: center;
829 width: 1.8rem;
830 height: 1.8rem;
831 color: color-mix(in srgb, var(--foreground) 72%, transparent);
832 background: color-mix(in srgb, var(--foreground) 6%, transparent);
833 border-radius: 0.55rem;
834 flex-shrink: 0;
835 }
836
837 .kaneo-attachment-card-content {
838 display: flex;
839 min-width: 0;
840 flex-direction: column;
841 }
842
843 .kaneo-attachment-card-title {
844 color: var(--foreground);
845 font-size: 0.96rem;
846 font-weight: 600;
847 line-height: 1.2;
848 white-space: nowrap;
849 overflow: hidden;
850 text-overflow: ellipsis;
851 }
852
853 .kaneo-attachment-card-meta {
854 margin-top: 0.18rem;
855 color: color-mix(in srgb, var(--foreground) 58%, transparent);
856 font-size: 0.76rem;
857 line-height: 1.2;
858 white-space: nowrap;
859 overflow: hidden;
860 text-overflow: ellipsis;
861 }
862
863 .kaneo-tiptap-content .ProseMirror [data-type="kaneo-embed"]:focus-within {
864 border-color: color-mix(in srgb, var(--ring) 80%, var(--border));
865 box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 34%, transparent);
866 }
867
868 .kaneo-embed-composer {
869 position: fixed;
870 z-index: 60;
871 width: min(16.5rem, calc(100vw - 2rem));
872 border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
873 border-radius: 0.6rem;
874 background: var(--popover);
875 padding: 0.5rem;
876 box-shadow:
877 0 12px 32px --alpha(var(--color-black) / 20%),
878 0 1px 2px --alpha(var(--color-black) / 10%);
879 }
880
881 .kaneo-embed-composer-form {
882 display: flex;
883 flex-direction: column;
884 gap: 0.45rem;
885 }
886
887 .kaneo-embed-choice-menu {
888 display: flex;
889 min-width: 0;
890 flex-direction: column;
891 gap: 0.2rem;
892 }
893
894 .kaneo-embed-choice-item {
895 display: flex;
896 width: 100%;
897 align-items: center;
898 justify-content: space-between;
899 gap: 0.8rem;
900 border-radius: 0.4rem;
901 padding: 0.38rem 0.45rem;
902 text-align: left;
903 font-size: 0.82rem;
904 color: color-mix(in srgb, var(--foreground) 90%, transparent);
905 }
906
907 .kaneo-embed-choice-item:hover,
908 .kaneo-embed-choice-item.is-primary {
909 background: var(--accent);
910 color: var(--accent-foreground);
911 }
912
913 .kaneo-embed-choice-hint {
914 flex-shrink: 0;
915 font-size: 0.68rem;
916 color: color-mix(in srgb, currentColor 62%, transparent);
917 }
918
919 .kaneo-embed-composer-actions {
920 display: flex;
921 align-items: center;
922 gap: 0.35rem;
923 justify-content: flex-end;
924 }
925
926 .kaneo-embed-composer-error {
927 font-size: 0.72rem;
928 color: var(--destructive);
929 }
930
931 .kaneo-comment-composer {
932 border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
933 border-radius: 0.62rem;
934 background: color-mix(in srgb, var(--background) 96%, transparent);
935 transition:
936 border-color 0.14s ease,
937 box-shadow 0.14s ease;
938 }
939
940 .kaneo-comment-composer:focus-within {
941 border-color: color-mix(in srgb, var(--ring) 64%, var(--border));
942 box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 20%, transparent);
943 }
944
945 .kaneo-comment-card-body {
946 border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
947 border-radius: 0.6rem;
948 background: color-mix(in srgb, var(--card) 82%, transparent);
949 backdrop-filter: blur(3px);
950 position: relative;
951 }
952
953 .kaneo-comment-editor-shell {
954 position: relative;
955 isolation: isolate;
956 z-index: 1;
957 }
958
959 .kaneo-comment-editor-shell:focus-within {
960 z-index: 80;
961 }
962
963 .kaneo-editor-drop-indicator {
964 pointer-events: none;
965 position: absolute;
966 left: 0.75rem;
967 right: 0.75rem;
968 top: 0.75rem;
969 height: 2px;
970 z-index: 85;
971 border-radius: 999px;
972 background: color-mix(in srgb, var(--ring) 78%, var(--primary));
973 box-shadow: 0 0 0 1px color-mix(in srgb, var(--background) 88%, transparent);
974 }
975
976 .kaneo-editor-drop-indicator span {
977 display: none;
978 }
979
980 .kaneo-comment-editor-shell-readonly {
981 pointer-events: auto;
982 }
983
984 .kaneo-comment-editor-content .ProseMirror {
985 min-height: 2.2rem;
986 max-height: 18rem;
987 overflow-y: auto;
988 padding: 0.62rem 0.75rem 2.9rem;
989 font-family: var(--font-sans);
990 font-size: 0.92rem;
991 line-height: 1.62;
992 white-space: pre-wrap;
993 color: var(--foreground);
994 caret-color: var(--foreground);
995 outline: none;
996 }
997
998 .kaneo-comment-editor-shell-readonly .kaneo-comment-editor-content .ProseMirror {
999 min-height: 0;
1000 max-height: none;
1001 overflow: visible;
1002 padding: 0.62rem 0.75rem;
1003 }
1004
1005 .kaneo-comment-viewer .kaneo-comment-editor-content .ProseMirror {
1006 max-height: none;
1007 overflow: visible;
1008 padding-bottom: 0.8rem;
1009 }
1010
1011 .kaneo-comment-editor-prose p {
1012 margin: 0;
1013 }
1014
1015 .kaneo-comment-editor-prose h1,
1016 .kaneo-comment-editor-prose h2,
1017 .kaneo-comment-editor-prose h3 {
1018 margin: 0.12rem 0 0;
1019 line-height: 1.32;
1020 }
1021
1022 .kaneo-comment-editor-prose ul,
1023 .kaneo-comment-editor-prose ol {
1024 margin: 0.12rem 0 0;
1025 padding-inline-start: 1.2rem;
1026 }
1027
1028 .kaneo-comment-editor-prose ul {
1029 list-style-type: disc;
1030 }
1031
1032 .kaneo-comment-editor-prose ol {
1033 list-style-type: decimal;
1034 }
1035
1036 .kaneo-comment-editor-prose ul ul {
1037 list-style-type: circle;
1038 }
1039
1040 .kaneo-comment-editor-prose ul ul ul {
1041 list-style-type: square;
1042 }
1043
1044 .kaneo-comment-editor-prose ol ol {
1045 list-style-type: lower-alpha;
1046 }
1047
1048 .kaneo-comment-editor-prose li::marker {
1049 color: color-mix(in srgb, var(--foreground) 70%, transparent);
1050 }
1051
1052 .kaneo-comment-editor-prose li {
1053 margin: 0.08rem 0;
1054 }
1055
1056 .kaneo-comment-editor-prose ul[data-type="taskList"] {
1057 list-style: none;
1058 margin: 0.12rem 0 0;
1059 padding-inline-start: 0;
1060 }
1061
1062 .kaneo-comment-editor-prose li[data-type="taskItem"] {
1063 display: flex;
1064 align-items: center;
1065 justify-content: flex-start;
1066 gap: 0.45rem;
1067 margin: 0.14rem 0;
1068 text-align: left;
1069 }
1070
1071 .kaneo-comment-editor-prose
1072 li[data-type="taskItem"]
1073 > :is(label, .kaneo-task-item-checkbox) {
1074 margin-top: 0;
1075 display: inline-flex;
1076 flex-shrink: 0;
1077 cursor: pointer;
1078 }
1079
1080 .kaneo-comment-editor-prose li[data-type="taskItem"] > div {
1081 flex: 0 1 auto;
1082 min-width: 0;
1083 text-align: left;
1084 }
1085
1086 .kaneo-comment-editor-prose li[data-type="taskItem"] > div > * {
1087 margin-inline: 0;
1088 }
1089
1090 .kaneo-comment-editor-prose li[data-type="taskItem"] ul,
1091 .kaneo-comment-editor-prose li[data-type="taskItem"] ol {
1092 margin-top: 0.16rem;
1093 }
1094
1095 .kaneo-comment-editor-prose li[data-type="taskItem"] [data-slot="checkbox"] {
1096 margin-top: 0;
1097 }
1098
1099 .kaneo-comment-editor-prose li[data-type="taskItem"] > div p {
1100 margin: 0;
1101 line-height: 1.45;
1102 }
1103
1104 .kaneo-comment-editor-prose li[data-type="taskItem"][data-checked="true"] > div p {
1105 color: color-mix(in srgb, var(--foreground) 62%, transparent);
1106 text-decoration: line-through;
1107 }
1108
1109 .kaneo-comment-editor-prose a,
1110 .kaneo-tiptap-prose a {
1111 color: color-mix(in srgb, var(--foreground) 88%, #4c9aff 12%);
1112 cursor: pointer;
1113 text-decoration: underline;
1114 text-decoration-color: color-mix(in srgb, var(--ring) 44%, transparent);
1115 text-underline-offset: 2px;
1116 }
1117
1118 .kaneo-comment-editor-prose :not(pre) > code {
1119 border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
1120 border-radius: 0.34rem;
1121 background: color-mix(in srgb, var(--accent) 40%, transparent);
1122 padding: 0.08rem 0.36rem;
1123 font-size: 0.79em;
1124 font-family: var(--font-mono);
1125 }
1126
1127 .kaneo-comment-editor-prose pre {
1128 margin: 0.12rem 0 0;
1129 border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
1130 border-radius: 0.45rem;
1131 background: color-mix(in srgb, var(--card) 80%, transparent);
1132 padding: 0.55rem 0.7rem;
1133 overflow-x: auto;
1134 font-family: var(--font-mono);
1135 font-size: 0.82rem;
1136 line-height: 1.55;
1137 }
1138
1139 .kaneo-comment-editor-prose [data-type="kaneo-embed"] {
1140 margin: 0.12rem 0 0;
1141 border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
1142 border-radius: calc(var(--radius) - 2px);
1143 background: color-mix(in srgb, var(--accent) 28%, transparent);
1144 overflow: hidden;
1145 transition:
1146 border-color 0.12s ease,
1147 box-shadow 0.12s ease;
1148 }
1149
1150 .kaneo-comment-editor-prose [data-type="kaneo-embed"] iframe {
1151 width: 100%;
1152 aspect-ratio: 16 / 9;
1153 border: 0;
1154 display: block;
1155 background: black;
1156 }
1157
1158 .kaneo-comment-editor-prose [data-type="kaneo-embed"] > a {
1159 display: block;
1160 padding: 0.6rem 0.7rem;
1161 color: var(--foreground);
1162 text-decoration: none;
1163 font-size: 0.82rem;
1164 word-break: break-word;
1165 }
1166
1167 .kaneo-comment-editor-prose
1168 [data-type="kaneo-embed"].ProseMirror-selectednode {
1169 border-color: color-mix(in srgb, var(--ring) 82%, var(--border));
1170 box-shadow:
1171 0 0 0 2px color-mix(in srgb, var(--ring) 38%, transparent),
1172 0 0 0 1px color-mix(in srgb, var(--ring) 70%, transparent) inset;
1173 }
1174
1175 .kaneo-comment-editor-prose [data-type="kaneo-embed"]:focus-within {
1176 border-color: color-mix(in srgb, var(--ring) 80%, var(--border));
1177 box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 34%, transparent);
1178 }
1179
1180 .kaneo-comment-editor-prose table {
1181 width: 100%;
1182 table-layout: fixed;
1183 border-collapse: collapse;
1184 margin: 0.12rem 0 0;
1185 border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
1186 border-radius: 0.45rem;
1187 overflow: hidden;
1188 }
1189
1190 .kaneo-comment-editor-prose table td,
1191 .kaneo-comment-editor-prose table th {
1192 min-width: 1em;
1193 border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
1194 padding: 0.4rem 0.5rem;
1195 vertical-align: top;
1196 }
1197
1198 .kaneo-comment-editor-prose table th {
1199 background: color-mix(in srgb, var(--accent) 65%, transparent);
1200 font-weight: 600;
1201 text-align: left;
1202 }
1203
1204 .kaneo-comment-editor-prose .tableWrapper {
1205 overflow-x: auto;
1206 }
1207
1208 .kaneo-comment-editor-prose .is-editor-empty:first-child::before {
1209 content: attr(data-placeholder);
1210 color: color-mix(in srgb, var(--foreground) 42%, transparent);
1211 pointer-events: none;
1212 float: left;
1213 height: 0;
1214 }
1215
1216 .kaneo-comment-editor-prose p > .ProseMirror-trailingBreak {
1217 line-height: 1;
1218 }
1219
1220 .kaneo-comment-editor-bubble {
1221 display: inline-flex;
1222 align-items: center;
1223 gap: 0.12rem;
1224 border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
1225 border-radius: 0.45rem;
1226 background: var(--popover);
1227 padding: 0.2rem 0.24rem;
1228 box-shadow:
1229 0 8px 24px --alpha(var(--color-black) / 14%),
1230 0 1px 2px --alpha(var(--color-black) / 9%);
1231 }
1232
1233 .kaneo-comment-editor-bubble-btn {
1234 height: 1.58rem;
1235 width: 1.58rem;
1236 padding: 0;
1237 }
1238
1239 .kaneo-comment-editor-shell .kaneo-tiptap-slash-menu {
1240 position: absolute;
1241 z-index: 120;
1242 opacity: 1;
1243 background-color: var(--popover);
1244 background-image: none;
1245 backdrop-filter: none;
1246 }
1247
1248 .kaneo-tiptap-content .ProseMirror ::selection {
1249 background: color-mix(in srgb, var(--primary) 18%, transparent);
1250 }
1251
1252}