@nuvio/overlay 0.5.5 → 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.
package/dist/index.css CHANGED
@@ -284,6 +284,519 @@
284
284
  min-width: 0;
285
285
  flex: 1;
286
286
  }
287
+ .nuvio-editor-tabs {
288
+ display: flex;
289
+ flex-shrink: 0;
290
+ gap: 3px;
291
+ margin: 0 0 12px;
292
+ padding: 4px;
293
+ border-radius: 14px;
294
+ background: rgba(0, 0, 0, 0.38);
295
+ border: 1px solid rgba(255, 255, 255, 0.08);
296
+ }
297
+ .nuvio-editor-tab {
298
+ flex: 1;
299
+ display: flex;
300
+ flex-direction: column;
301
+ align-items: center;
302
+ justify-content: center;
303
+ gap: 1px;
304
+ min-height: 44px;
305
+ padding: 6px 10px;
306
+ border-radius: 10px;
307
+ border: none;
308
+ background: transparent;
309
+ color: var(--nuvio-dim);
310
+ cursor: pointer;
311
+ transition:
312
+ background 0.18s ease,
313
+ color 0.18s ease,
314
+ box-shadow 0.18s ease;
315
+ }
316
+ .nuvio-editor-tab-label {
317
+ font-size: 12px;
318
+ font-weight: 700;
319
+ letter-spacing: 0.01em;
320
+ line-height: 1.2;
321
+ }
322
+ .nuvio-editor-tab-hint {
323
+ font-size: 10px;
324
+ font-weight: 500;
325
+ opacity: 0.72;
326
+ line-height: 1.2;
327
+ }
328
+ .nuvio-editor-tab:hover {
329
+ color: var(--nuvio-text-soft);
330
+ background: rgba(255, 255, 255, 0.05);
331
+ }
332
+ .nuvio-editor-tab--active {
333
+ background: rgba(255, 255, 255, 0.12);
334
+ color: var(--nuvio-text);
335
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
336
+ }
337
+ .nuvio-editor-tab--active .nuvio-editor-tab-hint {
338
+ color: var(--nuvio-accent);
339
+ opacity: 1;
340
+ }
341
+ .nuvio-brand-kit-hint,
342
+ .nuvio-brand-selection-label {
343
+ display: block;
344
+ font-size: 12px;
345
+ line-height: 1.45;
346
+ }
347
+ .nuvio-brand-kit-hint {
348
+ color: var(--nuvio-muted);
349
+ }
350
+ .nuvio-brand-selection-label {
351
+ margin-bottom: 2px;
352
+ font-size: 10px;
353
+ font-weight: 600;
354
+ letter-spacing: 0.06em;
355
+ text-transform: uppercase;
356
+ color: var(--nuvio-dim);
357
+ }
358
+ .nuvio-brand-kit {
359
+ display: flex;
360
+ flex-direction: column;
361
+ gap: 14px;
362
+ }
363
+ .nuvio-brand-kit-lead {
364
+ margin: 0;
365
+ font-size: 12px;
366
+ line-height: 1.5;
367
+ color: var(--nuvio-muted);
368
+ }
369
+ .nuvio-brand-first-run {
370
+ padding: 12px 14px;
371
+ border-radius: 14px;
372
+ border: 1px solid rgba(96, 165, 250, 0.22);
373
+ background: rgba(37, 99, 235, 0.08);
374
+ }
375
+ .nuvio-brand-first-run-steps {
376
+ margin: 0;
377
+ padding-left: 18px;
378
+ display: flex;
379
+ flex-direction: column;
380
+ gap: 6px;
381
+ }
382
+ .nuvio-brand-presets {
383
+ display: flex;
384
+ flex-direction: column;
385
+ gap: 12px;
386
+ }
387
+ .nuvio-brand-empty-state {
388
+ padding: 16px 14px;
389
+ border-radius: 14px;
390
+ border: 1px dashed rgba(255, 255, 255, 0.16);
391
+ background: rgba(0, 0, 0, 0.2);
392
+ }
393
+ .nuvio-brand-empty-title {
394
+ margin: 0 0 6px;
395
+ font-size: 0.8125rem;
396
+ font-weight: 600;
397
+ color: var(--nuvio-text);
398
+ }
399
+ .nuvio-brand-empty-body {
400
+ margin: 0;
401
+ font-size: 11px;
402
+ line-height: 1.5;
403
+ color: var(--nuvio-dim);
404
+ }
405
+ .nuvio-brand-non-brandable {
406
+ margin: 0;
407
+ }
408
+ .nuvio-brand-category {
409
+ display: flex;
410
+ flex-direction: column;
411
+ gap: 8px;
412
+ }
413
+ .nuvio-brand-category-row {
414
+ display: flex;
415
+ flex-wrap: wrap;
416
+ gap: 6px;
417
+ }
418
+ .nuvio-brand-category-chip {
419
+ padding: 6px 10px;
420
+ border-radius: 999px;
421
+ border: 1px solid rgba(255, 255, 255, 0.12);
422
+ background: rgba(255, 255, 255, 0.04);
423
+ color: var(--nuvio-dim);
424
+ font-size: 11px;
425
+ font-weight: 600;
426
+ line-height: 1.2;
427
+ cursor: pointer;
428
+ }
429
+ .nuvio-brand-category-chip:hover:not(:disabled) {
430
+ border-color: rgba(255, 255, 255, 0.22);
431
+ color: var(--nuvio-text);
432
+ }
433
+ .nuvio-brand-category-chip--active {
434
+ border-color: rgba(96, 165, 250, 0.55);
435
+ background: rgba(37, 99, 235, 0.18);
436
+ color: #dbeafe;
437
+ }
438
+ .nuvio-brand-category-chip:disabled {
439
+ opacity: 0.42;
440
+ cursor: not-allowed;
441
+ }
442
+ .nuvio-brand-fixed-recipe-note {
443
+ margin: 0;
444
+ font-size: 11px;
445
+ line-height: 1.45;
446
+ color: var(--nuvio-dim);
447
+ }
448
+ .nuvio-brand-presets-grid {
449
+ display: grid;
450
+ grid-template-columns: 1fr 1fr;
451
+ gap: 12px;
452
+ }
453
+ .nuvio-brand-field {
454
+ display: flex;
455
+ flex-direction: column;
456
+ gap: 6px;
457
+ }
458
+ .nuvio-brand-field-label {
459
+ margin: 0;
460
+ font-size: 10px;
461
+ font-weight: 700;
462
+ letter-spacing: 0.07em;
463
+ text-transform: uppercase;
464
+ color: var(--nuvio-dim);
465
+ }
466
+ .nuvio-brand-chip-row {
467
+ display: flex;
468
+ flex-wrap: wrap;
469
+ gap: 6px;
470
+ }
471
+ .nuvio-brand-chip {
472
+ flex: 1 1 auto;
473
+ min-width: 0;
474
+ min-height: 32px;
475
+ padding: 6px 10px;
476
+ border-radius: 10px;
477
+ border: 1px solid rgba(255, 255, 255, 0.1);
478
+ background: rgba(0, 0, 0, 0.28);
479
+ color: var(--nuvio-text-soft);
480
+ font-size: 11px;
481
+ font-weight: 600;
482
+ font-family: inherit;
483
+ cursor: pointer;
484
+ transition:
485
+ background 0.15s ease,
486
+ border-color 0.15s ease,
487
+ color 0.15s ease;
488
+ }
489
+ .nuvio-brand-chip:hover {
490
+ border-color: rgba(255, 255, 255, 0.18);
491
+ background: rgba(255, 255, 255, 0.08);
492
+ }
493
+ .nuvio-brand-chip--active {
494
+ border-color: rgba(59, 130, 246, 0.55);
495
+ background:
496
+ linear-gradient(
497
+ 180deg,
498
+ rgba(59, 130, 246, 0.35),
499
+ rgba(37, 99, 235, 0.28));
500
+ color: #ffffff;
501
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
502
+ }
503
+ .nuvio-brand-color-row {
504
+ display: grid;
505
+ grid-template-columns: repeat(5, minmax(0, 1fr));
506
+ gap: 6px;
507
+ }
508
+ .nuvio-brand-color-swatch {
509
+ display: flex;
510
+ flex-direction: column;
511
+ align-items: center;
512
+ gap: 5px;
513
+ min-width: 0;
514
+ padding: 8px 4px 6px;
515
+ border-radius: 12px;
516
+ border: 1px solid rgba(255, 255, 255, 0.08);
517
+ background: rgba(0, 0, 0, 0.22);
518
+ cursor: pointer;
519
+ transition:
520
+ border-color 0.15s ease,
521
+ background 0.15s ease,
522
+ transform 0.15s ease;
523
+ }
524
+ .nuvio-brand-color-swatch:hover {
525
+ border-color: rgba(255, 255, 255, 0.16);
526
+ background: rgba(255, 255, 255, 0.06);
527
+ }
528
+ .nuvio-brand-color-swatch--active {
529
+ border-color: rgba(125, 211, 252, 0.65);
530
+ background: rgba(59, 130, 246, 0.16);
531
+ box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.25);
532
+ }
533
+ .nuvio-brand-color-swatch-dot {
534
+ width: 22px;
535
+ height: 22px;
536
+ border-radius: 999px;
537
+ border: 2px solid rgba(255, 255, 255, 0.85);
538
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
539
+ }
540
+ .nuvio-brand-color-swatch-dot--none {
541
+ background:
542
+ repeating-linear-gradient(
543
+ 45deg,
544
+ rgba(255, 255, 255, 0.12),
545
+ rgba(255, 255, 255, 0.12) 4px,
546
+ rgba(255, 255, 255, 0.04) 4px,
547
+ rgba(255, 255, 255, 0.04) 8px);
548
+ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
549
+ }
550
+ .nuvio-brand-color-swatch-label {
551
+ font-size: 9px;
552
+ font-weight: 600;
553
+ color: var(--nuvio-muted);
554
+ text-align: center;
555
+ line-height: 1.1;
556
+ }
557
+ .nuvio-brand-color-swatch--active .nuvio-brand-color-swatch-label {
558
+ color: var(--nuvio-text);
559
+ }
560
+ .nuvio-brand-preview {
561
+ display: flex;
562
+ flex-direction: column;
563
+ gap: 8px;
564
+ }
565
+ .nuvio-brand-preview-lead {
566
+ margin: 0;
567
+ font-size: 11px;
568
+ line-height: 1.45;
569
+ color: var(--nuvio-dim);
570
+ }
571
+ .nuvio-brand-on-page-hint {
572
+ margin: 0;
573
+ padding: 10px 12px;
574
+ border-radius: 10px;
575
+ border: 1px solid rgba(255, 255, 255, 0.08);
576
+ background: rgba(255, 255, 255, 0.04);
577
+ font-size: 11px;
578
+ line-height: 1.45;
579
+ color: var(--nuvio-muted);
580
+ }
581
+ .nuvio-brand-preview-canvas {
582
+ padding: 14px;
583
+ border-radius: 16px;
584
+ border: 1px solid rgba(255, 255, 255, 0.1);
585
+ background:
586
+ radial-gradient(
587
+ circle at 12% 8%,
588
+ rgba(255, 255, 255, 0.08),
589
+ transparent 36%),
590
+ rgba(0, 0, 0, 0.34);
591
+ }
592
+ .nuvio-brand-preview-samples {
593
+ display: flex;
594
+ flex-direction: column;
595
+ gap: 12px;
596
+ }
597
+ .nuvio-brand-preview-button {
598
+ display: inline-block;
599
+ align-self: flex-start;
600
+ font-size: 0.8125rem;
601
+ font-weight: 600;
602
+ line-height: 1.2;
603
+ }
604
+ .nuvio-brand-preview-card {
605
+ display: flex;
606
+ flex-direction: column;
607
+ gap: 6px;
608
+ }
609
+ .nuvio-brand-preview-heading {
610
+ line-height: 1.3;
611
+ }
612
+ .nuvio-brand-preview-body {
613
+ font-size: 0.8125rem;
614
+ line-height: 1.45;
615
+ color: #4b5563;
616
+ }
617
+ .nuvio-brand-sample-text {
618
+ max-width: 18rem;
619
+ }
620
+ .nuvio-brand-sample-table {
621
+ overflow: hidden;
622
+ width: 100%;
623
+ background: rgba(255, 255, 255, 0.96);
624
+ }
625
+ .nuvio-brand-sample-table-row {
626
+ display: grid;
627
+ grid-template-columns: 1fr 1fr;
628
+ gap: 8px;
629
+ padding: 8px 10px;
630
+ font-size: 0.75rem;
631
+ color: #374151;
632
+ border-top: 1px solid rgba(15, 23, 42, 0.08);
633
+ }
634
+ .nuvio-brand-sample-table-row:first-child {
635
+ border-top: none;
636
+ }
637
+ .nuvio-brand-sample-table-row--head {
638
+ font-weight: 600;
639
+ background: rgba(15, 23, 42, 0.04);
640
+ }
641
+ .nuvio-brand-sample-form {
642
+ display: flex;
643
+ flex-direction: column;
644
+ gap: 6px;
645
+ width: 100%;
646
+ }
647
+ .nuvio-brand-sample-form-label {
648
+ font-size: 0.75rem;
649
+ font-weight: 600;
650
+ color: #374151;
651
+ }
652
+ .nuvio-brand-sample-form-input {
653
+ display: block;
654
+ width: 100%;
655
+ font-size: 0.8125rem;
656
+ color: #6b7280;
657
+ background: rgba(255, 255, 255, 0.96);
658
+ }
659
+ .nuvio-brand-sample-badge {
660
+ display: inline-flex;
661
+ align-self: flex-start;
662
+ padding: 4px 10px;
663
+ font-size: 0.75rem;
664
+ font-weight: 600;
665
+ line-height: 1.2;
666
+ }
667
+ .nuvio-brand-section {
668
+ display: flex;
669
+ flex-direction: column;
670
+ gap: 8px;
671
+ padding-top: 10px;
672
+ border-top: 1px solid rgba(255, 255, 255, 0.08);
673
+ }
674
+ .nuvio-brand-section:first-of-type {
675
+ border-top: none;
676
+ padding-top: 0;
677
+ }
678
+ .nuvio-brand-apply-lead {
679
+ margin: 0;
680
+ font-size: 11px;
681
+ line-height: 1.45;
682
+ color: var(--nuvio-dim);
683
+ }
684
+ .nuvio-brand-apply-grid .nuvio-brand-apply-btn {
685
+ width: 100%;
686
+ }
687
+ .nuvio-brand-save-bar {
688
+ display: flex;
689
+ flex-direction: column;
690
+ gap: 6px;
691
+ padding-top: 2px;
692
+ }
693
+ .nuvio-brand-save-btn {
694
+ width: 100%;
695
+ }
696
+ .nuvio-brand-save-status {
697
+ font-size: 11px;
698
+ color: var(--nuvio-dim);
699
+ text-align: center;
700
+ }
701
+ .nuvio-brand-save-status--warn {
702
+ color: var(--nuvio-warning);
703
+ }
704
+ .nuvio-brand-apply {
705
+ display: flex;
706
+ flex-direction: column;
707
+ gap: 8px;
708
+ padding-top: 4px;
709
+ border-top: 1px solid rgba(255, 255, 255, 0.08);
710
+ }
711
+ .nuvio-brand-apply-note {
712
+ margin: 0;
713
+ font-size: 11px;
714
+ line-height: 1.4;
715
+ color: var(--nuvio-warning);
716
+ }
717
+ .nuvio-brand-apply-grid {
718
+ display: grid;
719
+ grid-template-columns: 1fr 1fr;
720
+ gap: 8px;
721
+ }
722
+ .nuvio-brand-apply-btn {
723
+ min-height: 36px;
724
+ padding: 8px 10px;
725
+ border-radius: 10px;
726
+ border: 1px solid rgba(255, 255, 255, 0.12);
727
+ background: rgba(0, 0, 0, 0.3);
728
+ color: var(--nuvio-text-soft);
729
+ font-size: 12px;
730
+ font-weight: 600;
731
+ font-family: inherit;
732
+ cursor: pointer;
733
+ transition: background 0.15s ease, border-color 0.15s ease;
734
+ }
735
+ .nuvio-brand-apply-btn:hover {
736
+ background: rgba(255, 255, 255, 0.1);
737
+ border-color: rgba(255, 255, 255, 0.2);
738
+ color: var(--nuvio-text);
739
+ }
740
+ .nuvio-brand-apply-on-page {
741
+ display: flex;
742
+ flex-direction: column;
743
+ gap: 8px;
744
+ padding-top: 4px;
745
+ border-top: 1px solid rgba(255, 255, 255, 0.08);
746
+ }
747
+ .nuvio-brand-apply-on-page-lead {
748
+ margin: 0;
749
+ font-size: 11px;
750
+ line-height: 1.45;
751
+ color: var(--nuvio-dim);
752
+ }
753
+ .nuvio-brand-apply-on-page-btn {
754
+ align-self: flex-start;
755
+ }
756
+ .nuvio-brand-bulk {
757
+ display: flex;
758
+ flex-direction: column;
759
+ gap: 8px;
760
+ padding-top: 4px;
761
+ border-top: 1px solid rgba(255, 255, 255, 0.08);
762
+ }
763
+ .nuvio-brand-bulk-lead {
764
+ margin: 0;
765
+ font-size: 11px;
766
+ line-height: 1.45;
767
+ color: var(--nuvio-dim);
768
+ }
769
+ .nuvio-brand-bulk-grid {
770
+ display: flex;
771
+ flex-direction: column;
772
+ gap: 6px;
773
+ }
774
+ .nuvio-brand-bulk-btn {
775
+ min-height: 34px;
776
+ padding: 8px 10px;
777
+ border-radius: 10px;
778
+ border: 1px solid rgba(125, 211, 252, 0.22);
779
+ background: rgba(59, 130, 246, 0.12);
780
+ color: var(--nuvio-text-soft);
781
+ font-size: 11px;
782
+ font-weight: 600;
783
+ font-family: inherit;
784
+ text-align: left;
785
+ cursor: pointer;
786
+ transition: background 0.15s ease, border-color 0.15s ease;
787
+ }
788
+ .nuvio-brand-bulk-btn:hover:not(:disabled) {
789
+ background: rgba(59, 130, 246, 0.2);
790
+ border-color: rgba(125, 211, 252, 0.35);
791
+ color: var(--nuvio-text);
792
+ }
793
+ .nuvio-brand-bulk-btn:disabled {
794
+ opacity: 0.45;
795
+ cursor: not-allowed;
796
+ }
797
+ .nuvio-brand-bulk-primary {
798
+ width: 100%;
799
+ }
287
800
  .nuvio-toggle-details {
288
801
  flex-shrink: 0;
289
802
  max-width: 9.5rem;
@@ -566,6 +1079,29 @@ select.nuvio-control {
566
1079
  cursor: not-allowed;
567
1080
  filter: saturate(0.6);
568
1081
  }
1082
+ .nuvio-make-editable {
1083
+ padding: 12px 14px 16px;
1084
+ display: flex;
1085
+ flex-direction: column;
1086
+ gap: 10px;
1087
+ }
1088
+ .nuvio-make-editable-lead {
1089
+ margin: 0;
1090
+ font-size: 13px;
1091
+ line-height: 1.45;
1092
+ }
1093
+ .nuvio-make-editable-hint {
1094
+ margin: 0;
1095
+ font-size: 12px;
1096
+ color: var(--nuvio-muted);
1097
+ line-height: 1.4;
1098
+ }
1099
+ .nuvio-make-editable-actions {
1100
+ display: flex;
1101
+ gap: 8px;
1102
+ flex-wrap: wrap;
1103
+ margin-top: 4px;
1104
+ }
569
1105
  .nuvio-button-primary,
570
1106
  .nuvio-btn--primary {
571
1107
  background: