markdown-it-any-block 3.3.9-beta1 → 3.4.4-beta2

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 (14) hide show
  1. package/README.md +1 -1
  2. package/dist/index_mdit-CE73u7cg.cjs +49588 -0
  3. package/dist/index_mdit-DeveGzkz.js +49589 -0
  4. package/dist/mdit-any-block.cjs +6 -49619
  5. package/dist/mdit-any-block.js +6 -49597
  6. package/dist/mdit-any-block.node.cjs +73 -0
  7. package/dist/mdit-any-block.node.js +52 -0
  8. package/index.ts +1 -3
  9. package/index_mdit.ts +8 -4
  10. package/node/index.ts +2 -0
  11. package/{jsdom_init.ts → node/jsdom_init.ts} +8 -3
  12. package/package.json +1 -1
  13. package/styles.css +1209 -1203
  14. package/vite.config.ts +15 -4
package/styles.css CHANGED
@@ -1,1204 +1,1210 @@
1
- @charset "UTF-8";
2
- /**
3
- * ABC 样式文件
4
- *
5
- * 修改/使用说明：
6
- *
7
- * vuepress-mdit环境直接用scss，ob这边需要使用css
8
- * 编辑ABC模块的该文件时，需要手动编译/使用vscode `easy sass` 插件
9
- *
10
- * 换行问题：AnyBlock的块宽度很多都是不满100%的，在窄区域中显示多文本时经常需要使用换行
11
- * - 不换行时
12
- * - white-space: pre; // 有换行符要换
13
- * - 换行时
14
- * - white-space: break-spaces; // 自动换行 ~normal~~
15
- * - overflow-wrap: break-word; // 单词中换行
16
- * - code {white-space: pre;} // 一个用于手动控制不换行的方式
17
- */
18
- /**
19
- * 颜色相关
20
- */
21
- :root {
22
- --ab-tab-root-bg-color: #0d1117;
23
- --ab-tab-root-bd-color: #34343f;
24
- --ab-tab-root-hv-color: #363639;
25
- --ab-tab-root-tx-color: #9e9e9e;
26
- --ab-bright-color: orange;
27
- --pre-background-color: #1b1b1b;
28
- --ab-table-border-width: 1px;
29
- --ab-table-border-color: #363636;
30
- --ab-width-inner: 100%;
31
- --ab-width-outer: 100%;
32
- }
33
-
34
- .theme-dark,
35
- .theme-light {
36
- --ab-tab-root-bg-color: var(--color-base-00);
37
- --ab-tab-root-bd-color: var(--color-base-30);
38
- --ab-tab-root-tx-color: var(--color-base-70);
39
- --ab-bright-color: var(--blockquote-border-color);
40
- --pre-background-color: var(--secondary-background);
41
- --ab-table-border-width: var(--table-border-width);
42
- --ab-table-border-color: var(--table-border-color);
43
- }
44
-
45
- .theme-light {
46
- --ab-tab-root-hv-color: #d7d7d7;
47
- }
48
-
49
- html[data-theme=light] #app,
50
- html[data-theme=dark] #app {
51
- --ab-tab-root-bg-color: var(--vp-c-bg);
52
- --ab-tab-root-bd-color: var(--vp-c-border);
53
- --ab-tab-root-tx-color: var(--vp-c-text);
54
- --ab-bright-color: var(--vp-c-accent);
55
- --pre-background-color: var(--code-bg-color);
56
- }
57
-
58
- html[data-theme=light] #app {
59
- --color-red: #e93147;
60
- --color-orange: #ec7500;
61
- --color-yellow: #e0ac00;
62
- --color-green: #08b94e;
63
- --color-cyan: #00bfbc;
64
- --color-blue: #086ddd;
65
- --color-purple: #7852ee;
66
- --color-pink: #d53984;
67
- --ab-tab-root-hv-color: #d7d7d7;
68
- }
69
-
70
- html[data-theme=dark] #app {
71
- --color-red: #fb464c;
72
- --color-orange: #e9973f;
73
- --color-yellow: #e0de71;
74
- --color-green: #44cf6e;
75
- --color-cyan: #53dfdd;
76
- --color-blue: #027aff;
77
- --color-purple: #a882ff;
78
- --color-pink: #fa99cd;
79
- }
80
-
81
- /**
82
- * obsidian各模式下的微调
83
- *
84
- * 替换内容
85
- * .ab-replace // 整体 (外框、圆角)
86
- * &>.ab-note // 内容
87
- * &>.ab-replaceEl // 内容 (感觉冗余了)
88
- * &>.ab-button // 操作控件 (刷新/编辑/下拉框)
89
- */
90
- .app-container .markdown-reading-view .ab-replace {
91
- margin-top: 0;
92
- margin-bottom: 22px;
93
- }
94
- .app-container .markdown-source-view .ab-replace {
95
- margin-top: -0.5em;
96
- margin-bottom: -0.5em;
97
- }
98
- .app-container .markdown-source-view .block-language-anyblock > .ab-replace {
99
- margin-top: 0;
100
- margin-bottom: 0;
101
- }
102
- .app-container .markdown-source-view .markdown-preview-view .ab-replace {
103
- margin-top: 0;
104
- margin-bottom: 22px;
105
- }
106
- .print .ab-replace > .ab-button {
107
- display: none;
108
- }
109
- .print .ab-replaceEl > button {
110
- display: none;
111
- }
112
-
113
- /**
114
- * 替换内容
115
- * .ab-replace // 整体 (外框、圆角)
116
- * &>.ab-note // id (仅调试模式用)
117
- * &>.ab-note // 内容
118
- * &>.ab-replaceEl // 内容 (感觉冗余了)
119
- * &>.ab-button // 操作控件 (刷新/编辑/下拉框)
120
- */
121
- .ab-replace {
122
- /*background-color: #272e3a;*/
123
- position: relative;
124
- border-radius: 4px;
125
- }
126
- .ab-replace > .ab-id {
127
- position: absolute;
128
- top: 0;
129
- left: 0;
130
- display: inline-block;
131
- height: 18px;
132
- width: auto;
133
- background: var(--ab-tab-root-bg-color);
134
- color: var(--ab-tab-root-tx-color);
135
- border-radius: 8px;
136
- padding: 0 8px;
137
- z-index: 10;
138
- opacity: 0.8;
139
- }
140
- .ab-replace > .ab-note {
141
- position: relative;
142
- /*padding: 24px 12px 12px 12px;*/
143
- }
144
- .ab-replace > .ab-button {
145
- box-sizing: border-box;
146
- position: absolute;
147
- top: 4px;
148
- }
149
- .ab-replace > .ab-button.ab-button-1 {
150
- right: 4px;
151
- }
152
- .ab-replace > .ab-button.ab-button-2 {
153
- right: 40px;
154
- }
155
- .ab-replace > .ab-button.ab-button-3 {
156
- right: 76px;
157
- }
158
- .ab-replace > .ab-button.ab-button-4 {
159
- right: 112px;
160
- }
161
- .ab-replace > .ab-button.ab-button-select > * {
162
- padding: 0 10px;
163
- width: 24px;
164
- height: 24px;
165
- box-sizing: border-box;
166
- }
167
- .ab-replace > .ab-button.ab-button-select > button {
168
- padding: 0;
169
- position: absolute;
170
- pointer-events: none;
171
- z-index: 2;
172
- text-align: center;
173
- border: none;
174
- box-shadow: none;
175
- background: none;
176
- }
177
- .ab-replace > .ab-button.ab-button-select > select {
178
- z-index: 1;
179
- opacity: 0;
180
- }
181
- .ab-replace > .ab-button.ab-button-select option {
182
- padding: 0 10px;
183
- }
184
- .ab-replace img.cm-widgetBuffer {
185
- height: 2px;
186
- }
187
-
188
- .ab-note .markdown-rendered table {
189
- min-width: 0;
190
- }
191
- .ab-note .markdown-rendered ul li,
192
- .ab-note .markdown-rendered ol li {
193
- margin-bottom: 0;
194
- }
195
- .ab-note table {
196
- display: table;
197
- width: 100%;
198
- }
199
- .ab-note table[modeT=true] tr {
200
- display: block;
201
- float: left;
202
- }
203
- .ab-note table[modeT=true] th, .ab-note table[modeT=true] td {
204
- display: block;
205
- }
206
- .ab-note pre.ab-mermaid-raw {
207
- border: solid 1px;
208
- border-radius: 6px;
209
- margin-top: 0;
210
- }
211
- .ab-note .ab-markmap-svg {
212
- border: solid 1px;
213
- border-radius: 6px;
214
- width: 100%;
215
- }
216
- .ab-note .ab-tab-root .ab-tab-nav {
217
- box-sizing: border-box;
218
- border: 2px solid var(--ab-tab-root-bd-color);
219
- background-color: var(--ab-tab-root-bd-color);
220
- color: var(--ab-tab-root-tx-color);
221
- border-bottom: none;
222
- border-radius: 10px 10px 0 0;
223
- padding-right: 60px;
224
- }
225
- .ab-note .ab-tab-root .ab-tab-nav .ab-tab-nav-item {
226
- height: 38px;
227
- box-shadow: none;
228
- border: none;
229
- border-radius: 10px 10px 0 0;
230
- padding-left: 20px;
231
- padding-right: 20px;
232
- font-size: 0.9em;
233
- font-weight: bold;
234
- cursor: pointer;
235
- }
236
- .ab-note .ab-tab-root .ab-tab-nav .ab-tab-nav-item[is_activate=false] {
237
- background-color: var(--ab-tab-root-bd-color);
238
- color: var(--ab-tab-root-tx-color);
239
- }
240
- .ab-note .ab-tab-root .ab-tab-nav .ab-tab-nav-item[is_activate=true] {
241
- background-color: var(--ab-tab-root-bg-color);
242
- color: var(--ab-tab-root-tx-color);
243
- }
244
- .ab-note .ab-tab-root .ab-tab-content {
245
- border: 2px solid var(--ab-tab-root-bd-color);
246
- background-color: var(--ab-tab-root-bg-color);
247
- color: var(--ab-tab-root-tx-color);
248
- border-top: none;
249
- padding: 10px 20px;
250
- }
251
- .ab-note td > p:first-child, .ab-note th > p:first-child,
252
- .ab-note td > ul:first-child, .ab-note th > ul:first-child,
253
- .ab-note .ab-list-table-witharrow > p:first-child,
254
- .ab-note .ab-nodes-content > p:first-child,
255
- .ab-note .ab-items-item > div > p:first-child, .ab-note .ab-items-item > div > ul:first-child,
256
- .ab-note td > div > p:first-child, .ab-note th > div > p:first-child,
257
- .ab-note td > div > ul:first-child, .ab-note th > div > ul:first-child,
258
- .ab-note .ab-list-table-witharrow > div > p:first-child,
259
- .ab-note .ab-nodes-content > div > p:first-child,
260
- .ab-note .ab-items-item > div > div > p:first-child, .ab-note .ab-items-item > div > div > ul:first-child {
261
- margin-top: 2px;
262
- }
263
- .ab-note td > p:last-child, .ab-note th > p:last-child,
264
- .ab-note td > ul:last-child, .ab-note th > ul:last-child,
265
- .ab-note .ab-list-table-witharrow > p:last-child,
266
- .ab-note .ab-nodes-content > p:last-child,
267
- .ab-note .ab-items-item > div > p:last-child, .ab-note .ab-items-item > div > ul:last-child,
268
- .ab-note td > div > p:last-child, .ab-note th > div > p:last-child,
269
- .ab-note td > div > ul:last-child, .ab-note th > div > ul:last-child,
270
- .ab-note .ab-list-table-witharrow > div > p:last-child,
271
- .ab-note .ab-nodes-content > div > p:last-child,
272
- .ab-note .ab-items-item > div > div > p:last-child, .ab-note .ab-items-item > div > div > ul:last-child {
273
- margin-bottom: 2px;
274
- }
275
- .ab-note table.ab-table {
276
- border-collapse: collapse;
277
- }
278
- .ab-note table.ab-table td, .ab-note table.ab-table th {
279
- white-space: normal;
280
- overflow-wrap: break-word;
281
- padding: 2px 5px;
282
- border: solid var(--ab-table-border-width) var(--ab-table-border-color);
283
- }
284
- .ab-note table.ab-table td code, .ab-note table.ab-table th code {
285
- white-space: pre;
286
- }
287
- .ab-note table.ab-table tr {
288
- background: none;
289
- }
290
- .ab-note .ab-branch-table.ab-table-likelist td {
291
- border: none;
292
- padding-bottom: 10px;
293
- vertical-align: top;
294
- box-sizing: border-box;
295
- }
296
- .ab-note .ab-branch-table.ab-table-likelist td[col_index="0"] {
297
- padding-right: 8px;
298
- padding-left: 20px;
299
- position: relative;
300
- }
301
- .ab-note .ab-branch-table.ab-table-likelist td[col_index="0"]::before {
302
- position: absolute;
303
- top: 14px;
304
- transform: translateY(-50%);
305
- width: 5px;
306
- height: 5px;
307
- border: none;
308
- left: 6px;
309
- content: "";
310
- border-radius: 50%;
311
- background-color: currentColor;
312
- }
313
- .ab-note .ab-branch-table.ab-table-likelist td[col_index="0"]::after {
314
- content: "";
315
- position: absolute;
316
- top: 3px;
317
- bottom: 5px;
318
- right: 0;
319
- border-right: 1px solid currentColor;
320
- pointer-events: none;
321
- }
322
- .ab-note table.ab-list-table .ab-foldable-tr > td:first-child > div {
323
- padding-left: 15px;
324
- position: relative;
325
- }
326
- .ab-note table.ab-list-table .ab-foldable-tr[able_fold=true] > td:first-child > div::before {
327
- content: "";
328
- position: absolute;
329
- width: 0;
330
- height: 0;
331
- }
332
- .ab-note table.ab-list-table .ab-foldable-tr[able_fold=true][is_fold=true] > td:first-child > div:first-child::before {
333
- top: 5px;
334
- left: 2px;
335
- border: 6px solid transparent;
336
- border-left-color: currentColor;
337
- cursor: pointer;
338
- }
339
- .ab-note table.ab-list-table .ab-foldable-tr[able_fold=true][is_fold=false] > td:first-child > div:first-child::before {
340
- top: 9px;
341
- left: -1px;
342
- border: 6px solid transparent;
343
- border-top-color: currentColor;
344
- cursor: pointer;
345
- }
346
- .ab-note table.ab-list-table .ab-foldable-tr[tr_level="0"] > td:first-child {
347
- padding-left: 0px;
348
- }
349
- .ab-note table.ab-list-table .ab-foldable-tr[tr_level="1"] > td:first-child {
350
- padding-left: 24px;
351
- }
352
- .ab-note table.ab-list-table .ab-foldable-tr[tr_level="2"] > td:first-child {
353
- padding-left: 48px;
354
- }
355
- .ab-note table.ab-list-table .ab-foldable-tr[tr_level="3"] > td:first-child {
356
- padding-left: 72px;
357
- }
358
- .ab-note table.ab-list-table .ab-foldable-tr[tr_level="4"] > td:first-child {
359
- padding-left: 96px;
360
- }
361
- .ab-note table.ab-list-table .ab-foldable-tr[tr_level="5"] > td:first-child {
362
- padding-left: 120px;
363
- }
364
- .ab-note table.ab-list-table .ab-foldable-tr[tr_level="6"] > td:first-child {
365
- padding-left: 144px;
366
- }
367
- .ab-note table.ab-list-table .ab-foldable-tr[tr_level="7"] > td:first-child {
368
- padding-left: 168px;
369
- }
370
- .ab-note table.ab-list-table .ab-foldable-tr[tr_level="8"] > td:first-child {
371
- padding-left: 192px;
372
- }
373
- .ab-note table.ab-list-table .ab-foldable-tr[tr_level="9"] > td:first-child {
374
- padding-left: 216px;
375
- }
376
- .ab-note table.ab-list-table .ab-foldable-tr[tr_level="10"] > td:first-child {
377
- padding-left: 240px;
378
- }
379
- .ab-note table.ab-list-table .ab-foldable-tr[tr_level="11"] > td:first-child {
380
- padding-left: 264px;
381
- }
382
- .ab-note table.ab-list-table .ab-foldable-tr[tr_level="12"] > td:first-child {
383
- padding-left: 288px;
384
- }
385
- .ab-note table.ab-list-table .ab-foldable-tr[tr_level="13"] > td:first-child {
386
- padding-left: 312px;
387
- }
388
- .ab-note table.ab-list-table .ab-foldable-tr[tr_level="14"] > td:first-child {
389
- padding-left: 336px;
390
- }
391
- .ab-note table.ab-list-table .ab-foldable-tr[tr_level="15"] > td:first-child {
392
- padding-left: 360px;
393
- }
394
- .ab-note table.ab-list-table .ab-foldable-tr[tr_level="16"] > td:first-child {
395
- padding-left: 384px;
396
- }
397
- .ab-note table.ab-list-table.ab-listtable-likelist {
398
- margin-left: 24px;
399
- }
400
- .ab-note table.ab-list-table.ab-listtable-likelist td {
401
- border: none;
402
- vertical-align: top;
403
- }
404
- .ab-note table.ab-list-table.ab-listtable-likelist .ab-foldable-tr > td:first-child > div.ab-list-table-witharrow {
405
- padding: 0 !important;
406
- padding-right: 8px;
407
- padding-left: 20px;
408
- position: relative;
409
- display: inline-block;
410
- }
411
- .ab-note table.ab-list-table.ab-listtable-likelist .ab-foldable-tr > td:first-child > div.ab-list-table-witharrow::before {
412
- border: solid 1px !important;
413
- background: none !important;
414
- width: 6px !important;
415
- height: 6px !important;
416
- box-sizing: border-box;
417
- position: absolute;
418
- top: 12px !important;
419
- transform: translateY(-50%) !important;
420
- left: -14px !important;
421
- content: "";
422
- border-radius: 50%;
423
- }
424
- .ab-note table.ab-list-table.ab-listtable-likelist .ab-foldable-tr[tr_level="0"] > td:first-child > div.ab-list-table-witharrow::before {
425
- border: 0 !important;
426
- background-color: currentColor !important;
427
- width: 6px !important;
428
- height: 6px !important;
429
- }
430
- .ab-note table.ab-list-table.ab-table-folder .ab-foldable-tr td:first-child {
431
- white-space: pre;
432
- vertical-align: top;
433
- }
434
- .ab-note table.ab-list-table.ab-table-folder .ab-foldable-tr > td > div {
435
- display: inline-block;
436
- vertical-align: top;
437
- }
438
- .ab-note table.ab-list-table.ab-table-folder .ab-foldable-tr > td > div.ab-list-table-witharrow {
439
- padding-left: 6px;
440
- }
441
- .ab-note table.ab-list-table.ab-table-folder .ab-foldable-tr .ab-list-table-svg {
442
- padding-top: 4px;
443
- }
444
- .ab-note table.ab-list-table.ab-table-folder .ab-foldable-tr .ab-list-table-svg svg {
445
- width: 14px;
446
- height: 14px;
447
- fill: var(--ab-bright-color);
448
- }
449
- .ab-note table.ab-list-table.ab-table-folder .ab-foldable-tr td:first-child {
450
- border: none;
451
- }
452
- .ab-note table.ab-list-table.ab-table-folder .ab-foldable-tr td {
453
- border-left: none;
454
- border-right: none;
455
- border-bottom: none;
456
- }
457
- .ab-note .ab-list-table-parent {
458
- position: relative;
459
- }
460
- .ab-note .ab-list-table-parent .ab-table-fold {
461
- position: absolute;
462
- bottom: 0;
463
- right: 0;
464
- background: none;
465
- border: none;
466
- color: currentColor;
467
- cursor: pointer;
468
- padding: 2px 6px;
469
- }
470
- .ab-note table.ab-table-timeline td {
471
- border-right: none;
472
- padding-left: 20px;
473
- }
474
- .ab-note table.ab-table-timeline td[col_index="0"] {
475
- border: none;
476
- border-left: none;
477
- border-right: solid 2px;
478
- padding-left: 5px;
479
- padding-right: 20px;
480
- color: var(--ab-bright-color);
481
- position: relative;
482
- overflow: visible;
483
- }
484
- .ab-note table.ab-table-timeline td[col_index="0"]::after {
485
- position: absolute;
486
- top: 1em;
487
- transform: translateY(-50%);
488
- width: 10px;
489
- height: 10px;
490
- right: -8px;
491
- content: "";
492
- background-color: var(--ab-bright-color);
493
- border-radius: 50%;
494
- border: solid 2px;
495
- }
496
- .ab-note table.ab-table-timeline tr:first-child td {
497
- border-top: none;
498
- }
499
- .ab-note table.ab-table-timeline tr:last-child td {
500
- border-bottom: none;
501
- }
502
- .ab-note .markdown-rendered.ab-faq-content p:first-child {
503
- margin-top: 0;
504
- }
505
- .ab-note .markdown-rendered.ab-faq-content p:last-child {
506
- margin-bottom: 0;
507
- }
508
- .ab-note .ab-faq .ab-faq-line {
509
- line-height: 30px;
510
- width: 100%;
511
- padding: 0 15px 0 15px;
512
- clear: both;
513
- overflow-y: auto;
514
- }
515
- .ab-note .ab-faq .ab-faq-line .ab-faq-bubble {
516
- float: left;
517
- width: calc(100% - 75px);
518
- }
519
- .ab-note .ab-faq .ab-faq-line.ab-faq-q,
520
- .ab-note .ab-faq .ab-faq-line.ab-faq-Q {
521
- background-color: #1e53ee;
522
- border-radius: 12px 12px 0 0;
523
- }
524
- .ab-note .ab-faq .ab-faq-line.ab-faq-a,
525
- .ab-note .ab-faq .ab-faq-line.ab-faq-A {
526
- background-color: #f5f8fe;
527
- border-radius: 0 0 12px 12px;
528
- color: #a994a6;
529
- margin-bottom: 20px;
530
- }
531
- .ab-note .ab-faq .ab-faq-line::before {
532
- float: left;
533
- width: 24px;
534
- }
535
- .ab-note .ab-faq .ab-faq-line.ab-faq-q::before,
536
- .ab-note .ab-faq .ab-faq-line.ab-faq-Q::before {
537
- content: "Q";
538
- }
539
- .ab-note .ab-faq .ab-faq-line.ab-faq-a::before,
540
- .ab-note .ab-faq .ab-faq-line.ab-faq-A::before {
541
- content: "A";
542
- }
543
- .ab-note .ab-deco-fold .ab-deco-fold-button {
544
- color: var(--ab-bright-color);
545
- border-bottom: 1px solid var(--ab-bright-color);
546
- height: 30px;
547
- line-height: 30px;
548
- padding-left: 6px;
549
- width: 100%;
550
- }
551
- .ab-note .ab-deco-scroll.ab-deco-scroll-y {
552
- overflow-y: auto;
553
- }
554
- .ab-note .ab-deco-scroll.ab-deco-scroll-x {
555
- overflow-x: auto;
556
- white-space: pre !important;
557
- }
558
- .ab-note .ab-deco-scroll.ab-deco-scroll-x th, .ab-note .ab-deco-scroll.ab-deco-scroll-x td {
559
- white-space: pre !important;
560
- }
561
- .ab-note .ab-deco-overfold {
562
- overflow-y: hidden;
563
- position: relative;
564
- }
565
- .ab-note .ab-deco-overfold .ab-deco-overfold-button {
566
- position: absolute;
567
- bottom: 0;
568
- height: 40px;
569
- line-height: 40px;
570
- width: 100%;
571
- text-align: center;
572
- box-sizing: content-box;
573
- }
574
- .ab-note .ab-deco-overfold .ab-deco-overfold-content {
575
- margin-bottom: 40px;
576
- }
577
- .ab-note .ab-deco-overfold[is-fold=true] .ab-deco-overfold-button {
578
- padding-top: 60px;
579
- background-image: linear-gradient(-180deg, rgba(24, 26, 27, 0) 0%, rgb(24, 26, 27) 100%);
580
- }
581
- .ab-note .ab-deco-heimu, .ab-note .ab-deco-heimu a {
582
- background-color: #252525;
583
- color: #252525;
584
- text-shadow: none;
585
- }
586
- .ab-note .ab-deco-heimu::-moz-selection, .ab-note .ab-deco-heimu a::-moz-selection {
587
- background: #9ab0c0;
588
- color: #fff;
589
- }
590
- .ab-note .ab-deco-heimu::selection, .ab-note .ab-deco-heimu a::selection {
591
- background: #9ab0c0;
592
- color: #fff;
593
- }
594
- .ab-note .ab-deco-heimu:hover, .ab-note .ab-deco-heimu:hover a {
595
- transition: color 0.13s linear;
596
- color: #fff;
597
- }
598
- .ab-note .ab-deco-title {
599
- width: 100%;
600
- }
601
- .ab-note .ab-deco-title p {
602
- font-size: 17px;
603
- line-height: 17px;
604
- margin: 0;
605
- margin-bottom: 10px;
606
- }
607
- .ab-note .ab-deco-title pre {
608
- margin: 0;
609
- }
610
- .ab-note .ab-deco-title .ab-deco-title-title {
611
- height: auto;
612
- }
613
- .ab-note .ab-deco-title .ab-deco-title-title[title-type=table] > p {
614
- font-weight: bold;
615
- text-align: center;
616
- margin-top: 10px;
617
- margin-bottom: 16px;
618
- }
619
- .ab-note .ab-deco-title .ab-deco-title-title[title-type=pre] > p {
620
- display: inline;
621
- font-size: 16px;
622
- font-weight: 400;
623
- background-color: var(--pre-background-color);
624
- padding: 8px 16px 11px 16px;
625
- border-radius: 8px 8px 0 0;
626
- margin: 0;
627
- }
628
- .ab-note .ab-deco-title .ab-deco-title-title[title-type=quote] > p {
629
- font-weight: bold;
630
- margin-bottom: 20px;
631
- }
632
- .ab-note .ab-deco-title .ab-deco-title-title[title-type=ul] > p {
633
- font-weight: bold;
634
- }
635
- .ab-note .ab-items {
636
- white-space: normal;
637
- overflow-wrap: break-word;
638
- }
639
- .ab-note .ab-items code {
640
- white-space: pre;
641
- }
642
- .ab-note .ab-items.ab-col {
643
- display: flex;
644
- flex-wrap: wrap;
645
- gap: 0rem;
646
- }
647
- .ab-note .ab-items.ab-col .ab-items-item {
648
- flex: 1 0 calc(33.33% - 1rem);
649
- box-sizing: border-box;
650
- padding: 10px;
651
- }
652
- .ab-note .ab-items.ab-card .ab-items-item {
653
- box-sizing: border-box;
654
- color: var(--ab-tab-root-tx-color);
655
- background-color: var(--ab-tab-root-bg-color);
656
- border: solid 2px var(--ab-tab-root-bd-color);
657
- border-radius: 6px;
658
- box-shadow: #34343f;
659
- margin-bottom: 10px;
660
- padding: 5px 10px;
661
- }
662
- .ab-note .ab-items.ab-card .ab-items-item > div {
663
- padding-top: 2px;
664
- padding-bottom: 2px;
665
- }
666
- .ab-note .ab-items.ab-card .ab-items-item .ab-items-title {
667
- border-bottom: 1px solid var(--ab-bright-color);
668
- }
669
- .ab-note .ab-items.ab-card.ab-lay-vfall:not(.ab-hfall) {
670
- /*display: flex; // Flexbox 布局
671
- flex-wrap: wrap; // 元素换行显示
672
- gap: 1rem; // 间隙
673
- .ab-items-item {
674
- flex: 1 0 calc(25% - 1rem); // 每个项目的宽度大约为容器的 33.33%，减去间隙的一半
675
- }*/
676
- -moz-column-count: 4;
677
- column-count: 4;
678
- -moz-column-gap: 10px;
679
- column-gap: 10px;
680
- /*display: grid;
681
- grid-template-columns: repeat(4, 1fr);
682
- grid-gap: 1rem; // 间隙
683
- grid-template-rows: masonry; // 兼容有问题，只有火狐支持，还tm的要开选项
684
- .ab-items-item {
685
- width: 100%;
686
- display: block;
687
- }*/
688
- /*display: flex; // Flexbox 布局
689
- flex-wrap: wrap; // 元素换行显示
690
- // gap: 1rem; // 间隙
691
- flex-direction: column; // 按列填充
692
- .ab-items-item {
693
- position: relative;
694
- width: calc(100% / 4);
695
- padding: 5px;
696
- box-sizing: border-box;
697
- &:nth-child(4n+1){ order: 1; }
698
- &:nth-child(4n+2){ order: 2; }
699
- &:nth-child(4n+3){ order: 3; }
700
- &:nth-child(4n+0){ order: 4; }
701
- }*/
702
- }
703
- .ab-note .ab-items.ab-card.ab-lay-vfall:not(.ab-hfall) .ab-items-item {
704
- -moz-column-break-inside: avoid;
705
- break-inside: avoid-column;
706
- }
707
- .ab-note .ab-items.ab-card.ab-lay-hfall {
708
- display: flex;
709
- flex-wrap: wrap;
710
- flex-direction: row;
711
- }
712
- .ab-note .ab-items.ab-card.ab-lay-hfall .ab-items-item .ab-items-title {
713
- color: currentColor;
714
- border-bottom: none;
715
- }
716
- .ab-note .ab-items.ab-card.ab-lay-hfall::after {
717
- content: "";
718
- flex-grow: 99999;
719
- }
720
- .ab-note .ab-items.ab-card.ab-lay-hfall > .ab-items-item {
721
- flex-grow: 1;
722
- margin: 5px;
723
- padding: 0 10px;
724
- position: relative;
725
- overflow: hidden;
726
- }
727
- .ab-note .ab-items.ab-card.ab-lay-hfall > .ab-items-item img {
728
- max-width: 100%;
729
- min-width: 100%;
730
- height: 200px;
731
- margin: 0;
732
- -o-object-fit: cover;
733
- object-fit: cover;
734
- vertical-align: bottom;
735
- }
736
- .ab-note .ab-items.ab-card.ab-lay-hfall > .ab-items-item p {
737
- max-width: 300px;
738
- margin: 0;
739
- }
740
- .ab-note .ab-items.ab-card.ab-lay-hfall > .ab-items-item > .ab-items-content {
741
- height: 100%;
742
- min-width: 100%;
743
- }
744
- .ab-note .ab-items.ab-card.ab-lay-grid {
745
- display: grid;
746
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
747
- gap: 0px !important;
748
- margin: 0 auto;
749
- }
750
- .ab-note .ab-items.ab-card.ab-lay-grid::after {
751
- content: "";
752
- flex-grow: 99999;
753
- }
754
- .ab-note .ab-items.ab-card.ab-lay-grid > .ab-items-item {
755
- position: relative;
756
- margin: 5px;
757
- display: flex;
758
- flex-direction: column;
759
- align-items: center;
760
- text-align: center; /* 确保文字居中 */
761
- }
762
- .ab-note .ab-items.ab-card.ab-lay-grid > .ab-items-item img {
763
- max-width: 200px;
764
- max-height: 200px;
765
- width: 100%; /* 确保图片宽度为100%，适应网格布局 */
766
- height: auto;
767
- margin: 0;
768
- }
769
- .ab-note .ab-items.ab-card.ab-lay-grid > .ab-items-item > .ab-items-content {
770
- width: 100%;
771
- padding: 0;
772
- }
773
- .ab-note .ab-items.ab-card.ab-deco-scroll-x {
774
- margin: 0 auto;
775
- display: flex;
776
- flex-wrap: nowrap;
777
- overflow-x: auto;
778
- }
779
- .ab-note .ab-items.ab-card.ab-deco-scroll-x .ab-items-item {
780
- flex: 0 0 auto;
781
- width: 170px;
782
- }
783
- .ab-note .ab-items > .ab-items-item {
784
- overflow-x: auto;
785
- }
786
- .ab-note .ab-items.ab-col1 {
787
- -moz-column-count: 1 !important;
788
- column-count: 1 !important;
789
- grid-template-columns: repeat(1, 1fr) !important;
790
- }
791
- .ab-note .ab-items.ab-col2 {
792
- -moz-column-count: 2 !important;
793
- column-count: 2 !important;
794
- grid-template-columns: repeat(2, 1fr) !important;
795
- }
796
- .ab-note .ab-items.ab-col3 {
797
- -moz-column-count: 3 !important;
798
- column-count: 3 !important;
799
- grid-template-columns: repeat(3, 1fr) !important;
800
- }
801
- .ab-note .ab-items.ab-col4 {
802
- -moz-column-count: 4 !important;
803
- column-count: 4 !important;
804
- grid-template-columns: repeat(4, 1fr) !important;
805
- }
806
- .ab-note .ab-items.ab-col5 {
807
- -moz-column-count: 5 !important;
808
- column-count: 5 !important;
809
- grid-template-columns: repeat(5, 1fr) !important;
810
- }
811
- .ab-note .ab-items.ab-col6 {
812
- -moz-column-count: 6 !important;
813
- column-count: 6 !important;
814
- grid-template-columns: repeat(6, 1fr) !important;
815
- }
816
- .ab-note .ab-items.ab-col7 {
817
- -moz-column-count: 7 !important;
818
- column-count: 7 !important;
819
- grid-template-columns: repeat(7, 1fr) !important;
820
- }
821
- .ab-note .ab-items.ab-col8 {
822
- -moz-column-count: 8 !important;
823
- column-count: 8 !important;
824
- grid-template-columns: repeat(8, 1fr) !important;
825
- }
826
- .ab-note .ab-nodes {
827
- white-space: normal;
828
- overflow-wrap: break-word;
829
- }
830
- .ab-note .ab-nodes code {
831
- white-space: pre;
832
- }
833
- .ab-note .ab-nodes .ab-nodes-content {
834
- display: inline-block;
835
- background-color: rgba(100, 100, 100, 0.25);
836
- padding: 2px 10px;
837
- margin-left: 5px;
838
- }
839
- .ab-note .ab-nodes .ab-nodes-children {
840
- display: flex;
841
- flex-direction: column;
842
- gap: 16px;
843
- padding-left: 0.8em;
844
- position: relative;
845
- }
846
- .ab-note .ab-nodes .ab-nodes-children .ab-nodes-bracket {
847
- content: "";
848
- box-sizing: border-box;
849
- position: absolute;
850
- width: 8px;
851
- height: 8px;
852
- top: calc(50% - 4px);
853
- left: -6px;
854
- clip-path: polygon(100% 0, 100% 100%, 13.4% 50%);
855
- background-color: currentColor;
856
- }
857
- .ab-note .ab-nodes .ab-nodes-children .ab-nodes-bracket2 {
858
- content: "";
859
- box-sizing: border-box;
860
- position: absolute;
861
- width: 10px;
862
- height: calc(100% - 8px);
863
- top: 4px;
864
- left: 0;
865
- border-radius: 10px 0 0 10px;
866
- border-left: 2px solid currentColor;
867
- border-top: 2px solid currentColor;
868
- border-bottom: 2px solid currentColor;
869
- }
870
- .ab-note .ab-nodes .ab-nodes-children .ab-nodes-node {
871
- display: flex;
872
- flex-direction: row;
873
- align-items: center;
874
- gap: 1.2em;
875
- }
876
- .ab-note .ab-nodes > .ab-nodes-node > .ab-nodes-bracket {
877
- display: none;
878
- }
879
- .ab-note .ab-nodes > .ab-nodes-node > .ab-nodes-bracket2 {
880
- display: none;
881
- }
882
- .ab-note .ab-nodes .ab-nodes-node[has_children=false] > .ab-nodes-children {
883
- display: none;
884
- }
885
- .ab-note .ab-nodes.min .ab-nodes-content {
886
- padding: 0;
887
- background: none;
888
- border-bottom: solid 1px currentColor;
889
- }
890
- .ab-note .ab-nodes.min .ab-nodes-children {
891
- gap: 2px;
892
- }
893
- .ab-note .ab-nodes.min .ab-nodes-children .ab-nodes-bracket2 {
894
- border-width: 1px;
895
- }
896
- .ab-note .ab-nodes.min .ab-nodes-children .ab-nodes-bracket {
897
- display: none;
898
- width: 6px;
899
- height: 6px;
900
- top: calc(50% - 4px);
901
- left: -6px;
902
- }
903
- .ab-note .ab-nodes.min .ab-nodes-content {
904
- padding-right: 1.2em;
905
- }
906
- .ab-note .ab-nodes.min .ab-nodes-children .ab-nodes-node {
907
- gap: 0;
908
- }
909
- .ab-note .ab-nodes-node[has_children=false] > .ab-nodes-content {
910
- padding-right: 4px;
911
- }
912
- .ab-note .ab-nodes.min > .ab-nodes-children > .ab-nodes-node:nth-child(8n+1) {
913
- --node-color: var(--color-red);
914
- }
915
- .ab-note .ab-nodes.min > .ab-nodes-children > .ab-nodes-node:nth-child(8n+2) {
916
- --node-color: var(--color-orange);
917
- }
918
- .ab-note .ab-nodes.min > .ab-nodes-children > .ab-nodes-node:nth-child(8n+3) {
919
- --node-color: var(--color-yellow);
920
- }
921
- .ab-note .ab-nodes.min > .ab-nodes-children > .ab-nodes-node:nth-child(8n+4) {
922
- --node-color: var(--color-green);
923
- }
924
- .ab-note .ab-nodes.min > .ab-nodes-children > .ab-nodes-node:nth-child(8n+5) {
925
- --node-color: var(--color-cyan);
926
- }
927
- .ab-note .ab-nodes.min > .ab-nodes-children > .ab-nodes-node:nth-child(8n+6) {
928
- --node-color: var(--color-blue);
929
- }
930
- .ab-note .ab-nodes.min > .ab-nodes-children > .ab-nodes-node:nth-child(8n+7) {
931
- --node-color: var(--color-purple);
932
- }
933
- .ab-note .ab-nodes.min > .ab-nodes-children > .ab-nodes-node:nth-child(8n+0) {
934
- --node-color: var(--color-pink);
935
- }
936
- .ab-note .ab-nodes.min > .ab-nodes-children > .ab-nodes-node .ab-nodes-content, .ab-note .ab-nodes.min > .ab-nodes-children > .ab-nodes-node .ab-nodes-bracket, .ab-note .ab-nodes.min > .ab-nodes-children > .ab-nodes-node .ab-nodes-bracket2 {
937
- border-color: var(--node-color);
938
- }
939
- .ab-note .ab-nodes.min > .ab-nodes-children > .ab-nodes-node .ab-nodes-bracket {
940
- background-color: var(--node-color);
941
- }
942
- .ab-note .ab-nodes.scroll {
943
- overflow-x: auto;
944
- }
945
- .ab-note .ab-nodes.scroll .ab-nodes-content {
946
- white-space: nowrap;
947
- max-width: 300px;
948
- overflow-x: auto;
949
- }
950
- .ab-note table.scroll {
951
- overflow-x: auto;
952
- }
953
- .ab-note table.scroll td {
954
- white-space: nowrap;
955
- max-width: 300px;
956
- overflow-x: auto;
957
- }
958
-
959
- div.md-table-fig1 {
960
- overflow-x: scroll;
961
- transform: scaleY(-1);
962
- }
963
- div.md-table-fig1 table.ab-setting.md-table-fig2 {
964
- overflow-x: scroll;
965
- text-overflow: clip !important;
966
- transform: scaleY(-1);
967
- white-space: pre-wrap;
968
- }
969
-
970
- .ab-custom-text-red {
971
- color: red !important;
972
- }
973
-
974
- .ab-custom-text-orange {
975
- color: orange !important;
976
- }
977
-
978
- .ab-custom-text-yellow {
979
- color: yellow !important;
980
- }
981
-
982
- .ab-custom-text-green {
983
- color: green !important;
984
- }
985
-
986
- .ab-custom-text-cyan {
987
- color: cyan !important;
988
- }
989
-
990
- .ab-custom-text-blue {
991
- color: blue !important;
992
- }
993
-
994
- .ab-custom-text-purple {
995
- color: purple !important;
996
- }
997
-
998
- .ab-custom-text-white {
999
- color: white !important;
1000
- }
1001
-
1002
- .ab-custom-text-black {
1003
- color: black !important;
1004
- }
1005
-
1006
- .ab-custom-bg-red {
1007
- background-color: red !important;
1008
- }
1009
-
1010
- .ab-custom-bg-orange {
1011
- background-color: orange !important;
1012
- }
1013
-
1014
- .ab-custom-bg-yellow {
1015
- background-color: yellow !important;
1016
- }
1017
-
1018
- .ab-custom-bg-green {
1019
- background-color: green !important;
1020
- }
1021
-
1022
- .ab-custom-bg-cyan {
1023
- background-color: cyan !important;
1024
- }
1025
-
1026
- .ab-custom-bg-blue {
1027
- background-color: blue !important;
1028
- }
1029
-
1030
- .ab-custom-bg-purple {
1031
- background-color: purple !important;
1032
- }
1033
-
1034
- .ab-custom-bg-white {
1035
- background-color: white !important;
1036
- }
1037
-
1038
- .ab-custom-bg-black {
1039
- background-color: black !important;
1040
- }
1041
-
1042
- .ab-custom-dire-top * {
1043
- vertical-align: top !important;
1044
- }
1045
-
1046
- .ab-custom-dire-down * {
1047
- vertical-align: bottom !important;
1048
- }
1049
-
1050
- .ab-custom-dire-left * {
1051
- text-align: left !important;
1052
- }
1053
-
1054
- .ab-custom-dire-right * {
1055
- text-align: right !important;
1056
- }
1057
-
1058
- .ab-custom-dire-center * {
1059
- vertical-align: middle !important;
1060
- text-align: center !important;
1061
- }
1062
-
1063
- .ab-custom-dire-hcenter * {
1064
- text-align: center !important;
1065
- }
1066
-
1067
- .ab-custom-dire-vcenter * {
1068
- vertical-align: middle !important;
1069
- }
1070
-
1071
- .ab-custom-dire-justify * {
1072
- text-align: justify !important;
1073
- }
1074
-
1075
- .ab-custom-font-large {
1076
- font-size: large !important;
1077
- }
1078
-
1079
- .ab-custom-font-largex {
1080
- font-size: x-large !important;
1081
- }
1082
-
1083
- .ab-custom-font-largexx {
1084
- font-size: xx-large !important;
1085
- }
1086
-
1087
- .ab-custom-font-small {
1088
- font-size: small !important;
1089
- }
1090
-
1091
- .ab-custom-font-smallx {
1092
- font-size: x-small !important;
1093
- }
1094
-
1095
- .ab-custom-font-smallxx {
1096
- font-size: xx-small !important;
1097
- }
1098
-
1099
- .ab-custom-font-bold {
1100
- font-weight: bold !important;
1101
- }
1102
-
1103
- table.ab-table-fc th[col_index="0"], table.ab-table-fc td[col_index="0"] {
1104
- white-space: pre;
1105
- font-weight: 500;
1106
- vertical-align: top;
1107
- width: 0px;
1108
- }
1109
-
1110
- .ab-table-fc > table th:first-child, .ab-table-fc > table td:first-child {
1111
- white-space: pre;
1112
- font-weight: 500;
1113
- vertical-align: top;
1114
- width: 0px;
1115
- }
1116
-
1117
- .ab-custom-td-nowrap td, .ab-custom-td1-nowrap tr > td:first-child {
1118
- white-space: pre !important;
1119
- }
1120
-
1121
- .ab-custom-td-wrap td, .ab-custom-td1-wrap tr > td:first-child {
1122
- white-space: normal !important;
1123
- overflow-wrap: break-word;
1124
- }
1125
-
1126
- .ab-custom-td-0 td, .ab-custom-td1-0 tr > td:first-child {
1127
- width: 0px !important;
1128
- }
1129
-
1130
- .ab-custom-td-100 td, .ab-custom-td1-100 tr > td:first-child {
1131
- width: 100px !important;
1132
- }
1133
-
1134
- .ab-custom-td-150 td, .ab-custom-td1-150 tr > td:first-child {
1135
- width: 150px !important;
1136
- }
1137
-
1138
- .ab-custom-td-200 td, .ab-custom-td1-200 tr > td:first-child {
1139
- width: 200px !important;
1140
- }
1141
-
1142
- .ab-custom-td-250 td, .ab-custom-td1-250 tr > td:first-child {
1143
- width: 250px !important;
1144
- }
1145
-
1146
- .ab-custom-td-300 td, .ab-custom-td1-300 tr > td:first-child {
1147
- width: 300px !important;
1148
- }
1149
-
1150
- .ab-custom-td-half td, .ab-custom-td1-half tr > td:first-child {
1151
- width: 50% !important;
1152
- }
1153
-
1154
- .ab-super-width-p {
1155
- width: var(--ab-width-outer);
1156
- margin-left: calc((100% - var(--ab-width-outer)) / 2);
1157
- }
1158
-
1159
- /**************** CM Style *******************/
1160
- .ab-line-brace {
1161
- -webkit-text-decoration: underline 1px red;
1162
- text-decoration: underline 1px red;
1163
- }
1164
-
1165
- .ab-line-list {
1166
- -webkit-text-decoration: underline 1px cyan;
1167
- text-decoration: underline 1px cyan;
1168
- }
1169
-
1170
- .ab-line-yellow {
1171
- -webkit-text-decoration: solid underline 1px rgba(0, 255, 0, 0.2);
1172
- text-decoration: solid underline 1px rgba(0, 255, 0, 0.2);
1173
- }
1174
-
1175
- .ab-line-blue {
1176
- -webkit-text-decoration: underline 1px blue;
1177
- text-decoration: underline 1px blue;
1178
- }
1179
-
1180
- .bright-color {
1181
- color: var(--ab-bright-color);
1182
- border-color: var(--ab-bright-color);
1183
- }
1184
-
1185
- /**************** 兼容性补充 ******************/
1186
- .markmap-foreign [aria-hidden=true] {
1187
- display: none;
1188
- }
1189
-
1190
- :is(.markdown-preview-view, .markdown-rendered).is-readable-line-width:not(.matrix) .ab-note :is(.markdown-rendered) {
1191
- width: auto !important;
1192
- }
1193
-
1194
- /**************** PRO *************************/
1195
- table td div > p:first-child, table td div > ul:first-child, table th div > p:first-child, table th div > ul:first-child {
1196
- margin-top: 2px;
1197
- }
1198
- table td div > p:last-child, table td div > ul:last-child, table th div > p:last-child, table th div > ul:last-child {
1199
- margin-bottom: 2px;
1200
- }
1201
-
1202
- .markdown-rendered tbody > tr > td .markdown-rendered, .markdown-rendered tbody > tr > th .markdown-rendered {
1203
- white-space: normal;
1
+ @charset "UTF-8";
2
+ /**
3
+ * ABC 样式文件
4
+ *
5
+ * 修改/使用说明：
6
+ *
7
+ * vuepress-mdit环境直接用scss，ob这边需要使用css
8
+ * 编辑ABC模块的该文件时，需要手动编译/使用vscode `easy sass` 插件
9
+ *
10
+ * 换行问题：AnyBlock的块宽度很多都是不满100%的，在窄区域中显示多文本时经常需要使用换行
11
+ * - 不换行时
12
+ * - white-space: pre; // 有换行符要换
13
+ * - 换行时
14
+ * - white-space: break-spaces; // 自动换行 ~normal~~
15
+ * - overflow-wrap: break-word; // 单词中换行
16
+ * - code {white-space: pre;} // 一个用于手动控制不换行的方式
17
+ */
18
+ /**
19
+ * 颜色相关
20
+ */
21
+ :root {
22
+ --ab-tab-root-bg-color: #0d1117;
23
+ --ab-tab-root-bd-color: #34343f;
24
+ --ab-tab-root-hv-color: #363639;
25
+ --ab-tab-root-tx-color: #9e9e9e;
26
+ --ab-bright-color: orange;
27
+ --pre-background-color: #1b1b1b;
28
+ --ab-table-border-width: 1px;
29
+ --ab-table-border-color: #363636;
30
+ --ab-width-inner: 100%;
31
+ --ab-width-outer: 100%;
32
+ }
33
+
34
+ .theme-dark,
35
+ .theme-light {
36
+ --ab-tab-root-bg-color: var(--color-base-00);
37
+ --ab-tab-root-bd-color: var(--color-base-30);
38
+ --ab-tab-root-tx-color: var(--color-base-70);
39
+ --ab-bright-color: var(--blockquote-border-color);
40
+ --pre-background-color: var(--secondary-background);
41
+ --ab-table-border-width: var(--table-border-width);
42
+ --ab-table-border-color: var(--table-border-color);
43
+ }
44
+
45
+ .theme-light {
46
+ --ab-tab-root-hv-color: #d7d7d7;
47
+ }
48
+
49
+ html[data-theme=light] #app,
50
+ html[data-theme=dark] #app {
51
+ --ab-tab-root-bg-color: var(--vp-c-bg);
52
+ --ab-tab-root-bd-color: var(--vp-c-border);
53
+ --ab-tab-root-tx-color: var(--vp-c-text);
54
+ --ab-bright-color: var(--vp-c-accent);
55
+ --pre-background-color: var(--code-bg-color);
56
+ }
57
+
58
+ html[data-theme=light] #app {
59
+ --color-red: #e93147;
60
+ --color-orange: #ec7500;
61
+ --color-yellow: #e0ac00;
62
+ --color-green: #08b94e;
63
+ --color-cyan: #00bfbc;
64
+ --color-blue: #086ddd;
65
+ --color-purple: #7852ee;
66
+ --color-pink: #d53984;
67
+ --ab-tab-root-hv-color: #d7d7d7;
68
+ }
69
+
70
+ html[data-theme=dark] #app {
71
+ --color-red: #fb464c;
72
+ --color-orange: #e9973f;
73
+ --color-yellow: #e0de71;
74
+ --color-green: #44cf6e;
75
+ --color-cyan: #53dfdd;
76
+ --color-blue: #027aff;
77
+ --color-purple: #a882ff;
78
+ --color-pink: #fa99cd;
79
+ }
80
+
81
+ /**
82
+ * obsidian各模式下的微调
83
+ *
84
+ * 替换内容
85
+ * .ab-replace // 整体 (外框、圆角)
86
+ * &>.ab-note // 内容
87
+ * &>.ab-replaceEl // 内容 (感觉冗余了)
88
+ * &>.ab-button // 操作控件 (刷新/编辑/下拉框)
89
+ */
90
+ .app-container .markdown-reading-view .ab-replace {
91
+ margin-top: 0;
92
+ margin-bottom: 22px;
93
+ }
94
+ .app-container .markdown-source-view .ab-replace {
95
+ margin-top: -0.5em;
96
+ margin-bottom: -0.5em;
97
+ }
98
+ .app-container .markdown-source-view .block-language-anyblock > .ab-replace {
99
+ margin-top: 0;
100
+ margin-bottom: 0;
101
+ }
102
+ .app-container .markdown-source-view .markdown-preview-view .ab-replace {
103
+ margin-top: 0;
104
+ margin-bottom: 22px;
105
+ }
106
+ .print .ab-replace > .ab-button {
107
+ display: none;
108
+ }
109
+ .print .ab-replaceEl > button {
110
+ display: none;
111
+ }
112
+
113
+ /**
114
+ * 替换内容
115
+ * .ab-replace // 整体 (外框、圆角)
116
+ * &>.ab-note // id (仅调试模式用)
117
+ * &>.ab-note // 内容
118
+ * &>.ab-replaceEl // 内容 (感觉冗余了)
119
+ * &>.ab-button // 操作控件 (刷新/编辑/下拉框)
120
+ */
121
+ .ab-replace {
122
+ /*background-color: #272e3a;*/
123
+ position: relative;
124
+ border-radius: 4px;
125
+ }
126
+ .ab-replace > .ab-id {
127
+ position: absolute;
128
+ top: 0;
129
+ left: 0;
130
+ display: inline-block;
131
+ height: 18px;
132
+ width: auto;
133
+ background: var(--ab-tab-root-bg-color);
134
+ color: var(--ab-tab-root-tx-color);
135
+ border-radius: 8px;
136
+ padding: 0 8px;
137
+ z-index: 10;
138
+ opacity: 0.8;
139
+ }
140
+ .ab-replace > .ab-note {
141
+ position: relative;
142
+ /*padding: 24px 12px 12px 12px;*/
143
+ }
144
+ .ab-replace > .ab-button {
145
+ box-sizing: border-box;
146
+ position: absolute;
147
+ top: 4px;
148
+ }
149
+ .ab-replace > .ab-button.ab-button-1 {
150
+ right: 4px;
151
+ }
152
+ .ab-replace > .ab-button.ab-button-2 {
153
+ right: 40px;
154
+ }
155
+ .ab-replace > .ab-button.ab-button-3 {
156
+ right: 76px;
157
+ }
158
+ .ab-replace > .ab-button.ab-button-4 {
159
+ right: 112px;
160
+ }
161
+ .ab-replace > .ab-button.ab-button-5 {
162
+ right: 148px;
163
+ }
164
+ .ab-replace > .ab-button.ab-button-6 {
165
+ right: 184px;
166
+ }
167
+ .ab-replace > .ab-button.ab-button-select > * {
168
+ padding: 0 10px;
169
+ width: 24px;
170
+ height: 24px;
171
+ box-sizing: border-box;
172
+ }
173
+ .ab-replace > .ab-button.ab-button-select > button {
174
+ padding: 0;
175
+ position: absolute;
176
+ pointer-events: none;
177
+ z-index: 2;
178
+ text-align: center;
179
+ border: none;
180
+ box-shadow: none;
181
+ background: none;
182
+ }
183
+ .ab-replace > .ab-button.ab-button-select > select {
184
+ z-index: 1;
185
+ opacity: 0;
186
+ }
187
+ .ab-replace > .ab-button.ab-button-select option {
188
+ padding: 0 10px;
189
+ }
190
+ .ab-replace img.cm-widgetBuffer {
191
+ height: 2px;
192
+ }
193
+
194
+ .ab-note .markdown-rendered table {
195
+ min-width: 0;
196
+ }
197
+ .ab-note .markdown-rendered ul li,
198
+ .ab-note .markdown-rendered ol li {
199
+ margin-bottom: 0;
200
+ }
201
+ .ab-note table {
202
+ display: table;
203
+ width: 100%;
204
+ }
205
+ .ab-note table[modeT=true] tr {
206
+ display: block;
207
+ float: left;
208
+ }
209
+ .ab-note table[modeT=true] th, .ab-note table[modeT=true] td {
210
+ display: block;
211
+ }
212
+ .ab-note pre.ab-mermaid-raw {
213
+ border: solid 1px;
214
+ border-radius: 6px;
215
+ margin-top: 0;
216
+ }
217
+ .ab-note .ab-markmap-svg {
218
+ border: solid 1px;
219
+ border-radius: 6px;
220
+ width: 100%;
221
+ }
222
+ .ab-note .ab-tab-root .ab-tab-nav {
223
+ box-sizing: border-box;
224
+ border: 2px solid var(--ab-tab-root-bd-color);
225
+ background-color: var(--ab-tab-root-bd-color);
226
+ color: var(--ab-tab-root-tx-color);
227
+ border-bottom: none;
228
+ border-radius: 10px 10px 0 0;
229
+ padding-right: 60px;
230
+ }
231
+ .ab-note .ab-tab-root .ab-tab-nav .ab-tab-nav-item {
232
+ height: 38px;
233
+ box-shadow: none;
234
+ border: none;
235
+ border-radius: 10px 10px 0 0;
236
+ padding-left: 20px;
237
+ padding-right: 20px;
238
+ font-size: 0.9em;
239
+ font-weight: bold;
240
+ cursor: pointer;
241
+ }
242
+ .ab-note .ab-tab-root .ab-tab-nav .ab-tab-nav-item[is_activate=false] {
243
+ background-color: var(--ab-tab-root-bd-color);
244
+ color: var(--ab-tab-root-tx-color);
245
+ }
246
+ .ab-note .ab-tab-root .ab-tab-nav .ab-tab-nav-item[is_activate=true] {
247
+ background-color: var(--ab-tab-root-bg-color);
248
+ color: var(--ab-tab-root-tx-color);
249
+ }
250
+ .ab-note .ab-tab-root .ab-tab-content {
251
+ border: 2px solid var(--ab-tab-root-bd-color);
252
+ background-color: var(--ab-tab-root-bg-color);
253
+ color: var(--ab-tab-root-tx-color);
254
+ border-top: none;
255
+ padding: 10px 20px;
256
+ }
257
+ .ab-note td > p:first-child, .ab-note th > p:first-child,
258
+ .ab-note td > ul:first-child, .ab-note th > ul:first-child,
259
+ .ab-note .ab-list-table-witharrow > p:first-child,
260
+ .ab-note .ab-nodes-content > p:first-child,
261
+ .ab-note .ab-items-item > div > p:first-child, .ab-note .ab-items-item > div > ul:first-child,
262
+ .ab-note td > div > p:first-child, .ab-note th > div > p:first-child,
263
+ .ab-note td > div > ul:first-child, .ab-note th > div > ul:first-child,
264
+ .ab-note .ab-list-table-witharrow > div > p:first-child,
265
+ .ab-note .ab-nodes-content > div > p:first-child,
266
+ .ab-note .ab-items-item > div > div > p:first-child, .ab-note .ab-items-item > div > div > ul:first-child {
267
+ margin-top: 2px;
268
+ }
269
+ .ab-note td > p:last-child, .ab-note th > p:last-child,
270
+ .ab-note td > ul:last-child, .ab-note th > ul:last-child,
271
+ .ab-note .ab-list-table-witharrow > p:last-child,
272
+ .ab-note .ab-nodes-content > p:last-child,
273
+ .ab-note .ab-items-item > div > p:last-child, .ab-note .ab-items-item > div > ul:last-child,
274
+ .ab-note td > div > p:last-child, .ab-note th > div > p:last-child,
275
+ .ab-note td > div > ul:last-child, .ab-note th > div > ul:last-child,
276
+ .ab-note .ab-list-table-witharrow > div > p:last-child,
277
+ .ab-note .ab-nodes-content > div > p:last-child,
278
+ .ab-note .ab-items-item > div > div > p:last-child, .ab-note .ab-items-item > div > div > ul:last-child {
279
+ margin-bottom: 2px;
280
+ }
281
+ .ab-note table.ab-table {
282
+ border-collapse: collapse;
283
+ }
284
+ .ab-note table.ab-table td, .ab-note table.ab-table th {
285
+ white-space: normal;
286
+ overflow-wrap: break-word;
287
+ padding: 2px 5px;
288
+ border: solid var(--ab-table-border-width) var(--ab-table-border-color);
289
+ }
290
+ .ab-note table.ab-table td code, .ab-note table.ab-table th code {
291
+ white-space: pre;
292
+ }
293
+ .ab-note table.ab-table tr {
294
+ background: none;
295
+ }
296
+ .ab-note .ab-branch-table.ab-table-likelist td {
297
+ border: none;
298
+ padding-bottom: 10px;
299
+ vertical-align: top;
300
+ box-sizing: border-box;
301
+ }
302
+ .ab-note .ab-branch-table.ab-table-likelist td[col_index="0"] {
303
+ padding-right: 8px;
304
+ padding-left: 20px;
305
+ position: relative;
306
+ }
307
+ .ab-note .ab-branch-table.ab-table-likelist td[col_index="0"]::before {
308
+ position: absolute;
309
+ top: 14px;
310
+ transform: translateY(-50%);
311
+ width: 5px;
312
+ height: 5px;
313
+ border: none;
314
+ left: 6px;
315
+ content: "";
316
+ border-radius: 50%;
317
+ background-color: currentColor;
318
+ }
319
+ .ab-note .ab-branch-table.ab-table-likelist td[col_index="0"]::after {
320
+ content: "";
321
+ position: absolute;
322
+ top: 3px;
323
+ bottom: 5px;
324
+ right: 0;
325
+ border-right: 1px solid currentColor;
326
+ pointer-events: none;
327
+ }
328
+ .ab-note table.ab-list-table .ab-foldable-tr > td:first-child > div {
329
+ padding-left: 15px;
330
+ position: relative;
331
+ }
332
+ .ab-note table.ab-list-table .ab-foldable-tr[able_fold=true] > td:first-child > div::before {
333
+ content: "";
334
+ position: absolute;
335
+ width: 0;
336
+ height: 0;
337
+ }
338
+ .ab-note table.ab-list-table .ab-foldable-tr[able_fold=true][is_fold=true] > td:first-child > div:first-child::before {
339
+ top: 5px;
340
+ left: 2px;
341
+ border: 6px solid transparent;
342
+ border-left-color: currentColor;
343
+ cursor: pointer;
344
+ }
345
+ .ab-note table.ab-list-table .ab-foldable-tr[able_fold=true][is_fold=false] > td:first-child > div:first-child::before {
346
+ top: 9px;
347
+ left: -1px;
348
+ border: 6px solid transparent;
349
+ border-top-color: currentColor;
350
+ cursor: pointer;
351
+ }
352
+ .ab-note table.ab-list-table .ab-foldable-tr[tr_level="0"] > td:first-child {
353
+ padding-left: 0px;
354
+ }
355
+ .ab-note table.ab-list-table .ab-foldable-tr[tr_level="1"] > td:first-child {
356
+ padding-left: 24px;
357
+ }
358
+ .ab-note table.ab-list-table .ab-foldable-tr[tr_level="2"] > td:first-child {
359
+ padding-left: 48px;
360
+ }
361
+ .ab-note table.ab-list-table .ab-foldable-tr[tr_level="3"] > td:first-child {
362
+ padding-left: 72px;
363
+ }
364
+ .ab-note table.ab-list-table .ab-foldable-tr[tr_level="4"] > td:first-child {
365
+ padding-left: 96px;
366
+ }
367
+ .ab-note table.ab-list-table .ab-foldable-tr[tr_level="5"] > td:first-child {
368
+ padding-left: 120px;
369
+ }
370
+ .ab-note table.ab-list-table .ab-foldable-tr[tr_level="6"] > td:first-child {
371
+ padding-left: 144px;
372
+ }
373
+ .ab-note table.ab-list-table .ab-foldable-tr[tr_level="7"] > td:first-child {
374
+ padding-left: 168px;
375
+ }
376
+ .ab-note table.ab-list-table .ab-foldable-tr[tr_level="8"] > td:first-child {
377
+ padding-left: 192px;
378
+ }
379
+ .ab-note table.ab-list-table .ab-foldable-tr[tr_level="9"] > td:first-child {
380
+ padding-left: 216px;
381
+ }
382
+ .ab-note table.ab-list-table .ab-foldable-tr[tr_level="10"] > td:first-child {
383
+ padding-left: 240px;
384
+ }
385
+ .ab-note table.ab-list-table .ab-foldable-tr[tr_level="11"] > td:first-child {
386
+ padding-left: 264px;
387
+ }
388
+ .ab-note table.ab-list-table .ab-foldable-tr[tr_level="12"] > td:first-child {
389
+ padding-left: 288px;
390
+ }
391
+ .ab-note table.ab-list-table .ab-foldable-tr[tr_level="13"] > td:first-child {
392
+ padding-left: 312px;
393
+ }
394
+ .ab-note table.ab-list-table .ab-foldable-tr[tr_level="14"] > td:first-child {
395
+ padding-left: 336px;
396
+ }
397
+ .ab-note table.ab-list-table .ab-foldable-tr[tr_level="15"] > td:first-child {
398
+ padding-left: 360px;
399
+ }
400
+ .ab-note table.ab-list-table .ab-foldable-tr[tr_level="16"] > td:first-child {
401
+ padding-left: 384px;
402
+ }
403
+ .ab-note table.ab-list-table.ab-listtable-likelist {
404
+ margin-left: 24px;
405
+ }
406
+ .ab-note table.ab-list-table.ab-listtable-likelist td {
407
+ border: none;
408
+ vertical-align: top;
409
+ }
410
+ .ab-note table.ab-list-table.ab-listtable-likelist .ab-foldable-tr > td:first-child > div.ab-list-table-witharrow {
411
+ padding: 0 !important;
412
+ padding-right: 8px;
413
+ padding-left: 20px;
414
+ position: relative;
415
+ display: inline-block;
416
+ }
417
+ .ab-note table.ab-list-table.ab-listtable-likelist .ab-foldable-tr > td:first-child > div.ab-list-table-witharrow::before {
418
+ border: solid 1px !important;
419
+ background: none !important;
420
+ width: 6px !important;
421
+ height: 6px !important;
422
+ box-sizing: border-box;
423
+ position: absolute;
424
+ top: 12px !important;
425
+ transform: translateY(-50%) !important;
426
+ left: -14px !important;
427
+ content: "";
428
+ border-radius: 50%;
429
+ }
430
+ .ab-note table.ab-list-table.ab-listtable-likelist .ab-foldable-tr[tr_level="0"] > td:first-child > div.ab-list-table-witharrow::before {
431
+ border: 0 !important;
432
+ background-color: currentColor !important;
433
+ width: 6px !important;
434
+ height: 6px !important;
435
+ }
436
+ .ab-note table.ab-list-table.ab-table-folder .ab-foldable-tr td:first-child {
437
+ white-space: pre;
438
+ vertical-align: top;
439
+ }
440
+ .ab-note table.ab-list-table.ab-table-folder .ab-foldable-tr > td > div {
441
+ display: inline-block;
442
+ vertical-align: top;
443
+ }
444
+ .ab-note table.ab-list-table.ab-table-folder .ab-foldable-tr > td > div.ab-list-table-witharrow {
445
+ padding-left: 6px;
446
+ }
447
+ .ab-note table.ab-list-table.ab-table-folder .ab-foldable-tr .ab-list-table-svg {
448
+ padding-top: 4px;
449
+ }
450
+ .ab-note table.ab-list-table.ab-table-folder .ab-foldable-tr .ab-list-table-svg svg {
451
+ width: 14px;
452
+ height: 14px;
453
+ fill: var(--ab-bright-color);
454
+ }
455
+ .ab-note table.ab-list-table.ab-table-folder .ab-foldable-tr td:first-child {
456
+ border: none;
457
+ }
458
+ .ab-note table.ab-list-table.ab-table-folder .ab-foldable-tr td {
459
+ border-left: none;
460
+ border-right: none;
461
+ border-bottom: none;
462
+ }
463
+ .ab-note .ab-list-table-parent {
464
+ position: relative;
465
+ }
466
+ .ab-note .ab-list-table-parent .ab-table-fold {
467
+ position: absolute;
468
+ bottom: 0;
469
+ right: 0;
470
+ background: none;
471
+ border: none;
472
+ color: currentColor;
473
+ cursor: pointer;
474
+ padding: 2px 6px;
475
+ }
476
+ .ab-note table.ab-table-timeline td {
477
+ border-right: none;
478
+ padding-left: 20px;
479
+ }
480
+ .ab-note table.ab-table-timeline td[col_index="0"] {
481
+ border: none;
482
+ border-left: none;
483
+ border-right: solid 2px;
484
+ padding-left: 5px;
485
+ padding-right: 20px;
486
+ color: var(--ab-bright-color);
487
+ position: relative;
488
+ overflow: visible;
489
+ }
490
+ .ab-note table.ab-table-timeline td[col_index="0"]::after {
491
+ position: absolute;
492
+ top: 1em;
493
+ transform: translateY(-50%);
494
+ width: 10px;
495
+ height: 10px;
496
+ right: -8px;
497
+ content: "";
498
+ background-color: var(--ab-bright-color);
499
+ border-radius: 50%;
500
+ border: solid 2px;
501
+ }
502
+ .ab-note table.ab-table-timeline tr:first-child td {
503
+ border-top: none;
504
+ }
505
+ .ab-note table.ab-table-timeline tr:last-child td {
506
+ border-bottom: none;
507
+ }
508
+ .ab-note .markdown-rendered.ab-faq-content p:first-child {
509
+ margin-top: 0;
510
+ }
511
+ .ab-note .markdown-rendered.ab-faq-content p:last-child {
512
+ margin-bottom: 0;
513
+ }
514
+ .ab-note .ab-faq .ab-faq-line {
515
+ line-height: 30px;
516
+ width: 100%;
517
+ padding: 0 15px 0 15px;
518
+ clear: both;
519
+ overflow-y: auto;
520
+ }
521
+ .ab-note .ab-faq .ab-faq-line .ab-faq-bubble {
522
+ float: left;
523
+ width: calc(100% - 75px);
524
+ }
525
+ .ab-note .ab-faq .ab-faq-line.ab-faq-q,
526
+ .ab-note .ab-faq .ab-faq-line.ab-faq-Q {
527
+ background-color: #1e53ee;
528
+ border-radius: 12px 12px 0 0;
529
+ }
530
+ .ab-note .ab-faq .ab-faq-line.ab-faq-a,
531
+ .ab-note .ab-faq .ab-faq-line.ab-faq-A {
532
+ background-color: #f5f8fe;
533
+ border-radius: 0 0 12px 12px;
534
+ color: #a994a6;
535
+ margin-bottom: 20px;
536
+ }
537
+ .ab-note .ab-faq .ab-faq-line::before {
538
+ float: left;
539
+ width: 24px;
540
+ }
541
+ .ab-note .ab-faq .ab-faq-line.ab-faq-q::before,
542
+ .ab-note .ab-faq .ab-faq-line.ab-faq-Q::before {
543
+ content: "Q";
544
+ }
545
+ .ab-note .ab-faq .ab-faq-line.ab-faq-a::before,
546
+ .ab-note .ab-faq .ab-faq-line.ab-faq-A::before {
547
+ content: "A";
548
+ }
549
+ .ab-note .ab-deco-fold .ab-deco-fold-button {
550
+ color: var(--ab-bright-color);
551
+ border-bottom: 1px solid var(--ab-bright-color);
552
+ height: 30px;
553
+ line-height: 30px;
554
+ padding-left: 6px;
555
+ width: 100%;
556
+ }
557
+ .ab-note .ab-deco-scroll.ab-deco-scroll-y {
558
+ overflow-y: auto;
559
+ }
560
+ .ab-note .ab-deco-scroll.ab-deco-scroll-x {
561
+ overflow-x: auto;
562
+ white-space: pre !important;
563
+ }
564
+ .ab-note .ab-deco-scroll.ab-deco-scroll-x th, .ab-note .ab-deco-scroll.ab-deco-scroll-x td {
565
+ white-space: pre !important;
566
+ }
567
+ .ab-note .ab-deco-overfold {
568
+ overflow-y: hidden;
569
+ position: relative;
570
+ }
571
+ .ab-note .ab-deco-overfold .ab-deco-overfold-button {
572
+ position: absolute;
573
+ bottom: 0;
574
+ height: 40px;
575
+ line-height: 40px;
576
+ width: 100%;
577
+ text-align: center;
578
+ box-sizing: content-box;
579
+ }
580
+ .ab-note .ab-deco-overfold .ab-deco-overfold-content {
581
+ margin-bottom: 40px;
582
+ }
583
+ .ab-note .ab-deco-overfold[is-fold=true] .ab-deco-overfold-button {
584
+ padding-top: 60px;
585
+ background-image: linear-gradient(-180deg, rgba(24, 26, 27, 0) 0%, rgb(24, 26, 27) 100%);
586
+ }
587
+ .ab-note .ab-deco-heimu, .ab-note .ab-deco-heimu a {
588
+ background-color: #252525;
589
+ color: #252525;
590
+ text-shadow: none;
591
+ }
592
+ .ab-note .ab-deco-heimu::-moz-selection, .ab-note .ab-deco-heimu a::-moz-selection {
593
+ background: #9ab0c0;
594
+ color: #fff;
595
+ }
596
+ .ab-note .ab-deco-heimu::selection, .ab-note .ab-deco-heimu a::selection {
597
+ background: #9ab0c0;
598
+ color: #fff;
599
+ }
600
+ .ab-note .ab-deco-heimu:hover, .ab-note .ab-deco-heimu:hover a {
601
+ transition: color 0.13s linear;
602
+ color: #fff;
603
+ }
604
+ .ab-note .ab-deco-title {
605
+ width: 100%;
606
+ }
607
+ .ab-note .ab-deco-title p {
608
+ font-size: 17px;
609
+ line-height: 17px;
610
+ margin: 0;
611
+ margin-bottom: 10px;
612
+ }
613
+ .ab-note .ab-deco-title pre {
614
+ margin: 0;
615
+ }
616
+ .ab-note .ab-deco-title .ab-deco-title-title {
617
+ height: auto;
618
+ }
619
+ .ab-note .ab-deco-title .ab-deco-title-title[title-type=table] > p {
620
+ font-weight: bold;
621
+ text-align: center;
622
+ margin-top: 10px;
623
+ margin-bottom: 16px;
624
+ }
625
+ .ab-note .ab-deco-title .ab-deco-title-title[title-type=pre] > p {
626
+ display: inline;
627
+ font-size: 16px;
628
+ font-weight: 400;
629
+ background-color: var(--pre-background-color);
630
+ padding: 8px 16px 11px 16px;
631
+ border-radius: 8px 8px 0 0;
632
+ margin: 0;
633
+ }
634
+ .ab-note .ab-deco-title .ab-deco-title-title[title-type=quote] > p {
635
+ font-weight: bold;
636
+ margin-bottom: 20px;
637
+ }
638
+ .ab-note .ab-deco-title .ab-deco-title-title[title-type=ul] > p {
639
+ font-weight: bold;
640
+ }
641
+ .ab-note .ab-items {
642
+ white-space: normal;
643
+ overflow-wrap: break-word;
644
+ }
645
+ .ab-note .ab-items code {
646
+ white-space: pre;
647
+ }
648
+ .ab-note .ab-items.ab-col {
649
+ display: flex;
650
+ flex-wrap: wrap;
651
+ gap: 0rem;
652
+ }
653
+ .ab-note .ab-items.ab-col .ab-items-item {
654
+ flex: 1 0 calc(33.33% - 1rem);
655
+ box-sizing: border-box;
656
+ padding: 10px;
657
+ }
658
+ .ab-note .ab-items.ab-card .ab-items-item {
659
+ box-sizing: border-box;
660
+ color: var(--ab-tab-root-tx-color);
661
+ background-color: var(--ab-tab-root-bg-color);
662
+ border: solid 2px var(--ab-tab-root-bd-color);
663
+ border-radius: 6px;
664
+ box-shadow: #34343f;
665
+ margin-bottom: 10px;
666
+ padding: 5px 10px;
667
+ }
668
+ .ab-note .ab-items.ab-card .ab-items-item > div {
669
+ padding-top: 2px;
670
+ padding-bottom: 2px;
671
+ }
672
+ .ab-note .ab-items.ab-card .ab-items-item .ab-items-title {
673
+ border-bottom: 1px solid var(--ab-bright-color);
674
+ }
675
+ .ab-note .ab-items.ab-card.ab-lay-vfall:not(.ab-hfall) {
676
+ /*display: flex; // Flexbox 布局
677
+ flex-wrap: wrap; // 元素换行显示
678
+ gap: 1rem; // 间隙
679
+ .ab-items-item {
680
+ flex: 1 0 calc(25% - 1rem); // 每个项目的宽度大约为容器的 33.33%，减去间隙的一半
681
+ }*/
682
+ -moz-column-count: 4;
683
+ column-count: 4;
684
+ -moz-column-gap: 10px;
685
+ column-gap: 10px;
686
+ /*display: grid;
687
+ grid-template-columns: repeat(4, 1fr);
688
+ grid-gap: 1rem; // 间隙
689
+ grid-template-rows: masonry; // 兼容有问题，只有火狐支持，还tm的要开选项
690
+ .ab-items-item {
691
+ width: 100%;
692
+ display: block;
693
+ }*/
694
+ /*display: flex; // Flexbox 布局
695
+ flex-wrap: wrap; // 元素换行显示
696
+ // gap: 1rem; // 间隙
697
+ flex-direction: column; // 按列填充
698
+ .ab-items-item {
699
+ position: relative;
700
+ width: calc(100% / 4);
701
+ padding: 5px;
702
+ box-sizing: border-box;
703
+ &:nth-child(4n+1){ order: 1; }
704
+ &:nth-child(4n+2){ order: 2; }
705
+ &:nth-child(4n+3){ order: 3; }
706
+ &:nth-child(4n+0){ order: 4; }
707
+ }*/
708
+ }
709
+ .ab-note .ab-items.ab-card.ab-lay-vfall:not(.ab-hfall) .ab-items-item {
710
+ -moz-column-break-inside: avoid;
711
+ break-inside: avoid-column;
712
+ }
713
+ .ab-note .ab-items.ab-card.ab-lay-hfall {
714
+ display: flex;
715
+ flex-wrap: wrap;
716
+ flex-direction: row;
717
+ }
718
+ .ab-note .ab-items.ab-card.ab-lay-hfall .ab-items-item .ab-items-title {
719
+ color: currentColor;
720
+ border-bottom: none;
721
+ }
722
+ .ab-note .ab-items.ab-card.ab-lay-hfall::after {
723
+ content: "";
724
+ flex-grow: 99999;
725
+ }
726
+ .ab-note .ab-items.ab-card.ab-lay-hfall > .ab-items-item {
727
+ flex-grow: 1;
728
+ margin: 5px;
729
+ padding: 0 10px;
730
+ position: relative;
731
+ overflow: hidden;
732
+ }
733
+ .ab-note .ab-items.ab-card.ab-lay-hfall > .ab-items-item img {
734
+ max-width: 100%;
735
+ min-width: 100%;
736
+ height: 200px;
737
+ margin: 0;
738
+ -o-object-fit: cover;
739
+ object-fit: cover;
740
+ vertical-align: bottom;
741
+ }
742
+ .ab-note .ab-items.ab-card.ab-lay-hfall > .ab-items-item p {
743
+ max-width: 300px;
744
+ margin: 0;
745
+ }
746
+ .ab-note .ab-items.ab-card.ab-lay-hfall > .ab-items-item > .ab-items-content {
747
+ height: 100%;
748
+ min-width: 100%;
749
+ }
750
+ .ab-note .ab-items.ab-card.ab-lay-grid {
751
+ display: grid;
752
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
753
+ gap: 0px !important;
754
+ margin: 0 auto;
755
+ }
756
+ .ab-note .ab-items.ab-card.ab-lay-grid::after {
757
+ content: "";
758
+ flex-grow: 99999;
759
+ }
760
+ .ab-note .ab-items.ab-card.ab-lay-grid > .ab-items-item {
761
+ position: relative;
762
+ margin: 5px;
763
+ display: flex;
764
+ flex-direction: column;
765
+ align-items: center;
766
+ text-align: center; /* 确保文字居中 */
767
+ }
768
+ .ab-note .ab-items.ab-card.ab-lay-grid > .ab-items-item img {
769
+ max-width: 200px;
770
+ max-height: 200px;
771
+ width: 100%; /* 确保图片宽度为100%，适应网格布局 */
772
+ height: auto;
773
+ margin: 0;
774
+ }
775
+ .ab-note .ab-items.ab-card.ab-lay-grid > .ab-items-item > .ab-items-content {
776
+ width: 100%;
777
+ padding: 0;
778
+ }
779
+ .ab-note .ab-items.ab-card.ab-deco-scroll-x {
780
+ margin: 0 auto;
781
+ display: flex;
782
+ flex-wrap: nowrap;
783
+ overflow-x: auto;
784
+ }
785
+ .ab-note .ab-items.ab-card.ab-deco-scroll-x .ab-items-item {
786
+ flex: 0 0 auto;
787
+ width: 170px;
788
+ }
789
+ .ab-note .ab-items > .ab-items-item {
790
+ overflow-x: auto;
791
+ }
792
+ .ab-note .ab-items.ab-col1 {
793
+ -moz-column-count: 1 !important;
794
+ column-count: 1 !important;
795
+ grid-template-columns: repeat(1, 1fr) !important;
796
+ }
797
+ .ab-note .ab-items.ab-col2 {
798
+ -moz-column-count: 2 !important;
799
+ column-count: 2 !important;
800
+ grid-template-columns: repeat(2, 1fr) !important;
801
+ }
802
+ .ab-note .ab-items.ab-col3 {
803
+ -moz-column-count: 3 !important;
804
+ column-count: 3 !important;
805
+ grid-template-columns: repeat(3, 1fr) !important;
806
+ }
807
+ .ab-note .ab-items.ab-col4 {
808
+ -moz-column-count: 4 !important;
809
+ column-count: 4 !important;
810
+ grid-template-columns: repeat(4, 1fr) !important;
811
+ }
812
+ .ab-note .ab-items.ab-col5 {
813
+ -moz-column-count: 5 !important;
814
+ column-count: 5 !important;
815
+ grid-template-columns: repeat(5, 1fr) !important;
816
+ }
817
+ .ab-note .ab-items.ab-col6 {
818
+ -moz-column-count: 6 !important;
819
+ column-count: 6 !important;
820
+ grid-template-columns: repeat(6, 1fr) !important;
821
+ }
822
+ .ab-note .ab-items.ab-col7 {
823
+ -moz-column-count: 7 !important;
824
+ column-count: 7 !important;
825
+ grid-template-columns: repeat(7, 1fr) !important;
826
+ }
827
+ .ab-note .ab-items.ab-col8 {
828
+ -moz-column-count: 8 !important;
829
+ column-count: 8 !important;
830
+ grid-template-columns: repeat(8, 1fr) !important;
831
+ }
832
+ .ab-note .ab-nodes {
833
+ white-space: normal;
834
+ overflow-wrap: break-word;
835
+ }
836
+ .ab-note .ab-nodes code {
837
+ white-space: pre;
838
+ }
839
+ .ab-note .ab-nodes .ab-nodes-content {
840
+ display: inline-block;
841
+ background-color: rgba(100, 100, 100, 0.25);
842
+ padding: 2px 10px;
843
+ margin-left: 5px;
844
+ }
845
+ .ab-note .ab-nodes .ab-nodes-children {
846
+ display: flex;
847
+ flex-direction: column;
848
+ gap: 16px;
849
+ padding-left: 0.8em;
850
+ position: relative;
851
+ }
852
+ .ab-note .ab-nodes .ab-nodes-children .ab-nodes-bracket {
853
+ content: "";
854
+ box-sizing: border-box;
855
+ position: absolute;
856
+ width: 8px;
857
+ height: 8px;
858
+ top: calc(50% - 4px);
859
+ left: -6px;
860
+ clip-path: polygon(100% 0, 100% 100%, 13.4% 50%);
861
+ background-color: currentColor;
862
+ }
863
+ .ab-note .ab-nodes .ab-nodes-children .ab-nodes-bracket2 {
864
+ content: "";
865
+ box-sizing: border-box;
866
+ position: absolute;
867
+ width: 10px;
868
+ height: calc(100% - 8px);
869
+ top: 4px;
870
+ left: 0;
871
+ border-radius: 10px 0 0 10px;
872
+ border-left: 2px solid currentColor;
873
+ border-top: 2px solid currentColor;
874
+ border-bottom: 2px solid currentColor;
875
+ }
876
+ .ab-note .ab-nodes .ab-nodes-children .ab-nodes-node {
877
+ display: flex;
878
+ flex-direction: row;
879
+ align-items: center;
880
+ gap: 1.2em;
881
+ }
882
+ .ab-note .ab-nodes > .ab-nodes-node > .ab-nodes-bracket {
883
+ display: none;
884
+ }
885
+ .ab-note .ab-nodes > .ab-nodes-node > .ab-nodes-bracket2 {
886
+ display: none;
887
+ }
888
+ .ab-note .ab-nodes .ab-nodes-node[has_children=false] > .ab-nodes-children {
889
+ display: none;
890
+ }
891
+ .ab-note .ab-nodes.min .ab-nodes-content {
892
+ padding: 0;
893
+ background: none;
894
+ border-bottom: solid 1px currentColor;
895
+ }
896
+ .ab-note .ab-nodes.min .ab-nodes-children {
897
+ gap: 2px;
898
+ }
899
+ .ab-note .ab-nodes.min .ab-nodes-children .ab-nodes-bracket2 {
900
+ border-width: 1px;
901
+ }
902
+ .ab-note .ab-nodes.min .ab-nodes-children .ab-nodes-bracket {
903
+ display: none;
904
+ width: 6px;
905
+ height: 6px;
906
+ top: calc(50% - 4px);
907
+ left: -6px;
908
+ }
909
+ .ab-note .ab-nodes.min .ab-nodes-content {
910
+ padding-right: 1.2em;
911
+ }
912
+ .ab-note .ab-nodes.min .ab-nodes-children .ab-nodes-node {
913
+ gap: 0;
914
+ }
915
+ .ab-note .ab-nodes-node[has_children=false] > .ab-nodes-content {
916
+ padding-right: 4px;
917
+ }
918
+ .ab-note .ab-nodes.min > .ab-nodes-children > .ab-nodes-node:nth-child(8n+1) {
919
+ --node-color: var(--color-red);
920
+ }
921
+ .ab-note .ab-nodes.min > .ab-nodes-children > .ab-nodes-node:nth-child(8n+2) {
922
+ --node-color: var(--color-orange);
923
+ }
924
+ .ab-note .ab-nodes.min > .ab-nodes-children > .ab-nodes-node:nth-child(8n+3) {
925
+ --node-color: var(--color-yellow);
926
+ }
927
+ .ab-note .ab-nodes.min > .ab-nodes-children > .ab-nodes-node:nth-child(8n+4) {
928
+ --node-color: var(--color-green);
929
+ }
930
+ .ab-note .ab-nodes.min > .ab-nodes-children > .ab-nodes-node:nth-child(8n+5) {
931
+ --node-color: var(--color-cyan);
932
+ }
933
+ .ab-note .ab-nodes.min > .ab-nodes-children > .ab-nodes-node:nth-child(8n+6) {
934
+ --node-color: var(--color-blue);
935
+ }
936
+ .ab-note .ab-nodes.min > .ab-nodes-children > .ab-nodes-node:nth-child(8n+7) {
937
+ --node-color: var(--color-purple);
938
+ }
939
+ .ab-note .ab-nodes.min > .ab-nodes-children > .ab-nodes-node:nth-child(8n+0) {
940
+ --node-color: var(--color-pink);
941
+ }
942
+ .ab-note .ab-nodes.min > .ab-nodes-children > .ab-nodes-node .ab-nodes-content, .ab-note .ab-nodes.min > .ab-nodes-children > .ab-nodes-node .ab-nodes-bracket, .ab-note .ab-nodes.min > .ab-nodes-children > .ab-nodes-node .ab-nodes-bracket2 {
943
+ border-color: var(--node-color);
944
+ }
945
+ .ab-note .ab-nodes.min > .ab-nodes-children > .ab-nodes-node .ab-nodes-bracket {
946
+ background-color: var(--node-color);
947
+ }
948
+ .ab-note .ab-nodes.scroll {
949
+ overflow-x: auto;
950
+ }
951
+ .ab-note .ab-nodes.scroll .ab-nodes-content {
952
+ white-space: nowrap;
953
+ max-width: 300px;
954
+ overflow-x: auto;
955
+ }
956
+ .ab-note table.scroll {
957
+ overflow-x: auto;
958
+ }
959
+ .ab-note table.scroll td {
960
+ white-space: nowrap;
961
+ max-width: 300px;
962
+ overflow-x: auto;
963
+ }
964
+
965
+ div.md-table-fig1 {
966
+ overflow-x: scroll;
967
+ transform: scaleY(-1);
968
+ }
969
+ div.md-table-fig1 table.ab-setting.md-table-fig2 {
970
+ overflow-x: scroll;
971
+ text-overflow: clip !important;
972
+ transform: scaleY(-1);
973
+ white-space: pre-wrap;
974
+ }
975
+
976
+ .ab-custom-text-red {
977
+ color: red !important;
978
+ }
979
+
980
+ .ab-custom-text-orange {
981
+ color: orange !important;
982
+ }
983
+
984
+ .ab-custom-text-yellow {
985
+ color: yellow !important;
986
+ }
987
+
988
+ .ab-custom-text-green {
989
+ color: green !important;
990
+ }
991
+
992
+ .ab-custom-text-cyan {
993
+ color: cyan !important;
994
+ }
995
+
996
+ .ab-custom-text-blue {
997
+ color: blue !important;
998
+ }
999
+
1000
+ .ab-custom-text-purple {
1001
+ color: purple !important;
1002
+ }
1003
+
1004
+ .ab-custom-text-white {
1005
+ color: white !important;
1006
+ }
1007
+
1008
+ .ab-custom-text-black {
1009
+ color: black !important;
1010
+ }
1011
+
1012
+ .ab-custom-bg-red {
1013
+ background-color: red !important;
1014
+ }
1015
+
1016
+ .ab-custom-bg-orange {
1017
+ background-color: orange !important;
1018
+ }
1019
+
1020
+ .ab-custom-bg-yellow {
1021
+ background-color: yellow !important;
1022
+ }
1023
+
1024
+ .ab-custom-bg-green {
1025
+ background-color: green !important;
1026
+ }
1027
+
1028
+ .ab-custom-bg-cyan {
1029
+ background-color: cyan !important;
1030
+ }
1031
+
1032
+ .ab-custom-bg-blue {
1033
+ background-color: blue !important;
1034
+ }
1035
+
1036
+ .ab-custom-bg-purple {
1037
+ background-color: purple !important;
1038
+ }
1039
+
1040
+ .ab-custom-bg-white {
1041
+ background-color: white !important;
1042
+ }
1043
+
1044
+ .ab-custom-bg-black {
1045
+ background-color: black !important;
1046
+ }
1047
+
1048
+ .ab-custom-dire-top * {
1049
+ vertical-align: top !important;
1050
+ }
1051
+
1052
+ .ab-custom-dire-down * {
1053
+ vertical-align: bottom !important;
1054
+ }
1055
+
1056
+ .ab-custom-dire-left * {
1057
+ text-align: left !important;
1058
+ }
1059
+
1060
+ .ab-custom-dire-right * {
1061
+ text-align: right !important;
1062
+ }
1063
+
1064
+ .ab-custom-dire-center * {
1065
+ vertical-align: middle !important;
1066
+ text-align: center !important;
1067
+ }
1068
+
1069
+ .ab-custom-dire-hcenter * {
1070
+ text-align: center !important;
1071
+ }
1072
+
1073
+ .ab-custom-dire-vcenter * {
1074
+ vertical-align: middle !important;
1075
+ }
1076
+
1077
+ .ab-custom-dire-justify * {
1078
+ text-align: justify !important;
1079
+ }
1080
+
1081
+ .ab-custom-font-large {
1082
+ font-size: large !important;
1083
+ }
1084
+
1085
+ .ab-custom-font-largex {
1086
+ font-size: x-large !important;
1087
+ }
1088
+
1089
+ .ab-custom-font-largexx {
1090
+ font-size: xx-large !important;
1091
+ }
1092
+
1093
+ .ab-custom-font-small {
1094
+ font-size: small !important;
1095
+ }
1096
+
1097
+ .ab-custom-font-smallx {
1098
+ font-size: x-small !important;
1099
+ }
1100
+
1101
+ .ab-custom-font-smallxx {
1102
+ font-size: xx-small !important;
1103
+ }
1104
+
1105
+ .ab-custom-font-bold {
1106
+ font-weight: bold !important;
1107
+ }
1108
+
1109
+ table.ab-table-fc th[col_index="0"], table.ab-table-fc td[col_index="0"] {
1110
+ white-space: pre;
1111
+ font-weight: 500;
1112
+ vertical-align: top;
1113
+ width: 0px;
1114
+ }
1115
+
1116
+ .ab-table-fc > table th:first-child, .ab-table-fc > table td:first-child {
1117
+ white-space: pre;
1118
+ font-weight: 500;
1119
+ vertical-align: top;
1120
+ width: 0px;
1121
+ }
1122
+
1123
+ .ab-custom-td-nowrap td, .ab-custom-td1-nowrap tr > td:first-child {
1124
+ white-space: pre !important;
1125
+ }
1126
+
1127
+ .ab-custom-td-wrap td, .ab-custom-td1-wrap tr > td:first-child {
1128
+ white-space: normal !important;
1129
+ overflow-wrap: break-word;
1130
+ }
1131
+
1132
+ .ab-custom-td-0 td, .ab-custom-td1-0 tr > td:first-child {
1133
+ width: 0px !important;
1134
+ }
1135
+
1136
+ .ab-custom-td-100 td, .ab-custom-td1-100 tr > td:first-child {
1137
+ width: 100px !important;
1138
+ }
1139
+
1140
+ .ab-custom-td-150 td, .ab-custom-td1-150 tr > td:first-child {
1141
+ width: 150px !important;
1142
+ }
1143
+
1144
+ .ab-custom-td-200 td, .ab-custom-td1-200 tr > td:first-child {
1145
+ width: 200px !important;
1146
+ }
1147
+
1148
+ .ab-custom-td-250 td, .ab-custom-td1-250 tr > td:first-child {
1149
+ width: 250px !important;
1150
+ }
1151
+
1152
+ .ab-custom-td-300 td, .ab-custom-td1-300 tr > td:first-child {
1153
+ width: 300px !important;
1154
+ }
1155
+
1156
+ .ab-custom-td-half td, .ab-custom-td1-half tr > td:first-child {
1157
+ width: 50% !important;
1158
+ }
1159
+
1160
+ .ab-super-width-p {
1161
+ width: var(--ab-width-outer);
1162
+ margin-left: calc((100% - var(--ab-width-outer)) / 2);
1163
+ }
1164
+
1165
+ /**************** CM Style *******************/
1166
+ .ab-line-brace {
1167
+ -webkit-text-decoration: underline 1px red;
1168
+ text-decoration: underline 1px red;
1169
+ }
1170
+
1171
+ .ab-line-list {
1172
+ -webkit-text-decoration: underline 1px cyan;
1173
+ text-decoration: underline 1px cyan;
1174
+ }
1175
+
1176
+ .ab-line-yellow {
1177
+ -webkit-text-decoration: solid underline 1px rgba(0, 255, 0, 0.2);
1178
+ text-decoration: solid underline 1px rgba(0, 255, 0, 0.2);
1179
+ }
1180
+
1181
+ .ab-line-blue {
1182
+ -webkit-text-decoration: underline 1px blue;
1183
+ text-decoration: underline 1px blue;
1184
+ }
1185
+
1186
+ .bright-color {
1187
+ color: var(--ab-bright-color);
1188
+ border-color: var(--ab-bright-color);
1189
+ }
1190
+
1191
+ /**************** 兼容性补充 ******************/
1192
+ .markmap-foreign [aria-hidden=true] {
1193
+ display: none;
1194
+ }
1195
+
1196
+ :is(.markdown-preview-view, .markdown-rendered).is-readable-line-width:not(.matrix) .ab-note :is(.markdown-rendered) {
1197
+ width: auto !important;
1198
+ }
1199
+
1200
+ /**************** PRO *************************/
1201
+ table td div > p:first-child, table td div > ul:first-child, table th div > p:first-child, table th div > ul:first-child {
1202
+ margin-top: 2px;
1203
+ }
1204
+ table td div > p:last-child, table td div > ul:last-child, table th div > p:last-child, table th div > ul:last-child {
1205
+ margin-bottom: 2px;
1206
+ }
1207
+
1208
+ .markdown-rendered tbody > tr > td .markdown-rendered, .markdown-rendered tbody > tr > th .markdown-rendered {
1209
+ white-space: normal;
1204
1210
  }