@anglefeint/astro-theme 0.1.0-alpha.0

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.
Files changed (33) hide show
  1. package/README.md +50 -0
  2. package/package.json +38 -0
  3. package/public/scripts/about-effects.js +535 -0
  4. package/public/scripts/blogpost-effects.js +956 -0
  5. package/public/scripts/home-matrix.js +117 -0
  6. package/public/styles/about-page.css +756 -0
  7. package/public/styles/blog-post.css +390 -0
  8. package/public/styles/home-page.css +186 -0
  9. package/src/assets/theme/placeholders/theme-placeholder-1.jpg +0 -0
  10. package/src/assets/theme/placeholders/theme-placeholder-2.jpg +0 -0
  11. package/src/assets/theme/placeholders/theme-placeholder-3.jpg +0 -0
  12. package/src/assets/theme/placeholders/theme-placeholder-4.jpg +0 -0
  13. package/src/assets/theme/placeholders/theme-placeholder-5.jpg +0 -0
  14. package/src/assets/theme/placeholders/theme-placeholder-about.jpg +0 -0
  15. package/src/assets/theme/red-queen/theme-redqueen1.webp +0 -0
  16. package/src/assets/theme/red-queen/theme-redqueen2.gif +0 -0
  17. package/src/cli-new-page.mjs +118 -0
  18. package/src/cli-new-post.mjs +139 -0
  19. package/src/components/BaseHead.astro +177 -0
  20. package/src/components/Footer.astro +74 -0
  21. package/src/components/FormattedDate.astro +17 -0
  22. package/src/components/Header.astro +328 -0
  23. package/src/components/HeaderLink.astro +35 -0
  24. package/src/consts.ts +12 -0
  25. package/src/content-schema.ts +33 -0
  26. package/src/i18n/config.ts +46 -0
  27. package/src/i18n/messages.ts +220 -0
  28. package/src/i18n/posts.ts +11 -0
  29. package/src/index.ts +5 -0
  30. package/src/layouts/BasePageLayout.astro +67 -0
  31. package/src/layouts/BlogPost.astro +279 -0
  32. package/src/layouts/HomePage.astro +73 -0
  33. package/src/styles/global.css +1867 -0
@@ -0,0 +1,756 @@
1
+ body.term-page {
2
+ background: #000 !important;
3
+ background-image: none !important;
4
+ color: rgba(255, 255, 255, 0.88);
5
+ min-height: 100vh;
6
+ scrollbar-width: thin;
7
+ scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
8
+ /* header: Anonymous 黑白灰 + 黄点缀 */
9
+ --chrome-bg: rgba(0, 0, 0, 0.42);
10
+ --chrome-border: rgba(255, 255, 255, 0.2);
11
+ --chrome-link: rgba(255, 255, 255, 0.9);
12
+ --chrome-link-hover: rgba(0, 255, 100, 0.95);
13
+ --chrome-active: rgba(255, 255, 255, 0.5);
14
+ --chrome-text-muted: rgba(255, 255, 255, 0.5);
15
+ }
16
+ body.term-page::-webkit-scrollbar { width: 6px; }
17
+ body.term-page::-webkit-scrollbar-track { background: transparent; }
18
+ body.term-page::-webkit-scrollbar-thumb {
19
+ background: rgba(255, 255, 255, 0.22);
20
+ border-radius: 3px;
21
+ }
22
+ /* fixed header + content offset (mirrors mesh-page in global.css) */
23
+ body.term-page header {
24
+ position: fixed;
25
+ top: 0;
26
+ left: 0;
27
+ right: 0;
28
+ z-index: 100;
29
+ backdrop-filter: blur(3px);
30
+ -webkit-backdrop-filter: blur(3px);
31
+ }
32
+ body.term-page .term-content {
33
+ padding-top: calc(3em + 56px);
34
+ }
35
+ body.term-page .term-content,
36
+ body.term-page footer {
37
+ position: relative;
38
+ z-index: 10;
39
+ }
40
+ /* footer: Anonymous 灰白 */
41
+ body.term-page footer {
42
+ --chrome-bg: rgba(0, 0, 0, 0.85);
43
+ --chrome-border: rgba(255, 255, 255, 0.15);
44
+ border-top-color: rgba(255, 255, 255, 0.15) !important;
45
+ color: rgba(255, 255, 255, 0.55);
46
+ }
47
+ body.term-page footer a {
48
+ color: rgba(255, 255, 255, 0.7) !important;
49
+ }
50
+ body.term-page footer a:hover {
51
+ color: rgba(0, 255, 100, 0.9) !important;
52
+ }
53
+ @media (max-width: 720px) {
54
+ body.term-page .term-content {
55
+ padding-top: calc(1em + 56px);
56
+ }
57
+ }
58
+ /* ── terminal background ── */
59
+ .term-bg {
60
+ position: fixed;
61
+ inset: 0;
62
+ z-index: 0;
63
+ overflow: hidden;
64
+ pointer-events: none;
65
+ }
66
+ .term-bg-canvas {
67
+ position: absolute;
68
+ inset: 0;
69
+ width: 100%;
70
+ height: 100%;
71
+ }
72
+ .term-scanlines {
73
+ position: absolute;
74
+ inset: 0;
75
+ /* 浅色扫描线:在深色背景上可见,全屏 CRT 感 */
76
+ background: repeating-linear-gradient(
77
+ 180deg,
78
+ transparent 0px,
79
+ transparent 2px,
80
+ rgba(255, 255, 255, 0.03) 2px,
81
+ rgba(255, 255, 255, 0.03) 3px
82
+ );
83
+ pointer-events: none;
84
+ }
85
+ .term-vignette {
86
+ position: absolute;
87
+ inset: 0;
88
+ background: radial-gradient(
89
+ ellipse at center,
90
+ transparent 50%,
91
+ rgba(0, 0, 0, 0.5) 80%,
92
+ rgba(0, 0, 0, 0.85) 100%
93
+ );
94
+ pointer-events: none;
95
+ }
96
+ .term-flicker {
97
+ position: absolute;
98
+ inset: 0;
99
+ background: transparent;
100
+ animation: term-flicker-anim 0.08s infinite;
101
+ pointer-events: none;
102
+ }
103
+ @keyframes term-flicker-anim {
104
+ 0% { background: rgba(255, 255, 255, 0.012); }
105
+ 50% { background: transparent; }
106
+ 100% { background: rgba(255, 255, 255, 0.005); }
107
+ }
108
+ .term-glow {
109
+ position: absolute;
110
+ inset: 0;
111
+ box-shadow: inset 0 0 120px rgba(255, 255, 255, 0.03);
112
+ pointer-events: none;
113
+ }
114
+ /* ── content ── */
115
+ .term-content {
116
+ position: relative;
117
+ z-index: 10;
118
+ }
119
+ .term-content .prose {
120
+ position: relative;
121
+ background:
122
+ linear-gradient(180deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.92)),
123
+ linear-gradient(180deg, rgba(30, 30, 30, 0.1), rgba(15, 15, 15, 0.15));
124
+ border: 1px solid rgba(255, 255, 255, 0.2);
125
+ border-radius: 8px;
126
+ box-shadow:
127
+ 0 0 0 1px rgba(255, 255, 255, 0.06),
128
+ 0 16px 48px rgba(0, 0, 0, 0.6);
129
+ }
130
+ .about-shell {
131
+ width: 720px;
132
+ max-width: calc(100% - 2em);
133
+ margin: 0 auto 2rem;
134
+ }
135
+ /* ── toast ── */
136
+ .term-toast {
137
+ position: fixed;
138
+ right: 1rem;
139
+ bottom: 1rem;
140
+ z-index: 56;
141
+ padding: 0.5rem 0.75rem;
142
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
143
+ font-size: 0.7rem;
144
+ letter-spacing: 0.08em;
145
+ text-transform: uppercase;
146
+ color: rgba(255, 255, 255, 0.95);
147
+ background: rgba(0, 0, 0, 0.94);
148
+ border: 1px solid rgba(255, 255, 255, 0.25);
149
+ border-radius: 6px;
150
+ box-shadow:
151
+ 0 0 0 1px rgba(255, 255, 255, 0.08),
152
+ 0 0 24px rgba(0, 255, 100, 0.12);
153
+ opacity: 0;
154
+ transform: translateY(8px);
155
+ pointer-events: none;
156
+ transition: opacity 0.18s ease, transform 0.18s ease;
157
+ }
158
+ .term-toast.visible {
159
+ opacity: 1;
160
+ transform: translateY(0);
161
+ }
162
+ /* ── progress bar ── */
163
+ .term-progress {
164
+ position: fixed;
165
+ top: 0;
166
+ left: 0;
167
+ height: 3px;
168
+ width: calc(var(--read-progress, 0) * 100%);
169
+ background: linear-gradient(90deg, rgba(255, 255, 255, 0.6), rgba(0, 255, 100, 0.9));
170
+ box-shadow: 0 0 12px rgba(0, 255, 100, 0.25);
171
+ z-index: 100;
172
+ pointer-events: none;
173
+ }
174
+ /* ── back to top ── */
175
+ .term-back-to-top {
176
+ position: fixed;
177
+ right: 1.5rem;
178
+ bottom: 3.5rem;
179
+ width: 40px;
180
+ height: 40px;
181
+ border: 1px solid rgba(255, 255, 255, 0.25);
182
+ border-radius: 8px;
183
+ background: rgba(0, 0, 0, 0.88);
184
+ color: rgba(255, 255, 255, 0.9);
185
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
186
+ font-size: 1.1rem;
187
+ cursor: pointer;
188
+ z-index: 55;
189
+ opacity: 0;
190
+ transform: translateY(8px);
191
+ transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
192
+ pointer-events: none;
193
+ box-shadow: 0 0 14px rgba(255, 255, 255, 0.08);
194
+ }
195
+ .term-back-to-top.visible {
196
+ opacity: 1;
197
+ transform: translateY(0);
198
+ pointer-events: auto;
199
+ }
200
+ .term-back-to-top:hover {
201
+ box-shadow: 0 0 20px rgba(0, 255, 100, 0.25);
202
+ border-color: rgba(0, 255, 100, 0.5);
203
+ color: rgba(0, 255, 100, 0.95);
204
+ }
205
+ /* ── title ── */
206
+ .about-title {
207
+ margin-bottom: 1.4rem;
208
+ }
209
+ .term-meta {
210
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
211
+ font-size: 0.78em;
212
+ color: rgba(255, 255, 255, 0.55);
213
+ margin-bottom: 0.62em;
214
+ letter-spacing: 0.04em;
215
+ }
216
+ .term-title-bar {
217
+ position: relative;
218
+ height: 3px;
219
+ margin: 0.75rem 0 0.1rem;
220
+ border-radius: 999px;
221
+ overflow: hidden;
222
+ background: linear-gradient(
223
+ 90deg,
224
+ rgba(255, 255, 255, 0.1),
225
+ rgba(255, 255, 255, 0.2),
226
+ rgba(255, 255, 255, 0.1)
227
+ );
228
+ box-shadow: 0 0 14px rgba(255, 255, 255, 0.1);
229
+ }
230
+ .term-title-bar::after {
231
+ content: "";
232
+ position: absolute;
233
+ top: 0;
234
+ bottom: 0;
235
+ left: -35%;
236
+ width: 35%;
237
+ background: linear-gradient(
238
+ 90deg,
239
+ rgba(11, 15, 20, 0.4),
240
+ rgba(255, 0, 51, 0.7),
241
+ rgba(156, 163, 175, 0.6),
242
+ rgba(11, 15, 20, 0.4)
243
+ );
244
+ animation: term-bar-sweep 3.8s linear infinite;
245
+ }
246
+ @keyframes term-bar-sweep {
247
+ to { left: 100%; }
248
+ }
249
+ /* ── response panel: Anonymous 窗口风格 (白标题栏 + 黑内容区) ── */
250
+ .term-response {
251
+ border: 1px solid rgba(255, 255, 255, 0.25);
252
+ background: #000;
253
+ border-radius: 0;
254
+ padding: 0;
255
+ overflow: hidden;
256
+ box-shadow:
257
+ 0 0 0 1px rgba(255, 255, 255, 0.1),
258
+ 0 8px 32px rgba(0, 0, 0, 0.6);
259
+ }
260
+ .term-response-header {
261
+ display: flex;
262
+ align-items: center;
263
+ gap: 0.5em;
264
+ padding: 0.5rem 0.9rem;
265
+ background: #fff;
266
+ border-bottom: 1px solid rgba(0, 0, 0, 0.15);
267
+ }
268
+ .term-window-dots {
269
+ display: flex;
270
+ gap: 6px;
271
+ align-items: center;
272
+ }
273
+ .term-window-dots span {
274
+ width: 10px;
275
+ height: 10px;
276
+ border-radius: 50%;
277
+ flex-shrink: 0;
278
+ }
279
+ .term-window-dots span:nth-child(1) { background: #ff5f57; }
280
+ .term-window-dots span:nth-child(2) { background: #febc2e; }
281
+ .term-window-dots span:nth-child(3) { background: #28c840; }
282
+ .term-response-label {
283
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
284
+ font-size: 0.75em;
285
+ color: #000;
286
+ font-weight: 600;
287
+ letter-spacing: 0.1em;
288
+ text-transform: uppercase;
289
+ }
290
+ .term-body {
291
+ padding: 1rem 0.9rem 1.2rem;
292
+ background: #000;
293
+ }
294
+ /* ── prose body ── */
295
+ .term-body p,
296
+ .term-body h2,
297
+ .term-body blockquote,
298
+ .term-body .about-manifest {
299
+ opacity: 0;
300
+ transform: translateY(12px);
301
+ transition: opacity 0.5s ease, transform 0.5s ease;
302
+ }
303
+ .term-body .term-visible {
304
+ opacity: 1;
305
+ transform: translateY(0);
306
+ }
307
+ .term-body a {
308
+ color: rgba(255, 255, 255, 0.9);
309
+ text-decoration-color: rgba(255, 255, 255, 0.35);
310
+ }
311
+ .term-body a:hover {
312
+ color: rgba(0, 255, 100, 0.95);
313
+ text-decoration-color: rgba(0, 255, 100, 0.6);
314
+ }
315
+ /* ── cursor ── */
316
+ .term-cursor {
317
+ display: inline-block;
318
+ width: 0.6em;
319
+ height: 1.1em;
320
+ background: rgba(0, 255, 100, 0.9);
321
+ margin-left: 2px;
322
+ vertical-align: text-bottom;
323
+ animation: term-cursor-blink 1s step-end infinite;
324
+ }
325
+ @keyframes term-cursor-blink {
326
+ 0%, 50% { opacity: 1; }
327
+ 51%, 100% { opacity: 0; }
328
+ }
329
+ /* ── section titles ── */
330
+ .about-section-title {
331
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
332
+ font-size: 0.78rem;
333
+ letter-spacing: 0.12em;
334
+ text-transform: uppercase;
335
+ color: rgba(255, 255, 255, 0.82);
336
+ margin: 1.7rem 0 0.45rem;
337
+ }
338
+ /* ── manifest box ── */
339
+ .about-manifest {
340
+ margin: 1rem 0 1.4rem;
341
+ padding: 0.8rem 0.95rem;
342
+ border: 1px solid rgba(255, 255, 255, 0.18);
343
+ border-radius: 8px;
344
+ background: rgba(0, 0, 0, 0.4);
345
+ }
346
+ .about-manifest ul {
347
+ margin: 0;
348
+ padding-left: 1.1rem;
349
+ }
350
+ .about-manifest li {
351
+ margin: 0.38rem 0;
352
+ }
353
+ .about-manifest li::marker {
354
+ color: rgba(255, 255, 255, 0.5);
355
+ }
356
+ /* ── signature ── */
357
+ .about-signature {
358
+ margin-top: 1.2rem;
359
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
360
+ font-size: 0.8rem;
361
+ color: rgba(255, 255, 255, 0.6);
362
+ }
363
+ /* ── regenerate ── */
364
+ .term-regenerate {
365
+ display: block;
366
+ margin: 2em auto 0;
367
+ padding: 0.5em 1.2em;
368
+ font-size: 0.85em;
369
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
370
+ color: rgba(255, 255, 255, 0.88);
371
+ background: rgba(0, 0, 0, 0.68);
372
+ border: 1px solid rgba(255, 255, 255, 0.25);
373
+ border-radius: 4px;
374
+ cursor: pointer;
375
+ letter-spacing: 0.06em;
376
+ text-transform: uppercase;
377
+ transition: all 0.2s ease;
378
+ }
379
+ .term-regenerate:hover:not(:disabled) {
380
+ color: rgba(0, 255, 100, 0.95);
381
+ border-color: rgba(0, 255, 100, 0.4);
382
+ background: rgba(0, 255, 100, 0.06);
383
+ box-shadow: 0 0 14px rgba(0, 255, 100, 0.15);
384
+ }
385
+ /* ── prose container: Anonymous 全等宽 ── */
386
+ .prose {
387
+ width: 720px;
388
+ max-width: calc(100% - 2em);
389
+ margin: auto;
390
+ padding: 1em;
391
+ color: rgba(255, 255, 255, 0.88);
392
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
393
+ font-size: 0.9rem;
394
+ line-height: 1.6;
395
+ }
396
+ .prose p {
397
+ color: rgba(255, 255, 255, 0.82);
398
+ }
399
+ .prose hr {
400
+ border-color: rgba(255, 255, 255, 0.15);
401
+ }
402
+ .title {
403
+ margin-bottom: 1em;
404
+ padding: 1em 0;
405
+ text-align: center;
406
+ line-height: 1;
407
+ }
408
+ .title h1 {
409
+ margin: 0 0 0.5em 0;
410
+ color: rgba(255, 255, 255, 0.92);
411
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
412
+ letter-spacing: 0.04em;
413
+ }
414
+ /* ── mouse glow (green) ── */
415
+ .term-mouse-glow {
416
+ position: fixed;
417
+ width: 300px;
418
+ height: 300px;
419
+ left: calc(var(--mouse-x, -9999px) - 150px);
420
+ top: calc(var(--mouse-y, -9999px) - 150px);
421
+ background: radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, transparent 70%);
422
+ pointer-events: none;
423
+ z-index: 1;
424
+ border-radius: 50%;
425
+ }
426
+ /* ── load scan ── */
427
+ .term-load-scan {
428
+ position: fixed;
429
+ left: 0;
430
+ right: 0;
431
+ height: 2px;
432
+ background: linear-gradient(90deg, rgba(11, 15, 20, 0.3), rgba(255, 0, 51, 0.7), rgba(156, 163, 175, 0.6), rgba(11, 15, 20, 0.3));
433
+ box-shadow: 0 0 12px rgba(255, 0, 51, 0.4);
434
+ animation: term-scan 0.8s ease-out forwards;
435
+ pointer-events: none;
436
+ z-index: 20;
437
+ }
438
+ @keyframes term-scan {
439
+ 0% { top: 0; opacity: 1; }
440
+ 100% { top: 100vh; opacity: 0.2; }
441
+ }
442
+ /* ── flash on regenerate ── */
443
+ .term-flash {
444
+ animation: term-flash-anim 0.3s ease-out;
445
+ }
446
+ @keyframes term-flash-anim {
447
+ 0% { filter: brightness(2) saturate(0.5); }
448
+ 100% { filter: none; }
449
+ }
450
+ /* ── 右侧文件夹 (Anonymous) ── */
451
+ .term-sidebar {
452
+ position: fixed;
453
+ top: 20%;
454
+ right: 1rem;
455
+ z-index: 50;
456
+ display: flex;
457
+ flex-direction: column;
458
+ gap: 0.6rem;
459
+ }
460
+ .term-folder {
461
+ display: flex;
462
+ align-items: center;
463
+ gap: 0.5rem;
464
+ padding: 0.4rem 0.6rem;
465
+ background: rgba(0, 0, 0, 0.6);
466
+ border: 1px solid rgba(255, 255, 255, 0.2);
467
+ border-radius: 8px;
468
+ cursor: pointer;
469
+ transition: all 0.2s ease;
470
+ text-decoration: none;
471
+ color: rgba(255, 255, 255, 0.9);
472
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
473
+ font-size: 0.72rem;
474
+ letter-spacing: 0.06em;
475
+ }
476
+ .term-folder:hover {
477
+ background: rgba(0, 0, 0, 0.85);
478
+ border-color: rgba(0, 255, 100, 0.5);
479
+ color: rgba(0, 255, 100, 0.95);
480
+ box-shadow: 0 0 12px rgba(0, 255, 100, 0.15);
481
+ }
482
+ .term-folder-icon {
483
+ width: 24px;
484
+ height: 20px;
485
+ flex-shrink: 0;
486
+ opacity: 0.9;
487
+ }
488
+ /* ── 弹窗 (Anonymous 窗口) ── */
489
+ .term-modal-overlay {
490
+ position: fixed;
491
+ inset: 0;
492
+ z-index: 200;
493
+ background: rgba(0, 0, 0, 0.7);
494
+ backdrop-filter: blur(4px);
495
+ display: none;
496
+ align-items: center;
497
+ justify-content: center;
498
+ padding: 2rem;
499
+ }
500
+ .term-modal-overlay.open {
501
+ display: flex;
502
+ }
503
+ .term-modal {
504
+ width: min(420px, 100%);
505
+ max-height: 80vh;
506
+ }
507
+ .term-modal.term-modal-wide {
508
+ width: min(900px, calc(100vw - 2rem));
509
+ overflow: visible;
510
+ }
511
+ .term-modal-header {
512
+ display: flex;
513
+ align-items: center;
514
+ gap: 0.5rem;
515
+ padding: 0.5rem 0.9rem;
516
+ background: #fff;
517
+ border-bottom: 1px solid rgba(0, 0, 0, 0.15);
518
+ }
519
+ .term-modal-dots {
520
+ display: flex;
521
+ gap: 6px;
522
+ }
523
+ .term-modal-dots span {
524
+ width: 10px;
525
+ height: 10px;
526
+ border-radius: 50%;
527
+ }
528
+ .term-modal-dots span:nth-child(1) { background: #ff5f57; }
529
+ .term-modal-dots span:nth-child(2) { background: #febc2e; }
530
+ .term-modal-dots span:nth-child(3) { background: #28c840; }
531
+ .term-modal-title {
532
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
533
+ font-size: 0.75em;
534
+ color: #000;
535
+ font-weight: 600;
536
+ letter-spacing: 0.1em;
537
+ text-transform: uppercase;
538
+ }
539
+ .term-modal-close {
540
+ margin-left: auto;
541
+ width: 66px;
542
+ height: 66px;
543
+ border: none;
544
+ background: rgba(0, 0, 0, 0.06);
545
+ color: #000;
546
+ display: flex;
547
+ align-items: center;
548
+ justify-content: center;
549
+ cursor: pointer;
550
+ opacity: 0.9;
551
+ border-radius: 10px;
552
+ }
553
+ .term-modal-close .term-modal-close-icon {
554
+ flex-shrink: 0;
555
+ }
556
+ .term-modal-close:hover {
557
+ opacity: 1;
558
+ background: rgba(0, 0, 0, 0.14);
559
+ }
560
+ .term-modal-body {
561
+ padding: 1rem 0.9rem 1.2rem;
562
+ color: rgba(255, 255, 255, 0.88);
563
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
564
+ font-size: 0.82rem;
565
+ line-height: 1.6;
566
+ max-height: 60vh;
567
+ overflow-y: auto;
568
+ }
569
+ .term-modal-body pre {
570
+ margin: 0;
571
+ white-space: pre-wrap;
572
+ word-break: break-word;
573
+ }
574
+ /* DL Data: Downloading 进度条 (Anonymous 风格) */
575
+ .term-modal-body.term-modal-download .modal-subtitle {
576
+ font-size: 0.9em;
577
+ color: rgba(255, 255, 255, 0.7);
578
+ margin-bottom: 1rem;
579
+ }
580
+ .term-modal-progress {
581
+ display: flex;
582
+ gap: 2px;
583
+ flex-wrap: wrap;
584
+ margin-top: 0.5rem;
585
+ }
586
+ .term-modal-progress span {
587
+ width: 10px;
588
+ height: 12px;
589
+ background: rgba(255, 255, 255, 0.2);
590
+ transition: background 0.12s ease;
591
+ }
592
+ .term-modal-progress span.filled {
593
+ background: rgba(255, 255, 255, 0.6);
594
+ }
595
+ /* All Scripts: 文件夹网格 */
596
+ .term-modal-scripts {
597
+ padding: 0.5rem 0;
598
+ }
599
+ .term-modal-scripts-path {
600
+ font-size: 0.9em;
601
+ color: rgba(255, 255, 255, 0.9);
602
+ letter-spacing: 0.05em;
603
+ margin-bottom: 1rem;
604
+ border-bottom: 1px solid rgba(255, 255, 255, 0.15);
605
+ padding-bottom: 0.5rem;
606
+ }
607
+ .term-modal-scripts-grid {
608
+ display: grid;
609
+ grid-template-columns: repeat(5, 1fr);
610
+ gap: 1rem;
611
+ }
612
+ .term-script-folder {
613
+ display: flex;
614
+ flex-direction: column;
615
+ align-items: center;
616
+ gap: 0.5rem;
617
+ padding: 0.6rem 0.4rem;
618
+ background: rgba(255, 255, 255, 0.05);
619
+ border: 1px solid rgba(255, 255, 255, 0.12);
620
+ border-radius: 6px;
621
+ color: rgba(255, 255, 255, 0.9);
622
+ text-decoration: none;
623
+ transition: all 0.15s ease;
624
+ }
625
+ .term-script-folder:hover {
626
+ background: rgba(255, 255, 255, 0.12);
627
+ border-color: rgba(0, 255, 100, 0.4);
628
+ box-shadow: 0 0 12px rgba(0, 255, 100, 0.15);
629
+ }
630
+ .term-script-folder-icon {
631
+ width: 32px;
632
+ height: 28px;
633
+ color: rgba(255, 255, 255, 0.7);
634
+ }
635
+ .term-script-folder-label {
636
+ font-size: 0.72rem;
637
+ text-align: center;
638
+ word-break: break-word;
639
+ line-height: 1.3;
640
+ }
641
+ @media (max-width: 600px) {
642
+ .term-modal-scripts-grid {
643
+ grid-template-columns: repeat(3, 1fr);
644
+ }
645
+ }
646
+ /* Help: 虚拟键盘 */
647
+ .term-vkeyboard {
648
+ display: flex;
649
+ flex-direction: column;
650
+ gap: 4px;
651
+ font-size: 0.7rem;
652
+ }
653
+ .term-vkeyboard-row {
654
+ display: flex;
655
+ justify-content: center;
656
+ gap: 3px;
657
+ }
658
+ .term-vkey {
659
+ min-width: 24px;
660
+ height: 28px;
661
+ padding: 0 6px;
662
+ display: inline-flex;
663
+ align-items: center;
664
+ justify-content: center;
665
+ background: rgba(255, 255, 255, 0.08);
666
+ border: 1px solid rgba(255, 255, 255, 0.2);
667
+ border-radius: 4px;
668
+ color: rgba(255, 255, 255, 0.9);
669
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
670
+ cursor: pointer;
671
+ transition: all 0.1s ease;
672
+ user-select: none;
673
+ }
674
+ .term-vkey:hover {
675
+ background: rgba(255, 255, 255, 0.15);
676
+ border-color: rgba(255, 255, 255, 0.35);
677
+ }
678
+ .term-vkey.highlight {
679
+ background: rgba(0, 255, 100, 0.35);
680
+ border-color: rgba(0, 255, 100, 0.7);
681
+ box-shadow: 0 0 12px rgba(0, 255, 100, 0.3);
682
+ }
683
+ .term-vkey.wide { min-width: 36px; }
684
+ .term-vkey.backspace { min-width: 72px; }
685
+ .term-vkey.space { min-width: 120px; }
686
+ .term-vkey.acc { background: rgba(255, 140, 0, 0.25); border-color: rgba(255, 140, 0, 0.5); }
687
+ .term-vkey.acc:hover { background: rgba(255, 140, 0, 0.35); }
688
+ .term-vkeyboard-wrap {
689
+ display: flex;
690
+ flex-wrap: wrap;
691
+ gap: 2rem;
692
+ align-items: stretch;
693
+ }
694
+ .term-vkeyboard-main {
695
+ flex: 1;
696
+ min-width: 0;
697
+ }
698
+ .term-vkeyboard-side {
699
+ display: flex;
700
+ flex-direction: column;
701
+ gap: 6px;
702
+ flex-shrink: 0;
703
+ min-width: 140px;
704
+ }
705
+ .term-vkeyboard-side-block {
706
+ display: flex;
707
+ flex-direction: column;
708
+ gap: 4px;
709
+ margin-bottom: 4px;
710
+ }
711
+ .term-vkeyboard-side-row {
712
+ display: flex;
713
+ gap: 3px;
714
+ }
715
+ .term-vkeyboard-side-block .term-vkey {
716
+ flex: 1;
717
+ min-width: 0;
718
+ }
719
+ .term-vkey.nav-home { background: rgba(66, 133, 244, 0.3); border-color: rgba(66, 133, 244, 0.5); }
720
+ .term-vkey.nav-home:hover { background: rgba(66, 133, 244, 0.4); }
721
+ .term-vkey.nav-end { background: rgba(234, 67, 53, 0.25); border-color: rgba(234, 67, 53, 0.5); }
722
+ .term-vkey.nav-end:hover { background: rgba(234, 67, 53, 0.35); }
723
+ .term-vkeyboard-arrows-wrap {
724
+ display: flex;
725
+ flex-direction: column;
726
+ align-items: center;
727
+ margin-top: 6px;
728
+ }
729
+ .term-vkeyboard-arrows {
730
+ display: grid;
731
+ grid-template: ". u ." 1fr "l d r" 1fr / 1fr 1fr 1fr;
732
+ gap: 2px;
733
+ height: 56px;
734
+ }
735
+ .term-vkeyboard-arrows .arr-u { grid-area: u; }
736
+ .term-vkeyboard-arrows .arr-l { grid-area: l; }
737
+ .term-vkeyboard-arrows .arr-r { grid-area: r; }
738
+ .term-vkeyboard-arrows .arr-d { grid-area: d; }
739
+ .term-vkeyboard-arrows .term-vkey { width: 50px; height: 22px; font-size: 0.65rem; padding: 0; }
740
+ .term-vkeyboard-stats {
741
+ width: 100%;
742
+ margin-top: 0.2rem;
743
+ font-size: 0.75em;
744
+ color: rgba(255, 255, 255, 0.6);
745
+ }
746
+ .term-vkeyboard-stats-label {
747
+ font-size: 0.65rem;
748
+ color: rgba(255, 255, 255, 0.5);
749
+ letter-spacing: 0.1em;
750
+ }
751
+ .term-modal-body.term-modal-keyboard {
752
+ overflow: visible;
753
+ }
754
+ @media (max-width: 900px) {
755
+ .term-sidebar { display: none; }
756
+ }