@midscene/visualizer 0.26.2-beta-20250812091127.0 → 0.26.3-beta-20250813021342.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 (124) hide show
  1. package/dist/es/blank_polyfill.mjs +2 -0
  2. package/dist/es/component/blackboard.css +12 -5
  3. package/dist/es/component/blackboard.mjs +266 -0
  4. package/dist/es/component/color.mjs +35 -0
  5. package/dist/es/component/describer.css +9 -5
  6. package/dist/es/component/describer.mjs +128 -0
  7. package/dist/es/component/env-config.mjs +112 -0
  8. package/dist/es/component/github-star.css +1 -0
  9. package/dist/es/component/github-star.mjs +20 -0
  10. package/dist/es/component/logo.css +5 -3
  11. package/dist/es/component/logo.mjs +20 -0
  12. package/dist/es/component/misc.mjs +54 -0
  13. package/dist/es/component/pixi-loader.mjs +16 -0
  14. package/dist/es/component/player.css +88 -70
  15. package/dist/es/component/player.mjs +628 -0
  16. package/dist/es/component/playground/ConfigSelector.mjs +53 -0
  17. package/dist/es/component/playground/ContextPreview.mjs +39 -0
  18. package/dist/es/component/playground/HistorySelector.mjs +193 -0
  19. package/dist/es/component/playground/PlaygroundResult.mjs +60 -0
  20. package/dist/es/component/playground/PromptInput.mjs +225 -0
  21. package/dist/es/component/playground/ServiceModeControl.mjs +100 -0
  22. package/dist/es/component/playground/index.css +140 -98
  23. package/dist/es/component/playground/playground-constants.mjs +45 -0
  24. package/dist/es/component/playground/playground-utils.mjs +89 -0
  25. package/dist/es/component/playground/useServerValid.mjs +27 -0
  26. package/dist/es/component/playground/useStaticPageAgent.mjs +12 -0
  27. package/dist/es/component/replay-scripts.mjs +271 -0
  28. package/dist/es/component/shiny-text.css +33 -22
  29. package/dist/es/component/shiny-text.mjs +15 -0
  30. package/dist/es/component/store/history.mjs +55 -0
  31. package/dist/es/component/store/store.mjs +128 -0
  32. package/dist/es/icons/close.mjs +19 -0
  33. package/dist/es/icons/history.mjs +30 -0
  34. package/dist/es/icons/magnifying-glass.mjs +39 -0
  35. package/dist/es/icons/setting.mjs +20 -0
  36. package/dist/es/index.mjs +21 -0
  37. package/dist/es/init.mjs +10 -0
  38. package/dist/es/{utils.js → utils.mjs} +51 -75
  39. package/dist/lib/blank_polyfill.js +34 -38
  40. package/dist/lib/component/blackboard.css +12 -5
  41. package/dist/lib/component/blackboard.js +293 -306
  42. package/dist/lib/component/color.js +64 -74
  43. package/dist/lib/component/describer.css +9 -5
  44. package/dist/lib/component/describer.js +158 -198
  45. package/dist/lib/component/env-config.js +142 -147
  46. package/dist/lib/component/github-star.css +1 -0
  47. package/dist/lib/component/github-star.js +51 -62
  48. package/dist/lib/component/logo.css +5 -3
  49. package/dist/lib/component/logo.js +53 -56
  50. package/dist/lib/component/misc.js +85 -84
  51. package/dist/lib/component/pixi-loader.js +49 -80
  52. package/dist/lib/component/player.css +88 -70
  53. package/dist/lib/component/player.js +627 -738
  54. package/dist/lib/component/playground/ConfigSelector.js +91 -92
  55. package/dist/lib/component/playground/ContextPreview.js +80 -72
  56. package/dist/lib/component/playground/HistorySelector.js +234 -197
  57. package/dist/lib/component/playground/PlaygroundResult.js +100 -103
  58. package/dist/lib/component/playground/PromptInput.js +250 -237
  59. package/dist/lib/component/playground/ServiceModeControl.js +124 -124
  60. package/dist/lib/component/playground/index.css +140 -98
  61. package/dist/lib/component/playground/playground-constants.js +97 -73
  62. package/dist/lib/component/playground/playground-types.js +17 -31
  63. package/dist/lib/component/playground/playground-utils.js +140 -168
  64. package/dist/lib/component/playground/useServerValid.js +55 -86
  65. package/dist/lib/component/playground/useStaticPageAgent.js +45 -51
  66. package/dist/lib/component/replay-scripts.js +291 -373
  67. package/dist/lib/component/shiny-text.css +33 -22
  68. package/dist/lib/component/shiny-text.js +46 -57
  69. package/dist/lib/component/store/history.js +58 -64
  70. package/dist/lib/component/store/store.js +132 -128
  71. package/dist/lib/icons/close.js +53 -0
  72. package/dist/lib/icons/history.js +64 -0
  73. package/dist/lib/icons/magnifying-glass.js +73 -0
  74. package/dist/lib/icons/setting.js +54 -0
  75. package/dist/lib/index.js +158 -124
  76. package/dist/lib/init.js +39 -46
  77. package/dist/lib/utils.js +105 -109
  78. package/dist/types/blank_polyfill.d.ts +2 -2
  79. package/dist/types/component/playground/ConfigSelector.d.ts +1 -0
  80. package/dist/types/component/playground/ContextPreview.d.ts +1 -0
  81. package/dist/types/component/playground/HistorySelector.d.ts +1 -0
  82. package/dist/types/component/playground/PlaygroundResult.d.ts +1 -0
  83. package/dist/types/component/playground/PromptInput.d.ts +1 -0
  84. package/dist/types/component/playground/ServiceModeControl.d.ts +1 -0
  85. package/package.json +16 -18
  86. package/dist/es/assets/close.909351c0.svg +0 -4
  87. package/dist/es/assets/history.164a4eab.svg +0 -4
  88. package/dist/es/assets/magnifying-glass.9498e70e.svg +0 -12
  89. package/dist/es/assets/setting.80ab7285.svg +0 -11
  90. package/dist/es/blank_polyfill.js +0 -10
  91. package/dist/es/component/blackboard.js +0 -286
  92. package/dist/es/component/color.js +0 -49
  93. package/dist/es/component/describer.js +0 -173
  94. package/dist/es/component/env-config.js +0 -117
  95. package/dist/es/component/github-star.js +0 -31
  96. package/dist/es/component/logo.js +0 -25
  97. package/dist/es/component/misc.js +0 -63
  98. package/dist/es/component/pixi-loader.js +0 -51
  99. package/dist/es/component/player.js +0 -746
  100. package/dist/es/component/playground/ConfigSelector.js +0 -64
  101. package/dist/es/component/playground/ContextPreview.js +0 -42
  102. package/dist/es/component/playground/HistorySelector.js +0 -168
  103. package/dist/es/component/playground/PlaygroundResult.js +0 -73
  104. package/dist/es/component/playground/PromptInput.js +0 -212
  105. package/dist/es/component/playground/ServiceModeControl.js +0 -100
  106. package/dist/es/component/playground/playground-constants.js +0 -39
  107. package/dist/es/component/playground/playground-types.js +0 -6
  108. package/dist/es/component/playground/playground-utils.js +0 -141
  109. package/dist/es/component/playground/useServerValid.js +0 -58
  110. package/dist/es/component/playground/useStaticPageAgent.js +0 -20
  111. package/dist/es/component/replay-scripts.js +0 -361
  112. package/dist/es/component/shiny-text.js +0 -30
  113. package/dist/es/component/store/history.js +0 -34
  114. package/dist/es/component/store/store.js +0 -99
  115. package/dist/es/index.js +0 -79
  116. package/dist/es/init.js +0 -17
  117. package/dist/index.css +0 -595
  118. package/dist/index.js +0 -1
  119. package/dist/lib/assets/close.909351c0.svg +0 -4
  120. package/dist/lib/assets/history.164a4eab.svg +0 -4
  121. package/dist/lib/assets/magnifying-glass.9498e70e.svg +0 -12
  122. package/dist/lib/assets/setting.80ab7285.svg +0 -11
  123. package/dist/lib/component/common.css +0 -0
  124. /package/dist/es/component/{common.css → playground/playground-types.mjs} +0 -0
package/dist/index.css DELETED
@@ -1,595 +0,0 @@
1
- /* src/component/playground/index.less */
2
- body {
3
- margin: 0;
4
- font-family:
5
- -apple-system,
6
- BlinkMacSystemFont,
7
- "Segoe UI",
8
- "Noto Sans",
9
- Helvetica,
10
- Arial,
11
- sans-serif,
12
- "Apple Color Emoji",
13
- "Segoe UI Emoji";
14
- font-size: 14px;
15
- }
16
- .prompt-input-wrapper {
17
- width: 100%;
18
- }
19
- .prompt-input-wrapper .mode-radio-group-wrapper {
20
- display: flex;
21
- align-items: center;
22
- justify-content: space-between;
23
- }
24
- .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group {
25
- display: flex;
26
- align-items: center;
27
- height: 100%;
28
- }
29
- .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper {
30
- height: 24px;
31
- padding: 0 8px;
32
- line-height: 24px;
33
- border-radius: 11px;
34
- margin-right: 8px;
35
- box-shadow: none;
36
- border: none;
37
- background-color: #F7F7F7;
38
- font-size: 12px;
39
- }
40
- .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper:before {
41
- display: none;
42
- }
43
- .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper:focus-within {
44
- outline: none;
45
- }
46
- .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper.ant-radio-button-wrapper-checked {
47
- background-color: #2B83FF;
48
- border-color: #2B83FF;
49
- color: white;
50
- }
51
- .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper.ant-radio-button-wrapper-checked:hover {
52
- color: #fff;
53
- }
54
- .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper:hover {
55
- color: #2B83FF;
56
- }
57
- .prompt-input-wrapper .mode-radio-group-wrapper .action-icons {
58
- display: flex;
59
- align-items: center;
60
- }
61
- .prompt-input-wrapper .main-side-console-input {
62
- position: relative;
63
- margin-top: 10px;
64
- }
65
- .prompt-input-wrapper .main-side-console-input .main-side-console-input-textarea {
66
- border-radius: 12px;
67
- border: 1px solid #F2F4F7;
68
- background: white;
69
- padding: 12px 16px;
70
- transition: background-color 0.2s ease;
71
- overflow-y: auto;
72
- white-space: pre-wrap;
73
- line-height: 21px;
74
- scrollbar-width: thin;
75
- }
76
- @keyframes hue-shift {
77
- 0% {
78
- filter: hue-rotate(0deg);
79
- }
80
- 100% {
81
- filter: hue-rotate(360deg);
82
- }
83
- }
84
- .prompt-input-wrapper .main-side-console-input .main-side-console-input-textarea:focus-within {
85
- border: 1px solid transparent;
86
- background: linear-gradient(white, white) padding-box, linear-gradient(135deg, #4285f4 0%, #0066FF 25%, #7B02C5 50%, #ea4335 75%, #ff7043 100%) border-box;
87
- }
88
- .prompt-input-wrapper .main-side-console-input .main-side-console-input-textarea::-webkit-scrollbar {
89
- width: 6px;
90
- }
91
- .prompt-input-wrapper .main-side-console-input .main-side-console-input-textarea::-webkit-scrollbar-thumb {
92
- background-color: rgba(0, 0, 0, 0.2);
93
- border-radius: 3px;
94
- }
95
- .prompt-input-wrapper .main-side-console-input.loading .main-side-console-input-textarea {
96
- border: 1px solid transparent;
97
- background: linear-gradient(white, white) padding-box, linear-gradient(135deg, #4285f4 0%, #0066FF 25%, #7B02C5 50%, #ea4335 75%, #ff7043 100%) border-box;
98
- animation: hue-shift 5s linear infinite;
99
- }
100
- .prompt-input-wrapper .main-side-console-input .ant-form-item-control-input-content {
101
- border: 3px solid transparent;
102
- border-radius: 14px;
103
- z-index: 999;
104
- }
105
- .prompt-input-wrapper .main-side-console-input:focus-within .ant-form-item-control-input-content {
106
- border-color: rgba(43, 131, 255, 0.16);
107
- }
108
- .prompt-input-wrapper .main-side-console-input.disabled .form-controller-wrapper {
109
- background-color: transparent;
110
- }
111
- .prompt-input-wrapper .ant-input {
112
- padding-bottom: 40px;
113
- }
114
- .prompt-input-wrapper .form-controller-wrapper {
115
- position: absolute;
116
- display: flex;
117
- flex-direction: row;
118
- justify-content: flex-end;
119
- width: calc(100% - 32px);
120
- box-sizing: border-box;
121
- align-items: flex-end;
122
- gap: 8px;
123
- background-color: #FFF;
124
- left: 16px;
125
- bottom: 0.5px;
126
- padding: 12px 0;
127
- line-height: 32px;
128
- transition: background-color 0.2s ease;
129
- }
130
- .prompt-input-wrapper .settings-wrapper {
131
- display: flex;
132
- flex-direction: row;
133
- gap: 2px;
134
- color: #777;
135
- flex-wrap: wrap;
136
- }
137
- .prompt-input-wrapper .settings-wrapper.settings-wrapper-hover {
138
- color: #3b3b3b;
139
- }
140
- .selector-trigger {
141
- width: 24px;
142
- height: 24px;
143
- cursor: pointer;
144
- transition: all 0.2s ease;
145
- }
146
- .selector-trigger .action-icon {
147
- font-size: 14px;
148
- color: rgba(0, 0, 0, 0.85);
149
- transition: all 0.2s;
150
- }
151
- .selector-trigger .action-icon:hover {
152
- color: #2B83FF;
153
- }
154
- .history-modal-container {
155
- height: 70vh;
156
- display: flex;
157
- flex-direction: column;
158
- border-radius: 12px 12px 0 0;
159
- overflow: hidden;
160
- }
161
- .history-modal-container .history-modal-header {
162
- display: flex;
163
- justify-content: space-between;
164
- align-items: center;
165
- height: 48px;
166
- line-height: 48px;
167
- padding: 0 25px;
168
- }
169
- .history-modal-container .history-modal-header .close-button {
170
- margin-right: -4px;
171
- padding: 4px;
172
- display: flex;
173
- align-items: center;
174
- justify-content: center;
175
- }
176
- .history-modal-container .history-modal-header .close-button .anticon {
177
- font-size: 18px;
178
- color: #999999;
179
- }
180
- .history-modal-container .history-modal-header .close-button:hover .anticon {
181
- color: #666666;
182
- }
183
- .history-modal-container .history-search-section {
184
- padding: 16px 20px;
185
- background: #ffffff;
186
- }
187
- .history-modal-container .history-search-section .search-input-wrapper {
188
- display: flex;
189
- align-items: center;
190
- gap: 12px;
191
- color: rgba(0, 0, 0, 0.25);
192
- }
193
- .history-modal-container .history-search-section .search-input-wrapper .search-input {
194
- flex: 1 1;
195
- height: 36px;
196
- border-radius: 16px;
197
- background: #f1f2f3;
198
- border: none;
199
- }
200
- .history-modal-container .history-search-section .search-input-wrapper .search-input .ant-input {
201
- background: transparent;
202
- border: none;
203
- box-shadow: none;
204
- }
205
- .history-modal-container .history-search-section .search-input-wrapper .search-input:hover,
206
- .history-modal-container .history-search-section .search-input-wrapper .search-input:focus-within {
207
- border-color: #d9d9d9;
208
- background: #ffffff;
209
- }
210
- .history-modal-container .history-search-section .search-input-wrapper .clear-button {
211
- color: #1890ff;
212
- padding: 0;
213
- height: auto;
214
- }
215
- .history-modal-container .history-search-section .search-input-wrapper .clear-button:hover {
216
- color: #40a9ff;
217
- }
218
- .history-modal-container .history-content {
219
- flex: 1 1;
220
- overflow-y: auto;
221
- padding: 0 25px 25px 25px;
222
- }
223
- .history-modal-container .history-content .history-group {
224
- margin-bottom: 10px;
225
- }
226
- .history-modal-container .history-content .history-group .history-group-title {
227
- font-size: 12px;
228
- color: rgba(0, 0, 0, 0.45);
229
- height: 40px;
230
- line-height: 40px;
231
- font-weight: 400;
232
- }
233
- .history-modal-container .history-content .history-group .history-item {
234
- cursor: pointer;
235
- height: 40px;
236
- line-height: 40px;
237
- font-size: 14px;
238
- color: rgba(0, 0, 0, 0.85);
239
- overflow: hidden;
240
- white-space: nowrap;
241
- text-overflow: ellipsis;
242
- }
243
- .history-modal-container .history-content .history-group .history-item:hover {
244
- background: #f2f4f7;
245
- padding: 0 8px;
246
- margin: 0 -8px;
247
- }
248
- .history-modal-container .history-content .no-results {
249
- text-align: center;
250
- padding: 40px 20px;
251
- color: #999999;
252
- }
253
- .ant-modal-wrap .ant-modal-content {
254
- animation: slideUpFromBottom 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
255
- }
256
- @keyframes slideUpFromBottom {
257
- 0% {
258
- transform: translateY(100%);
259
- opacity: 0;
260
- }
261
- 100% {
262
- transform: translateY(0);
263
- opacity: 1;
264
- }
265
- }
266
- .result-wrapper {
267
- display: flex;
268
- height: 100%;
269
- justify-content: center;
270
- margin: 4px 0;
271
- }
272
- .result-wrapper .loading-container {
273
- text-align: center;
274
- }
275
- .result-wrapper .loading-container .loading-progress-text {
276
- margin-top: 8px;
277
- color: #888;
278
- font-size: 12px;
279
- }
280
- .result-wrapper pre {
281
- margin: 4px 0;
282
- margin: 0;
283
- white-space: pre-wrap;
284
- text-wrap: unset;
285
- word-wrap: break-word;
286
- overflow-wrap: break-word;
287
- background: #F2F4F7;
288
- border-radius: 8px;
289
- padding: 14px;
290
- overflow: scroll;
291
- }
292
-
293
- /* src/component/player.less */
294
- .player-container {
295
- width: 100%;
296
- height: 100%;
297
- max-width: 100%;
298
- max-height: 100%;
299
- padding: 12px;
300
- background: #F2F4F7;
301
- box-sizing: border-box;
302
- border: 1px solid #F2F4F7;
303
- border-radius: 8px;
304
- line-height: 100%;
305
- margin: 0 auto;
306
- display: flex;
307
- flex-direction: column;
308
- overflow: visible;
309
- min-height: 300px;
310
- position: relative;
311
- }
312
- .player-container[data-fit-mode=height] {
313
- background: #fff;
314
- }
315
- .player-container[data-fit-mode=height] .canvas-container {
316
- background-color: #F2F4F7;
317
- }
318
- .player-container .canvas-container {
319
- flex: 0 0 auto;
320
- min-height: 200px;
321
- width: 100%;
322
- display: flex;
323
- justify-content: center;
324
- align-items: center;
325
- overflow: hidden;
326
- position: relative;
327
- background-color: #fff;
328
- border-top-right-radius: 16px;
329
- border-top-left-radius: 16px;
330
- aspect-ratio: var(--canvas-aspect-ratio, 16/9);
331
- }
332
- .player-container .canvas-container canvas {
333
- width: 100%;
334
- height: auto;
335
- max-width: 100%;
336
- max-height: 100%;
337
- box-sizing: border-box;
338
- display: block;
339
- margin: 0 auto;
340
- object-fit: contain;
341
- border: none;
342
- }
343
- .player-container .canvas-container[data-fit-mode=height] {
344
- flex: 1 1 auto;
345
- aspect-ratio: unset;
346
- min-height: 0;
347
- height: auto;
348
- }
349
- .player-container .canvas-container[data-fit-mode=height] canvas {
350
- height: 100%;
351
- width: auto;
352
- max-width: 100%;
353
- max-height: 100%;
354
- }
355
- .player-container .canvas-container[data-fit-mode=width] {
356
- aspect-ratio: var(--canvas-aspect-ratio, 16/9);
357
- }
358
- .player-container .canvas-container[data-fit-mode=width] canvas {
359
- width: 100%;
360
- height: auto;
361
- }
362
- .player-container .player-timeline-wrapper {
363
- width: 100%;
364
- height: 4px;
365
- flex: none;
366
- margin-bottom: 2px;
367
- position: relative;
368
- }
369
- .player-container .player-timeline {
370
- width: 100%;
371
- height: 4px;
372
- background: #666;
373
- position: relative;
374
- flex-shrink: 0;
375
- }
376
- .player-container .player-timeline .player-timeline-progress {
377
- transition-timing-function: linear;
378
- position: absolute;
379
- top: 0;
380
- left: 0;
381
- height: 4px;
382
- background: #2B83FF;
383
- }
384
- .player-container .player-tools-wrapper {
385
- width: 100%;
386
- height: 72px;
387
- flex: none;
388
- position: relative;
389
- padding-top: 15px;
390
- padding-bottom: 15px;
391
- padding-left: 16px;
392
- padding-right: 16px;
393
- box-sizing: border-box;
394
- }
395
- .player-container .player-tools {
396
- width: 100%;
397
- height: 42px;
398
- max-width: 100%;
399
- overflow: hidden;
400
- color: #000;
401
- font-size: 14px;
402
- box-sizing: border-box;
403
- display: flex;
404
- flex-direction: row;
405
- justify-content: space-between;
406
- flex-shrink: 0;
407
- }
408
- .player-container .player-tools .ant-spin {
409
- color: #333;
410
- }
411
- .player-container .player-tools .player-control {
412
- flex-grow: 1;
413
- display: flex;
414
- flex-direction: row;
415
- align-items: center;
416
- overflow: hidden;
417
- }
418
- .player-container .player-tools .status-icon {
419
- transition: 0.2s;
420
- width: 32px;
421
- height: 32px;
422
- border-radius: 8px;
423
- display: flex;
424
- align-items: center;
425
- justify-content: center;
426
- flex-shrink: 0;
427
- margin-left: 10px;
428
- }
429
- .player-container .player-tools .status-icon:hover {
430
- cursor: pointer;
431
- background: #F0f0f0;
432
- }
433
- .player-container .player-tools .status-text {
434
- flex-grow: 1;
435
- flex-shrink: 1;
436
- min-width: 0;
437
- overflow: hidden;
438
- position: relative;
439
- height: 100%;
440
- display: flex;
441
- flex-direction: column;
442
- justify-content: space-between;
443
- width: 0;
444
- }
445
- .player-container .player-tools .title {
446
- font-weight: 600;
447
- }
448
- .player-container .player-tools .title,
449
- .player-container .player-tools .subtitle {
450
- text-overflow: ellipsis;
451
- overflow: hidden;
452
- white-space: nowrap;
453
- width: 100%;
454
- }
455
- .player-container .player-tools .player-tools-item {
456
- height: 100%;
457
- display: flex;
458
- flex-direction: column;
459
- justify-content: center;
460
- }
461
-
462
- /* src/component/logo.less */
463
- .logo img {
464
- height: 30px;
465
- line-height: 30px;
466
- vertical-align: baseline;
467
- vertical-align: -webkit-baseline-middle;
468
- }
469
- .logo-with-star-wrapper {
470
- display: flex;
471
- flex-direction: row;
472
- justify-content: space-between;
473
- }
474
-
475
- /* src/component/blackboard.less */
476
- .blackboard .footer {
477
- color: #aaa;
478
- }
479
- .blackboard ul {
480
- padding-left: 0px;
481
- }
482
- .blackboard li {
483
- list-style: none;
484
- }
485
- .blackboard .bottom-tip {
486
- height: 30px;
487
- }
488
- .blackboard .bottom-tip-item {
489
- max-width: 500px;
490
- color: #AAA;
491
- text-overflow: ellipsis;
492
- word-wrap: break-word;
493
- }
494
- .blackboard-filter {
495
- margin: 10px 0;
496
- }
497
- .blackboard-main-content canvas {
498
- width: 100%;
499
- border: 1px solid #888;
500
- box-sizing: border-box;
501
- }
502
-
503
- /* src/component/shiny-text.less */
504
- .shiny-text {
505
- position: relative;
506
- display: inline-block;
507
- background-size: 300% auto;
508
- -webkit-background-clip: text;
509
- background-clip: text;
510
- color: transparent;
511
- font-weight: 600;
512
- letter-spacing: 0.5px;
513
- text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
514
- overflow: hidden;
515
- animation: textGradient 8s ease infinite;
516
- background-image: linear-gradient(45deg, #2b83ff, #6a11cb, #2575fc, #4481eb);
517
- }
518
- .shiny-text::after {
519
- content: "";
520
- position: absolute;
521
- top: -10%;
522
- left: -150%;
523
- width: 120%;
524
- height: 120%;
525
- background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 10%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.1) 90%, rgba(255, 255, 255, 0) 100%);
526
- transform: skewX(-20deg) translateY(0);
527
- animation: shine var(--animation-duration, 5s) cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
528
- z-index: 1;
529
- pointer-events: none;
530
- }
531
- .shiny-text.disabled {
532
- animation: none;
533
- background: #2b83ff;
534
- -webkit-background-clip: text;
535
- background-clip: text;
536
- }
537
- .shiny-text.disabled::after {
538
- animation: none;
539
- display: none;
540
- }
541
- @keyframes shine {
542
- 0% {
543
- left: -150%;
544
- opacity: 0.7;
545
- }
546
- 20% {
547
- opacity: 1;
548
- }
549
- 80% {
550
- opacity: 1;
551
- }
552
- 100% {
553
- left: 250%;
554
- opacity: 0.7;
555
- }
556
- }
557
- @keyframes textGradient {
558
- 0% {
559
- background-position: 0% 50%;
560
- }
561
- 50% {
562
- background-position: 100% 50%;
563
- }
564
- 100% {
565
- background-position: 0% 50%;
566
- }
567
- }
568
-
569
- /* src/component/github-star.less */
570
- .github-star {
571
- height: 22px;
572
- }
573
-
574
- /* src/component/describer.less */
575
- .image-describer {
576
- position: relative;
577
- }
578
- .image-describer .describe-text {
579
- box-sizing: border-box;
580
- position: absolute;
581
- background: #000;
582
- width: 100%;
583
- height: 30px;
584
- left: 0;
585
- bottom: 0;
586
- color: #FFF;
587
- font-size: 12px;
588
- padding: 10px;
589
- }
590
- .image-describer .describe-text.success {
591
- background: #047704;
592
- }
593
- .image-describer .describe-text.error {
594
- background: #870707;
595
- }