fable-editor 1.0.2 → 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 +55 -6
- package/dist/angular/README.md +55 -6
- package/dist/angular/angular/fable-editor.component.d.ts +4 -1
- package/dist/angular/core/config.d.ts +15 -0
- package/dist/angular/core/editor.d.ts +107 -0
- package/dist/angular/core/i18n.d.ts +49 -0
- package/dist/angular/core/types.d.ts +21 -0
- package/dist/angular/esm2022/angular/fable-editor.component.mjs +14 -2
- package/dist/angular/esm2022/core/config.mjs +215 -24
- package/dist/angular/esm2022/core/editor.mjs +1255 -74
- package/dist/angular/esm2022/core/i18n.mjs +101 -3
- package/dist/angular/esm2022/core/icons.mjs +12 -2
- package/dist/angular/esm2022/core/types.mjs +1 -1
- package/dist/angular/fesm2022/fable-editor.mjs +1591 -99
- package/dist/angular/fesm2022/fable-editor.mjs.map +1 -1
- package/dist/core/config.d.ts +15 -0
- package/dist/core/config.d.ts.map +1 -1
- package/dist/core/editor.css +452 -57
- package/dist/core/editor.d.ts +107 -0
- package/dist/core/editor.d.ts.map +1 -1
- package/dist/core/i18n.d.ts +49 -0
- package/dist/core/i18n.d.ts.map +1 -1
- package/dist/core/icons.d.ts.map +1 -1
- package/dist/core/index.cjs +4 -4
- package/dist/core/index.mjs +2580 -703
- package/dist/core/types.d.ts +21 -0
- package/dist/core/types.d.ts.map +1 -1
- package/dist/react/FableEditor.d.ts.map +1 -1
- package/dist/react/index.cjs +13 -13
- package/dist/react/index.mjs +2982 -1136
- package/package.json +1 -1
- package/style.css +452 -57
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
|
}
|
|
@@ -270,12 +313,12 @@
|
|
|
270
313
|
word-break: break-word;
|
|
271
314
|
}
|
|
272
315
|
|
|
273
|
-
.earea img {
|
|
316
|
+
.earea img, .earea video {
|
|
274
317
|
max-width: 100%;
|
|
275
318
|
height: auto;
|
|
276
319
|
}
|
|
277
320
|
|
|
278
|
-
/* image upload placeholder */
|
|
321
|
+
/* image / video upload placeholder */
|
|
279
322
|
.earea .img-ph {
|
|
280
323
|
display: flex;
|
|
281
324
|
align-items: center;
|
|
@@ -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,7 +622,85 @@
|
|
|
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);
|
|
626
|
+
outline-offset: 1px;
|
|
627
|
+
}
|
|
628
|
+
|
|
629
|
+
/* video align toolbar */
|
|
630
|
+
.earea video.vid-selected,
|
|
631
|
+
.earea .video-embed.vid-selected {
|
|
632
|
+
outline: 2px solid var(--fable-primary, #df3c2b);
|
|
633
|
+
outline-offset: 1px;
|
|
634
|
+
}
|
|
635
|
+
|
|
636
|
+
/* embedded hosted players (YouTube & co.) */
|
|
637
|
+
.earea .video-embed {
|
|
638
|
+
display: inline-block;
|
|
639
|
+
max-width: 100%;
|
|
640
|
+
}
|
|
641
|
+
|
|
642
|
+
.earea .video-embed iframe {
|
|
643
|
+
/* clicks land on the wrapper so the embed can be selected/aligned */
|
|
644
|
+
pointer-events: none;
|
|
645
|
+
display: block;
|
|
646
|
+
border: 0;
|
|
647
|
+
max-width: 100%;
|
|
648
|
+
}
|
|
649
|
+
|
|
650
|
+
.earea .tpl-media video,
|
|
651
|
+
.earea .tpl-media .video-embed {
|
|
652
|
+
max-width: 100%;
|
|
653
|
+
}
|
|
654
|
+
|
|
655
|
+
/* inline code runs */
|
|
656
|
+
.earea code {
|
|
657
|
+
background: #f4f5f7;
|
|
658
|
+
border: 1px solid #e4e7eb;
|
|
659
|
+
border-radius: 4px;
|
|
660
|
+
padding: 1px 5px;
|
|
661
|
+
font: 0.9em Consolas, 'Courier New', monospace;
|
|
662
|
+
}
|
|
663
|
+
|
|
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;
|
|
678
|
+
}
|
|
679
|
+
|
|
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);
|
|
583
704
|
outline-offset: 1px;
|
|
584
705
|
}
|
|
585
706
|
|
|
@@ -587,7 +708,7 @@
|
|
|
587
708
|
position: absolute;
|
|
588
709
|
width: 10px;
|
|
589
710
|
height: 10px;
|
|
590
|
-
background: #
|
|
711
|
+
background: var(--fable-primary, #df3c2b);
|
|
591
712
|
border: 1px solid #fff;
|
|
592
713
|
border-radius: 2px;
|
|
593
714
|
box-shadow: 0 0 0 1px rgba(34, 47, 62, .25);
|
|
@@ -635,7 +756,7 @@
|
|
|
635
756
|
}
|
|
636
757
|
|
|
637
758
|
.imgctx button.on {
|
|
638
|
-
background: #
|
|
759
|
+
background: color-mix(in srgb, var(--fable-primary, #df3c2b) 18%, #fff);
|
|
639
760
|
}
|
|
640
761
|
|
|
641
762
|
.imgctx button svg {
|
|
@@ -660,7 +781,8 @@
|
|
|
660
781
|
border: 1px solid #cfd6df;
|
|
661
782
|
border-radius: 5px;
|
|
662
783
|
padding: 0 9px;
|
|
663
|
-
font: 13.5px
|
|
784
|
+
font-size: 13.5px;
|
|
785
|
+
font-family: inherit;
|
|
664
786
|
margin: 0 2px;
|
|
665
787
|
}
|
|
666
788
|
|
|
@@ -671,19 +793,21 @@
|
|
|
671
793
|
.imgctx button.txtbtn {
|
|
672
794
|
width: auto;
|
|
673
795
|
padding: 0 12px;
|
|
674
|
-
font: 13.5px
|
|
796
|
+
font-size: 13.5px;
|
|
797
|
+
font-family: inherit;
|
|
675
798
|
white-space: nowrap;
|
|
676
799
|
}
|
|
677
800
|
|
|
678
|
-
/* text selection bubble toolbar
|
|
801
|
+
/* text selection bubble toolbar — same light look as the other
|
|
802
|
+
floating context toolbars (.imgctx) */
|
|
679
803
|
.selctx {
|
|
680
804
|
position: absolute;
|
|
681
805
|
display: flex;
|
|
682
806
|
align-items: center;
|
|
683
807
|
gap: 1px;
|
|
684
|
-
background: #
|
|
808
|
+
background: #fff;
|
|
685
809
|
border-radius: 8px;
|
|
686
|
-
box-shadow: 0
|
|
810
|
+
box-shadow: 0 4px 14px rgba(34, 47, 62, .18), 0 0 0 1px rgba(34, 47, 62, .06);
|
|
687
811
|
padding: 4px;
|
|
688
812
|
z-index: 1160;
|
|
689
813
|
}
|
|
@@ -700,21 +824,21 @@
|
|
|
700
824
|
background: none;
|
|
701
825
|
border-radius: 5px;
|
|
702
826
|
cursor: pointer;
|
|
703
|
-
color: #
|
|
827
|
+
color: #222f3e;
|
|
704
828
|
}
|
|
705
829
|
|
|
706
830
|
.selctx button:hover {
|
|
707
|
-
background:
|
|
831
|
+
background: #f0f0f0;
|
|
708
832
|
}
|
|
709
833
|
|
|
710
834
|
.selctx button.on {
|
|
711
|
-
background:
|
|
835
|
+
background: color-mix(in srgb, var(--fable-primary, #df3c2b) 18%, #fff);
|
|
712
836
|
}
|
|
713
837
|
|
|
714
838
|
.selctx button svg {
|
|
715
839
|
width: 18px;
|
|
716
840
|
height: 18px;
|
|
717
|
-
stroke: #
|
|
841
|
+
stroke: #222f3e;
|
|
718
842
|
fill: none;
|
|
719
843
|
stroke-width: 1.7;
|
|
720
844
|
stroke-linecap: round;
|
|
@@ -722,7 +846,7 @@
|
|
|
722
846
|
}
|
|
723
847
|
|
|
724
848
|
.selctx button svg .f {
|
|
725
|
-
fill: #
|
|
849
|
+
fill: #222f3e;
|
|
726
850
|
stroke: none;
|
|
727
851
|
}
|
|
728
852
|
|
|
@@ -730,7 +854,7 @@
|
|
|
730
854
|
width: 1px;
|
|
731
855
|
align-self: stretch;
|
|
732
856
|
margin: 3px 3px;
|
|
733
|
-
background:
|
|
857
|
+
background: #eeeeee;
|
|
734
858
|
}
|
|
735
859
|
|
|
736
860
|
.selctx .colorbar {
|
|
@@ -740,7 +864,7 @@
|
|
|
740
864
|
right: 7px;
|
|
741
865
|
height: 3px;
|
|
742
866
|
border-radius: 1px;
|
|
743
|
-
background: #
|
|
867
|
+
background: #000;
|
|
744
868
|
}
|
|
745
869
|
|
|
746
870
|
.earea hr.pagebreak {
|
|
@@ -818,7 +942,8 @@
|
|
|
818
942
|
background: none;
|
|
819
943
|
padding: 6px 10px;
|
|
820
944
|
border-radius: 5px;
|
|
821
|
-
font: 14px
|
|
945
|
+
font-size: 14px;
|
|
946
|
+
font-family: inherit;
|
|
822
947
|
color: #222f3e;
|
|
823
948
|
cursor: pointer;
|
|
824
949
|
text-align: start;
|
|
@@ -830,7 +955,7 @@
|
|
|
830
955
|
}
|
|
831
956
|
|
|
832
957
|
.pop .mi.on {
|
|
833
|
-
background: #
|
|
958
|
+
background: color-mix(in srgb, var(--fable-primary, #df3c2b) 18%, #fff);
|
|
834
959
|
}
|
|
835
960
|
|
|
836
961
|
.pop .mi .ic {
|
|
@@ -907,16 +1032,17 @@
|
|
|
907
1032
|
/* color palette */
|
|
908
1033
|
.cpal {
|
|
909
1034
|
display: grid;
|
|
910
|
-
grid-template-columns: repeat(5,
|
|
911
|
-
|
|
912
|
-
|
|
1035
|
+
grid-template-columns: repeat(5, 34px);
|
|
1036
|
+
justify-content: space-between;
|
|
1037
|
+
/* gap: 4px;
|
|
1038
|
+
padding: 6px; */
|
|
913
1039
|
}
|
|
914
1040
|
|
|
915
1041
|
.cpal button {
|
|
916
|
-
width:
|
|
917
|
-
height:
|
|
918
|
-
border:
|
|
919
|
-
border-radius: 3px;
|
|
1042
|
+
width: 34px;
|
|
1043
|
+
height: 34px;
|
|
1044
|
+
border: none;
|
|
1045
|
+
/* border-radius: 3px; */
|
|
920
1046
|
cursor: pointer;
|
|
921
1047
|
padding: 0;
|
|
922
1048
|
transition: transform .06s ease;
|
|
@@ -924,6 +1050,7 @@
|
|
|
924
1050
|
|
|
925
1051
|
.cpal button:hover {
|
|
926
1052
|
transform: scale(0.9);
|
|
1053
|
+
border-radius: 3px;
|
|
927
1054
|
}
|
|
928
1055
|
|
|
929
1056
|
/* custom color footer: current color, no-color, custom-color wheel */
|
|
@@ -931,7 +1058,7 @@
|
|
|
931
1058
|
display: flex;
|
|
932
1059
|
align-items: center;
|
|
933
1060
|
justify-content: space-between;
|
|
934
|
-
padding:
|
|
1061
|
+
padding: 6px;
|
|
935
1062
|
}
|
|
936
1063
|
|
|
937
1064
|
.cswatch {
|
|
@@ -1073,9 +1200,9 @@
|
|
|
1073
1200
|
transform: rotate(90deg);
|
|
1074
1201
|
}
|
|
1075
1202
|
|
|
1076
|
-
/* selection toolbar
|
|
1203
|
+
/* selection toolbar icons with text glyphs */
|
|
1077
1204
|
.selctx button svg text {
|
|
1078
|
-
fill: #
|
|
1205
|
+
fill: #222f3e;
|
|
1079
1206
|
}
|
|
1080
1207
|
|
|
1081
1208
|
/* revision history */
|
|
@@ -1106,7 +1233,8 @@
|
|
|
1106
1233
|
background: none;
|
|
1107
1234
|
border-radius: 5px;
|
|
1108
1235
|
padding: 8px 10px;
|
|
1109
|
-
font: 13.5px
|
|
1236
|
+
font-size: 13.5px;
|
|
1237
|
+
font-family: inherit;
|
|
1110
1238
|
color: #222f3e;
|
|
1111
1239
|
cursor: pointer;
|
|
1112
1240
|
}
|
|
@@ -1116,7 +1244,7 @@
|
|
|
1116
1244
|
}
|
|
1117
1245
|
|
|
1118
1246
|
.revlist button.on {
|
|
1119
|
-
background: #
|
|
1247
|
+
background: color-mix(in srgb, var(--fable-primary, #df3c2b) 18%, #fff);
|
|
1120
1248
|
}
|
|
1121
1249
|
|
|
1122
1250
|
.revlist button .wc {
|
|
@@ -1128,8 +1256,8 @@
|
|
|
1128
1256
|
display: block;
|
|
1129
1257
|
text-align: center;
|
|
1130
1258
|
margin-top: 8px;
|
|
1131
|
-
border: 1px solid #
|
|
1132
|
-
background: #
|
|
1259
|
+
border: 1px solid var(--fable-primary, #df3c2b);
|
|
1260
|
+
background: var(--fable-primary, #df3c2b);
|
|
1133
1261
|
color: #fff;
|
|
1134
1262
|
padding: 8px 12px;
|
|
1135
1263
|
border-radius: 6px;
|
|
@@ -1152,7 +1280,69 @@
|
|
|
1152
1280
|
font-size: 14px;
|
|
1153
1281
|
}
|
|
1154
1282
|
|
|
1155
|
-
/* char map */
|
|
1283
|
+
/* char / emoji map: fixed category tabs left, glyph grid right */
|
|
1284
|
+
.chmap {
|
|
1285
|
+
display: flex;
|
|
1286
|
+
width: 560px;
|
|
1287
|
+
max-width: 76vw;
|
|
1288
|
+
height: 320px;
|
|
1289
|
+
max-height: 46vh;
|
|
1290
|
+
}
|
|
1291
|
+
|
|
1292
|
+
.chmap .chtabs {
|
|
1293
|
+
flex: 0 0 158px;
|
|
1294
|
+
display: flex;
|
|
1295
|
+
flex-direction: column;
|
|
1296
|
+
gap: 2px;
|
|
1297
|
+
overflow-y: auto;
|
|
1298
|
+
padding: 6px 8px 6px 0;
|
|
1299
|
+
border-inline-end: 1px solid #e3e8ee;
|
|
1300
|
+
}
|
|
1301
|
+
|
|
1302
|
+
.chmap .chtabs button {
|
|
1303
|
+
border: 0;
|
|
1304
|
+
background: none;
|
|
1305
|
+
text-align: start;
|
|
1306
|
+
padding: 8px 10px;
|
|
1307
|
+
border-radius: 6px;
|
|
1308
|
+
font-size: 13.5px;
|
|
1309
|
+
font-family: inherit;
|
|
1310
|
+
color: #222f3e;
|
|
1311
|
+
cursor: pointer;
|
|
1312
|
+
white-space: nowrap;
|
|
1313
|
+
}
|
|
1314
|
+
|
|
1315
|
+
.chmap .chtabs button:hover {
|
|
1316
|
+
background: #f0f0f0;
|
|
1317
|
+
}
|
|
1318
|
+
|
|
1319
|
+
.chmap .chtabs button.on {
|
|
1320
|
+
background: color-mix(in srgb, var(--fable-primary, #df3c2b) 12%, #fff);
|
|
1321
|
+
color: var(--fable-primary, #df3c2b);
|
|
1322
|
+
font-weight: 600;
|
|
1323
|
+
}
|
|
1324
|
+
|
|
1325
|
+
.chmap .chpanel {
|
|
1326
|
+
flex: 1;
|
|
1327
|
+
overflow-y: auto;
|
|
1328
|
+
padding: 6px 0 6px 8px;
|
|
1329
|
+
}
|
|
1330
|
+
|
|
1331
|
+
.chmap .chgrid {
|
|
1332
|
+
grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
|
|
1333
|
+
padding: 0;
|
|
1334
|
+
}
|
|
1335
|
+
|
|
1336
|
+
.chmap .chgrid.emgrid {
|
|
1337
|
+
grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
|
|
1338
|
+
}
|
|
1339
|
+
|
|
1340
|
+
.chmap .chgrid.emgrid button {
|
|
1341
|
+
width: 36px;
|
|
1342
|
+
height: 36px;
|
|
1343
|
+
font-size: 20px;
|
|
1344
|
+
}
|
|
1345
|
+
|
|
1156
1346
|
.chgrid {
|
|
1157
1347
|
display: grid;
|
|
1158
1348
|
grid-template-columns: repeat(8, 30px);
|
|
@@ -1195,8 +1385,8 @@
|
|
|
1195
1385
|
}
|
|
1196
1386
|
|
|
1197
1387
|
.tgrid span.hot {
|
|
1198
|
-
background: #
|
|
1199
|
-
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);
|
|
1200
1390
|
}
|
|
1201
1391
|
|
|
1202
1392
|
.tgridlbl {
|
|
@@ -1269,7 +1459,8 @@
|
|
|
1269
1459
|
.dlg footer button {
|
|
1270
1460
|
border-radius: 6px;
|
|
1271
1461
|
padding: 8px 16px;
|
|
1272
|
-
font: 14px
|
|
1462
|
+
font-size: 14px;
|
|
1463
|
+
font-family: inherit;
|
|
1273
1464
|
cursor: pointer;
|
|
1274
1465
|
border: 1px solid #cfd6df;
|
|
1275
1466
|
background: #fff;
|
|
@@ -1277,8 +1468,8 @@
|
|
|
1277
1468
|
}
|
|
1278
1469
|
|
|
1279
1470
|
.dlg footer button.pri {
|
|
1280
|
-
background: #
|
|
1281
|
-
border-color: #
|
|
1471
|
+
background: var(--fable-primary, #df3c2b);
|
|
1472
|
+
border-color: var(--fable-primary, #df3c2b);
|
|
1282
1473
|
color: #fff;
|
|
1283
1474
|
}
|
|
1284
1475
|
|
|
@@ -1293,6 +1484,184 @@
|
|
|
1293
1484
|
resize: vertical;
|
|
1294
1485
|
}
|
|
1295
1486
|
|
|
1487
|
+
/* tabbed dialogs (insert/edit video) */
|
|
1488
|
+
.dlg .dtabs {
|
|
1489
|
+
display: flex;
|
|
1490
|
+
gap: 2px;
|
|
1491
|
+
border-bottom: 1px solid #e3e8ee;
|
|
1492
|
+
margin-bottom: 14px;
|
|
1493
|
+
}
|
|
1494
|
+
|
|
1495
|
+
.dlg .dtabs button {
|
|
1496
|
+
border: 0;
|
|
1497
|
+
background: none;
|
|
1498
|
+
padding: 8px 14px;
|
|
1499
|
+
font-size: 14px;
|
|
1500
|
+
font-family: inherit;
|
|
1501
|
+
color: #556;
|
|
1502
|
+
cursor: pointer;
|
|
1503
|
+
border-bottom: 2px solid transparent;
|
|
1504
|
+
margin-bottom: -1px;
|
|
1505
|
+
}
|
|
1506
|
+
|
|
1507
|
+
.dlg .dtabs button.on {
|
|
1508
|
+
color: var(--fable-primary, #df3c2b);
|
|
1509
|
+
border-bottom-color: var(--fable-primary, #df3c2b);
|
|
1510
|
+
font-weight: 600;
|
|
1511
|
+
}
|
|
1512
|
+
|
|
1513
|
+
.dlg .dtabbody {
|
|
1514
|
+
width: 460px;
|
|
1515
|
+
max-width: 76vw;
|
|
1516
|
+
min-height: 150px;
|
|
1517
|
+
}
|
|
1518
|
+
|
|
1519
|
+
.dlg .dtabpanel textarea {
|
|
1520
|
+
width: 100%;
|
|
1521
|
+
box-sizing: border-box;
|
|
1522
|
+
}
|
|
1523
|
+
|
|
1524
|
+
.dlg .dfield {
|
|
1525
|
+
display: flex;
|
|
1526
|
+
flex-direction: column;
|
|
1527
|
+
gap: 4px;
|
|
1528
|
+
margin-bottom: 12px;
|
|
1529
|
+
flex: 1;
|
|
1530
|
+
}
|
|
1531
|
+
|
|
1532
|
+
.dlg .dfield label {
|
|
1533
|
+
font-size: 13px;
|
|
1534
|
+
color: #445;
|
|
1535
|
+
}
|
|
1536
|
+
|
|
1537
|
+
.dlg .dfield input,
|
|
1538
|
+
.dlg .dfield select {
|
|
1539
|
+
border: 1px solid #cfd6df;
|
|
1540
|
+
border-radius: 6px;
|
|
1541
|
+
padding: 8px 10px;
|
|
1542
|
+
font-size: 14px;
|
|
1543
|
+
font-family: inherit;
|
|
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;
|
|
1641
|
+
}
|
|
1642
|
+
|
|
1643
|
+
.dlg .drow {
|
|
1644
|
+
display: flex;
|
|
1645
|
+
gap: 10px;
|
|
1646
|
+
align-items: flex-end;
|
|
1647
|
+
}
|
|
1648
|
+
|
|
1649
|
+
.dlg button.txtbtn {
|
|
1650
|
+
border: 1px solid #cfd6df;
|
|
1651
|
+
background: #fff;
|
|
1652
|
+
color: #222f3e;
|
|
1653
|
+
border-radius: 6px;
|
|
1654
|
+
padding: 8px 12px;
|
|
1655
|
+
font-size: 13.5px;
|
|
1656
|
+
font-family: inherit;
|
|
1657
|
+
cursor: pointer;
|
|
1658
|
+
white-space: nowrap;
|
|
1659
|
+
}
|
|
1660
|
+
|
|
1661
|
+
.dlg button.txtbtn:hover {
|
|
1662
|
+
background: #f0f4f9;
|
|
1663
|
+
}
|
|
1664
|
+
|
|
1296
1665
|
.dlg table.kbd {
|
|
1297
1666
|
border-collapse: collapse;
|
|
1298
1667
|
width: 100%;
|
|
@@ -1314,4 +1683,30 @@
|
|
|
1314
1683
|
padding: 2px 7px;
|
|
1315
1684
|
font: 12px Consolas, monospace;
|
|
1316
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;
|
|
1317
1712
|
}
|