1/* common.md plugin styles */
2
3/* --- inline highlights --- */
4
5.cmd-highlight-pending {
6 background-color: rgba(var(--color-accent-rgb, 255, 165, 0), 0.15);
7 border-bottom: 2px solid var(--text-accent);
8}
9
10.cmd-highlight-blocking {
11 background-color: rgba(var(--color-red-rgb, 255, 0, 0), 0.12);
12 border-bottom: 2px solid var(--text-error);
13}
14
15.cmd-highlight-resolved {
16 background-color: rgba(var(--color-green-rgb, 0, 180, 0), 0.08);
17 border-bottom: 1px dashed var(--text-success);
18 opacity: 0.6;
19}
20
21.cmd-highlight-dismissed {
22 background-color: rgba(var(--text-muted-rgb, 128, 128, 128), 0.06);
23 border-bottom: 1px dotted var(--text-muted);
24 opacity: 0.4;
25}
26
27/* --- right-side indicators --- */
28
29.cmd-right-indicators {
30 position: absolute;
31 right: 2px;
32 top: 0;
33 width: 10px;
34 pointer-events: none;
35 overflow: visible;
36 z-index: 5;
37}
38
39.cmd-right-indicators > * {
40 pointer-events: auto;
41}
42
43.cmd-right-dot {
44 position: absolute;
45 width: 6px;
46 height: 6px;
47 border-radius: 50%;
48 right: 0;
49 cursor: pointer;
50 opacity: 0.8;
51 transition: opacity 0.15s;
52}
53
54.cmd-right-dot:hover {
55 opacity: 1;
56 transform: scale(1.4);
57}
58
59.cmd-right-dot-pending {
60 background-color: var(--text-accent);
61}
62
63.cmd-right-dot-blocking {
64 background-color: var(--text-error);
65}
66
67.cmd-right-dot-resolved {
68 background-color: var(--text-success);
69 opacity: 0.5;
70}
71
72.cmd-right-dot-dismissed {
73 background-color: var(--text-muted);
74 opacity: 0.5;
75}
76
77.cmd-right-dot-orphaned {
78 background-color: var(--text-muted);
79 opacity: 0.4;
80}
81
82/* suggest mode bars and triangles */
83
84.cmd-right-bar {
85 position: absolute;
86 right: 0;
87 width: 3px;
88 background-color: var(--text-success);
89 border-radius: 1px;
90 opacity: 0.7;
91}
92
93.cmd-right-tri {
94 position: absolute;
95 right: 0;
96 width: 0;
97 height: 0;
98 border-left: 4px solid transparent;
99 border-right: 4px solid transparent;
100 border-top: 8px solid var(--text-error);
101}
102
103/* --- sidebar --- */
104
105.cmd-sidebar {
106 padding: 8px;
107 overflow-y: auto;
108}
109
110.cmd-sidebar-empty {
111 color: var(--text-muted);
112 padding: 24px 12px;
113 text-align: center;
114}
115
116.cmd-sidebar-header {
117 font-size: 11px;
118 font-weight: 600;
119 letter-spacing: 0.5px;
120 color: var(--text-muted);
121 padding: 4px 8px 8px;
122}
123
124.cmd-sidebar-divider {
125 font-size: 10px;
126 color: var(--text-faint);
127 padding: 12px 8px 4px;
128 border-top: 1px solid var(--background-modifier-border);
129 margin-top: 8px;
130}
131
132/* --- tab bar --- */
133
134.cmd-tab-bar {
135 display: flex;
136 border-bottom: 1px solid var(--background-modifier-border);
137 margin-bottom: 8px;
138}
139
140.cmd-tab {
141 padding: 6px 12px;
142 font-size: 12px;
143 cursor: pointer;
144 border: none;
145 background: transparent;
146 color: var(--text-muted);
147 border-bottom: 2px solid transparent;
148 transition: color 0.15s, border-color 0.15s;
149}
150
151.cmd-tab:hover {
152 color: var(--text-normal);
153}
154
155.cmd-tab.active {
156 color: var(--text-normal);
157 border-bottom: 2px solid var(--text-accent);
158 font-weight: 600;
159}
160
161/* --- avatar --- */
162
163.cmd-avatar {
164 display: inline-flex;
165 align-items: center;
166 justify-content: center;
167 width: 20px;
168 height: 20px;
169 border-radius: 50%;
170 font-size: 9px;
171 font-weight: 700;
172 color: #fff;
173 flex-shrink: 0;
174}
175
176.cmd-avatar-small {
177 width: 16px;
178 height: 16px;
179 font-size: 7px;
180}
181
182/* --- inline comment creation --- */
183
184.cmd-inline-create {
185 padding: 8px;
186 margin-bottom: 8px;
187 background: var(--background-secondary);
188 border-radius: 6px;
189 border: 1px solid var(--text-accent);
190}
191
192.cmd-quote-preview {
193 font-style: italic;
194 font-size: 12px;
195 color: var(--text-muted);
196 border-left: 3px solid var(--text-accent);
197 padding: 4px 8px;
198 margin: 0 0 8px;
199}
200
201/* --- comment card --- */
202
203.cmd-comment-card {
204 background: var(--background-secondary);
205 border-radius: 6px;
206 padding: 8px 10px;
207 margin-bottom: 6px;
208 cursor: pointer;
209 border: 1px solid var(--background-modifier-border);
210 transition: border-color 0.15s;
211}
212
213.cmd-comment-card:hover {
214 border-color: var(--text-accent);
215}
216
217.cmd-comment-orphaned {
218 opacity: 0.7;
219 border-left: 3px solid var(--text-muted);
220}
221
222.cmd-comment-header {
223 display: flex;
224 align-items: center;
225 gap: 6px;
226 margin-bottom: 4px;
227}
228
229.cmd-status-icon {
230 font-size: 10px;
231}
232
233.cmd-status-pending {
234 color: var(--text-accent);
235}
236
237.cmd-status-resolved {
238 color: var(--text-success);
239}
240
241.cmd-status-dismissed {
242 color: var(--text-muted);
243}
244
245.cmd-comment-author {
246 font-weight: 600;
247 font-size: 12px;
248}
249
250.cmd-comment-time {
251 font-size: 11px;
252 color: var(--text-muted);
253 margin-left: auto;
254}
255
256.cmd-comment-text {
257 font-size: 13px;
258 line-height: 1.4;
259 margin-bottom: 4px;
260}
261
262.cmd-comment-tags {
263 display: flex;
264 gap: 4px;
265 margin-bottom: 4px;
266}
267
268.cmd-tag {
269 font-size: 10px;
270 padding: 1px 5px;
271 border-radius: 3px;
272 background: var(--background-modifier-border);
273 color: var(--text-muted);
274}
275
276.cmd-severity-blocking {
277 background: rgba(var(--color-red-rgb, 255, 0, 0), 0.15);
278 color: var(--text-error);
279}
280
281/* --- reactions --- */
282
283.cmd-reactions {
284 display: flex;
285 gap: 4px;
286 margin-top: 4px;
287}
288
289.cmd-reaction {
290 font-size: 11px;
291 padding: 1px 6px;
292 border-radius: 10px;
293 background: var(--background-modifier-border);
294 border: none;
295 cursor: pointer;
296}
297
298.cmd-reaction:hover {
299 background: var(--background-modifier-hover);
300}
301
302/* --- replies --- */
303
304.cmd-reply {
305 padding: 4px 0 4px 12px;
306 border-left: 2px solid var(--background-modifier-border);
307 margin-top: 6px;
308}
309
310.cmd-reply-header {
311 display: flex;
312 gap: 6px;
313 align-items: center;
314}
315
316.cmd-reply-author {
317 font-weight: 500;
318 font-size: 12px;
319}
320
321.cmd-reply-time {
322 font-size: 11px;
323 color: var(--text-muted);
324}
325
326.cmd-reply-text {
327 font-size: 13px;
328 line-height: 1.4;
329}
330
331/* --- always-visible reply input --- */
332
333.cmd-reply-input-minimal {
334 width: 100%;
335 height: 24px;
336 font-size: 11px;
337 padding: 3px 6px;
338 border: 1px solid var(--background-modifier-border);
339 border-radius: 4px;
340 background: var(--background-primary);
341 color: var(--text-normal);
342 margin-top: 6px;
343 resize: none;
344 overflow: hidden;
345 transition: height 0.15s;
346}
347
348.cmd-reply-input-minimal:focus {
349 border-color: var(--text-accent);
350 outline: none;
351}
352
353.cmd-reply-input-expanded {
354 height: 48px;
355 resize: vertical;
356 overflow: auto;
357}
358
359/* --- actions (expanded) --- */
360
361.cmd-actions {
362 margin-top: 8px;
363 padding-top: 8px;
364 border-top: 1px solid var(--background-modifier-border);
365}
366
367.cmd-reply-box {
368 margin-bottom: 8px;
369}
370
371.cmd-reply-input {
372 width: 100%;
373 min-height: 48px;
374 resize: vertical;
375 font-size: 12px;
376 padding: 6px 8px;
377 border: 1px solid var(--background-modifier-border);
378 border-radius: 4px;
379 background: var(--background-primary);
380 color: var(--text-normal);
381 margin-bottom: 4px;
382}
383
384.cmd-action-btns {
385 display: flex;
386 gap: 4px;
387 flex-wrap: wrap;
388}
389
390.cmd-btn {
391 font-size: 11px;
392 padding: 3px 8px;
393 border-radius: 4px;
394 border: 1px solid var(--background-modifier-border);
395 background: var(--background-secondary);
396 color: var(--text-normal);
397 cursor: pointer;
398}
399
400.cmd-btn:hover {
401 background: var(--background-modifier-hover);
402}
403
404/* --- add comment button --- */
405
406.cmd-add-comment {
407 width: 100%;
408 padding: 8px;
409 margin-top: 12px;
410 font-size: 12px;
411 border: 1px dashed var(--background-modifier-border);
412 border-radius: 6px;
413 background: transparent;
414 color: var(--text-muted);
415 cursor: pointer;
416}
417
418.cmd-add-comment:hover {
419 border-color: var(--text-accent);
420 color: var(--text-accent);
421}
422
423/* --- orphan anchor info --- */
424
425.cmd-orphan-anchor {
426 margin-top: 6px;
427 padding: 4px 8px;
428 background: var(--background-modifier-border);
429 border-radius: 4px;
430 font-size: 11px;
431 color: var(--text-muted);
432 display: flex;
433 gap: 6px;
434 align-items: center;
435 flex-wrap: wrap;
436}
437
438.cmd-orphan-anchor button {
439 font-size: 10px;
440 padding: 2px 6px;
441}
442
443/* --- status bar --- */
444
445.cmd-status-bar {
446 display: flex;
447 gap: 8px;
448 align-items: center;
449 cursor: pointer;
450}
451
452.cmd-suggest-status {
453 display: flex;
454 align-items: center;
455 gap: 4px;
456 cursor: pointer;
457 font-size: 12px;
458 padding: 0 4px;
459 border-radius: 3px;
460 transition: background-color 0.15s;
461}
462
463.cmd-suggest-status:hover {
464 background: var(--background-modifier-hover);
465}
466
467.cmd-suggest-status-active {
468 color: var(--text-success);
469 font-weight: 600;
470}
471
472.cmd-suggest-status-inactive {
473 color: var(--text-muted);
474}
475
476/* --- file explorer badges --- */
477
478.cmd-file-badge {
479 display: inline-flex;
480 align-items: center;
481 gap: 3px;
482 font-size: 10px;
483 margin-left: 4px;
484}
485
486.cmd-badge-comments {
487 color: var(--text-accent);
488}
489
490.cmd-badge-sync-pending {
491 color: var(--text-muted);
492}
493
494.cmd-badge-sync-conflict {
495 color: var(--text-warning);
496}
497
498/* --- comment card highlight flash --- */
499
500@keyframes cmd-flash {
501 0% { background-color: var(--text-accent); opacity: 0.2; }
502 100% { background-color: var(--background-secondary); opacity: 1; }
503}
504
505.cmd-comment-highlight {
506 animation: cmd-flash 1.5s ease-out;
507}
508
509/* --- clickable comment header --- */
510
511.cmd-comment-header-clickable {
512 cursor: pointer;
513}
514
515.cmd-comment-header-clickable:hover .cmd-comment-author {
516 text-decoration: underline;
517}
518
519/* --- emoji picker --- */
520
521.cmd-emoji-grid {
522 display: grid;
523 grid-template-columns: repeat(6, 1fr);
524 gap: 4px;
525 padding: 8px;
526}
527
528.cmd-emoji-btn {
529 font-size: 20px;
530 padding: 6px;
531 border: none;
532 background: transparent;
533 border-radius: 4px;
534 cursor: pointer;
535 text-align: center;
536}
537
538.cmd-emoji-btn:hover {
539 background: var(--background-modifier-hover);
540}
541
542/* --- hover tooltip --- */
543
544.cmd-hover-tooltip {
545 display: flex;
546 gap: 4px;
547 padding: 4px 8px;
548 background: var(--background-primary);
549 border: 1px solid var(--background-modifier-border);
550 border-radius: 6px;
551 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
552}
553
554.cmd-hover-tooltip button {
555 width: 24px;
556 height: 24px;
557 border: none;
558 background: transparent;
559 font-size: 14px;
560 cursor: pointer;
561 border-radius: 4px;
562 display: flex;
563 align-items: center;
564 justify-content: center;
565 padding: 0;
566}
567
568.cmd-hover-tooltip button:hover {
569 background: var(--background-modifier-hover);
570}
571
572/* --- suggest mode decorations --- */
573
574.cmd-suggest-del {
575 background-color: rgba(255, 0, 0, 0.08);
576 text-decoration: line-through;
577 color: var(--text-error);
578}
579
580.cmd-suggest-ins {
581 background-color: rgba(0, 255, 0, 0.08);
582 color: var(--text-success);
583 text-decoration: underline;
584 text-decoration-color: var(--text-success);
585}
586
587.cmd-suggest-block-ins {
588 background-color: rgba(0, 255, 0, 0.06);
589 color: var(--text-success);
590 text-decoration: underline;
591 text-decoration-color: var(--text-success);
592}
593
594/* --- right-margin suggestion cards --- */
595
596.cmd-suggest-margin-card {
597 position: absolute;
598 right: 12px;
599 width: 180px;
600 background: var(--background-secondary);
601 border: 1px solid var(--background-modifier-border);
602 border-radius: 6px;
603 padding: 6px 8px;
604 font-size: 11px;
605 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
606 z-index: 10;
607 cursor: default;
608}
609
610.cmd-suggest-margin-card:hover {
611 border-color: var(--text-accent);
612}
613
614.cmd-suggest-margin-header {
615 display: flex;
616 align-items: center;
617 gap: 4px;
618 margin-bottom: 3px;
619 color: var(--text-muted);
620 font-size: 10px;
621}
622
623.cmd-suggest-margin-header .cmd-avatar {
624 width: 14px;
625 height: 14px;
626 font-size: 7px;
627}
628
629.cmd-suggest-margin-body {
630 font-size: 11px;
631 line-height: 1.4;
632 margin-bottom: 4px;
633 max-height: 40px;
634 overflow: hidden;
635 word-break: break-word;
636}
637
638.cmd-suggest-margin-actions {
639 display: flex;
640 gap: 3px;
641}
642
643.cmd-suggest-margin-actions button {
644 font-size: 10px;
645 padding: 1px 6px;
646 border-radius: 3px;
647 border: 1px solid var(--background-modifier-border);
648 background: var(--background-primary);
649 color: var(--text-normal);
650 cursor: pointer;
651}
652
653.cmd-suggest-margin-actions button:hover {
654 background: var(--background-modifier-hover);
655}
656
657/* --- suggest tab --- */
658
659.cmd-suggest-toggle {
660 display: flex;
661 align-items: center;
662 justify-content: space-between;
663 padding: 6px 8px;
664 font-size: 12px;
665}
666
667.cmd-suggest-card {
668 background: var(--background-secondary);
669 border-radius: 6px;
670 padding: 8px 10px;
671 margin-bottom: 6px;
672 border: 1px solid var(--background-modifier-border);
673}
674
675.cmd-suggest-card-header {
676 display: flex;
677 align-items: center;
678 gap: 6px;
679 margin-bottom: 4px;
680 cursor: pointer;
681}
682
683.cmd-suggest-card-header:hover {
684 text-decoration: underline;
685}
686
687.cmd-suggest-badge {
688 font-size: 10px;
689 padding: 1px 5px;
690 border-radius: 3px;
691 font-weight: 600;
692 text-transform: uppercase;
693}
694
695.cmd-badge-mod {
696 background: rgba(var(--color-accent-rgb, 255, 165, 0), 0.15);
697 color: var(--text-accent);
698}
699
700.cmd-badge-ins {
701 background: rgba(var(--color-green-rgb, 0, 180, 0), 0.15);
702 color: var(--text-success);
703}
704
705.cmd-badge-del {
706 background: rgba(var(--color-red-rgb, 255, 0, 0), 0.15);
707 color: var(--text-error);
708}
709
710.cmd-suggest-body {
711 font-size: 12px;
712 line-height: 1.5;
713 margin-bottom: 6px;
714 font-family: var(--font-monospace);
715 white-space: pre-wrap;
716 word-break: break-word;
717}
718
719.cmd-diff-word-del {
720 background-color: rgba(255, 0, 0, 0.12);
721 text-decoration: line-through;
722 color: var(--text-error);
723}
724
725.cmd-diff-word-ins {
726 background-color: rgba(0, 200, 0, 0.12);
727 color: var(--text-success);
728}
729
730/* --- outline sidebar --- */
731
732.cmd-outline-sidebar {
733 padding: 0;
734 overflow-y: auto;
735 font-size: 13px;
736}
737
738.cmd-outline-search {
739 position: relative;
740 padding: 6px 8px;
741 border-bottom: 1px solid var(--background-modifier-border);
742}
743
744.cmd-outline-search-input {
745 width: 100%;
746 padding: 4px 8px;
747 font-size: 12px;
748 border: 1px solid var(--background-modifier-border);
749 border-radius: 4px;
750 background: var(--background-primary);
751 color: var(--text-normal);
752}
753
754.cmd-outline-search-input:focus {
755 border-color: var(--text-accent);
756 outline: none;
757}
758
759.cmd-outline-search-kbd {
760 position: absolute;
761 right: 16px;
762 top: 50%;
763 transform: translateY(-50%);
764 font-size: 10px;
765 color: var(--text-faint);
766 padding: 1px 4px;
767 border: 1px solid var(--background-modifier-border);
768 border-radius: 3px;
769 pointer-events: none;
770}
771
772.cmd-outline-list {
773 padding: 4px 0;
774}
775
776.cmd-outline-item {
777 display: flex;
778 align-items: center;
779 gap: 2px;
780 padding: 2px 8px;
781 cursor: pointer;
782 border-radius: 3px;
783 transition: background-color 0.1s;
784}
785
786.cmd-outline-item:hover {
787 background: var(--background-modifier-hover);
788}
789
790.cmd-outline-active {
791 background: rgba(var(--color-accent-rgb, 255, 165, 0), 0.12);
792}
793
794.cmd-outline-active:hover {
795 background: rgba(var(--color-accent-rgb, 255, 165, 0), 0.18);
796}
797
798.cmd-outline-dimmed {
799 opacity: 0.35;
800}
801
802.cmd-outline-link {
803 flex: 1;
804 overflow: hidden;
805 text-overflow: ellipsis;
806 white-space: nowrap;
807 font-size: 13px;
808 line-height: 1.6;
809 color: var(--text-normal);
810}
811
812.cmd-outline-level-1 .cmd-outline-link {
813 font-weight: 600;
814}
815
816.cmd-outline-level-2 {
817 padding-left: 20px;
818}
819
820.cmd-outline-level-3 {
821 padding-left: 32px;
822}
823
824.cmd-outline-level-4 {
825 padding-left: 44px;
826}
827
828.cmd-outline-level-5 {
829 padding-left: 56px;
830}
831
832.cmd-outline-level-6 {
833 padding-left: 68px;
834}
835
836.cmd-outline-chevron {
837 display: flex;
838 align-items: center;
839 justify-content: center;
840 width: 16px;
841 height: 16px;
842 padding: 0;
843 border: none;
844 background: transparent;
845 color: var(--text-muted);
846 cursor: pointer;
847 border-radius: 3px;
848 flex-shrink: 0;
849 transition: transform 0.15s;
850 transform: rotate(90deg);
851}
852
853.cmd-outline-chevron:hover {
854 background: var(--background-modifier-hover);
855 color: var(--text-normal);
856}
857
858.cmd-outline-chevron-collapsed {
859 transform: rotate(0deg);
860}