markdown-it-any-block 3.3.2 → 3.3.3

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