fable-editor 1.1.0 → 1.2.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/README.md +22 -12
- package/dist/angular/README.md +22 -12
- package/dist/angular/angular/fable-editor.component.d.ts +4 -1
- package/dist/angular/core/config.d.ts +5 -0
- package/dist/angular/core/editor.d.ts +58 -31
- package/dist/angular/core/i18n.d.ts +16 -6
- package/dist/angular/core/types.d.ts +11 -0
- package/dist/angular/esm2022/angular/fable-editor.component.mjs +14 -2
- package/dist/angular/esm2022/core/config.mjs +85 -35
- package/dist/angular/esm2022/core/editor.mjs +525 -231
- package/dist/angular/esm2022/core/i18n.mjs +33 -13
- package/dist/angular/esm2022/core/icons.mjs +9 -3
- package/dist/angular/esm2022/core/types.mjs +1 -1
- package/dist/angular/fesm2022/fable-editor.mjs +659 -277
- package/dist/angular/fesm2022/fable-editor.mjs.map +1 -1
- package/dist/core/config.d.ts +5 -0
- package/dist/core/config.d.ts.map +1 -1
- package/dist/core/editor.css +287 -75
- package/dist/core/editor.d.ts +58 -31
- package/dist/core/editor.d.ts.map +1 -1
- package/dist/core/i18n.d.ts +16 -6
- package/dist/core/i18n.d.ts.map +1 -1
- package/dist/core/icons.d.ts.map +1 -1
- package/dist/core/index.cjs +6 -262
- package/dist/core/index.mjs +2360 -13471
- package/dist/core/types.d.ts +11 -0
- package/dist/core/types.d.ts.map +1 -1
- package/dist/react/index.cjs +15 -271
- package/dist/react/index.mjs +2787 -13896
- package/package.json +1 -5
- package/style.css +287 -75
package/dist/core/editor.css
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
body {
|
|
3
3
|
margin: 0;
|
|
4
4
|
background: #f1f3f6;
|
|
5
|
-
font-family: 'Segoe UI', system-ui, Arial, sans-serif;
|
|
5
|
+
font-family: var(--fable-ui-font, 'Noto Sans', 'Segoe UI', system-ui, Arial, sans-serif);
|
|
6
6
|
color: #222f3e;
|
|
7
7
|
}
|
|
8
8
|
|
|
@@ -26,13 +26,14 @@
|
|
|
26
26
|
background: #fff;
|
|
27
27
|
border-radius: 6px;
|
|
28
28
|
padding: 6px 14px;
|
|
29
|
-
font: 13px
|
|
29
|
+
font-size: 13px;
|
|
30
|
+
font-family: inherit;
|
|
30
31
|
cursor: pointer
|
|
31
32
|
}
|
|
32
33
|
|
|
33
34
|
.demo-bar button.on {
|
|
34
|
-
background: #
|
|
35
|
-
border-color: #
|
|
35
|
+
background: var(--fable-primary, #df3c2b);
|
|
36
|
+
border-color: var(--fable-primary, #df3c2b);
|
|
36
37
|
color: #fff
|
|
37
38
|
}
|
|
38
39
|
|
|
@@ -44,7 +45,7 @@
|
|
|
44
45
|
box-shadow: 0 1px 2px rgba(34, 47, 62, .06);
|
|
45
46
|
display: flex;
|
|
46
47
|
flex-direction: column;
|
|
47
|
-
font-family: 'Segoe UI', system-ui, Arial, sans-serif;
|
|
48
|
+
font-family: var(--fable-ui-font, 'Noto Sans', 'Segoe UI', system-ui, Arial, sans-serif);
|
|
48
49
|
position: relative;
|
|
49
50
|
}
|
|
50
51
|
|
|
@@ -55,6 +56,16 @@
|
|
|
55
56
|
border-radius: 0;
|
|
56
57
|
}
|
|
57
58
|
|
|
59
|
+
/* dialogs, popups and context toolbars mount on document.body, so they
|
|
60
|
+
inherit the host page font — give them the editor UI font */
|
|
61
|
+
.dlg,
|
|
62
|
+
.pop,
|
|
63
|
+
.imgctx,
|
|
64
|
+
.selctx,
|
|
65
|
+
.tblctx {
|
|
66
|
+
font-family: var(--fable-ui-font, 'Noto Sans', 'Segoe UI', system-ui, Arial, sans-serif);
|
|
67
|
+
}
|
|
68
|
+
|
|
58
69
|
/* menubar */
|
|
59
70
|
.mnb {
|
|
60
71
|
display: flex;
|
|
@@ -67,7 +78,9 @@
|
|
|
67
78
|
.mnb button {
|
|
68
79
|
border: 0;
|
|
69
80
|
background: none;
|
|
70
|
-
font: 14px
|
|
81
|
+
font-size: 14px;
|
|
82
|
+
line-height: 1;
|
|
83
|
+
font-family: inherit;
|
|
71
84
|
color: #222f3e;
|
|
72
85
|
padding: 5px 20px;
|
|
73
86
|
border-radius: 3px;
|
|
@@ -91,6 +104,34 @@
|
|
|
91
104
|
border-radius: 12px;
|
|
92
105
|
background: #fff;
|
|
93
106
|
box-shadow: 0 1px 2px rgba(34, 47, 62, .04);
|
|
107
|
+
position: relative;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
/* responsive one-line toolbar: when the controls overflow a single row
|
|
111
|
+
(mobile/tablet, or a narrow host container) the toolbar clips to one
|
|
112
|
+
row and shows a trailing "…" button that expands the full set */
|
|
113
|
+
.tbr.tbr-measure,
|
|
114
|
+
.tbr.collapsible:not(.expanded) {
|
|
115
|
+
flex-wrap: nowrap;
|
|
116
|
+
overflow: hidden;
|
|
117
|
+
padding-inline-end: 46px;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.tbr .tbr-more {
|
|
121
|
+
display: none;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.tbr.collapsible .tbr-more {
|
|
125
|
+
display: flex;
|
|
126
|
+
position: absolute;
|
|
127
|
+
inset-inline-end: 6px;
|
|
128
|
+
top: 5px;
|
|
129
|
+
background: var(--fable-tgrp-bg, #f1f3f6);
|
|
130
|
+
border-radius: 20px;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.tbr.collapsible .tbr-more.on {
|
|
134
|
+
background: color-mix(in srgb, var(--fable-primary, #df3c2b) 18%, #fff);
|
|
94
135
|
}
|
|
95
136
|
|
|
96
137
|
.tgrp {
|
|
@@ -98,7 +139,7 @@
|
|
|
98
139
|
align-items: center;
|
|
99
140
|
padding: 0 5px;
|
|
100
141
|
position: relative;
|
|
101
|
-
background: #f1f3f6;
|
|
142
|
+
background: var(--fable-tgrp-bg, #f1f3f6);
|
|
102
143
|
border-radius: 20px;
|
|
103
144
|
}
|
|
104
145
|
|
|
@@ -134,7 +175,7 @@
|
|
|
134
175
|
}
|
|
135
176
|
|
|
136
177
|
.tbtn.on {
|
|
137
|
-
background: #
|
|
178
|
+
background: color-mix(in srgb, var(--fable-primary, #df3c2b) 12%, #fff);
|
|
138
179
|
}
|
|
139
180
|
|
|
140
181
|
.tbtn:disabled {
|
|
@@ -196,7 +237,9 @@
|
|
|
196
237
|
height: 32px;
|
|
197
238
|
margin: 0 1px;
|
|
198
239
|
padding: 0 8px;
|
|
199
|
-
font: 500
|
|
240
|
+
font-weight: 500;
|
|
241
|
+
font-size: 13.5px;
|
|
242
|
+
font-family: inherit;
|
|
200
243
|
color: #2f3744;
|
|
201
244
|
cursor: pointer;
|
|
202
245
|
}
|
|
@@ -284,7 +327,7 @@
|
|
|
284
327
|
max-width: 360px;
|
|
285
328
|
padding: 18px 14px;
|
|
286
329
|
margin: 8px 0;
|
|
287
|
-
border: 1.5px solid #
|
|
330
|
+
border: 1.5px solid color-mix(in srgb, var(--fable-primary, #df3c2b) 45%, #fff);
|
|
288
331
|
border-radius: 8px;
|
|
289
332
|
background: #fbfdff;
|
|
290
333
|
color: #7a828e;
|
|
@@ -306,7 +349,7 @@
|
|
|
306
349
|
}
|
|
307
350
|
|
|
308
351
|
.earea .img-ph.active {
|
|
309
|
-
outline: 2px solid #
|
|
352
|
+
outline: 2px solid var(--fable-primary, #df3c2b);
|
|
310
353
|
outline-offset: 1px;
|
|
311
354
|
}
|
|
312
355
|
|
|
@@ -346,7 +389,7 @@
|
|
|
346
389
|
}
|
|
347
390
|
|
|
348
391
|
.earea .tpl.tpl-selected {
|
|
349
|
-
outline: 2px dashed #
|
|
392
|
+
outline: 2px dashed color-mix(in srgb, var(--fable-primary, #df3c2b) 45%, #fff);
|
|
350
393
|
outline-offset: 4px;
|
|
351
394
|
}
|
|
352
395
|
|
|
@@ -413,8 +456,8 @@
|
|
|
413
456
|
}
|
|
414
457
|
|
|
415
458
|
.tpltile:hover {
|
|
416
|
-
border-color: #
|
|
417
|
-
background: #
|
|
459
|
+
border-color: var(--fable-primary, #df3c2b);
|
|
460
|
+
background: color-mix(in srgb, var(--fable-primary, #df3c2b) 6%, #fff);
|
|
418
461
|
}
|
|
419
462
|
|
|
420
463
|
.tpllbl {
|
|
@@ -477,7 +520,7 @@
|
|
|
477
520
|
}
|
|
478
521
|
|
|
479
522
|
.earea table.tbl-selected {
|
|
480
|
-
outline: 2px solid #
|
|
523
|
+
outline: 2px solid var(--fable-primary, #df3c2b);
|
|
481
524
|
outline-offset: 1px;
|
|
482
525
|
}
|
|
483
526
|
|
|
@@ -485,7 +528,7 @@
|
|
|
485
528
|
position: absolute;
|
|
486
529
|
width: 10px;
|
|
487
530
|
height: 10px;
|
|
488
|
-
background: #
|
|
531
|
+
background: var(--fable-primary, #df3c2b);
|
|
489
532
|
border: 1px solid #fff;
|
|
490
533
|
border-radius: 2px;
|
|
491
534
|
box-shadow: 0 0 0 1px rgba(34, 47, 62, .25);
|
|
@@ -510,7 +553,7 @@
|
|
|
510
553
|
.tbl-cellmark {
|
|
511
554
|
position: absolute;
|
|
512
555
|
pointer-events: none;
|
|
513
|
-
border: 1.5px solid #
|
|
556
|
+
border: 1.5px solid var(--fable-primary, #df3c2b);
|
|
514
557
|
border-radius: 1px;
|
|
515
558
|
z-index: 1145;
|
|
516
559
|
}
|
|
@@ -519,7 +562,7 @@
|
|
|
519
562
|
.tbl-opmark {
|
|
520
563
|
position: absolute;
|
|
521
564
|
pointer-events: none;
|
|
522
|
-
border: 1.5px dashed #
|
|
565
|
+
border: 1.5px dashed var(--fable-primary, #df3c2b);
|
|
523
566
|
background: rgba(0, 108, 231, .07);
|
|
524
567
|
border-radius: 2px;
|
|
525
568
|
z-index: 1144;
|
|
@@ -579,14 +622,14 @@
|
|
|
579
622
|
|
|
580
623
|
/* image resize / align toolbar */
|
|
581
624
|
.earea img.img-selected {
|
|
582
|
-
outline: 2px solid #
|
|
625
|
+
outline: 2px solid var(--fable-primary, #df3c2b);
|
|
583
626
|
outline-offset: 1px;
|
|
584
627
|
}
|
|
585
628
|
|
|
586
629
|
/* video align toolbar */
|
|
587
630
|
.earea video.vid-selected,
|
|
588
631
|
.earea .video-embed.vid-selected {
|
|
589
|
-
outline: 2px solid #
|
|
632
|
+
outline: 2px solid var(--fable-primary, #df3c2b);
|
|
590
633
|
outline-offset: 1px;
|
|
591
634
|
}
|
|
592
635
|
|
|
@@ -609,29 +652,63 @@
|
|
|
609
652
|
max-width: 100%;
|
|
610
653
|
}
|
|
611
654
|
|
|
612
|
-
/*
|
|
613
|
-
.earea
|
|
614
|
-
|
|
655
|
+
/* inline code runs */
|
|
656
|
+
.earea code {
|
|
657
|
+
background: #f4f5f7;
|
|
658
|
+
border: 1px solid #e4e7eb;
|
|
615
659
|
border-radius: 4px;
|
|
660
|
+
padding: 1px 5px;
|
|
661
|
+
font: 0.9em Consolas, 'Courier New', monospace;
|
|
616
662
|
}
|
|
617
663
|
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
margin: 0.
|
|
622
|
-
padding:
|
|
664
|
+
/* code sample blocks — header bar shows the language */
|
|
665
|
+
.earea pre.code-block {
|
|
666
|
+
position: relative;
|
|
667
|
+
margin: 0.6em 0;
|
|
668
|
+
padding: 36px 14px 12px;
|
|
669
|
+
background: #f7f8fa;
|
|
670
|
+
border: 1px solid #e4e7eb;
|
|
671
|
+
border-radius: 8px;
|
|
672
|
+
overflow-x: auto;
|
|
673
|
+
font: 13px/1.55 Consolas, 'Courier New', monospace;
|
|
674
|
+
white-space: pre;
|
|
675
|
+
cursor: pointer;
|
|
676
|
+
direction: ltr;
|
|
677
|
+
text-align: left;
|
|
623
678
|
}
|
|
624
679
|
|
|
625
|
-
.earea .
|
|
626
|
-
|
|
627
|
-
|
|
680
|
+
.earea pre.code-block::before {
|
|
681
|
+
content: attr(data-lang-label);
|
|
682
|
+
position: absolute;
|
|
683
|
+
top: 0;
|
|
684
|
+
left: 0;
|
|
685
|
+
right: 0;
|
|
686
|
+
padding: 5px 12px;
|
|
687
|
+
font: 11px/1.4 var(--fable-ui-font, 'Noto Sans', 'Segoe UI', system-ui, Arial, sans-serif);
|
|
688
|
+
letter-spacing: .4px;
|
|
689
|
+
color: #667;
|
|
690
|
+
background: #eef0f3;
|
|
691
|
+
border-bottom: 1px solid #e4e7eb;
|
|
692
|
+
border-radius: 7px 7px 0 0;
|
|
693
|
+
}
|
|
694
|
+
|
|
695
|
+
.earea pre.code-block code {
|
|
696
|
+
background: none;
|
|
697
|
+
border: 0;
|
|
698
|
+
padding: 0;
|
|
699
|
+
font: inherit;
|
|
700
|
+
}
|
|
701
|
+
|
|
702
|
+
.earea pre.code-block.code-selected {
|
|
703
|
+
outline: 2px solid var(--fable-primary, #df3c2b);
|
|
704
|
+
outline-offset: 1px;
|
|
628
705
|
}
|
|
629
706
|
|
|
630
707
|
.img-handle {
|
|
631
708
|
position: absolute;
|
|
632
709
|
width: 10px;
|
|
633
710
|
height: 10px;
|
|
634
|
-
background: #
|
|
711
|
+
background: var(--fable-primary, #df3c2b);
|
|
635
712
|
border: 1px solid #fff;
|
|
636
713
|
border-radius: 2px;
|
|
637
714
|
box-shadow: 0 0 0 1px rgba(34, 47, 62, .25);
|
|
@@ -679,7 +756,7 @@
|
|
|
679
756
|
}
|
|
680
757
|
|
|
681
758
|
.imgctx button.on {
|
|
682
|
-
background: #
|
|
759
|
+
background: color-mix(in srgb, var(--fable-primary, #df3c2b) 18%, #fff);
|
|
683
760
|
}
|
|
684
761
|
|
|
685
762
|
.imgctx button svg {
|
|
@@ -704,7 +781,8 @@
|
|
|
704
781
|
border: 1px solid #cfd6df;
|
|
705
782
|
border-radius: 5px;
|
|
706
783
|
padding: 0 9px;
|
|
707
|
-
font: 13.5px
|
|
784
|
+
font-size: 13.5px;
|
|
785
|
+
font-family: inherit;
|
|
708
786
|
margin: 0 2px;
|
|
709
787
|
}
|
|
710
788
|
|
|
@@ -715,19 +793,21 @@
|
|
|
715
793
|
.imgctx button.txtbtn {
|
|
716
794
|
width: auto;
|
|
717
795
|
padding: 0 12px;
|
|
718
|
-
font: 13.5px
|
|
796
|
+
font-size: 13.5px;
|
|
797
|
+
font-family: inherit;
|
|
719
798
|
white-space: nowrap;
|
|
720
799
|
}
|
|
721
800
|
|
|
722
|
-
/* text selection bubble toolbar
|
|
801
|
+
/* text selection bubble toolbar — same light look as the other
|
|
802
|
+
floating context toolbars (.imgctx) */
|
|
723
803
|
.selctx {
|
|
724
804
|
position: absolute;
|
|
725
805
|
display: flex;
|
|
726
806
|
align-items: center;
|
|
727
807
|
gap: 1px;
|
|
728
|
-
background: #
|
|
808
|
+
background: #fff;
|
|
729
809
|
border-radius: 8px;
|
|
730
|
-
box-shadow: 0
|
|
810
|
+
box-shadow: 0 4px 14px rgba(34, 47, 62, .18), 0 0 0 1px rgba(34, 47, 62, .06);
|
|
731
811
|
padding: 4px;
|
|
732
812
|
z-index: 1160;
|
|
733
813
|
}
|
|
@@ -744,21 +824,21 @@
|
|
|
744
824
|
background: none;
|
|
745
825
|
border-radius: 5px;
|
|
746
826
|
cursor: pointer;
|
|
747
|
-
color: #
|
|
827
|
+
color: #222f3e;
|
|
748
828
|
}
|
|
749
829
|
|
|
750
830
|
.selctx button:hover {
|
|
751
|
-
background:
|
|
831
|
+
background: #f0f0f0;
|
|
752
832
|
}
|
|
753
833
|
|
|
754
834
|
.selctx button.on {
|
|
755
|
-
background:
|
|
835
|
+
background: color-mix(in srgb, var(--fable-primary, #df3c2b) 18%, #fff);
|
|
756
836
|
}
|
|
757
837
|
|
|
758
838
|
.selctx button svg {
|
|
759
839
|
width: 18px;
|
|
760
840
|
height: 18px;
|
|
761
|
-
stroke: #
|
|
841
|
+
stroke: #222f3e;
|
|
762
842
|
fill: none;
|
|
763
843
|
stroke-width: 1.7;
|
|
764
844
|
stroke-linecap: round;
|
|
@@ -766,7 +846,7 @@
|
|
|
766
846
|
}
|
|
767
847
|
|
|
768
848
|
.selctx button svg .f {
|
|
769
|
-
fill: #
|
|
849
|
+
fill: #222f3e;
|
|
770
850
|
stroke: none;
|
|
771
851
|
}
|
|
772
852
|
|
|
@@ -774,7 +854,7 @@
|
|
|
774
854
|
width: 1px;
|
|
775
855
|
align-self: stretch;
|
|
776
856
|
margin: 3px 3px;
|
|
777
|
-
background:
|
|
857
|
+
background: #eeeeee;
|
|
778
858
|
}
|
|
779
859
|
|
|
780
860
|
.selctx .colorbar {
|
|
@@ -784,7 +864,7 @@
|
|
|
784
864
|
right: 7px;
|
|
785
865
|
height: 3px;
|
|
786
866
|
border-radius: 1px;
|
|
787
|
-
background: #
|
|
867
|
+
background: #000;
|
|
788
868
|
}
|
|
789
869
|
|
|
790
870
|
.earea hr.pagebreak {
|
|
@@ -862,7 +942,8 @@
|
|
|
862
942
|
background: none;
|
|
863
943
|
padding: 6px 10px;
|
|
864
944
|
border-radius: 5px;
|
|
865
|
-
font: 14px
|
|
945
|
+
font-size: 14px;
|
|
946
|
+
font-family: inherit;
|
|
866
947
|
color: #222f3e;
|
|
867
948
|
cursor: pointer;
|
|
868
949
|
text-align: start;
|
|
@@ -874,7 +955,7 @@
|
|
|
874
955
|
}
|
|
875
956
|
|
|
876
957
|
.pop .mi.on {
|
|
877
|
-
background: #
|
|
958
|
+
background: color-mix(in srgb, var(--fable-primary, #df3c2b) 18%, #fff);
|
|
878
959
|
}
|
|
879
960
|
|
|
880
961
|
.pop .mi .ic {
|
|
@@ -951,16 +1032,17 @@
|
|
|
951
1032
|
/* color palette */
|
|
952
1033
|
.cpal {
|
|
953
1034
|
display: grid;
|
|
954
|
-
grid-template-columns: repeat(5,
|
|
955
|
-
|
|
956
|
-
|
|
1035
|
+
grid-template-columns: repeat(5, 34px);
|
|
1036
|
+
justify-content: space-between;
|
|
1037
|
+
/* gap: 4px;
|
|
1038
|
+
padding: 6px; */
|
|
957
1039
|
}
|
|
958
1040
|
|
|
959
1041
|
.cpal button {
|
|
960
|
-
width:
|
|
961
|
-
height:
|
|
962
|
-
border:
|
|
963
|
-
border-radius: 3px;
|
|
1042
|
+
width: 34px;
|
|
1043
|
+
height: 34px;
|
|
1044
|
+
border: none;
|
|
1045
|
+
/* border-radius: 3px; */
|
|
964
1046
|
cursor: pointer;
|
|
965
1047
|
padding: 0;
|
|
966
1048
|
transition: transform .06s ease;
|
|
@@ -968,6 +1050,7 @@
|
|
|
968
1050
|
|
|
969
1051
|
.cpal button:hover {
|
|
970
1052
|
transform: scale(0.9);
|
|
1053
|
+
border-radius: 3px;
|
|
971
1054
|
}
|
|
972
1055
|
|
|
973
1056
|
/* custom color footer: current color, no-color, custom-color wheel */
|
|
@@ -975,7 +1058,7 @@
|
|
|
975
1058
|
display: flex;
|
|
976
1059
|
align-items: center;
|
|
977
1060
|
justify-content: space-between;
|
|
978
|
-
padding:
|
|
1061
|
+
padding: 6px;
|
|
979
1062
|
}
|
|
980
1063
|
|
|
981
1064
|
.cswatch {
|
|
@@ -1117,9 +1200,9 @@
|
|
|
1117
1200
|
transform: rotate(90deg);
|
|
1118
1201
|
}
|
|
1119
1202
|
|
|
1120
|
-
/* selection toolbar
|
|
1203
|
+
/* selection toolbar icons with text glyphs */
|
|
1121
1204
|
.selctx button svg text {
|
|
1122
|
-
fill: #
|
|
1205
|
+
fill: #222f3e;
|
|
1123
1206
|
}
|
|
1124
1207
|
|
|
1125
1208
|
/* revision history */
|
|
@@ -1150,7 +1233,8 @@
|
|
|
1150
1233
|
background: none;
|
|
1151
1234
|
border-radius: 5px;
|
|
1152
1235
|
padding: 8px 10px;
|
|
1153
|
-
font: 13.5px
|
|
1236
|
+
font-size: 13.5px;
|
|
1237
|
+
font-family: inherit;
|
|
1154
1238
|
color: #222f3e;
|
|
1155
1239
|
cursor: pointer;
|
|
1156
1240
|
}
|
|
@@ -1160,7 +1244,7 @@
|
|
|
1160
1244
|
}
|
|
1161
1245
|
|
|
1162
1246
|
.revlist button.on {
|
|
1163
|
-
background: #
|
|
1247
|
+
background: color-mix(in srgb, var(--fable-primary, #df3c2b) 18%, #fff);
|
|
1164
1248
|
}
|
|
1165
1249
|
|
|
1166
1250
|
.revlist button .wc {
|
|
@@ -1172,8 +1256,8 @@
|
|
|
1172
1256
|
display: block;
|
|
1173
1257
|
text-align: center;
|
|
1174
1258
|
margin-top: 8px;
|
|
1175
|
-
border: 1px solid #
|
|
1176
|
-
background: #
|
|
1259
|
+
border: 1px solid var(--fable-primary, #df3c2b);
|
|
1260
|
+
background: var(--fable-primary, #df3c2b);
|
|
1177
1261
|
color: #fff;
|
|
1178
1262
|
padding: 8px 12px;
|
|
1179
1263
|
border-radius: 6px;
|
|
@@ -1221,7 +1305,8 @@
|
|
|
1221
1305
|
text-align: start;
|
|
1222
1306
|
padding: 8px 10px;
|
|
1223
1307
|
border-radius: 6px;
|
|
1224
|
-
font: 13.5px
|
|
1308
|
+
font-size: 13.5px;
|
|
1309
|
+
font-family: inherit;
|
|
1225
1310
|
color: #222f3e;
|
|
1226
1311
|
cursor: pointer;
|
|
1227
1312
|
white-space: nowrap;
|
|
@@ -1232,8 +1317,8 @@
|
|
|
1232
1317
|
}
|
|
1233
1318
|
|
|
1234
1319
|
.chmap .chtabs button.on {
|
|
1235
|
-
background: #
|
|
1236
|
-
color: #
|
|
1320
|
+
background: color-mix(in srgb, var(--fable-primary, #df3c2b) 12%, #fff);
|
|
1321
|
+
color: var(--fable-primary, #df3c2b);
|
|
1237
1322
|
font-weight: 600;
|
|
1238
1323
|
}
|
|
1239
1324
|
|
|
@@ -1300,8 +1385,8 @@
|
|
|
1300
1385
|
}
|
|
1301
1386
|
|
|
1302
1387
|
.tgrid span.hot {
|
|
1303
|
-
background: #
|
|
1304
|
-
border-color: #
|
|
1388
|
+
background: color-mix(in srgb, var(--fable-primary, #df3c2b) 18%, #fff);
|
|
1389
|
+
border-color: color-mix(in srgb, var(--fable-primary, #df3c2b) 55%, #fff);
|
|
1305
1390
|
}
|
|
1306
1391
|
|
|
1307
1392
|
.tgridlbl {
|
|
@@ -1374,7 +1459,8 @@
|
|
|
1374
1459
|
.dlg footer button {
|
|
1375
1460
|
border-radius: 6px;
|
|
1376
1461
|
padding: 8px 16px;
|
|
1377
|
-
font: 14px
|
|
1462
|
+
font-size: 14px;
|
|
1463
|
+
font-family: inherit;
|
|
1378
1464
|
cursor: pointer;
|
|
1379
1465
|
border: 1px solid #cfd6df;
|
|
1380
1466
|
background: #fff;
|
|
@@ -1382,8 +1468,8 @@
|
|
|
1382
1468
|
}
|
|
1383
1469
|
|
|
1384
1470
|
.dlg footer button.pri {
|
|
1385
|
-
background: #
|
|
1386
|
-
border-color: #
|
|
1471
|
+
background: var(--fable-primary, #df3c2b);
|
|
1472
|
+
border-color: var(--fable-primary, #df3c2b);
|
|
1387
1473
|
color: #fff;
|
|
1388
1474
|
}
|
|
1389
1475
|
|
|
@@ -1410,7 +1496,8 @@
|
|
|
1410
1496
|
border: 0;
|
|
1411
1497
|
background: none;
|
|
1412
1498
|
padding: 8px 14px;
|
|
1413
|
-
font: 14px
|
|
1499
|
+
font-size: 14px;
|
|
1500
|
+
font-family: inherit;
|
|
1414
1501
|
color: #556;
|
|
1415
1502
|
cursor: pointer;
|
|
1416
1503
|
border-bottom: 2px solid transparent;
|
|
@@ -1418,8 +1505,8 @@
|
|
|
1418
1505
|
}
|
|
1419
1506
|
|
|
1420
1507
|
.dlg .dtabs button.on {
|
|
1421
|
-
color: #
|
|
1422
|
-
border-bottom-color: #
|
|
1508
|
+
color: var(--fable-primary, #df3c2b);
|
|
1509
|
+
border-bottom-color: var(--fable-primary, #df3c2b);
|
|
1423
1510
|
font-weight: 600;
|
|
1424
1511
|
}
|
|
1425
1512
|
|
|
@@ -1447,12 +1534,110 @@
|
|
|
1447
1534
|
color: #445;
|
|
1448
1535
|
}
|
|
1449
1536
|
|
|
1450
|
-
.dlg .dfield input
|
|
1537
|
+
.dlg .dfield input,
|
|
1538
|
+
.dlg .dfield select {
|
|
1451
1539
|
border: 1px solid #cfd6df;
|
|
1452
1540
|
border-radius: 6px;
|
|
1453
1541
|
padding: 8px 10px;
|
|
1454
|
-
font: 14px
|
|
1542
|
+
font-size: 14px;
|
|
1543
|
+
font-family: inherit;
|
|
1455
1544
|
min-width: 0;
|
|
1545
|
+
background: #fff;
|
|
1546
|
+
color: #222f3e;
|
|
1547
|
+
}
|
|
1548
|
+
|
|
1549
|
+
/* custom dropdown for dialog fields */
|
|
1550
|
+
.dlg .dsel {
|
|
1551
|
+
position: relative;
|
|
1552
|
+
}
|
|
1553
|
+
|
|
1554
|
+
.dlg .dsel-btn {
|
|
1555
|
+
display: flex;
|
|
1556
|
+
align-items: center;
|
|
1557
|
+
justify-content: space-between;
|
|
1558
|
+
gap: 8px;
|
|
1559
|
+
width: 100%;
|
|
1560
|
+
box-sizing: border-box;
|
|
1561
|
+
border: 1px solid #cfd6df;
|
|
1562
|
+
border-radius: 6px;
|
|
1563
|
+
padding: 8px 10px;
|
|
1564
|
+
font-size: 14px;
|
|
1565
|
+
font-family: inherit;
|
|
1566
|
+
background: #fff;
|
|
1567
|
+
color: #222f3e;
|
|
1568
|
+
cursor: pointer;
|
|
1569
|
+
text-align: start;
|
|
1570
|
+
}
|
|
1571
|
+
|
|
1572
|
+
.dlg .dsel-btn svg {
|
|
1573
|
+
width: 10px;
|
|
1574
|
+
height: 10px;
|
|
1575
|
+
stroke: #222f3e;
|
|
1576
|
+
stroke-width: 2;
|
|
1577
|
+
fill: none;
|
|
1578
|
+
flex: none;
|
|
1579
|
+
transition: transform .15s;
|
|
1580
|
+
}
|
|
1581
|
+
|
|
1582
|
+
.dlg .dsel.open .dsel-btn {
|
|
1583
|
+
border-color: var(--fable-primary, #df3c2b);
|
|
1584
|
+
}
|
|
1585
|
+
|
|
1586
|
+
.dlg .dsel.open .dsel-btn svg {
|
|
1587
|
+
transform: rotate(180deg);
|
|
1588
|
+
}
|
|
1589
|
+
|
|
1590
|
+
.dlg .dsel-list {
|
|
1591
|
+
display: none;
|
|
1592
|
+
position: absolute;
|
|
1593
|
+
top: calc(100% + 4px);
|
|
1594
|
+
inset-inline-start: 0;
|
|
1595
|
+
min-width: 100%;
|
|
1596
|
+
max-height: 220px;
|
|
1597
|
+
overflow-y: auto;
|
|
1598
|
+
background: #fff;
|
|
1599
|
+
border-radius: 8px;
|
|
1600
|
+
box-shadow: 0 6px 20px rgba(34, 47, 62, .18), 0 0 0 1px rgba(34, 47, 62, .08);
|
|
1601
|
+
padding: 4px;
|
|
1602
|
+
z-index: 10;
|
|
1603
|
+
}
|
|
1604
|
+
|
|
1605
|
+
.dlg .dsel.open .dsel-list {
|
|
1606
|
+
display: block;
|
|
1607
|
+
}
|
|
1608
|
+
|
|
1609
|
+
.dlg .dsel-list button {
|
|
1610
|
+
display: block;
|
|
1611
|
+
width: 100%;
|
|
1612
|
+
text-align: start;
|
|
1613
|
+
border: 0;
|
|
1614
|
+
background: none;
|
|
1615
|
+
border-radius: 5px;
|
|
1616
|
+
padding: 7px 10px;
|
|
1617
|
+
font-size: 13.5px;
|
|
1618
|
+
font-family: inherit;
|
|
1619
|
+
color: #222f3e;
|
|
1620
|
+
cursor: pointer;
|
|
1621
|
+
}
|
|
1622
|
+
|
|
1623
|
+
.dlg .dsel-list button:hover {
|
|
1624
|
+
background: #f0f0f0;
|
|
1625
|
+
}
|
|
1626
|
+
|
|
1627
|
+
.dlg .dsel-list button.on {
|
|
1628
|
+
background: color-mix(in srgb, var(--fable-primary, #df3c2b) 12%, #fff);
|
|
1629
|
+
color: var(--fable-primary, #df3c2b);
|
|
1630
|
+
font-weight: 600;
|
|
1631
|
+
}
|
|
1632
|
+
|
|
1633
|
+
.dlg textarea.code-input {
|
|
1634
|
+
width: 560px;
|
|
1635
|
+
max-width: 76vw;
|
|
1636
|
+
height: 220px;
|
|
1637
|
+
font: 13px/1.5 Consolas, 'Courier New', monospace;
|
|
1638
|
+
white-space: pre;
|
|
1639
|
+
direction: ltr;
|
|
1640
|
+
text-align: left;
|
|
1456
1641
|
}
|
|
1457
1642
|
|
|
1458
1643
|
.dlg .drow {
|
|
@@ -1467,7 +1652,8 @@
|
|
|
1467
1652
|
color: #222f3e;
|
|
1468
1653
|
border-radius: 6px;
|
|
1469
1654
|
padding: 8px 12px;
|
|
1470
|
-
font: 13.5px
|
|
1655
|
+
font-size: 13.5px;
|
|
1656
|
+
font-family: inherit;
|
|
1471
1657
|
cursor: pointer;
|
|
1472
1658
|
white-space: nowrap;
|
|
1473
1659
|
}
|
|
@@ -1497,4 +1683,30 @@
|
|
|
1497
1683
|
padding: 2px 7px;
|
|
1498
1684
|
font: 12px Consolas, monospace;
|
|
1499
1685
|
border: 1px solid #dde2e8;
|
|
1686
|
+
}
|
|
1687
|
+
|
|
1688
|
+
/* custom tooltip bubble — replaces the browser's native title tooltips
|
|
1689
|
+
across the whole editor UI (toolbar, menus, popups, context toolbars) */
|
|
1690
|
+
.etip {
|
|
1691
|
+
position: fixed;
|
|
1692
|
+
z-index: 2147483000;
|
|
1693
|
+
max-width: 260px;
|
|
1694
|
+
padding: 5px 10px;
|
|
1695
|
+
border-radius: 6px;
|
|
1696
|
+
background: #222f3e;
|
|
1697
|
+
color: #fff;
|
|
1698
|
+
font-family: var(--fable-ui-font, 'Noto Sans', 'Segoe UI', system-ui, Arial, sans-serif);
|
|
1699
|
+
font-size: 12px;
|
|
1700
|
+
line-height: 1.4;
|
|
1701
|
+
letter-spacing: .1px;
|
|
1702
|
+
box-shadow: 0 4px 16px rgba(34, 47, 62, .3);
|
|
1703
|
+
pointer-events: none;
|
|
1704
|
+
opacity: 0;
|
|
1705
|
+
transform: translateY(3px);
|
|
1706
|
+
transition: opacity .12s ease, transform .12s ease;
|
|
1707
|
+
}
|
|
1708
|
+
|
|
1709
|
+
.etip.show {
|
|
1710
|
+
opacity: 1;
|
|
1711
|
+
transform: none;
|
|
1500
1712
|
}
|