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