@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,265 @@
1
+ .tg-wrapper {
2
+ width: 100%;
3
+ color: var(--tg-text);
4
+ }
5
+
6
+ .tg-card {
7
+ background: var(--tg-surface);
8
+ border: 1px solid var(--tg-border);
9
+ border-radius: 1.5rem;
10
+ padding: 2rem;
11
+ display: flex;
12
+ flex-direction: column;
13
+ gap: 2rem;
14
+ }
15
+
16
+ .tg-header {
17
+ display: flex;
18
+ align-items: center;
19
+ gap: 1rem;
20
+ }
21
+
22
+ .tg-icon-wrap {
23
+ flex-shrink: 0;
24
+ padding: 0.75rem;
25
+ background: rgba(225, 29, 72, 0.1);
26
+ color: var(--tg-accent);
27
+ border-radius: 1rem;
28
+ }
29
+
30
+ .tg-icon {
31
+ width: 2rem;
32
+ height: 2rem;
33
+ }
34
+
35
+ .tg-header-text {
36
+ display: flex;
37
+ flex-direction: column;
38
+ gap: 0.125rem;
39
+ }
40
+
41
+ .tg-badge {
42
+ display: inline-block;
43
+ font-size: 0.625rem;
44
+ font-weight: 900;
45
+ text-transform: uppercase;
46
+ letter-spacing: 0.12em;
47
+ color: var(--tg-accent);
48
+ background: rgba(225, 29, 72, 0.08);
49
+ border: 1px solid rgba(225, 29, 72, 0.2);
50
+ padding: 0.2rem 0.6rem;
51
+ border-radius: 9999px;
52
+ width: fit-content;
53
+ }
54
+
55
+ .tg-title {
56
+ font-size: 1.75rem;
57
+ font-weight: 900;
58
+ letter-spacing: -0.02em;
59
+ margin: 0;
60
+ color: var(--tg-text);
61
+ }
62
+
63
+ .tg-desc {
64
+ font-size: 0.875rem;
65
+ color: var(--tg-text-muted);
66
+ margin: 0;
67
+ }
68
+
69
+ .tg-canvas-wrap {
70
+ position: relative;
71
+ width: 100%;
72
+ height: 12rem;
73
+ background: #000;
74
+ border-radius: 1rem;
75
+ overflow: hidden;
76
+ border: 1px solid #111;
77
+ }
78
+
79
+ .tg-canvas {
80
+ width: 100%;
81
+ height: 100%;
82
+ }
83
+
84
+ .tg-hz-display {
85
+ position: absolute;
86
+ top: 1rem;
87
+ right: 1rem;
88
+ font-size: 0.75rem;
89
+ color: #f43f5e;
90
+ letter-spacing: 0.05em;
91
+ animation: tg-pulse 2s ease-in-out infinite;
92
+ }
93
+
94
+ .tg-controls {
95
+ display: flex;
96
+ flex-direction: column;
97
+ gap: 2rem;
98
+ }
99
+
100
+ .tg-section {
101
+ display: flex;
102
+ flex-direction: column;
103
+ gap: 0.5rem;
104
+ }
105
+
106
+ .tg-section-header {
107
+ display: flex;
108
+ justify-content: space-between;
109
+ align-items: center;
110
+ }
111
+
112
+ .tg-label {
113
+ font-size: 0.7rem;
114
+ font-weight: 800;
115
+ text-transform: uppercase;
116
+ letter-spacing: 0.1em;
117
+ color: var(--tg-text-muted);
118
+ }
119
+
120
+ .tg-presets {
121
+ display: flex;
122
+ gap: 0.375rem;
123
+ }
124
+
125
+ .tg-preset {
126
+ padding: 0.25rem 0.5rem;
127
+ background: var(--tg-surface-alt);
128
+ border: 1px solid var(--tg-border);
129
+ border-radius: 0.375rem;
130
+ font-size: 0.75rem;
131
+ color: var(--tg-text-muted);
132
+ cursor: pointer;
133
+ transition: background 150ms, color 150ms;
134
+ }
135
+
136
+ .tg-preset:hover {
137
+ background: var(--tg-border);
138
+ color: var(--tg-text);
139
+ }
140
+
141
+ .tg-slider {
142
+ -webkit-appearance: none;
143
+ appearance: none;
144
+ width: 100%;
145
+ height: 6px;
146
+ background: var(--tg-border);
147
+ border-radius: 3px;
148
+ outline: none;
149
+ accent-color: var(--tg-accent);
150
+ }
151
+
152
+ .tg-slider::-webkit-slider-thumb {
153
+ -webkit-appearance: none;
154
+ appearance: none;
155
+ width: 18px;
156
+ height: 18px;
157
+ background: var(--tg-accent);
158
+ border-radius: 50%;
159
+ cursor: pointer;
160
+ border: 4px solid var(--tg-surface);
161
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
162
+ }
163
+
164
+ .tg-range-hints {
165
+ display: flex;
166
+ justify-content: space-between;
167
+ font-size: 0.625rem;
168
+ color: var(--tg-text-faint);
169
+ letter-spacing: 0.02em;
170
+ }
171
+
172
+ .tg-two-col {
173
+ display: grid;
174
+ grid-template-columns: 1fr 1fr;
175
+ gap: 2rem;
176
+ }
177
+
178
+ @media (max-width: 640px) {
179
+ .tg-two-col {
180
+ grid-template-columns: 1fr;
181
+ }
182
+ }
183
+
184
+ .tg-wave-grid {
185
+ display: grid;
186
+ grid-template-columns: repeat(4, 1fr);
187
+ gap: 0.5rem;
188
+ }
189
+
190
+ .tg-wave-btn {
191
+ padding: 0.75rem;
192
+ border-radius: 0.75rem;
193
+ background: var(--tg-surface-alt);
194
+ border: 1px solid var(--tg-border);
195
+ color: var(--tg-text-muted);
196
+ cursor: pointer;
197
+ transition: background 150ms, color 150ms, box-shadow 150ms;
198
+ display: flex;
199
+ align-items: center;
200
+ justify-content: center;
201
+ }
202
+
203
+ .tg-wave-btn:hover {
204
+ background: var(--tg-border);
205
+ color: var(--tg-text);
206
+ }
207
+
208
+ .tg-wave-icon {
209
+ width: 1.5rem;
210
+ height: 1.5rem;
211
+ }
212
+
213
+ .tg-vol-row {
214
+ display: flex;
215
+ align-items: center;
216
+ gap: 0.75rem;
217
+ background: var(--tg-surface-alt);
218
+ border: 1px solid var(--tg-border);
219
+ border-radius: 0.75rem;
220
+ padding: 0.75rem;
221
+ }
222
+
223
+ .tg-vol-icon {
224
+ width: 1.25rem;
225
+ height: 1.25rem;
226
+ color: var(--tg-text-faint);
227
+ flex-shrink: 0;
228
+ }
229
+
230
+ .tg-vol-slider {
231
+ height: 4px;
232
+ }
233
+
234
+ .tg-toggle-btn {
235
+ width: 100%;
236
+ padding: 1.5rem;
237
+ border-radius: 1rem;
238
+ background: var(--tg-btn-bg);
239
+ border: none;
240
+ color: #fff;
241
+ font-size: 1.125rem;
242
+ font-weight: 900;
243
+ letter-spacing: 0.05em;
244
+ cursor: pointer;
245
+ display: flex;
246
+ align-items: center;
247
+ justify-content: center;
248
+ gap: 0.75rem;
249
+ box-shadow: 0 8px 24px var(--tg-accent-glow);
250
+ transition: background 200ms, box-shadow 200ms, transform 100ms;
251
+ }
252
+
253
+ .tg-toggle-btn:active {
254
+ transform: scale(0.98);
255
+ }
256
+
257
+ .tg-btn-icon {
258
+ display: inherit;
259
+ align-items: center;
260
+ }
261
+
262
+ .tg-toggle-icon {
263
+ width: 1.75rem;
264
+ height: 1.75rem;
265
+ }