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