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: 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/* --- file explorer badges --- */
448
449.cmd-file-badge {
450  display: inline-flex;
451  align-items: center;
452  gap: 3px;
453  font-size: 10px;
454  margin-left: 4px;
455}
456
457.cmd-badge-comments {
458  color: var(--text-accent);
459}
460
461.cmd-badge-sync-pending {
462  color: var(--text-muted);
463}
464
465.cmd-badge-sync-conflict {
466  color: var(--text-warning);
467}
468
469/* --- comment card highlight flash --- */
470
471@keyframes cmd-flash {
472  0% { background-color: var(--text-accent); opacity: 0.2; }
473  100% { background-color: var(--background-secondary); opacity: 1; }
474}
475
476.cmd-comment-highlight {
477  animation: cmd-flash 1.5s ease-out;
478}
479
480/* --- clickable comment header --- */
481
482.cmd-comment-header-clickable {
483  cursor: pointer;
484}
485
486.cmd-comment-header-clickable:hover .cmd-comment-author {
487  text-decoration: underline;
488}
489
490/* --- emoji picker --- */
491
492.cmd-emoji-grid {
493  display: grid;
494  grid-template-columns: repeat(6, 1fr);
495  gap: 4px;
496  padding: 8px;
497}
498
499.cmd-emoji-btn {
500  font-size: 20px;
501  padding: 6px;
502  border: none;
503  background: transparent;
504  border-radius: 4px;
505  cursor: pointer;
506  text-align: center;
507}
508
509.cmd-emoji-btn:hover {
510  background: var(--background-modifier-hover);
511}
512
513/* --- hover tooltip --- */
514
515.cmd-hover-tooltip {
516  display: flex;
517  gap: 4px;
518  padding: 4px 8px;
519  background: var(--background-primary);
520  border: 1px solid var(--background-modifier-border);
521  border-radius: 6px;
522  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
523}
524
525.cmd-hover-tooltip button {
526  width: 24px;
527  height: 24px;
528  border: none;
529  background: transparent;
530  font-size: 14px;
531  cursor: pointer;
532  border-radius: 4px;
533  display: flex;
534  align-items: center;
535  justify-content: center;
536  padding: 0;
537}
538
539.cmd-hover-tooltip button:hover {
540  background: var(--background-modifier-hover);
541}
542
543/* --- suggest mode decorations --- */
544
545.cmd-suggest-del {
546  background-color: rgba(255, 0, 0, 0.08);
547  text-decoration: line-through;
548  color: var(--text-error);
549}
550
551.cmd-suggest-ins {
552  background-color: rgba(0, 255, 0, 0.08);
553  color: var(--text-success);
554}
555
556.cmd-suggest-block-ins {
557  background-color: rgba(0, 255, 0, 0.06);
558}
559
560/* --- suggest tab --- */
561
562.cmd-suggest-toggle {
563  display: flex;
564  align-items: center;
565  justify-content: space-between;
566  padding: 6px 8px;
567  font-size: 12px;
568}
569
570.cmd-suggest-card {
571  background: var(--background-secondary);
572  border-radius: 6px;
573  padding: 8px 10px;
574  margin-bottom: 6px;
575  border: 1px solid var(--background-modifier-border);
576}
577
578.cmd-suggest-card-header {
579  display: flex;
580  align-items: center;
581  gap: 6px;
582  margin-bottom: 4px;
583  cursor: pointer;
584}
585
586.cmd-suggest-card-header:hover {
587  text-decoration: underline;
588}
589
590.cmd-suggest-badge {
591  font-size: 10px;
592  padding: 1px 5px;
593  border-radius: 3px;
594  font-weight: 600;
595  text-transform: uppercase;
596}
597
598.cmd-badge-mod {
599  background: rgba(var(--color-accent-rgb, 255, 165, 0), 0.15);
600  color: var(--text-accent);
601}
602
603.cmd-badge-ins {
604  background: rgba(var(--color-green-rgb, 0, 180, 0), 0.15);
605  color: var(--text-success);
606}
607
608.cmd-badge-del {
609  background: rgba(var(--color-red-rgb, 255, 0, 0), 0.15);
610  color: var(--text-error);
611}
612
613.cmd-suggest-body {
614  font-size: 12px;
615  line-height: 1.5;
616  margin-bottom: 6px;
617  font-family: var(--font-monospace);
618  white-space: pre-wrap;
619  word-break: break-word;
620}
621
622.cmd-diff-word-del {
623  background-color: rgba(255, 0, 0, 0.12);
624  text-decoration: line-through;
625  color: var(--text-error);
626}
627
628.cmd-diff-word-ins {
629  background-color: rgba(0, 200, 0, 0.12);
630  color: var(--text-success);
631}
632
633/* --- outline sidebar --- */
634
635.cmd-outline-sidebar {
636  padding: 0;
637  overflow-y: auto;
638  font-size: 13px;
639}
640
641.cmd-outline-search {
642  position: relative;
643  padding: 6px 8px;
644  border-bottom: 1px solid var(--background-modifier-border);
645}
646
647.cmd-outline-search-input {
648  width: 100%;
649  padding: 4px 8px;
650  font-size: 12px;
651  border: 1px solid var(--background-modifier-border);
652  border-radius: 4px;
653  background: var(--background-primary);
654  color: var(--text-normal);
655}
656
657.cmd-outline-search-input:focus {
658  border-color: var(--text-accent);
659  outline: none;
660}
661
662.cmd-outline-search-kbd {
663  position: absolute;
664  right: 16px;
665  top: 50%;
666  transform: translateY(-50%);
667  font-size: 10px;
668  color: var(--text-faint);
669  padding: 1px 4px;
670  border: 1px solid var(--background-modifier-border);
671  border-radius: 3px;
672  pointer-events: none;
673}
674
675.cmd-outline-list {
676  padding: 4px 0;
677}
678
679.cmd-outline-item {
680  display: flex;
681  align-items: center;
682  gap: 2px;
683  padding: 2px 8px;
684  cursor: pointer;
685  border-radius: 3px;
686  transition: background-color 0.1s;
687}
688
689.cmd-outline-item:hover {
690  background: var(--background-modifier-hover);
691}
692
693.cmd-outline-active {
694  background: rgba(var(--color-accent-rgb, 255, 165, 0), 0.12);
695}
696
697.cmd-outline-active:hover {
698  background: rgba(var(--color-accent-rgb, 255, 165, 0), 0.18);
699}
700
701.cmd-outline-dimmed {
702  opacity: 0.35;
703}
704
705.cmd-outline-link {
706  flex: 1;
707  overflow: hidden;
708  text-overflow: ellipsis;
709  white-space: nowrap;
710  font-size: 13px;
711  line-height: 1.6;
712  color: var(--text-normal);
713}
714
715.cmd-outline-level-1 .cmd-outline-link {
716  font-weight: 600;
717}
718
719.cmd-outline-level-2 {
720  padding-left: 20px;
721}
722
723.cmd-outline-level-3 {
724  padding-left: 32px;
725}
726
727.cmd-outline-level-4 {
728  padding-left: 44px;
729}
730
731.cmd-outline-level-5 {
732  padding-left: 56px;
733}
734
735.cmd-outline-level-6 {
736  padding-left: 68px;
737}
738
739.cmd-outline-chevron {
740  display: flex;
741  align-items: center;
742  justify-content: center;
743  width: 16px;
744  height: 16px;
745  padding: 0;
746  border: none;
747  background: transparent;
748  color: var(--text-muted);
749  cursor: pointer;
750  border-radius: 3px;
751  flex-shrink: 0;
752  transition: transform 0.15s;
753  transform: rotate(90deg);
754}
755
756.cmd-outline-chevron:hover {
757  background: var(--background-modifier-hover);
758  color: var(--text-normal);
759}
760
761.cmd-outline-chevron-collapsed {
762  transform: rotate(0deg);
763}