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