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}