lakelib 0.3.4 → 0.3.5

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 +3 -3
  2. package/dist/lake.min.css +15 -15
  3. package/dist/lake.min.js +19 -19
  4. package/dist/lake.min.js.map +1 -1
  5. package/lib/lake.css +263 -38
  6. package/lib/lake.js +128 -173
  7. package/lib/lake.js.map +1 -1
  8. package/package.json +5 -5
package/lib/lake.css CHANGED
@@ -5,16 +5,20 @@
5
5
  --lake-text-color: #000000e0;
6
6
  --lake-secondary-text-color: #000000a6;
7
7
  --lake-border-color: #d9d9d9;
8
- --lake-background-hover-color: #0000000a;
9
- --lake-background-active-color: #0000000d;
8
+ --lake-background-color: #fff;
10
9
  --lake-success-color: #52c41a;
11
10
  --lake-warning-color: #faad14;
12
11
  --lake-error-color: #ff4d4f;
13
12
  /* selection */
14
13
  --lake-selection-background-color: #1ba2e333;
14
+ /* mark */
15
+ --lake-code-background-color: #8e96aa24;
15
16
  /* link */
16
17
  --lake-link-color: #1677ff;
17
18
  --lake-link-hover-color: #69b1ff;
19
+ /* block quotation */
20
+ --lake-blockquote-text-color: #000000a6;
21
+ --lake-blockquote-border: 4px solid #0505050f;
18
22
  /* box */
19
23
  --lake-box-border-color: #d9d9d9;
20
24
  --lake-box-border-focus-color: #1677ff;
@@ -23,17 +27,56 @@
23
27
  --lake-popup-z-index: 822;
24
28
  --lake-popup-font-size: 14px;
25
29
  --lake-popup-border-color: #d9d9d9;
30
+ --lake-popup-background-color: #fff;
26
31
  --lake-popup-shadow: 0 6px 16px 0 #00000014, 0 3px 6px -4px #0000001f, 0 9px 28px 8px #0000000d;
27
32
  /* button */
28
33
  --lake-button-font-size: 14px;
34
+ --lake-button-border-color: #d9d9d9;
35
+ --lake-button-background-hover-color: #0000000a;
36
+ --lake-button-background-active-color: #0000000d;
29
37
  --lake-button-shadow: 0 2px 0 #00000005;
30
38
  --lake-button-outline: 2px solid #69b1ff;
31
- /* input element, text field */
39
+ /* text field */
32
40
  --lake-input-border-color: #d9d9d9;
33
41
  --lake-input-border-hover-color: #69b1ff;
34
42
  --lake-input-outline: 2px solid #69b1ff;
35
43
  }
36
44
 
45
+ .lake-dark {
46
+ /* common */
47
+ --lake-text-color: #f0f6fc;
48
+ --lake-secondary-text-color: #9198a1;
49
+ --lake-border-color: #3d444d;
50
+ --lake-background-color: #1b1b1f;
51
+ /* selection */
52
+ --lake-selection-background-color: #184c9d;
53
+ /* mark */
54
+ --lake-code-background-color: #65758529;
55
+ /* link */
56
+ --lake-link-color: #4493f8;
57
+ --lake-link-hover-color: #58a6ff;
58
+ /* block quotation */
59
+ --lake-blockquote-text-color: #9e9e9e;
60
+ --lake-blockquote-border: 4px solid #3d444d;
61
+ /* box */
62
+ --lake-box-border-color: #3d444d;
63
+ --lake-box-border-focus-color: #4493f8;
64
+ --lake-box-background-color: #3d444d;
65
+ /* popup */
66
+ --lake-popup-border-color: #3d444d;
67
+ --lake-popup-background-color: #252525;
68
+ --lake-popup-shadow: #0000001f 0px 8px 4px, #0000003d 0px 8px 16px;
69
+ /* button */
70
+ --lake-button-border-color: #3d444d;
71
+ --lake-button-background-hover-color: #343434;
72
+ --lake-button-background-active-color: #343434;
73
+ --lake-button-outline: 2px solid #58a6ff;
74
+ /* text field */
75
+ --lake-input-border-color: #3d444d;
76
+ --lake-input-border-hover-color: #58a6ff;
77
+ --lake-input-outline: 2px solid #58a6ff;
78
+ }
79
+
37
80
  @keyframes lakerotate {
38
81
  0% {
39
82
  transform: rotate(0);
@@ -46,6 +89,7 @@
46
89
  .lake-container-wrapper {
47
90
  position: relative;
48
91
  }
92
+
49
93
  .lake-container {
50
94
  box-sizing: border-box;
51
95
  font-family: var(--lake-font-family);
@@ -54,19 +98,23 @@
54
98
  line-height: 1.45;
55
99
  padding: 16px 24px;
56
100
  }
101
+
57
102
  .lake-container:focus {
58
103
  outline: none;
59
104
  }
105
+
60
106
  .lake-container::selection,
61
107
  .lake-container ::selection {
62
108
  color: inherit;
63
109
  background: var(--lake-selection-background-color);
64
110
  }
111
+
65
112
  .lake-container *,
66
113
  .lake-container ::before,
67
114
  .lake-container ::after {
68
115
  box-sizing: border-box;
69
116
  }
117
+
70
118
  .lake-container.lake-placeholder::before {
71
119
  position: absolute;
72
120
  top: 8px;
@@ -75,22 +123,28 @@
75
123
  content: attr(placeholder);
76
124
  pointer-events: none;
77
125
  }
126
+
78
127
  .lake-container bookmark {
79
128
  display: inline;
80
129
  }
130
+
81
131
  .lake-container p {
82
132
  margin: 0;
83
133
  padding: 0;
84
134
  margin-bottom: 8px;
85
135
  }
136
+
86
137
  .lake-container a {
138
+ font-weight: normal;
87
139
  color: var(--lake-link-color);
88
140
  text-decoration: none;
89
141
  }
142
+
90
143
  .lake-container a:hover {
91
144
  color: var(--lake-link-hover-color);
92
145
  text-decoration: underline;
93
146
  }
147
+
94
148
  .lake-drop-indication {
95
149
  position: absolute;
96
150
  height: 2px;
@@ -99,6 +153,7 @@
99
153
  pointer-events: none;
100
154
  display: none;
101
155
  }
156
+
102
157
  .lake-drop-indication svg {
103
158
  position: absolute;
104
159
  top: -7.5px;
@@ -109,32 +164,42 @@
109
164
  pointer-events: none;
110
165
  }
111
166
 
167
+ .lake-dark {
168
+ color-scheme: dark;
169
+ }
170
+
112
171
  .lake-container strong {
113
172
  font-weight: 600;
114
173
  }
174
+
115
175
  .lake-container i {
116
176
  font-style: italic;
117
177
  }
178
+
118
179
  .lake-container u {
119
180
  text-decoration: underline;
120
181
  }
182
+
121
183
  .lake-container s {
122
184
  text-decoration: line-through;
123
185
  }
186
+
124
187
  .lake-container sub {
125
188
  vertical-align: sub;
126
189
  font-size: 0.85em;
127
190
  }
191
+
128
192
  .lake-container sup {
129
193
  vertical-align: super;
130
194
  font-size: 0.85em;
131
195
  }
196
+
132
197
  .lake-container code {
133
198
  font-family: Consolas, Courier, monospace;
134
199
  font-size: 0.9em;
135
200
  border-radius: 3px;
136
201
  padding: 0.2em 0.4em;
137
- background-color: #0000000a;
202
+ background-color: var(--lake-code-background-color);
138
203
  }
139
204
 
140
205
  lake-box {
@@ -142,35 +207,44 @@ lake-box {
142
207
  padding: 0;
143
208
  text-indent: 0;
144
209
  }
210
+
145
211
  lake-box[type="inline"] {
146
212
  display: inline flex;
147
213
  }
214
+
148
215
  lake-box[type="block"] {
149
216
  display: block grid;
150
217
  grid-template-columns: 1px calc(100% - 2px) 1px;
151
218
  }
219
+
152
220
  lake-box .lake-box-strip {
153
221
  display: block;
154
222
  min-width: 1px;
155
223
  }
224
+
156
225
  lake-box[type="inline"] .lake-box-strip {
157
226
  align-self: flex-end;
158
227
  }
228
+
159
229
  lake-box[type="block"] .lake-box-strip {
160
230
  align-self: stretch;
161
231
  }
232
+
162
233
  lake-box .lake-box-strip ::selection {
163
234
  background: transparent;
164
235
  }
236
+
165
237
  lake-box .lake-box-container {
166
238
  display: block;
167
239
  align-self: center;
168
240
  }
241
+
169
242
  lake-box .lake-box-hovered .lake-corner-toolbar,
170
243
  lake-box .lake-box-focused .lake-corner-toolbar,
171
244
  lake-box .lake-box-activated .lake-corner-toolbar {
172
245
  display: flex;
173
246
  }
247
+
174
248
  lake-box .lake-box-focused .lake-resizer {
175
249
  display: block;
176
250
  }
@@ -181,7 +255,7 @@ button.lake-button {
181
255
  font-family: Arial;
182
256
  font-size: var(--lake-button-font-size);
183
257
  color: var(--lake-text-color);
184
- background-color: #fff;
258
+ background-color: transparent;
185
259
  padding: 0;
186
260
  margin: 0 1px;
187
261
  line-height: 0;
@@ -203,23 +277,26 @@ button.lake-button img {
203
277
  height: 16px;
204
278
  margin: 6px;
205
279
  }
280
+ button.lake-button svg {
281
+ fill: var(--lake-text-color);
282
+ }
206
283
  button.lake-icon-button.lake-button-hovered {
207
- background-color: var(--lake-background-hover-color);
284
+ background-color: var(--lake-button-background-hover-color);
208
285
  }
209
286
  button.lake-icon-button.lake-button-selected {
210
- background-color: var(--lake-background-active-color);
287
+ background-color: var(--lake-button-background-active-color);
211
288
  }
212
289
  button.lake-text-button {
213
290
  background-color: transparent;
214
- border: 1px solid var(--lake-border-color);
291
+ border: 1px solid var(--lake-button-border-color);
215
292
  padding: 8px 16px;
216
293
  line-height: normal;
217
294
  }
218
295
  button.lake-text-button.lake-button-hovered {
219
- background-color: var(--lake-background-hover-color);
296
+ background-color: var(--lake-button-background-hover-color);
220
297
  }
221
298
  button.lake-text-button.lake-button-selected {
222
- background-color: var(--lake-background-active-color);
299
+ background-color: var(--lake-button-background-active-color);
223
300
  }
224
301
  button.lake-text-button svg {
225
302
  background-color: transparent;
@@ -253,7 +330,7 @@ button.lake-primary-button.lake-button-hovered {
253
330
  font-family: Arial;
254
331
  font-size: var(--lake-button-font-size);
255
332
  color: var(--lake-text-color);
256
- background-color: #fff;
333
+ background-color: transparent;
257
334
  padding: 0;
258
335
  display: flex;
259
336
  align-items: center;
@@ -268,7 +345,7 @@ button.lake-primary-button.lake-button-hovered {
268
345
  .lake-dropdown.lake-list-dropdown button.lake-dropdown-title-hovered,
269
346
  .lake-dropdown.lake-icon-dropdown button.lake-dropdown-title-hovered,
270
347
  .lake-dropdown.lake-character-dropdown button.lake-dropdown-title-hovered {
271
- background-color: var(--lake-background-hover-color);
348
+ background-color: var(--lake-button-background-hover-color);
272
349
  }
273
350
  .lake-dropdown button.lake-dropdown-title.lake-dropdown-title-no-down {
274
351
  margin-right: 0;
@@ -287,7 +364,7 @@ button.lake-primary-button.lake-button-hovered {
287
364
  border-radius: 5px 0 0 5px;
288
365
  }
289
366
  .lake-dropdown .lake-dropdown-icon-hovered {
290
- background-color: var(--lake-background-hover-color);
367
+ background-color: var(--lake-button-background-hover-color);
291
368
  }
292
369
  .lake-dropdown .lake-dropdown-icon svg,
293
370
  .lake-dropdown .lake-dropdown-icon img {
@@ -295,21 +372,28 @@ button.lake-primary-button.lake-button-hovered {
295
372
  height: 16px;
296
373
  margin: 6px 2px 6px 4px;
297
374
  }
375
+ .lake-dropdown .lake-dropdown-icon svg {
376
+ fill: var(--lake-text-color);
377
+ }
298
378
  .lake-dropdown.lake-color-dropdown .lake-dropdown-icon svg:last-child {
299
379
  position: absolute;
300
380
  left: 0;
301
381
  bottom: 0;
382
+ fill: none;
302
383
  }
303
384
  .lake-dropdown button.lake-dropdown-title-no-down .lake-dropdown-icon svg,
304
385
  .lake-dropdown button.lake-dropdown-title-no-down .lake-dropdown-icon img {
305
386
  margin: 6px;
306
387
  }
388
+ .lake-dropdown button.lake-dropdown-title-no-down .lake-dropdown-icon svg {
389
+ fill: var(--lake-text-color);
390
+ }
307
391
  .lake-dropdown .lake-dropdown-down-icon {
308
392
  line-height: 0;
309
393
  border-radius: 0 5px 5px 0;
310
394
  }
311
395
  .lake-dropdown .lake-dropdown-down-icon-hovered {
312
- background-color: var(--lake-background-hover-color);
396
+ background-color: var(--lake-button-background-hover-color);
313
397
  }
314
398
  .lake-dropdown .lake-dropdown-down-icon svg {
315
399
  width: 12px;
@@ -329,7 +413,7 @@ button.lake-primary-button.lake-button-hovered {
329
413
  padding: 6px 0;
330
414
  border: 1px solid var(--lake-popup-border-color);
331
415
  border-radius: 5px;
332
- background-color: #fff;
416
+ background-color: var(--lake-popup-background-color);
333
417
  box-shadow: var(--lake-popup-shadow);
334
418
  user-select: none;
335
419
  display: none;
@@ -350,10 +434,10 @@ button.lake-primary-button.lake-button-hovered {
350
434
  padding: 6px 24px 6px 10px;
351
435
  }
352
436
  .lake-list-dropdown-menu li.lake-dropdown-item-hovered {
353
- background-color: var(--lake-background-hover-color);
437
+ background-color: var(--lake-button-background-hover-color);
354
438
  }
355
439
  .lake-list-dropdown-menu li.lake-dropdown-item-selected {
356
- background-color: var(--lake-background-active-color);
440
+ background-color: var(--lake-button-background-hover-color);
357
441
  }
358
442
  .lake-list-dropdown-menu li .lake-dropdown-menu-check {
359
443
  line-height: 0;
@@ -362,6 +446,7 @@ button.lake-primary-button.lake-button-hovered {
362
446
  .lake-list-dropdown-menu li .lake-dropdown-menu-check svg {
363
447
  width: 12px;
364
448
  height: 12px;
449
+ fill: var(--lake-text-color);
365
450
  }
366
451
  .lake-list-dropdown-menu li .lake-dropdown-menu-icon {
367
452
  line-height: 0;
@@ -370,6 +455,7 @@ button.lake-primary-button.lake-button-hovered {
370
455
  .lake-list-dropdown-menu li .lake-dropdown-menu-icon svg {
371
456
  width: 16px;
372
457
  height: 16px;
458
+ fill: var(--lake-text-color);
373
459
  }
374
460
  .lake-list-dropdown-menu li .lake-dropdown-menu-text {
375
461
  margin-left: 10px;
@@ -385,10 +471,10 @@ button.lake-primary-button.lake-button-hovered {
385
471
  border-radius: 2px;
386
472
  }
387
473
  .lake-icon-dropdown-menu li.lake-dropdown-item-hovered {
388
- background-color: var(--lake-background-hover-color);
474
+ background-color: var(--lake-button-background-hover-color);
389
475
  }
390
476
  .lake-icon-dropdown-menu li.lake-dropdown-item-selected {
391
- background-color: var(--lake-background-active-color);
477
+ background-color: var(--lake-button-background-hover-color);
392
478
  }
393
479
  .lake-icon-dropdown-menu li .lake-dropdown-menu-check {
394
480
  display: none;
@@ -415,10 +501,10 @@ button.lake-primary-button.lake-button-hovered {
415
501
  border-radius: 2px;
416
502
  }
417
503
  .lake-character-dropdown-menu li.lake-dropdown-item-hovered {
418
- background-color: var(--lake-background-hover-color);
504
+ background-color: var(--lake-button-background-hover-color);
419
505
  }
420
506
  .lake-character-dropdown-menu li.lake-dropdown-item-selected {
421
- background-color: var(--lake-background-active-color);
507
+ background-color: var(--lake-button-background-active-color);
422
508
  }
423
509
  .lake-character-dropdown-menu li .lake-dropdown-menu-check {
424
510
  display: none;
@@ -443,10 +529,10 @@ button.lake-primary-button.lake-button-hovered {
443
529
  padding: 0;
444
530
  }
445
531
  .lake-color-dropdown-menu li.lake-dropdown-item-hovered {
446
- background-color: var(--lake-background-hover-color);
532
+ background-color: var(--lake-button-background-hover-color);
447
533
  }
448
534
  .lake-color-dropdown-menu li.lake-dropdown-item-selected {
449
- background-color: var(--lake-background-active-color);
535
+ background-color: var(--lake-button-background-active-color);
450
536
  }
451
537
  .lake-color-dropdown-menu li .lake-dropdown-menu-check {
452
538
  position: absolute;
@@ -472,11 +558,12 @@ button.lake-primary-button.lake-button-hovered {
472
558
  width: 16px;
473
559
  height: 16px;
474
560
  margin: 3px 4px;
561
+ fill: var(--lake-text-color);
475
562
  }
476
563
  .lake-color-dropdown-menu li .lake-dropdown-menu-text {
477
564
  font-size: 0;
478
565
  box-sizing: content-box;
479
- border: 1px solid var(--lake-background-hover-color);
566
+ border: 1px solid var(--lake-button-background-hover-color);
480
567
  border-radius: 2px;
481
568
  width: 16px;
482
569
  height: 16px;
@@ -544,7 +631,7 @@ button.lake-primary-button.lake-button-hovered {
544
631
  margin: 0;
545
632
  padding: 4px 8px;
546
633
  width: fit-content;
547
- background-color: #fff;
634
+ background-color: var(--lake-popup-background-color);
548
635
  box-shadow: var(--lake-popup-shadow);
549
636
  display: none;
550
637
  max-height: 180px;
@@ -562,7 +649,7 @@ button.lake-primary-button.lake-button-hovered {
562
649
  scroll-margin: 4px 0;
563
650
  }
564
651
  .lake-menu .lake-menu-item-selected {
565
- background-color: var(--lake-background-active-color);
652
+ background-color: var(--lake-button-background-active-color);
566
653
  }
567
654
 
568
655
  .lake-resizer {
@@ -824,8 +911,8 @@ button.lake-primary-button.lake-button-hovered {
824
911
  margin: 0;
825
912
  margin-bottom: 8px;
826
913
  padding: 8px 12px;
827
- color: var(--lake-secondary-text-color);
828
- border-left: 4px solid #0505050f;
914
+ color: var(--lake-blockquote-text-color);
915
+ border-left: var(--lake-blockquote-border);
829
916
  }
830
917
  .lake-container blockquote[type] {
831
918
  margin: 16px 0;
@@ -858,11 +945,13 @@ button.lake-primary-button.lake-button-hovered {
858
945
  flex-wrap: wrap;
859
946
  align-items: center;
860
947
  }
948
+
861
949
  .lake-toolbar *,
862
950
  .lake-toolbar ::before,
863
951
  .lake-toolbar ::after {
864
952
  box-sizing: border-box;
865
953
  }
954
+
866
955
  .lake-toolbar .lake-toolbar-divider {
867
956
  width: 1px;
868
957
  height: 20px;
@@ -870,9 +959,11 @@ button.lake-primary-button.lake-button-hovered {
870
959
  border-left: 1px solid var(--lake-border-color);
871
960
  user-select: none;
872
961
  }
962
+
873
963
  .lake-toolbar .lake-upload {
874
964
  line-height: 0;
875
965
  }
966
+
876
967
  .lake-toolbar .lake-upload input[type="file"] {
877
968
  display: none;
878
969
  }
@@ -882,9 +973,9 @@ button.lake-primary-button.lake-button-hovered {
882
973
  top: 0;
883
974
  left: 0;
884
975
  z-index: var(--lake-popup-z-index);
885
- border: 1px solid var(--lake-border-color);
976
+ border: 1px solid var(--lake-popup-border-color);
886
977
  border-radius: 5px;
887
- background-color: #fff;
978
+ background-color: var(--lake-popup-background-color);
888
979
  box-shadow: var(--lake-button-shadow);
889
980
  padding: 4px;
890
981
  display: flex;
@@ -905,20 +996,24 @@ button.lake-primary-button.lake-button-hovered {
905
996
  margin: 20px 0;
906
997
  overflow: visible;
907
998
  }
999
+
908
1000
  .lake-container table tr,
909
1001
  .lake-container table tr:nth-child(n) {
910
1002
  border: 0;
911
1003
  background-color: transparent;
912
1004
  }
1005
+
913
1006
  .lake-container table td {
914
1007
  font-size: var(--lake-font-size);
915
1008
  padding: 8px 16px;
916
1009
  min-width: 33px;
917
1010
  border: 1px solid var(--lake-border-color);
918
1011
  }
1012
+
919
1013
  .lake-container table td p {
920
1014
  margin-bottom: 0;
921
1015
  }
1016
+
922
1017
  .lake-container table td.lake-td-focused {
923
1018
  outline: var(--lake-input-outline);
924
1019
  }
@@ -932,7 +1027,7 @@ button.lake-primary-button.lake-button-hovered {
932
1027
  border-radius: 5px;
933
1028
  padding: 16px;
934
1029
  width: fit-content;
935
- background-color: #fff;
1030
+ background-color: var(--lake-popup-background-color);
936
1031
  box-shadow: var(--lake-popup-shadow);
937
1032
  display: none;
938
1033
  }
@@ -965,24 +1060,30 @@ button.lake-primary-button.lake-button-hovered {
965
1060
  lake-box[name="hr"] {
966
1061
  margin-bottom: 8px;
967
1062
  }
1063
+
968
1064
  .lake-hr {
969
1065
  height: 21px;
970
1066
  display: flex;
971
1067
  align-items: center;
972
1068
  }
1069
+
973
1070
  .lake-container[contenteditable="true"] .lake-hr {
974
1071
  cursor: pointer;
975
1072
  }
1073
+
976
1074
  .lake-container[contenteditable="false"] .lake-hr {
977
1075
  cursor: default;
978
1076
  }
1077
+
979
1078
  .lake-container[contenteditable="true"] lake-box[name="hr"] .lake-box-hovered .lake-hr {
980
1079
  background-color: var(--lake-box-background-color);
981
1080
  }
1081
+
982
1082
  lake-box[name="hr"] .lake-box-selected .lake-hr,
983
1083
  lake-box[name="hr"] .lake-box-focused .lake-hr {
984
1084
  background-color: var(--lake-selection-background-color);
985
1085
  }
1086
+
986
1087
  .lake-hr hr {
987
1088
  width: 100%;
988
1089
  margin: 0;
@@ -991,62 +1092,109 @@ lake-box[name="hr"] .lake-box-focused .lake-hr {
991
1092
  border-top: 1px solid var(--lake-border-color);
992
1093
  }
993
1094
 
1095
+ /* custom properties */
1096
+ :root {
1097
+ --lake-code-highlight-keyword: #af00db;
1098
+ --lake-code-highlight-name: #444d56;
1099
+ --lake-code-highlight-function: #005cc5;
1100
+ --lake-code-highlight-constant: #0550ae;
1101
+ --lake-code-highlight-definition: #444d56;
1102
+ --lake-code-highlight-type: #0550ae;
1103
+ --lake-code-highlight-operator: #444d56;
1104
+ --lake-code-highlight-comment: #008000;
1105
+ --lake-code-highlight-heading: #000080;
1106
+ --lake-code-highlight-boolean: #0550ae;
1107
+ --lake-code-highlight-string: #a31515;
1108
+ --lake-code-highlight-number: #098658;
1109
+ --lake-code-highlight-invalid: #cd3131;
1110
+ }
1111
+
1112
+ .lake-dark {
1113
+ --lake-code-highlight-keyword: #b392f0;
1114
+ --lake-code-highlight-name: #e1e4e8;
1115
+ --lake-code-highlight-function: #61afef;
1116
+ --lake-code-highlight-constant: #9ecBff;
1117
+ --lake-code-highlight-definition: #e1e4e8;
1118
+ --lake-code-highlight-type: #9ecBff;
1119
+ --lake-code-highlight-operator: #e1e4e8;
1120
+ --lake-code-highlight-comment: #6a9955;
1121
+ --lake-code-highlight-heading: #569cd6;
1122
+ --lake-code-highlight-boolean: #9ecBff;
1123
+ --lake-code-highlight-string: #ce9178;
1124
+ --lake-code-highlight-number: #b5cea8;
1125
+ --lake-code-highlight-invalid: #f44747;
1126
+ }
1127
+
994
1128
  /* CodeMirror */
995
1129
  .cm-editor {
996
1130
  font-size: 14px;
997
1131
  border-radius: 5px;
1132
+ color: var(--lake-text-color);
998
1133
  background-color: var(--lake-box-background-color);
999
1134
  }
1135
+
1000
1136
  .cm-editor.cm-focused {
1001
1137
  outline: none;
1002
1138
  }
1139
+
1003
1140
  .cm-editor .cm-content {
1004
1141
  font-family: Consolas, Courier, monospace;
1005
1142
  margin: 16px 20px;
1143
+ caret-color: var(--lake-text-color);
1006
1144
  }
1007
1145
 
1008
1146
  /* code block */
1009
1147
  lake-box[name="codeBlock"] {
1010
1148
  margin-bottom: 16px;
1011
1149
  }
1150
+
1012
1151
  lake-box[name="codeBlock"] .lake-box-focused .lake-code-block,
1013
1152
  lake-box[name="codeBlock"] .lake-box-activated .lake-code-block {
1014
1153
  border-color: var(--lake-box-border-color);
1015
1154
  }
1155
+
1016
1156
  .lake-code-block {
1017
1157
  position: relative;
1018
1158
  border: 1px solid transparent;
1019
1159
  border-radius: 5px;
1020
1160
  }
1161
+
1021
1162
  .lake-code-block .lake-dropdown {
1022
1163
  position: absolute;
1023
1164
  top: 2px;
1024
1165
  inset-inline-end: 2px;
1025
1166
  display: none;
1026
1167
  }
1168
+
1027
1169
  lake-box[name="codeBlock"] .lake-box-focused .lake-code-block .lake-dropdown,
1028
1170
  lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
1029
1171
  display: block;
1030
1172
  }
1173
+
1031
1174
  .lake-code-block .lake-dropdown .lake-dropdown-title {
1032
1175
  margin: 0;
1033
1176
  padding-right: 4px;
1034
1177
  background-color: var(--lake-box-background-color);
1035
1178
  }
1179
+
1036
1180
  .lake-code-block .lake-dropdown.lake-list-dropdown .lake-dropdown-title-hovered {
1037
- background-color: var(--lake-background-active-color);
1181
+ background-color: var(--lake-button-background-active-color);
1038
1182
  }
1183
+
1039
1184
  .lake-code-block .lake-dropdown .lake-dropdown-text {
1040
1185
  margin: 3px 6px;
1041
1186
  }
1187
+
1042
1188
  .lake-code-block .lake-dropdown .lake-dropdown-down-icon svg {
1043
1189
  margin: 5px 2px;
1044
1190
  }
1191
+
1045
1192
  .lake-code-block .lake-dropdown .lake-dropdown-menu {
1046
1193
  top: 24px;
1047
1194
  left: auto;
1048
1195
  right: 0;
1049
1196
  }
1197
+
1050
1198
  .lake-code-block-error {
1051
1199
  font-size: 14px;
1052
1200
  color: var(--lake-error-color);
@@ -1055,38 +1203,51 @@ lake-box[name="codeBlock"] .lake-box-activated .lake-code-block .lake-dropdown {
1055
1203
  padding: 16px 20px;
1056
1204
  }
1057
1205
 
1206
+ :root {
1207
+ --lake-image-placeholder-background-color: #fafafa;
1208
+ }
1209
+
1210
+ .lake-dark {
1211
+ --lake-image-placeholder-background-color: #343434;
1212
+ }
1213
+
1058
1214
  .lake-image-placeholder {
1059
1215
  display: flex;
1060
1216
  align-items: center;
1061
1217
  justify-content: center;
1062
1218
  border: 1px solid transparent;
1063
- background-color: #fafafa;
1219
+ background-color: var(--lake-image-placeholder-background-color);
1064
1220
  border-radius: 4px;
1065
1221
  width: 100%;
1066
1222
  height: 100%;
1067
1223
  }
1224
+
1068
1225
  .lake-image-placeholder svg {
1069
- fill: #d9d9d9;
1070
1226
  width: 50%;
1071
1227
  max-width: 64px;
1072
1228
  height: 50%;
1073
1229
  max-height: 64px;
1230
+ fill: #d9d9d9;
1074
1231
  }
1232
+
1075
1233
  .lake-image {
1076
1234
  position: relative;
1077
1235
  line-height: 0;
1078
1236
  border: 1px solid transparent;
1079
1237
  border-radius: 4px;
1080
1238
  }
1239
+
1081
1240
  .lake-image .lake-image-img {
1082
1241
  border: 0;
1083
1242
  border-radius: 4px;
1084
1243
  width: 100%;
1085
1244
  height: 100%;
1086
1245
  }
1246
+
1087
1247
  lake-box[name="image"] .lake-box-focused .lake-image {
1088
1248
  border-color: var(--lake-box-border-focus-color);
1089
1249
  }
1250
+
1090
1251
  .lake-image-caption {
1091
1252
  -webkit-user-modify: read-write-plaintext-only;
1092
1253
  position: relative;
@@ -1098,9 +1259,11 @@ lake-box[name="image"] .lake-box-focused .lake-image {
1098
1259
  padding-bottom: 8px;
1099
1260
  display: none;
1100
1261
  }
1262
+
1101
1263
  .lake-image-caption:focus {
1102
1264
  outline: 0;
1103
1265
  }
1266
+
1104
1267
  .lake-image-caption.lake-placeholder::before {
1105
1268
  position: absolute;
1106
1269
  top: 2px;
@@ -1109,10 +1272,12 @@ lake-box[name="image"] .lake-box-focused .lake-image {
1109
1272
  content: attr(placeholder);
1110
1273
  pointer-events: none;
1111
1274
  }
1275
+
1112
1276
  /* uploading status */
1113
1277
  .lake-image-uploading .lake-image-img {
1114
1278
  opacity: 0.5;
1115
1279
  }
1280
+
1116
1281
  .lake-image .lake-progress {
1117
1282
  position: absolute;
1118
1283
  bottom: 8px;
@@ -1125,6 +1290,7 @@ lake-box[name="image"] .lake-box-focused .lake-image {
1125
1290
  align-items: center;
1126
1291
  padding: 0 6px;
1127
1292
  }
1293
+
1128
1294
  .lake-image .lake-progress svg {
1129
1295
  fill: #fff;
1130
1296
  width: 16px;
@@ -1132,45 +1298,55 @@ lake-box[name="image"] .lake-box-focused .lake-image {
1132
1298
  margin: 6px;
1133
1299
  animation: lakerotate 1s linear 0s infinite normal none;
1134
1300
  }
1301
+
1135
1302
  .lake-image .lake-progress .lake-percent {
1136
1303
  font-size: 14px;
1137
1304
  color: #fff;
1138
1305
  margin: 6px;
1139
1306
  white-space: nowrap;
1140
1307
  }
1308
+
1141
1309
  /* error status */
1142
1310
  .lake-image .lake-error {
1143
1311
  padding: 16px;
1144
1312
  }
1313
+
1145
1314
  .lake-image.lake-image-error {
1146
1315
  border: 1px solid var(--lake-box-border-color);
1147
1316
  }
1317
+
1148
1318
  .lake-image.lake-image-error ::selection {
1149
1319
  background-color: transparent;
1150
1320
  }
1321
+
1151
1322
  lake-box[name="image"] .lake-box-selected .lake-image-error {
1152
1323
  background-color: var(--lake-selection-background-color);
1153
1324
  }
1325
+
1154
1326
  .lake-image .lake-error-icon {
1155
1327
  line-height: 0;
1156
1328
  text-align: center;
1157
1329
  margin-bottom: 8px;
1158
1330
  }
1331
+
1159
1332
  .lake-image .lake-error-icon svg {
1160
1333
  fill: var(--lake-error-color);
1161
1334
  width: 64px;
1162
1335
  height: 64px;
1163
1336
  }
1337
+
1164
1338
  .lake-image .lake-error-name {
1165
1339
  color: var(--lake-error-color);
1166
1340
  line-height: normal;
1167
1341
  }
1342
+
1168
1343
  /* full screen */
1169
1344
  .lake-pswp .pswp__button svg {
1170
1345
  fill: #fff;
1171
1346
  width: 24px;
1172
1347
  height: 24px;
1173
1348
  }
1349
+
1174
1350
  .lake-pswp .pswp__img,
1175
1351
  .lake-pswp.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img,
1176
1352
  .lake-pswp.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
@@ -1184,15 +1360,20 @@ lake-box[name="image"] .lake-box-selected .lake-image-error {
1184
1360
  line-height: 0;
1185
1361
  border: 1px solid transparent;
1186
1362
  }
1363
+
1187
1364
  lake-box[name="video"] .lake-box-hovered .lake-resizer {
1188
1365
  display: block;
1189
1366
  }
1367
+
1190
1368
  .lake-video .lake-video-form {
1191
1369
  padding: 16px;
1192
1370
  line-height: normal;
1371
+ color: var(--lake-text-color);
1193
1372
  border: 1px solid var(--lake-box-border-color);
1373
+ background-color: var(--lake-box-background-color);
1194
1374
  border-radius: 4px;
1195
1375
  }
1376
+
1196
1377
  .lake-video input[type="text"] {
1197
1378
  font-family: var(--lake-font-family);
1198
1379
  font-size: 14px;
@@ -1202,24 +1383,30 @@ lake-box[name="video"] .lake-box-hovered .lake-resizer {
1202
1383
  padding: 4px 10px;
1203
1384
  width: 100%;
1204
1385
  }
1386
+
1205
1387
  .lake-video input[type="text"]:hover {
1206
1388
  border: 1px solid var(--lake-input-border-hover-color);
1207
1389
  }
1390
+
1208
1391
  .lake-video input[type="text"]:focus-visible {
1209
1392
  outline: var(--lake-input-outline);
1210
1393
  outline-offset: -2px;
1211
1394
  }
1395
+
1212
1396
  .lake-video .lake-row {
1213
1397
  padding-bottom: 8px;
1214
1398
  }
1399
+
1215
1400
  .lake-video .lake-desc-row {
1216
1401
  padding-top: 8px;
1217
1402
  padding-bottom: 16px;
1218
1403
  color: var(--lake-secondary-text-color);
1219
1404
  }
1405
+
1220
1406
  .lake-video .lake-button-row {
1221
1407
  padding-top: 16px;
1222
1408
  }
1409
+
1223
1410
  .lake-video .lake-button-row button {
1224
1411
  width: 100%;
1225
1412
  }
@@ -1232,61 +1419,77 @@ lake-box[name="video"] .lake-box-hovered .lake-resizer {
1232
1419
  border: 1px solid transparent;
1233
1420
  border-radius: 4px;
1234
1421
  }
1422
+
1235
1423
  .lake-container[contenteditable="true"] .lake-file {
1236
1424
  cursor: default;
1237
1425
  user-select: none;
1238
1426
  }
1427
+
1239
1428
  .lake-container[contenteditable="false"] .lake-file {
1240
1429
  cursor: pointer;
1241
1430
  user-select: auto;
1242
1431
  }
1432
+
1243
1433
  lake-box[name="file"] .lake-box-strip {
1244
1434
  align-self: center;
1245
1435
  }
1436
+
1246
1437
  .lake-file .lake-file-info {
1247
1438
  display: flex;
1248
1439
  align-items: center;
1249
1440
  }
1441
+
1250
1442
  .lake-file .lake-file-type svg {
1251
1443
  width: 16px;
1252
1444
  height: 16px;
1253
1445
  margin: 4px;
1446
+ fill: var(--lake-text-color);
1254
1447
  }
1448
+
1255
1449
  .lake-file .lake-file-name {
1256
1450
  line-height: 24px;
1257
1451
  margin-right: 6px;
1258
1452
  color: var(--lake-link-color);
1259
1453
  }
1454
+
1260
1455
  lake-box[name="file"] .lake-box-hovered .lake-file {
1261
1456
  background-color: var(--lake-box-background-color);
1262
1457
  }
1458
+
1263
1459
  lake-box[name="file"] .lake-box-selected .lake-file {
1264
1460
  background-color: var(--lake-selection-background-color);
1265
1461
  }
1462
+
1266
1463
  lake-box[name="file"] .lake-box-focused .lake-file {
1267
1464
  background-color: var(--lake-selection-background-color);
1268
1465
  }
1466
+
1269
1467
  /* uploading status */
1270
1468
  .lake-file-uploading .lake-progress {
1271
1469
  display: flex;
1272
1470
  align-items: center;
1273
1471
  margin-right: 6px;
1274
1472
  }
1473
+
1275
1474
  .lake-file-uploading .lake-progress svg {
1276
1475
  width: 16px;
1277
1476
  height: 16px;
1278
1477
  margin: 4px;
1279
1478
  animation: lakerotate 1s linear 0s infinite normal none;
1479
+ fill: var(--lake-text-color);
1280
1480
  }
1481
+
1281
1482
  .lake-file-uploading .lake-progress .lake-percent {
1282
1483
  line-height: 24px;
1283
1484
  margin-left: 4px;
1284
1485
  white-space: nowrap;
1285
1486
  }
1487
+
1286
1488
  /* error status */
1287
1489
  .lake-file-error .lake-file-type svg {
1288
1490
  fill: var(--lake-error-color);
1289
1491
  }
1492
+
1290
1493
  .lake-file-error .lake-file-name {
1291
1494
  color: var(--lake-error-color);
1292
1495
  }
@@ -1333,11 +1536,11 @@ lake-box[name="equation"] .lake-box-focused .lake-equation {
1333
1536
  top: 28px;
1334
1537
  left: 0;
1335
1538
  z-index: 1;
1336
- border: 1px solid var(--lake-border-color);
1539
+ border: 1px solid var(--lake-popup-border-color);
1337
1540
  border-radius: 5px;
1338
1541
  padding: 16px;
1339
1542
  width: fit-content;
1340
- background-color: #fff;
1543
+ background-color: var(--lake-popup-background-color);
1341
1544
  box-shadow: var(--lake-popup-shadow);
1342
1545
  display: none;
1343
1546
  }
@@ -1347,6 +1550,7 @@ lake-box[name="equation"] .lake-box-activated .lake-equation-form {
1347
1550
  }
1348
1551
  .lake-equation .lake-equation-form textarea {
1349
1552
  border: 0;
1553
+ background-color: var(--lake-popup-background-color);
1350
1554
  font-family: Consolas, Courier, monospace;
1351
1555
  font-size: 14px;
1352
1556
  color: var(--lake-text-color);
@@ -1409,37 +1613,58 @@ lake-box[name="mention"] .lake-box-focused .lake-mention {
1409
1613
  background-color: var(--lake-selection-background-color);
1410
1614
  }
1411
1615
 
1616
+ :root {
1617
+ --lake-slash-icon-border-color: #d9d9d9;
1618
+ --lake-slash-icon-background-color: #fff;
1619
+ }
1620
+
1621
+ .lake-dark {
1622
+ --lake-slash-icon-border-color: #3d444d;
1623
+ --lake-slash-icon-background-color: #252525;
1624
+ }
1625
+
1412
1626
  .lake-slash-menu {
1413
1627
  max-height: 332px;
1414
1628
  }
1629
+
1415
1630
  .lake-slash-menu .lake-menu-item {
1416
1631
  height: 54px;
1417
1632
  }
1633
+
1418
1634
  .lake-slash-menu .lake-menu-item input[type="file"] {
1419
1635
  display: none;
1420
1636
  }
1637
+
1421
1638
  .lake-slash-menu .lake-slash-icon {
1422
1639
  margin-inline-end: 8px;
1423
1640
  border-radius: 5px;
1424
- border: 1px solid var(--lake-border-color);
1425
- background-color: #fff;
1641
+ border: 1px solid var(--lake-slash-icon-border-color);
1642
+ background-color: var(--lake-slash-icon-background-color);
1426
1643
  line-height: 0;
1427
1644
  }
1645
+
1428
1646
  .lake-slash-menu .lake-slash-icon svg,
1429
1647
  .lake-slash-menu .lake-slash-icon img {
1430
1648
  width: 32px;
1431
1649
  height: 32px;
1432
1650
  margin: 6px;
1433
1651
  }
1652
+
1653
+ .lake-slash-menu .lake-slash-icon svg {
1654
+ fill: var(--lake-text-color);
1655
+ }
1656
+
1434
1657
  .lake-slash-menu .lake-slash-text {
1435
1658
  display: flex;
1436
1659
  flex-direction: column;
1437
1660
  justify-content: center;
1438
1661
  }
1662
+
1439
1663
  .lake-slash-menu .lake-slash-title {
1440
1664
  font-weight: 500;
1441
1665
  color: var(--lake-text-color);
1442
1666
  }
1667
+
1443
1668
  .lake-slash-menu .lake-slash-description {
1444
1669
  color: #8c8c8c;
1445
1670
  }