@fonlan/dsh-model-router 0.3.0 → 0.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,470 @@
1
+ /* Model Router settings card — chrome aligned with the built-in plugin cards
2
+ (设置 → 插件 → 插件配置), theme-consistent via DSW alias variables. */
3
+ .mr-settings-card {
4
+ border: 1px solid var(--dsw-alias-border-l2, #2a3346);
5
+ background: var(--dsw-alias-bg-layer-3, #0d1017);
6
+ border-radius: 12px;
7
+ list-style: none;
8
+ transition: border-color .16s, background .16s;
9
+ }
10
+
11
+ .mr-settings-card:hover {
12
+ border-color: var(--dsw-alias-label-dimmed, #4a5468);
13
+ }
14
+
15
+ .mr-settings-card[data-open] {
16
+ background: var(--dsw-alias-bg-layer-2, #141a26);
17
+ border-color: var(--dsw-alias-label-dimmed, #4a5468);
18
+ }
19
+
20
+ .mr-settings-head {
21
+ appearance: none;
22
+ width: 100%;
23
+ font: inherit;
24
+ color: inherit;
25
+ text-align: left;
26
+ cursor: pointer;
27
+ background: transparent;
28
+ border: 0;
29
+ border-radius: 12px;
30
+ align-items: center;
31
+ gap: 12px;
32
+ padding: 14px 16px;
33
+ display: flex;
34
+ }
35
+
36
+ .mr-settings-head:focus-visible {
37
+ outline: 2px solid var(--dsw-alias-brand-primary, #4f8cff);
38
+ outline-offset: -2px;
39
+ }
40
+
41
+ .mr-settings-head-text {
42
+ flex-direction: column;
43
+ flex: 1;
44
+ gap: 4px;
45
+ min-width: 0;
46
+ display: flex;
47
+ }
48
+
49
+ .mr-settings-title {
50
+ color: var(--dsw-alias-label-primary, #e6e6e6);
51
+ font-size: 15px;
52
+ font-weight: 600;
53
+ line-height: 1.4;
54
+ }
55
+
56
+ .mr-settings-sub {
57
+ color: var(--dsw-alias-label-tertiary, #8b93a7);
58
+ font-size: 13px;
59
+ line-height: 1.5;
60
+ }
61
+
62
+ .mr-settings-chevron {
63
+ color: var(--dsw-alias-label-tertiary, #8b93a7);
64
+ flex: none;
65
+ transition: transform .16s;
66
+ display: flex;
67
+ align-items: center;
68
+ justify-content: center;
69
+ }
70
+
71
+ .mr-settings-chevron[data-open] {
72
+ transform: rotate(180deg);
73
+ }
74
+
75
+ .mr-settings-body {
76
+ border-top: 1px solid var(--dsw-alias-border-l2, #2a3346);
77
+ margin: 0 16px;
78
+ padding: 12px 0 8px;
79
+ display: flex;
80
+ flex-direction: column;
81
+ gap: 12px;
82
+ }
83
+
84
+ .mr-settings-readonly {
85
+ color: var(--dsw-alias-label-tertiary, #8b93a7);
86
+ margin: 0;
87
+ font-size: 12px;
88
+ line-height: 1.5;
89
+ }
90
+
91
+ /* ── card body: the router controls ─────────────────────────────────────── */
92
+
93
+ .mr-root {
94
+ display: flex;
95
+ flex-direction: column;
96
+ gap: 12px;
97
+ padding: 0 0 4px;
98
+ }
99
+
100
+ .mr-quick-switch {
101
+ display: flex;
102
+ align-items: flex-start;
103
+ gap: 8px;
104
+ padding: 8px 10px;
105
+ border: 1px solid var(--dsw-alias-border-inverted);
106
+ border-radius: 10px;
107
+ background: var(--dsw-alias-bg-module-platform);
108
+ cursor: pointer;
109
+ }
110
+
111
+ .mr-quick-switch input[type="checkbox"] {
112
+ margin-top: 2px;
113
+ accent-color: var(--dsw-alias-accent);
114
+ }
115
+
116
+ .mr-quick-switch-copy {
117
+ display: flex;
118
+ flex-direction: column;
119
+ gap: 2px;
120
+ min-width: 0;
121
+ }
122
+
123
+ .mr-quick-switch-label {
124
+ color: var(--dsw-alias-label-primary);
125
+ font-size: 13px;
126
+ line-height: 20px;
127
+ }
128
+
129
+ .mr-quick-switch-desc {
130
+ color: var(--dsw-alias-label-tertiary);
131
+ font-size: 12px;
132
+ line-height: 18px;
133
+ }
134
+
135
+ .mr-toolbar {
136
+ display: flex;
137
+ justify-content: space-between;
138
+ align-items: center;
139
+ }
140
+
141
+ .mr-count {
142
+ color: var(--dsw-alias-label-tertiary);
143
+ font-size: 12px;
144
+ line-height: 18px;
145
+ }
146
+
147
+ .mr-button {
148
+ color: var(--dsw-alias-label-primary);
149
+ cursor: pointer;
150
+ background: var(--dsw-alias-interactive-bg-hover);
151
+ border: 1px solid var(--dsw-alias-border-l3);
152
+ border-radius: 8px;
153
+ font-size: 12px;
154
+ line-height: 18px;
155
+ padding: 3px 10px;
156
+ }
157
+
158
+ .mr-button:hover:not(:disabled) {
159
+ background: var(--dsw-alias-interactive-bg-hover);
160
+ filter: brightness(1.08);
161
+ }
162
+
163
+ .mr-button:disabled {
164
+ opacity: 0.5;
165
+ cursor: default;
166
+ }
167
+
168
+ .mr-error {
169
+ background: var(--dsw-alias-interactive-bg-hover-danger);
170
+ color: var(--dsw-alias-state-error-primary);
171
+ border-radius: 8px;
172
+ padding: 7px 8px;
173
+ font-size: 12px;
174
+ line-height: 18px;
175
+ }
176
+
177
+ .mr-empty {
178
+ color: var(--dsw-alias-label-tertiary);
179
+ padding: 16px 0;
180
+ font-size: 13px;
181
+ line-height: 20px;
182
+ }
183
+
184
+ .mr-models {
185
+ display: flex;
186
+ flex-direction: column;
187
+ gap: 10px;
188
+ }
189
+
190
+ .mr-card {
191
+ border: 1px solid var(--dsw-alias-border-inverted);
192
+ border-radius: 12px;
193
+ padding: 10px 12px;
194
+ background: var(--dsw-alias-bg-module-platform);
195
+ transition: opacity 0.12s;
196
+ }
197
+
198
+ .mr-card-busy {
199
+ opacity: 0.6;
200
+ pointer-events: none;
201
+ }
202
+
203
+ .mr-card-header {
204
+ display: flex;
205
+ align-items: baseline;
206
+ gap: 8px;
207
+ min-width: 0;
208
+ }
209
+
210
+ .mr-model-name {
211
+ color: var(--dsw-alias-label-primary);
212
+ font-size: 14px;
213
+ font-weight: 600;
214
+ line-height: 20px;
215
+ }
216
+
217
+ .mr-model-id {
218
+ color: var(--dsw-alias-label-tertiary);
219
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
220
+ font-size: 12px;
221
+ line-height: 18px;
222
+ text-overflow: ellipsis;
223
+ white-space: nowrap;
224
+ overflow: hidden;
225
+ min-width: 0;
226
+ flex: 1;
227
+ }
228
+
229
+ .mr-provider-count {
230
+ color: var(--dsw-alias-label-tertiary);
231
+ font-size: 12px;
232
+ line-height: 18px;
233
+ flex: none;
234
+ }
235
+
236
+ .mr-drag-hint {
237
+ margin: 2px 0 6px;
238
+ color: var(--dsw-alias-label-caption);
239
+ font-size: 11px;
240
+ line-height: 16px;
241
+ }
242
+
243
+ .mr-providers {
244
+ list-style: none;
245
+ margin: 0;
246
+ padding: 0;
247
+ display: flex;
248
+ flex-direction: column;
249
+ gap: 4px;
250
+ }
251
+
252
+ .mr-provider {
253
+ display: flex;
254
+ align-items: center;
255
+ gap: 6px;
256
+ border: 1px solid transparent;
257
+ border-radius: 10px;
258
+ padding: 2px 8px 2px 4px;
259
+ }
260
+
261
+ .mr-provider-active {
262
+ background: var(--dsw-alias-interactive-bg-hover);
263
+ border-color: var(--dsw-alias-border-l3);
264
+ }
265
+
266
+ .mr-provider-nocred {
267
+ opacity: 0.55;
268
+ }
269
+
270
+ .mr-provider-drop {
271
+ border-color: var(--dsw-alias-border-brand);
272
+ }
273
+
274
+ .mr-grip {
275
+ color: var(--dsw-alias-label-caption);
276
+ cursor: grab;
277
+ font-size: 12px;
278
+ line-height: 20px;
279
+ flex: none;
280
+ user-select: none;
281
+ }
282
+
283
+ .mr-grip:active {
284
+ cursor: grabbing;
285
+ }
286
+
287
+ .mr-provider-button {
288
+ flex: 1;
289
+ min-width: 0;
290
+ display: flex;
291
+ align-items: baseline;
292
+ gap: 6px;
293
+ color: var(--dsw-alias-label-primary);
294
+ background: none;
295
+ border: none;
296
+ text-align: left;
297
+ cursor: pointer;
298
+ font: inherit;
299
+ padding: 4px 0;
300
+ }
301
+
302
+ .mr-provider-button:disabled {
303
+ cursor: default;
304
+ }
305
+
306
+ .mr-provider-name {
307
+ font-size: 13px;
308
+ line-height: 20px;
309
+ text-overflow: ellipsis;
310
+ white-space: nowrap;
311
+ overflow: hidden;
312
+ }
313
+
314
+ .mr-provider-nocred-label {
315
+ color: var(--dsw-alias-label-tertiary);
316
+ font-size: 12px;
317
+ line-height: 18px;
318
+ flex: none;
319
+ }
320
+
321
+ .mr-active-badge {
322
+ flex: none;
323
+ color: var(--dsw-alias-label-inverted, #fff);
324
+ background: var(--dsw-alias-border-brand, #4d6bfe);
325
+ border-radius: 999px;
326
+ font-size: 11px;
327
+ line-height: 16px;
328
+ padding: 0 8px;
329
+ }
330
+
331
+ /* ── model display order ────────────────────────────────────────────────── */
332
+
333
+ .mr-sort {
334
+ display: flex;
335
+ flex-direction: column;
336
+ gap: 8px;
337
+ padding: 8px 10px;
338
+ border: 1px solid var(--dsw-alias-border-inverted);
339
+ border-radius: 10px;
340
+ background: var(--dsw-alias-bg-module-platform);
341
+ }
342
+
343
+ .mr-sort-head {
344
+ display: flex;
345
+ flex-direction: column;
346
+ gap: 2px;
347
+ }
348
+
349
+ .mr-sort-title {
350
+ color: var(--dsw-alias-label-primary);
351
+ font-size: 13px;
352
+ line-height: 20px;
353
+ }
354
+
355
+ .mr-sort-desc {
356
+ color: var(--dsw-alias-label-tertiary);
357
+ font-size: 12px;
358
+ line-height: 18px;
359
+ }
360
+
361
+ .mr-sort-modes {
362
+ display: flex;
363
+ flex-direction: column;
364
+ gap: 4px;
365
+ }
366
+
367
+ .mr-sort-mode {
368
+ display: flex;
369
+ align-items: flex-start;
370
+ gap: 8px;
371
+ border: 1px solid transparent;
372
+ border-radius: 8px;
373
+ padding: 5px 6px;
374
+ cursor: pointer;
375
+ }
376
+
377
+ .mr-sort-mode:hover {
378
+ background: var(--dsw-alias-interactive-bg-hover);
379
+ }
380
+
381
+ .mr-sort-mode input[type="radio"] {
382
+ margin-top: 2px;
383
+ accent-color: var(--dsw-alias-accent);
384
+ }
385
+
386
+ .mr-sort-mode-copy {
387
+ display: flex;
388
+ flex-direction: column;
389
+ gap: 1px;
390
+ min-width: 0;
391
+ }
392
+
393
+ .mr-sort-mode-label {
394
+ color: var(--dsw-alias-label-primary);
395
+ font-size: 13px;
396
+ line-height: 20px;
397
+ }
398
+
399
+ .mr-sort-mode-desc {
400
+ color: var(--dsw-alias-label-tertiary);
401
+ font-size: 12px;
402
+ line-height: 18px;
403
+ }
404
+
405
+ .mr-sort-custom {
406
+ display: flex;
407
+ flex-direction: column;
408
+ gap: 6px;
409
+ border-top: 1px solid var(--dsw-alias-border-l2, #2a3346);
410
+ padding-top: 8px;
411
+ }
412
+
413
+ .mr-sort-hint {
414
+ color: var(--dsw-alias-label-caption);
415
+ margin: 0;
416
+ font-size: 11px;
417
+ line-height: 16px;
418
+ }
419
+
420
+ .mr-sort-list {
421
+ list-style: none;
422
+ margin: 0;
423
+ padding: 0;
424
+ display: flex;
425
+ flex-direction: column;
426
+ gap: 4px;
427
+ max-height: 280px;
428
+ overflow-y: auto;
429
+ }
430
+
431
+ .mr-sort-item {
432
+ display: flex;
433
+ align-items: center;
434
+ gap: 6px;
435
+ border: 1px solid var(--dsw-alias-border-l2, #2a3346);
436
+ border-radius: 8px;
437
+ padding: 4px 8px 4px 4px;
438
+ background: var(--dsw-alias-bg-layer-1, #0d1017);
439
+ }
440
+
441
+ .mr-sort-item-drop {
442
+ border-color: var(--dsw-alias-border-brand);
443
+ }
444
+
445
+ .mr-sort-item-busy {
446
+ opacity: 0.6;
447
+ pointer-events: none;
448
+ }
449
+
450
+ .mr-sort-model-name {
451
+ color: var(--dsw-alias-label-primary);
452
+ font-size: 13px;
453
+ line-height: 20px;
454
+ text-overflow: ellipsis;
455
+ white-space: nowrap;
456
+ overflow: hidden;
457
+ min-width: 0;
458
+ }
459
+
460
+ .mr-sort-model-id {
461
+ color: var(--dsw-alias-label-tertiary);
462
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
463
+ font-size: 11px;
464
+ line-height: 16px;
465
+ text-overflow: ellipsis;
466
+ white-space: nowrap;
467
+ overflow: hidden;
468
+ flex: 1;
469
+ text-align: right;
470
+ }