@jjlmoya/utils-hardware 1.14.0 → 1.15.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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jjlmoya/utils-hardware",
3
- "version": "1.14.0",
3
+ "version": "1.15.0",
4
4
  "type": "module",
5
5
  "main": "./src/index.ts",
6
6
  "types": "./src/index.ts",
@@ -1,7 +1,94 @@
1
1
  .bh-wrapper {
2
- width: 100%;
3
- color: var(--bh-text);
4
- }
2
+ --bh-accent: #10b981;
3
+ --bh-warn: #f59e0b;
4
+ --bh-danger: #f43f5e;
5
+ --bh-blue: #3b82f6;
6
+ --bh-surface: #fff;
7
+ --bh-surface-alt: #f8fafc;
8
+ --bh-surface-dark: #020617;
9
+ --bh-border: #e2e8f0;
10
+ --bh-text: #0f172a;
11
+ --bh-text-muted: #64748b;
12
+ --bh-text-faint: #94a3b8;
13
+
14
+ width: 100%;
15
+ color: var(--bh-text);
16
+ }
17
+
18
+ .theme-dark .bh-wrapper {
19
+ --bh-surface: #09090b;
20
+ --bh-surface-alt: #18181b;
21
+ --bh-border: #27272a;
22
+ --bh-text: #fafafa;
23
+ --bh-text-muted: #a1a1aa;
24
+ --bh-text-faint: #52525b;
25
+ }
26
+
27
+ .bh-status-card[data-status="excelente"] {
28
+ background: rgba(16, 185, 129, 0.08);
29
+ border-color: rgba(16, 185, 129, 0.2);
30
+ color: #065f46;
31
+ }
32
+
33
+ .theme-dark .bh-status-card[data-status="excelente"] {
34
+ color: #34d399;
35
+ }
36
+
37
+ .bh-status-card[data-status="bueno"] {
38
+ background: rgba(59, 130, 246, 0.08);
39
+ border-color: rgba(59, 130, 246, 0.2);
40
+ color: #1e40af;
41
+ }
42
+
43
+ .theme-dark .bh-status-card[data-status="bueno"] {
44
+ color: #93c5fd;
45
+ }
46
+
47
+ .bh-status-card[data-status="regular"] {
48
+ background: rgba(245, 158, 11, 0.08);
49
+ border-color: rgba(245, 158, 11, 0.2);
50
+ color: #92400e;
51
+ }
52
+
53
+ .theme-dark .bh-status-card[data-status="regular"] {
54
+ color: #fcd34d;
55
+ }
56
+
57
+ .bh-status-card[data-status="critico"] {
58
+ background: rgba(244, 63, 94, 0.08);
59
+ border-color: rgba(244, 63, 94, 0.2);
60
+ color: #9f1239;
61
+ }
62
+
63
+ .theme-dark .bh-status-card[data-status="critico"] {
64
+ color: #fda4af;
65
+ }
66
+
67
+ .bh-rec {
68
+ display: flex;
69
+ gap: 0.5rem;
70
+ align-items: flex-start;
71
+ opacity: 0.85;
72
+ }
73
+
74
+ .bh-rec-dot {
75
+ flex-shrink: 0;
76
+ width: 0.25rem;
77
+ height: 0.25rem;
78
+ border-radius: 9999px;
79
+ background: currentcolor;
80
+ margin-top: 0.5rem;
81
+ }
82
+
83
+ .bh-rec p {
84
+ margin: 0;
85
+ font-size: 0.75rem;
86
+ line-height: 1.5;
87
+ }
88
+
89
+ body.is-widget .bh-wrapper {
90
+ padding: 0;
91
+ }
5
92
 
6
93
  .bh-grid {
7
94
  display: grid;
@@ -1,10 +1,37 @@
1
1
  .pt-wrapper {
2
- width: 100%;
3
- max-width: 80rem;
4
- margin: 0 auto;
5
- padding: 1rem;
6
- color: var(--pt-text);
7
- }
2
+ --pt-accent: #4f46e5;
3
+ --pt-accent-hover: #4338ca;
4
+ --pt-accent-bg: #e0e7ff;
5
+ --pt-accent-text: #4338ca;
6
+ --pt-surface: #fff;
7
+ --pt-surface-alt: #f8fafc;
8
+ --pt-border: #e2e8f0;
9
+ --pt-text: #0f172a;
10
+ --pt-text-muted: #64748b;
11
+ --pt-kbd-bg: #f1f5f9;
12
+ --pt-monitor-body: #1e293b;
13
+ --pt-monitor-screen: #020617;
14
+ --pt-shadow: rgba(0, 0, 0, 0.1);
15
+
16
+ width: 100%;
17
+ max-width: 80rem;
18
+ margin: 0 auto;
19
+ padding: 1rem;
20
+ color: var(--pt-text);
21
+ }
22
+
23
+ .theme-dark .pt-wrapper {
24
+ --pt-surface: #0f172a;
25
+ --pt-surface-alt: #1e293b;
26
+ --pt-border: #334155;
27
+ --pt-text: #f1f5f9;
28
+ --pt-text-muted: #94a3b8;
29
+ --pt-kbd-bg: #1e293b;
30
+ --pt-accent-bg: rgba(79, 70, 229, 0.3);
31
+ --pt-accent-text: #a5b4fc;
32
+ --pt-monitor-body: #334155;
33
+ --pt-monitor-screen: #1e293b;
34
+ }
8
35
 
9
36
  .pt-dashboard {
10
37
  background: var(--pt-surface);
@@ -1,7 +1,92 @@
1
1
  .tm-wrapper {
2
- width: 100%;
3
- color: var(--tm-text);
4
- }
2
+ --tm-accent: #4f46e5;
3
+ --tm-accent-glow: rgba(79, 70, 229, 0.4);
4
+ --tm-surface: #fff;
5
+ --tm-surface-alt: #f8fafc;
6
+ --tm-surface-dark: #020617;
7
+ --tm-border: #e2e8f0;
8
+ --tm-text: #0f172a;
9
+ --tm-text-muted: #64748b;
10
+ --tm-btn-bg: #f1f5f9;
11
+ --tm-btn-border: #cbd5e1;
12
+ --tm-active: #0ea5e9;
13
+ --tm-active-glow: rgba(14, 165, 233, 0.5);
14
+ --tm-success: #10b981;
15
+ --tm-danger: #f43f5e;
16
+ --tm-kb-bg: #1e293b;
17
+ --tm-kb-border: #334155;
18
+ --tm-stick-base: #475569;
19
+ --tm-stick-cap: #334155;
20
+ --tm-stick-border: #64748b;
21
+
22
+ width: 100%;
23
+ color: var(--tm-text);
24
+ }
25
+
26
+ .theme-dark .tm-wrapper {
27
+ --tm-surface: #0f172a;
28
+ --tm-surface-alt: #1e293b;
29
+ --tm-border: #334155;
30
+ --tm-text: #f1f5f9;
31
+ --tm-text-muted: #94a3b8;
32
+ --tm-btn-bg: #1e293b;
33
+ --tm-btn-border: #475569;
34
+ --tm-kb-bg: #020617;
35
+ --tm-kb-border: #1e293b;
36
+ --tm-stick-base: #0f172a;
37
+ --tm-stick-cap: #475569;
38
+ --tm-stick-border: #334155;
39
+ }
40
+
41
+ body.is-widget .tm-wrapper {
42
+ padding: 0;
43
+ }
44
+
45
+ .tm-active-btn {
46
+ background-color: var(--tm-active);
47
+ border-color: var(--tm-active);
48
+ color: white;
49
+ box-shadow: 0 0 18px var(--tm-active-glow), 0 0 36px var(--tm-active-glow);
50
+ transform: scale(0.88);
51
+ }
52
+
53
+ .tm-active-dpad {
54
+ background-color: var(--tm-active);
55
+ box-shadow: 0 0 14px var(--tm-active-glow);
56
+ }
57
+
58
+ .tm-active-stick-cap {
59
+ background-color: var(--tm-active);
60
+ border-color: #7dd3fc;
61
+ box-shadow: 0 0 18px var(--tm-active-glow);
62
+ }
63
+
64
+ .tm-target-pop {
65
+ animation: tm-pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
66
+ }
67
+
68
+ @keyframes tm-pop {
69
+ 0% {
70
+ transform: scale(0) rotate(-10deg);
71
+ opacity: 0;
72
+ }
73
+
74
+ 100% {
75
+ transform: scale(1) rotate(0deg);
76
+ opacity: 1;
77
+ }
78
+ }
79
+
80
+ .tm-shake {
81
+ animation: tm-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
82
+ }
83
+
84
+ @keyframes tm-shake {
85
+ 10%, 90% { transform: translate3d(-1px, 0, 0); }
86
+ 20%, 80% { transform: translate3d(2px, 0, 0); }
87
+ 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
88
+ 40%, 60% { transform: translate3d(4px, 0, 0); }
89
+ }
5
90
 
6
91
  .tm-container {
7
92
  max-width: 56rem;
@@ -1,8 +1,63 @@
1
+ .pv-status-header.pv-connected {
2
+ background: rgba(16, 185, 129, 0.1);
3
+ border-color: rgba(16, 185, 129, 0.2);
4
+ box-shadow: inset 0 0 20px rgba(16, 185, 129, 0.1);
5
+ }
6
+
7
+ .pv-status-header.pv-connected .pv-status-avatar {
8
+ background: #10b981;
9
+ color: white;
10
+ box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
11
+ animation: pv-bounce-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
12
+ }
13
+
14
+ .pv-status-header.pv-connected .pv-indicator {
15
+ background: #10b981;
16
+ box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
17
+ }
18
+
19
+ .pv-tab-btn.pv-active {
20
+ background: var(--pv-surface);
21
+ color: var(--pv-accent);
22
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.07);
23
+ }
24
+
25
+ .pv-preset-card.pv-vibrating {
26
+ animation: pv-card-shake 0.1s infinite;
27
+ background: var(--pv-accent);
28
+ color: white;
29
+ border-color: var(--pv-accent);
30
+ }
31
+
32
+ .pv-preset-card.pv-vibrating .pv-preset-icon {
33
+ color: white;
34
+ background: rgba(255, 255, 255, 0.2);
35
+ }
36
+
37
+ .pv-preset-card.pv-vibrating .pv-preset-desc {
38
+ color: rgba(255, 255, 255, 0.8);
39
+ }
40
+
41
+ .pv-warning.pv-visible {
42
+ display: block;
43
+ }
44
+
1
45
  .pv-wrapper {
2
- max-width: 650px;
3
- margin: 0 auto;
4
- color: var(--pv-text);
5
- }
46
+ --pv-accent: #8b5cf6;
47
+ --pv-accent-glow: rgba(139, 92, 246, 0.4);
48
+ --pv-accent-secondary: #ec4899;
49
+ --pv-surface: #fff;
50
+ --pv-surface-alt: #f1f5f9;
51
+ --pv-surface-hover: #e2e8f0;
52
+ --pv-border: rgba(0, 0, 0, 0.08);
53
+ --pv-text: #1e293b;
54
+ --pv-text-muted: #64748b;
55
+ --pv-danger: #ef4444;
56
+
57
+ max-width: 650px;
58
+ margin: 0 auto;
59
+ color: var(--pv-text);
60
+ }
6
61
 
7
62
  .pv-card {
8
63
  background: var(--pv-surface);
@@ -270,6 +325,71 @@
270
325
  box-shadow: 0 15px 30px var(--pv-accent-glow);
271
326
  }
272
327
 
328
+ .theme-dark .pv-wrapper {
329
+ --pv-surface: #0f172a;
330
+ --pv-surface-alt: rgba(30, 41, 59, 0.8);
331
+ --pv-surface-hover: rgba(51, 65, 85, 0.8);
332
+ --pv-border: rgba(255, 255, 255, 0.1);
333
+ --pv-text: #f8fafc;
334
+ --pv-text-muted: #94a3b8;
335
+ }
336
+
337
+ .theme-dark .pv-card {
338
+ box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
339
+ }
340
+
341
+ .theme-dark .pv-warning {
342
+ background: rgba(245, 158, 11, 0.1);
343
+ color: #fcd34d;
344
+ }
345
+
346
+ .pv-tab-pane {
347
+ display: none;
348
+ animation: pv-fade-up 300ms ease;
349
+ }
350
+
351
+ .pv-tab-pane.pv-active {
352
+ display: flex;
353
+ flex-direction: column;
354
+ gap: 1.5rem;
355
+ }
356
+
357
+ @keyframes pv-bounce-in {
358
+ 0% {
359
+ transform: scale(0.5);
360
+ opacity: 0;
361
+ }
362
+
363
+ 80% {
364
+ transform: scale(1.1);
365
+ }
366
+
367
+ 100% {
368
+ transform: scale(1);
369
+ opacity: 1;
370
+ }
371
+ }
372
+
373
+ @keyframes pv-card-shake {
374
+ 0% { transform: translateX(0); }
375
+ 25% { transform: translateX(-2px) rotate(-1deg); }
376
+ 50% { transform: translateX(2px) rotate(1deg); }
377
+ 75% { transform: translateX(-1px) rotate(-1deg); }
378
+ 100% { transform: translateX(1px) rotate(1deg); }
379
+ }
380
+
381
+ @keyframes pv-fade-up {
382
+ from {
383
+ opacity: 0;
384
+ transform: translateY(10px);
385
+ }
386
+
387
+ to {
388
+ opacity: 1;
389
+ transform: translateY(0);
390
+ }
391
+ }
392
+
273
393
  .pv-btn-send:active {
274
394
  transform: translateY(1px);
275
395
  }
@@ -1,7 +1,50 @@
1
1
  .tt-wrapper {
2
- width: 100%;
3
- color: var(--tt-text);
4
- }
2
+ --tt-accent: #4f46e5;
3
+ --tt-accent-hover: #4338ca;
4
+ --tt-surface: #fff;
5
+ --tt-surface-alt: #f1f5f9;
6
+ --tt-border: #e2e8f0;
7
+ --tt-text: #0f172a;
8
+ --tt-text-muted: #64748b;
9
+ --tt-key-bg: #fff;
10
+ --tt-key-text: #64748b;
11
+ --tt-key-border: #e2e8f0;
12
+ --tt-key-shadow: rgba(0, 0, 0, 0.2);
13
+ --tt-key-active-bg: #4f46e5;
14
+ --tt-key-tested-bg: #d1fae5;
15
+ --tt-key-tested-text: #059669;
16
+ --tt-kb-bg: #e2e8f0;
17
+
18
+ width: 100%;
19
+ color: var(--tt-text);
20
+ }
21
+
22
+ .theme-dark .tt-wrapper {
23
+ --tt-surface: #0f172a;
24
+ --tt-surface-alt: #1e293b;
25
+ --tt-border: #334155;
26
+ --tt-text: #f1f5f9;
27
+ --tt-text-muted: #94a3b8;
28
+ --tt-key-bg: #334155;
29
+ --tt-key-text: #cbd5e1;
30
+ --tt-key-border: #475569;
31
+ --tt-key-shadow: rgba(0, 0, 0, 0.5);
32
+ --tt-key-active-bg: #6366f1;
33
+ --tt-key-tested-bg: rgba(16, 185, 129, 0.3);
34
+ --tt-key-tested-text: #6ee7b7;
35
+ --tt-kb-bg: #334155;
36
+ }
37
+
38
+ body.is-widget .tt-wrapper {
39
+ padding: 0;
40
+ }
41
+
42
+ body.is-widget .tt-wrapper > div {
43
+ background: transparent;
44
+ box-shadow: none;
45
+ border: none;
46
+ padding: 1rem;
47
+ }
5
48
 
6
49
  .tt-container {
7
50
  max-width: 80rem;
@@ -1,8 +1,17 @@
1
1
  .tr-wrapper {
2
- width: 100%;
3
- max-width: 56rem;
4
- margin: 0 auto;
5
- color: var(--tr-text);
2
+ --tr-accent: #10b981;
3
+ --tr-accent-glow: rgba(16, 185, 129, 0.4);
4
+ --tr-surface: #fff;
5
+ --tr-surface-alt: #f1f5f9;
6
+ --tr-surface-dark: #020617;
7
+ --tr-border: #e2e8f0;
8
+ --tr-text: #0f172a;
9
+ --tr-text-muted: #64748b;
10
+
11
+ width: 100%;
12
+ max-width: 56rem;
13
+ margin: 0 auto;
14
+ color: var(--tr-text);
6
15
  }
7
16
 
8
17
  .tr-card {
@@ -140,4 +149,17 @@
140
149
  opacity: 0;
141
150
  transition: opacity 75ms;
142
151
  transform: translate(0, 0);
143
- }
152
+ }
153
+
154
+ .theme-dark .tr-wrapper {
155
+ --tr-surface: #0f172a;
156
+ --tr-surface-alt: #1e293b;
157
+ --tr-surface-dark: #020617;
158
+ --tr-border: #334155;
159
+ --tr-text: #f1f5f9;
160
+ --tr-text-muted: #94a3b8;
161
+ }
162
+
163
+ body.is-widget .tr-wrapper {
164
+ padding: 0;
165
+ }
@@ -1,7 +1,29 @@
1
1
  .tg-wrapper {
2
- width: 100%;
3
- color: var(--tg-text);
4
- }
2
+ --tg-accent: #e11d48;
3
+ --tg-accent-glow: rgba(225, 29, 72, 0.3);
4
+ --tg-canvas-line: #f43f5e;
5
+ --tg-btn-bg: #e11d48;
6
+ --tg-btn-stop-bg: #1e293b;
7
+ --tg-surface: #fff;
8
+ --tg-surface-alt: #f8fafc;
9
+ --tg-border: #e2e8f0;
10
+ --tg-text: #0f172a;
11
+ --tg-text-muted: #64748b;
12
+ --tg-text-faint: #94a3b8;
13
+
14
+ width: 100%;
15
+ color: var(--tg-text);
16
+ }
17
+
18
+ .theme-dark .tg-wrapper {
19
+ --tg-btn-stop-bg: #27272a;
20
+ --tg-surface: #09090b;
21
+ --tg-surface-alt: #18181b;
22
+ --tg-border: #27272a;
23
+ --tg-text: #fafafa;
24
+ --tg-text-muted: #a1a1aa;
25
+ --tg-text-faint: #52525b;
26
+ }
5
27
 
6
28
  .tg-card {
7
29
  background: var(--tg-surface);