nexabase-report 0.2.5 → 0.2.8

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/dist/style.css CHANGED
@@ -1,2732 +1,7 @@
1
- /* ============================================================
2
- NEXABASE REPORT — GLOBAL STYLES
3
- ============================================================ */
4
-
5
- /* PRIMEVUE CORE */
6
- @import "primevue/resources/themes/lara-light-blue/theme.css";
7
- @import "primevue/resources/primevue.min.css";
8
- @import "primeicons/primeicons.css";
9
- @import "primeflex/primeflex.css";
10
-
11
- /* RESET */
12
- html, body, #app {
13
- margin: 0;
14
- padding: 0;
15
- width: 100vw;
16
- height: 100vh;
17
- overflow: hidden;
18
- background: #f1f5f9;
19
- font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
20
- }
21
-
22
- /* Toast overrides */
23
- .p-toast { font-size: 12px; }
24
- .p-toast .p-toast-message .p-toast-message-content { padding: 12px; border-radius: 6px; }
25
-
26
- /* ============================================================
27
- STIMULSOFT PREVIEW DIALOG
28
- ============================================================ */
29
-
30
- .p-dialog.nd-stimulsoft-dialog {
31
- border: none !important;
32
- box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
33
- border-radius: 12px !important;
34
- overflow: hidden !important;
35
- }
36
-
37
- .p-dialog.nd-stimulsoft-dialog .p-dialog-header {
38
- background: #1e293b !important;
39
- color: #f8fafc !important;
40
- padding: 0 !important;
41
- margin: 0 !important;
42
- border: none !important;
43
- border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
44
- display: flex !important;
45
- flex-direction: row !important;
46
- align-items: center !important;
47
- min-height: 42px !important;
48
- position: relative !important;
49
- }
50
-
51
- .p-dialog.nd-stimulsoft-dialog .p-dialog-header .p-dialog-title {
52
- display: none !important;
53
- }
54
-
55
- /* Close button - position top-right */
56
- .p-dialog.nd-stimulsoft-dialog .p-dialog-header .p-dialog-header-icon {
57
- position: absolute !important;
58
- right: 10px !important;
59
- top: 6px !important;
60
- width: 30px !important;
61
- height: 30px !important;
62
- color: rgba(255, 255, 255, 0.5) !important;
63
- border-radius: 50% !important;
64
- border: 1px solid rgba(255, 255, 255, 0.2) !important;
65
- padding: 0 !important;
66
- display: flex !important;
67
- align-items: center !important;
68
- justify-content: center !important;
69
- z-index: 10 !important;
70
- }
71
-
72
- .p-dialog.nd-stimulsoft-dialog .p-dialog-header .p-dialog-header-icon:hover {
73
- color: white !important;
74
- background: rgba(255, 255, 255, 0.15) !important;
75
- }
76
-
77
- .p-dialog.nd-stimulsoft-dialog .p-dialog-content {
78
- background: #e2e8f0 !important;
79
- padding: 0 !important;
80
- display: flex !important;
81
- flex-direction: column !important;
82
- overflow: auto !important;
83
- min-height: calc(98vh - 80px) !important;
84
- }
85
-
86
- .p-dialog.nd-stimulsoft-dialog .p-dialog-footer {
87
- background: #1e293b !important;
88
- color: white !important;
89
- padding: 0 !important;
90
- margin: 0 !important;
91
- border: none !important;
92
- border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
93
- display: flex !important;
94
- flex-direction: row !important;
95
- align-items: center !important;
96
- min-height: 36px !important;
97
- }
98
-
99
- /* Cleaner preview shell in designer: keep only a close button on top */
100
- .p-dialog.nd-stimulsoft-dialog.nd-preview-dialog {
101
- width: min(1500px, 94vw) !important;
102
- max-width: 94vw !important;
103
- }
104
-
105
- .p-dialog.nd-stimulsoft-dialog.nd-preview-dialog .p-dialog-header {
106
- background: transparent !important;
107
- border: none !important;
108
- min-height: 0 !important;
109
- padding: 8px 8px 0 8px !important;
110
- }
111
-
112
- .p-dialog.nd-stimulsoft-dialog.nd-preview-dialog .p-dialog-content {
113
- min-height: calc(94vh - 16px) !important;
114
- }
115
-
116
- .p-dialog.nd-stimulsoft-dialog.nd-preview-dialog .p-dialog-footer {
117
- display: none !important;
118
- min-height: 0 !important;
119
- padding: 0 !important;
120
- border: none !important;
121
- }
122
-
123
- .nd-preview-closebar {
124
- width: 100%;
125
- display: flex;
126
- justify-content: flex-end;
127
- }
128
-
129
- .nd-preview-close-btn.p-button {
130
- width: 30px !important;
131
- height: 30px !important;
132
- border: 1px solid #cbd5e1 !important;
133
- color: #64748b !important;
134
- background: #ffffff !important;
135
- }
136
-
137
- .nd-preview-close-btn.p-button:hover {
138
- color: #111827 !important;
139
- border-color: #94a3b8 !important;
140
- background: #f8fafc !important;
141
- }
142
-
143
- .nd-st-toolbar {
144
- width: 100%;
145
- display: flex !important;
146
- flex-direction: row !important;
147
- align-items: center !important;
148
- gap: 2px !important;
149
- padding: 6px 12px !important;
150
- padding-right: 50px !important;
151
- }
152
-
153
- .nd-st-group {
154
- display: flex !important;
155
- flex-direction: row !important;
156
- align-items: center !important;
157
- gap: 2px !important;
158
- }
159
-
160
- .nd-st-divider {
161
- width: 1px !important;
162
- height: 24px !important;
163
- background: rgba(255, 255, 255, 0.15) !important;
164
- margin: 0 6px !important;
165
- flex-shrink: 0 !important;
166
- }
167
-
168
- .nd-st-spacer {
169
- flex: 1 !important;
170
- }
171
-
172
- .nd-st-viewport {
173
- flex: 1;
174
- padding: 30px;
175
- display: flex;
176
- justify-content: center;
177
- align-items: flex-start;
178
- width: 100%;
179
- overflow: auto;
180
- }
181
-
182
- .nd-st-paper-wrapper {
183
- background: white;
184
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
185
- height: min-content;
186
- width: auto;
187
- border-radius: 2px;
188
- }
189
-
190
- .nd-st-loading {
191
- display: flex;
192
- flex-direction: column;
193
- align-items: center;
194
- justify-content: center;
195
- gap: 16px;
196
- min-height: 400px;
197
- color: #64748b;
198
- font-size: 16px;
199
- }
200
-
201
- .nd-st-statusbar {
202
- width: 100%;
203
- display: flex !important;
204
- flex-direction: row !important;
205
- align-items: center !important;
206
- padding: 0 12px !important;
207
- gap: 4px !important;
208
- }
209
-
210
- .nd-st-zoom-label {
211
- color: white !important;
212
- font-family: 'Courier New', monospace !important;
213
- min-width: 50px !important;
214
- text-align: center !important;
215
- font-size: 12px !important;
216
- font-weight: 600 !important;
217
- }
218
-
219
- .nd-st-statusbar span {
220
- color: rgba(255, 255, 255, 0.8) !important;
221
- font-size: 12px !important;
222
- padding: 0 8px !important;
223
- }
224
-
225
- /* Toolbar buttons */
226
- .nd-st-toolbar .p-button {
227
- color: rgba(255, 255, 255, 0.7) !important;
228
- background: transparent !important;
229
- border: 1px solid transparent !important;
230
- padding: 4px 10px !important;
231
- font-size: 12px !important;
232
- min-height: 28px !important;
233
- border-radius: 4px !important;
234
- }
235
-
236
- .nd-st-toolbar .p-button:hover {
237
- color: white !important;
238
- background: rgba(255, 255, 255, 0.1) !important;
239
- border-color: rgba(255, 255, 255, 0.15) !important;
240
- }
241
-
242
- .nd-st-toolbar .p-button .pi {
243
- color: rgba(255, 255, 255, 0.6) !important;
244
- margin-right: 5px !important;
245
- }
246
-
247
- .nd-st-toolbar .p-button:hover .pi {
248
- color: white !important;
249
- }
250
-
251
- .nd-st-toolbar .p-button.p-button-icon-only {
252
- padding: 4px 8px !important;
253
- width: 28px !important;
254
- }
255
-
256
- .nd-st-toolbar .p-button.p-button-icon-only .pi {
257
- margin-right: 0 !important;
258
- }
259
-
260
- /* Statusbar buttons */
261
- .nd-st-statusbar .p-button {
262
- color: rgba(255, 255, 255, 0.7) !important;
263
- background: transparent !important;
264
- border: 1px solid transparent !important;
265
- padding: 0 !important;
266
- min-height: 24px !important;
267
- width: 24px !important;
268
- border-radius: 4px !important;
269
- }
270
-
271
- .nd-st-statusbar .p-button:hover {
272
- color: white !important;
273
- background: rgba(255, 255, 255, 0.1) !important;
274
- }
275
-
276
- .nd-st-statusbar .p-button .pi {
277
- color: rgba(255, 255, 255, 0.6) !important;
278
- font-size: 12px !important;
279
- }
280
-
281
- .nd-st-statusbar .p-button:hover .pi {
282
- color: white !important;
283
- }
284
-
285
- /* ============================================================
286
- DESIGNER COMPONENT STYLES
287
- ============================================================ */
288
-
289
- :root {
290
- --nd-primary: #2563eb;
291
- --nd-primary-dark: #1d4ed8;
292
- --nd-primary-light: #dbeafe;
293
- --nd-primary-ghost: rgba(37, 99, 235, 0.08);
294
- --nd-surface: #ffffff;
295
- --nd-background: #f1f5f9;
296
- --nd-background-canvas: #e2e8f0;
297
- --nd-border: #e2e8f0;
298
- --nd-border-strong: #cbd5e1;
299
- --nd-text: #1e293b;
300
- --nd-text-secondary: #64748b;
301
- --nd-text-muted: #94a3b8;
302
- --nd-success: #059669;
303
- --nd-warning: #d97706;
304
- --nd-danger: #dc2626;
305
- --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
306
- --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
307
- --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
308
- --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
309
- --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
310
- --radius-sm: 4px;
311
- --radius: 6px;
312
- --radius-md: 8px;
313
- --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
314
- }
315
-
316
- .nd-root {
317
- display: flex;
318
- flex-direction: column;
319
- height: 100vh;
320
- font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
321
- background: var(--nd-background);
322
- color: var(--nd-text);
323
- overflow: hidden;
324
- user-select: none;
325
- -webkit-font-smoothing: antialiased;
326
- }
327
-
328
- .nd-header {
329
- background: var(--nd-surface);
330
- border-bottom: 1px solid var(--nd-border);
331
- box-shadow: var(--shadow-sm);
332
- z-index: 50;
333
- }
334
-
335
- .nd-tab-bar {
336
- display: flex;
337
- padding: 6px 12px 0;
338
- gap: 2px;
339
- background: var(--nd-background);
340
- border-bottom: 1px solid var(--nd-border);
341
- align-items: flex-end;
342
- }
343
-
344
- .nd-brand {
345
- display: flex;
346
- align-items: center;
347
- gap: 8px;
348
- padding-bottom: 2px;
349
- margin-right: 8px;
350
- cursor: pointer;
351
- user-select: none;
352
- }
353
-
354
- .nd-brand-logo-ribbon {
355
- height: 20px;
356
- width: auto;
357
- flex-shrink: 0;
358
- filter: drop-shadow(0 1px 1px rgba(0,0,0,0.05));
359
- }
360
-
361
- .nd-qat {
362
- display: flex;
363
- align-items: center;
364
- gap: 2px;
365
- padding-bottom: 2px;
366
- margin-right: 6px;
367
- }
368
-
369
- .nd-qat-btn {
370
- width: 26px;
371
- height: 24px;
372
- border-radius: var(--radius-sm);
373
- border: 1px solid transparent;
374
- background: transparent;
375
- color: var(--nd-text-secondary);
376
- cursor: pointer;
377
- display: inline-flex;
378
- align-items: center;
379
- justify-content: center;
380
- transition: all var(--transition);
381
- }
382
-
383
- .nd-qat-btn:hover:not(:disabled) {
384
- background: rgba(255, 255, 255, 0.6);
385
- border-color: var(--nd-border);
386
- color: var(--nd-text);
387
- }
388
-
389
- .nd-qat-btn:disabled {
390
- opacity: 0.45;
391
- cursor: not-allowed;
392
- }
393
-
394
- .nd-qat-sep {
395
- width: 1px;
396
- height: 18px;
397
- background: var(--nd-border);
398
- margin: 0 4px;
399
- }
400
-
401
- .nd-doc-type-toggle {
402
- display: flex;
403
- align-items: center;
404
- background: rgba(0, 0, 0, 0.05);
405
- padding: 3px;
406
- border-radius: 10px;
407
- margin: 0 16px;
408
- border: 1px solid rgba(0,0,0,0.05);
409
- margin-bottom: 2px;
410
- }
411
-
412
- .nd-type-btn {
413
- padding: 4px 14px;
414
- font-size: 11px;
415
- font-weight: 700;
416
- color: #64748b;
417
- background: transparent;
418
- border: none;
419
- border-radius: 7px;
420
- cursor: pointer;
421
- transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
422
- display: flex;
423
- align-items: center;
424
- gap: 6px;
425
- height: 24px;
426
- }
427
-
428
- .nd-type-btn i {
429
- font-size: 13px;
430
- opacity: 0.7;
431
- }
432
-
433
- .nd-type-btn:hover:not(.active) {
434
- background: rgba(255, 255, 255, 0.4);
435
- color: var(--nd-text);
436
- }
437
-
438
- .nd-type-btn.active {
439
- background: white;
440
- color: var(--nd-primary);
441
- box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
442
- }
443
-
444
- .nd-type-btn.active i {
445
- opacity: 1;
446
- }
447
-
448
- .nd-tab-report-name {
449
- margin-left: auto;
450
- padding-bottom: 2px;
451
- }
452
-
453
- .nd-top-right {
454
- display: flex;
455
- align-items: center;
456
- gap: 8px;
457
- }
458
-
459
- .nd-ribbon-toggle {
460
- width: 28px;
461
- height: 26px;
462
- border-radius: var(--radius-sm);
463
- border: 1px solid var(--nd-border);
464
- background: var(--nd-surface);
465
- color: var(--nd-text-secondary);
466
- cursor: pointer;
467
- display: inline-flex;
468
- align-items: center;
469
- justify-content: center;
470
- transition: all var(--transition);
471
- }
472
-
473
- .nd-ribbon-toggle:hover {
474
- background: rgba(255, 255, 255, 0.6);
475
- color: var(--nd-text);
476
- }
477
-
478
- .nd-conn {
479
- display: inline-flex;
480
- align-items: center;
481
- gap: 6px;
482
- padding: 0 8px;
483
- height: 26px;
484
- border-radius: 999px;
485
- border: 1px solid var(--nd-border);
486
- background: var(--nd-surface);
487
- color: var(--nd-text-secondary);
488
- font-size: 11px;
489
- font-weight: 500;
490
- }
491
-
492
- .nd-conn-dot {
493
- width: 8px;
494
- height: 8px;
495
- border-radius: 999px;
496
- background: #ef4444;
497
- box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
498
- }
499
-
500
- .nd-conn.active .nd-conn-dot {
501
- background: #22c55e;
502
- box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15);
503
- }
504
-
505
- .nd-conn-text { line-height: 1; }
506
-
507
- .nd-report-name-input {
508
- height: 26px;
509
- padding: 3px 10px;
510
- font-size: 12px;
511
- font-weight: 500;
512
- color: var(--nd-text);
513
- background: var(--nd-surface);
514
- border: 1px solid var(--nd-border);
515
- border-radius: var(--radius-sm);
516
- outline: none;
517
- transition: border-color var(--transition), box-shadow var(--transition);
518
- width: 220px;
519
- }
520
-
521
- .nd-report-name-input:focus {
522
- border-color: var(--nd-primary);
523
- box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
524
- }
525
-
526
- .nd-report-name-input::placeholder {
527
- color: var(--nd-text-muted);
528
- font-weight: 400;
529
- }
530
-
531
- .nd-tab {
532
- padding: 7px 18px;
533
- font-size: 12px;
534
- font-weight: 500;
535
- cursor: pointer;
536
- color: var(--nd-text-secondary);
537
- border-radius: var(--radius-sm) var(--radius-sm) 0 0;
538
- border: 1px solid transparent;
539
- border-bottom: none;
540
- transition: all var(--transition);
541
- }
542
-
543
- .nd-tab:hover {
544
- color: var(--nd-text);
545
- background: rgba(255, 255, 255, 0.6);
546
- }
547
-
548
- .nd-tab.active {
549
- color: var(--nd-primary);
550
- background: var(--nd-surface);
551
- border-color: var(--nd-border);
552
- border-bottom-color: var(--nd-surface);
553
- margin-bottom: -1px;
554
- font-weight: 600;
555
- }
556
-
557
- .nd-tab-archivo {
558
- background: var(--nd-primary) !important;
559
- color: #fff !important;
560
- font-weight: 600 !important;
561
- border-color: transparent !important;
562
- }
563
-
564
- .nd-tab-archivo:hover {
565
- background: var(--nd-primary-dark) !important;
566
- }
567
-
568
- .nd-tab-archivo.active {
569
- background: var(--nd-primary-dark) !important;
570
- color: #fff !important;
571
- border-color: var(--nd-primary) !important;
572
- }
573
-
574
- .nd-toolbar {
575
- display: flex;
576
- min-height: 96px;
577
- background: var(--nd-surface);
578
- padding: 8px 16px;
579
- gap: 4px;
580
- align-items: stretch;
581
- overflow-x: auto;
582
- }
583
-
584
- .nd-toolbar::-webkit-scrollbar { height: 4px; }
585
- .nd-toolbar::-webkit-scrollbar-thumb { background: var(--nd-border-strong); border-radius: 4px; }
586
-
587
- .nd-group {
588
- display: flex;
589
- flex-direction: column;
590
- background: transparent;
591
- padding: 4px 8px 20px;
592
- position: relative;
593
- gap: 2px;
594
- flex-shrink: 0;
595
- }
596
-
597
- .nd-group + .nd-group {
598
- border-left: 1px solid var(--nd-border);
599
- padding-left: 12px;
600
- margin-left: 4px;
601
- }
602
-
603
- .nd-group-body {
604
- display: flex;
605
- align-items: flex-start;
606
- justify-content: center;
607
- gap: 4px;
608
- }
609
-
610
- .nd-group-title {
611
- position: absolute;
612
- bottom: 2px;
613
- left: 0;
614
- right: 0;
615
- font-size: 10px;
616
- font-weight: 500;
617
- color: var(--nd-text-muted);
618
- text-align: center;
619
- text-transform: uppercase;
620
- letter-spacing: 0.04em;
621
- }
622
-
623
- .nd-btn-lg {
624
- display: flex;
625
- flex-direction: column;
626
- align-items: center;
627
- justify-content: center;
628
- gap: 3px;
629
- padding: 6px 10px;
630
- border-radius: var(--radius);
631
- cursor: pointer;
632
- min-width: 60px;
633
- height: 68px;
634
- border: 1px solid transparent;
635
- background: transparent;
636
- transition: all var(--transition);
637
- }
638
-
639
- .nd-btn-lg:hover {
640
- background: var(--nd-primary-ghost);
641
- border-color: var(--nd-primary-light);
642
- }
643
-
644
- .nd-btn-lg:active { background: var(--nd-primary-light); }
645
- .nd-btn-lg i { font-size: 24px !important; color: var(--nd-primary); }
646
-
647
- .nd-btn-lg span {
648
- font-size: 10.5px;
649
- font-weight: 500;
650
- color: var(--nd-text-secondary);
651
- line-height: 1.2;
652
- text-align: center;
653
- }
654
-
655
- .nd-btn-lg:hover i { color: var(--nd-primary-dark); }
656
-
657
- .nd-btn-sm-col {
658
- display: flex;
659
- flex-direction: column;
660
- justify-content: center;
661
- gap: 2px;
662
- }
663
-
664
- .nd-margins-group .nd-group-body {
665
- align-items: flex-end !important;
666
- justify-content: flex-end !important;
667
- }
668
-
669
- .nd-margins-group .nd-btn-sm-col {
670
- margin-top: auto !important;
671
- }
672
-
673
- /* Forzar ancho de los InputNumber dentro de márgenes */
674
- .nd-margins-group .p-inputnumber {
675
- width: 55px !important;
676
- min-width: 55px !important;
677
- max-width: 55px !important;
678
- flex-shrink: 0 !important;
679
- }
680
-
681
- .nd-margins-group .p-inputnumber .p-inputnumber-input {
682
- width: 55px !important;
683
- min-width: 55px !important;
684
- padding-left: 6px !important;
685
- padding-right: 6px !important;
686
- }
687
-
688
- .nd-btn-sm {
689
- display: flex;
690
- align-items: center;
691
- gap: 6px;
692
- padding: 3px 10px;
693
- border-radius: var(--radius-sm);
694
- cursor: pointer;
695
- height: 24px;
696
- min-width: 100px;
697
- border: 1px solid transparent;
698
- background: transparent;
699
- transition: all var(--transition);
700
- }
701
-
702
- .nd-btn-sm:hover {
703
- background: var(--nd-primary-ghost);
704
- border-color: var(--nd-primary-light);
705
- }
706
-
707
- .nd-btn-sm i { font-size: 13px !important; color: var(--nd-primary); }
708
- .nd-btn-sm span { font-size: 11px; color: var(--nd-text-secondary); }
709
-
710
- .nd-tbar-btn {
711
- display: flex;
712
- align-items: center;
713
- justify-content: center;
714
- width: 28px;
715
- height: 26px;
716
- border-radius: var(--radius-sm);
717
- cursor: pointer;
718
- transition: all var(--transition);
719
- color: var(--nd-text-secondary);
720
- border: 1px solid transparent;
721
- background: transparent;
722
- }
723
-
724
- .nd-tbar-btn:hover {
725
- background: var(--nd-primary-ghost);
726
- color: var(--nd-primary);
727
- }
728
-
729
- .nd-tbar-btn.active { background: var(--nd-primary); color: #fff; }
730
- .nd-tbar-btn i { font-size: 13px !important; }
731
-
732
- /* Botones de formato de texto (B, I) */
733
- .nd-format-btn {
734
- font-family: Georgia, 'Times New Roman', serif;
735
- }
736
-
737
- .nd-format-text-bold {
738
- font-weight: 900;
739
- font-size: 15px;
740
- line-height: 1;
741
- color: var(--nd-text-secondary);
742
- }
743
-
744
- .nd-format-text-italic {
745
- font-style: italic;
746
- font-weight: 700;
747
- font-size: 15px;
748
- line-height: 1;
749
- color: var(--nd-text-secondary);
750
- }
751
-
752
- .nd-tbar-btn.active .nd-format-text-bold,
753
- .nd-tbar-btn.active .nd-format-text-italic {
754
- color: #fff;
755
- }
756
-
757
- /* Botón de color de texto */
758
- .nd-color-btn {
759
- position: relative;
760
- }
761
-
762
- .nd-color-btn:hover {
763
- background: var(--nd-primary-ghost);
764
- }
765
-
766
- .nd-font-block { display: flex; flex-direction: column; gap: 4px; }
767
- .nd-font-block .nd-row { display: flex; gap: 4px; align-items: center; }
768
-
769
- .nd-body { flex: 1; display: flex; overflow: hidden; position: relative; }
770
-
771
- .nd-backstage {
772
- flex: 1;
773
- display: flex;
774
- overflow: hidden;
775
- background: var(--nd-background);
776
- min-height: 0;
777
- }
778
-
779
- .nd-backstage-left {
780
- width: 260px;
781
- flex-shrink: 0;
782
- background: #0f172a;
783
- color: #e2e8f0;
784
- display: flex;
785
- flex-direction: column;
786
- padding: 10px;
787
- gap: 6px;
788
- }
789
-
790
- .nd-backstage-back {
791
- height: 34px;
792
- border-radius: 10px;
793
- border: 1px solid rgba(255, 255, 255, 0.15);
794
- background: rgba(255, 255, 255, 0.06);
795
- color: #e2e8f0;
796
- display: flex;
797
- align-items: center;
798
- gap: 10px;
799
- padding: 0 12px;
800
- cursor: pointer;
801
- transition: all var(--transition);
802
- }
803
-
804
- .nd-backstage-back:hover {
805
- background: rgba(255, 255, 255, 0.12);
806
- border-color: rgba(255, 255, 255, 0.2);
807
- }
808
-
809
- .nd-backstage-section {
810
- margin-top: 10px;
811
- padding: 0 6px;
812
- font-size: 10px;
813
- font-weight: 800;
814
- letter-spacing: 0.08em;
815
- text-transform: uppercase;
816
- color: rgba(226, 232, 240, 0.7);
817
- }
818
-
819
- .nd-backstage-item {
820
- height: 34px;
821
- border-radius: 10px;
822
- border: 1px solid transparent;
823
- background: transparent;
824
- color: #e2e8f0;
825
- display: flex;
826
- align-items: center;
827
- gap: 10px;
828
- padding: 0 10px;
829
- cursor: pointer;
830
- transition: all var(--transition);
831
- }
832
-
833
- .nd-backstage-item:hover:not(:disabled) {
834
- background: rgba(59, 130, 246, 0.18);
835
- border-color: rgba(59, 130, 246, 0.25);
836
- }
837
-
838
- .nd-backstage-item.active {
839
- background: rgba(59, 130, 246, 0.26);
840
- border-color: rgba(59, 130, 246, 0.35);
841
- }
842
-
843
- .nd-backstage-item:disabled {
844
- opacity: 0.45;
845
- cursor: not-allowed;
846
- }
847
-
848
- .nd-backstage-spacer { flex: 1; }
849
-
850
- .nd-backstage-main {
851
- flex: 1;
852
- min-width: 0;
853
- padding: 22px 24px;
854
- overflow: auto;
855
- }
856
-
857
- .nd-backstage-header {
858
- padding: 0 2px 16px;
859
- }
860
-
861
- .nd-backstage-title {
862
- font-size: 20px;
863
- font-weight: 900;
864
- color: var(--nd-text);
865
- line-height: 1.2;
866
- }
867
-
868
- .nd-backstage-sub {
869
- font-size: 12px;
870
- color: var(--nd-text-secondary);
871
- margin-top: 4px;
872
- }
873
-
874
- .nd-backstage-grid {
875
- display: grid;
876
- grid-template-columns: repeat(3, minmax(0, 1fr));
877
- gap: 12px;
878
- }
879
-
880
- .nd-backstage-view {
881
- display: flex;
882
- flex-direction: column;
883
- gap: 12px;
884
- }
885
-
886
- .nd-bs-view {
887
- display: flex;
888
- align-items: flex-start;
889
- justify-content: flex-start;
890
- }
891
-
892
- .nd-bs-view-card {
893
- width: min(820px, 100%);
894
- border: 1px solid var(--nd-border);
895
- background: var(--nd-surface);
896
- border-radius: 12px;
897
- padding: 16px;
898
- box-shadow: var(--shadow-sm);
899
- }
900
-
901
- .nd-bs-view-title {
902
- font-size: 14px;
903
- font-weight: 900;
904
- color: var(--nd-text);
905
- }
906
-
907
- .nd-bs-view-desc {
908
- font-size: 12px;
909
- color: var(--nd-text-secondary);
910
- margin-top: 4px;
911
- }
912
-
913
- .nd-bs-view-actions {
914
- display: flex;
915
- flex-wrap: wrap;
916
- gap: 8px;
917
- margin-top: 12px;
918
- }
919
-
920
- .nd-bs-primary,
921
- .nd-bs-secondary {
922
- height: 34px;
923
- padding: 0 12px;
924
- border-radius: 10px;
925
- border: 1px solid #d1d5db;
926
- background: #ffffff;
927
- color: #0f172a;
928
- cursor: pointer;
929
- display: inline-flex;
930
- align-items: center;
931
- gap: 8px;
932
- transition: all var(--transition);
933
- }
934
-
935
- .nd-bs-primary {
936
- background: var(--nd-primary);
937
- border-color: var(--nd-primary-dark);
938
- color: #ffffff;
939
- }
940
-
941
- .nd-bs-primary:hover:not(:disabled) {
942
- background: var(--nd-primary-dark);
943
- }
944
-
945
- .nd-bs-secondary:hover:not(:disabled) {
946
- background: #f3f4f6;
947
- }
948
-
949
- .nd-bs-primary:disabled,
950
- .nd-bs-secondary:disabled {
951
- opacity: 0.55;
952
- cursor: not-allowed;
953
- }
954
-
955
- .nd-bs-form {
956
- margin-top: 12px;
957
- display: grid;
958
- grid-template-columns: 1fr;
959
- gap: 8px;
960
- }
961
-
962
- .nd-bs-label {
963
- font-size: 11px;
964
- font-weight: 700;
965
- color: var(--nd-text-secondary);
966
- }
967
-
968
- .nd-bs-input {
969
- height: 34px;
970
- border-radius: 10px;
971
- border: 1px solid var(--nd-border);
972
- padding: 0 10px;
973
- outline: none;
974
- font-size: 12px;
975
- background: #ffffff;
976
- transition: border-color var(--transition), box-shadow var(--transition);
977
- }
978
-
979
- .nd-bs-input:focus {
980
- border-color: var(--nd-primary);
981
- box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
982
- }
983
-
984
- .nd-bs-meta {
985
- margin-top: 12px;
986
- border: 1px solid var(--nd-border);
987
- border-radius: 12px;
988
- overflow: hidden;
989
- }
990
-
991
- .nd-bs-meta-row {
992
- display: flex;
993
- justify-content: space-between;
994
- gap: 12px;
995
- padding: 10px 12px;
996
- font-size: 12px;
997
- color: var(--nd-text);
998
- background: #ffffff;
999
- }
1000
-
1001
- .nd-bs-meta-row + .nd-bs-meta-row {
1002
- border-top: 1px solid var(--nd-border);
1003
- }
1004
-
1005
- .nd-bs-meta-row span:first-child {
1006
- color: var(--nd-text-secondary);
1007
- font-weight: 700;
1008
- }
1009
-
1010
- .nd-bs-meta-row span:last-child {
1011
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
1012
- }
1013
-
1014
- .nd-bs-callout {
1015
- margin-top: 12px;
1016
- border: 1px solid var(--nd-border);
1017
- border-radius: 12px;
1018
- background: #f8fafc;
1019
- padding: 12px;
1020
- }
1021
-
1022
- .nd-bs-callout-title {
1023
- font-size: 12px;
1024
- font-weight: 900;
1025
- color: var(--nd-text);
1026
- }
1027
-
1028
- .nd-bs-callout-desc {
1029
- font-size: 12px;
1030
- color: var(--nd-text-secondary);
1031
- margin-top: 4px;
1032
- }
1033
-
1034
- .nd-bs-open {
1035
- margin-top: 12px;
1036
- }
1037
-
1038
- .nd-bs-open-top {
1039
- display: flex;
1040
- justify-content: flex-end;
1041
- margin-bottom: 10px;
1042
- }
1043
-
1044
- .nd-bs-open-list {
1045
- position: relative;
1046
- }
1047
-
1048
- .nd-bs-open-item {
1049
- display: flex;
1050
- flex-direction: column;
1051
- gap: 2px;
1052
- padding: 4px 0;
1053
- }
1054
-
1055
- .nd-bs-open-name {
1056
- display: flex;
1057
- align-items: center;
1058
- gap: 8px;
1059
- font-size: 12px;
1060
- font-weight: 700;
1061
- color: var(--nd-text);
1062
- }
1063
-
1064
- .nd-bs-pin {
1065
- width: 24px;
1066
- height: 22px;
1067
- border-radius: 8px;
1068
- border: 1px solid var(--nd-border);
1069
- background: #ffffff;
1070
- color: var(--nd-text-muted);
1071
- cursor: pointer;
1072
- display: inline-flex;
1073
- align-items: center;
1074
- justify-content: center;
1075
- transition: all var(--transition);
1076
- flex-shrink: 0;
1077
- }
1078
-
1079
- .nd-bs-pin:hover {
1080
- background: #f8fafc;
1081
- color: var(--nd-text);
1082
- }
1083
-
1084
- .nd-bs-recents {
1085
- margin-bottom: 12px;
1086
- display: grid;
1087
- grid-template-columns: 1fr 1fr;
1088
- gap: 10px;
1089
- }
1090
-
1091
- .nd-bs-recents-block {
1092
- border: 1px solid var(--nd-border);
1093
- border-radius: 12px;
1094
- background: #ffffff;
1095
- overflow: hidden;
1096
- }
1097
-
1098
- .nd-bs-recents-title {
1099
- padding: 8px 10px;
1100
- font-size: 11px;
1101
- font-weight: 900;
1102
- letter-spacing: 0.06em;
1103
- text-transform: uppercase;
1104
- background: #f8fafc;
1105
- border-bottom: 1px solid var(--nd-border);
1106
- color: var(--nd-text-secondary);
1107
- }
1108
-
1109
- .nd-bs-recents-list {
1110
- display: flex;
1111
- flex-direction: column;
1112
- }
1113
-
1114
- .nd-bs-recents-item {
1115
- display: flex;
1116
- justify-content: space-between;
1117
- gap: 10px;
1118
- padding: 8px 10px;
1119
- border: none;
1120
- background: transparent;
1121
- cursor: pointer;
1122
- text-align: left;
1123
- transition: background var(--transition);
1124
- }
1125
-
1126
- .nd-bs-recents-item:hover {
1127
- background: var(--nd-primary-ghost);
1128
- }
1129
-
1130
- .nd-bs-recents-name {
1131
- font-size: 12px;
1132
- font-weight: 700;
1133
- color: var(--nd-text);
1134
- overflow: hidden;
1135
- text-overflow: ellipsis;
1136
- white-space: nowrap;
1137
- }
1138
-
1139
- .nd-bs-recents-meta {
1140
- font-size: 11px;
1141
- color: var(--nd-text-muted);
1142
- flex-shrink: 0;
1143
- }
1144
-
1145
- .nd-bs-open-meta {
1146
- font-size: 11px;
1147
- color: var(--nd-text-muted);
1148
- }
1149
-
1150
- .nd-bs-empty {
1151
- padding: 10px 4px 0;
1152
- font-size: 12px;
1153
- color: var(--nd-text-muted);
1154
- }
1155
- .nd-bs-card {
1156
- text-align: left;
1157
- border: 1px solid var(--nd-border);
1158
- background: var(--nd-surface);
1159
- border-radius: 12px;
1160
- padding: 14px 14px 12px;
1161
- cursor: pointer;
1162
- transition: all var(--transition);
1163
- box-shadow: var(--shadow-sm);
1164
- }
1165
-
1166
- .nd-bs-card:hover:not(:disabled) {
1167
- border-color: var(--nd-primary-light);
1168
- box-shadow: var(--shadow);
1169
- transform: translateY(-1px);
1170
- }
1171
-
1172
- .nd-bs-card:disabled {
1173
- opacity: 0.55;
1174
- cursor: not-allowed;
1175
- transform: none;
1176
- }
1177
-
1178
- .nd-bs-card-ico {
1179
- width: 34px;
1180
- height: 34px;
1181
- border-radius: 10px;
1182
- background: var(--nd-primary-ghost);
1183
- border: 1px solid var(--nd-primary-light);
1184
- color: var(--nd-primary);
1185
- display: flex;
1186
- align-items: center;
1187
- justify-content: center;
1188
- margin-bottom: 10px;
1189
- }
1190
-
1191
- .nd-bs-card-ico i { font-size: 16px; }
1192
-
1193
- .nd-bs-card-title {
1194
- font-size: 13px;
1195
- font-weight: 800;
1196
- color: var(--nd-text);
1197
- }
1198
-
1199
- .nd-bs-card-desc {
1200
- font-size: 12px;
1201
- color: var(--nd-text-secondary);
1202
- margin-top: 2px;
1203
- }
1204
-
1205
- .nd-backstage-meta {
1206
- margin-top: 16px;
1207
- border: 1px solid var(--nd-border);
1208
- border-radius: 12px;
1209
- overflow: hidden;
1210
- background: var(--nd-surface);
1211
- }
1212
-
1213
- .nd-backstage-meta-row {
1214
- display: flex;
1215
- justify-content: space-between;
1216
- gap: 12px;
1217
- padding: 10px 12px;
1218
- font-size: 12px;
1219
- color: var(--nd-text);
1220
- }
1221
-
1222
- .nd-backstage-meta-row + .nd-backstage-meta-row {
1223
- border-top: 1px solid var(--nd-border);
1224
- }
1225
-
1226
- .nd-backstage-meta-row span:first-child {
1227
- color: var(--nd-text-secondary);
1228
- font-weight: 700;
1229
- }
1230
-
1231
- .nd-backstage-meta-row span:last-child {
1232
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
1233
- }
1234
-
1235
- .nd-sidebar {
1236
- background: var(--nd-surface);
1237
- border-left: 1px solid var(--nd-border);
1238
- display: flex;
1239
- flex-direction: column;
1240
- box-shadow: -2px 0 8px rgba(0, 0, 0, 0.04);
1241
- }
1242
-
1243
- .nd-sidebar-panels {
1244
- flex: 1;
1245
- overflow-y: auto;
1246
- overflow-x: hidden;
1247
- }
1248
-
1249
- .nd-sidebar-panels::-webkit-scrollbar { width: 6px; }
1250
- .nd-sidebar-panels::-webkit-scrollbar-thumb { background: var(--nd-border-strong); border-radius: 4px; }
1251
-
1252
- .nd-panel-title {
1253
- padding: 10px 14px;
1254
- background: var(--nd-background);
1255
- font-weight: 700;
1256
- font-size: 11px;
1257
- color: var(--nd-text);
1258
- border-bottom: 1px solid var(--nd-border);
1259
- text-transform: uppercase;
1260
- letter-spacing: 0.04em;
1261
- position: sticky;
1262
- top: 0;
1263
- z-index: 10;
1264
- }
1265
-
1266
- .nd-panel-subtitle {
1267
- font-size: 10px;
1268
- font-weight: 700;
1269
- text-transform: uppercase;
1270
- color: var(--nd-text-muted);
1271
- margin: 14px 0 6px;
1272
- padding: 0 12px;
1273
- letter-spacing: 0.04em;
1274
- }
1275
-
1276
- .nd-sidebar-tabs {
1277
- height: 36px;
1278
- display: flex;
1279
- background: var(--nd-surface);
1280
- border-top: 1px solid var(--nd-border);
1281
- flex-shrink: 0;
1282
- }
1283
-
1284
- .nd-side-tab {
1285
- flex: 1;
1286
- display: flex;
1287
- align-items: center;
1288
- justify-content: center;
1289
- gap: 5px;
1290
- font-size: 11px;
1291
- font-weight: 500;
1292
- cursor: pointer;
1293
- border-right: 1px solid var(--nd-border);
1294
- color: var(--nd-text-muted);
1295
- transition: all var(--transition);
1296
- background: transparent;
1297
- }
1298
-
1299
- .nd-side-tab:last-child { border-right: none; }
1300
- .nd-side-tab:hover { color: var(--nd-text); background: var(--nd-primary-ghost); }
1301
-
1302
- .nd-side-tab.active {
1303
- color: var(--nd-primary);
1304
- background: var(--nd-primary-light);
1305
- font-weight: 600;
1306
- }
1307
-
1308
- .nd-side-tab i { font-size: 13px; }
1309
-
1310
- .nd-coll-group { margin: 2px 6px; }
1311
-
1312
- .nd-coll-header {
1313
- display: flex;
1314
- align-items: center;
1315
- gap: 8px;
1316
- padding: 7px 10px;
1317
- cursor: pointer;
1318
- background: transparent;
1319
- border-radius: var(--radius-sm);
1320
- font-size: 12px;
1321
- font-weight: 500;
1322
- color: var(--nd-text);
1323
- transition: all var(--transition);
1324
- }
1325
-
1326
- .nd-coll-header:hover { background: var(--nd-primary-ghost); color: var(--nd-primary); }
1327
- .nd-coll-header i { font-size: 11px; color: var(--nd-text-muted); }
1328
- .nd-coll-header:hover i { color: var(--nd-primary); }
1329
-
1330
- .nd-field-list { padding: 2px 0 4px 26px; }
1331
-
1332
- .nd-field-item {
1333
- display: flex;
1334
- align-items: center;
1335
- gap: 8px;
1336
- padding: 5px 8px;
1337
- font-size: 12px;
1338
- color: var(--nd-text-secondary);
1339
- cursor: grab;
1340
- border-radius: var(--radius-sm);
1341
- transition: all var(--transition);
1342
- border: 1px solid transparent;
1343
- }
1344
-
1345
- .nd-field-item:hover {
1346
- background: var(--nd-primary-light);
1347
- color: var(--nd-primary);
1348
- border-color: var(--nd-primary-light);
1349
- }
1350
-
1351
- .nd-field-item:active { cursor: grabbing; }
1352
- .nd-field-item i { font-size: 10px; color: var(--nd-text-muted); }
1353
-
1354
- .nd-item {
1355
- padding: 9px 14px;
1356
- font-size: 12px;
1357
- cursor: pointer;
1358
- display: flex;
1359
- align-items: center;
1360
- gap: 10px;
1361
- color: var(--nd-text-secondary);
1362
- border-radius: var(--radius-sm);
1363
- margin: 1px 6px;
1364
- transition: all var(--transition);
1365
- }
1366
-
1367
- .nd-item:hover { background: var(--nd-primary-ghost); color: var(--nd-primary); }
1368
- .nd-item i { font-size: 13px; color: var(--nd-text-muted); }
1369
-
1370
- .nd-props { padding: 4px 0; }
1371
-
1372
- .nd-props-context {
1373
- display: flex;
1374
- align-items: center;
1375
- justify-content: space-between;
1376
- gap: 10px;
1377
- padding: 10px 12px;
1378
- border-bottom: 1px solid var(--nd-border);
1379
- background: var(--nd-surface);
1380
- }
1381
-
1382
- .nd-props-context-title {
1383
- font-size: 12px;
1384
- font-weight: 700;
1385
- color: var(--nd-text);
1386
- line-height: 1.1;
1387
- }
1388
-
1389
- .nd-props-context-sub {
1390
- font-size: 10px;
1391
- color: var(--nd-text-muted);
1392
- line-height: 1.1;
1393
- margin-top: 2px;
1394
- }
1395
-
1396
- .nd-props-context-actions {
1397
- display: flex;
1398
- align-items: center;
1399
- gap: 4px;
1400
- }
1401
-
1402
- .nd-props-section {
1403
- margin: 10px 10px 0;
1404
- border: 1px solid var(--nd-border);
1405
- border-radius: var(--radius);
1406
- overflow: hidden;
1407
- background: var(--nd-surface);
1408
- }
1409
-
1410
- .nd-props-section-head {
1411
- display: flex;
1412
- align-items: center;
1413
- gap: 8px;
1414
- padding: 8px 10px;
1415
- cursor: pointer;
1416
- user-select: none;
1417
- background: #f8fafc;
1418
- color: var(--nd-text);
1419
- font-size: 11px;
1420
- font-weight: 700;
1421
- text-transform: uppercase;
1422
- letter-spacing: 0.04em;
1423
- }
1424
-
1425
- .nd-props-section-head:hover {
1426
- background: var(--nd-primary-ghost);
1427
- color: var(--nd-primary);
1428
- }
1429
-
1430
- .nd-props-section-body {
1431
- padding: 10px 10px 2px;
1432
- }
1433
-
1434
- .p-dialog.nd-about-dialog {
1435
- border-radius: 12px;
1436
- overflow: hidden;
1437
- }
1438
-
1439
- .p-dialog.nd-about-dialog .p-dialog-header {
1440
- background: var(--nd-surface);
1441
- border-bottom: 1px solid var(--nd-border);
1442
- }
1443
-
1444
- .p-dialog.nd-about-dialog .p-dialog-content {
1445
- background: var(--nd-surface);
1446
- }
1447
-
1448
- .p-dialog.nd-about-dialog .p-dialog-footer {
1449
- background: var(--nd-surface);
1450
- border-top: 1px solid var(--nd-border);
1451
- }
1452
-
1453
- .nd-about-body {
1454
- padding: 4px 2px 2px;
1455
- }
1456
-
1457
- .nd-about-hero {
1458
- display: flex;
1459
- align-items: center;
1460
- gap: 12px;
1461
- padding: 10px 12px 8px;
1462
- border: 1px solid var(--nd-border);
1463
- border-radius: 12px;
1464
- background: #f8fafc;
1465
- }
1466
-
1467
- .nd-about-logo {
1468
- width: 48px;
1469
- height: 48px;
1470
- border-radius: 12px;
1471
- background: #ffffff;
1472
- border: 1px solid var(--nd-border);
1473
- display: flex;
1474
- align-items: center;
1475
- justify-content: center;
1476
- flex-shrink: 0;
1477
- }
1478
-
1479
- .nd-about-logo-img {
1480
- width: 100%;
1481
- height: 100%;
1482
- object-fit: contain;
1483
- }
1484
-
1485
- .nd-about-title {
1486
- font-size: 14px;
1487
- font-weight: 900;
1488
- color: var(--nd-text);
1489
- line-height: 1.2;
1490
- }
1491
-
1492
- .nd-about-sub {
1493
- font-size: 12px;
1494
- color: var(--nd-text-secondary);
1495
- margin-top: 2px;
1496
- }
1497
-
1498
- .nd-about-kv {
1499
- margin-top: 12px;
1500
- border: 1px solid var(--nd-border);
1501
- border-radius: 12px;
1502
- overflow: hidden;
1503
- }
1504
-
1505
- .nd-about-row {
1506
- display: flex;
1507
- justify-content: space-between;
1508
- gap: 12px;
1509
- padding: 10px 12px;
1510
- font-size: 12px;
1511
- color: var(--nd-text);
1512
- background: #ffffff;
1513
- }
1514
-
1515
- .nd-about-row + .nd-about-row {
1516
- border-top: 1px solid var(--nd-border);
1517
- }
1518
-
1519
- .nd-about-row span:first-child {
1520
- color: var(--nd-text-secondary);
1521
- font-weight: 600;
1522
- }
1523
-
1524
- .nd-about-row span:last-child {
1525
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
1526
- color: var(--nd-text);
1527
- }
1528
-
1529
- .nd-about-footer {
1530
- display: flex;
1531
- justify-content: flex-end;
1532
- padding: 2px 0;
1533
- }
1534
-
1535
- /* ─── MANUAL FIELDS ─────────────────────────────────────────────────── */
1536
- .nd-manual-field {
1537
- position: relative;
1538
- background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
1539
- border-color: #c4b5fd;
1540
- }
1541
-
1542
- .nd-manual-field:hover {
1543
- background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
1544
- border-color: #8b5cf6;
1545
- }
1546
-
1547
- .nd-manual-badge {
1548
- font-size: 9px;
1549
- padding: 1px 5px;
1550
- background: #8b5cf6;
1551
- color: white;
1552
- border-radius: 3px;
1553
- margin-left: auto;
1554
- font-weight: 500;
1555
- }
1556
-
1557
- .nd-field-delete {
1558
- opacity: 0;
1559
- transition: opacity 0.15s;
1560
- }
1561
-
1562
- .nd-field-item:hover .nd-field-delete {
1563
- opacity: 1;
1564
- }
1565
-
1566
- .nd-empty-state {
1567
- padding: 12px;
1568
- text-align: center;
1569
- color: var(--nd-text-muted);
1570
- font-style: italic;
1571
- }
1572
-
1573
- /* ─── MANUAL FIELDS LIST IN TAB DATOS ──────────────────────────────── */
1574
- .nd-manual-fields-list {
1575
- display: flex;
1576
- flex-direction: column;
1577
- gap: 4px;
1578
- margin-top: 6px;
1579
- }
1580
-
1581
- .nd-manual-field-item {
1582
- display: flex;
1583
- align-items: center;
1584
- gap: 6px;
1585
- padding: 5px 8px;
1586
- background: #f9fafb;
1587
- border: 1px solid #e5e7eb;
1588
- border-radius: 4px;
1589
- font-size: 11px;
1590
- }
1591
-
1592
- .nd-manual-field-info {
1593
- flex: 1;
1594
- display: flex;
1595
- flex-direction: column;
1596
- gap: 1px;
1597
- }
1598
-
1599
- .nd-manual-field-name {
1600
- font-weight: 500;
1601
- color: var(--nd-text-primary);
1602
- }
1603
-
1604
- .nd-manual-field-type {
1605
- color: var(--nd-text-muted);
1606
- font-size: 9px;
1607
- }
1608
-
1609
- /* ─── DATA SOURCE RELATIONS ─────────────────────────────────────────── */
1610
- .nd-relations-list {
1611
- display: flex;
1612
- flex-direction: column;
1613
- gap: 4px;
1614
- margin-top: 6px;
1615
- }
1616
-
1617
- .nd-relation-item {
1618
- display: flex;
1619
- align-items: center;
1620
- gap: 6px;
1621
- padding: 5px 8px;
1622
- background: #fffbeb;
1623
- border: 1px solid #fde68a;
1624
- border-radius: 4px;
1625
- font-size: 11px;
1626
- }
1627
-
1628
- .nd-relation-info {
1629
- flex: 1;
1630
- display: flex;
1631
- flex-direction: column;
1632
- gap: 1px;
1633
- }
1634
-
1635
- .nd-relation-label {
1636
- font-weight: 500;
1637
- color: var(--nd-text-primary);
1638
- }
1639
-
1640
- .nd-relation-detail {
1641
- color: var(--nd-text-muted);
1642
- font-size: 9px;
1643
- font-family: monospace;
1644
- }
1645
-
1646
- /* ─── DATA SOURCE PREVIEW ──────────────────────────────────────────── */
1647
- .nd-ds-preview {
1648
- margin-top: 6px;
1649
- padding-top: 6px;
1650
- border-top: 1px dashed #e5e7eb;
1651
- }
1652
-
1653
- .nd-preview-table {
1654
- margin-top: 6px;
1655
- overflow-x: auto;
1656
- }
1657
-
1658
- .nd-preview-table-inner {
1659
- width: 100%;
1660
- font-size: 9px;
1661
- border-collapse: collapse;
1662
- }
1663
-
1664
- .nd-preview-table-inner th,
1665
- .nd-preview-table-inner td {
1666
- padding: 3px 5px;
1667
- border: 1px solid #e5e7eb;
1668
- text-align: left;
1669
- white-space: nowrap;
1670
- overflow: hidden;
1671
- text-overflow: ellipsis;
1672
- }
1673
-
1674
- .nd-preview-table-inner th {
1675
- background: #f3f4f6;
1676
- font-weight: 600;
1677
- color: var(--nd-text-primary);
1678
- }
1679
-
1680
- .nd-preview-table-inner td {
1681
- color: var(--nd-text-secondary);
1682
- }
1683
-
1684
- .nd-preview-count {
1685
- display: block;
1686
- margin-top: 3px;
1687
- font-size: 8px;
1688
- color: var(--nd-text-muted);
1689
- text-align: center;
1690
- }
1691
-
1692
- /* Tabla de preview completa en diálogo modal */
1693
- .nd-preview-table-full {
1694
- width: 100% !important;
1695
- border-collapse: collapse;
1696
- font-size: 12px;
1697
- }
1698
-
1699
- .nd-preview-table-full th,
1700
- .nd-preview-table-full td {
1701
- padding: 6px 10px;
1702
- border: 1px solid #e5e7eb;
1703
- text-align: left;
1704
- white-space: nowrap;
1705
- overflow: hidden;
1706
- text-overflow: ellipsis;
1707
- max-width: 200px;
1708
- }
1709
-
1710
- .nd-preview-table-full th {
1711
- background: #f3f4f6;
1712
- font-weight: 600;
1713
- color: var(--nd-text-primary);
1714
- position: sticky;
1715
- top: 0;
1716
- z-index: 1;
1717
- }
1718
-
1719
- .nd-preview-table-full td {
1720
- color: var(--nd-text-secondary);
1721
- }
1722
-
1723
- .nd-preview-table-full tbody tr:nth-child(even) {
1724
- background: #fafafa;
1725
- }
1726
-
1727
- .nd-preview-table-full tbody tr:hover {
1728
- background: #f0f7ff;
1729
- }
1730
-
1731
- /* ─── DRILLDOWN EDITOR ─────────────────────────────────────────────── */
1732
- .nd-param-mapping {
1733
- display: grid;
1734
- grid-template-columns: 1fr 1fr auto;
1735
- gap: 8px;
1736
- align-items: end;
1737
- padding: 8px;
1738
- background: #f9fafb;
1739
- border: 1px solid #e5e7eb;
1740
- border-radius: 6px;
1741
- margin-bottom: 8px;
1742
- }
1743
-
1744
- .nd-color-picker {
1745
- width: 32px;
1746
- height: 28px;
1747
- border: 1px solid #d1d5db;
1748
- border-radius: 4px;
1749
- cursor: pointer;
1750
- padding: 0;
1751
- }
1752
-
1753
- /* ─── WATERMARK DIALOG ─────────────────────────────────────────────── */
1754
- .nd-wm-dialog .p-dialog-header {
1755
- background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
1756
- }
1757
- .nd-wm-dialog .p-dialog-content {
1758
- padding: 16px 20px !important;
1759
- overflow: visible !important;
1760
- }
1761
- .nd-wm-dialog .p-dialog-footer {
1762
- padding: 8px 20px 12px !important;
1763
- }
1764
-
1765
- /* Override PrimeVue sizes for compact ribbon inputs */
1766
- .p-inputtext-xs.p-inputtext {
1767
- font-size: 11px !important;
1768
- padding: 3px 6px !important;
1769
- height: 24px !important;
1770
- }
1771
-
1772
- .p-inputnumber-xs.p-inputnumber {
1773
- font-size: 11px !important;
1774
- }
1775
-
1776
- .p-inputnumber-xs .p-inputnumber-input {
1777
- font-size: 11px !important;
1778
- padding: 3px 6px !important;
1779
- height: 24px !important;
1780
- }
1781
-
1782
- .p-dropdown-xs.p-dropdown {
1783
- font-size: 11px !important;
1784
- }
1785
-
1786
- .p-dropdown-xs .p-dropdown-label {
1787
- font-size: 11px !important;
1788
- padding: 3px 8px !important;
1789
- height: 24px !important;
1790
- }
1791
-
1792
- .p-dropdown-xs .p-dropdown-trigger {
1793
- width: 24px !important;
1794
- }
1795
-
1796
- .nd-field {
1797
- padding: 6px 12px;
1798
- display: flex;
1799
- flex-direction: column;
1800
- gap: 4px;
1801
- }
1802
-
1803
- .nd-field label {
1804
- font-size: 10px;
1805
- font-weight: 600;
1806
- color: var(--nd-text-muted);
1807
- text-transform: uppercase;
1808
- letter-spacing: 0.04em;
1809
- }
1810
-
1811
- .nd-field-row { display: flex; gap: 8px; padding: 4px 12px; }
1812
-
1813
- .nd-val-badge {
1814
- display: inline-block;
1815
- padding: 2px 8px;
1816
- background: var(--nd-primary-light);
1817
- color: var(--nd-primary);
1818
- border-radius: var(--radius-sm);
1819
- font-size: 11px;
1820
- font-weight: 600;
1821
- }
1822
-
1823
- .nd-empty { padding: 30px 20px; text-align: center; color: var(--nd-text-muted); font-size: 12px; }
1824
- .nd-help-text { padding: 10px 12px; font-size: 11px; color: var(--nd-text-muted); line-height: 1.5; }
1825
-
1826
- .nd-connection-indicator {
1827
- display: flex;
1828
- align-items: center;
1829
- gap: 8px;
1830
- padding: 10px 12px;
1831
- margin: 8px;
1832
- background: #ecfdf5;
1833
- border-radius: var(--radius);
1834
- font-size: 11px;
1835
- color: var(--nd-success);
1836
- border: 1px solid #a7f3d0;
1837
- }
1838
-
1839
- .nd-connection-indicator i { font-size: 14px; }
1840
-
1841
- .nd-table-editor { padding: 0 12px; }
1842
-
1843
- .nd-col-edit-card {
1844
- background: var(--nd-background);
1845
- border: 1px solid var(--nd-border);
1846
- border-radius: var(--radius);
1847
- padding: 10px;
1848
- margin-bottom: 8px;
1849
- transition: border-color var(--transition);
1850
- }
1851
-
1852
- .nd-col-edit-card:hover { border-color: var(--nd-border-strong); }
1853
-
1854
- .nd-col-header {
1855
- display: flex;
1856
- justify-content: space-between;
1857
- align-items: center;
1858
- margin-bottom: 8px;
1859
- font-weight: 600;
1860
- font-size: 11px;
1861
- color: var(--nd-primary);
1862
- }
1863
-
1864
- .nd-actions { border-top: 1px solid var(--nd-border); padding-top: 12px; margin-top: 8px; }
1865
-
1866
- .nd-textarea { resize: vertical; min-height: 60px; font-size: 12px; line-height: 1.5; }
1867
-
1868
- .nd-workspace {
1869
- flex: 1;
1870
- display: grid;
1871
- grid-template-columns: 30px 1fr;
1872
- grid-template-rows: 28px 1fr;
1873
- background: var(--nd-background-canvas);
1874
- position: relative;
1875
- overflow: hidden;
1876
- }
1877
-
1878
- .nd-corner {
1879
- grid-area: 1 / 1;
1880
- background: var(--nd-surface);
1881
- border-right: 1px solid var(--nd-border);
1882
- border-bottom: 1px solid var(--nd-border);
1883
- z-index: 60;
1884
- }
1885
-
1886
- .nd-ruler-h {
1887
- grid-area: 1 / 2;
1888
- height: 28px;
1889
- background: var(--nd-surface);
1890
- border-bottom: 1px solid var(--nd-border);
1891
- position: relative;
1892
- z-index: 50;
1893
- overflow: hidden;
1894
- }
1895
-
1896
- .nd-ruler-h-inner {
1897
- width: 794px; /* A4 width — matches paper */
1898
- height: 100%;
1899
- position: relative;
1900
- margin: 0 auto;
1901
- }
1902
-
1903
- .nd-ruler-v {
1904
- grid-area: 2 / 1;
1905
- width: 34px;
1906
- background: var(--nd-surface);
1907
- border-right: 1px solid var(--nd-border);
1908
- position: relative;
1909
- z-index: 50;
1910
- overflow: visible;
1911
- }
1912
-
1913
- .nd-ruler-v-inner { width: 100%; height: 100%; position: relative; }
1914
-
1915
- .nd-tick-h {
1916
- position: absolute;
1917
- top: 0;
1918
- height: 100%;
1919
- width: 1px;
1920
- border-left: 1px solid var(--nd-border);
1921
- font-size: 9px;
1922
- color: var(--nd-text-muted);
1923
- font-weight: 500;
1924
- text-align: center;
1925
- padding-top: 14px;
1926
- padding-left: 0;
1927
- transform: translateX(-50%);
1928
- }
1929
-
1930
- .nd-tick-v {
1931
- position: absolute;
1932
- left: 0;
1933
- width: 100%;
1934
- height: 1px;
1935
- border-top: 1px solid var(--nd-border);
1936
- }
1937
-
1938
- .nd-v-lbl {
1939
- font-size: 9px;
1940
- color: var(--nd-text-muted);
1941
- font-weight: 500;
1942
- position: absolute;
1943
- left: 6px;
1944
- top: -5px;
1945
- white-space: nowrap;
1946
- transform: rotate(-90deg);
1947
- transform-origin: 0 0;
1948
- }
1949
-
1950
- .nd-scroller {
1951
- grid-area: 2 / 2;
1952
- overflow: auto;
1953
- padding: 50px;
1954
- display: flex;
1955
- justify-content: center;
1956
- --nd-scale: 1;
1957
- }
1958
-
1959
- .nd-scroller::-webkit-scrollbar { width: 10px; height: 10px; }
1960
- .nd-scroller::-webkit-scrollbar-track { background: var(--nd-background); }
1961
- .nd-scroller::-webkit-scrollbar-thumb {
1962
- background: var(--nd-border-strong);
1963
- border-radius: 6px;
1964
- border: 2px solid var(--nd-background);
1965
- }
1966
- .nd-scroller::-webkit-scrollbar-thumb:hover { background: var(--nd-text-muted); }
1967
-
1968
- .nd-page-wrapper { display: flex; justify-content: center; padding-bottom: 100px; }
1969
-
1970
- .nd-page {
1971
- background: #fff;
1972
- position: relative;
1973
- box-shadow: var(--shadow-xl);
1974
- transform: scale(var(--nd-scale));
1975
- transform-origin: top center;
1976
- transition: transform 0.2s ease;
1977
- flex-shrink: 0;
1978
- }
1979
-
1980
- .nd-page-content {
1981
- position: absolute;
1982
- inset: 0;
1983
- box-sizing: border-box;
1984
- z-index: 5;
1985
- }
1986
-
1987
- .nd-page.a4.portrait { width: 794px; min-height: 1123px; }
1988
- .nd-page.a4.landscape { width: 1123px; min-height: 794px; }
1989
- .nd-page.letter.portrait { width: 816px; min-height: 1056px; }
1990
- .nd-page.letter.landscape { width: 1056px; min-height: 816px; }
1991
- .nd-page.ticket.portrait { width: 302px; min-height: 800px; }
1992
-
1993
- .nd-paper-grid {
1994
- position: absolute;
1995
- inset: 0;
1996
- background-image:
1997
- linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
1998
- linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
1999
- background-size: 37.8px 37.8px;
2000
- pointer-events: none;
2001
- z-index: 1;
2002
- }
2003
-
2004
- .nd-margin-guides { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
2005
-
2006
- .nd-guide-v,
2007
- .nd-guide-h {
2008
- position: absolute;
2009
- background: rgba(239, 68, 68, 0.25);
2010
- border: 1px dashed rgba(239, 68, 68, 0.5);
2011
- }
2012
-
2013
- .nd-guide-v { top: 0; bottom: 0; width: 1px; }
2014
- .nd-guide-h { left: 0; right: 0; height: 1px; }
2015
-
2016
- .nd-paper-bands { position: relative; z-index: 10; min-height: 100%; }
2017
-
2018
- /* Watermark en diseñador */
2019
- .nd-watermark-layer {
2020
- position: absolute;
2021
- top: 0;
2022
- left: 0;
2023
- right: 0;
2024
- bottom: 0;
2025
- display: flex;
2026
- align-items: center;
2027
- justify-content: center;
2028
- overflow: hidden;
2029
- pointer-events: none;
2030
- z-index: 0;
2031
- }
2032
-
2033
- .nd-watermark-single {
2034
- position: absolute;
2035
- }
2036
-
2037
- .nd-watermark-text {
2038
- display: block;
2039
- font-family: Arial, sans-serif;
2040
- font-weight: 900;
2041
- letter-spacing: 4px;
2042
- user-select: none;
2043
- text-transform: uppercase;
2044
- text-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
2045
- white-space: nowrap;
2046
- }
2047
-
2048
- .nd-band {
2049
- position: relative;
2050
- border-bottom: 1px dashed var(--nd-border);
2051
- transition: background var(--transition);
2052
- min-height: 20px;
2053
- z-index: 1;
2054
- }
2055
-
2056
- .nd-band:hover { background: rgba(37, 99, 235, 0.02); }
2057
- .nd-band.selected { background: rgba(37, 99, 235, 0.05); box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.3); }
2058
-
2059
- .nd-band-tag {
2060
- position: absolute;
2061
- left: calc(-96px - var(--nd-margin-left-px, 0px));
2062
- top: 3px;
2063
- width: 90px;
2064
- background: var(--nd-surface);
2065
- color: var(--nd-text-secondary);
2066
- font-size: 10px;
2067
- font-weight: 700;
2068
- padding: 3px 8px;
2069
- text-align: right;
2070
- border: 1px solid var(--nd-border);
2071
- border-right: none;
2072
- border-radius: var(--radius-sm) 0 0 var(--radius-sm);
2073
- cursor: pointer;
2074
- transition: all var(--transition);
2075
- white-space: nowrap;
2076
- overflow: hidden;
2077
- text-overflow: ellipsis;
2078
- display: flex;
2079
- align-items: center;
2080
- justify-content: flex-end;
2081
- gap: 4px;
2082
- z-index: 20;
2083
- }
2084
-
2085
- .nd-band-tag:hover {
2086
- color: var(--nd-primary);
2087
- background: var(--nd-primary-light);
2088
- border-color: var(--nd-primary-light);
2089
- }
2090
- .nd-band-tag.selected {
2091
- color: var(--nd-primary);
2092
- background: var(--nd-primary-light);
2093
- border-color: var(--nd-primary);
2094
- }
2095
-
2096
- .nd-band-source { color: var(--nd-text-muted); font-weight: 400; font-size: 9px; }
2097
- .nd-band-content { position: relative; margin-left: 0; }
2098
-
2099
- .nd-snap-guide {
2100
- position: absolute;
2101
- pointer-events: none;
2102
- z-index: 50;
2103
- background: rgba(59, 130, 246, 0.75);
2104
- }
2105
-
2106
- .nd-snap-guide.v { top: 0; bottom: 0; width: 1px; }
2107
- .nd-snap-guide.h { left: 0; right: 0; height: 1px; }
2108
- .nd-snap-guide.margin { background: rgba(239, 68, 68, 0.85); }
2109
-
2110
- .nd-drag-metrics {
2111
- position: absolute;
2112
- pointer-events: none;
2113
- z-index: 60;
2114
- background: rgba(15, 23, 42, 0.85);
2115
- color: #ffffff;
2116
- font-size: 10px;
2117
- padding: 3px 6px;
2118
- border-radius: 6px;
2119
- white-space: nowrap;
2120
- box-shadow: var(--shadow-md);
2121
- }
2122
-
2123
- .nd-distance-line {
2124
- position: absolute;
2125
- pointer-events: none;
2126
- z-index: 55;
2127
- background: rgba(59, 130, 246, 0.55);
2128
- }
2129
-
2130
- .nd-distance-line.h { height: 1px; }
2131
- .nd-distance-line.v { width: 1px; }
2132
-
2133
- .nd-distance-label {
2134
- position: absolute;
2135
- pointer-events: none;
2136
- z-index: 56;
2137
- transform: translate(-50%, -50%);
2138
- background: rgba(59, 130, 246, 0.85);
2139
- color: #ffffff;
2140
- font-size: 10px;
2141
- padding: 2px 6px;
2142
- border-radius: 999px;
2143
- white-space: nowrap;
2144
- }
2145
-
2146
- .nd-band-hint {
2147
- position: absolute;
2148
- inset: 0;
2149
- display: flex;
2150
- flex-direction: column;
2151
- align-items: center;
2152
- justify-content: center;
2153
- gap: 6px;
2154
- color: var(--nd-text-muted);
2155
- font-size: 12px;
2156
- pointer-events: none;
2157
- opacity: 0;
2158
- transition: opacity var(--transition);
2159
- }
2160
-
2161
- .nd-band:hover .nd-band-hint { opacity: 0.6; }
2162
- .nd-band-hint i { font-size: 20px; }
2163
-
2164
- .nd-band-resizer {
2165
- position: absolute;
2166
- bottom: -2px;
2167
- left: 0;
2168
- width: 100%;
2169
- height: 6px;
2170
- cursor: ns-resize;
2171
- z-index: 30;
2172
- transition: background var(--transition);
2173
- }
2174
-
2175
- .nd-band-resizer:hover { background: rgba(37, 99, 235, 0.15); }
2176
- .nd-band-resizer.active { background: var(--nd-primary); height: 3px; }
2177
-
2178
- /* Element Resize Handles */
2179
- .nd-resize-handle {
2180
- position: absolute;
2181
- width: 10px;
2182
- height: 10px;
2183
- background: #fff;
2184
- border: 2px solid var(--nd-primary);
2185
- border-radius: 50%;
2186
- z-index: 100;
2187
- opacity: 0;
2188
- transition: opacity var(--transition), transform var(--transition);
2189
- pointer-events: auto;
2190
- }
2191
-
2192
- .nd-el:hover .nd-resize-handle,
2193
- .nd-el.selected .nd-resize-handle {
2194
- opacity: 1;
2195
- }
2196
-
2197
- .nd-resize-handle:hover {
2198
- transform: scale(1.3);
2199
- background: var(--nd-primary);
2200
- box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
2201
- }
2202
-
2203
- .nd-resize-handle.top-left {
2204
- top: -5px;
2205
- left: -5px;
2206
- cursor: nwse-resize;
2207
- }
2208
-
2209
- .nd-resize-handle.top-right {
2210
- top: -5px;
2211
- right: -5px;
2212
- cursor: nesw-resize;
2213
- }
2214
-
2215
- .nd-resize-handle.bottom-left {
2216
- bottom: -5px;
2217
- left: -5px;
2218
- cursor: nesw-resize;
2219
- }
2220
-
2221
- .nd-resize-handle.bottom-right {
2222
- bottom: -5px;
2223
- right: -5px;
2224
- cursor: nwse-resize;
2225
- }
2226
-
2227
- .nd-el {
2228
- position: absolute;
2229
- box-sizing: border-box;
2230
- border: 1.5px solid transparent;
2231
- cursor: move;
2232
- transition: border-color var(--transition), box-shadow var(--transition);
2233
- z-index: 5;
2234
- display: flex;
2235
- align-items: center;
2236
- justify-content: center;
2237
- padding: 2px;
2238
- }
2239
-
2240
- .nd-el:hover {
2241
- border-color: var(--nd-primary-light);
2242
- background: rgba(37, 99, 235, 0.03);
2243
- }
2244
-
2245
- .nd-el.selected {
2246
- border-color: var(--nd-primary) !important;
2247
- background: rgba(37, 99, 235, 0.04);
2248
- box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
2249
- z-index: 15;
2250
- }
2251
-
2252
- .nd-el.multi-selected {
2253
- border-color: #8b5cf6 !important;
2254
- background: rgba(139, 92, 246, 0.06);
2255
- box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
2256
- z-index: 14;
2257
- }
2258
-
2259
- .nd-el.dragging { opacity: 0.85; z-index: 100; box-shadow: var(--shadow-lg); }
2260
-
2261
- /* Selection Box */
2262
- .nd-selection-box {
2263
- position: absolute;
2264
- border: 2px dashed #3b82f6;
2265
- background: rgba(59, 130, 246, 0.08);
2266
- pointer-events: none;
2267
- z-index: 9999;
2268
- border-radius: 2px;
2269
- }
2270
-
2271
- /* Shape Rendering */
2272
- .nd-shape-render {
2273
- display: flex;
2274
- align-items: center;
2275
- justify-content: center;
2276
- width: 100%;
2277
- height: 100%;
2278
- }
2279
-
2280
- .nd-shape-render svg {
2281
- width: 100%;
2282
- height: 100%;
2283
- overflow: visible;
2284
- }
2285
-
2286
- .nd-shape-label {
2287
- display: flex;
2288
- align-items: center;
2289
- gap: 4px;
2290
- font-size: 10px;
2291
- color: var(--nd-text-muted);
2292
- }
2293
-
2294
- /* QR Code placeholder */
2295
- .nd-qr-placeholder {
2296
- display: flex;
2297
- flex-direction: column;
2298
- align-items: center;
2299
- justify-content: center;
2300
- gap: 4px;
2301
- font-size: 10px;
2302
- color: var(--nd-text-muted);
2303
- }
2304
-
2305
- /* System Variables in Dictionary */
2306
- .nd-sysvar-category {
2307
- margin-top: 4px;
2308
- }
2309
-
2310
- .nd-sysvar-category-title {
2311
- font-size: 9px;
2312
- font-weight: 700;
2313
- color: var(--nd-text-muted);
2314
- text-transform: uppercase;
2315
- letter-spacing: 0.5px;
2316
- padding: 4px 8px 2px;
2317
- background: var(--nd-background);
2318
- border-radius: 3px;
2319
- }
2320
-
2321
- .nd-sysvar-item {
2322
- flex-direction: column;
2323
- align-items: flex-start;
2324
- gap: 1px;
2325
- padding: 4px 8px;
2326
- }
2327
-
2328
- .nd-sysvar-example {
2329
- font-size: 8px;
2330
- color: #9ca3af;
2331
- font-style: italic;
2332
- margin-left: 16px;
2333
- }
2334
-
2335
- /* Data Source List in Ribbon */
2336
- .nd-datasource-list {
2337
- margin-top: 8px;
2338
- }
2339
-
2340
- .nd-ds-grid {
2341
- display: flex;
2342
- flex-direction: row;
2343
- flex-wrap: wrap;
2344
- gap: 8px;
2345
- }
2346
-
2347
- .nd-datasource-item {
2348
- background: var(--nd-background);
2349
- border: 1px solid var(--nd-border);
2350
- border-radius: 6px;
2351
- padding: 6px 8px;
2352
- font-size: 10px;
2353
- min-width: 200px;
2354
- max-width: 240px;
2355
- flex: 0 1 auto;
2356
- }
2357
-
2358
- .nd-ds-primary {
2359
- border-color: #3b82f6;
2360
- background: #f0f7ff;
2361
- }
2362
-
2363
- .nd-ds-header {
2364
- display: flex;
2365
- align-items: center;
2366
- justify-content: space-between;
2367
- margin-bottom: 4px;
2368
- }
2369
-
2370
- .nd-ds-badge {
2371
- font-weight: 700;
2372
- color: #f59e0b;
2373
- font-size: 11px;
2374
- }
2375
-
2376
- .nd-ds-manual-badge {
2377
- font-size: 9px;
2378
- color: #8b5cf6;
2379
- background: #f3f0ff;
2380
- padding: 1px 6px;
2381
- border-radius: 4px;
2382
- font-weight: 500;
2383
- }
2384
-
2385
- .nd-ds-primary .nd-ds-badge {
2386
- color: #3b82f6;
2387
- }
2388
-
2389
- .nd-ds-fields {
2390
- display: flex;
2391
- gap: 4px;
2392
- align-items: center;
2393
- }
2394
-
2395
- .nd-ds-select {
2396
- flex: 1;
2397
- }
2398
-
2399
- .nd-ds-alias {
2400
- width: 70px !important;
2401
- padding: 2px 4px !important;
2402
- font-size: 9px !important;
2403
- border-radius: 3px !important;
2404
- }
2405
-
2406
- .p-dropdown-xs,
2407
- .p-dropdown-xs .p-dropdown-label {
2408
- font-size: 9px !important;
2409
- padding: 2px 4px !important;
2410
- min-height: 22px !important;
2411
- }
2412
-
2413
- .p-inputtext-xs {
2414
- font-size: 9px !important;
2415
- padding: 2px 4px !important;
2416
- min-height: 22px !important;
2417
- }
2418
-
2419
-
2420
- .nd-placeholder-img {
2421
- display: flex;
2422
- align-items: center;
2423
- justify-content: center;
2424
- width: 100%;
2425
- height: 100%;
2426
- color: var(--nd-text-muted);
2427
- background: var(--nd-background);
2428
- }
2429
-
2430
- .nd-img-preview {
2431
- width: 100%;
2432
- height: 100%;
2433
- object-fit: contain;
2434
- display: block;
2435
- }
2436
-
2437
- .nd-placeholder-bar {
2438
- display: flex;
2439
- flex-direction: column;
2440
- align-items: center;
2441
- justify-content: center;
2442
- width: 100%;
2443
- height: 100%;
2444
- color: var(--nd-text-muted);
2445
- font-family: 'Courier New', monospace;
2446
- }
2447
-
2448
- .nd-bar-mock { font-size: 16px; letter-spacing: -1px; line-height: 1; }
2449
-
2450
- .nd-table-render {
2451
- display: flex;
2452
- flex-direction: column;
2453
- width: 100%;
2454
- height: 100%;
2455
- border: 1px solid var(--nd-border-strong);
2456
- background: #fff;
2457
- overflow: hidden;
2458
- border-radius: 2px;
2459
- }
2460
-
2461
- .nd-table-header {
2462
- display: flex;
2463
- background: #f1f5f9;
2464
- border-bottom: 1px solid var(--nd-border-strong);
2465
- flex-shrink: 0;
2466
- }
2467
-
2468
- .nd-table-row { display: flex; flex: 1; background: #fff; }
2469
-
2470
- .nd-table-cell {
2471
- padding: 4px 8px;
2472
- border-right: 1px solid var(--nd-border);
2473
- font-size: 11px;
2474
- white-space: nowrap;
2475
- overflow: hidden;
2476
- text-overflow: ellipsis;
2477
- min-height: 22px;
2478
- display: flex;
2479
- align-items: center;
2480
- }
2481
-
2482
- .nd-table-cell:last-child { border-right: none; }
2483
-
2484
- .nd-table-cell.head { font-weight: 600; color: var(--nd-text); background: #f8fafc; }
2485
-
2486
- .nd-table-cell.body {
2487
- color: var(--nd-text-secondary);
2488
- font-family: 'Courier New', monospace;
2489
- font-style: italic;
2490
- }
2491
-
2492
- /* Table footer styles for nexabase-report viewer */
2493
- .nexa-table {
2494
- width: 100%;
2495
- border-collapse: collapse;
2496
- font-size: 11px;
2497
- }
2498
-
2499
- .nexa-table thead tr {
2500
- background: #f1f5f9;
2501
- border-bottom: 2px solid var(--nd-border-strong, #e2e8f0);
2502
- }
2503
-
2504
- .nexa-table th {
2505
- padding: 6px 8px;
2506
- font-weight: 600;
2507
- color: var(--nd-text, #1e293b);
2508
- text-align: left;
2509
- border-right: 1px solid var(--nd-border, #e2e8f0);
2510
- }
2511
-
2512
- .nexa-table th:last-child { border-right: none; }
2513
-
2514
- .nexa-table td {
2515
- padding: 5px 8px;
2516
- border-right: 1px solid var(--nd-border, #e2e8f0);
2517
- border-bottom: 1px solid var(--nd-border, #e2e8f0);
2518
- color: #475569;
2519
- }
2520
-
2521
- .nexa-table td:last-child { border-right: none; }
2522
-
2523
- .nexa-table tfoot tr {
2524
- background: #f8fafc;
2525
- border-top: 2px solid #94a3b8;
2526
- }
2527
-
2528
- .nexa-table-footer td {
2529
- font-weight: 600;
2530
- color: #1e3a8a;
2531
- background: #f1f5f9;
2532
- }
2533
-
2534
- .nexa-table-group-header td {
2535
- font-weight: 700;
2536
- background: #e0e7ff;
2537
- color: #1e3a8a;
2538
- font-size: 12px;
2539
- padding: 4px 8px;
2540
- }
2541
-
2542
- .nexa-table-group-footer td {
2543
- font-weight: 600;
2544
- background: #f1f5f9;
2545
- color: #374151;
2546
- border-top: 1px solid #cbd5e1;
2547
- }
2548
-
2549
- .nexa-footer-val {
2550
- font-family: 'Courier New', monospace;
2551
- }
2552
-
2553
- .nd-footer {
2554
- height: 30px;
2555
- background: var(--nd-surface);
2556
- color: var(--nd-text-secondary);
2557
- display: flex;
2558
- align-items: center;
2559
- padding: 0 12px;
2560
- font-size: 11px;
2561
- border-top: 1px solid var(--nd-border);
2562
- gap: 0;
2563
- z-index: 50;
2564
- }
2565
-
2566
- .nd-f-seg {
2567
- height: 100%;
2568
- display: flex;
2569
- align-items: center;
2570
- padding: 0 12px;
2571
- border-right: 1px solid var(--nd-border);
2572
- white-space: nowrap;
2573
- gap: 6px;
2574
- color: var(--nd-text-secondary);
2575
- }
2576
-
2577
- .nd-f-seg:last-child { border-right: none; }
2578
- .nd-f-seg.main { flex: 1; }
2579
- .nd-f-seg i { font-size: 12px; color: var(--nd-text-muted); }
2580
-
2581
- .nd-f-lbl {
2582
- color: var(--nd-text-muted);
2583
- font-size: 9px;
2584
- text-transform: uppercase;
2585
- font-weight: 600;
2586
- letter-spacing: 0.04em;
2587
- }
2588
-
2589
- .nd-f-val { font-weight: 700; color: var(--nd-primary); }
2590
-
2591
- .nd-zoom {
2592
- display: flex;
2593
- align-items: center;
2594
- gap: 8px;
2595
- margin-left: auto;
2596
- padding: 0 12px;
2597
- border-left: 1px solid var(--nd-border);
2598
- }
2599
-
2600
- .nd-zoom span {
2601
- font-size: 11px;
2602
- font-weight: 600;
2603
- color: var(--nd-text-secondary);
2604
- min-width: 42px;
2605
- text-align: center;
2606
- }
2607
-
2608
- .nd-zoom input[type="range"] { width: 100px; cursor: pointer; accent-color: var(--nd-primary); }
2609
-
2610
- /* PrimeVue overrides in ribbon */
2611
- .nd-dropdown-mini,
2612
- .nd-dropdown-mini .p-dropdown {
2613
- width: 110px !important;
2614
- height: 26px !important;
2615
- font-size: 11px !important;
2616
- line-height: 26px !important;
2617
- }
2618
-
2619
- .nd-dropdown-mini .p-dropdown-label {
2620
- padding: 0 8px !important;
2621
- font-size: 11px !important;
2622
- display: flex;
2623
- align-items: center;
2624
- line-height: 24px !important;
2625
- }
2626
-
2627
- .nd-dropdown-mini .p-dropdown-trigger {
2628
- width: 24px !important;
2629
- }
2630
-
2631
- .nd-input-mini,
2632
- .nd-input-mini .p-inputnumber {
2633
- width: 65px !important;
2634
- height: 26px !important;
2635
- }
2636
-
2637
- .nd-input-mini .p-inputnumber-input {
2638
- padding: 2px 4px !important;
2639
- font-size: 11px !important;
2640
- text-align: center;
2641
- height: 22px !important;
2642
- line-height: 18px !important;
2643
- }
2644
-
2645
- .nd-toolbar .p-divider.p-divider-vertical {
2646
- margin: 0 4px;
2647
- height: 24px;
2648
- align-self: center;
2649
- }
2650
-
2651
- .nd-toolbar .p-divider .p-divider-content { background-color: var(--nd-border); }
2652
-
2653
- /* Utilities */
2654
- .w-full { width: 100% !important; }
2655
- .mt-2 { margin-top: 8px !important; }
2656
- .mb-2 { margin-bottom: 8px !important; }
2657
- .block { display: block !important; }
2658
- .flex { display: flex !important; }
2659
- .items-center { align-items: center !important; }
2660
- .gap-2 { gap: 8px !important; }
2661
- .text-center { text-align: center !important; }
2662
- .text-\[9px\] { font-size: 9px !important; }
2663
- .text-\[10px\] { font-size: 10px !important; }
2664
- .text-gray-400 { color: #9ca3af !important; }
2665
- .opacity-50 { opacity: 0.5 !important; }
2666
- .cursor-not-allowed { cursor: not-allowed !important; }
2667
-
2668
- /* ============================================================
2669
- WIDGET LIBRARY & DASHBOARD DESIGNER
2670
- ============================================================ */
2671
-
2672
- .nd-widget-groups {
2673
- padding: 12px;
2674
- display: flex;
2675
- flex-direction: column;
2676
- gap: 20px;
2677
- }
2678
-
2679
- .nd-cat-title {
2680
- font-size: 10px;
2681
- font-weight: 800;
2682
- color: var(--nd-text-muted);
2683
- text-transform: uppercase;
2684
- letter-spacing: 0.06em;
2685
- margin-bottom: 10px;
2686
- padding-left: 2px;
2687
- }
2688
-
2689
- .nd-widget-grid {
2690
- display: grid;
2691
- grid-template-columns: repeat(2, 1fr);
2692
- gap: 8px;
2693
- }
2694
-
2695
- .nd-widget-item {
2696
- background: #fff;
2697
- border: 1px solid var(--nd-border);
2698
- border-radius: 10px;
2699
- padding: 12px 8px;
2700
- display: flex;
2701
- flex-direction: column;
2702
- align-items: center;
2703
- justify-content: center;
2704
- gap: 8px;
2705
- cursor: grab;
2706
- transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
2707
- text-align: center;
2708
- box-shadow: 0 1px 2px rgba(0,0,0,0.03);
2709
- }
2710
-
2711
- .nd-widget-item:hover {
2712
- border-color: var(--nd-primary);
2713
- background: var(--nd-primary-ghost);
2714
- transform: translateY(-2px);
2715
- box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
2716
- }
2717
-
2718
- .nd-widget-item:active {
2719
- cursor: grabbing;
2720
- }
2721
-
2722
- .nd-widget-item i {
2723
- font-size: 20px;
2724
- filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05));
2725
- }
2726
-
2727
- .nd-widget-item span {
2728
- font-size: 10px;
2729
- font-weight: 600;
2730
- color: var(--nd-text-secondary);
2731
- line-height: 1.2;
2732
- }
1
+ /* ============================================================
2
+ NEXABASE REPORT — GLOBAL STYLES
3
+ ============================================================
4
+ This file re-exports all modular style sheets.
5
+ Import this file or './lib/styles/index.css' — both work.
6
+ ============================================================ */
7
+ @import "./lib/styles/index.css";