@anyblock/any-block-core 3.4.9 → 3.4.10

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 (2) hide show
  1. package/package.json +1 -1
  2. package/style/styles.css +1217 -1217
package/style/styles.css CHANGED
@@ -1,1218 +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
- .ab-hide {
82
- display: none;
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;
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;
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;
1218
1218
  }