@msalaam/xray-qe-toolkit 1.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.
@@ -0,0 +1,550 @@
1
+ /* ──────────────────────────────────────────────────────────────
2
+ XQT — QE Review Gate Editor Styles
3
+ @msalaam/xray-qe-toolkit
4
+ ────────────────────────────────────────────────────────────── */
5
+
6
+ :root {
7
+ --bg-primary: #0d1117;
8
+ --bg-secondary: #161b22;
9
+ --bg-tertiary: #21262d;
10
+ --bg-input: #0d1117;
11
+ --border: #30363d;
12
+ --border-focus: #58a6ff;
13
+ --text-primary: #e6edf3;
14
+ --text-secondary: #8b949e;
15
+ --text-muted: #6e7681;
16
+ --accent-blue: #58a6ff;
17
+ --accent-green: #3fb950;
18
+ --accent-red: #f85149;
19
+ --accent-orange: #d29922;
20
+ --accent-purple: #bc8cff;
21
+ --radius: 6px;
22
+ --radius-lg: 10px;
23
+ --shadow: 0 1px 3px rgba(0,0,0,0.3);
24
+ --font-mono: "Cascadia Code", "Fira Code", "JetBrains Mono", monospace;
25
+ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
26
+ }
27
+
28
+ * {
29
+ margin: 0;
30
+ padding: 0;
31
+ box-sizing: border-box;
32
+ }
33
+
34
+ body {
35
+ font-family: var(--font-sans);
36
+ background: var(--bg-primary);
37
+ color: var(--text-primary);
38
+ line-height: 1.5;
39
+ min-height: 100vh;
40
+ }
41
+
42
+ /* ─── Header ─────────────────────────────────────────────────────────────── */
43
+
44
+ header {
45
+ display: flex;
46
+ justify-content: space-between;
47
+ align-items: center;
48
+ padding: 12px 24px;
49
+ background: var(--bg-secondary);
50
+ border-bottom: 1px solid var(--border);
51
+ position: sticky;
52
+ top: 0;
53
+ z-index: 100;
54
+ }
55
+
56
+ .header-left {
57
+ display: flex;
58
+ align-items: baseline;
59
+ gap: 12px;
60
+ }
61
+
62
+ header h1 {
63
+ font-size: 18px;
64
+ font-weight: 600;
65
+ }
66
+
67
+ .subtitle {
68
+ font-size: 12px;
69
+ color: var(--text-muted);
70
+ font-family: var(--font-mono);
71
+ }
72
+
73
+ .header-right {
74
+ display: flex;
75
+ align-items: center;
76
+ gap: 12px;
77
+ }
78
+
79
+ .test-count {
80
+ font-size: 13px;
81
+ color: var(--text-secondary);
82
+ font-family: var(--font-mono);
83
+ }
84
+
85
+ /* ─── Badges ─────────────────────────────────────────────────────────────── */
86
+
87
+ .badge {
88
+ font-size: 11px;
89
+ font-weight: 600;
90
+ padding: 2px 8px;
91
+ border-radius: 12px;
92
+ text-transform: uppercase;
93
+ letter-spacing: 0.5px;
94
+ }
95
+
96
+ .badge-loaded { background: #1f3a2e; color: var(--accent-green); }
97
+ .badge-unsaved { background: #3d2a0a; color: var(--accent-orange); }
98
+ .badge-error { background: #3d1216; color: var(--accent-red); }
99
+
100
+ /* ─── Buttons ────────────────────────────────────────────────────────────── */
101
+
102
+ .btn {
103
+ padding: 6px 16px;
104
+ border: 1px solid var(--border);
105
+ border-radius: var(--radius);
106
+ font-size: 13px;
107
+ font-weight: 500;
108
+ cursor: pointer;
109
+ transition: all 0.15s ease;
110
+ font-family: var(--font-sans);
111
+ background: var(--bg-tertiary);
112
+ color: var(--text-primary);
113
+ }
114
+
115
+ .btn:hover { border-color: var(--text-secondary); }
116
+ .btn:active { transform: scale(0.98); }
117
+
118
+ .btn-primary {
119
+ background: #1f6feb;
120
+ border-color: #1f6feb;
121
+ color: #fff;
122
+ }
123
+ .btn-primary:hover { background: #388bfd; border-color: #388bfd; }
124
+
125
+ .btn-success {
126
+ background: #238636;
127
+ border-color: #238636;
128
+ color: #fff;
129
+ }
130
+ .btn-success:hover { background: #2ea043; border-color: #2ea043; }
131
+
132
+ .btn-danger {
133
+ background: transparent;
134
+ border-color: var(--accent-red);
135
+ color: var(--accent-red);
136
+ }
137
+ .btn-danger:hover { background: #3d1216; }
138
+
139
+ .btn-sm {
140
+ padding: 4px 10px;
141
+ font-size: 12px;
142
+ }
143
+
144
+ /* ─── Layout ─────────────────────────────────────────────────────────────── */
145
+
146
+ .container {
147
+ display: grid;
148
+ grid-template-columns: 320px 1fr;
149
+ height: calc(100vh - 53px);
150
+ }
151
+
152
+ /* ─── Left Panel — Test List ─────────────────────────────────────────────── */
153
+
154
+ #test-list-panel {
155
+ background: var(--bg-secondary);
156
+ border-right: 1px solid var(--border);
157
+ overflow-y: auto;
158
+ display: flex;
159
+ flex-direction: column;
160
+ }
161
+
162
+ .panel-header {
163
+ padding: 12px;
164
+ border-bottom: 1px solid var(--border);
165
+ display: flex;
166
+ flex-direction: column;
167
+ gap: 8px;
168
+ }
169
+
170
+ .panel-header input,
171
+ .panel-header select {
172
+ width: 100%;
173
+ }
174
+
175
+ #test-list {
176
+ list-style: none;
177
+ flex: 1;
178
+ overflow-y: auto;
179
+ }
180
+
181
+ #test-list li {
182
+ padding: 10px 14px;
183
+ border-bottom: 1px solid var(--border);
184
+ cursor: pointer;
185
+ transition: background 0.1s ease;
186
+ }
187
+
188
+ #test-list li:hover { background: var(--bg-tertiary); }
189
+ #test-list li.active { background: var(--bg-tertiary); border-left: 3px solid var(--accent-blue); }
190
+
191
+ .test-list-id {
192
+ font-size: 11px;
193
+ font-family: var(--font-mono);
194
+ color: var(--accent-blue);
195
+ display: block;
196
+ margin-bottom: 2px;
197
+ }
198
+
199
+ .test-list-summary {
200
+ font-size: 13px;
201
+ color: var(--text-primary);
202
+ display: block;
203
+ white-space: nowrap;
204
+ overflow: hidden;
205
+ text-overflow: ellipsis;
206
+ }
207
+
208
+ .test-list-meta {
209
+ display: flex;
210
+ align-items: center;
211
+ gap: 6px;
212
+ margin-top: 4px;
213
+ }
214
+
215
+ .test-list-tag {
216
+ font-size: 10px;
217
+ padding: 1px 6px;
218
+ border-radius: 10px;
219
+ background: var(--bg-primary);
220
+ color: var(--text-secondary);
221
+ border: 1px solid var(--border);
222
+ }
223
+
224
+ .test-list-tag.tag-regression { color: var(--accent-orange); border-color: var(--accent-orange); }
225
+ .test-list-tag.tag-critical { color: var(--accent-red); border-color: var(--accent-red); }
226
+ .test-list-tag.tag-smoke { color: var(--accent-green); border-color: var(--accent-green); }
227
+ .test-list-tag.tag-edge { color: var(--accent-purple); border-color: var(--accent-purple); }
228
+
229
+ .test-list-skip {
230
+ font-size: 10px;
231
+ color: var(--text-muted);
232
+ font-style: italic;
233
+ }
234
+
235
+ .test-list-xray {
236
+ font-size: 10px;
237
+ color: var(--accent-green);
238
+ font-family: var(--font-mono);
239
+ }
240
+
241
+ /* ─── Right Panel — Editor ───────────────────────────────────────────────── */
242
+
243
+ #editor-panel {
244
+ padding: 24px;
245
+ overflow-y: auto;
246
+ }
247
+
248
+ .placeholder {
249
+ display: flex;
250
+ flex-direction: column;
251
+ align-items: center;
252
+ justify-content: center;
253
+ height: 100%;
254
+ color: var(--text-secondary);
255
+ text-align: center;
256
+ }
257
+
258
+ .placeholder-icon {
259
+ font-size: 48px;
260
+ margin-bottom: 12px;
261
+ }
262
+
263
+ .placeholder h2 {
264
+ font-size: 20px;
265
+ font-weight: 500;
266
+ margin-bottom: 8px;
267
+ }
268
+
269
+ .placeholder p {
270
+ font-size: 14px;
271
+ color: var(--text-muted);
272
+ }
273
+
274
+ .hidden { display: none !important; }
275
+
276
+ /* ─── Editor Sections ────────────────────────────────────────────────────── */
277
+
278
+ .editor-section {
279
+ background: var(--bg-secondary);
280
+ border: 1px solid var(--border);
281
+ border-radius: var(--radius-lg);
282
+ padding: 20px;
283
+ margin-bottom: 16px;
284
+ }
285
+
286
+ .editor-section h3 {
287
+ font-size: 15px;
288
+ font-weight: 600;
289
+ margin-bottom: 14px;
290
+ color: var(--text-primary);
291
+ }
292
+
293
+ .section-header {
294
+ display: flex;
295
+ justify-content: space-between;
296
+ align-items: center;
297
+ margin-bottom: 14px;
298
+ }
299
+
300
+ .section-header h3 { margin-bottom: 0; }
301
+
302
+ .section-actions {
303
+ display: flex;
304
+ align-items: center;
305
+ gap: 12px;
306
+ }
307
+
308
+ /* ─── Form fields ────────────────────────────────────────────────────────── */
309
+
310
+ .form-row {
311
+ margin-bottom: 14px;
312
+ }
313
+
314
+ .form-row label {
315
+ display: block;
316
+ font-size: 12px;
317
+ font-weight: 500;
318
+ color: var(--text-secondary);
319
+ margin-bottom: 4px;
320
+ }
321
+
322
+ .form-row label small {
323
+ color: var(--text-muted);
324
+ font-weight: 400;
325
+ }
326
+
327
+ .form-row input[type="text"],
328
+ .form-row textarea,
329
+ .form-row select {
330
+ width: 100%;
331
+ padding: 8px 12px;
332
+ background: var(--bg-input);
333
+ border: 1px solid var(--border);
334
+ border-radius: var(--radius);
335
+ color: var(--text-primary);
336
+ font-size: 13px;
337
+ font-family: var(--font-sans);
338
+ transition: border-color 0.15s ease;
339
+ }
340
+
341
+ .form-row input:focus,
342
+ .form-row textarea:focus,
343
+ .form-row select:focus {
344
+ outline: none;
345
+ border-color: var(--border-focus);
346
+ box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
347
+ }
348
+
349
+ .form-row input.error,
350
+ .form-row textarea.error {
351
+ border-color: var(--accent-red);
352
+ }
353
+
354
+ .field-error {
355
+ font-size: 11px;
356
+ color: var(--accent-red);
357
+ margin-top: 2px;
358
+ display: block;
359
+ }
360
+
361
+ .form-row-inline {
362
+ display: grid;
363
+ grid-template-columns: 1fr 1fr;
364
+ gap: 14px;
365
+ }
366
+
367
+ /* ─── Tag selector ───────────────────────────────────────────────────────── */
368
+
369
+ .tag-selector {
370
+ display: flex;
371
+ flex-wrap: wrap;
372
+ gap: 8px;
373
+ }
374
+
375
+ .tag-chip {
376
+ display: flex !important;
377
+ align-items: center;
378
+ gap: 4px;
379
+ font-size: 12px;
380
+ padding: 4px 10px;
381
+ border-radius: 14px;
382
+ background: var(--bg-primary);
383
+ border: 1px solid var(--border);
384
+ cursor: pointer;
385
+ transition: all 0.15s ease;
386
+ color: var(--text-secondary) !important;
387
+ margin-bottom: 0 !important;
388
+ }
389
+
390
+ .tag-chip:hover { border-color: var(--accent-blue); }
391
+
392
+ .tag-chip input[type="checkbox"] {
393
+ width: 12px;
394
+ height: 12px;
395
+ accent-color: var(--accent-blue);
396
+ }
397
+
398
+ .tag-chip:has(input:checked) {
399
+ border-color: var(--accent-blue);
400
+ background: rgba(88, 166, 255, 0.1);
401
+ color: var(--accent-blue) !important;
402
+ }
403
+
404
+ /* ─── Toggle ─────────────────────────────────────────────────────────────── */
405
+
406
+ .toggle-label {
407
+ display: flex;
408
+ align-items: center;
409
+ gap: 6px;
410
+ font-size: 12px;
411
+ color: var(--text-secondary);
412
+ cursor: pointer;
413
+ }
414
+
415
+ .toggle-label input[type="checkbox"] {
416
+ accent-color: var(--accent-orange);
417
+ }
418
+
419
+ /* ─── Mapping info ───────────────────────────────────────────────────────── */
420
+
421
+ .mapping-info {
422
+ margin-top: 10px;
423
+ padding: 8px 12px;
424
+ background: rgba(63, 185, 80, 0.08);
425
+ border: 1px solid rgba(63, 185, 80, 0.2);
426
+ border-radius: var(--radius);
427
+ font-size: 12px;
428
+ font-family: var(--font-mono);
429
+ }
430
+
431
+ .mapping-label { color: var(--text-secondary); }
432
+ .mapping-key { color: var(--accent-green); margin-left: 4px; font-weight: 600; }
433
+ .mapping-id { color: var(--text-muted); margin-left: 8px; }
434
+
435
+ /* ─── Steps ──────────────────────────────────────────────────────────────── */
436
+
437
+ #steps-container {
438
+ display: flex;
439
+ flex-direction: column;
440
+ gap: 12px;
441
+ }
442
+
443
+ .step-card {
444
+ background: var(--bg-primary);
445
+ border: 1px solid var(--border);
446
+ border-radius: var(--radius);
447
+ padding: 14px;
448
+ position: relative;
449
+ }
450
+
451
+ .step-card-header {
452
+ display: flex;
453
+ justify-content: space-between;
454
+ align-items: center;
455
+ margin-bottom: 10px;
456
+ }
457
+
458
+ .step-number {
459
+ font-size: 12px;
460
+ font-weight: 600;
461
+ color: var(--accent-blue);
462
+ font-family: var(--font-mono);
463
+ }
464
+
465
+ .step-card .btn-remove {
466
+ background: none;
467
+ border: none;
468
+ color: var(--text-muted);
469
+ cursor: pointer;
470
+ font-size: 16px;
471
+ padding: 2px 6px;
472
+ border-radius: 4px;
473
+ transition: all 0.15s ease;
474
+ }
475
+
476
+ .step-card .btn-remove:hover {
477
+ color: var(--accent-red);
478
+ background: rgba(248, 81, 73, 0.1);
479
+ }
480
+
481
+ .step-card .form-row {
482
+ margin-bottom: 10px;
483
+ }
484
+
485
+ .step-card .form-row:last-child {
486
+ margin-bottom: 0;
487
+ }
488
+
489
+ /* ─── Toast ──────────────────────────────────────────────────────────────── */
490
+
491
+ .toast {
492
+ position: fixed;
493
+ bottom: 24px;
494
+ right: 24px;
495
+ padding: 12px 20px;
496
+ border-radius: var(--radius);
497
+ font-size: 13px;
498
+ font-weight: 500;
499
+ box-shadow: var(--shadow);
500
+ z-index: 1000;
501
+ transition: all 0.3s ease;
502
+ transform: translateY(0);
503
+ opacity: 1;
504
+ }
505
+
506
+ .toast.hidden {
507
+ transform: translateY(20px);
508
+ opacity: 0;
509
+ pointer-events: none;
510
+ display: block !important;
511
+ }
512
+
513
+ .toast.toast-success {
514
+ background: #1f3a2e;
515
+ border: 1px solid var(--accent-green);
516
+ color: var(--accent-green);
517
+ }
518
+
519
+ .toast.toast-error {
520
+ background: #3d1216;
521
+ border: 1px solid var(--accent-red);
522
+ color: var(--accent-red);
523
+ }
524
+
525
+ .toast.toast-info {
526
+ background: #12263e;
527
+ border: 1px solid var(--accent-blue);
528
+ color: var(--accent-blue);
529
+ }
530
+
531
+ /* ─── Scrollbar ──────────────────────────────────────────────────────────── */
532
+
533
+ ::-webkit-scrollbar { width: 8px; }
534
+ ::-webkit-scrollbar-track { background: var(--bg-primary); }
535
+ ::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 4px; }
536
+ ::-webkit-scrollbar-thumb:hover { background: var(--border); }
537
+
538
+ /* ─── Responsive ─────────────────────────────────────────────────────────── */
539
+
540
+ @media (max-width: 768px) {
541
+ .container {
542
+ grid-template-columns: 1fr;
543
+ grid-template-rows: 200px 1fr;
544
+ }
545
+
546
+ #test-list-panel {
547
+ border-right: none;
548
+ border-bottom: 1px solid var(--border);
549
+ }
550
+ }