@nsite/stealthis 0.1.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/src/styles.ts ADDED
@@ -0,0 +1,440 @@
1
+ export const STYLES = /*css*/ `
2
+ :host {
3
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
4
+ }
5
+
6
+ .nd-trigger {
7
+ padding: 10px 18px;
8
+ background: #9b59b6;
9
+ color: #fff;
10
+ border: none;
11
+ border-radius: 8px;
12
+ font-size: 14px;
13
+ font-weight: 600;
14
+ cursor: pointer;
15
+ transition: background 0.2s;
16
+ }
17
+ .nd-trigger:hover { background: #8e44ad; }
18
+ .nd-trigger:disabled { opacity: 0.6; cursor: default; }
19
+ :host(.nd-fixed) .nd-trigger {
20
+ position: fixed;
21
+ bottom: 20px;
22
+ right: 20px;
23
+ z-index: 99999;
24
+ box-shadow: 0 2px 12px rgba(0,0,0,0.3);
25
+ }
26
+
27
+ .nd-overlay {
28
+ position: fixed;
29
+ inset: 0;
30
+ background: rgba(0,0,0,0.6);
31
+ display: flex;
32
+ align-items: center;
33
+ justify-content: center;
34
+ z-index: 100000;
35
+ backdrop-filter: blur(4px);
36
+ }
37
+
38
+ .nd-modal {
39
+ background: #1a1a2e;
40
+ border: 1px solid #0f3460;
41
+ border-radius: 12px;
42
+ padding: 24px;
43
+ width: 90%;
44
+ max-width: 420px;
45
+ color: #e0e0e0;
46
+ max-height: 90vh;
47
+ overflow-y: auto;
48
+ }
49
+
50
+ .nd-header {
51
+ display: flex;
52
+ justify-content: space-between;
53
+ align-items: center;
54
+ margin-bottom: 16px;
55
+ }
56
+ .nd-title {
57
+ margin: 0;
58
+ font-size: 18px;
59
+ font-weight: 700;
60
+ }
61
+ .nd-close {
62
+ background: none;
63
+ border: none;
64
+ color: #888;
65
+ font-size: 22px;
66
+ cursor: pointer;
67
+ padding: 0 0 0 8px;
68
+ line-height: 1;
69
+ }
70
+ .nd-close:hover { color: #e0e0e0; }
71
+
72
+ /* Auth section */
73
+ .nd-auth-option {
74
+ margin-bottom: 16px;
75
+ }
76
+ .nd-auth-option:last-child {
77
+ margin-bottom: 0;
78
+ }
79
+
80
+ .nd-divider {
81
+ display: flex;
82
+ align-items: center;
83
+ gap: 12px;
84
+ margin: 16px 0;
85
+ font-size: 12px;
86
+ color: #555;
87
+ text-transform: uppercase;
88
+ letter-spacing: 0.05em;
89
+ }
90
+ .nd-divider::before, .nd-divider::after {
91
+ content: '';
92
+ flex: 1;
93
+ height: 1px;
94
+ background: #0f3460;
95
+ }
96
+
97
+ .nd-btn-ext {
98
+ width: 100%;
99
+ padding: 12px;
100
+ background: #9b59b6;
101
+ color: #fff;
102
+ border: none;
103
+ border-radius: 8px;
104
+ font-size: 14px;
105
+ font-weight: 600;
106
+ cursor: pointer;
107
+ transition: background 0.2s;
108
+ }
109
+ .nd-btn-ext:hover { background: #8e44ad; }
110
+
111
+ .nd-bunker-row {
112
+ display: flex;
113
+ gap: 8px;
114
+ }
115
+ .nd-bunker-row input {
116
+ flex: 1;
117
+ padding: 8px 12px;
118
+ background: #16213e;
119
+ border: 1px solid #0f3460;
120
+ border-radius: 6px;
121
+ color: #e0e0e0;
122
+ font-size: 13px;
123
+ font-family: inherit;
124
+ box-sizing: border-box;
125
+ min-width: 0;
126
+ }
127
+ .nd-bunker-row input:focus {
128
+ outline: none;
129
+ border-color: #9b59b6;
130
+ }
131
+ .nd-bunker-row button {
132
+ padding: 8px 14px;
133
+ background: #16213e;
134
+ border: 1px solid #0f3460;
135
+ border-radius: 6px;
136
+ color: #e0e0e0;
137
+ font-size: 13px;
138
+ font-weight: 600;
139
+ cursor: pointer;
140
+ white-space: nowrap;
141
+ }
142
+ .nd-bunker-row button:hover { background: #0f3460; }
143
+
144
+ .nd-qr-wrap {
145
+ display: flex;
146
+ flex-direction: column;
147
+ align-items: center;
148
+ gap: 10px;
149
+ }
150
+ .nd-qr-label {
151
+ font-size: 12px;
152
+ color: #888;
153
+ }
154
+ .nd-qr-code {
155
+ background: #fff;
156
+ border-radius: 8px;
157
+ padding: 12px;
158
+ display: inline-flex;
159
+ }
160
+ .nd-qr-code svg {
161
+ display: block;
162
+ width: 200px;
163
+ height: 200px;
164
+ }
165
+ .nd-relay-row {
166
+ display: flex;
167
+ gap: 0;
168
+ width: 100%;
169
+ max-width: 300px;
170
+ }
171
+ .nd-relay-row label {
172
+ padding: 6px 10px;
173
+ background: #0f3460;
174
+ border: 1px solid #0f3460;
175
+ border-right: none;
176
+ border-radius: 4px 0 0 4px;
177
+ color: #888;
178
+ font-size: 11px;
179
+ white-space: nowrap;
180
+ display: flex;
181
+ align-items: center;
182
+ }
183
+ .nd-relay-row input {
184
+ flex: 1;
185
+ padding: 6px 8px;
186
+ background: #16213e;
187
+ border: 1px solid #0f3460;
188
+ border-radius: 0 4px 4px 0;
189
+ color: #e0e0e0;
190
+ font-size: 11px;
191
+ font-family: monospace;
192
+ min-width: 0;
193
+ box-sizing: border-box;
194
+ }
195
+ .nd-relay-row input:focus {
196
+ outline: none;
197
+ border-color: #9b59b6;
198
+ }
199
+ .nd-qr-uri {
200
+ display: flex;
201
+ gap: 6px;
202
+ width: 100%;
203
+ max-width: 300px;
204
+ }
205
+ .nd-qr-uri input {
206
+ flex: 1;
207
+ padding: 6px 8px;
208
+ background: #16213e;
209
+ border: 1px solid #0f3460;
210
+ border-radius: 4px;
211
+ color: #888;
212
+ font-size: 11px;
213
+ font-family: monospace;
214
+ min-width: 0;
215
+ box-sizing: border-box;
216
+ }
217
+ .nd-qr-uri button {
218
+ padding: 6px 10px;
219
+ background: #16213e;
220
+ border: 1px solid #0f3460;
221
+ border-radius: 4px;
222
+ color: #e0e0e0;
223
+ font-size: 11px;
224
+ cursor: pointer;
225
+ white-space: nowrap;
226
+ }
227
+ .nd-qr-uri button:hover { background: #0f3460; }
228
+
229
+ /* Toggle */
230
+ .nd-toggle {
231
+ display: flex;
232
+ margin-bottom: 16px;
233
+ background: #16213e;
234
+ border-radius: 6px;
235
+ padding: 3px;
236
+ }
237
+ .nd-toggle-btn {
238
+ flex: 1;
239
+ padding: 8px;
240
+ background: transparent;
241
+ border: none;
242
+ border-radius: 4px;
243
+ color: #888;
244
+ font-size: 13px;
245
+ font-weight: 600;
246
+ cursor: pointer;
247
+ transition: all 0.2s;
248
+ }
249
+ .nd-toggle-btn.active {
250
+ background: #9b59b6;
251
+ color: #fff;
252
+ }
253
+
254
+ /* Warning */
255
+ .nd-warn {
256
+ background: rgba(231, 76, 60, 0.1);
257
+ border: 1px solid rgba(231, 76, 60, 0.3);
258
+ border-radius: 6px;
259
+ padding: 12px;
260
+ font-size: 13px;
261
+ color: #e74c3c;
262
+ line-height: 1.5;
263
+ }
264
+ .nd-btn-warn {
265
+ background: #e74c3c;
266
+ color: #fff;
267
+ }
268
+ .nd-btn-warn:hover { background: #c0392b; }
269
+
270
+ .nd-root-hint {
271
+ font-size: 13px;
272
+ color: #888;
273
+ margin-bottom: 12px;
274
+ word-break: break-all;
275
+ }
276
+ .nd-root-hint strong {
277
+ color: #e0e0e0;
278
+ }
279
+
280
+ /* Form fields */
281
+ .nd-field {
282
+ margin-bottom: 12px;
283
+ }
284
+ .nd-field label {
285
+ display: block;
286
+ font-size: 11px;
287
+ color: #888;
288
+ margin-bottom: 4px;
289
+ text-transform: uppercase;
290
+ letter-spacing: 0.05em;
291
+ }
292
+ .nd-field input, .nd-field textarea {
293
+ width: 100%;
294
+ padding: 8px 12px;
295
+ background: #16213e;
296
+ border: 1px solid #0f3460;
297
+ border-radius: 6px;
298
+ color: #e0e0e0;
299
+ font-size: 14px;
300
+ font-family: inherit;
301
+ box-sizing: border-box;
302
+ }
303
+ .nd-field input:focus, .nd-field textarea:focus {
304
+ outline: none;
305
+ border-color: #9b59b6;
306
+ }
307
+ .nd-field textarea {
308
+ resize: vertical;
309
+ min-height: 60px;
310
+ }
311
+ .nd-hint {
312
+ font-size: 11px;
313
+ color: #888;
314
+ margin-top: 3px;
315
+ }
316
+ .nd-field-error {
317
+ font-size: 11px;
318
+ color: #e74c3c;
319
+ margin-top: 3px;
320
+ }
321
+
322
+ /* Actions */
323
+ .nd-actions {
324
+ display: flex;
325
+ gap: 8px;
326
+ margin-top: 16px;
327
+ }
328
+ .nd-btn {
329
+ flex: 1;
330
+ padding: 10px;
331
+ border: none;
332
+ border-radius: 6px;
333
+ font-size: 14px;
334
+ font-weight: 600;
335
+ cursor: pointer;
336
+ transition: background 0.2s;
337
+ }
338
+ .nd-btn-primary {
339
+ background: #9b59b6;
340
+ color: #fff;
341
+ }
342
+ .nd-btn-primary:hover { background: #8e44ad; }
343
+ .nd-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
344
+ .nd-btn-secondary {
345
+ background: #16213e;
346
+ color: #e0e0e0;
347
+ border: 1px solid #0f3460;
348
+ }
349
+ .nd-btn-secondary:hover { background: #0f3460; }
350
+
351
+ /* Status */
352
+ .nd-status {
353
+ margin-top: 12px;
354
+ font-size: 13px;
355
+ color: #888;
356
+ }
357
+ .nd-status-ok { color: #2ecc71; }
358
+ .nd-status-err { color: #e74c3c; }
359
+
360
+ .nd-link {
361
+ display: block;
362
+ margin-top: 12px;
363
+ padding: 10px;
364
+ background: #16213e;
365
+ border: 1px solid #0f3460;
366
+ border-radius: 6px;
367
+ color: #9b59b6;
368
+ text-decoration: none;
369
+ text-align: center;
370
+ font-size: 13px;
371
+ word-break: break-all;
372
+ }
373
+ .nd-link:hover { background: #0f3460; }
374
+
375
+ .nd-msg {
376
+ text-align: center;
377
+ padding: 20px 0;
378
+ font-size: 14px;
379
+ color: #888;
380
+ }
381
+
382
+ /* Paper trail */
383
+ .nd-trail {
384
+ margin-top: 8px;
385
+ text-align: center;
386
+ }
387
+ .nd-trail-toggle {
388
+ background: none;
389
+ border: none;
390
+ color: #888;
391
+ font-size: 12px;
392
+ cursor: pointer;
393
+ padding: 4px 8px;
394
+ transition: color 0.2s;
395
+ }
396
+ .nd-trail-toggle:hover { color: #e0e0e0; }
397
+ .nd-trail-list {
398
+ margin-top: 6px;
399
+ text-align: left;
400
+ font-size: 12px;
401
+ color: #888;
402
+ max-height: 200px;
403
+ overflow-y: auto;
404
+ }
405
+ .nd-trail-item {
406
+ padding: 3px 0;
407
+ font-family: monospace;
408
+ font-size: 11px;
409
+ display: flex;
410
+ gap: 6px;
411
+ }
412
+ .nd-trail-idx {
413
+ color: #555;
414
+ min-width: 24px;
415
+ text-align: right;
416
+ }
417
+ .nd-trail-pk {
418
+ color: #9b59b6;
419
+ }
420
+ .nd-trail-gap {
421
+ padding: 3px 0;
422
+ color: #555;
423
+ font-style: italic;
424
+ }
425
+
426
+ @keyframes nd-spin {
427
+ to { transform: rotate(360deg); }
428
+ }
429
+ .nd-spinner {
430
+ display: inline-block;
431
+ width: 18px;
432
+ height: 18px;
433
+ border: 2px solid #555;
434
+ border-top-color: #9b59b6;
435
+ border-radius: 50%;
436
+ animation: nd-spin 0.8s linear infinite;
437
+ vertical-align: middle;
438
+ margin-right: 8px;
439
+ }
440
+ `;