x4js 1.4.5 → 1.4.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.
Files changed (8) hide show
  1. package/README.md +4 -0
  2. package/lib/application.d.ts +3 -2
  3. package/lib/application.js +6 -1
  4. package/package.json +1 -1
  5. package/src/application.ts +9 -4
  6. package/src/x4.less +143 -107
  7. package/x4.css +1541 -0
  8. package/src/README.md +0 -2
package/README.md ADDED
@@ -0,0 +1,4 @@
1
+ # x4
2
+ x4 framework repository
3
+
4
+ You will find the documentation & tutorials [Here](https://github.com/rlibre/x4js/wiki/Introduction)
package/lib/application.d.ts CHANGED
@@ -36,8 +36,9 @@ interface ApplicationEventMap extends BaseComponentEventMap {
36
36
  export interface ApplicationProps extends BaseComponentProps<ApplicationEventMap> {
37
37
  app_name: string;
38
38
  app_version: string;
39
- app_uid: string;
40
- locale: string;
39
+ app_uid?: string;
40
+ locale?: string;
41
+ renderTo?: HTMLElement;
41
42
  }
42
43
  /**
43
44
  * Represents an x4 application, which is typically a single page app.
package/lib/application.js CHANGED
@@ -116,8 +116,13 @@ class Application extends base_component_1.BaseComponent {
116
116
  */
117
117
  set mainView(root) {
118
118
  this.m_mainView = root;
119
+ this.mainView.addClass('x4-root-element');
119
120
  (0, tools_1.deferCall)(() => {
120
- document.body.appendChild(root._build());
121
+ const dest = this.m_props.renderTo ?? document.body;
122
+ while (dest.firstChild) {
123
+ dest.removeChild(dest.firstChild);
124
+ }
125
+ dest.appendChild(root._build());
121
126
  });
122
127
  }
123
128
  get mainView() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "x4js",
3
- "version": "1.4.5",
3
+ "version": "1.4.8",
4
4
  "description": "X4js core files",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",
package/src/application.ts CHANGED
@@ -43,8 +43,9 @@ interface ApplicationEventMap extends BaseComponentEventMap {
43
43
  export interface ApplicationProps extends BaseComponentProps<ApplicationEventMap> {
44
44
  app_name: string; //
45
45
  app_version: string; //
46
- app_uid: string;
47
- locale: string; // fr-FR
46
+ app_uid?: string;
47
+ locale?: string; // fr-FR
48
+ renderTo?: HTMLElement;
48
49
  }
49
50
 
50
51
  /**
@@ -113,7 +114,6 @@ export class Application<P extends ApplicationProps = ApplicationProps, E extend
113
114
  }
114
115
 
115
116
  ApplicationCreated( ) {
116
-
117
117
  }
118
118
 
119
119
  public get app_name( ) {
@@ -158,9 +158,14 @@ export class Application<P extends ApplicationProps = ApplicationProps, E extend
158
158
  public set mainView( root: Component ) {
159
159
 
160
160
  this.m_mainView = root;
161
+ this.mainView.addClass( 'x4-root-element' );
161
162
 
162
163
  deferCall( ( ) => {
163
- document.body.appendChild(root._build());
164
+ const dest = this.m_props.renderTo ?? document.body;
165
+ while (dest.firstChild) {
166
+ dest.removeChild(dest.firstChild);
167
+ }
168
+ dest.appendChild(root._build());
164
169
  } );
165
170
  }
166
171
 
package/src/x4.less CHANGED
@@ -1,37 +1,77 @@
1
- // out: false
2
-
1
+ // out: ../x4.css
3
2
 
4
3
  :root {
5
- --background: #161717;
6
-
7
- --button-color: rgb(54,54,54);
8
- --button-border: rgb(0,0,0);
9
- --button-icon-color: rgb( 255, 255, 255);
10
-
11
- --scrollbar-width: 6px;
12
- --scrollbar-bk: white;
13
- --scrollbar-thumb: grey;
14
- }
15
-
16
- * {
17
- user-select: none;
18
- box-sizing: border-box;
19
- }
20
-
21
- html {
22
- font-family: @def-font;
23
- font-size: @def-font-size;
24
- }
4
+ --x4-font: "sans serif";
5
+ --x4-font-size: "13px";
25
6
 
26
- body {
7
+ --x4-base-color: #266888;
8
+
9
+ --x4-selection-color: #2458B3;
10
+ --x4-hover-color: fadeout( #2458B3, 10% );
11
+ --x4-mask-color: fadeout( #2458B3, 40% );
12
+ --x4-focus-color: #2458B3;
13
+ --x4-error-color: #b92a09;
14
+ --x4-success-color: #0A6640;
15
+ --x4-form-color: white;
16
+ --x4-tip-background: rgba(0,0,0,0.5);
17
+
18
+ --x4-button-color: rgb(54,54,54);
19
+ --x4-button-border-color: rgb(0,0,0);
20
+
21
+ --x4-scrollbar-width: 6px;
22
+ --x4-scrollbar-background: white;
23
+ --x4-scrollbar-thumb: grey;
24
+
25
+ --x4-sizer-size: 4px;
26
+
27
+ --x4-panel-border-color: rgba(0,0,0,0.1);
28
+
29
+ // todo: svg
30
+ --x4-icon-font-family: var( "fonteawesome" );
31
+ --x4-icon-circle-exclamation: "\f06a";
32
+ --x4-icon-chevron-right: "\f054";
33
+ --x4-icon-window-restore: "\f2d2";
34
+ --x4-icon-arrow-down-long: "\f175";
35
+ --x4-icon-arrow-up-long: "\f176";;
36
+ }
37
+
38
+ @BLACK10: rgba(0,0,0,0.1);
39
+ @BLACK20: rgba(0,0,0,0.2);
40
+ @BLACK30: rgba(0,0,0,0.3);
41
+ @BLACK40: rgba(0,0,0,0.4);
42
+ @BLACK50: rgba(0,0,0,0.5);
43
+ @BLACK60: rgba(0,0,0,0.6);
44
+ @BLACK70: rgba(0,0,0,0.7);
45
+ @BLACK80: rgba(0,0,0,0.8);
46
+ @BLACK90: rgba(0,0,0,0.9);
47
+ @BLACK: #000;
48
+
49
+ @WHITE5: rgba(255,255,255,0.05);
50
+ @WHITE10: rgba(255,255,255,0.1);
51
+ @WHITE20: rgba(255,255,255,0.2);
52
+ @WHITE25: rgba(255,255,255,0.25);
53
+ @WHITE30: rgba(255,255,255,0.3);
54
+ @WHITE40: rgba(255,255,255,0.4);
55
+ @WHITE50: rgba(255,255,255,0.5);
56
+ @WHITE60: rgba(255,255,255,0.6);
57
+ @WHITE70: rgba(255,255,255,0.7);
58
+ @WHITE80: rgba(255,255,255,0.8);
59
+ @WHITE90: rgba(255,255,255,0.9);
60
+ @WHITE: #fff;
61
+
62
+ .x4-root-element {
27
63
  padding: 0;
28
64
  margin: 0;
29
- position: fixed;
30
- left: 0;
65
+ left: 0;
31
66
  top: 0;
32
67
  right: 0;
33
68
  bottom: 0;
34
- -webkit-font-smoothing: antialiased;
69
+
70
+ -webkit-font-smoothing: subpixel-antialiased;
71
+ text-rendering: geometricprecision;
72
+
73
+ font-family: var( --x4-font );
74
+ font-size: var( --x4-font-size );
35
75
  }
36
76
 
37
77
  input,
@@ -46,11 +86,11 @@ textarea {
46
86
  border: 1px solid transparent;
47
87
 
48
88
  &:focus {
49
- border: 1px solid @selection-color;
89
+ border: 1px solid var( --x4-selection-color );
50
90
  }
51
91
 
52
92
  &::selection {
53
- background-color: @selection-color;
93
+ background-color: var( --x4-selection-color );
54
94
  color: #fff;
55
95
  }
56
96
  }
@@ -72,6 +112,8 @@ textarea {
72
112
  }
73
113
 
74
114
  .x-comp {
115
+ user-select: none;
116
+ box-sizing: border-box;
75
117
  position: relative;
76
118
  }
77
119
 
@@ -133,14 +175,12 @@ textarea {
133
175
  }
134
176
  }
135
177
 
136
- @sizer-size: 4px;
137
-
138
178
  .x-sizer-overlay {
139
179
  position: absolute;
140
180
 
141
181
  &.top {
142
182
  width: 100%;
143
- height: @sizer-size;
183
+ height: var( --x4-sizer-size );
144
184
  cursor: n-resize;
145
185
  left: 0;
146
186
  top: 0;
@@ -148,7 +188,7 @@ textarea {
148
188
 
149
189
  &.bottom {
150
190
  width: 100%;
151
- height: @sizer-size;
191
+ height: var( --x4-sizer-size );
152
192
  cursor: n-resize;
153
193
  left: 0;
154
194
  bottom: 0;
@@ -157,7 +197,7 @@ textarea {
157
197
  &.right {
158
198
  top: 0;
159
199
  right: 0;
160
- width: @sizer-size;
200
+ width: var( --x4-sizer-size );
161
201
  height: 100%;
162
202
  cursor: e-resize;
163
203
  }
@@ -165,19 +205,19 @@ textarea {
165
205
  &.left {
166
206
  top: 0;
167
207
  left: 0;
168
- width: @sizer-size;
208
+ width: var( --x4-sizer-size );
169
209
  height: 100%;
170
210
  cursor: e-resize;
171
211
  }
172
212
  }
173
213
 
174
214
  .x-sizer-bottom {
175
- padding-bottom: @sizer-size;
215
+ padding-bottom: var( --x4-sizer-size );
176
216
  }
177
217
 
178
218
  .x-icon {
179
219
  &:before {
180
- font-family: @fa-style-family;
220
+ font-family: var( --x4-icon-font-family );
181
221
  }
182
222
 
183
223
  display: inline-flex;
@@ -200,16 +240,15 @@ textarea {
200
240
 
201
241
  height: 2.5em;
202
242
  padding: 8px;
203
- border: 1px solid var( --button-border );
243
+ border: 1px solid var( --x4-button-border-color );
204
244
  overflow: hidden;
205
245
 
206
- background-color: var( --button-color );
246
+ background-color: var( --x4-button-color );
207
247
  color: @WHITE60;
208
248
 
209
249
  .x-icon {
210
250
  margin: 0 4px;
211
- //width: 1em;
212
- color: var( --button-icon-color );
251
+ color: inherit;
213
252
  }
214
253
 
215
254
  &:not(.x-disable) {
@@ -289,15 +328,15 @@ textarea {
289
328
  }
290
329
 
291
330
  ::-webkit-scrollbar {
292
- width: var( --scrollbar-width );
293
- height: var( --scrollbar-width );
294
- background-color: var( --scrollbar-bk );
331
+ width: var( --x4-scrollbar-width );
332
+ height: var( --x4-scrollbar-width );
333
+ background-color: var( --x4-scrollbar-background );
295
334
  box-sizing: border-box;
296
335
  }
297
336
 
298
337
  ::-webkit-scrollbar-thumb {
299
- background-color: var( --scrollbar-thumb );
300
- //border-radius: calc( var( --scrollbar-width ) / 2 - 1px );
338
+ background-color: var( --x4-scrollbar-thumb );
339
+ //border-radius: calc( var( --x4-scrollbar-width ) / 2 - 1px );
301
340
  }
302
341
 
303
342
  .x-circular-chart {
@@ -378,7 +417,7 @@ textarea {
378
417
  }
379
418
 
380
419
  &::selection {
381
- background-color: @selection-color;
420
+ background-color: var( --x4-selection-color );
382
421
  color: #fff;
383
422
  }
384
423
  }
@@ -387,13 +426,13 @@ textarea {
387
426
  outline: none;
388
427
 
389
428
  &> .x-label {
390
- color: @focus-color;
429
+ color: var( --x4-focus-color );
391
430
  }
392
431
  }
393
432
 
394
433
  .x-button.gadget {
395
434
 
396
- font-size: @def-font-size;
435
+ font-size: var( --x4-font-size );
397
436
  background-color: @BLACK10;
398
437
  border: none;
399
438
 
@@ -411,19 +450,19 @@ textarea {
411
450
  &:focus {
412
451
  .x-button.gadget,
413
452
  input {
414
- border-color: @focus-color;
453
+ border-color: var( --x4-focus-color );
415
454
  }
416
455
 
417
456
  input {
418
- border-bottom: 1px solid @focus-color;
457
+ border-bottom: 1px solid var( --x4-focus-color );
419
458
  }
420
459
 
421
460
  .x-button.gadget {
422
- color: @focus-color;
461
+ color: var( --x4-focus-color );
423
462
  }
424
463
 
425
464
  .x-label {
426
- color: @focus-color;
465
+ color: var( --x4-focus-color );
427
466
  }
428
467
  }
429
468
 
@@ -440,8 +479,8 @@ textarea {
440
479
  z-index: 1;
441
480
 
442
481
  &:before {
443
- font-family: @fa-style-family;
444
- content: @fa-var-circle-exclamation;
482
+ font-family: var( --x4-icon-font-family );
483
+ content: var( --x4-icon-circle-exclamation );
445
484
  padding-right: 3px;
446
485
  position: absolute;
447
486
  left: 1px;
@@ -457,7 +496,7 @@ textarea {
457
496
  &.x-error {
458
497
  input {
459
498
  border-bottom: none;
460
- border-left: 4px solid @error-color;
499
+ border-left: 4px solid var( --x4-error-color );
461
500
  }
462
501
  }
463
502
  }
@@ -488,20 +527,20 @@ textarea {
488
527
  .x-button.gadget,
489
528
  input,
490
529
  .x-fake-input {
491
- border-color: @focus-color;
530
+ border-color: var( --x4-focus-color );
492
531
  }
493
532
 
494
533
  input,
495
534
  .x-fake-input {
496
- border-bottom: 1px solid @focus-color;
535
+ border-bottom: 1px solid var( --x4-focus-color );
497
536
  }
498
537
 
499
538
  .x-button.gadget {
500
- color: @focus-color;
539
+ color: var( --x4-focus-color );
501
540
  }
502
541
 
503
542
  .x-label {
504
- color: @focus-color;
543
+ color: var( --x4-focus-color );
505
544
  }
506
545
  }
507
546
 
@@ -577,7 +616,7 @@ textarea {
577
616
 
578
617
  &:focus-within {
579
618
  text-decoration: underline;
580
- color: @selection-color;
619
+ color: var( --x4-selection-color );
581
620
  }
582
621
  }
583
622
 
@@ -623,7 +662,7 @@ textarea {
623
662
  }
624
663
 
625
664
  input:checked + .x-label:before {
626
- background-color: @selection-color;
665
+ background-color: var( --x4-selection-color );
627
666
  }
628
667
 
629
668
  input:checked + .x-label:after {
@@ -691,8 +730,8 @@ textarea {
691
730
 
692
731
  .x-popup-menu-item {
693
732
  &:after {
694
- content: @fa-var-chevron-right;
695
- font-family: @fa-style-family;
733
+ content: var( --x4-icon-chevron-right );
734
+ font-family: var( --x4-icon-font-family );
696
735
  font-size: 80%;
697
736
  }
698
737
  }
@@ -705,7 +744,7 @@ textarea {
705
744
 
706
745
  .x-link {
707
746
  padding: 4px;
708
- color: @selection-color;
747
+ color: var( --x4-selection-color );
709
748
  cursor: pointer;
710
749
  outline: none;
711
750
 
@@ -713,7 +752,7 @@ textarea {
713
752
  align-items: center;
714
753
 
715
754
  &:focus {
716
- color: @selection-color;
755
+ color: var( --x4-selection-color );
717
756
  text-decoration: underline;
718
757
  }
719
758
 
@@ -747,7 +786,7 @@ textarea {
747
786
  }
748
787
 
749
788
  .h-container {
750
- margin-right: var( --scrollbar-width );
789
+ margin-right: var( --x4-scrollbar-width );
751
790
  }
752
791
  }
753
792
 
@@ -765,12 +804,12 @@ textarea {
765
804
  white-space: nowrap;
766
805
 
767
806
  &:hover {
768
- background-color: fadeout( @selection-color, 10% );
807
+ background-color: var( --x4-hover-color );
769
808
  color: white;
770
809
  }
771
810
 
772
811
  &.x-selected {
773
- background-color: @selection-color;
812
+ background-color: var( --x4-selection-color );
774
813
  color: white;
775
814
  }
776
815
 
@@ -804,7 +843,7 @@ textarea {
804
843
  width: 200vw;
805
844
  height: 200vh;
806
845
 
807
- background-color: fadeout( @selection-color, 40% );
846
+ background-color: var( --x4-mask-color );
808
847
  z-index: 999;
809
848
  }
810
849
  }
@@ -837,6 +876,8 @@ textarea {
837
876
  color: black;
838
877
  }
839
878
  }
879
+
880
+ border-bottom: 1px solid var( --x4-panel-border-color );
840
881
  }
841
882
 
842
883
  &>.body {
@@ -875,7 +916,7 @@ textarea {
875
916
 
876
917
  &.maximized > .title {
877
918
  .max-btn:before {
878
- content: @fa-var-window-restore;
919
+ content: var( --x4-icon-window-restore );
879
920
  }
880
921
  }
881
922
 
@@ -986,7 +1027,7 @@ textarea {
986
1027
  }
987
1028
 
988
1029
  .x-form {
989
- background-color: @form-color;
1030
+ background-color: var( --x4-form-color );
990
1031
  padding: 8px;
991
1032
  min-width: 250px;
992
1033
  min-height: 50px;
@@ -1016,17 +1057,11 @@ textarea {
1016
1057
  }
1017
1058
  }
1018
1059
 
1019
- .x-panel {
1020
- &>.title {
1021
- border-bottom: 1px solid @BLACK10;
1022
- }
1023
- }
1024
-
1025
1060
  .x-button {
1026
1061
  background-color: @WHITE25;
1027
1062
  border-color: transparent;
1028
- font-family: @def-font;
1029
- font-size: @def-font-size;
1063
+ font-family: var( --x4-font );
1064
+ font-size: var( --x4-font-size );
1030
1065
 
1031
1066
  .x-icon {
1032
1067
  width: 1.5em;
@@ -1078,7 +1113,7 @@ textarea {
1078
1113
 
1079
1114
  &>.title {
1080
1115
  background: none;
1081
- background-color: @error-color;
1116
+ background-color: var( --x4-error-color );
1082
1117
  height: 2.5em;
1083
1118
 
1084
1119
  .x-label {
@@ -1101,7 +1136,7 @@ textarea {
1101
1136
 
1102
1137
  .icon {
1103
1138
  font-size: 48px;
1104
- color: @error-color;
1139
+ color: var( --x4-error-color );
1105
1140
  margin-right: 8px;
1106
1141
  }
1107
1142
 
@@ -1118,7 +1153,7 @@ textarea {
1118
1153
  padding-top: 8px;
1119
1154
 
1120
1155
  .x-button {
1121
- background-color: @error-color;
1156
+ background-color: var( --x4-error-color );
1122
1157
  color: white;
1123
1158
  }
1124
1159
 
@@ -1166,14 +1201,14 @@ textarea {
1166
1201
  height: unset;
1167
1202
 
1168
1203
  &.sort:before {
1169
- content: @fa-var-arrow-down-long;
1170
- font-family: @fa-style-family;
1204
+ content: var( --x4-icon-arrow-down-long );
1205
+ font-family: var( --x4-icon-font-family );
1171
1206
  padding-right: 4px;
1172
1207
  }
1173
1208
 
1174
1209
  &.sort.desc:before {
1175
- content: @fa-var-arrow-up-long;
1176
- font-family: @fa-style-family;
1210
+ content: var( --x4-icon-arrow-up-long );
1211
+ font-family: var( --x4-icon-font-family );
1177
1212
  padding-right: 4px;
1178
1213
  }
1179
1214
  }
@@ -1223,7 +1258,7 @@ textarea {
1223
1258
  }
1224
1259
 
1225
1260
  &.x-selected {
1226
- background-color: @selection-color;
1261
+ background-color: var( --x4-selection-color );
1227
1262
 
1228
1263
  .x-cell {
1229
1264
  color: white;
@@ -1257,7 +1292,7 @@ textarea {
1257
1292
 
1258
1293
  &:focus {
1259
1294
  .x-cell.x-selected {
1260
- background-color: @selection-color;
1295
+ background-color: var( --x4-selection-color );
1261
1296
  color: white;
1262
1297
  }
1263
1298
  }
@@ -1278,17 +1313,18 @@ textarea {
1278
1313
 
1279
1314
  .x-button {
1280
1315
  background-color: transparent;
1281
- color: var( --base-color );
1316
+ color: var( --x4-base-color );
1282
1317
  border: none;
1283
- border-bottom: 1px solid fadeout(@base-color,90%);
1318
+ //border-bottom: 1px solid fadeout(var( --x4-base-color ),90%);
1319
+
1284
1320
  min-height: 2em;
1285
1321
 
1286
- .x-icon {
1287
- color: fadeout( @base-color, 50% );
1288
- }
1322
+ //.x-icon {
1323
+ // color: fadeout( var( --x4-base-color ), 50% );
1324
+ //}
1289
1325
 
1290
1326
  &:hover {
1291
- background-color: fadeout(@base-color,30%);
1327
+ background-color: var( --x4-hover-color );
1292
1328
  color: white;
1293
1329
 
1294
1330
  .x-icon {
@@ -1297,7 +1333,7 @@ textarea {
1297
1333
  }
1298
1334
 
1299
1335
  &.x-active {
1300
- background-color: @base-color;
1336
+ background-color: var( --x4-base-color );
1301
1337
  color: white;
1302
1338
 
1303
1339
  .x-icon {
@@ -1306,7 +1342,7 @@ textarea {
1306
1342
  }
1307
1343
 
1308
1344
  &.x-active:hover {
1309
- background-color: fadeout(@base-color,20%);
1345
+ //background-color: fadeout(var( --x4-base-color ),20%);
1310
1346
  color: white;
1311
1347
 
1312
1348
  .x-icon {
@@ -1354,11 +1390,11 @@ textarea {
1354
1390
  position: absolute;
1355
1391
  left: 6px;
1356
1392
  top: 7px;
1357
- color: fadeout(darken(@base-color,5%),10%);
1393
+ color: var( --x4-tip-background );
1358
1394
  }
1359
1395
 
1360
1396
  .x-label {
1361
- background-color: @selection-color;
1397
+ background-color: var( --x4-selection-color );
1362
1398
  white-space: break-spaces;
1363
1399
  display: inline-block;
1364
1400
  padding: 6px;
@@ -1367,7 +1403,7 @@ textarea {
1367
1403
  }
1368
1404
 
1369
1405
  .x-search-bar {
1370
- background-color: @base-color;
1406
+ background-color: var( --x4-base-color );
1371
1407
  height: 2em;
1372
1408
  }
1373
1409
 
@@ -1466,7 +1502,7 @@ textarea {
1466
1502
  //border-bottom: 1px solid @BLACK10;
1467
1503
 
1468
1504
  &:hover {
1469
- background-color: fadeout(@selection-color,90%);
1505
+ background-color: var( --x4-hover-color );
1470
1506
  border-radius: 4px;
1471
1507
  }
1472
1508
 
@@ -1481,7 +1517,7 @@ textarea {
1481
1517
 
1482
1518
  .today {
1483
1519
  font-weight: bold;
1484
- background-color: @error-color;
1520
+ background-color: var( --x4-error-color );
1485
1521
 
1486
1522
  span {
1487
1523
  //border: 2px solid #013e69;
@@ -1506,7 +1542,7 @@ textarea {
1506
1542
  }
1507
1543
 
1508
1544
  .day:hover {
1509
- background-color: fadeout(@selection-color,50%);
1545
+ background-color: var( --x4-hover-color );
1510
1546
  color: white;
1511
1547
  }
1512
1548
  }
@@ -1790,7 +1826,7 @@ textarea {
1790
1826
 
1791
1827
  //&::before {
1792
1828
  // content: attr( icon );
1793
- // font-family: @fa-style-family;
1829
+ // font-family: var( --x4-icon-font-family );
1794
1830
  // display: inline-block;
1795
1831
  // width: 1em;
1796
1832
  // color: @BLACK40;
@@ -1835,7 +1871,7 @@ textarea {
1835
1871
  }
1836
1872
 
1837
1873
  .x-tooltip.error {
1838
- background-color: @error-color;
1874
+ background-color: var( --x4-error-color );
1839
1875
  padding: 0 6px;
1840
1876
  margin-left: 3px;
1841
1877
  position: absolute;
@@ -1872,7 +1908,7 @@ textarea {
1872
1908
 
1873
1909
  textarea {
1874
1910
  font-family: monospace;
1875
- font-size: @def-font-size;
1911
+ font-size: var( --x4-font-size );
1876
1912
  padding: 2px;
1877
1913
 
1878
1914
  resize: none;
@@ -1881,7 +1917,7 @@ textarea {
1881
1917
  width: 100%;
1882
1918
 
1883
1919
  &:focus {
1884
- border: 1px solid @selection-color
1920
+ border: 1px solid var( --x4-selection-color )
1885
1921
  }
1886
1922
 
1887
1923
  color: transparent;
@@ -1895,7 +1931,7 @@ textarea {
1895
1931
 
1896
1932
  .x-syntax-hiliter {
1897
1933
  font-family: monospace;
1898
- font-size: @def-font-size;
1934
+ font-size: var( --x4-font-size );
1899
1935
  padding: 2px;
1900
1936
  border: 1px solid transparent;
1901
1937
  overflow: hidden;