vue-editify 0.2.2 → 0.2.4

Sign up to get free protection for your applications and to get access to all the features.
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.2'
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 {