@jjlmoya/utils-hardware 1.12.0 → 1.14.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.
@@ -0,0 +1,400 @@
1
+ .pt-wrapper {
2
+ width: 100%;
3
+ max-width: 80rem;
4
+ margin: 0 auto;
5
+ padding: 1rem;
6
+ color: var(--pt-text);
7
+ }
8
+
9
+ .pt-dashboard {
10
+ background: var(--pt-surface);
11
+ border-radius: 1.5rem;
12
+ padding: 2rem;
13
+ box-shadow: 0 20px 25px -5px var(--pt-shadow);
14
+ border: 1px solid var(--pt-border);
15
+ transition: all 0.5s ease;
16
+ }
17
+
18
+ .pt-grid {
19
+ display: grid;
20
+ grid-template-columns: 1fr 1fr;
21
+ gap: 3rem;
22
+ align-items: center;
23
+ }
24
+
25
+ @media (max-width: 640px) {
26
+ .pt-grid {
27
+ grid-template-columns: 1fr;
28
+ }
29
+ }
30
+
31
+ .pt-badge-container {
32
+ margin-bottom: 1.5rem;
33
+ }
34
+
35
+ .pt-badge {
36
+ display: inline-flex;
37
+ align-items: center;
38
+ gap: 0.5rem;
39
+ padding: 0.25rem 0.75rem;
40
+ border-radius: 9999px;
41
+ background-color: var(--pt-accent-bg);
42
+ color: var(--pt-accent-text);
43
+ font-size: 0.75rem;
44
+ font-weight: 700;
45
+ letter-spacing: 0.05em;
46
+ text-transform: uppercase;
47
+ }
48
+
49
+ .pt-badge-icon {
50
+ width: 1rem;
51
+ height: 1rem;
52
+ }
53
+
54
+ .pt-title {
55
+ font-size: 2.25rem;
56
+ font-weight: 900;
57
+ letter-spacing: -0.02em;
58
+ margin-bottom: 1rem;
59
+ line-height: 1.2;
60
+ }
61
+
62
+ @media (min-width: 768px) {
63
+ .pt-title {
64
+ font-size: 3rem;
65
+ }
66
+ }
67
+
68
+ .pt-description {
69
+ font-size: 1.125rem;
70
+ color: var(--pt-text-muted);
71
+ line-height: 1.625;
72
+ margin-bottom: 1.5rem;
73
+ }
74
+
75
+ .pt-buttons {
76
+ display: flex;
77
+ gap: 1rem;
78
+ margin-bottom: 1.5rem;
79
+ flex-wrap: wrap;
80
+ }
81
+
82
+ @media (max-width: 640px) {
83
+ .pt-buttons {
84
+ flex-direction: column;
85
+ }
86
+ }
87
+
88
+ .pt-btn {
89
+ flex: 1;
90
+ display: flex;
91
+ align-items: center;
92
+ justify-content: center;
93
+ gap: 0.75rem;
94
+ padding: 1rem 2rem;
95
+ border-radius: 0.75rem;
96
+ font-weight: 700;
97
+ border: none;
98
+ cursor: pointer;
99
+ transition: all 0.3s ease;
100
+ min-width: auto;
101
+ }
102
+
103
+ .pt-btn-primary {
104
+ background-color: var(--pt-accent);
105
+ color: white;
106
+ }
107
+
108
+ .pt-btn-primary:hover {
109
+ background-color: var(--pt-accent-hover);
110
+ box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.3);
111
+ }
112
+
113
+ .pt-btn-secondary {
114
+ background-color: var(--pt-surface-alt);
115
+ color: var(--pt-text);
116
+ border: 2px solid var(--pt-border);
117
+ }
118
+
119
+ .pt-btn-secondary:hover {
120
+ border-color: #10b981;
121
+ color: #059669;
122
+ }
123
+
124
+ .pt-btn-icon {
125
+ width: 1.5rem;
126
+ height: 1.5rem;
127
+ }
128
+
129
+ .pt-shortcuts {
130
+ display: flex;
131
+ align-items: center;
132
+ gap: 1rem;
133
+ font-size: 0.75rem;
134
+ color: var(--pt-text-muted);
135
+ flex-wrap: wrap;
136
+ }
137
+
138
+ .pt-shortcut {
139
+ display: flex;
140
+ align-items: center;
141
+ gap: 0.25rem;
142
+ }
143
+
144
+ .pt-kbd {
145
+ background-color: var(--pt-kbd-bg);
146
+ padding: 0.125rem 0.375rem;
147
+ border-radius: 0.25rem;
148
+ border: 1px solid var(--pt-border);
149
+ font-size: 0.75rem;
150
+ }
151
+
152
+ .pt-monitor-wrapper {
153
+ position: relative;
154
+ display: flex;
155
+ justify-content: center;
156
+ align-items: center;
157
+ cursor: pointer;
158
+ min-height: 250px;
159
+ }
160
+
161
+ .pt-monitor {
162
+ position: relative;
163
+ aspect-ratio: 16 / 9;
164
+ width: 100%;
165
+ max-width: 500px;
166
+ background: var(--pt-monitor-body);
167
+ border-radius: 1rem;
168
+ border: 4px solid var(--pt-monitor-body);
169
+ box-shadow: 0 25px 50px -12px var(--pt-shadow);
170
+ display: flex;
171
+ align-items: center;
172
+ justify-content: center;
173
+ overflow: hidden;
174
+ }
175
+
176
+ .pt-monitor-screen-wrapper {
177
+ position: relative;
178
+ width: 100%;
179
+ height: 100%;
180
+ display: flex;
181
+ border-radius: 0.5rem;
182
+ overflow: hidden;
183
+ }
184
+
185
+ .pt-monitor-shine {
186
+ position: absolute;
187
+ inset: 0;
188
+ background: linear-gradient(to top right, rgba(255, 255, 255, 0.05), transparent);
189
+ pointer-events: none;
190
+ z-index: 10;
191
+ border-radius: 0.5rem;
192
+ }
193
+
194
+ .pt-monitor-screen {
195
+ width: 100%;
196
+ height: 100%;
197
+ display: flex;
198
+ transition: background-color 0.5s ease;
199
+ background-color: #000;
200
+ }
201
+
202
+ .pt-monitor-section {
203
+ flex: 1;
204
+ opacity: 0.9;
205
+ }
206
+
207
+ .pt-fixer-preview {
208
+ position: absolute;
209
+ width: 3rem;
210
+ height: 3rem;
211
+ background: white;
212
+ animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
213
+ box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
214
+ z-index: 20;
215
+ display: none;
216
+ }
217
+
218
+ @keyframes pulse-glow {
219
+ 0%,
220
+ 100% {
221
+ opacity: 1;
222
+ }
223
+ 50% {
224
+ opacity: 0.7;
225
+ }
226
+ }
227
+
228
+ .pt-monitor-stand {
229
+ position: absolute;
230
+ bottom: -1rem;
231
+ left: 50%;
232
+ transform: translateX(-50%);
233
+ width: 6rem;
234
+ height: 3rem;
235
+ background: var(--pt-monitor-body);
236
+ border-radius: 0 0 0.75rem 0.75rem;
237
+ z-index: -1;
238
+ }
239
+
240
+ .pt-monitor-base {
241
+ position: absolute;
242
+ bottom: -1.25rem;
243
+ left: 50%;
244
+ transform: translateX(-50%);
245
+ width: 12rem;
246
+ height: 1rem;
247
+ background: var(--pt-monitor-screen);
248
+ border-radius: 9999px;
249
+ margin-top: -1.25rem;
250
+ }
251
+
252
+ .pt-overlay-hidden {
253
+ position: fixed;
254
+ inset: 0;
255
+ z-index: 50;
256
+ background-color: black;
257
+ cursor: none;
258
+ display: none;
259
+ }
260
+
261
+ .pt-overlay-active {
262
+ display: flex;
263
+ }
264
+
265
+ .pt-overlay-bg {
266
+ position: absolute;
267
+ inset: 0;
268
+ background-color: black;
269
+ transition: background-color 0s;
270
+ }
271
+
272
+ .pt-fixer-box {
273
+ position: fixed;
274
+ inset: 0;
275
+ z-index: 55;
276
+ background-color: white;
277
+ cursor: none;
278
+ overflow: hidden;
279
+ display: none;
280
+ }
281
+
282
+ .theme-dark .pt-fixer-box {
283
+ background-color: var(--pt-surface);
284
+ }
285
+
286
+ .pt-fixer-box:not(.pt-fixer-hidden) {
287
+ display: flex;
288
+ }
289
+
290
+ .pt-fixer-hidden {
291
+ display: none;
292
+ }
293
+
294
+ .pt-noise-canvas {
295
+ position: absolute;
296
+ inset: 0;
297
+ width: 100%;
298
+ height: 100%;
299
+ }
300
+
301
+ .pt-close-fixer {
302
+ position: absolute;
303
+ top: 0.5rem;
304
+ right: 0.5rem;
305
+ padding: 0.5rem;
306
+ opacity: 0;
307
+ transition: opacity 0.3s ease;
308
+ background: rgba(0, 0, 0, 0.5);
309
+ color: white;
310
+ border: none;
311
+ cursor: pointer;
312
+ z-index: 60;
313
+ display: flex;
314
+ align-items: center;
315
+ justify-content: center;
316
+ }
317
+
318
+ .pt-fixer-box:hover .pt-close-fixer {
319
+ opacity: 1;
320
+ }
321
+
322
+ .pt-close-fixer svg {
323
+ width: 1rem;
324
+ height: 1rem;
325
+ }
326
+
327
+ .pt-controls {
328
+ position: absolute;
329
+ bottom: 3rem;
330
+ left: 50%;
331
+ transform: translateX(-50%);
332
+ background: rgba(15, 23, 42, 0.8);
333
+ backdrop-filter: blur(0.5rem);
334
+ border: 1px solid rgba(255, 255, 255, 0.1);
335
+ padding: 1rem;
336
+ border-radius: 1rem;
337
+ display: flex;
338
+ align-items: center;
339
+ gap: 1rem;
340
+ transition: opacity 0.3s ease;
341
+ opacity: 0;
342
+ pointer-events: none;
343
+ }
344
+
345
+ .pt-controls-visible {
346
+ opacity: 1;
347
+ pointer-events: auto;
348
+ }
349
+
350
+ .pt-color-buttons {
351
+ display: flex;
352
+ gap: 0.5rem;
353
+ }
354
+
355
+ .pt-color-btn {
356
+ width: 2.5rem;
357
+ height: 2.5rem;
358
+ border-radius: 9999px;
359
+ border: 2px solid rgba(255, 255, 255, 0.2);
360
+ cursor: pointer;
361
+ transition: all 0.3s ease;
362
+ }
363
+
364
+ .pt-color-btn:hover {
365
+ transform: scale(1.1);
366
+ box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
367
+ }
368
+
369
+ .pt-divider {
370
+ width: 1px;
371
+ height: 2rem;
372
+ background-color: rgba(255, 255, 255, 0.2);
373
+ }
374
+
375
+ .pt-control-btn {
376
+ padding: 0.5rem;
377
+ border-radius: 0.5rem;
378
+ background: transparent;
379
+ color: white;
380
+ border: none;
381
+ cursor: pointer;
382
+ transition: all 0.3s ease;
383
+ display: flex;
384
+ align-items: center;
385
+ justify-content: center;
386
+ }
387
+
388
+ .pt-control-btn:hover {
389
+ color: #4ade80;
390
+ background: rgba(255, 255, 255, 0.1);
391
+ }
392
+
393
+ .pt-control-btn-exit:hover {
394
+ color: #ef4444;
395
+ }
396
+
397
+ .pt-control-btn svg {
398
+ width: 1.5rem;
399
+ height: 1.5rem;
400
+ }