1
/**
2
 * Macro System Styles
3
 * Styles for the macro browser, documentation, and related UI components.
4
 */
5

6
/* =============================================================================
7
   MACRO BROWSER
8
   Dynamic documentation browser for macros, similar to SlashCommandBrowser.
9
   ============================================================================= */
10

11
.macroBrowser {
12
    display: flex;
13
    flex-direction: column;
14
    gap: 0.5em;
15
}
16

17
/* -----------------------------------------------------------------------------
18
   Toolbar (Search + Sort)
19
   ----------------------------------------------------------------------------- */
20

21
.macroBrowser .macro-toolbar {
22
    display: flex;
23
    gap: 1em;
24
    align-items: center;
25
    flex-wrap: wrap;
26
}
27

28
.macroBrowser .macro-search-label {
29
    flex: 1 1 auto;
30
    display: flex;
31
    gap: 0.5em;
32
    align-items: center;
33
    min-width: 200px;
34
    white-space: nowrap;
35
}
36

37
.macroBrowser .macro-search-input {
38
    flex: 1 1 auto;
39
    min-width: 100px;
40
}
41

42
.macroBrowser .macro-sort-btn {
43
    flex: 0 0 auto;
44
    white-space: nowrap;
45
}
46

47
.macroBrowser .macro-sort-btn.active {
48
    background-color: var(--SmartThemeQuoteColor);
49
}
50

51
/* -----------------------------------------------------------------------------
52
   Container (List + Details panels)
53
   ----------------------------------------------------------------------------- */
54

55
.macroBrowser .macro-container {
56
    display: flex;
57
    gap: 1em;
58
    align-items: flex-start;
59
    container-type: inline-size;
60
}
61

62
.macroBrowser .macro-list-panel {
63
    flex: 1 1 60%;
64
    display: flex;
65
    flex-direction: column;
66
    gap: 2px;
67
    max-height: 60vh;
68
    overflow-y: auto;
69
}
70

71
.macroBrowser .macro-details-panel {
72
    flex: 0 0 40%;
73
    position: sticky;
74
    top: 0;
75
    max-height: 60vh;
76
    overflow-y: auto;
77
    background: var(--SmartThemeBlurTintColor);
78
    border-radius: 10px;
79
    padding: 1em;
80
}
81

82
.macroBrowser .macro-details-placeholder {
83
    opacity: 0.6;
84
    text-align: center;
85
    padding: 2em;
86
}
87

88
/* -----------------------------------------------------------------------------
89
   Category Headers
90
   ----------------------------------------------------------------------------- */
91

92
.macroBrowser .macro-category-header {
93
    font-weight: bold;
94
    padding: 0.75em 0.5em 0.25em;
95
    margin-top: 0.5em;
96
    border-bottom: 1px solid var(--SmartThemeBorderColor);
97
    border-radius: 10px 10px 0 0;
98
    color: var(--SmartThemeQuoteColor);
99
    position: sticky;
100
    top: 0;
101
    background: var(--SmartThemeChatTintColor);
102
    z-index: 1;
103
}
104

105
.macroBrowser .macro-category-header:first-child {
106
    margin-top: 0;
107
}
108

109
.macroBrowser .macro-category-header.isFiltered {
110
    display: none;
111
}
112

113
/* -----------------------------------------------------------------------------
114
   Macro List Items
115
   Layout: [signature] [description (shrinks)] [source icon]
116
   ----------------------------------------------------------------------------- */
117

118
.macroBrowser .macro-item {
119
    display: flex;
120
    align-items: center;
121
    gap: 0.5em;
122
    padding: 0.5em;
123
    border-radius: 4px;
124
    cursor: pointer;
125
    transition: background-color 0.15s;
126
    min-width: 0; /* Allow children to shrink */
127
}
128

129
.macroBrowser .macro-item:hover {
130
    background: var(--black30a);
131
}
132

133
.macroBrowser .macro-item.selected {
134
    background: var(--SmartThemeQuoteColor);
135
}
136

137
.macroBrowser .macro-item.isFiltered {
138
    display: none;
139
}
140

141
.macroBrowser .macro-signature {
142
    padding: 0.2em 0;
143
    font-family: var(--monoFontFamily);
144
    font-size: 0.9em;
145
    color: var(--SmartThemeQuoteColor);
146
    flex: 0 1 auto; /* Can shrink, but prefers not to */
147
    overflow: hidden;
148
    text-overflow: ellipsis;
149
    white-space: nowrap;
150
    min-width: 3em; /* Minimum before fully hidden */
151
}
152

153
.macroBrowser .macro-desc-preview {
154
    flex: 1 1 0; /* Shrinks first, starts at 0 basis */
155
    opacity: 0.7;
156
    font-size: 0.9em;
157
    overflow: hidden;
158
    text-overflow: ellipsis;
159
    white-space: nowrap;
160
    min-width: 0; /* Allow shrinking to nothing */
161
}
162

163
.macroBrowser .macro-source {
164
    flex: 0 0 auto; /* Never shrinks */
165
    font-size: 0.8em;
166
    opacity: 0.7;
167
}
168

169
.macroBrowser .macro-source.isExtension.isThirdParty {
170
    color: #f0a030;
171
}
172

173
.macroBrowser .macro-source.isExtension.isCore {
174
    color: #30a0f0;
175
}
176

177
.macroBrowser .macro-source.isCore:not(.isExtension) {
178
    color: #50c050;
179
}
180

181
/* -----------------------------------------------------------------------------
182
   Macro Details Panel
183
   ----------------------------------------------------------------------------- */
184

185
.macro-details .macro-details-header {
186
    display: flex;
187
    align-items: flex-start;
188
    justify-content: space-between;
189
    gap: 0.5em;
190
    margin-bottom: 0.75em;
191
}
192

193
.macro-details .macro-details-name {
194
    font-family: var(--monoFontFamily);
195
    font-size: 1.1em;
196
    color: var(--SmartThemeQuoteColor);
197
    background: var(--black30a);
198
    padding: 0.15em 0.4em 0.3em;
199
    border-radius: 4px;
200
    word-break: break-all;
201
    display: inline-block; /* Shrink-wrap to content */
202
}
203

204
.macro-details .macro-details-header > .macro-source {
205
    flex: 0 0 auto;
206
    font-size: 1em;
207
    margin-top: 0.15em; /* Align with name top padding */
208
}
209

210
.macro-details .macro-category-badge {
211
    display: inline-block;
212
    font-size: 0.75em;
213
    padding: 0.2em 0.6em;
214
    border-radius: 10px;
215
    background: color-mix(in srgb, var(--SmartThemeQuoteColor) 50%, transparent);
216
    color: var(--SmartThemeBodyColor);
217
    margin-bottom: 0.75em;
218
}
219

220
.macro-details .macro-details-section {
221
    margin-bottom: 1em;
222
}
223

224
.macro-details .macro-details-label {
225
    font-weight: bold;
226
    font-size: 0.85em;
227
    opacity: 0.8;
228
    margin-bottom: 0.25em;
229
    text-transform: uppercase;
230
    letter-spacing: 0.05em;
231
}
232

233
.macro-details .macro-details-text {
234
    line-height: 1.4;
235
}
236

237
.macro-details .macro-returns-content {
238
    display: flex;
239
    align-items: baseline;
240
    gap: 0.5em;
241
    flex-wrap: wrap;
242
}
243

244
/* -----------------------------------------------------------------------------
245
   Arguments List (in details panel)
246
   ----------------------------------------------------------------------------- */
247

248
.macro-details .macro-args-list {
249
    list-style: none;
250
    padding: 0;
251
    margin: 0;
252
}
253

254
.macro-details .macro-arg-item {
255
    padding: 0.4em 0;
256
    border-bottom: 1px solid var(--black30a);
257
    display: flex;
258
    flex-wrap: wrap;
259
    align-items: baseline;
260
    gap: 0.5em;
261
}
262

263
.macro-details .macro-arg-item:last-child {
264
    border-bottom: none;
265
}
266

267
.macro-details .macro-arg-name {
268
    font-family: var(--monoFontFamily);
269
    font-weight: bold;
270
    color: var(--SmartThemeQuoteColor);
271
}
272

273
.macro-details .macro-arg-type {
274
    font-size: 0.75em;
275
    padding: 0.1em 0.4em;
276
    border-radius: 3px;
277
    background: var(--black30a);
278
    color: var(--SmartThemeEmColor);
279
}
280

281
.macro-details .macro-arg-required {
282
    font-size: 0.8em;
283
    color: var(--warning-color, #e8a97f);
284
}
285

286
.macro-details .macro-arg-desc {
287
    flex: 1 1 100%;
288
    font-size: 0.9em;
289
    opacity: 0.8;
290
}
291

292
.macro-details .macro-arg-sample {
293
    font-size: 0.85em;
294
    opacity: 0.6;
295
    font-style: italic;
296
}
297

298
.macro-details .macro-arg-list-info {
299
    font-size: 0.85em;
300
    opacity: 0.8;
301
}
302

303
.macro-details .macro-example-list {
304
    list-style: disc;
305
    padding-left: 1.5em;
306
    margin: 0.25em 0;
307
}
308

309
.macro-details .macro-example-list li {
310
    padding: 0.2em 0;
311
}
312

313
.macro-details .macro-example-list code {
314
    font-family: var(--monoFontFamily);
315
    background: var(--black30a);
316
    padding: 0.1em 0.3em;
317
    border-radius: 3px;
318
}
319

320
/* Alias indicator icon in list items */
321
.macro-details .macro-alias-indicator {
322
    flex: 0 0 auto;
323
    font-size: 0.8em;
324
    opacity: 0.6;
325
    margin-left: 0.5em;
326
    transform: rotate(90deg);
327
}
328

329
.macro-details .macro-item.isAlias .macro-signature {
330
    opacity: 0.85;
331
}
332

333
/* Alias of indicator in details panel */
334
.macro-details .macro-alias-of {
335
    display: flex;
336
    align-items: center;
337
    gap: 0.5em;
338
    margin: 0.5em 0;
339
    padding: 0.4em 0.6em;
340
    background: var(--black30a);
341
    border-radius: 4px;
342
    font-size: 0.9em;
343
    opacity: 0.9;
344
}
345

346
.macro-details .macro-alias-of i {
347
    transform: rotate(90deg);
348
    font-size: 0.85em;
349
    opacity: 0.7;
350
}
351

352
.macro-details .macro-alias-of code {
353
    font-family: var(--monoFontFamily);
354
    background: var(--black30a);
355
    padding: 0.1em 0.4em;
356
    border-radius: 3px;
357
}
358

359
/* Aliases list in details panel */
360
.macro-details .macro-alias-list {
361
    list-style: none;
362
    padding: 0;
363
    margin: 0.25em 0;
364
    display: flex;
365
    flex-wrap: wrap;
366
    gap: 0.5em;
367
}
368

369
.macro-details .macro-alias-item {
370
    display: inline-flex;
371
    align-items: center;
372
    gap: 0.3em;
373
}
374

375
.macro-details .macro-alias-item code {
376
    font-family: var(--monoFontFamily);
377
    background: var(--black30a);
378
    padding: 0.2em 0.5em;
379
    border-radius: 3px;
380
}
381

382
.macro-details .macro-alias-item.isHidden {
383
    opacity: 0.5;
384
}
385

386
.macro-details .macro-alias-item.isHidden code {
387
    text-decoration: line-through;
388
    text-decoration-style: dashed;
389
}
390

391
.macro-details .macro-alias-hidden-badge {
392
    font-size: 0.75em;
393
    opacity: 0.7;
394
    font-style: italic;
395
}
396

397
/* ============================================
398
   Enhanced Macro Autocomplete Styles
399
   ============================================ */
400

401
/* Fix macro items in autocomplete list - override the grid display: contents */
402
.autoComplete > .item.macro-ac-item {
403
    display: flex !important;
404
    flex-wrap: nowrap;
405
    align-items: center;
406
    gap: 0.5em;
407
    grid-column: 1 / -1;
408
    padding: 0.25em 0.5em;
409
    min-height: 1.8em;
410
}
411

412
.autoComplete > .item.macro-ac-item > .type {
413
    flex: 0 0 auto;
414
    width: 2em;
415
    text-align: center;
416
}
417

418
.autoComplete > .item.macro-ac-item > .specs {
419
    flex: 0 0 auto;
420
    max-width: 40%;
421
}
422

423
.autoComplete > .item.macro-ac-item > .specs > .name {
424
    white-space: nowrap;
425
    overflow: hidden;
426
    text-overflow: ellipsis;
427
}
428

429
.autoComplete > .item.macro-ac-item > .stopgap {
430
    flex: 0 0 0.5em;
431
    display: block !important;
432
}
433

434
.autoComplete > .item.macro-ac-item > .help {
435
    flex: 1 1 auto;
436
    min-width: 0;
437
    overflow: hidden;
438
}
439

440
.autoComplete > .item.macro-ac-item > .help > .helpContent {
441
    white-space: nowrap;
442
    overflow: hidden;
443
    text-overflow: ellipsis;
444
    display: block;
445
}
446

447
/* Indicator icons (alias and source) at the end */
448
.autoComplete > .item.macro-ac-item > .macro-ac-indicator {
449
    flex: 0 0 auto;
450
    font-size: 0.85em;
451
    opacity: 0.6;
452
    margin-left: auto;
453
}
454

455
.autoComplete > .item.macro-ac-item > .macro-ac-indicator:first-of-type {
456
    margin-left: auto;
457
}
458

459
.autoComplete > .item.macro-ac-item > .macro-ac-indicator + .macro-ac-indicator {
460
    margin-left: 0.25em;
461
}
462

463
/* Third-party source indicator */
464
.autoComplete > .item.macro-ac-item > .macro-source.isThirdParty {
465
    color: #F89406;
466
}
467

468
/* Arity warning banner in details */
469
.macro-ac-warning {
470
    display: flex;
471
    align-items: baseline;
472
    gap: 0.5em;
473
    padding: 0.5em 0.75em;
474
    background: linear-gradient(90deg, rgba(248, 148, 6, 0.2), transparent);
475
    border-left: 3px solid #F89406;
476
    border-radius: 0 4px 4px 0;
477
    margin-bottom: 0.5em;
478
    font-size: 0.9em;
479
    color: #F89406;
480
}
481

482
.macro-ac-warning i {
483
    font-size: 0.9em;
484
}
485

486
/* Scoped content info banner in details */
487
.macro-ac-scoped-info {
488
    display: flex;
489
    align-items: baseline;
490
    gap: 0.5em;
491
    padding: 0.5em 0.75em;
492
    background: linear-gradient(90deg, rgba(91, 192, 222, 0.2), transparent);
493
    border-left: 3px solid #5BC0DE;
494
    border-radius: 0 4px 4px 0;
495
    margin-bottom: 0.5em;
496
    font-size: 0.9em;
497
    color: #5BC0DE;
498
}
499

500
.macro-ac-scoped-info i {
501
    font-size: 0.9em;
502
}
503

504
.macro-ac-scoped-info code {
505
    background: rgba(91, 192, 222, 0.15);
506
    padding: 0.1em 0.3em;
507
    border-radius: 3px;
508
}
509

510
/* OPTIONAL badge for optional scoped content */
511
.macro-ac-optional-badge {
512
    display: inline-block;
513
    background: linear-gradient(135deg, #f0ad4e, #ec971f);
514
    color: #000;
515
    font-weight: bold;
516
    font-size: 0.75em;
517
    padding: 0.15em 0.5em;
518
    border-radius: 3px;
519
    text-transform: uppercase;
520
    letter-spacing: 0.05em;
521
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
522
}
523

524
/* Smaller variant for use in autocomplete list items */
525
.macro-ac-optional-badge-small {
526
    font-size: 0.65em;
527
    padding: 0.1em 0.35em;
528
    vertical-align: middle;
529
    color: #f0ad4e;
530
}
531

532
/* Closing tag autocomplete option */
533
.autoComplete > .item.macro-closing-tag-item > .type {
534
    color: var(--ac-color-matchedText, var(--SmartThemeBorderColor));
535
}
536

537
.macro-closing-tag-details {
538
    padding: 0.5em;
539
}
540

541
.macro-closing-tag-details h3 {
542
    margin: 0 0 0.5em 0;
543
    font-size: 1.1em;
544
}
545

546
.macro-closing-tag-details p {
547
    margin: 0;
548
    opacity: 0.9;
549
}
550

551
/* Current argument hint banner in details */
552
.macro-ac-arg-hint {
553
    display: flex;
554
    align-items: baseline;
555
    gap: 0.5em;
556
    padding: 0.5em 0.75em;
557
    background: linear-gradient(90deg, var(--ac-color-selectedBackground, var(--SmartThemeQuoteColor)), transparent);
558
    border-left: 3px solid var(--ac-color-matchedText, var(--SmartThemeBorderColor));
559
    border-radius: 0 4px 4px 0;
560
    margin-bottom: 0.5em;
561
    font-size: 0.9em;
562
}
563

564
.macro-ac-arg-hint i {
565
    color: var(--ac-color-matchedText, var(--SmartThemeBorderColor));
566
    font-size: 0.8em;
567
}
568

569
.macro-ac-arg-hint .macro-ac-arg-hint-small {
570
    font-size: 0.85em;
571
    opacity: 0.8;
572
}
573

574
.macro-ac-hint-type {
575
    font-family: var(--monoFontFamily);
576
    font-size: 0.85em;
577
    padding: 0.1em 0.3em;
578
    background: var(--ac-color-hoveredBackground, var(--black30a));
579
    border-radius: 3px;
580
    margin-left: 0.25em;
581
}
582

583
.macro-ac-hint-desc {
584
    opacity: 0.8;
585
}
586

587
.macro-ac-hint-sample {
588
    opacity: 0.6;
589
    font-style: italic;
590
}
591

592
/* Details panel using MacroBrowser styles - just add autocomplete context adjustments */
593
.autoComplete-details .macro-ac-details {
594
    padding: 0.5em;
595
}
596

597
/* Highlight current argument in arguments list */
598
.autoComplete-details .macro-arg-item.current {
599
    background: var(--ac-color-selectedBackground, var(--SmartThemeQuoteColor));
600
    padding: 0.25em 0.5em;
601
    margin: 0 -0.5em;
602
    border-radius: 4px;
603
}