vue-editify 0.2.3 → 0.2.4

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 (30) hide show
  1. package/examples/App.vue +35 -10
  2. package/lib/editify/editify.vue.d.ts +9 -0
  3. package/lib/editify/props.d.ts +4 -0
  4. package/lib/editify.es.js +29 -8
  5. package/lib/editify.umd.js +2 -2
  6. package/lib/index.d.ts +10 -1
  7. package/package.json +1 -1
  8. package/src/components/button/button.less +14 -14
  9. package/src/components/checkbox/checkbox.less +13 -13
  10. package/src/components/colors/colors.less +8 -8
  11. package/src/components/insertImage/insertImage.less +10 -10
  12. package/src/components/insertLink/insertLink.less +6 -6
  13. package/src/components/insertTable/insertTable.less +4 -4
  14. package/src/components/insertVideo/insertVideo.less +10 -10
  15. package/src/components/layer/layer.less +5 -5
  16. package/src/components/menu/menu.less +7 -7
  17. package/src/components/toolbar/toolbar.less +7 -7
  18. package/src/components/tooltip/tooltip.vue +4 -2
  19. package/src/components/triangle/triangle.less +11 -8
  20. package/src/css/hljs.less +8 -8
  21. package/src/css/root.less +79 -0
  22. package/src/css/var.less +6 -0
  23. package/src/editify/editify.less +46 -45
  24. package/src/editify/editify.vue +17 -0
  25. package/src/editify/props.ts +5 -0
  26. package/src/index.ts +3 -1
  27. package/src/plugins/attachment/insertAttachment/insertAttachment.less +15 -15
  28. package/src/plugins/mathformula/insertMathformula/insertMathformula.less +6 -6
  29. package/vite.config.ts +1 -1
  30. package/src/css/base.less +0 -32
package/src/components/triangle/triangle.less CHANGED
@@ -1,3 +1,6 @@
1
+ //三角图标大小
2
+ @triangle-size: 6px;
3
+
1
4
  .editify-triangle {
2
5
  position: relative;
3
6
  display: inline-block;
@@ -19,11 +22,11 @@
19
22
 
20
23
  &[data-editify-placement='top'] {
21
24
  border-top: none;
22
- border-bottom-color: @border-color;
25
+ border-bottom-color: var(--editify-border-color);
23
26
 
24
27
  .editify-triangle-el {
25
28
  border-top: none;
26
- border-bottom-color: @background;
29
+ border-bottom-color: var(--editify-background);
27
30
  left: 1px;
28
31
  top: 1.5px;
29
32
  right: auto;
@@ -34,11 +37,11 @@
34
37
 
35
38
  &[data-editify-placement='bottom'] {
36
39
  border-bottom: none;
37
- border-top-color: @border-color;
40
+ border-top-color: var(--editify-border-color);
38
41
 
39
42
  .editify-triangle-el {
40
43
  border-bottom: none;
41
- border-top-color: @background;
44
+ border-top-color: var(--editify-background);
42
45
  left: 1px;
43
46
  bottom: 1.5px;
44
47
  top: auto;
@@ -49,11 +52,11 @@
49
52
 
50
53
  &[data-editify-placement='left'] {
51
54
  border-left: none;
52
- border-right-color: @border-color;
55
+ border-right-color: var(--editify-border-color);
53
56
 
54
57
  .editify-triangle-el {
55
58
  border-left: none;
56
- border-right-color: @background;
59
+ border-right-color: var(--editify-background);
57
60
  left: 1.5px;
58
61
  top: 1px;
59
62
  right: auto;
@@ -64,11 +67,11 @@
64
67
 
65
68
  &[data-editify-placement='right'] {
66
69
  border-right: none;
67
- border-left-color: @border-color;
70
+ border-left-color: var(--editify-border-color);
68
71
 
69
72
  .editify-triangle-el {
70
73
  border-right: none;
71
- border-left-color: @background;
74
+ border-left-color: var(--editify-background);
72
75
  right: 1.5px;
73
76
  top: 1px;
74
77
  bottom: auto;
package/src/css/hljs.less CHANGED
@@ -10,11 +10,11 @@
10
10
  .editify-hljs-template-variable,
11
11
  .editify-hljs-deletion,
12
12
  .editify-hljs-variable {
13
- color: #54489b;
13
+ color: var(--editify-hljs-color-1);
14
14
  }
15
15
  .editify-hljs-comment,
16
16
  .editify-hljs-quote {
17
- color: #bbb;
17
+ color: var(--editify-hljs-color-2);
18
18
  }
19
19
  .editify-hljs-bullet,
20
20
  .editify-hljs-link,
@@ -22,7 +22,7 @@
22
22
  .editify-hljs-regexp,
23
23
  .editify-hljs-attr,
24
24
  .editify-hljs-attribute {
25
- color: #0e9a56;
25
+ color: var(--editify-hljs-color-3);
26
26
  }
27
27
 
28
28
  .editify-hljs-built_in,
@@ -34,21 +34,21 @@
34
34
  .editify-hljs-tag,
35
35
  .editify-hljs-literal,
36
36
  .editify-hljs-type {
37
- color: #092d5d;
37
+ color: var(--editify-hljs-color-4);
38
38
  }
39
39
 
40
40
  .editify-hljs-title {
41
- color: #c45d08;
41
+ color: var(--editify-hljs-color-5);
42
42
  }
43
43
 
44
44
  .editify-hljs-selector-tag {
45
- color: #920606;
45
+ color: var(--editify-hljs-color-6);
46
46
  }
47
47
 
48
48
  .editify-hljs-selector-class {
49
- color: #c45d08;
49
+ color: var(--editify-hljs-color-7);
50
50
  }
51
51
 
52
52
  .editify-hljs-selector-id {
53
- color: #0d658d;
53
+ color: var(--editify-hljs-color-8);
54
54
  }
package/src/css/root.less ADDED
@@ -0,0 +1,79 @@
1
+ :root {
2
+ //字体颜色
3
+ --editify-font-color: #555;
4
+ //较浅的字体颜色（副文本颜色）
5
+ --editify-font-color-light: #888;
6
+ //更浅的字体颜色（placeholder和禁用字体颜色）
7
+ --editify-font-color-disabled: #bbb;
8
+ //较深的字体颜色（编辑器内容区域字体颜色）
9
+ --editify-font-color-dark: #333;
10
+ //链接字体颜色
11
+ --editify-font-color-link: #079457;
12
+ //链接字体悬浮色
13
+ --editify-font-color-link-dark: #05683d;
14
+ //边框颜色
15
+ --editify-border-color: #dfdfdf;
16
+ //默认背景色
17
+ --editify-background: #fff;
18
+ //较深的背景色
19
+ --editify-background-dark: #f7f8fa;
20
+ //更深的背景色
21
+ --editify-background-darker: #ebedf0;
22
+ //代码块背景色
23
+ --editify-pre-background: #f2f6fb;
24
+ //反色调字体颜色
25
+ --editify-reverse-color: #fff;
26
+ //反色调背景色
27
+ --editify-reverse-background: #000;
28
+ //视频背景色
29
+ --editify-video-background: #000;
30
+ //代码高亮样式
31
+ --editify-hljs-color-1: #54489b;
32
+ --editify-hljs-color-2: #bbb;
33
+ --editify-hljs-color-3: #0e9a56;
34
+ --editify-hljs-color-4: #092d5d;
35
+ --editify-hljs-color-5: #c45d08;
36
+ --editify-hljs-color-6: #920606;
37
+ --editify-hljs-color-7: #c45d08;
38
+ --editify-hljs-color-8: #0d658d;
39
+ }
40
+
41
+ :root[data-editify-dark] {
42
+ //字体颜色
43
+ --editify-font-color: #e8e8e8;
44
+ //较浅的字体颜色（副文本颜色）
45
+ --editify-font-color-light: #d8d8d8;
46
+ //更浅的字体颜色（placeholder和禁用字体颜色）
47
+ --editify-font-color-disabled: #6d6d6d;
48
+ //较深的字体颜色（编辑器内容区域字体颜色）
49
+ --editify-font-color-dark: #fff;
50
+ //链接字体颜色
51
+ --editify-font-color-link: #079457;
52
+ //链接字体悬浮色
53
+ --editify-font-color-link-dark: #05683d;
54
+ //边框颜色
55
+ --editify-border-color: #3e3e3e;
56
+ //默认背景色
57
+ --editify-background: #1a1a1a;
58
+ //较深的背景色
59
+ --editify-background-dark: #222222;
60
+ //更深的背景色
61
+ --editify-background-darker: #2c2c2c;
62
+ //代码块背景色
63
+ --editify-pre-background: #242424;
64
+ //反色调字体颜色
65
+ --editify-reverse-color: #333;
66
+ //反色调背景色
67
+ --editify-reverse-background: #f7f8fa;
68
+ //视频背景色
69
+ --editify-video-background: #f5f5f5;
70
+ //代码高亮样式
71
+ --editify-hljs-color-1: #7765dd;
72
+ --editify-hljs-color-2: #6a737d;
73
+ --editify-hljs-color-3: #05b05e;
74
+ --editify-hljs-color-4: #3b8af2;
75
+ --editify-hljs-color-5: #e88331;
76
+ --editify-hljs-color-6: #db0000;
77
+ --editify-hljs-color-7: #d37222;
78
+ --editify-hljs-color-8: #0793d4;
79
+ }
package/src/css/var.less ADDED
@@ -0,0 +1,6 @@
1
+ //三角图标大小
2
+ @triangle-size: 6px;
3
+ //编辑器内的默认字体大小
4
+ @font-size: 14px;
5
+ //较小的字体（工具提示等）
6
+ @font-size-small: 12px;
package/src/editify/editify.less CHANGED
@@ -26,7 +26,7 @@
26
26
  top: 0;
27
27
  width: 100vw !important;
28
28
  height: 100vh !important;
29
- background: @background;
29
+ background: var(--editify-background);
30
30
 
31
31
  .editify-body {
32
32
  border-radius: 0;
@@ -49,13 +49,13 @@
49
49
  height: 0;
50
50
  flex: 1;
51
51
  position: relative;
52
- background-color: @background;
52
+ background-color: var(--editify-background);
53
53
  padding: 1px;
54
54
  border-radius: 4px;
55
55
 
56
56
  &.editify-border {
57
- border: 1px solid @border-color;
58
- transition: all 500ms;
57
+ border: 1px solid var(--editify-border-color);
58
+ transition: all 300ms;
59
59
 
60
60
  &.editify-menu_inner {
61
61
  border-top: none;
@@ -83,7 +83,7 @@
83
83
  border-radius: inherit;
84
84
  padding: 6px 10px;
85
85
  line-height: 1.5;
86
- color: @font-color-dark;
86
+ color: var(--editify-font-color-dark);
87
87
  font-size: @font-size;
88
88
  position: relative;
89
89
  line-height: 1.5;
@@ -98,7 +98,7 @@
98
98
  content: attr(data-editify-placeholder);
99
99
  font-size: inherit;
100
100
  font-family: inherit;
101
- color: @font-color-disabled;
101
+ color: var(--editify-font-color-disabled);
102
102
  line-height: inherit;
103
103
  padding: 6px 10px;
104
104
  cursor: text;
@@ -163,35 +163,35 @@
163
163
  border-radius: 4px;
164
164
  line-height: 1;
165
165
  font-family: Consolas, monospace, Monaco, Andale Mono, Ubuntu Mono;
166
- background-color: @pre-background;
167
- color: @font-color;
168
- border: 1px solid @border-color;
166
+ background-color: var(--editify-pre-background);
167
+ color: var(--editify-font-color);
168
+ border: 1px solid var(--editify-border-color);
169
169
  text-indent: initial;
170
170
  font-size: @font-size;
171
171
  font-weight: normal;
172
172
  }
173
173
  //链接样式
174
174
  :deep(a) {
175
- color: @font-color-link;
176
- transition: all 200ms;
175
+ color: var(--editify-font-color-link);
176
+ transition: all 300ms;
177
177
  text-decoration: none;
178
178
  cursor: text;
179
179
 
180
180
  &:hover {
181
- color: @font-color-link-dark;
181
+ color: var(--editify-font-color-link-dark);
182
182
  text-decoration: underline;
183
183
  }
184
184
  }
185
185
  //表格样式
186
186
  :deep(table) {
187
187
  width: 100%;
188
- border: 1px solid @border-color;
188
+ border: 1px solid var(--editify-border-color);
189
189
  margin: 0;
190
190
  padding: 0;
191
191
  border-collapse: collapse;
192
192
  margin-bottom: 15px;
193
- background-color: @background;
194
- color: @font-color-dark;
193
+ background-color: var(--editify-background);
194
+ color: var(--editify-font-color-dark);
195
195
  font-size: @font-size;
196
196
 
197
197
  * {
@@ -207,7 +207,7 @@
207
207
  padding: 0;
208
208
 
209
209
  &:first-child {
210
- background-color: @background-darker;
210
+ background-color: var(--editify-background-darker);
211
211
 
212
212
  td {
213
213
  font-weight: bold;
@@ -217,7 +217,7 @@
217
217
 
218
218
  td {
219
219
  margin: 0;
220
- border: 1px solid @border-color;
220
+ border: 1px solid var(--editify-border-color);
221
221
  padding: 6px 10px;
222
222
  position: relative;
223
223
 
@@ -248,12 +248,13 @@
248
248
  font-family: Consolas, monospace, Monaco, Andale Mono, Ubuntu Mono;
249
249
  line-height: 1.5;
250
250
  font-size: @font-size;
251
- color: @font-color-dark;
252
- background-color: @pre-background;
253
- border: 1px solid @border-color;
251
+ color: var(--editify-font-color-dark);
252
+ background-color: var(--editify-pre-background);
253
+ border: 1px solid var(--editify-border-color);
254
254
  border-radius: 4px;
255
255
  overflow: auto;
256
256
  position: relative;
257
+ transition: all 300ms;
257
258
  }
258
259
  //图片样式
259
260
  :deep(img) {
@@ -274,7 +275,7 @@
274
275
  width: 30%;
275
276
  border-radius: 2px;
276
277
  vertical-align: text-bottom;
277
- background-color: #000;
278
+ background-color: var(--editify-video-background);
278
279
  object-fit: contain;
279
280
  margin: 0;
280
281
  max-width: 100%;
@@ -283,12 +284,12 @@
283
284
  //引用样式
284
285
  :deep(blockquote) {
285
286
  display: block;
286
- border-left: 8px solid @background-darker;
287
+ border-left: 8px solid var(--editify-background-darker);
287
288
  padding: 6px 10px 6px 20px;
288
289
  margin: 0 0 15px;
289
290
  line-height: 1.5;
290
291
  font-size: @font-size;
291
- color: @font-color-light;
292
+ color: var(--editify-font-color-light);
292
293
  border-radius: 0;
293
294
  }
294
295
  //分隔线样式
@@ -296,7 +297,7 @@
296
297
  display: block;
297
298
  width: 100%;
298
299
  height: 1px;
299
- background-color: @font-color-disabled;
300
+ background-color: var(--editify-font-color-disabled);
300
301
  border: none;
301
302
  margin: 10px 0;
302
303
  }
@@ -306,16 +307,16 @@
306
307
  position: relative;
307
308
  padding-left: 26px;
308
309
  font-size: @font-size;
309
- color: @font-color-dark;
310
- transition: all 200ms;
310
+ color: var(--editify-font-color-dark);
311
+ transition: all 300ms;
311
312
 
312
313
  &::before {
313
314
  display: block;
314
315
  width: 16px;
315
316
  height: 16px;
316
317
  border-radius: 2px;
317
- border: 1px solid @font-color-light;
318
- transition: all 200ms;
318
+ border: 1px solid var(--editify-font-color-light);
319
+ transition: all 300ms;
319
320
  box-sizing: border-box;
320
321
  user-select: none;
321
322
  content: '';
@@ -336,7 +337,7 @@
336
337
  left: 3px;
337
338
  top: 50%;
338
339
  margin-top: -2px;
339
- border: 1px solid @font-color-light;
340
+ border: 1px solid var(--editify-font-color-light);
340
341
  border-top: none;
341
342
  border-right: none;
342
343
  transform: translateY(-50%) rotate(-45deg);
@@ -345,12 +346,12 @@
345
346
  z-index: 2;
346
347
  cursor: pointer;
347
348
  opacity: 0;
348
- transition: all 200ms;
349
+ transition: all 300ms;
349
350
  }
350
351
 
351
352
  &[data-editify-task='checked'] {
352
353
  text-decoration: line-through;
353
- color: @font-color-light;
354
+ color: var(--editify-font-color-light);
354
355
  &::after {
355
356
  opacity: 1;
356
357
  }
@@ -360,8 +361,8 @@
360
361
  //附件样式
361
362
  :deep(span[data-editify-attachment]) {
362
363
  display: inline;
363
- color: @font-color-link;
364
- transition: all 200ms;
364
+ color: var(--editify-font-color-link);
365
+ transition: all 300ms;
365
366
  position: relative;
366
367
  margin: 0 10px;
367
368
  font-size: 14px;
@@ -381,7 +382,7 @@
381
382
  }
382
383
 
383
384
  &:hover {
384
- color: @font-color-link-dark;
385
+ color: var(--editify-font-color-link-dark);
385
386
  cursor: pointer;
386
387
  }
387
388
  }
@@ -389,11 +390,11 @@
389
390
  //数学公式样式
390
391
  :deep(span[data-editify-mathformula]) {
391
392
  display: inline-block;
392
- border: 1px dashed @border-color;
393
+ border: 1px dashed var(--editify-border-color);
393
394
  padding: 6px 10px;
394
395
  border-radius: 4px;
395
396
  margin: 0 4px;
396
- transition: all 200ms;
397
+ transition: all 300ms;
397
398
  max-width: 100%;
398
399
 
399
400
  .katex,
@@ -404,7 +405,7 @@
404
405
 
405
406
  &:hover {
406
407
  cursor: pointer;
407
- background: @background-darker;
408
+ background: var(--editify-background-darker);
408
409
  }
409
410
  }
410
411
 
@@ -413,12 +414,12 @@
413
414
  display: block;
414
415
  position: relative;
415
416
  width: 100%;
416
- background-color: @background-dark;
417
- color: @font-color;
417
+ background-color: var(--editify-background-dark);
418
+ color: var(--editify-font-color);
418
419
  border-radius: 4px;
419
420
  margin-bottom: 15px;
420
421
  padding: 10px 10px 1px 10px;
421
- border: 1px solid @border-color;
422
+ border: 1px solid var(--editify-border-color);
422
423
 
423
424
  & > div {
424
425
  margin: 0 0 10px 0;
@@ -427,7 +428,7 @@
427
428
  &:first-child {
428
429
  margin: 0 0 15px 0;
429
430
  font-size: 18px;
430
- border-bottom: 1px solid @border-color;
431
+ border-bottom: 1px solid var(--editify-border-color);
431
432
  padding-bottom: 8px;
432
433
  }
433
434
  }
@@ -497,13 +498,13 @@
497
498
  position: absolute;
498
499
  left: 0;
499
500
  top: 0;
500
- background-color: @reverse-background;
501
+ background-color: var(--editify-reverse-background);
501
502
  margin: 0;
502
503
  padding: 6px 10px;
503
504
  overflow-x: hidden;
504
505
  overflow-y: auto;
505
506
  font-size: @font-size;
506
- color: @reverse-color;
507
+ color: var(--editify-reverse-color);
507
508
  font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
508
509
  resize: none;
509
510
  border: none;
@@ -522,12 +523,12 @@
522
523
 
523
524
  .editify-footer-words {
524
525
  font-size: @font-size;
525
- color: @font-color-light;
526
+ color: var(--editify-font-color-light);
526
527
  line-height: 1;
527
528
  }
528
529
 
529
530
  //全屏模式下并且不是代码视图下，显示一个上边框
530
531
  &.editify-fullscreen {
531
- border-top: 1px solid @border-color;
532
+ border-top: 1px solid var(--editify-border-color);
532
533
  }
533
534
  }
package/src/editify/editify.vue CHANGED
@@ -135,6 +135,8 @@ const pluginResultList = computed<PluginResultType[]>(() => {
135
135
  const menuConfig = computed<MenuConfigType>(() => {
136
136
  return <MenuConfigType>mergeObject(getMenuConfig($editTrans, props.locale), props.menu || {})
137
137
  })
138
+ //是否深色模式
139
+ const isDark = computed<boolean>(() => props.dark)
138
140
 
139
141
  //编辑器内部修改值的方法
140
142
  const internalModify = (val: string) => {
@@ -988,6 +990,20 @@ watch(
988
990
  }
989
991
  }
990
992
  )
993
+ //监听深色模式切换
994
+ watch(
995
+ () => isDark.value,
996
+ newVal => {
997
+ if (newVal) {
998
+ document.documentElement.setAttribute('data-editify-dark', 'true')
999
+ } else {
1000
+ document.documentElement.removeAttribute('data-editify-dark')
1001
+ }
1002
+ },
1003
+ {
1004
+ immediate: true
1005
+ }
1006
+ )
991
1007
 
992
1008
  onMounted(() => {
993
1009
  //创建编辑器
@@ -1026,6 +1042,7 @@ provide('editor', editor)
1026
1042
  provide('dataRangeCaches', dataRangeCaches)
1027
1043
  provide('showBorder', showBorder)
1028
1044
  provide('pluginResultList', pluginResultList)
1045
+ provide('isDark', isDark)
1029
1046
 
1030
1047
  defineExpose({
1031
1048
  editor,
package/src/editify/props.ts CHANGED
@@ -164,6 +164,11 @@ export const EditifyProps = {
164
164
  default: function () {
165
165
  return []
166
166
  }
167
+ },
168
+ //是否使用深色模式
169
+ dark: {
170
+ type: Boolean,
171
+ default: false
167
172
  }
168
173
  }
169
174
 
package/src/index.ts CHANGED
@@ -1,5 +1,7 @@
1
1
  import { App } from 'vue'
2
2
  import { withInstall } from '@/core/tool'
3
+ //引入根节点颜色变量样式
4
+ import '@/css/root.less'
3
5
  //引入字体图标样式
4
6
  import '@/icon/iconfont.css'
5
7
  //引入组件
@@ -22,7 +24,7 @@ const install = (app: App) => {
22
24
  app.component(Editify.name!, Editify)
23
25
  }
24
26
  //版本号
25
- const version = '0.2.3'
27
+ const version = '0.2.4'
26
28
 
27
29
  //导出AlexElement元素
28
30
  export { AlexElement } from 'alex-editor'
package/src/plugins/attachment/insertAttachment/insertAttachment.less CHANGED
@@ -20,7 +20,7 @@
20
20
  border-radius: 2px;
21
21
  left: 0;
22
22
  bottom: 0;
23
- transition: left 200ms;
23
+ transition: left 300ms;
24
24
 
25
25
  &.editify-upload {
26
26
  left: 5px;
@@ -35,9 +35,9 @@
35
35
  display: block;
36
36
  text-align: center;
37
37
  font-size: @font-size;
38
- color: @font-color;
38
+ color: var(--editify-font-color);
39
39
  opacity: 0.8;
40
- transition: all 200ms;
40
+ transition: all 300ms;
41
41
  width: 60px;
42
42
  overflow: hidden;
43
43
  white-space: nowrap;
@@ -54,7 +54,7 @@
54
54
 
55
55
  &.editify-active {
56
56
  opacity: 1;
57
- color: @font-color-dark;
57
+ color: var(--editify-font-color-dark);
58
58
  }
59
59
  }
60
60
  }
@@ -73,17 +73,17 @@
73
73
  padding: 4px 2px;
74
74
  border: none;
75
75
  font-size: @font-size;
76
- color: @font-color;
77
- border-bottom: 1px solid @border-color;
76
+ color: var(--editify-font-color);
77
+ border-bottom: 1px solid var(--editify-border-color);
78
78
  line-height: 1.5;
79
- transition: border-color 500ms;
79
+ transition: border-color 300ms;
80
80
  background-color: transparent;
81
81
  outline: none;
82
82
  box-sizing: border-box;
83
83
 
84
84
  &::-webkit-input-placeholder,
85
85
  &::placeholder {
86
- color: @font-color-disabled;
86
+ color: var(--editify-font-color-disabled);
87
87
  font-family: inherit;
88
88
  font-size: inherit;
89
89
  vertical-align: middle;
@@ -97,7 +97,7 @@
97
97
  width: 100%;
98
98
  font-size: @font-size;
99
99
  opacity: 0.8;
100
- transition: all 200ms;
100
+ transition: all 300ms;
101
101
 
102
102
  &:hover {
103
103
  cursor: pointer;
@@ -123,10 +123,10 @@
123
123
  padding: 4px 2px;
124
124
  border: none;
125
125
  font-size: @font-size;
126
- color: @font-color;
127
- border-bottom: 1px solid @border-color;
126
+ color: var(--editify-font-color);
127
+ border-bottom: 1px solid var(--editify-border-color);
128
128
  line-height: 1.5;
129
- transition: border-color 500ms;
129
+ transition: border-color 300ms;
130
130
  background-color: transparent;
131
131
  outline: none;
132
132
  box-sizing: border-box;
@@ -134,7 +134,7 @@
134
134
 
135
135
  &::-webkit-input-placeholder,
136
136
  &::placeholder {
137
- color: @font-color-disabled;
137
+ color: var(--editify-font-color-disabled);
138
138
  font-family: inherit;
139
139
  font-size: inherit;
140
140
  vertical-align: middle;
@@ -146,8 +146,8 @@
146
146
  font-size: 20px;
147
147
  line-height: 1;
148
148
  opacity: 0.8;
149
- transition: all 200ms;
150
- color: @font-color;
149
+ transition: all 300ms;
150
+ color: var(--editify-font-color);
151
151
  border-radius: 2px;
152
152
  padding: 2px;
153
153
  margin-left: 15px;
package/src/plugins/mathformula/insertMathformula/insertMathformula.less CHANGED
@@ -8,7 +8,7 @@
8
8
  text-align: left;
9
9
  margin-bottom: 10px;
10
10
  font-size: @font-size;
11
- color: @font-color;
11
+ color: var(--editify-font-color);
12
12
  }
13
13
 
14
14
  .editify-mathformula-textarea {
@@ -16,7 +16,7 @@
16
16
  appearance: none;
17
17
  -webkit-appearance: none;
18
18
  -moz-appearance: none;
19
- border: 1px solid @border-color;
19
+ border: 1px solid var(--editify-border-color);
20
20
  width: 100%;
21
21
  height: 100px;
22
22
  overflow-x: hidden;
@@ -25,9 +25,9 @@
25
25
  margin: 0;
26
26
  padding: 6px;
27
27
  font-size: @font-size;
28
- color: @font-color;
28
+ color: var(--editify-font-color);
29
29
  line-height: 1.5;
30
- transition: border-color 500ms;
30
+ transition: border-color 300ms;
31
31
  background-color: transparent;
32
32
  outline: none;
33
33
  box-sizing: border-box;
@@ -36,7 +36,7 @@
36
36
 
37
37
  &::-webkit-input-placeholder,
38
38
  &::placeholder {
39
- color: @font-color-disabled;
39
+ color: var(--editify-font-color-disabled);
40
40
  font-family: inherit;
41
41
  font-size: inherit;
42
42
  vertical-align: middle;
@@ -53,7 +53,7 @@
53
53
  span {
54
54
  cursor: pointer;
55
55
  opacity: 0.8;
56
- transition: all 200ms;
56
+ transition: all 300ms;
57
57
  font-size: @font-size;
58
58
 
59
59
  &:hover {