@anyblock/remark-any-block 1.0.2 → 3.4.11

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