streamline plugin marketplace CSS
Alessandro committed
Mar 11, 2026 at 13:21 UTC
1f0eeacfd4358168cd11497b0ac0a92e13c0f8dd
6 files changed
+47
-567
plugins/_plugin_installer/webui/install-detail.html
-1
@@ -379,7 +379,6 @@
379
380
.pi-btn-install:hover:not(:disabled) {
381
opacity: 0.9;
382
- transform: translateY(-1px);
382
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
383
}
384
plugins/_plugin_installer/webui/install-git.html
+3
-36
@@ -27,7 +27,7 @@
27
<div class="pi-hint">Token is used only for cloning and is not stored.</div>
28
</div>
29
30
- <div class="pi-actions">
30
+ <div class="pi-actions pi-actions-start">
31
<button class="button confirm"
32
@click="$store.pluginInstallStore.installGit()"
33
:disabled="$store.pluginInstallStore.loading || !$store.pluginInstallStore.gitUrl.trim()">
@@ -60,6 +60,8 @@
60
</div>
61
62
<style>
63
+ @import url("/plugins/_plugin_installer/webui/install-shared.css");
64
+
65
.pi-form-group {
66
margin-bottom: 1rem;
67
}
@@ -87,46 +89,11 @@
89
box-sizing: border-box;
90
}
91
90
- .pi-hint {
91
- margin-top: 0.35rem;
92
- font-size: 0.8rem;
93
- color: var(--color-text-secondary);
94
- }
95
-
96
- .pi-actions {
97
- display: flex;
98
- justify-content: flex-start;
99
- margin: 1rem 0;
100
- }
101
-
92
.pi-button-loading {
93
display: inline-flex;
94
align-items: center;
95
gap: 0.5rem;
96
}
107
-
108
- .pi-result {
109
- display: flex;
110
- align-items: center;
111
- gap: 0.75rem;
112
- padding: 0.75rem;
113
- background: rgba(34,197,94,0.1);
114
- border: 1px solid rgba(34,197,94,0.3);
115
- border-radius: 4px;
116
- margin-top: 0.75rem;
117
- }
118
-
119
- .pi-result-icon .material-symbols-outlined {
120
- font-size: 2rem;
121
- color: #22c55e;
122
- }
123
-
124
- .pi-result-path {
125
- font-size: 0.85rem;
126
- color: var(--color-text-secondary);
127
- margin-top: 0.25rem;
128
- font-family: var(--font-family-code);
129
- }
97
</style>
98
</body>
99
</html>
plugins/_plugin_installer/webui/install-index.html
-4
@@ -217,7 +217,6 @@
217
border: 0;
218
border-bottom: 1px solid var(--color-border);
219
border-radius: 0;
220
- background: transparent;
220
}
221
222
.pi-search-field {
@@ -236,7 +235,6 @@
235
padding: 0;
236
border: 0;
237
outline: none;
239
- background: transparent;
238
color: var(--color-text-primary);
239
font-size: 0.95rem;
240
}
@@ -260,7 +258,6 @@
258
padding: 0;
259
border: 0;
260
outline: none;
263
- background: transparent;
261
color: var(--color-text-primary);
262
font-size: 0.95rem;
263
}
@@ -361,7 +358,6 @@
358
}
359
360
.pi-card:hover {
364
- transform: translateY(-2px);
361
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
362
}
363
plugins/_plugin_installer/webui/install-shared.css
new
+41
@@ -0,0 +1,41 @@
1
+.pi-hint {
2
+ margin-top: 0.5rem;
3
+ font-size: 0.85rem;
4
+ color: var(--color-text-secondary);
5
+}
6
+
7
+.pi-actions {
8
+ display: flex;
9
+ margin: 1rem 0;
10
+}
11
+
12
+.pi-actions-start {
13
+ justify-content: flex-start;
14
+}
15
+
16
+.pi-actions-center {
17
+ justify-content: center;
18
+}
19
+
20
+.pi-result {
21
+ display: flex;
22
+ align-items: center;
23
+ gap: 0.75rem;
24
+ padding: 0.75rem;
25
+ background: rgba(34, 197, 94, 0.1);
26
+ border: 1px solid rgba(34, 197, 94, 0.3);
27
+ border-radius: 4px;
28
+ margin-top: 0.75rem;
29
+}
30
+
31
+.pi-result-icon .material-symbols-outlined {
32
+ font-size: 2rem;
33
+ color: #22c55e;
34
+}
35
+
36
+.pi-result-path {
37
+ font-size: 0.85rem;
38
+ color: var(--color-text-secondary);
39
+ margin-top: 0.25rem;
40
+ font-family: var(--font-family-code);
41
+}
plugins/_plugin_installer/webui/install-zip.html
+3
-36
@@ -23,7 +23,7 @@
23
</div>
24
</div>
25
26
- <div x-show="$store.pluginInstallStore.zipFile" class="pi-actions">
26
+ <div x-show="$store.pluginInstallStore.zipFile" class="pi-actions pi-actions-center">
27
<button class="button confirm"
28
@click="$store.pluginInstallStore.installZip()"
29
:disabled="$store.pluginInstallStore.loading">
@@ -50,6 +50,8 @@
50
</div>
51
52
<style>
53
+ @import url("/plugins/_plugin_installer/webui/install-shared.css");
54
+
55
.pi-upload-section {
56
text-align: center;
57
padding: 2rem 1rem;
@@ -72,46 +74,11 @@
74
border-color: var(--color-highlight);
75
}
76
75
- .pi-hint {
76
- margin-top: 0.75rem;
77
- font-size: 0.85rem;
78
- color: var(--color-text-secondary);
79
- }
80
-
81
- .pi-actions {
82
- display: flex;
83
- justify-content: center;
84
- margin: 1rem 0;
85
- }
86
-
77
.pi-loading {
78
text-align: center;
79
padding: 1rem;
80
color: var(--color-text-secondary);
81
}
92
-
93
- .pi-result {
94
- display: flex;
95
- align-items: center;
96
- gap: 0.75rem;
97
- padding: 0.75rem;
98
- background: rgba(34,197,94,0.1);
99
- border: 1px solid rgba(34,197,94,0.3);
100
- border-radius: 4px;
101
- margin-top: 0.75rem;
102
- }
103
-
104
- .pi-result-icon .material-symbols-outlined {
105
- font-size: 2rem;
106
- color: #22c55e;
107
- }
108
-
109
- .pi-result-path {
110
- font-size: 0.85rem;
111
- color: var(--color-text-secondary);
112
- margin-top: 0.25rem;
113
- font-family: var(--font-family-code);
114
- }
82
</style>
83
</body>
84
</html>
plugins/_plugin_installer/webui/main.html
-490
@@ -51,7 +51,6 @@
51
</div>
52
53
<style>
54
- /* ── Tabs ─────────────────────────────── */
54
.nav {
55
display: flex;
56
padding-left: 0;
@@ -85,495 +84,6 @@
84
.pi-tab-icon {
85
font-size: 1.1rem;
86
}
88
-
89
- /* ── Store Tab ───────────────────────── */
90
- .pi-browse-shell {
91
- display: flex;
92
- flex-direction: column;
93
- gap: 1rem;
94
- font-family: "Rubik", Arial, Helvetica, sans-serif;
95
- }
96
-
97
- .pi-browse-shell button,
98
- .pi-browse-shell input,
99
- .pi-browse-shell select {
100
- font-family: inherit;
101
- }
102
-
103
- .pi-browse-hero {
104
- display: flex;
105
- align-items: flex-start;
106
- justify-content: space-between;
107
- gap: 1rem;
108
- padding: 0.25rem 0 0.35rem;
109
- }
110
-
111
- .pi-browse-copy {
112
- max-width: 44rem;
113
- }
114
-
115
- .pi-browse-eyebrow {
116
- margin-bottom: 0.4rem;
117
- font-size: 0.78rem;
118
- font-weight: 700;
119
- letter-spacing: 0.08em;
120
- text-transform: uppercase;
121
- color: var(--color-highlight);
122
- }
123
-
124
- .pi-browse-title {
125
- margin: 0;
126
- font-size: 1.6rem;
127
- line-height: 1.15;
128
- color: var(--color-text-primary);
129
- }
130
-
131
- .pi-browse-description {
132
- margin: 0.5rem 0 0;
133
- max-width: 38rem;
134
- font-size: 0.95rem;
135
- line-height: 1.55;
136
- color: var(--color-text-secondary);
137
- }
138
-
139
- .pi-browse-summary {
140
- flex-shrink: 0;
141
- padding: 0.6rem 0.85rem;
142
- border: 1px solid var(--color-border);
143
- border-radius: 0.5rem;
144
- background: var(--color-panel);
145
- font-size: 0.85rem;
146
- font-weight: 600;
147
- color: var(--color-text-primary);
148
- }
149
-
150
- .pi-index-toolbar {
151
- display: flex;
152
- gap: 0.75rem;
153
- align-items: stretch;
154
- }
155
-
156
- .pi-search-field,
157
- .pi-sort-field {
158
- display: flex;
159
- align-items: center;
160
- gap: 0.55rem;
161
- padding: 0.55rem 0;
162
- border: 0;
163
- border-bottom: 1px solid var(--color-border);
164
- border-radius: 0;
165
- background: transparent;
166
- }
167
-
168
- .pi-search-field {
169
- flex: 1;
170
- min-width: 0;
171
- }
172
-
173
- .pi-search-field .material-symbols-outlined {
174
- font-size: 1.15rem;
175
- color: var(--color-text-muted);
176
- }
177
-
178
- .pi-search-input {
179
- width: 100%;
180
- min-width: 0;
181
- padding: 0;
182
- border: 0;
183
- outline: none;
184
- background: transparent;
185
- color: var(--color-text-primary);
186
- font-size: 0.95rem;
187
- }
188
-
189
- .pi-sort-field {
190
- min-width: 160px;
191
- flex-shrink: 0;
192
- justify-content: space-between;
193
- }
194
-
195
- .pi-field-label {
196
- font-size: 0.8rem;
197
- font-weight: 600;
198
- color: var(--color-text-muted);
199
- text-transform: uppercase;
200
- letter-spacing: 0.05em;
201
- }
202
-
203
- .pi-sort-select {
204
- width: 100%;
205
- padding: 0;
206
- border: 0;
207
- outline: none;
208
- background: transparent;
209
- color: var(--color-text-primary);
210
- font-size: 0.95rem;
211
- }
212
-
213
- .pi-filter-row {
214
- display: flex;
215
- flex-wrap: wrap;
216
- gap: 0.6rem;
217
- }
218
-
219
- .pi-filter-chip {
220
- display: inline-flex;
221
- align-items: center;
222
- gap: 0.45rem;
223
- padding: 0.45rem 0.75rem;
224
- border: 1px solid var(--color-border);
225
- border-radius: 0.5rem;
226
- background: var(--color-panel);
227
- color: var(--color-text-secondary);
228
- font-size: 0.85rem;
229
- font-weight: 600;
230
- cursor: pointer;
231
- transition: border-color 0.15s, background 0.15s, color 0.15s;
232
- }
233
-
234
- .pi-filter-chip:hover {
235
- color: var(--color-text-primary);
236
- background: rgba(255, 255, 255, 0.04);
237
- }
238
-
239
- .pi-filter-chip.active {
240
- border-color: var(--color-border);
241
- background: rgba(255, 255, 255, 0.08);
242
- color: var(--color-text-primary);
243
- }
244
-
245
- .pi-filter-count {
246
- padding: 0.12rem 0.4rem;
247
- border-radius: 0.5rem;
248
- background: rgba(255, 255, 255, 0.06);
249
- color: var(--color-text-muted);
250
- font-size: 0.75rem;
251
- }
252
-
253
- .pi-grid {
254
- display: grid;
255
- grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
256
- gap: 0.95rem;
257
- }
258
-
259
- .pi-card {
260
- width: 100%;
261
- padding: 0;
262
- border: 1px solid var(--color-border);
263
- border-radius: 16px;
264
- background: var(--color-background);
265
- color: inherit;
266
- text-align: left;
267
- cursor: pointer;
268
- transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
269
- display: flex;
270
- flex-direction: column;
271
- overflow: hidden;
272
- }
273
-
274
- .pi-card:hover {
275
- transform: translateY(-2px);
276
- box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
277
- }
278
-
279
- .pi-card-thumb {
280
- position: relative;
281
- display: flex;
282
- align-items: center;
283
- justify-content: center;
284
- height: 148px;
285
- padding: 1rem;
286
- background:
287
- radial-gradient(circle at top, rgba(255, 255, 255, 0.16) 0%, var(--color-panel) 100%),
288
- var(--color-panel);
289
- border-bottom: 1px solid var(--color-border);
290
- }
291
-
292
- .pi-card-thumb img {
293
- width: 100%;
294
- height: 100%;
295
- object-fit: contain;
296
- }
297
-
298
- .pi-card-placeholder {
299
- font-size: 4rem;
300
- color: var(--color-text-muted);
301
- }
302
-
303
- .pi-card-installed-pill {
304
- position: absolute;
305
- top: 0.75rem;
306
- right: 0.75rem;
307
- padding: 0.24rem 0.5rem;
308
- border-radius: 8px;
309
- background: rgba(34, 197, 94, 0.15);
310
- color: #4ade80;
311
- font-size: 0.72rem;
312
- font-weight: 700;
313
- }
314
-
315
- .pi-card-body {
316
- flex: 1;
317
- display: flex;
318
- flex-direction: column;
319
- gap: 0.8rem;
320
- padding: 1rem;
321
- }
322
-
323
- .pi-card-head {
324
- display: flex;
325
- align-items: flex-start;
326
- justify-content: space-between;
327
- gap: 0.75rem;
328
- }
329
-
330
- .pi-card-heading {
331
- min-width: 0;
332
- }
333
-
334
- .pi-card-title {
335
- margin: 0;
336
- font-size: 1rem;
337
- line-height: 1.25;
338
- color: var(--color-text-primary);
339
- }
340
-
341
- .pi-card-subtitle {
342
- margin-top: 0.25rem;
343
- font-size: 0.82rem;
344
- color: var(--color-text-muted);
345
- white-space: nowrap;
346
- overflow: hidden;
347
- text-overflow: ellipsis;
348
- }
349
-
350
- .pi-card-arrow {
351
- font-size: 1rem;
352
- color: var(--color-text-muted);
353
- flex-shrink: 0;
354
- }
355
-
356
- .pi-card-desc {
357
- font-size: 0.88rem;
358
- line-height: 1.5;
359
- color: var(--color-text-secondary);
360
- }
361
-
362
- .pi-card-footer {
363
- display: flex;
364
- align-items: center;
365
- justify-content: space-between;
366
- gap: 0.5rem;
367
- padding: 0.9rem 1rem 1rem;
368
- border-top: 1px solid var(--color-border);
369
- }
370
-
371
- .pi-card-stars {
372
- display: inline-flex;
373
- align-items: center;
374
- gap: 0.3rem;
375
- font-size: 0.85rem;
376
- color: var(--color-text-secondary);
377
- }
378
-
379
- .pi-card-stars .material-symbols-outlined {
380
- font-size: 1rem;
381
- color: #fbbf24;
382
- }
383
-
384
- .pi-card-tag {
385
- padding: 0.22rem 0.55rem;
386
- border-radius: 0.5rem;
387
- font-size: 0.75rem;
388
- font-weight: 600;
389
- background: var(--color-panel);
390
- color: var(--color-text-secondary);
391
- border: 1px solid var(--color-border);
392
- }
393
-
394
- .pi-state-card {
395
- display: flex;
396
- align-items: center;
397
- gap: 0.85rem;
398
- padding: 1rem 1.05rem;
399
- border: 1px solid var(--color-border);
400
- border-radius: 14px;
401
- background: var(--color-panel);
402
- }
403
-
404
- .pi-state-card .material-symbols-outlined {
405
- font-size: 1.5rem;
406
- }
407
-
408
- .pi-state-title {
409
- font-size: 0.95rem;
410
- font-weight: 600;
411
- color: var(--color-text-primary);
412
- }
413
-
414
- .pi-state-text {
415
- margin-top: 0.15rem;
416
- font-size: 0.88rem;
417
- color: var(--color-text-secondary);
418
- }
419
-
420
- .pi-state-loading .material-symbols-outlined {
421
- color: var(--color-highlight);
422
- }
423
-
424
- .pi-state-empty .material-symbols-outlined {
425
- color: var(--color-text-muted);
426
- }
427
-
428
- .pi-pagination {
429
- display: flex;
430
- align-items: center;
431
- justify-content: center;
432
- gap: 0.75rem;
433
- padding: 0.4rem 0 0.1rem;
434
- }
435
-
436
- .pi-page-info {
437
- font-size: 0.9rem;
438
- color: var(--color-text-secondary);
439
- }
440
-
441
- @media (max-width: 720px) {
442
- .pi-browse-hero {
443
- flex-direction: column;
444
- }
445
-
446
- .pi-index-toolbar {
447
- flex-direction: column;
448
- }
449
-
450
- .pi-sort-field {
451
- min-width: 0;
452
- }
453
- }
454
-
455
- @media (max-width: 500px) {
456
- .pi-card-thumb {
457
- height: 164px;
458
- }
459
- }
460
-
461
- /* ── Git Tab ─────────────────────────── */
462
- .pi-form-group {
463
- margin-bottom: 1rem;
464
- }
465
-
466
- .pi-label {
467
- display: block;
468
- font-weight: 600;
469
- margin-bottom: 0.35rem;
470
- }
471
-
472
- .pi-optional {
473
- font-weight: 400;
474
- color: var(--color-text-secondary);
475
- font-size: 0.85rem;
476
- }
477
-
478
- .pi-input {
479
- width: 100%;
480
- padding: 0.6rem 0.75rem;
481
- border: 1px solid var(--color-border);
482
- border-radius: 4px;
483
- background: var(--color-bg-primary);
484
- color: var(--color-text-primary);
485
- font-size: 0.95rem;
486
- box-sizing: border-box;
487
- }
488
-
489
- .pi-hint {
490
- margin-top: 0.35rem;
491
- font-size: 0.8rem;
492
- color: var(--color-text-secondary);
493
- }
494
-
495
- .pi-actions {
496
- display: flex;
497
- justify-content: flex-start;
498
- margin: 1rem 0;
499
- }
500
-
501
- /* ── ZIP Tab ─────────────────────────── */
502
- .pi-upload-section {
503
- text-align: center;
504
- padding: 2rem 1rem;
505
- border: 2px dashed var(--color-border);
506
- border-radius: 8px;
507
- margin-bottom: 1rem;
508
- }
509
-
510
- .pi-upload-btn {
511
- display: inline-flex;
512
- align-items: center;
513
- gap: 0.5rem;
514
- padding: 0.75rem 1.5rem;
515
- font-size: 1rem;
516
- cursor: pointer;
517
- }
518
-
519
- .pi-upload-btn.pi-has-file {
520
- background: var(--color-panel);
521
- border-color: var(--color-highlight);
522
- }
523
-
524
- .pi-actions-center {
525
- display: flex;
526
- justify-content: center;
527
- margin: 1rem 0;
528
- }
529
-
530
- /* ── Shared ──────────────────────────── */
531
- .pi-loading {
532
- text-align: center;
533
- padding: 2rem;
534
- color: var(--color-text-secondary);
535
- }
536
-
537
- .pi-empty {
538
- text-align: center;
539
- padding: 2rem;
540
- color: var(--color-text-secondary);
541
- }
542
-
543
- .pi-button-loading {
544
- display: inline-flex;
545
- align-items: center;
546
- gap: 0.5rem;
547
- }
548
-
549
- .pi-result {
550
- display: flex;
551
- align-items: center;
552
- gap: 0.75rem;
553
- padding: 0.75rem;
554
- background: rgba(34, 197, 94, 0.1);
555
- border: 1px solid rgba(34, 197, 94, 0.3);
556
- border-radius: 4px;
557
- margin-top: 0.75rem;
558
- }
559
-
560
- .pi-result-icon .material-symbols-outlined {
561
- font-size: 2rem;
562
- color: #22c55e;
563
- }
564
-
565
- .pi-result-path {
566
- font-size: 0.85rem;
567
- color: var(--color-text-secondary);
568
- margin-top: 0.25rem;
569
- font-family: var(--font-family-code);
570
- }
571
-
572
- @media (max-width: 500px) {
573
- .pi-grid {
574
- grid-template-columns: 1fr;
575
- }
576
- }
87
</style>
88
</body>
89