@mdzip/editor 2.0.1 → 2.1.0

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 (43) hide show
  1. package/AGENTS.md +1 -1
  2. package/README.md +73 -9
  3. package/dist/asset-cache.d.ts.map +1 -1
  4. package/dist/asset-cache.js +3 -7
  5. package/dist/asset-cache.js.map +1 -1
  6. package/dist/diff.d.ts.map +1 -1
  7. package/dist/diff.js +2 -3
  8. package/dist/diff.js.map +1 -1
  9. package/dist/front-matter-extension.d.ts.map +1 -1
  10. package/dist/front-matter-extension.js +3 -1
  11. package/dist/front-matter-extension.js.map +1 -1
  12. package/dist/icons/page-width.d.ts +6 -0
  13. package/dist/icons/page-width.d.ts.map +1 -0
  14. package/dist/icons/page-width.js +15 -0
  15. package/dist/icons/page-width.js.map +1 -0
  16. package/dist/library-info.d.ts +7 -2
  17. package/dist/library-info.d.ts.map +1 -1
  18. package/dist/library-info.js +8 -2
  19. package/dist/library-info.js.map +1 -1
  20. package/dist/mermaid.d.ts +32 -0
  21. package/dist/mermaid.d.ts.map +1 -1
  22. package/dist/mermaid.js +127 -27
  23. package/dist/mermaid.js.map +1 -1
  24. package/dist/rendering.d.ts +12 -0
  25. package/dist/rendering.d.ts.map +1 -1
  26. package/dist/rendering.js +83 -4
  27. package/dist/rendering.js.map +1 -1
  28. package/dist/sha256.d.ts +10 -0
  29. package/dist/sha256.d.ts.map +1 -0
  30. package/dist/sha256.js +83 -0
  31. package/dist/sha256.js.map +1 -0
  32. package/dist/view-css.d.ts.map +1 -1
  33. package/dist/view-css.js +2216 -2114
  34. package/dist/view-css.js.map +1 -1
  35. package/dist/view.d.ts +183 -20
  36. package/dist/view.d.ts.map +1 -1
  37. package/dist/view.js +1140 -415
  38. package/dist/view.js.map +1 -1
  39. package/dist/workspace.d.ts +12 -0
  40. package/dist/workspace.d.ts.map +1 -1
  41. package/dist/workspace.js +22 -2
  42. package/dist/workspace.js.map +1 -1
  43. package/package.json +5 -4
package/dist/view-css.js CHANGED
@@ -1,2119 +1,2221 @@
1
1
  import { MDZIP_DARK_THEME_CSS, MDZIP_LIGHT_THEME_CSS, MDZIP_VARIABLES_CSS } from './theme.js';
2
2
  const MDZIP_LIGHT_DEFAULTS_CSS = MDZIP_LIGHT_THEME_CSS.replaceAll('--theme-', '--mdzip-default-');
3
3
  const MDZIP_DARK_DEFAULTS_CSS = MDZIP_DARK_THEME_CSS.replaceAll('--theme-', '--mdzip-default-');
4
- export const WORKSPACE_CSS = `
5
- .mdzip-root {
6
- /* Layout variables */
7
- --mdz-zoom: 1;
8
- --nav-pane-width: 280px;
9
- --editor-pane-offset: 12px;
10
- --workspace-pane-offset: 0px;
11
- --split-edit-ratio: 0.5;
12
-
13
- /* Theme variable mappings */
14
- ${MDZIP_VARIABLES_CSS}
15
-
16
- display: flex;
17
- flex-direction: column;
18
- width: 100%;
19
- height: 100%;
20
- min-height: 520px;
21
- background: var(--mdzip-editor-background-color);
22
- color: var(--mdzip-editor-foreground-color);
23
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
24
- font-size: 13px;
25
- overflow: hidden;
26
- box-sizing: border-box;
27
- }
28
-
29
- .mdzip-root.toolbar-density-compact {
30
- --mdzip-density-toolbar-padding: 3px 10px;
31
- --mdzip-density-toolbar-gap: 6px;
32
- --mdzip-density-toolbar-start-gap: 8px;
33
- --mdzip-density-toolbar-group-padding: 2px;
34
- --mdzip-density-toolbar-button-width: 34px;
35
- --mdzip-density-toolbar-button-height: 30px;
36
- --mdzip-density-toolbar-compact-button-size: 28px;
37
- --mdzip-density-toolbar-icon-size: 15px;
38
- --mdzip-density-toolbar-icon-large-size: 19px;
39
- --mdzip-density-toolbar-icon-extra-large-size: 22px;
40
- --mdzip-density-theme-icon-size: 16px;
41
- --mdzip-density-format-toolbar-gap: 4px;
42
- --mdzip-density-format-toolbar-group-gap: 1px;
43
- --mdzip-density-format-button-size: 28px;
44
- --mdzip-density-format-menu-button-width: 36px;
45
- --mdzip-density-format-icon-size: 15px;
46
- }
47
-
48
- .mdzip-root.toolbar-density-dense {
49
- --mdzip-density-toolbar-padding: 2px 8px;
50
- --mdzip-density-toolbar-gap: 4px;
51
- --mdzip-density-toolbar-start-gap: 6px;
52
- --mdzip-density-toolbar-group-padding: 1px;
53
- --mdzip-density-toolbar-button-width: 30px;
54
- --mdzip-density-toolbar-button-height: 28px;
55
- --mdzip-density-toolbar-compact-button-size: 26px;
56
- --mdzip-density-toolbar-icon-size: 14px;
57
- --mdzip-density-toolbar-icon-large-size: 18px;
58
- --mdzip-density-toolbar-icon-extra-large-size: 20px;
59
- --mdzip-density-theme-icon-size: 15px;
60
- --mdzip-density-format-toolbar-gap: 3px;
61
- --mdzip-density-format-toolbar-group-gap: 1px;
62
- --mdzip-density-format-button-size: 26px;
63
- --mdzip-density-format-menu-button-width: 34px;
64
- --mdzip-density-format-icon-size: 14px;
65
- }
66
-
67
- .mdzip-root.content-density-compact {
68
- --mdzip-density-editor-content-padding: 20px 28px;
69
- --mdzip-density-preview-content-padding: 20px 24px 32px;
70
- }
71
-
72
- .mdzip-root.mdzip-theme-light {
73
- color-scheme: light;
74
- ${MDZIP_LIGHT_DEFAULTS_CSS}
75
- }
76
-
77
- .mdzip-root.mdzip-theme-dark {
78
- color-scheme: dark;
79
- ${MDZIP_DARK_DEFAULTS_CSS}
80
- }
81
-
82
- .mdzip-root *,
83
- .mdzip-root *::before,
84
- .mdzip-root *::after {
85
- box-sizing: border-box;
86
- }
87
-
88
- .mdzip-root [hidden] {
89
- display: none !important;
90
- }
91
-
92
- .mdzip-root .document-strip {
93
- display: flex;
94
- align-items: center;
95
- gap: 5px;
96
- min-height: 30px;
97
- padding: 3px 12px;
98
- background: var(--mdzip-editor-foreground-color);
99
- background: rgba(0, 0, 0, 0.05);
100
- border-bottom: 1px solid var(--mdzip-border-color);
101
- flex: 0 0 auto;
102
- }
103
-
104
- .mdzip-root.mdzip-theme-dark .document-strip {
105
- background: rgba(255, 255, 255, 0.08);
106
- }
107
-
108
- .mdzip-root .toolbar {
109
- --view-mode-min-left: calc(var(--editor-pane-offset) + 520px);
110
- --view-mode-max-left: calc(100% - 170px);
111
-
112
- display: grid;
113
- grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
114
- align-items: center;
115
- column-gap: 12px;
116
- padding: var(--mdzip-toolbar-padding, var(--mdzip-density-toolbar-padding, 4px 12px));
117
- background: var(--mdzip-toolbar-background-color);
118
- border-bottom: 1px solid var(--mdzip-border-color);
119
- min-height: 48px;
120
- flex: 0 0 auto;
121
- position: relative;
122
- z-index: 5;
123
- }
124
-
125
- .mdzip-root .toolbar-left,
126
- .mdzip-root .toolbar-controls {
127
- display: flex;
128
- align-items: center;
129
- min-width: 0;
130
- gap: var(--mdzip-toolbar-gap, var(--mdzip-density-toolbar-gap, 10px));
131
- }
132
-
133
- .mdzip-root .toolbar-start {
134
- display: flex;
135
- align-items: center;
136
- justify-self: start;
137
- min-width: 0;
138
- gap: var(--mdzip-toolbar-start-gap, var(--mdzip-density-toolbar-start-gap, 12px));
139
- }
140
-
141
- .mdzip-root.navigation-pane-visible {
142
- --editor-pane-offset: calc(var(--nav-pane-width) + 6px);
143
- --workspace-pane-offset: calc(var(--nav-pane-width) + 6px);
144
- }
145
-
146
- .mdzip-root .toolbar-left {
147
- flex: 0 0 auto;
148
- overflow: hidden;
149
- }
150
-
151
- .mdzip-root .toolbar-controls {
152
- grid-column: 3;
153
- justify-self: end;
154
- position: relative;
155
- }
156
-
157
- .mdzip-root .title-button {
158
- flex: 1 1 auto;
159
- border: 0;
160
- background: transparent;
161
- padding: 0;
162
- margin: 0;
163
- color: var(--mdzip-editor-foreground-color);
164
- font: inherit;
165
- font-size: 13px;
166
- font-weight: 500;
167
- text-decoration: none;
168
- cursor: pointer;
169
- min-width: 0;
170
- overflow: hidden;
171
- text-overflow: ellipsis;
172
- white-space: nowrap;
173
- }
174
-
175
- .mdzip-root .title-button:hover {
176
- text-decoration: underline;
177
- text-underline-offset: 2px;
178
- }
179
-
180
- .mdzip-root .title-button:disabled {
181
- color: var(--mdzip-editor-foreground-color);
182
- text-decoration: none;
183
- cursor: default;
184
- }
185
-
186
- .mdzip-root .title-filename {
187
- font-weight: 400;
188
- opacity: 0.6;
189
- }
190
-
191
- .mdzip-root .document-info-button {
192
- display: inline-flex;
193
- align-items: center;
194
- justify-content: center;
195
- flex: 0 0 24px;
196
- width: 24px;
197
- height: 24px;
198
- padding: 0;
199
- border: 0;
200
- border-radius: 4px;
201
- background: transparent;
202
- color: var(--mdzip-muted-foreground-color);
203
- cursor: pointer;
204
- }
205
-
206
- .mdzip-root .document-info-button:hover,
207
- .mdzip-root .document-info-button:focus-visible {
208
- outline: none;
209
- background: var(--mdzip-control-hover-background-color);
210
- color: var(--mdzip-control-foreground-color);
211
- }
212
-
213
- .mdzip-root .document-info-icon {
214
- width: 15px;
215
- height: 15px;
216
- }
217
-
218
- .mdzip-root .toolbar-buttons {
219
- display: flex;
220
- align-items: center;
221
- gap: 4px;
222
- justify-self: center;
223
- padding: var(--mdzip-toolbar-group-padding, var(--mdzip-density-toolbar-group-padding, 3px));
224
- border: 1px solid var(--mdzip-widget-border-color);
225
- border-radius: 8px;
226
- background: var(--mdzip-widget-background-color);
227
- }
228
-
229
- .mdzip-root .view-mode-toggle-group {
230
- position: absolute;
231
- left: clamp(
232
- var(--view-mode-min-left),
233
- calc((100% + var(--workspace-pane-offset)) / 2),
234
- var(--view-mode-max-left)
235
- );
236
- top: 50%;
237
- transform: translate(-50%, -50%);
238
- gap: 2px;
239
- /* Paint above the edit toolbar (z-index 6) with an opaque surface so any
240
- residual overlap at unusual widths reads as a clean layered control. */
241
- z-index: 7;
242
- background: var(--mdzip-widget-background-color);
243
- }
244
-
245
- .mdzip-root .icon-toggle {
246
- width: var(--mdzip-toolbar-button-width, var(--mdzip-toolbar-button-size, var(--mdzip-density-toolbar-button-width, 42px)));
247
- height: var(--mdzip-toolbar-button-height, var(--mdzip-toolbar-button-size, var(--mdzip-density-toolbar-button-height, 36px)));
248
- padding: 0;
249
- cursor: pointer;
250
- background: transparent;
251
- color: var(--mdzip-control-foreground-color);
252
- border: none;
253
- border-radius: 5px;
254
- display: inline-flex;
255
- align-items: center;
256
- justify-content: center;
257
- }
258
-
259
- .mdzip-root .icon-toggle.active {
260
- background: var(--mdzip-accent-color);
261
- color: var(--mdzip-accent-foreground-color);
262
- }
263
-
264
- .mdzip-root .icon-toggle:hover:not(.active):not(:disabled) {
265
- background: var(--mdzip-control-hover-background-color);
266
- }
267
-
268
- .mdzip-root .icon-toggle:disabled {
269
- opacity: 0.55;
270
- cursor: not-allowed;
271
- }
272
-
273
- .mdzip-root .toggle-icon {
274
- width: var(--mdzip-toolbar-icon-size, var(--mdzip-density-toolbar-icon-size, 17px));
275
- height: var(--mdzip-toolbar-icon-size, var(--mdzip-density-toolbar-icon-size, 17px));
276
- fill: none;
277
- stroke: currentColor;
278
- }
279
-
280
- .mdzip-root .view-mode-toggle {
281
- position: relative;
282
- width: var(--mdzip-toolbar-compact-button-size, var(--mdzip-density-toolbar-compact-button-size, 32px));
283
- height: var(--mdzip-toolbar-compact-button-size, var(--mdzip-density-toolbar-compact-button-size, 32px));
284
- border-radius: 6px;
285
- color: var(--mdzip-control-foreground-color);
286
- }
287
-
288
- .mdzip-root .view-mode-toggle.active {
289
- background: var(--mdzip-control-hover-background-color);
290
- color: var(--mdzip-link-color);
291
- }
292
-
293
- .mdzip-root .view-mode-toggle:hover:not(.active):not(:disabled) {
294
- background: var(--mdzip-control-hover-background-color);
295
- }
296
-
297
- .mdzip-root .view-mode-toggle.active:hover:not(:disabled) {
298
- background: var(--mdzip-control-hover-background-color);
299
- }
300
-
301
- .mdzip-root .view-mode-toggle .commandbar-flex-container {
302
- display: flex;
303
- align-items: center;
304
- justify-content: center;
305
- width: 100%;
306
- height: 100%;
307
- }
308
-
309
- .mdzip-root .view-mode-toggle .toggle-icon {
310
- width: var(--mdzip-toolbar-icon-large-size, var(--mdzip-density-toolbar-icon-large-size, 1.5em));
311
- height: var(--mdzip-toolbar-icon-large-size, var(--mdzip-density-toolbar-icon-large-size, 1.5em));
312
- }
313
-
314
- .mdzip-root .nav-toggle {
315
- width: var(--mdzip-toolbar-compact-button-size, var(--mdzip-density-toolbar-compact-button-size, 32px));
316
- height: var(--mdzip-toolbar-compact-button-size, var(--mdzip-density-toolbar-compact-button-size, 32px));
317
- border-radius: 6px;
318
- }
319
-
320
- .mdzip-root .nav-toggle.active {
321
- background: var(--mdzip-control-hover-background-color);
322
- color: var(--mdzip-link-color);
323
- }
324
-
325
- .mdzip-root .nav-toggle.convert-mdz-toggle {
326
- color: var(--mdzip-link-color);
327
- }
328
-
329
- .mdzip-root .nav-toggle.convert-mdz-toggle:hover:not(:disabled) {
330
- background: var(--mdzip-control-hover-background-color);
331
- }
332
-
333
- .mdzip-root .nav-toggle .toggle-icon {
334
- width: var(--mdzip-toolbar-icon-extra-large-size, var(--mdzip-density-toolbar-icon-extra-large-size, 1.9em));
335
- height: var(--mdzip-toolbar-icon-extra-large-size, var(--mdzip-density-toolbar-icon-extra-large-size, 1.9em));
336
- }
337
-
338
- .mdzip-root .zoom-toggle .toggle-icon {
339
- width: var(--mdzip-toolbar-icon-large-size, var(--mdzip-density-toolbar-icon-large-size, 1.5em));
340
- height: var(--mdzip-toolbar-icon-large-size, var(--mdzip-density-toolbar-icon-large-size, 1.5em));
341
- }
342
-
343
- .mdzip-root .zoom-toggle.active {
344
- background: var(--mdzip-control-hover-background-color);
345
- color: var(--mdzip-link-color);
346
- }
347
-
348
- .mdzip-root .theme-toggle-group {
349
- display: flex;
350
- align-items: center;
351
- gap: 2px;
352
- padding: var(--mdzip-toolbar-group-padding, var(--mdzip-density-toolbar-group-padding, 3px));
353
- border: 1px solid var(--mdzip-widget-border-color);
354
- border-radius: 8px;
355
- background: var(--mdzip-widget-background-color);
356
- }
357
-
358
- .mdzip-root .theme-toggle {
359
- width: var(--mdzip-toolbar-compact-button-size, var(--mdzip-density-toolbar-compact-button-size, 32px));
360
- height: var(--mdzip-toolbar-compact-button-size, var(--mdzip-density-toolbar-compact-button-size, 32px));
361
- border-radius: 6px;
362
- }
363
-
364
- .mdzip-root .theme-toggle.active {
365
- background: var(--mdzip-control-hover-background-color);
366
- color: var(--mdzip-link-color);
367
- }
368
-
369
- .mdzip-root .theme-toggle .toggle-icon {
370
- width: var(--mdzip-theme-icon-size, var(--mdzip-density-theme-icon-size, 18px));
371
- height: var(--mdzip-theme-icon-size, var(--mdzip-density-theme-icon-size, 18px));
372
- }
373
-
374
- .mdzip-root .workspace-shell {
375
- display: flex;
376
- flex: 1 1 auto;
377
- min-height: 0;
378
- }
379
-
380
- .mdzip-root.resizing,
381
- .mdzip-root.resizing * {
382
- cursor: col-resize !important;
383
- user-select: none;
384
- }
385
-
386
- .mdzip-root .nav-pane {
387
- flex: 0 0 var(--nav-pane-width);
388
- width: var(--nav-pane-width);
389
- min-width: 180px;
390
- max-width: 60vw;
391
- border-right: 1px solid var(--mdzip-border-color);
392
- background: var(--mdzip-sidebar-background-color);
393
- color: var(--mdzip-sidebar-foreground-color);
394
- overflow: auto;
395
- transition:
396
- flex-basis 0.18s ease,
397
- width 0.18s ease,
398
- min-width 0.18s ease,
399
- opacity 0.14s ease,
400
- border-color 0.18s ease;
401
- }
402
-
403
- .mdzip-root .nav-pane.hidden {
404
- flex-basis: 0;
405
- width: 0;
406
- min-width: 0;
407
- border-right-color: transparent;
408
- opacity: 0;
409
- overflow: hidden;
410
- pointer-events: none;
411
- }
412
-
413
- .mdzip-root .nav-resizer {
414
- position: relative;
415
- flex: 0 0 6px;
416
- background: transparent;
417
- cursor: col-resize;
418
- opacity: 1;
419
- transition:
420
- flex-basis 0.18s ease,
421
- opacity 0.14s ease;
422
- }
423
-
424
- .mdzip-root .nav-resizer.hidden {
425
- flex-basis: 0;
426
- opacity: 0;
427
- pointer-events: none;
428
- }
429
-
430
- .mdzip-root .nav-resizer::before,
431
- .mdzip-root .split-resizer::before {
432
- content: '';
433
- position: absolute;
434
- top: 0;
435
- bottom: 0;
436
- left: 2px;
437
- width: 2px;
438
- background: transparent;
439
- transition: background 0.12s ease;
440
- }
441
-
442
- .mdzip-root .nav-resizer:hover::before,
443
- .mdzip-root .split-resizer:hover::before {
444
- background: var(--mdzip-focus-outline-color);
445
- }
446
-
447
- .mdzip-root .nav-tree {
448
- padding: 14px 8px 24px;
449
- }
450
-
451
- .mdzip-root .nav-directory {
452
- margin: 0;
453
- position: relative;
454
- }
455
-
456
- .mdzip-root .nav-directory > summary {
457
- list-style: none;
458
- cursor: pointer;
459
- position: relative;
460
- }
461
-
462
- .mdzip-root .nav-directory > summary::-webkit-details-marker {
463
- display: none;
464
- }
465
-
466
- .mdzip-root .nav-directory > summary,
467
- .mdzip-root .nav-file {
468
- display: flex;
469
- align-items: center;
470
- gap: 9px;
471
- width: 100%;
472
- min-height: 34px;
473
- /* No vertical padding: row height comes from min-height, and zero top/bottom
474
- padding lets the stretched .nav-indent guide cells fill the full row so the
475
- per-row rails meet between siblings instead of leaving padding-sized gaps. */
476
- padding: 0 9px;
477
- border: none;
478
- border-radius: 4px;
479
- background: transparent;
480
- color: inherit;
481
- font: inherit;
482
- font-size: 14px;
483
- text-align: left;
484
- }
485
-
486
- .mdzip-root .nav-file {
487
- cursor: pointer;
488
- }
489
-
490
- .mdzip-root .nav-directory > summary:hover,
491
- .mdzip-root .nav-file:hover {
492
- background: var(--mdzip-hover-background-color);
493
- }
494
-
495
- /* Indentation comes from per-row guide cells (.nav-indent), not container
496
- margins, so each row owns its guide lines. */
497
- .mdzip-root .nav-directory-children {
498
- position: relative;
499
- }
500
-
501
- /* One guide cell per ancestor depth, prepended to each nested row. Fixed width
502
- gives the indentation; the rails/elbow are painted within the cell at the
503
- row's own height, so they never overshoot an expanded last subfolder.
504
-
505
- --nav-guide-x positions the rail so it drops straight from the parent
506
- folder's icon: the icon sits 19px (caret 10px + the 9px row gap) right of its
507
- disclosure column, and because the per-level step (cell 16px + 9px gap = 25)
508
- equals the rail-to-icon distance, the same offset keeps every depth aligned. */
509
- .mdzip-root .nav-indent {
510
- flex: 0 0 16px;
511
- align-self: stretch;
512
- position: relative;
513
- --nav-guide-x: 19px;
514
- }
515
-
516
- /* Ancestor column with more siblings below: continuous full-height rail. */
517
- .mdzip-root .nav-indent-rail::before {
518
- content: "";
519
- position: absolute;
520
- left: var(--nav-guide-x);
521
- top: 0;
522
- bottom: 0;
523
- width: 1px;
524
- background: var(--mdzip-tree-guide-color);
525
- }
526
-
527
- /* Connector to this row: vertical down to the row center (elbow └), extended
528
- full-height for a tee (├) when the row's folder has siblings below. */
529
- .mdzip-root .nav-indent-connector::before {
530
- content: "";
531
- position: absolute;
532
- left: var(--nav-guide-x);
533
- top: 0;
534
- height: 50%;
535
- width: 1px;
536
- background: var(--mdzip-tree-guide-color);
537
- }
538
-
539
- .mdzip-root .nav-indent-connector.nav-indent-continues::before {
540
- height: 100%;
541
- }
542
-
543
- /* Horizontal arm from the connector rail to the row's caret/icon. Reaches the
544
- disclosure triangle that sits one row-gap past the cell (folders). */
545
- .mdzip-root .nav-indent-connector::after {
546
- content: "";
547
- position: absolute;
548
- left: var(--nav-guide-x);
549
- right: -9px;
550
- top: 50%;
551
- height: 1px;
552
- background: var(--mdzip-tree-guide-color);
553
- }
554
-
555
- /* Files have no disclosure triangle in the caret slot, so extend the arm across
556
- it (the empty 10px caret plus the 9px row gaps on either side) to meet the
557
- file icon; folders keep the short arm because their triangle already sits at
558
- the cell edge. The right offset is measured from the cell edge, so this holds
559
- regardless of where --nav-guide-x places the rail. */
560
- .mdzip-root .nav-file > .nav-indent-connector::after {
561
- right: calc(-1 * (10px + 2 * 9px));
562
- }
563
-
564
- .mdzip-root .nav-caret {
565
- position: relative;
566
- width: 10px;
567
- flex: 0 0 10px;
568
- color: var(--mdzip-muted-foreground-color);
569
- }
570
-
571
- .mdzip-root .nav-directory > summary .nav-caret::before {
572
- content: "";
573
- position: absolute;
574
- left: 2px;
575
- top: 50%;
576
- width: 0;
577
- height: 0;
578
- border-top: 4px solid transparent;
579
- border-bottom: 4px solid transparent;
580
- border-left: 5px solid currentColor;
581
- transform: translateY(-50%);
582
- }
583
-
584
- .mdzip-root .nav-directory[open] > summary .nav-caret::before {
585
- transform: translateY(-45%) rotate(90deg);
586
- }
587
-
588
- .mdzip-root .nav-folder-icon {
589
- display: inline-flex;
590
- align-items: center;
591
- justify-content: center;
592
- flex: 0 0 22px;
593
- width: 22px;
594
- height: 22px;
595
- color: var(--mdzip-control-foreground-color);
596
- }
597
-
598
- .mdzip-root .nav-folder-icon svg {
599
- display: block;
600
- width: 21px;
601
- height: 21px;
602
- }
603
-
604
- .mdzip-root .nav-directory[open] > summary .nav-folder-icon.closed,
605
- .mdzip-root .nav-directory:not([open]) > summary .nav-folder-icon.open {
606
- display: none;
607
- }
608
-
609
- .mdzip-root .nav-file-icon {
610
- display: inline-flex;
611
- align-items: center;
612
- justify-content: center;
613
- flex: 0 0 30px;
614
- width: 30px;
615
- height: 24px;
616
- border: 1px solid var(--mdzip-border-color);
617
- border-radius: 3px;
618
- background: var(--mdzip-widget-background-color);
619
- color: var(--mdzip-muted-foreground-color);
620
- font-size: 10px;
621
- font-weight: 700;
622
- line-height: 1;
623
- }
624
-
625
- .mdzip-root .nav-file-icon svg {
626
- display: block;
627
- }
628
-
629
- .mdzip-root .nav-file-icon.markdown svg {
630
- width: 21px;
631
- height: 21px;
632
- }
633
-
634
- .mdzip-root .nav-file-icon.manifest svg {
635
- width: 21px;
636
- height: 21px;
637
- }
638
-
639
- .mdzip-root .nav-file-icon.markdown {
640
- border: 0;
641
- background: transparent;
642
- }
643
-
644
- .mdzip-root .nav-file-icon.manifest {
645
- border: 0;
646
- background: transparent;
647
- color: #d18616;
648
- }
649
-
650
- .mdzip-root .nav-file-icon.image {
651
- border: 0 !important;
652
- background: transparent !important;
653
- }
654
-
655
- .mdzip-root .nav-file-icon.image svg {
656
- width: 21px;
657
- height: 21px;
658
- }
659
-
660
- .mdzip-root .nav-label {
661
- flex: 1;
662
- min-width: 0;
663
- overflow: hidden;
664
- text-overflow: ellipsis;
665
- white-space: nowrap;
666
- }
667
-
668
- .mdzip-root .nav-file.current-entry {
669
- background: var(--mdzip-selection-background-color);
670
- }
671
-
672
- .mdzip-root .nav-file.current-entry::after {
673
- content: '';
674
- width: 10px;
675
- height: 10px;
676
- flex: 0 0 10px;
677
- border-radius: 50%;
678
- background: var(--mdzip-link-color);
679
- }
680
-
681
- .mdzip-root .nav-file.orphaned-asset {
682
- color: var(--mdzip-muted-foreground-color);
683
- }
684
-
685
- .mdzip-root .nav-orphan-button {
686
- flex: 0 0 22px;
687
- width: 22px;
688
- height: 22px;
689
- display: inline-flex;
690
- align-items: center;
691
- justify-content: center;
692
- border: 0;
693
- border-radius: 4px;
694
- background: transparent;
695
- color: #9a6700;
696
- cursor: pointer;
697
- }
698
-
699
- .mdzip-root .nav-orphan-button:hover {
700
- background: rgba(154, 103, 0, 0.12);
701
- }
702
-
703
- .mdzip-root .nav-orphan-button svg {
704
- width: 15px;
705
- height: 15px;
706
- fill: currentColor;
707
- }
708
-
709
- .mdzip-root .nav-context-menu {
710
- position: fixed;
711
- z-index: 200;
712
- min-width: 190px;
713
- padding: 4px;
714
- border: 1px solid var(--mdzip-widget-border-color);
715
- border-radius: 4px;
716
- background: var(--mdzip-editor-background-color);
717
- color: var(--mdzip-editor-foreground-color);
718
- box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
719
- }
720
-
721
- .mdzip-root .nav-context-menu button {
722
- display: flex;
723
- align-items: center;
724
- gap: 10px;
725
- width: 100%;
726
- min-height: 28px;
727
- padding: 4px 10px;
728
- border: none;
729
- border-radius: 3px;
730
- background: transparent;
731
- color: inherit;
732
- font: inherit;
733
- text-align: left;
734
- cursor: pointer;
735
- }
736
-
737
- .mdzip-root .nav-context-menu .nav-menu-icon {
738
- flex: 0 0 auto;
739
- width: 16px;
740
- height: 16px;
741
- opacity: 0.8;
742
- }
743
-
744
- .mdzip-root .nav-context-menu .nav-menu-label {
745
- flex: 1 1 auto;
746
- }
747
-
748
- .mdzip-root .nav-context-menu .nav-menu-shortcut {
749
- flex: 0 0 auto;
750
- margin-left: 16px;
751
- font-size: 0.85em;
752
- opacity: 0.55;
753
- font-variant-numeric: tabular-nums;
754
- }
755
-
756
- .mdzip-root .nav-context-menu .nav-menu-chevron {
757
- flex: 0 0 auto;
758
- width: 14px;
759
- height: 14px;
760
- margin-right: -2px;
761
- opacity: 0.55;
762
- }
763
-
764
- .mdzip-root .nav-menu-submenu-wrap {
765
- position: relative;
766
- }
767
-
768
- .mdzip-root .nav-context-submenu {
769
- position: absolute;
770
- left: 100%;
771
- top: -5px;
772
- display: none;
773
- min-width: 190px;
774
- max-height: min(60vh, 420px);
775
- overflow-y: auto;
776
- padding: 4px;
777
- border: 1px solid var(--mdzip-widget-border-color);
778
- border-radius: 4px;
779
- background: var(--mdzip-editor-background-color);
780
- color: var(--mdzip-editor-foreground-color);
781
- box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
782
- }
783
-
784
- .mdzip-root .nav-menu-submenu-wrap.open-left > .nav-context-submenu {
785
- left: auto;
786
- right: 100%;
787
- }
788
-
789
- .mdzip-root .nav-menu-submenu-wrap:hover > .nav-context-submenu,
790
- .mdzip-root .nav-menu-submenu-wrap:focus-within > .nav-context-submenu {
791
- display: block;
792
- }
793
-
794
- .mdzip-root .nav-context-menu button:hover,
795
- .mdzip-root .nav-context-menu button:focus-visible {
796
- outline: none;
797
- background: var(--mdzip-hover-background-color);
798
- }
799
-
800
- .mdzip-root .nav-context-menu button:disabled {
801
- opacity: 0.6;
802
- cursor: default;
803
- }
804
-
805
- .mdzip-root .nav-context-menu button:disabled:hover,
806
- .mdzip-root .nav-context-menu button:disabled:focus-visible {
807
- background: transparent;
808
- }
809
-
810
- .mdzip-root .nav-menu-separator {
811
- height: 1px;
812
- margin: 4px 6px;
813
- background: var(--mdzip-border-color);
814
- }
815
-
816
- .mdzip-root .nav-file.entry-point .nav-label {
817
- font-weight: 600;
818
- }
819
-
820
- .mdzip-root .nav-directory.pending-folder > summary {
821
- opacity: 0.7;
822
- }
823
-
824
- .mdzip-root details.nav-directory.drag-over > summary,
825
- .mdzip-root .nav-tree.drag-over {
826
- background: var(--mdzip-hover-background-color);
827
- border-radius: 4px;
828
- }
829
-
830
- .mdzip-root .title-dialog-actions .danger-action {
831
- border-color: #b42318;
832
- background: #b42318;
833
- color: #ffffff;
834
- }
835
-
836
- .mdzip-root .mdzip-tooltip {
837
- position: fixed;
838
- z-index: 10000;
839
- max-width: min(320px, calc(100vw - 16px));
840
- padding: 5px 8px;
841
- border: 1px solid var(--mdzip-border-color);
842
- border-radius: 5px;
843
- background: var(--mdzip-editor-foreground-color);
844
- color: var(--mdzip-editor-background-color);
845
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
846
- font-size: 12px;
847
- line-height: 1.35;
848
- white-space: nowrap;
849
- pointer-events: none;
850
- }
851
-
852
- .mdzip-root .mdzip-copy-toast {
853
- position: fixed;
854
- z-index: 10000;
855
- left: 50%;
856
- bottom: 20px;
857
- transform: translateX(-50%);
858
- max-width: min(320px, calc(100vw - 32px));
859
- padding: 8px 14px;
860
- border-radius: 6px;
861
- background: var(--mdzip-editor-foreground-color);
862
- color: var(--mdzip-editor-background-color);
863
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
864
- font-size: 12px;
865
- line-height: 1.35;
866
- text-align: center;
867
- pointer-events: none;
868
- }
869
-
870
- .mdzip-root .pane-stack {
871
- display: block;
872
- flex: 1;
873
- min-width: 0;
874
- height: 100%;
875
- }
876
-
877
- .mdzip-root .pane-stack.split-mode {
878
- display: flex;
879
- flex-direction: row;
880
- }
881
-
882
- .mdzip-root .pane {
883
- display: none;
884
- height: 100%;
885
- overflow: hidden;
886
- }
887
-
888
- .mdzip-root .pane.active {
889
- display: block;
890
- }
891
-
892
- .mdzip-root .pane-stack.split-mode .pane {
893
- display: block !important;
894
- min-width: 0;
895
- height: 100%;
896
- }
897
-
898
- .mdzip-root .pane-stack.split-mode .edit-pane {
899
- flex: 0 0 calc((100% - 6px) * var(--split-edit-ratio));
900
- }
901
-
902
- .mdzip-root .pane-stack.split-mode .preview-pane {
903
- flex: 1 1 auto;
904
- }
905
-
906
- .mdzip-root .preview-pane {
907
- overflow: auto;
908
- /* Chrome's scroll-anchoring tries to keep the same visible content pinned
909
- * when a layout shift happens above the viewport (e.g. a chunk reconcile
910
- * re-rendering a mermaid diagram to a different height, or an image
911
- * finishing decode) by silently adjusting scrollTop on its own — firing a
912
- * genuine, non-echo 'scroll' event with no explicit write behind it. The
913
- * editor/preview scroll-sync listeners can't distinguish that from a real
914
- * user scroll, so they propagate it to the other pane, whose own
915
- * anchoring can then react in turn, compounding into a visible jump on
916
- * the very next edit after a layout-affecting mount. Disabling anchoring
917
- * here means a layout shift leaves scrollTop exactly where it was
918
- * instead of "helpfully" moving it.
919
- */
920
- overflow-anchor: none;
921
- }
922
-
923
- .mdzip-root .preview-pane:focus {
924
- outline: none;
925
- }
926
-
927
- .mdzip-root .entry-pane {
928
- overflow: auto;
929
- }
930
-
931
- .mdzip-root .pane-stack.entry-claimed .edit-pane,
932
- .mdzip-root .pane-stack.entry-claimed .preview-pane,
933
- .mdzip-root .pane-stack.entry-claimed .split-resizer {
934
- display: none !important;
935
- }
936
-
937
- .mdzip-root .edit-pane {
938
- overflow: hidden;
939
- flex-direction: column;
940
- }
941
-
942
- /* See the matching comment on .preview-pane's overflow-anchor: none — same
943
- * reasoning applies here. CodeMirror's own line-height re-measurement after
944
- * an edit can shift content above the viewport too, and native scroll
945
- * anchoring reacting to that is indistinguishable, from the sync listener's
946
- * side, from the user actually scrolling.
947
- */
948
- .mdzip-root .cm-scroller {
949
- overflow-anchor: none;
950
- }
951
-
952
- .mdzip-root .edit-pane.active {
953
- display: flex;
954
- }
955
-
956
- .mdzip-root .pane-stack.split-mode .edit-pane {
957
- display: flex !important;
958
- }
959
-
960
- .mdzip-root .edit-toolbar {
961
- display: flex;
962
- align-items: center;
963
- gap: var(--mdzip-format-toolbar-gap, var(--mdzip-density-format-toolbar-gap, 7px));
964
- min-height: 32px;
965
- padding: 0;
966
- overflow: visible;
967
- border: 0;
968
- background: transparent;
969
- flex: 0 0 auto;
970
- position: absolute;
971
- left: var(--editor-pane-offset);
972
- top: 50%;
973
- transform: translateY(-50%);
974
- z-index: 6;
975
- }
976
-
977
- .mdzip-root:not(.navigation-pane-visible) .edit-toolbar {
978
- position: static;
979
- transform: none;
980
- }
981
-
982
- .mdzip-root .edit-toolbar-group {
983
- display: flex;
984
- align-items: center;
985
- gap: var(--mdzip-format-toolbar-group-gap, var(--mdzip-density-format-toolbar-group-gap, 2px));
986
- flex: 0 0 auto;
987
- }
988
-
989
- .mdzip-root .edit-toolbar button {
990
- display: inline-flex;
991
- align-items: center;
992
- justify-content: center;
993
- gap: 2px;
994
- width: var(--mdzip-format-button-size, var(--mdzip-density-format-button-size, 32px));
995
- height: var(--mdzip-format-button-size, var(--mdzip-density-format-button-size, 32px));
996
- padding: 0;
997
- border: 0;
998
- border-radius: 5px;
999
- background: transparent;
1000
- color: var(--mdzip-control-foreground-color);
1001
- cursor: pointer;
1002
- }
1003
-
1004
- .mdzip-root .edit-toolbar button:hover,
1005
- .mdzip-root .edit-toolbar button:focus-visible {
1006
- outline: none;
1007
- background: var(--mdzip-control-hover-background-color);
1008
- }
1009
-
1010
- .mdzip-root .edit-toolbar button:focus-visible {
1011
- box-shadow: inset 0 0 0 1px var(--mdzip-focus-outline-color);
1012
- }
1013
-
1014
- .mdzip-root .edit-toolbar .format-menu {
1015
- position: relative;
1016
- flex: 0 0 auto;
1017
- }
1018
-
1019
- .mdzip-root .edit-toolbar .format-menu-toggle {
1020
- width: var(--mdzip-format-menu-button-width, var(--mdzip-density-format-menu-button-width, 42px));
1021
- gap: 2px;
1022
- }
1023
-
1024
- .mdzip-root .edit-toolbar .format-menu-toggle[aria-expanded="true"] {
1025
- background: var(--mdzip-control-hover-background-color);
1026
- box-shadow: inset 0 0 0 1px var(--mdzip-focus-outline-color);
1027
- }
1028
-
1029
- .mdzip-root .edit-toolbar .format-menu-popover {
1030
- position: absolute;
1031
- top: calc(100% + 6px);
1032
- left: 0;
1033
- z-index: 20;
1034
- min-width: 164px;
1035
- padding: 5px;
1036
- border: 1px solid var(--mdzip-widget-border-color);
1037
- border-radius: 7px;
1038
- background: var(--mdzip-widget-background-color);
1039
- color: var(--mdzip-editor-foreground-color);
1040
- box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
1041
- }
1042
-
1043
- .mdzip-root .edit-toolbar .format-menu-popover button {
1044
- display: flex;
1045
- justify-content: flex-start;
1046
- gap: 10px;
1047
- width: 100%;
1048
- height: 32px;
1049
- padding: 0 10px;
1050
- border-radius: 4px;
1051
- color: inherit;
1052
- font: inherit;
1053
- white-space: nowrap;
1054
- }
1055
-
1056
- .mdzip-root .edit-toolbar .format-menu-popover button:hover,
1057
- .mdzip-root .edit-toolbar .format-menu-popover button:focus-visible {
1058
- background: var(--mdzip-control-hover-background-color);
1059
- box-shadow: none;
1060
- }
1061
-
1062
- .mdzip-root .edit-toolbar .format-menu-popover strong {
1063
- display: inline-block;
1064
- width: 22px;
1065
- color: var(--mdzip-muted-foreground-color);
1066
- font-size: 11px;
1067
- text-align: center;
1068
- }
1069
-
1070
- .mdzip-root .format-icon {
1071
- width: var(--mdzip-format-icon-size, var(--mdzip-density-format-icon-size, 17px));
1072
- height: var(--mdzip-format-icon-size, var(--mdzip-density-format-icon-size, 17px));
1073
- fill: none;
1074
- stroke: currentColor;
1075
- }
1076
-
1077
- .mdzip-root .format-chevron {
1078
- width: 12px;
1079
- height: 12px;
1080
- fill: none;
1081
- stroke: currentColor;
1082
- }
1083
-
1084
- .mdzip-root .edit-toolbar-divider {
1085
- width: 1px;
1086
- height: 22px;
1087
- background: var(--mdzip-border-color);
1088
- flex: 0 0 auto;
1089
- }
1090
-
1091
- .mdzip-root .editor-host {
1092
- flex: 1 1 auto;
1093
- min-height: 0;
1094
- overflow: hidden;
1095
- }
1096
-
1097
- .mdzip-root .editor-host .cm-editor {
1098
- height: 100%;
1099
- }
1100
-
1101
- .mdzip-root .split-resizer {
1102
- display: none;
1103
- position: relative;
1104
- flex: 0 0 6px;
1105
- cursor: col-resize;
1106
- }
1107
-
1108
- .mdzip-root .pane-stack.split-mode .split-resizer {
1109
- display: block;
1110
- }
1111
-
1112
- .mdzip-root .pane-stack.split-mode .split-resizer::before {
1113
- background: var(--mdzip-border-color);
1114
- }
1115
-
1116
- .mdzip-root .pane-stack.split-mode .split-resizer:hover::before {
1117
- background: var(--mdzip-focus-outline-color);
1118
- }
1119
-
1120
- .mdzip-root .preview-content {
1121
- max-width: var(--mdzip-preview-content-max-width, calc(900px * var(--mdz-zoom)));
1122
- margin: 0 auto;
1123
- padding: var(--mdzip-preview-content-padding, var(--mdzip-density-preview-content-padding, 36px 32px 48px));
1124
- line-height: 1.55;
1125
- font-size: calc(16px * var(--mdz-zoom));
1126
- }
1127
-
1128
- .mdzip-root .preview-content h1,
1129
- .mdzip-root .preview-content h2,
1130
- .mdzip-root .preview-content h3,
1131
- .mdzip-root .preview-content h4,
1132
- .mdzip-root .preview-content h5,
1133
- .mdzip-root .preview-content h6 {
1134
- color: var(--mdzip-editor-foreground-color);
1135
- margin-top: 1.4em;
1136
- margin-bottom: 0.4em;
1137
- line-height: 1.25;
1138
- }
1139
-
1140
- .mdzip-root .preview-content h1 {
1141
- font-size: 2em;
1142
- border-bottom: 1px solid var(--mdzip-border-color);
1143
- padding-bottom: 0.25em;
1144
- }
1145
-
1146
- .mdzip-root .preview-content > :first-child {
1147
- margin-top: 0;
1148
- }
1149
-
1150
- /* Chunked (progressiveTextRendering) mounting wraps each rendered chunk in
1151
- a mount boundary. display:contents drops it from the box tree so margin
1152
- collapsing and other layout behave exactly as the non-chunked path (one
1153
- flat run of blocks) — but :first-child selector matching still follows
1154
- the real DOM tree regardless of display, so the rule above needs a
1155
- companion for the now one-level-deeper first real content element. */
1156
- .mdzip-root .preview-content > .mdzip-chunk {
1157
- display: contents;
1158
- }
1159
-
1160
- .mdzip-root .preview-content > .mdzip-chunk:first-child > :first-child {
1161
- margin-top: 0;
1162
- }
1163
-
1164
- .mdzip-root .preview-content h2 {
1165
- font-size: 1.5em;
1166
- border-bottom: 1px solid var(--mdzip-border-color);
1167
- padding-bottom: 0.2em;
1168
- }
1169
-
1170
- .mdzip-root .preview-content h3 {
1171
- font-size: 1.2em;
1172
- }
1173
-
1174
- .mdzip-root .preview-content p {
1175
- margin: 0.8em 0;
1176
- }
1177
-
1178
- .mdzip-root .preview-content code {
1179
- font-family: "Cascadia Code", Consolas, monospace;
1180
- font-variant-ligatures: none;
1181
- font-feature-settings: "liga" 0, "calt" 0;
1182
- font-size: 0.9em;
1183
- background: var(--mdzip-code-background-color);
1184
- border: 1px solid var(--mdzip-border-color);
1185
- border-radius: 3px;
1186
- padding: 1px 5px;
1187
- }
1188
-
1189
- .mdzip-root .preview-content pre {
1190
- background: var(--mdzip-code-background-color);
1191
- border: 1px solid var(--mdzip-border-color);
1192
- border-radius: 5px;
1193
- padding: 14px 18px;
1194
- overflow-x: auto;
1195
- }
1196
-
1197
- .mdzip-root .preview-content pre code {
1198
- background: none;
1199
- border: none;
1200
- padding: 0;
1201
- }
1202
-
1203
- /* Built-in code-block chrome (#29): the wrapper owns the outer border/radius
1204
- that .preview-content pre normally draws on itself, so the header sits
1205
- flush above it with no double border. */
1206
- .mdzip-root .preview-content .mdzip-code-block {
1207
- margin: 1em 0;
1208
- border: 1px solid var(--mdzip-border-color);
1209
- border-radius: 5px;
1210
- overflow: hidden;
1211
- }
1212
-
1213
- .mdzip-root .preview-content .mdzip-code-block pre {
1214
- margin: 0;
1215
- border: none;
1216
- border-radius: 0;
1217
- }
1218
-
1219
- .mdzip-root .preview-content .mdzip-code-block-header {
1220
- display: flex;
1221
- align-items: center;
1222
- justify-content: space-between;
1223
- gap: 8px;
1224
- padding: 3px 6px 3px 12px;
1225
- background: var(--mdzip-widget-background-color);
1226
- border-bottom: 1px solid var(--mdzip-border-color);
1227
- }
1228
-
1229
- .mdzip-root .preview-content .mdzip-code-block-lang {
1230
- font-family: "Cascadia Code", Consolas, monospace;
1231
- font-size: 0.75em;
1232
- color: var(--mdzip-muted-foreground-color);
1233
- }
1234
-
1235
- .mdzip-root .preview-content .mdzip-code-block-actions {
1236
- display: flex;
1237
- align-items: center;
1238
- gap: 2px;
1239
- }
1240
-
1241
- .mdzip-root .preview-content .mdzip-code-block-btn {
1242
- display: inline-flex;
1243
- align-items: center;
1244
- justify-content: center;
1245
- width: 24px;
1246
- height: 24px;
1247
- padding: 0;
1248
- border: none;
1249
- border-radius: 4px;
1250
- background: none;
1251
- color: var(--mdzip-muted-foreground-color);
1252
- cursor: pointer;
1253
- }
1254
-
1255
- .mdzip-root .preview-content .mdzip-code-block-btn:hover {
1256
- background: var(--mdzip-control-hover-background-color);
1257
- color: var(--mdzip-control-foreground-color);
1258
- }
1259
-
1260
- .mdzip-root .preview-content .mdzip-code-block-btn:disabled {
1261
- opacity: 0.4;
1262
- cursor: default;
1263
- }
1264
-
1265
- .mdzip-root .preview-content .mdzip-code-block-btn:disabled:hover {
1266
- background: none;
1267
- }
1268
-
1269
- .mdzip-root .preview-content .mdzip-code-block-btn-copied {
1270
- color: var(--mdzip-accent-color);
1271
- }
1272
-
1273
- .mdzip-root .preview-content .mdzip-code-block-icon {
1274
- width: 14px;
1275
- height: 14px;
1276
- }
1277
-
1278
- /* Chevron points "forward" (collapsed) vs down (expanded), driven by the
1279
- same aria-expanded state assistive tech reads — no separate visual-only
1280
- state to keep in sync. */
1281
- .mdzip-root .preview-content .mdzip-code-block-btn[aria-expanded="false"] .mdzip-code-block-icon {
1282
- transform: rotate(-90deg);
1283
- }
1284
-
1285
- .mdzip-root .preview-content .mdzip-code-block-body {
1286
- position: relative;
1287
- transition: max-height 0.2s ease-out;
1288
- }
1289
-
1290
- .mdzip-root .preview-content .mdzip-code-block-collapsed .mdzip-code-block-body {
1291
- max-height: 240px;
1292
- overflow: hidden;
1293
- }
1294
-
1295
- .mdzip-root .preview-content .mdzip-code-block-collapsed .mdzip-code-block-body::after {
1296
- content: "";
1297
- position: absolute;
1298
- inset: auto 0 0 0;
1299
- height: 48px;
1300
- background: linear-gradient(to bottom, transparent, var(--mdzip-code-background-color));
1301
- pointer-events: none;
1302
- }
1303
-
1304
- .mdzip-root .preview-content blockquote {
1305
- border-left: 4px solid var(--mdzip-link-color);
1306
- margin: 1em 0;
1307
- padding: 0.5em 1em;
1308
- color: var(--mdzip-muted-foreground-color);
1309
- background: var(--mdzip-code-background-color);
1310
- }
1311
-
1312
- .mdzip-root .preview-content .mdzip-table-scroll {
1313
- width: 100%;
1314
- margin: 1em 0;
1315
- overflow-x: auto;
1316
- }
1317
-
1318
- .mdzip-root .preview-content table {
1319
- width: 100%;
1320
- border-collapse: collapse;
1321
- border-spacing: 0;
1322
- }
1323
-
1324
- .mdzip-root .preview-content th,
1325
- .mdzip-root .preview-content td {
1326
- padding: 8px 12px;
1327
- border: 1px solid var(--mdzip-border-color);
1328
- text-align: left;
1329
- vertical-align: top;
1330
- }
1331
-
1332
- .mdzip-root .preview-content th {
1333
- background: var(--mdzip-widget-background-color);
1334
- font-weight: 600;
1335
- white-space: nowrap;
1336
- }
1337
-
1338
- .mdzip-root .preview-content td code,
1339
- .mdzip-root .preview-content th code {
1340
- white-space: nowrap;
1341
- }
1342
-
1343
- /* Markdown table alignment (left/center/right column syntax) survives as the
1344
- align attribute on th/td, but that's a presentational HTML hint — the plain
1345
- text-align: left above is a real stylesheet rule and would otherwise always
1346
- win regardless of column position. Right/center-aligned cells are also
1347
- typically short, fixed values (numbers, totals) that read better holding
1348
- their line, unlike left-aligned prose columns, which should wrap to fit
1349
- the pane. */
1350
- .mdzip-root .preview-content th[align="left"],
1351
- .mdzip-root .preview-content td[align="left"] {
1352
- text-align: left;
1353
- }
1354
-
1355
- .mdzip-root .preview-content th[align="center"],
1356
- .mdzip-root .preview-content td[align="center"] {
1357
- text-align: center;
1358
- white-space: nowrap;
1359
- }
1360
-
1361
- .mdzip-root .preview-content th[align="right"],
1362
- .mdzip-root .preview-content td[align="right"] {
1363
- text-align: right;
1364
- white-space: nowrap;
1365
- }
1366
-
1367
- .mdzip-root .preview-content td:last-child:not([align="center"]):not([align="right"]) {
1368
- min-width: 220px;
1369
- max-width: 320px;
1370
- }
1371
-
1372
- .mdzip-root .preview-content tbody tr:nth-child(even) {
1373
- background: var(--mdzip-hover-background-color);
1374
- }
1375
-
1376
- .mdzip-root .preview-content img {
1377
- max-width: 100%;
1378
- height: auto;
1379
- border-radius: 4px;
1380
- }
1381
-
1382
- .mdzip-root .preview-content img.mdzip-image-left,
1383
- .mdzip-root .preview-content img.mdzip-image-wrap-left {
1384
- float: left;
1385
- margin: 0.25em 1em 0.75em 0;
1386
- }
1387
-
1388
- .mdzip-root .preview-content img.mdzip-image-right,
1389
- .mdzip-root .preview-content img.mdzip-image-wrap-right {
1390
- float: right;
1391
- margin: 0.25em 0 0.75em 1em;
1392
- }
1393
-
1394
- .mdzip-root .preview-content img.mdzip-image-center {
1395
- display: block;
1396
- margin-left: auto;
1397
- margin-right: auto;
1398
- }
1399
-
1400
- /* Progressive image hydration. Each archive image mounts inside a collapsed
1401
- slot so the text stays compact and immediately readable; when the image
1402
- resolves, the slot eases open (0fr -> 1fr) to the height reserved from its
1403
- sniffed dimensions, in a single slide, and the pixels drop into the exact
1404
- box with no further reflow. */
1405
- .mdzip-root .preview-content .mdzip-image-slot {
1406
- display: inline-grid;
1407
- grid-template-rows: 0fr;
1408
- overflow: hidden;
1409
- vertical-align: bottom;
1410
- transition: grid-template-rows 0.28s ease;
1411
- }
1412
-
1413
- .mdzip-root .preview-content .mdzip-image-slot.mdzip-image-open {
1414
- grid-template-rows: 1fr;
1415
- }
1416
-
1417
- .mdzip-root .preview-content .mdzip-image-slot.mdzip-image-animation-off {
1418
- transition: none;
1419
- }
1420
-
1421
- .mdzip-root .preview-content .mdzip-image-slot > img {
1422
- min-height: 0;
1423
- }
1424
-
1425
- .mdzip-root .preview-content .mdzip-image-slot.mdzip-image-align-left {
1426
- float: left;
1427
- margin: 0.25em 1em 0.75em 0;
1428
- }
1429
-
1430
- .mdzip-root .preview-content .mdzip-image-slot.mdzip-image-align-right {
1431
- float: right;
1432
- margin: 0.25em 0 0.75em 1em;
1433
- }
1434
-
1435
- .mdzip-root .preview-content img.mdzip-image-loading {
1436
- background: var(--mdzip-control-background-color, rgba(127, 127, 127, 0.12));
1437
- animation: mdzip-image-pulse 1.2s ease-in-out infinite;
1438
- }
1439
-
1440
- @keyframes mdzip-image-pulse {
1441
- 0%, 100% { opacity: 1; }
1442
- 50% { opacity: 0.55; }
1443
- }
1444
-
1445
- @media (prefers-reduced-motion: reduce) {
1446
- .mdzip-root .preview-content .mdzip-code-block-body {
1447
- transition: none;
1448
- }
1449
- .mdzip-root .preview-content .mdzip-image-slot {
1450
- transition: none;
1451
- }
1452
- .mdzip-root .preview-content img.mdzip-image-loading {
1453
- animation: none;
1454
- }
1455
- }
1456
-
1457
- .mdzip-root .preview-content .mdzip-frontmatter {
1458
- margin: 0 0 1em 0;
1459
- border: 1px solid var(--mdzip-border-color);
1460
- border-radius: 5px;
1461
- overflow: hidden;
1462
- }
1463
-
1464
- .mdzip-root .preview-content .mdzip-frontmatter-summary {
1465
- padding: 6px 12px;
1466
- background: var(--mdzip-widget-background-color);
1467
- color: var(--mdzip-muted-foreground-color);
1468
- font-size: 0.8em;
1469
- border-bottom: 1px solid var(--mdzip-border-color);
1470
- }
1471
-
1472
- /* Only the collapsible (<details>) variant is interactive — the static
1473
- variant's header is a plain <div>, never clickable. */
1474
- .mdzip-root .preview-content details.mdzip-frontmatter > .mdzip-frontmatter-summary {
1475
- cursor: pointer;
1476
- user-select: none;
1477
- }
1478
-
1479
- .mdzip-root .preview-content .mdzip-frontmatter-table {
1480
- width: 100%;
1481
- border-collapse: collapse;
1482
- }
1483
-
1484
- .mdzip-root .preview-content .mdzip-frontmatter-table th,
1485
- .mdzip-root .preview-content .mdzip-frontmatter-table td {
1486
- padding: 4px 12px;
1487
- border: none;
1488
- text-align: left;
1489
- vertical-align: top;
1490
- font-size: 0.85em;
1491
- }
1492
-
1493
- .mdzip-root .preview-content .mdzip-frontmatter-table th {
1494
- width: 1%;
1495
- white-space: nowrap;
1496
- color: var(--mdzip-muted-foreground-color);
1497
- font-weight: 600;
1498
- background: none;
1499
- }
1500
-
1501
- .mdzip-root .preview-content .mdzip-mermaid {
1502
- display: flex;
1503
- justify-content: center;
1504
- margin: 1em 0;
1505
- }
1506
-
1507
- .mdzip-root .preview-content .mdzip-mermaid > svg {
1508
- max-width: 100%;
1509
- height: auto;
1510
- }
1511
-
1512
- .mdzip-root .preview-content .mdzip-mermaid-error {
1513
- margin: 1em 0;
1514
- padding: 0.75em 1em;
1515
- border-radius: 6px;
1516
- border: 1px solid var(--mdzip-error-border-color, rgba(220, 70, 70, 0.5));
1517
- background: var(--mdzip-error-background-color, rgba(220, 70, 70, 0.08));
1518
- color: var(--mdzip-error-color, #b03030);
1519
- font-family: "Cascadia Code", Consolas, monospace;
1520
- font-size: 0.85em;
1521
- white-space: pre-wrap;
1522
- word-break: break-word;
1523
- }
1524
-
1525
- .mdzip-root .plain-text-preview {
1526
- margin: 0;
1527
- white-space: pre-wrap;
1528
- word-break: break-word;
1529
- font-family: "Cascadia Code", Consolas, monospace;
1530
- font-variant-ligatures: none;
1531
- font-feature-settings: "liga" 0, "calt" 0;
1532
- font-size: calc(20px * var(--mdz-zoom));
1533
- line-height: 1.5;
1534
- }
1535
-
1536
- .mdzip-root .asset-preview-wrap {
1537
- display: flex;
1538
- justify-content: center;
1539
- align-items: flex-start;
1540
- min-height: 240px;
1541
- }
1542
-
1543
- .mdzip-root .asset-preview-image {
1544
- max-width: min(100%, 1200px);
1545
- max-height: calc(100vh - 140px);
1546
- width: auto;
1547
- height: auto;
1548
- border: 1px solid var(--mdzip-border-color);
1549
- background: var(--mdzip-widget-background-color);
1550
- }
1551
-
1552
- .mdzip-root .asset-preview-empty {
1553
- padding: 14px 16px;
1554
- border: 1px solid var(--mdzip-border-color);
1555
- border-radius: 6px;
1556
- background: var(--mdzip-widget-background-color);
1557
- color: var(--mdzip-muted-foreground-color);
1558
- }
1559
-
1560
- .mdzip-root .md-syntax-heading { color: #c36f00; }
1561
- .mdzip-root .md-syntax-marker,
1562
- .mdzip-root .md-syntax-quote { color: #7a5c00; font-weight: 700; }
1563
- .mdzip-root .md-syntax-code,
1564
- .mdzip-root .md-syntax-fence { color: #8a8f00; }
1565
- .mdzip-root .md-syntax-link { color: #0969da; }
1566
- .mdzip-root .md-syntax-image { color: #d100d1; }
1567
- .mdzip-root .md-syntax-emphasis { color: #008b8b; }
1568
- .mdzip-root .md-syntax-rule { color: #6a9955; }
1569
-
1570
- .mdzip-root .mdzip-empty {
1571
- padding: 24px;
1572
- color: var(--mdzip-muted-foreground-color);
1573
- }
1574
-
1575
- .mdzip-root .zoom-popover {
1576
- position: absolute;
1577
- top: calc(100% + 6px);
1578
- right: 0;
1579
- z-index: 20;
1580
- display: flex;
1581
- align-items: center;
1582
- gap: 8px;
1583
- padding: 4px;
1584
- border: 1px solid var(--mdzip-widget-border-color);
1585
- border-radius: 7px;
1586
- background: var(--mdzip-widget-background-color);
1587
- box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
1588
- }
1589
-
1590
- .mdzip-root .zoom-level {
1591
- min-width: 44px;
1592
- padding: 0 6px;
1593
- font-size: 12px;
1594
- line-height: 1;
1595
- font-variant-numeric: tabular-nums;
1596
- color: var(--mdzip-editor-foreground-color);
1597
- }
1598
-
1599
- .mdzip-root .zoom-stepper {
1600
- display: inline-flex;
1601
- align-items: center;
1602
- gap: 2px;
1603
- padding-left: 8px;
1604
- border-left: 1px solid var(--mdzip-widget-border-color);
1605
- }
1606
-
1607
- .mdzip-root .zoom-popover button {
1608
- height: 24px;
1609
- min-width: 24px;
1610
- border: none;
1611
- border-radius: 6px;
1612
- background: transparent;
1613
- color: var(--mdzip-control-foreground-color);
1614
- cursor: pointer;
1615
- }
1616
-
1617
- .mdzip-root .zoom-popover button:hover {
1618
- background: var(--mdzip-control-hover-background-color);
1619
- }
1620
-
1621
- .mdzip-root .zoom-reset {
1622
- padding: 0 12px;
1623
- border-radius: 999px !important;
1624
- background: var(--mdzip-control-hover-background-color) !important;
1625
- font-size: 12px;
1626
- }
1627
-
1628
- .mdzip-root .title-dialog-backdrop {
1629
- position: fixed;
1630
- inset: 0;
1631
- display: flex;
1632
- align-items: center;
1633
- justify-content: center;
1634
- background: rgba(0, 0, 0, 0.32);
1635
- z-index: 100;
1636
- }
1637
-
1638
- .mdzip-root .title-dialog {
1639
- width: min(420px, calc(100vw - 32px));
1640
- background: var(--mdzip-editor-background-color);
1641
- border: 1px solid var(--mdzip-widget-border-color);
1642
- border-radius: 6px;
1643
- padding: 14px;
1644
- box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
1645
- }
1646
-
1647
- .mdzip-root .title-dialog h3 {
1648
- margin: 0;
1649
- font-size: 14px;
1650
- }
1651
-
1652
- .mdzip-root .title-dialog p {
1653
- margin: 8px 0 10px;
1654
- font-size: 12px;
1655
- color: var(--mdzip-muted-foreground-color);
1656
- }
1657
-
1658
- .mdzip-root .title-dialog input {
1659
- width: 100%;
1660
- border: 1px solid var(--mdzip-widget-border-color);
1661
- background: var(--mdzip-editor-background-color);
1662
- color: var(--mdzip-editor-foreground-color);
1663
- border-radius: 4px;
1664
- padding: 6px 8px;
1665
- font-size: 13px;
1666
- }
1667
-
1668
- .mdzip-root .title-dialog select {
1669
- width: 100%;
1670
- border: 1px solid var(--mdzip-widget-border-color);
1671
- background: var(--mdzip-editor-background-color);
1672
- color: var(--mdzip-editor-foreground-color);
1673
- border-radius: 4px;
1674
- padding: 6px 8px;
1675
- font-size: 13px;
1676
- }
1677
-
1678
- .mdzip-root .title-dialog input:disabled,
1679
- .mdzip-root .title-dialog select:disabled {
1680
- border-color: var(--mdzip-border-color);
1681
- background: var(--mdzip-secondary-background-color);
1682
- color: var(--mdzip-muted-foreground-color);
1683
- opacity: 0.72;
1684
- cursor: not-allowed;
1685
- }
1686
-
1687
- .mdzip-root .title-dialog input:disabled::placeholder {
1688
- color: var(--mdzip-muted-foreground-color);
1689
- }
1690
-
1691
- .mdzip-root .title-dialog-validation {
1692
- color: #cf222e !important;
1693
- }
1694
-
1695
- .mdzip-root .title-dialog-actions {
1696
- display: flex;
1697
- justify-content: flex-end;
1698
- gap: 8px;
1699
- margin-top: 12px;
1700
- }
1701
-
1702
- .mdzip-root .title-dialog-actions button {
1703
- padding: 5px 10px;
1704
- font-size: 12px;
1705
- cursor: pointer;
1706
- border-radius: 3px;
1707
- border: 1px solid var(--mdzip-border-color);
1708
- background: var(--mdzip-editor-background-color);
1709
- color: var(--mdzip-editor-foreground-color);
1710
- }
1711
-
1712
- .mdzip-root .title-dialog-actions .reset-title {
1713
- margin-right: auto;
1714
- }
1715
-
1716
- .mdzip-root .title-dialog-actions .save-title {
1717
- border-color: var(--mdzip-accent-color);
1718
- background: var(--mdzip-accent-color);
1719
- color: var(--mdzip-accent-foreground-color);
1720
- }
1721
-
1722
- .mdzip-root .image-insert-dialog {
1723
- width: min(460px, calc(100vw - 32px));
1724
- }
1725
-
1726
- .mdzip-root .image-insert-options {
1727
- display: grid;
1728
- gap: 6px;
1729
- margin: 10px 0;
1730
- padding: 10px;
1731
- border: 1px solid var(--mdzip-widget-border-color);
1732
- border-radius: 4px;
1733
- }
1734
-
1735
- .mdzip-root .image-insert-options legend {
1736
- padding: 0 4px;
1737
- color: var(--mdzip-muted-foreground-color);
1738
- font-size: 12px;
1739
- font-weight: 600;
1740
- }
1741
-
1742
- .mdzip-root .image-insert-options label,
1743
- .mdzip-root .image-insert-field {
1744
- display: grid;
1745
- gap: 4px;
1746
- font-size: 12px;
1747
- }
1748
-
1749
- .mdzip-root .image-insert-options label {
1750
- grid-template-columns: auto 1fr;
1751
- align-items: center;
1752
- }
1753
-
1754
- .mdzip-root .image-insert-options input {
1755
- width: auto;
1756
- }
1757
-
1758
- .mdzip-root .image-insert-grid {
1759
- display: grid;
1760
- grid-template-columns: 1fr 1fr;
1761
- gap: 8px;
1762
- margin-top: 8px;
1763
- }
1764
-
1765
- .mdzip-root .image-insert-field {
1766
- margin-top: 8px;
1767
- }
1768
-
1769
- .mdzip-root .image-insert-field.field-disabled {
1770
- color: var(--mdzip-muted-foreground-color);
1771
- }
1772
-
1773
- .mdzip-root .pack-files-dialog {
1774
- width: min(460px, calc(100vw - 32px));
1775
- }
1776
-
1777
- .mdzip-root .pack-files-options {
1778
- display: grid;
1779
- gap: 6px;
1780
- margin: 10px 0;
1781
- padding: 10px;
1782
- border: 1px solid var(--mdzip-widget-border-color);
1783
- border-radius: 4px;
1784
- }
1785
-
1786
- .mdzip-root .pack-files-options legend {
1787
- padding: 0 4px;
1788
- color: var(--mdzip-muted-foreground-color);
1789
- font-size: 12px;
1790
- font-weight: 600;
1791
- }
1792
-
1793
- .mdzip-root .pack-files-options label,
1794
- .mdzip-root .pack-files-field {
1795
- display: grid;
1796
- gap: 4px;
1797
- font-size: 12px;
1798
- }
1799
-
1800
- .mdzip-root .pack-files-options label {
1801
- grid-template-columns: auto 1fr;
1802
- align-items: center;
1803
- }
1804
-
1805
- .mdzip-root .pack-files-options input {
1806
- width: auto;
1807
- }
1808
-
1809
- .mdzip-root .pack-files-field {
1810
- margin-top: 8px;
1811
- }
1812
-
1813
- .mdzip-root .copy-render-progress-track {
1814
- height: 6px;
1815
- border-radius: 3px;
1816
- background: var(--mdzip-secondary-background-color);
1817
- overflow: hidden;
1818
- }
1819
-
1820
- .mdzip-root .copy-render-progress-bar {
1821
- height: 100%;
1822
- background: var(--mdzip-accent-color);
1823
- transition: width 0.1s linear;
1824
- }
1825
-
1826
- .mdzip-root .metadata-dialog dl {
1827
- margin: 12px 0 0;
1828
- }
1829
-
1830
- .mdzip-root .metadata-dialog {
1831
- width: min(760px, calc(100vw - 32px));
1832
- }
1833
-
1834
- .mdzip-root .metadata-dialog h4 {
1835
- margin: 18px 0 0;
1836
- font-size: 13px;
1837
- }
1838
-
1839
- .mdzip-root .metadata-dialog h4 + dl {
1840
- margin-top: 6px;
1841
- }
1842
-
1843
- .mdzip-root .metadata-row {
1844
- display: grid;
1845
- grid-template-columns: 110px minmax(0, 1fr);
1846
- gap: 12px;
1847
- padding: 7px 0;
1848
- border-bottom: 1px solid var(--mdzip-border-color);
1849
- font-size: 14px;
1850
- }
1851
-
1852
- .mdzip-root .metadata-row:last-child {
1853
- border-bottom: 0;
1854
- }
1855
-
1856
- .mdzip-root .metadata-row dt {
1857
- color: var(--mdzip-muted-foreground-color);
1858
- font-weight: 600;
1859
- }
1860
-
1861
- .mdzip-root .metadata-row dd {
1862
- min-width: 0;
1863
- margin: 0;
1864
- overflow-wrap: anywhere;
1865
- }
1866
-
1867
- .mdzip-root .library-row dt a {
1868
- color: var(--mdzip-link-color);
1869
- text-decoration: none;
1870
- }
1871
-
1872
- .mdzip-root .library-row dt a:hover,
1873
- .mdzip-root .library-row dt a:focus-visible {
1874
- text-decoration: underline;
1875
- }
1876
-
1877
- .mdzip-root .library-row {
1878
- grid-template-columns: minmax(230px, 0.75fr) minmax(280px, 1.25fr);
1879
- }
1880
-
1881
- .mdzip-root .library-row dt {
1882
- display: flex;
1883
- gap: 8px;
1884
- align-items: baseline;
1885
- white-space: nowrap;
1886
- }
1887
-
1888
- .mdzip-root .library-version {
1889
- color: var(--mdzip-muted-foreground-color);
1890
- font-weight: 400;
1891
- }
1892
-
1893
- .mdzip-root .library-row dd {
1894
- white-space: nowrap;
1895
- }
1896
-
1897
- .mdzip-root .library-description {
1898
- color: var(--mdzip-muted-foreground-color);
1899
- }
1900
-
1901
- @media (max-width: 640px) {
1902
- .mdzip-root .library-row {
1903
- grid-template-columns: 1fr;
1904
- gap: 3px;
1905
- }
1906
-
1907
- .mdzip-root .library-row dd {
1908
- white-space: normal;
1909
- }
1910
- }
1911
-
1912
- @media (max-width: 900px) {
1913
- .mdzip-root { --nav-pane-width: 220px; }
1914
- }
1915
-
1916
- /* Stack the formatting toolbar only once the pushed-right view-mode toggle no
1917
- longer has enough room between the edit tools and the right-side controls. */
1918
- @media (max-width: 760px) {
1919
- .mdzip-root .toolbar {
1920
- grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
1921
- row-gap: 4px;
1922
- }
1923
- .mdzip-root .toolbar-start {
1924
- display: contents;
1925
- }
1926
- .mdzip-root .toolbar-left {
1927
- grid-column: 1;
1928
- grid-row: 1;
1929
- }
1930
- .mdzip-root .edit-toolbar {
1931
- grid-column: 1 / -1;
1932
- grid-row: 2;
1933
- justify-self: start;
1934
- position: static;
1935
- transform: none;
1936
- }
1937
- .mdzip-root .view-mode-toggle-group {
1938
- position: static;
1939
- transform: none;
1940
- }
1941
- .mdzip-root .toolbar-controls {
1942
- grid-column: 3;
1943
- grid-row: 1;
1944
- }
1945
- }
1946
-
1947
- @media (max-width: 1100px) {
1948
- .mdzip-root.navigation-pane-visible .toolbar {
1949
- grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
1950
- row-gap: 4px;
1951
- }
1952
- .mdzip-root.navigation-pane-visible .toolbar-start {
1953
- display: contents;
1954
- }
1955
- .mdzip-root.navigation-pane-visible .toolbar-left {
1956
- grid-column: 1;
1957
- grid-row: 1;
1958
- }
1959
- .mdzip-root.navigation-pane-visible .edit-toolbar {
1960
- grid-column: 1 / -1;
1961
- grid-row: 2;
1962
- justify-self: start;
1963
- position: static;
1964
- transform: none;
1965
- }
1966
- .mdzip-root.navigation-pane-visible .view-mode-toggle-group {
1967
- position: static;
1968
- transform: none;
1969
- }
1970
- .mdzip-root.navigation-pane-visible .toolbar-controls {
1971
- grid-column: 3;
1972
- grid-row: 1;
1973
- }
1974
- }
1975
-
1976
- @media (prefers-reduced-motion: reduce) {
1977
- .mdzip-root .nav-pane,
1978
- .mdzip-root .nav-resizer {
1979
- transition: none;
1980
- }
1981
- }
1982
-
1983
- @media (max-width: 640px) {
1984
- .mdzip-root .toolbar {
1985
- grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
1986
- row-gap: 6px;
1987
- }
1988
- .mdzip-root .edit-toolbar {
1989
- overflow-x: auto;
1990
- }
1991
- .mdzip-root .toolbar-controls {
1992
- grid-column: 3;
1993
- grid-row: 1;
1994
- justify-self: end;
1995
- }
1996
- }
1997
-
1998
- @media print {
1999
- .mdzip-root {
2000
- height: auto;
2001
- min-height: 0;
2002
- overflow: visible;
2003
- display: block;
2004
- background: #ffffff;
2005
- color: #000000;
2006
- }
2007
-
2008
- .mdzip-root .toolbar,
2009
- .mdzip-root .document-strip,
2010
- .mdzip-root .nav-pane,
2011
- .mdzip-root .nav-resizer,
2012
- .mdzip-root .split-resizer,
2013
- .mdzip-root .edit-pane,
2014
- .mdzip-root .edit-toolbar,
2015
- .mdzip-root .mdzip-tooltip,
2016
- .mdzip-root .nav-context-menu,
2017
- .mdzip-root .title-dialog-backdrop,
2018
- .mdzip-root .zoom-popover {
2019
- display: none !important;
2020
- }
2021
-
2022
- .mdzip-root .workspace-shell {
2023
- display: block;
2024
- }
2025
-
2026
- .mdzip-root .pane-stack,
2027
- .mdzip-root .pane-stack.split-mode {
2028
- display: block;
2029
- height: auto;
2030
- }
2031
-
2032
- .mdzip-root .preview-pane {
2033
- display: block !important;
2034
- overflow: visible;
2035
- height: auto;
2036
- }
2037
-
2038
- .mdzip-root .preview-content {
2039
- max-width: 100%;
2040
- padding: 0;
2041
- font-size: 11pt;
2042
- line-height: 1.6;
2043
- }
2044
-
2045
- .mdzip-root .preview-content h1,
2046
- .mdzip-root .preview-content h2,
2047
- .mdzip-root .preview-content h3,
2048
- .mdzip-root .preview-content h4,
2049
- .mdzip-root .preview-content h5,
2050
- .mdzip-root .preview-content h6 {
2051
- page-break-after: avoid;
2052
- color: #000000;
2053
- }
2054
-
2055
- .mdzip-root .preview-content pre,
2056
- .mdzip-root .preview-content blockquote,
2057
- .mdzip-root .preview-content img,
2058
- .mdzip-root .preview-content table {
2059
- page-break-inside: avoid;
2060
- }
2061
-
2062
- .mdzip-root .preview-content pre,
2063
- .mdzip-root .preview-content code {
2064
- white-space: pre-wrap;
2065
- word-break: break-word;
2066
- background: #f6f8fa;
2067
- color: #000000;
2068
- border-color: #d0d7de;
2069
- }
2070
-
2071
- .mdzip-root .preview-content a {
2072
- color: #000000;
2073
- text-decoration: underline;
2074
- }
2075
-
2076
- .mdzip-root .preview-content img {
2077
- max-width: 100%;
2078
- }
2079
- }
2080
-
2081
- /* Syntax highlighting for code blocks in preview (highlight.js) */
2082
- .mdzip-root .preview-content pre code {
2083
- display: block;
2084
- overflow-x: auto;
2085
- padding: 12px;
2086
- background: var(--mdzip-editor-background-color);
2087
- border-radius: 4px;
2088
- font-family: "Courier New", Courier, monospace;
2089
- font-variant-ligatures: none;
2090
- font-feature-settings: "liga" 0, "calt" 0;
2091
- font-size: 12px;
2092
- color: var(--mdzip-editor-foreground-color);
2093
- }
2094
-
2095
- /* Dark theme (Monokai-inspired) - highlight.js classes */
2096
- .mdzip-root .hljs { color: #f8f8f2; }
2097
- .mdzip-root .hljs-comment { color: #75715e; }
2098
- .mdzip-root .hljs-string { color: #a6e22e; }
2099
- .mdzip-root .hljs-number { color: #ae81ff; }
2100
- .mdzip-root .hljs-literal { color: #ae81ff; }
2101
- .mdzip-root .hljs-attr { color: #a6e22e; }
2102
- .mdzip-root .hljs-keyword { color: #f92672; }
2103
- .mdzip-root .hljs-title { color: #a6e22e; }
2104
- .mdzip-root .hljs-punctuation { color: #f8f8f2; }
2105
- .mdzip-root .hljs-operator { color: #f92672; }
2106
-
2107
- /* Light theme - highlight.js classes */
2108
- .mdzip-root.mdzip-theme-light .hljs { color: #383a42; }
2109
- .mdzip-root.mdzip-theme-light .hljs-comment { color: #a0a1a7; }
2110
- .mdzip-root.mdzip-theme-light .hljs-string { color: #50a14f; }
2111
- .mdzip-root.mdzip-theme-light .hljs-number { color: #986801; }
2112
- .mdzip-root.mdzip-theme-light .hljs-literal { color: #986801; }
2113
- .mdzip-root.mdzip-theme-light .hljs-attr { color: #50a14f; }
2114
- .mdzip-root.mdzip-theme-light .hljs-keyword { color: #a626a4; }
2115
- .mdzip-root.mdzip-theme-light .hljs-title { color: #50a14f; }
2116
- .mdzip-root.mdzip-theme-light .hljs-punctuation { color: #383a42; }
2117
- .mdzip-root.mdzip-theme-light .hljs-operator { color: #a626a4; }
4
+ export const WORKSPACE_CSS = `
5
+ .mdzip-root {
6
+ /* Layout variables */
7
+ --mdz-zoom: 1;
8
+ --nav-pane-width: 280px;
9
+ --editor-pane-offset: 12px;
10
+ --workspace-pane-offset: 0px;
11
+ --split-edit-ratio: 0.5;
12
+
13
+ /* Theme variable mappings */
14
+ ${MDZIP_VARIABLES_CSS}
15
+
16
+ display: flex;
17
+ flex-direction: column;
18
+ width: 100%;
19
+ height: 100%;
20
+ min-height: 520px;
21
+ background: var(--mdzip-editor-background-color);
22
+ color: var(--mdzip-editor-foreground-color);
23
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
24
+ font-size: 13px;
25
+ overflow: hidden;
26
+ box-sizing: border-box;
27
+ }
28
+
29
+ .mdzip-root.toolbar-density-compact {
30
+ --mdzip-density-toolbar-padding: 3px 10px;
31
+ --mdzip-density-toolbar-gap: 4px;
32
+ --mdzip-density-toolbar-start-gap: 8px;
33
+ --mdzip-density-toolbar-group-padding: 2px;
34
+ --mdzip-density-toolbar-button-width: 34px;
35
+ --mdzip-density-toolbar-button-height: 30px;
36
+ --mdzip-density-toolbar-compact-button-size: 28px;
37
+ --mdzip-density-toolbar-icon-size: 15px;
38
+ --mdzip-density-toolbar-icon-large-size: 19px;
39
+ --mdzip-density-toolbar-icon-extra-large-size: 22px;
40
+ --mdzip-density-theme-icon-size: 16px;
41
+ --mdzip-density-format-toolbar-gap: 4px;
42
+ --mdzip-density-format-toolbar-group-gap: 1px;
43
+ --mdzip-density-format-button-size: 28px;
44
+ --mdzip-density-format-menu-button-width: 36px;
45
+ --mdzip-density-format-icon-size: 15px;
46
+ }
47
+
48
+ .mdzip-root.toolbar-density-dense {
49
+ --mdzip-density-toolbar-padding: 2px 8px;
50
+ --mdzip-density-toolbar-gap: 3px;
51
+ --mdzip-density-toolbar-start-gap: 6px;
52
+ --mdzip-density-toolbar-group-padding: 1px;
53
+ --mdzip-density-toolbar-button-width: 30px;
54
+ --mdzip-density-toolbar-button-height: 28px;
55
+ --mdzip-density-toolbar-compact-button-size: 26px;
56
+ --mdzip-density-toolbar-icon-size: 14px;
57
+ --mdzip-density-toolbar-icon-large-size: 18px;
58
+ --mdzip-density-toolbar-icon-extra-large-size: 20px;
59
+ --mdzip-density-theme-icon-size: 15px;
60
+ --mdzip-density-format-toolbar-gap: 3px;
61
+ --mdzip-density-format-toolbar-group-gap: 1px;
62
+ --mdzip-density-format-button-size: 26px;
63
+ --mdzip-density-format-menu-button-width: 34px;
64
+ --mdzip-density-format-icon-size: 14px;
65
+ }
66
+
67
+ .mdzip-root.content-density-compact {
68
+ --mdzip-density-editor-content-padding: 20px 28px;
69
+ --mdzip-density-preview-content-padding: 20px 24px 32px;
70
+ }
71
+
72
+ .mdzip-root.mdzip-theme-light {
73
+ color-scheme: light;
74
+ ${MDZIP_LIGHT_DEFAULTS_CSS}
75
+ }
76
+
77
+ .mdzip-root.mdzip-theme-dark {
78
+ color-scheme: dark;
79
+ ${MDZIP_DARK_DEFAULTS_CSS}
80
+ }
81
+
82
+ .mdzip-root *,
83
+ .mdzip-root *::before,
84
+ .mdzip-root *::after {
85
+ box-sizing: border-box;
86
+ }
87
+
88
+ .mdzip-root [hidden] {
89
+ display: none !important;
90
+ }
91
+
92
+ .mdzip-root .document-strip {
93
+ display: flex;
94
+ align-items: center;
95
+ gap: 5px;
96
+ min-height: 30px;
97
+ padding: 3px 12px;
98
+ background: var(--mdzip-editor-foreground-color);
99
+ background: rgba(0, 0, 0, 0.05);
100
+ border-bottom: 1px solid var(--mdzip-border-color);
101
+ flex: 0 0 auto;
102
+ }
103
+
104
+ .mdzip-root.mdzip-theme-dark .document-strip {
105
+ background: rgba(255, 255, 255, 0.08);
106
+ }
107
+
108
+ .mdzip-root .toolbar {
109
+ --view-mode-min-left: calc(var(--editor-pane-offset) + 520px);
110
+ --view-mode-max-left: calc(100% - 170px);
111
+
112
+ display: grid;
113
+ grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
114
+ align-items: center;
115
+ column-gap: 12px;
116
+ padding: var(--mdzip-toolbar-padding, var(--mdzip-density-toolbar-padding, 4px 12px));
117
+ background: var(--mdzip-toolbar-background-color);
118
+ border-bottom: 1px solid var(--mdzip-border-color);
119
+ min-height: 48px;
120
+ flex: 0 0 auto;
121
+ position: relative;
122
+ z-index: 5;
123
+ }
124
+
125
+ .mdzip-root .toolbar-left,
126
+ .mdzip-root .toolbar-controls {
127
+ display: flex;
128
+ align-items: center;
129
+ min-width: 0;
130
+ gap: var(--mdzip-toolbar-gap, var(--mdzip-density-toolbar-gap, 6px));
131
+ }
132
+
133
+ .mdzip-root .toolbar-start {
134
+ display: flex;
135
+ align-items: center;
136
+ justify-self: start;
137
+ min-width: 0;
138
+ gap: var(--mdzip-toolbar-start-gap, var(--mdzip-density-toolbar-start-gap, 12px));
139
+ }
140
+
141
+ .mdzip-root.navigation-pane-visible {
142
+ --editor-pane-offset: calc(var(--nav-pane-width) + 6px);
143
+ --workspace-pane-offset: calc(var(--nav-pane-width) + 6px);
144
+ }
145
+
146
+ .mdzip-root .toolbar-left {
147
+ flex: 0 0 auto;
148
+ overflow: hidden;
149
+ }
150
+
151
+ .mdzip-root .toolbar-controls {
152
+ grid-column: 3;
153
+ justify-self: end;
154
+ position: relative;
155
+ }
156
+
157
+ .mdzip-root .title-button {
158
+ flex: 1 1 auto;
159
+ border: 0;
160
+ background: transparent;
161
+ padding: 0;
162
+ margin: 0;
163
+ color: var(--mdzip-editor-foreground-color);
164
+ font: inherit;
165
+ font-size: 13px;
166
+ font-weight: 500;
167
+ text-decoration: none;
168
+ cursor: pointer;
169
+ min-width: 0;
170
+ overflow: hidden;
171
+ text-overflow: ellipsis;
172
+ white-space: nowrap;
173
+ }
174
+
175
+ .mdzip-root .title-button:hover {
176
+ text-decoration: underline;
177
+ text-underline-offset: 2px;
178
+ }
179
+
180
+ .mdzip-root .title-button:disabled {
181
+ color: var(--mdzip-editor-foreground-color);
182
+ text-decoration: none;
183
+ cursor: default;
184
+ }
185
+
186
+ .mdzip-root .title-filename {
187
+ font-weight: 400;
188
+ opacity: 0.6;
189
+ }
190
+
191
+ .mdzip-root .document-info-button {
192
+ display: inline-flex;
193
+ align-items: center;
194
+ justify-content: center;
195
+ flex: 0 0 24px;
196
+ width: 24px;
197
+ height: 24px;
198
+ padding: 0;
199
+ border: 0;
200
+ border-radius: 4px;
201
+ background: transparent;
202
+ color: var(--mdzip-muted-foreground-color);
203
+ cursor: pointer;
204
+ }
205
+
206
+ .mdzip-root .document-info-button:hover,
207
+ .mdzip-root .document-info-button:focus-visible {
208
+ outline: none;
209
+ background: var(--mdzip-control-hover-background-color);
210
+ color: var(--mdzip-control-foreground-color);
211
+ }
212
+
213
+ .mdzip-root .document-info-icon {
214
+ width: 15px;
215
+ height: 15px;
216
+ }
217
+
218
+ .mdzip-root .toolbar-buttons {
219
+ display: flex;
220
+ align-items: center;
221
+ gap: 4px;
222
+ justify-self: center;
223
+ padding: var(--mdzip-toolbar-group-padding, var(--mdzip-density-toolbar-group-padding, 3px));
224
+ border: 1px solid var(--mdzip-widget-border-color);
225
+ border-radius: 8px;
226
+ background: var(--mdzip-widget-background-color);
227
+ }
228
+
229
+ .mdzip-root .view-mode-toggle-group {
230
+ position: absolute;
231
+ left: clamp(
232
+ var(--view-mode-min-left),
233
+ calc((100% + var(--workspace-pane-offset)) / 2),
234
+ var(--view-mode-max-left)
235
+ );
236
+ top: 50%;
237
+ transform: translate(-50%, -50%);
238
+ gap: 2px;
239
+ /* Paint above the edit toolbar (z-index 6) with an opaque surface so any
240
+ residual overlap at unusual widths reads as a clean layered control. */
241
+ z-index: 7;
242
+ background: var(--mdzip-widget-background-color);
243
+ }
244
+
245
+ .mdzip-root .icon-toggle {
246
+ width: var(--mdzip-toolbar-button-width, var(--mdzip-toolbar-button-size, var(--mdzip-density-toolbar-button-width, 42px)));
247
+ height: var(--mdzip-toolbar-button-height, var(--mdzip-toolbar-button-size, var(--mdzip-density-toolbar-button-height, 36px)));
248
+ padding: 0;
249
+ cursor: pointer;
250
+ background: transparent;
251
+ color: var(--mdzip-control-foreground-color);
252
+ border: none;
253
+ border-radius: 5px;
254
+ display: inline-flex;
255
+ align-items: center;
256
+ justify-content: center;
257
+ }
258
+
259
+ .mdzip-root .icon-toggle.active {
260
+ background: var(--mdzip-accent-color);
261
+ color: var(--mdzip-accent-foreground-color);
262
+ }
263
+
264
+ .mdzip-root .icon-toggle:hover:not(.active):not(:disabled) {
265
+ background: var(--mdzip-control-hover-background-color);
266
+ }
267
+
268
+ .mdzip-root .icon-toggle:disabled {
269
+ opacity: 0.55;
270
+ cursor: not-allowed;
271
+ }
272
+
273
+ .mdzip-root .toggle-icon {
274
+ width: var(--mdzip-toolbar-icon-size, var(--mdzip-density-toolbar-icon-size, 17px));
275
+ height: var(--mdzip-toolbar-icon-size, var(--mdzip-density-toolbar-icon-size, 17px));
276
+ fill: none;
277
+ stroke: currentColor;
278
+ }
279
+
280
+ .mdzip-root .view-mode-toggle {
281
+ position: relative;
282
+ width: var(--mdzip-toolbar-compact-button-size, var(--mdzip-density-toolbar-compact-button-size, 32px));
283
+ height: var(--mdzip-toolbar-compact-button-size, var(--mdzip-density-toolbar-compact-button-size, 32px));
284
+ border-radius: 6px;
285
+ color: var(--mdzip-control-foreground-color);
286
+ }
287
+
288
+ .mdzip-root .view-mode-toggle.active {
289
+ background: var(--mdzip-control-hover-background-color);
290
+ color: var(--mdzip-link-color);
291
+ }
292
+
293
+ .mdzip-root .view-mode-toggle:hover:not(.active):not(:disabled) {
294
+ background: var(--mdzip-control-hover-background-color);
295
+ }
296
+
297
+ .mdzip-root .view-mode-toggle.active:hover:not(:disabled) {
298
+ background: var(--mdzip-control-hover-background-color);
299
+ }
300
+
301
+ .mdzip-root .view-mode-toggle .commandbar-flex-container {
302
+ display: flex;
303
+ align-items: center;
304
+ justify-content: center;
305
+ width: 100%;
306
+ height: 100%;
307
+ }
308
+
309
+ .mdzip-root .view-mode-toggle .toggle-icon {
310
+ width: var(--mdzip-toolbar-icon-large-size, var(--mdzip-density-toolbar-icon-large-size, 1.5em));
311
+ height: var(--mdzip-toolbar-icon-large-size, var(--mdzip-density-toolbar-icon-large-size, 1.5em));
312
+ }
313
+
314
+ .mdzip-root .nav-toggle {
315
+ width: var(--mdzip-toolbar-compact-button-size, var(--mdzip-density-toolbar-compact-button-size, 32px));
316
+ height: var(--mdzip-toolbar-compact-button-size, var(--mdzip-density-toolbar-compact-button-size, 32px));
317
+ border-radius: 6px;
318
+ }
319
+
320
+ .mdzip-root .nav-toggle.active {
321
+ background: var(--mdzip-control-hover-background-color);
322
+ color: var(--mdzip-link-color);
323
+ }
324
+
325
+ .mdzip-root .nav-toggle.convert-mdz-toggle {
326
+ color: var(--mdzip-link-color);
327
+ }
328
+
329
+ .mdzip-root .nav-toggle.convert-mdz-toggle:hover:not(:disabled) {
330
+ background: var(--mdzip-control-hover-background-color);
331
+ }
332
+
333
+ .mdzip-root .nav-toggle .toggle-icon {
334
+ width: var(--mdzip-toolbar-icon-extra-large-size, var(--mdzip-density-toolbar-icon-extra-large-size, 1.9em));
335
+ height: var(--mdzip-toolbar-icon-extra-large-size, var(--mdzip-density-toolbar-icon-extra-large-size, 1.9em));
336
+ }
337
+
338
+ .mdzip-root .zoom-toggle .toggle-icon {
339
+ width: var(--mdzip-toolbar-icon-large-size, var(--mdzip-density-toolbar-icon-large-size, 1.5em));
340
+ height: var(--mdzip-toolbar-icon-large-size, var(--mdzip-density-toolbar-icon-large-size, 1.5em));
341
+ }
342
+
343
+ /* Search, save and zoom match the menus beside them and the layout buttons:
344
+ one compact button size and one icon size, so the icons are evenly spaced. */
345
+ .mdzip-root .toolbar-controls > .icon-toggle {
346
+ width: var(--mdzip-toolbar-compact-button-size, var(--mdzip-density-toolbar-compact-button-size, 32px));
347
+ height: var(--mdzip-toolbar-compact-button-size, var(--mdzip-density-toolbar-compact-button-size, 32px));
348
+ border-radius: 6px;
349
+ }
350
+
351
+ .mdzip-root .toolbar-controls > .icon-toggle .toggle-icon {
352
+ width: var(--mdzip-theme-icon-size, var(--mdzip-density-theme-icon-size, 18px));
353
+ height: var(--mdzip-theme-icon-size, var(--mdzip-density-theme-icon-size, 18px));
354
+ }
355
+
356
+ .mdzip-root .zoom-toggle.active {
357
+ background: var(--mdzip-control-hover-background-color);
358
+ color: var(--mdzip-link-color);
359
+ }
360
+
361
+ .mdzip-root .theme-menu,
362
+ .mdzip-root .toolbar-menu {
363
+ position: relative;
364
+ display: flex;
365
+ align-items: center;
366
+ }
367
+
368
+ .mdzip-root .theme-menu-toggle,
369
+ .mdzip-root .toolbar-menu-toggle {
370
+ display: inline-flex;
371
+ align-items: center;
372
+ justify-content: center;
373
+ width: var(--mdzip-toolbar-compact-button-size, var(--mdzip-density-toolbar-compact-button-size, 32px));
374
+ height: var(--mdzip-toolbar-compact-button-size, var(--mdzip-density-toolbar-compact-button-size, 32px));
375
+ border-radius: 6px;
376
+ }
377
+
378
+ .mdzip-root .theme-menu-toggle.active,
379
+ .mdzip-root .toolbar-menu-toggle.active {
380
+ background: var(--mdzip-control-hover-background-color);
381
+ color: var(--mdzip-link-color);
382
+ }
383
+
384
+ .mdzip-root .theme-menu-icon,
385
+ .mdzip-root .toolbar-menu-icon {
386
+ display: inline-flex;
387
+ }
388
+
389
+ .mdzip-root .theme-menu-icon .toggle-icon,
390
+ .mdzip-root .toolbar-menu-icon .toggle-icon {
391
+ width: var(--mdzip-theme-icon-size, var(--mdzip-density-theme-icon-size, 18px));
392
+ height: var(--mdzip-theme-icon-size, var(--mdzip-density-theme-icon-size, 18px));
393
+ }
394
+
395
+ .mdzip-root .theme-popover,
396
+ .mdzip-root .toolbar-popover {
397
+ position: absolute;
398
+ top: calc(100% + 6px);
399
+ right: 0;
400
+ z-index: 20;
401
+ display: flex;
402
+ flex-direction: column;
403
+ gap: 2px;
404
+ padding: 4px;
405
+ border: 1px solid var(--mdzip-widget-border-color);
406
+ border-radius: 7px;
407
+ background: var(--mdzip-widget-background-color);
408
+ box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
409
+ }
410
+
411
+ .mdzip-root .theme-toggle,
412
+ .mdzip-root .toolbar-menu-item {
413
+ width: var(--mdzip-toolbar-compact-button-size, var(--mdzip-density-toolbar-compact-button-size, 32px));
414
+ height: var(--mdzip-toolbar-compact-button-size, var(--mdzip-density-toolbar-compact-button-size, 32px));
415
+ border-radius: 6px;
416
+ }
417
+
418
+ .mdzip-root .theme-toggle.active,
419
+ .mdzip-root .toolbar-menu-item.active {
420
+ background: var(--mdzip-control-hover-background-color);
421
+ color: var(--mdzip-link-color);
422
+ }
423
+
424
+ .mdzip-root .theme-toggle .toggle-icon,
425
+ .mdzip-root .toolbar-menu-item .toggle-icon {
426
+ width: var(--mdzip-theme-icon-size, var(--mdzip-density-theme-icon-size, 18px));
427
+ height: var(--mdzip-theme-icon-size, var(--mdzip-density-theme-icon-size, 18px));
428
+ }
429
+
430
+ .mdzip-root .workspace-shell {
431
+ display: flex;
432
+ flex: 1 1 auto;
433
+ min-height: 0;
434
+ }
435
+
436
+ .mdzip-root.resizing,
437
+ .mdzip-root.resizing * {
438
+ cursor: col-resize !important;
439
+ user-select: none;
440
+ }
441
+
442
+ .mdzip-root .nav-pane {
443
+ flex: 0 0 var(--nav-pane-width);
444
+ width: var(--nav-pane-width);
445
+ min-width: 180px;
446
+ max-width: 60vw;
447
+ border-right: 1px solid var(--mdzip-border-color);
448
+ background: var(--mdzip-sidebar-background-color);
449
+ color: var(--mdzip-sidebar-foreground-color);
450
+ overflow: auto;
451
+ transition:
452
+ flex-basis 0.18s ease,
453
+ width 0.18s ease,
454
+ min-width 0.18s ease,
455
+ opacity 0.14s ease,
456
+ border-color 0.18s ease;
457
+ }
458
+
459
+ .mdzip-root .nav-pane.hidden {
460
+ flex-basis: 0;
461
+ width: 0;
462
+ min-width: 0;
463
+ border-right-color: transparent;
464
+ opacity: 0;
465
+ overflow: hidden;
466
+ pointer-events: none;
467
+ }
468
+
469
+ .mdzip-root .nav-resizer {
470
+ position: relative;
471
+ flex: 0 0 6px;
472
+ background: transparent;
473
+ cursor: col-resize;
474
+ opacity: 1;
475
+ transition:
476
+ flex-basis 0.18s ease,
477
+ opacity 0.14s ease;
478
+ }
479
+
480
+ .mdzip-root .nav-resizer.hidden {
481
+ flex-basis: 0;
482
+ opacity: 0;
483
+ pointer-events: none;
484
+ }
485
+
486
+ .mdzip-root .nav-resizer::before,
487
+ .mdzip-root .split-resizer::before {
488
+ content: '';
489
+ position: absolute;
490
+ top: 0;
491
+ bottom: 0;
492
+ left: 2px;
493
+ width: 2px;
494
+ background: transparent;
495
+ transition: background 0.12s ease;
496
+ }
497
+
498
+ .mdzip-root .nav-resizer:hover::before,
499
+ .mdzip-root .split-resizer:hover::before {
500
+ background: var(--mdzip-focus-outline-color);
501
+ }
502
+
503
+ .mdzip-root .nav-tree {
504
+ padding: 14px 8px 24px;
505
+ }
506
+
507
+ .mdzip-root .nav-directory {
508
+ margin: 0;
509
+ position: relative;
510
+ }
511
+
512
+ .mdzip-root .nav-directory > summary {
513
+ list-style: none;
514
+ cursor: pointer;
515
+ position: relative;
516
+ }
517
+
518
+ .mdzip-root .nav-directory > summary::-webkit-details-marker {
519
+ display: none;
520
+ }
521
+
522
+ .mdzip-root .nav-directory > summary,
523
+ .mdzip-root .nav-file {
524
+ display: flex;
525
+ align-items: center;
526
+ gap: 9px;
527
+ width: 100%;
528
+ min-height: 34px;
529
+ /* No vertical padding: row height comes from min-height, and zero top/bottom
530
+ padding lets the stretched .nav-indent guide cells fill the full row so the
531
+ per-row rails meet between siblings instead of leaving padding-sized gaps. */
532
+ padding: 0 9px;
533
+ border: none;
534
+ border-radius: 4px;
535
+ background: transparent;
536
+ color: inherit;
537
+ font: inherit;
538
+ font-size: 14px;
539
+ text-align: left;
540
+ }
541
+
542
+ .mdzip-root .nav-file {
543
+ cursor: pointer;
544
+ }
545
+
546
+ .mdzip-root .nav-directory > summary:hover,
547
+ .mdzip-root .nav-file:hover {
548
+ background: var(--mdzip-hover-background-color);
549
+ }
550
+
551
+ /* Indentation comes from per-row guide cells (.nav-indent), not container
552
+ margins, so each row owns its guide lines. */
553
+ .mdzip-root .nav-directory-children {
554
+ position: relative;
555
+ }
556
+
557
+ /* One guide cell per ancestor depth, prepended to each nested row. Fixed width
558
+ gives the indentation; the rails/elbow are painted within the cell at the
559
+ row's own height, so they never overshoot an expanded last subfolder.
560
+
561
+ --nav-guide-x positions the rail so it drops straight from the parent
562
+ folder's icon: the icon sits 19px (caret 10px + the 9px row gap) right of its
563
+ disclosure column, and because the per-level step (cell 16px + 9px gap = 25)
564
+ equals the rail-to-icon distance, the same offset keeps every depth aligned. */
565
+ .mdzip-root .nav-indent {
566
+ flex: 0 0 16px;
567
+ align-self: stretch;
568
+ position: relative;
569
+ --nav-guide-x: 19px;
570
+ }
571
+
572
+ /* Ancestor column with more siblings below: continuous full-height rail. */
573
+ .mdzip-root .nav-indent-rail::before {
574
+ content: "";
575
+ position: absolute;
576
+ left: var(--nav-guide-x);
577
+ top: 0;
578
+ bottom: 0;
579
+ width: 1px;
580
+ background: var(--mdzip-tree-guide-color);
581
+ }
582
+
583
+ /* Connector to this row: vertical down to the row center (elbow └), extended
584
+ full-height for a tee (├) when the row's folder has siblings below. */
585
+ .mdzip-root .nav-indent-connector::before {
586
+ content: "";
587
+ position: absolute;
588
+ left: var(--nav-guide-x);
589
+ top: 0;
590
+ height: 50%;
591
+ width: 1px;
592
+ background: var(--mdzip-tree-guide-color);
593
+ }
594
+
595
+ .mdzip-root .nav-indent-connector.nav-indent-continues::before {
596
+ height: 100%;
597
+ }
598
+
599
+ /* Horizontal arm from the connector rail to the row's caret/icon. Reaches the
600
+ disclosure triangle that sits one row-gap past the cell (folders). */
601
+ .mdzip-root .nav-indent-connector::after {
602
+ content: "";
603
+ position: absolute;
604
+ left: var(--nav-guide-x);
605
+ right: -9px;
606
+ top: 50%;
607
+ height: 1px;
608
+ background: var(--mdzip-tree-guide-color);
609
+ }
610
+
611
+ /* Files have no disclosure triangle in the caret slot, so extend the arm across
612
+ it (the empty 10px caret plus the 9px row gaps on either side) to meet the
613
+ file icon; folders keep the short arm because their triangle already sits at
614
+ the cell edge. The right offset is measured from the cell edge, so this holds
615
+ regardless of where --nav-guide-x places the rail. */
616
+ .mdzip-root .nav-file > .nav-indent-connector::after {
617
+ right: calc(-1 * (10px + 2 * 9px));
618
+ }
619
+
620
+ .mdzip-root .nav-caret {
621
+ position: relative;
622
+ width: 10px;
623
+ flex: 0 0 10px;
624
+ color: var(--mdzip-muted-foreground-color);
625
+ }
626
+
627
+ .mdzip-root .nav-directory > summary .nav-caret::before {
628
+ content: "";
629
+ position: absolute;
630
+ left: 2px;
631
+ top: 50%;
632
+ width: 0;
633
+ height: 0;
634
+ border-top: 4px solid transparent;
635
+ border-bottom: 4px solid transparent;
636
+ border-left: 5px solid currentColor;
637
+ transform: translateY(-50%);
638
+ }
639
+
640
+ .mdzip-root .nav-directory[open] > summary .nav-caret::before {
641
+ transform: translateY(-45%) rotate(90deg);
642
+ }
643
+
644
+ .mdzip-root .nav-folder-icon {
645
+ display: inline-flex;
646
+ align-items: center;
647
+ justify-content: center;
648
+ flex: 0 0 22px;
649
+ width: 22px;
650
+ height: 22px;
651
+ color: var(--mdzip-control-foreground-color);
652
+ }
653
+
654
+ .mdzip-root .nav-folder-icon svg {
655
+ display: block;
656
+ width: 21px;
657
+ height: 21px;
658
+ }
659
+
660
+ .mdzip-root .nav-directory[open] > summary .nav-folder-icon.closed,
661
+ .mdzip-root .nav-directory:not([open]) > summary .nav-folder-icon.open {
662
+ display: none;
663
+ }
664
+
665
+ .mdzip-root .nav-file-icon {
666
+ display: inline-flex;
667
+ align-items: center;
668
+ justify-content: center;
669
+ flex: 0 0 30px;
670
+ width: 30px;
671
+ height: 24px;
672
+ border: 1px solid var(--mdzip-border-color);
673
+ border-radius: 3px;
674
+ background: var(--mdzip-widget-background-color);
675
+ color: var(--mdzip-muted-foreground-color);
676
+ font-size: 10px;
677
+ font-weight: 700;
678
+ line-height: 1;
679
+ }
680
+
681
+ .mdzip-root .nav-file-icon svg {
682
+ display: block;
683
+ }
684
+
685
+ .mdzip-root .nav-file-icon.markdown svg {
686
+ width: 21px;
687
+ height: 21px;
688
+ }
689
+
690
+ .mdzip-root .nav-file-icon.manifest svg {
691
+ width: 21px;
692
+ height: 21px;
693
+ }
694
+
695
+ .mdzip-root .nav-file-icon.markdown {
696
+ border: 0;
697
+ background: transparent;
698
+ }
699
+
700
+ .mdzip-root .nav-file-icon.manifest {
701
+ border: 0;
702
+ background: transparent;
703
+ color: #d18616;
704
+ }
705
+
706
+ .mdzip-root .nav-file-icon.image {
707
+ border: 0 !important;
708
+ background: transparent !important;
709
+ }
710
+
711
+ .mdzip-root .nav-file-icon.image svg {
712
+ width: 21px;
713
+ height: 21px;
714
+ }
715
+
716
+ .mdzip-root .nav-label {
717
+ flex: 1;
718
+ min-width: 0;
719
+ overflow: hidden;
720
+ text-overflow: ellipsis;
721
+ white-space: nowrap;
722
+ }
723
+
724
+ .mdzip-root .nav-file.current-entry {
725
+ background: var(--mdzip-selection-background-color);
726
+ }
727
+
728
+ .mdzip-root .nav-file.current-entry::after {
729
+ content: '';
730
+ width: 10px;
731
+ height: 10px;
732
+ flex: 0 0 10px;
733
+ border-radius: 50%;
734
+ background: var(--mdzip-link-color);
735
+ }
736
+
737
+ .mdzip-root .nav-file.orphaned-asset {
738
+ color: var(--mdzip-muted-foreground-color);
739
+ }
740
+
741
+ .mdzip-root .nav-orphan-button {
742
+ flex: 0 0 22px;
743
+ width: 22px;
744
+ height: 22px;
745
+ display: inline-flex;
746
+ align-items: center;
747
+ justify-content: center;
748
+ border: 0;
749
+ border-radius: 4px;
750
+ background: transparent;
751
+ color: #9a6700;
752
+ cursor: pointer;
753
+ }
754
+
755
+ .mdzip-root .nav-orphan-button:hover {
756
+ background: rgba(154, 103, 0, 0.12);
757
+ }
758
+
759
+ .mdzip-root .nav-orphan-button svg {
760
+ width: 15px;
761
+ height: 15px;
762
+ fill: currentColor;
763
+ }
764
+
765
+ .mdzip-root .nav-context-menu {
766
+ position: fixed;
767
+ z-index: 200;
768
+ min-width: 190px;
769
+ padding: 4px;
770
+ border: 1px solid var(--mdzip-widget-border-color);
771
+ border-radius: 4px;
772
+ background: var(--mdzip-editor-background-color);
773
+ color: var(--mdzip-editor-foreground-color);
774
+ box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
775
+ }
776
+
777
+ .mdzip-root .nav-context-menu button {
778
+ display: flex;
779
+ align-items: center;
780
+ gap: 10px;
781
+ width: 100%;
782
+ min-height: 28px;
783
+ padding: 4px 10px;
784
+ border: none;
785
+ border-radius: 3px;
786
+ background: transparent;
787
+ color: inherit;
788
+ font: inherit;
789
+ text-align: left;
790
+ cursor: pointer;
791
+ }
792
+
793
+ .mdzip-root .nav-context-menu .nav-menu-icon {
794
+ flex: 0 0 auto;
795
+ width: 16px;
796
+ height: 16px;
797
+ opacity: 0.8;
798
+ }
799
+
800
+ .mdzip-root .nav-context-menu .nav-menu-label {
801
+ flex: 1 1 auto;
802
+ }
803
+
804
+ .mdzip-root .nav-context-menu .nav-menu-shortcut {
805
+ flex: 0 0 auto;
806
+ margin-left: 16px;
807
+ font-size: 0.85em;
808
+ opacity: 0.55;
809
+ font-variant-numeric: tabular-nums;
810
+ }
811
+
812
+ .mdzip-root .nav-context-menu .nav-menu-chevron {
813
+ flex: 0 0 auto;
814
+ width: 14px;
815
+ height: 14px;
816
+ margin-right: -2px;
817
+ opacity: 0.55;
818
+ }
819
+
820
+ .mdzip-root .nav-menu-submenu-wrap {
821
+ position: relative;
822
+ }
823
+
824
+ .mdzip-root .nav-context-submenu {
825
+ position: absolute;
826
+ left: 100%;
827
+ top: -5px;
828
+ display: none;
829
+ min-width: 190px;
830
+ max-height: min(60vh, 420px);
831
+ overflow-y: auto;
832
+ padding: 4px;
833
+ border: 1px solid var(--mdzip-widget-border-color);
834
+ border-radius: 4px;
835
+ background: var(--mdzip-editor-background-color);
836
+ color: var(--mdzip-editor-foreground-color);
837
+ box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
838
+ }
839
+
840
+ .mdzip-root .nav-menu-submenu-wrap.open-left > .nav-context-submenu {
841
+ left: auto;
842
+ right: 100%;
843
+ }
844
+
845
+ .mdzip-root .nav-menu-submenu-wrap:hover > .nav-context-submenu,
846
+ .mdzip-root .nav-menu-submenu-wrap:focus-within > .nav-context-submenu {
847
+ display: block;
848
+ }
849
+
850
+ .mdzip-root .nav-context-menu button:hover,
851
+ .mdzip-root .nav-context-menu button:focus-visible {
852
+ outline: none;
853
+ background: var(--mdzip-hover-background-color);
854
+ }
855
+
856
+ .mdzip-root .nav-context-menu button:disabled {
857
+ opacity: 0.6;
858
+ cursor: default;
859
+ }
860
+
861
+ .mdzip-root .nav-context-menu button:disabled:hover,
862
+ .mdzip-root .nav-context-menu button:disabled:focus-visible {
863
+ background: transparent;
864
+ }
865
+
866
+ .mdzip-root .nav-menu-separator {
867
+ height: 1px;
868
+ margin: 4px 6px;
869
+ background: var(--mdzip-border-color);
870
+ }
871
+
872
+ .mdzip-root .nav-file.entry-point .nav-label {
873
+ font-weight: 600;
874
+ }
875
+
876
+ .mdzip-root .nav-directory.pending-folder > summary {
877
+ opacity: 0.7;
878
+ }
879
+
880
+ .mdzip-root details.nav-directory.drag-over > summary,
881
+ .mdzip-root .nav-tree.drag-over {
882
+ background: var(--mdzip-hover-background-color);
883
+ border-radius: 4px;
884
+ }
885
+
886
+ .mdzip-root .title-dialog-actions .danger-action {
887
+ border-color: #b42318;
888
+ background: #b42318;
889
+ color: #ffffff;
890
+ }
891
+
892
+ .mdzip-root .mdzip-tooltip {
893
+ position: fixed;
894
+ z-index: 10000;
895
+ max-width: min(320px, calc(100vw - 16px));
896
+ padding: 5px 8px;
897
+ border: 1px solid var(--mdzip-border-color);
898
+ border-radius: 5px;
899
+ background: var(--mdzip-editor-foreground-color);
900
+ color: var(--mdzip-editor-background-color);
901
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
902
+ font-size: 12px;
903
+ line-height: 1.35;
904
+ /* One line up to max-width, then wraps instead of being cut off. */
905
+ width: max-content;
906
+ white-space: normal;
907
+ pointer-events: none;
908
+ }
909
+
910
+ .mdzip-root .mdzip-copy-toast {
911
+ position: fixed;
912
+ z-index: 10000;
913
+ left: 50%;
914
+ bottom: 20px;
915
+ transform: translateX(-50%);
916
+ max-width: min(320px, calc(100vw - 32px));
917
+ padding: 8px 14px;
918
+ border-radius: 6px;
919
+ background: var(--mdzip-editor-foreground-color);
920
+ color: var(--mdzip-editor-background-color);
921
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
922
+ font-size: 12px;
923
+ line-height: 1.35;
924
+ text-align: center;
925
+ pointer-events: none;
926
+ }
927
+
928
+ .mdzip-root .pane-stack {
929
+ display: block;
930
+ flex: 1;
931
+ min-width: 0;
932
+ height: 100%;
933
+ }
934
+
935
+ .mdzip-root .pane-stack.split-mode {
936
+ display: flex;
937
+ flex-direction: row;
938
+ }
939
+
940
+ .mdzip-root .pane {
941
+ display: none;
942
+ height: 100%;
943
+ overflow: hidden;
944
+ }
945
+
946
+ .mdzip-root .pane.active {
947
+ display: block;
948
+ }
949
+
950
+ .mdzip-root .pane-stack.split-mode .pane {
951
+ display: block !important;
952
+ min-width: 0;
953
+ height: 100%;
954
+ }
955
+
956
+ .mdzip-root .pane-stack.split-mode .edit-pane {
957
+ flex: 0 0 calc((100% - 6px) * var(--split-edit-ratio));
958
+ }
959
+
960
+ .mdzip-root .pane-stack.split-mode .preview-pane {
961
+ flex: 1 1 auto;
962
+ }
963
+
964
+ .mdzip-root .preview-pane {
965
+ overflow: auto;
966
+ /* Chrome's scroll-anchoring tries to keep the same visible content pinned
967
+ * when a layout shift happens above the viewport (e.g. a chunk reconcile
968
+ * re-rendering a mermaid diagram to a different height, or an image
969
+ * finishing decode) by silently adjusting scrollTop on its own — firing a
970
+ * genuine, non-echo 'scroll' event with no explicit write behind it. The
971
+ * editor/preview scroll-sync listeners can't distinguish that from a real
972
+ * user scroll, so they propagate it to the other pane, whose own
973
+ * anchoring can then react in turn, compounding into a visible jump on
974
+ * the very next edit after a layout-affecting mount. Disabling anchoring
975
+ * here means a layout shift leaves scrollTop exactly where it was
976
+ * instead of "helpfully" moving it.
977
+ */
978
+ overflow-anchor: none;
979
+ }
980
+
981
+ .mdzip-root .preview-pane:focus {
982
+ outline: none;
983
+ }
984
+
985
+ .mdzip-root .entry-pane {
986
+ overflow: auto;
987
+ }
988
+
989
+ .mdzip-root .pane-stack.entry-claimed .edit-pane,
990
+ .mdzip-root .pane-stack.entry-claimed .preview-pane,
991
+ .mdzip-root .pane-stack.entry-claimed .split-resizer {
992
+ display: none !important;
993
+ }
994
+
995
+ .mdzip-root .edit-pane {
996
+ overflow: hidden;
997
+ flex-direction: column;
998
+ }
999
+
1000
+ /* See the matching comment on .preview-pane's overflow-anchor: none — same
1001
+ * reasoning applies here. CodeMirror's own line-height re-measurement after
1002
+ * an edit can shift content above the viewport too, and native scroll
1003
+ * anchoring reacting to that is indistinguishable, from the sync listener's
1004
+ * side, from the user actually scrolling.
1005
+ */
1006
+ .mdzip-root .cm-scroller {
1007
+ overflow-anchor: none;
1008
+ }
1009
+
1010
+ .mdzip-root .edit-pane.active {
1011
+ display: flex;
1012
+ }
1013
+
1014
+ .mdzip-root .pane-stack.split-mode .edit-pane {
1015
+ display: flex !important;
1016
+ }
1017
+
1018
+ .mdzip-root .edit-toolbar {
1019
+ display: flex;
1020
+ align-items: center;
1021
+ gap: var(--mdzip-format-toolbar-gap, var(--mdzip-density-format-toolbar-gap, 7px));
1022
+ min-height: 32px;
1023
+ padding: 0;
1024
+ overflow: visible;
1025
+ border: 0;
1026
+ background: transparent;
1027
+ flex: 0 0 auto;
1028
+ position: absolute;
1029
+ left: var(--editor-pane-offset);
1030
+ top: 50%;
1031
+ transform: translateY(-50%);
1032
+ z-index: 6;
1033
+ }
1034
+
1035
+ .mdzip-root:not(.navigation-pane-visible) .edit-toolbar {
1036
+ position: static;
1037
+ transform: none;
1038
+ }
1039
+
1040
+ .mdzip-root .edit-toolbar-group {
1041
+ display: flex;
1042
+ align-items: center;
1043
+ gap: var(--mdzip-format-toolbar-group-gap, var(--mdzip-density-format-toolbar-group-gap, 2px));
1044
+ flex: 0 0 auto;
1045
+ }
1046
+
1047
+ .mdzip-root .edit-toolbar button {
1048
+ display: inline-flex;
1049
+ align-items: center;
1050
+ justify-content: center;
1051
+ gap: 2px;
1052
+ width: var(--mdzip-format-button-size, var(--mdzip-density-format-button-size, 32px));
1053
+ height: var(--mdzip-format-button-size, var(--mdzip-density-format-button-size, 32px));
1054
+ padding: 0;
1055
+ border: 0;
1056
+ border-radius: 5px;
1057
+ background: transparent;
1058
+ color: var(--mdzip-control-foreground-color);
1059
+ cursor: pointer;
1060
+ }
1061
+
1062
+ .mdzip-root .edit-toolbar button:hover,
1063
+ .mdzip-root .edit-toolbar button:focus-visible {
1064
+ outline: none;
1065
+ background: var(--mdzip-control-hover-background-color);
1066
+ }
1067
+
1068
+ .mdzip-root .edit-toolbar button:focus-visible {
1069
+ box-shadow: inset 0 0 0 1px var(--mdzip-focus-outline-color);
1070
+ }
1071
+
1072
+ .mdzip-root .edit-toolbar .format-menu {
1073
+ position: relative;
1074
+ flex: 0 0 auto;
1075
+ }
1076
+
1077
+ .mdzip-root .edit-toolbar .format-menu-toggle {
1078
+ width: var(--mdzip-format-menu-button-width, var(--mdzip-density-format-menu-button-width, 42px));
1079
+ gap: 2px;
1080
+ }
1081
+
1082
+ .mdzip-root .edit-toolbar .format-menu-toggle[aria-expanded="true"] {
1083
+ background: var(--mdzip-control-hover-background-color);
1084
+ box-shadow: inset 0 0 0 1px var(--mdzip-focus-outline-color);
1085
+ }
1086
+
1087
+ .mdzip-root .edit-toolbar .format-menu-popover {
1088
+ position: absolute;
1089
+ top: calc(100% + 6px);
1090
+ left: 0;
1091
+ z-index: 20;
1092
+ min-width: 164px;
1093
+ padding: 5px;
1094
+ border: 1px solid var(--mdzip-widget-border-color);
1095
+ border-radius: 7px;
1096
+ background: var(--mdzip-widget-background-color);
1097
+ color: var(--mdzip-editor-foreground-color);
1098
+ box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
1099
+ }
1100
+
1101
+ .mdzip-root .edit-toolbar .format-menu-popover button {
1102
+ display: flex;
1103
+ justify-content: flex-start;
1104
+ gap: 10px;
1105
+ width: 100%;
1106
+ height: 32px;
1107
+ padding: 0 10px;
1108
+ border-radius: 4px;
1109
+ color: inherit;
1110
+ font: inherit;
1111
+ white-space: nowrap;
1112
+ }
1113
+
1114
+ .mdzip-root .edit-toolbar .format-menu-popover button:hover,
1115
+ .mdzip-root .edit-toolbar .format-menu-popover button:focus-visible {
1116
+ background: var(--mdzip-control-hover-background-color);
1117
+ box-shadow: none;
1118
+ }
1119
+
1120
+ .mdzip-root .edit-toolbar .format-menu-popover strong {
1121
+ display: inline-block;
1122
+ width: 22px;
1123
+ color: var(--mdzip-muted-foreground-color);
1124
+ font-size: 11px;
1125
+ text-align: center;
1126
+ }
1127
+
1128
+ .mdzip-root .format-icon {
1129
+ width: var(--mdzip-format-icon-size, var(--mdzip-density-format-icon-size, 17px));
1130
+ height: var(--mdzip-format-icon-size, var(--mdzip-density-format-icon-size, 17px));
1131
+ fill: none;
1132
+ stroke: currentColor;
1133
+ }
1134
+
1135
+ .mdzip-root .format-chevron {
1136
+ width: 12px;
1137
+ height: 12px;
1138
+ fill: none;
1139
+ stroke: currentColor;
1140
+ }
1141
+
1142
+ .mdzip-root .edit-toolbar-divider {
1143
+ width: 1px;
1144
+ height: 22px;
1145
+ background: var(--mdzip-border-color);
1146
+ flex: 0 0 auto;
1147
+ }
1148
+
1149
+ .mdzip-root .editor-host {
1150
+ flex: 1 1 auto;
1151
+ min-height: 0;
1152
+ overflow: hidden;
1153
+ }
1154
+
1155
+ .mdzip-root .editor-host .cm-editor {
1156
+ height: 100%;
1157
+ }
1158
+
1159
+ .mdzip-root .split-resizer {
1160
+ display: none;
1161
+ position: relative;
1162
+ flex: 0 0 6px;
1163
+ cursor: col-resize;
1164
+ }
1165
+
1166
+ .mdzip-root .pane-stack.split-mode .split-resizer {
1167
+ display: block;
1168
+ }
1169
+
1170
+ .mdzip-root .pane-stack.split-mode .split-resizer::before {
1171
+ background: var(--mdzip-border-color);
1172
+ }
1173
+
1174
+ .mdzip-root .pane-stack.split-mode .split-resizer:hover::before {
1175
+ background: var(--mdzip-focus-outline-color);
1176
+ }
1177
+
1178
+ .mdzip-root .preview-content {
1179
+ max-width: var(--mdzip-preview-content-max-width, calc(900px * var(--mdz-zoom)));
1180
+ margin: 0 auto;
1181
+ padding: var(--mdzip-preview-content-padding, var(--mdzip-density-preview-content-padding, 36px 32px 48px));
1182
+ line-height: 1.55;
1183
+ font-size: calc(16px * var(--mdz-zoom));
1184
+ }
1185
+
1186
+ .mdzip-root .preview-content h1,
1187
+ .mdzip-root .preview-content h2,
1188
+ .mdzip-root .preview-content h3,
1189
+ .mdzip-root .preview-content h4,
1190
+ .mdzip-root .preview-content h5,
1191
+ .mdzip-root .preview-content h6 {
1192
+ color: var(--mdzip-editor-foreground-color);
1193
+ margin-top: 1.4em;
1194
+ margin-bottom: 0.4em;
1195
+ line-height: 1.25;
1196
+ }
1197
+
1198
+ .mdzip-root .preview-content h1 {
1199
+ font-size: 2em;
1200
+ border-bottom: 1px solid var(--mdzip-border-color);
1201
+ padding-bottom: 0.25em;
1202
+ }
1203
+
1204
+ .mdzip-root .preview-content > :first-child {
1205
+ margin-top: 0;
1206
+ }
1207
+
1208
+ /* Chunked (progressiveTextRendering) mounting wraps each rendered chunk in
1209
+ a mount boundary. display:contents drops it from the box tree so margin
1210
+ collapsing and other layout behave exactly as the non-chunked path (one
1211
+ flat run of blocks) — but :first-child selector matching still follows
1212
+ the real DOM tree regardless of display, so the rule above needs a
1213
+ companion for the now one-level-deeper first real content element. */
1214
+ .mdzip-root .preview-content > .mdzip-chunk {
1215
+ display: contents;
1216
+ }
1217
+
1218
+ .mdzip-root .preview-content > .mdzip-chunk:first-child > :first-child {
1219
+ margin-top: 0;
1220
+ }
1221
+
1222
+ .mdzip-root .preview-content h2 {
1223
+ font-size: 1.5em;
1224
+ border-bottom: 1px solid var(--mdzip-border-color);
1225
+ padding-bottom: 0.2em;
1226
+ }
1227
+
1228
+ .mdzip-root .preview-content h3 {
1229
+ font-size: 1.2em;
1230
+ }
1231
+
1232
+ .mdzip-root .preview-content p {
1233
+ margin: 0.8em 0;
1234
+ }
1235
+
1236
+ .mdzip-root .preview-content code {
1237
+ font-family: "Cascadia Code", Consolas, monospace;
1238
+ font-variant-ligatures: none;
1239
+ font-feature-settings: "liga" 0, "calt" 0;
1240
+ font-size: 0.9em;
1241
+ background: var(--mdzip-code-background-color);
1242
+ border: 1px solid var(--mdzip-border-color);
1243
+ border-radius: 3px;
1244
+ padding: 1px 5px;
1245
+ }
1246
+
1247
+ .mdzip-root .preview-content pre {
1248
+ background: var(--mdzip-code-background-color);
1249
+ border: 1px solid var(--mdzip-border-color);
1250
+ border-radius: 5px;
1251
+ padding: 14px 18px;
1252
+ overflow-x: auto;
1253
+ }
1254
+
1255
+ .mdzip-root .preview-content pre code {
1256
+ background: none;
1257
+ border: none;
1258
+ padding: 0;
1259
+ }
1260
+
1261
+ /* Built-in code-block chrome (#29): the wrapper owns the outer border/radius
1262
+ that .preview-content pre normally draws on itself, so the header sits
1263
+ flush above it with no double border. */
1264
+ .mdzip-root .preview-content .mdzip-code-block {
1265
+ margin: 1em 0;
1266
+ border: 1px solid var(--mdzip-border-color);
1267
+ border-radius: 5px;
1268
+ overflow: hidden;
1269
+ }
1270
+
1271
+ .mdzip-root .preview-content .mdzip-code-block pre {
1272
+ margin: 0;
1273
+ border: none;
1274
+ border-radius: 0;
1275
+ }
1276
+
1277
+ .mdzip-root .preview-content .mdzip-code-block-header {
1278
+ display: flex;
1279
+ align-items: center;
1280
+ justify-content: space-between;
1281
+ gap: 8px;
1282
+ padding: 3px 6px 3px 12px;
1283
+ background: var(--mdzip-widget-background-color);
1284
+ border-bottom: 1px solid var(--mdzip-border-color);
1285
+ }
1286
+
1287
+ .mdzip-root .preview-content .mdzip-code-block-lang {
1288
+ font-family: "Cascadia Code", Consolas, monospace;
1289
+ font-size: 0.75em;
1290
+ color: var(--mdzip-muted-foreground-color);
1291
+ }
1292
+
1293
+ .mdzip-root .preview-content .mdzip-code-block-actions {
1294
+ display: flex;
1295
+ align-items: center;
1296
+ gap: 2px;
1297
+ }
1298
+
1299
+ .mdzip-root .preview-content .mdzip-code-block-btn {
1300
+ display: inline-flex;
1301
+ align-items: center;
1302
+ justify-content: center;
1303
+ width: 24px;
1304
+ height: 24px;
1305
+ padding: 0;
1306
+ border: none;
1307
+ border-radius: 4px;
1308
+ background: none;
1309
+ color: var(--mdzip-muted-foreground-color);
1310
+ cursor: pointer;
1311
+ }
1312
+
1313
+ .mdzip-root .preview-content .mdzip-code-block-btn:hover {
1314
+ background: var(--mdzip-control-hover-background-color);
1315
+ color: var(--mdzip-control-foreground-color);
1316
+ }
1317
+
1318
+ .mdzip-root .preview-content .mdzip-code-block-btn:disabled {
1319
+ opacity: 0.4;
1320
+ cursor: default;
1321
+ }
1322
+
1323
+ .mdzip-root .preview-content .mdzip-code-block-btn:disabled:hover {
1324
+ background: none;
1325
+ }
1326
+
1327
+ .mdzip-root .preview-content .mdzip-code-block-btn-copied {
1328
+ color: var(--mdzip-accent-color);
1329
+ }
1330
+
1331
+ .mdzip-root .preview-content .mdzip-code-block-icon {
1332
+ width: 14px;
1333
+ height: 14px;
1334
+ }
1335
+
1336
+ /* Chevron points "forward" (collapsed) vs down (expanded), driven by the
1337
+ same aria-expanded state assistive tech reads — no separate visual-only
1338
+ state to keep in sync. */
1339
+ .mdzip-root .preview-content .mdzip-code-block-btn[aria-expanded="false"] .mdzip-code-block-icon {
1340
+ transform: rotate(-90deg);
1341
+ }
1342
+
1343
+ .mdzip-root .preview-content .mdzip-code-block-body {
1344
+ position: relative;
1345
+ transition: max-height 0.2s ease-out;
1346
+ }
1347
+
1348
+ .mdzip-root .preview-content .mdzip-code-block-collapsed .mdzip-code-block-body {
1349
+ max-height: 240px;
1350
+ overflow: hidden;
1351
+ }
1352
+
1353
+ .mdzip-root .preview-content .mdzip-code-block-collapsed .mdzip-code-block-body::after {
1354
+ content: "";
1355
+ position: absolute;
1356
+ inset: auto 0 0 0;
1357
+ height: 48px;
1358
+ background: linear-gradient(to bottom, transparent, var(--mdzip-code-background-color));
1359
+ pointer-events: none;
1360
+ }
1361
+
1362
+ /* An explicit rule so consecutive rules stay separate (#57); host resets often
1363
+ leave hr with no margin, and three in a row read as one thick band. */
1364
+ .mdzip-root .preview-content hr {
1365
+ height: 0;
1366
+ margin: 1.5em 0;
1367
+ border: 0;
1368
+ border-top: 1px solid var(--mdzip-border-color);
1369
+ }
1370
+
1371
+ .mdzip-root .preview-content .footnotes {
1372
+ margin-top: 2em;
1373
+ padding-top: 0.75em;
1374
+ border-top: 1px solid var(--mdzip-border-color);
1375
+ font-size: 0.9em;
1376
+ color: var(--mdzip-muted-foreground-color);
1377
+ }
1378
+
1379
+ .mdzip-root .preview-content .footnotes .sr-only {
1380
+ position: absolute;
1381
+ width: 1px;
1382
+ height: 1px;
1383
+ padding: 0;
1384
+ margin: -1px;
1385
+ overflow: hidden;
1386
+ clip: rect(0, 0, 0, 0);
1387
+ white-space: nowrap;
1388
+ border: 0;
1389
+ }
1390
+
1391
+ .mdzip-root .preview-content sup > a[href^="#footnote-"] {
1392
+ text-decoration: none;
1393
+ }
1394
+
1395
+ .mdzip-root .preview-content blockquote {
1396
+ border-left: 4px solid var(--mdzip-link-color);
1397
+ margin: 1em 0;
1398
+ padding: 0.5em 1em;
1399
+ color: var(--mdzip-muted-foreground-color);
1400
+ background: var(--mdzip-code-background-color);
1401
+ }
1402
+
1403
+ .mdzip-root .preview-content .task-list-item {
1404
+ list-style-type: none;
1405
+ }
1406
+
1407
+ .mdzip-root .preview-content .task-list-item-checkbox {
1408
+ margin: 0 0.35em 0.2em -1.4em;
1409
+ vertical-align: middle;
1410
+ }
1411
+
1412
+ .mdzip-root .preview-content .mdzip-table-scroll {
1413
+ width: 100%;
1414
+ margin: 1em 0;
1415
+ overflow-x: auto;
1416
+ }
1417
+
1418
+ .mdzip-root .preview-content table {
1419
+ width: 100%;
1420
+ border-collapse: collapse;
1421
+ border-spacing: 0;
1422
+ }
1423
+
1424
+ .mdzip-root .preview-content th,
1425
+ .mdzip-root .preview-content td {
1426
+ padding: 8px 12px;
1427
+ border: 1px solid var(--mdzip-border-color);
1428
+ text-align: left;
1429
+ vertical-align: top;
1430
+ }
1431
+
1432
+ .mdzip-root .preview-content th {
1433
+ background: var(--mdzip-widget-background-color);
1434
+ font-weight: 600;
1435
+ white-space: nowrap;
1436
+ }
1437
+
1438
+ .mdzip-root .preview-content td code,
1439
+ .mdzip-root .preview-content th code {
1440
+ white-space: nowrap;
1441
+ }
1442
+
1443
+ /* Markdown table alignment (left/center/right column syntax) survives as the
1444
+ align attribute on th/td, but that's a presentational HTML hint — the plain
1445
+ text-align: left above is a real stylesheet rule and would otherwise always
1446
+ win regardless of column position. Right/center-aligned cells are also
1447
+ typically short, fixed values (numbers, totals) that read better holding
1448
+ their line, unlike left-aligned prose columns, which should wrap to fit
1449
+ the pane. */
1450
+ .mdzip-root .preview-content th[align="left"],
1451
+ .mdzip-root .preview-content td[align="left"] {
1452
+ text-align: left;
1453
+ }
1454
+
1455
+ .mdzip-root .preview-content th[align="center"],
1456
+ .mdzip-root .preview-content td[align="center"] {
1457
+ text-align: center;
1458
+ white-space: nowrap;
1459
+ }
1460
+
1461
+ .mdzip-root .preview-content th[align="right"],
1462
+ .mdzip-root .preview-content td[align="right"] {
1463
+ text-align: right;
1464
+ white-space: nowrap;
1465
+ }
1466
+
1467
+ .mdzip-root .preview-content td:last-child:not([align="center"]):not([align="right"]) {
1468
+ min-width: 220px;
1469
+ max-width: 320px;
1470
+ }
1471
+
1472
+ .mdzip-root .preview-content tbody tr:nth-child(even) {
1473
+ background: var(--mdzip-hover-background-color);
1474
+ }
1475
+
1476
+ .mdzip-root .preview-content img {
1477
+ max-width: 100%;
1478
+ height: auto;
1479
+ border-radius: 4px;
1480
+ }
1481
+
1482
+ .mdzip-root .preview-content img.mdzip-image-left,
1483
+ .mdzip-root .preview-content img.mdzip-image-wrap-left {
1484
+ float: left;
1485
+ margin: 0.25em 1em 0.75em 0;
1486
+ }
1487
+
1488
+ .mdzip-root .preview-content img.mdzip-image-right,
1489
+ .mdzip-root .preview-content img.mdzip-image-wrap-right {
1490
+ float: right;
1491
+ margin: 0.25em 0 0.75em 1em;
1492
+ }
1493
+
1494
+ .mdzip-root .preview-content img.mdzip-image-center {
1495
+ display: block;
1496
+ margin-left: auto;
1497
+ margin-right: auto;
1498
+ }
1499
+
1500
+ /* Progressive image hydration. Each archive image mounts inside a collapsed
1501
+ slot so the text stays compact and immediately readable; when the image
1502
+ resolves, the slot eases open (0fr -> 1fr) to the height reserved from its
1503
+ sniffed dimensions, in a single slide, and the pixels drop into the exact
1504
+ box with no further reflow. */
1505
+ .mdzip-root .preview-content .mdzip-image-slot {
1506
+ display: inline-grid;
1507
+ grid-template-rows: 0fr;
1508
+ overflow: hidden;
1509
+ vertical-align: bottom;
1510
+ transition: grid-template-rows 0.28s ease;
1511
+ }
1512
+
1513
+ .mdzip-root .preview-content .mdzip-image-slot.mdzip-image-open {
1514
+ grid-template-rows: 1fr;
1515
+ }
1516
+
1517
+ .mdzip-root .preview-content .mdzip-image-slot.mdzip-image-animation-off {
1518
+ transition: none;
1519
+ }
1520
+
1521
+ .mdzip-root .preview-content .mdzip-image-slot > img {
1522
+ min-height: 0;
1523
+ }
1524
+
1525
+ .mdzip-root .preview-content .mdzip-image-slot.mdzip-image-align-left {
1526
+ float: left;
1527
+ margin: 0.25em 1em 0.75em 0;
1528
+ }
1529
+
1530
+ .mdzip-root .preview-content .mdzip-image-slot.mdzip-image-align-right {
1531
+ float: right;
1532
+ margin: 0.25em 0 0.75em 1em;
1533
+ }
1534
+
1535
+ .mdzip-root .preview-content img.mdzip-image-loading {
1536
+ background: var(--mdzip-control-background-color, rgba(127, 127, 127, 0.12));
1537
+ animation: mdzip-image-pulse 1.2s ease-in-out infinite;
1538
+ }
1539
+
1540
+ @keyframes mdzip-image-pulse {
1541
+ 0%, 100% { opacity: 1; }
1542
+ 50% { opacity: 0.55; }
1543
+ }
1544
+
1545
+ @media (prefers-reduced-motion: reduce) {
1546
+ .mdzip-root .preview-content .mdzip-code-block-body {
1547
+ transition: none;
1548
+ }
1549
+ .mdzip-root .preview-content .mdzip-image-slot {
1550
+ transition: none;
1551
+ }
1552
+ .mdzip-root .preview-content img.mdzip-image-loading {
1553
+ animation: none;
1554
+ }
1555
+ }
1556
+
1557
+ .mdzip-root .preview-content .mdzip-frontmatter {
1558
+ margin: 0 0 1em 0;
1559
+ border: 1px solid var(--mdzip-border-color);
1560
+ border-radius: 5px;
1561
+ overflow: hidden;
1562
+ }
1563
+
1564
+ .mdzip-root .preview-content .mdzip-frontmatter-summary {
1565
+ padding: 6px 12px;
1566
+ background: var(--mdzip-widget-background-color);
1567
+ color: var(--mdzip-muted-foreground-color);
1568
+ font-size: 0.8em;
1569
+ border-bottom: 1px solid var(--mdzip-border-color);
1570
+ }
1571
+
1572
+ /* Only the collapsible (<details>) variant is interactive — the static
1573
+ variant's header is a plain <div>, never clickable. */
1574
+ .mdzip-root .preview-content details.mdzip-frontmatter > .mdzip-frontmatter-summary {
1575
+ cursor: pointer;
1576
+ user-select: none;
1577
+ }
1578
+
1579
+ .mdzip-root .preview-content .mdzip-frontmatter-table {
1580
+ width: 100%;
1581
+ border-collapse: collapse;
1582
+ }
1583
+
1584
+ .mdzip-root .preview-content .mdzip-frontmatter-table th,
1585
+ .mdzip-root .preview-content .mdzip-frontmatter-table td {
1586
+ padding: 4px 12px;
1587
+ border: none;
1588
+ text-align: left;
1589
+ vertical-align: top;
1590
+ font-size: 0.85em;
1591
+ }
1592
+
1593
+ .mdzip-root .preview-content .mdzip-frontmatter-table th {
1594
+ width: 1%;
1595
+ white-space: nowrap;
1596
+ color: var(--mdzip-muted-foreground-color);
1597
+ font-weight: 600;
1598
+ background: none;
1599
+ }
1600
+
1601
+ .mdzip-root .preview-content .mdzip-mermaid {
1602
+ display: flex;
1603
+ justify-content: center;
1604
+ margin: 1em 0;
1605
+ }
1606
+
1607
+ .mdzip-root .preview-content .mdzip-mermaid > svg {
1608
+ max-width: 100%;
1609
+ height: auto;
1610
+ }
1611
+
1612
+ .mdzip-root .preview-content .mdzip-mermaid-error {
1613
+ margin: 1em 0;
1614
+ padding: 0.75em 1em;
1615
+ border-radius: 6px;
1616
+ border: 1px solid var(--mdzip-error-border-color, rgba(220, 70, 70, 0.5));
1617
+ background: var(--mdzip-error-background-color, rgba(220, 70, 70, 0.08));
1618
+ color: var(--mdzip-error-color, #b03030);
1619
+ font-family: "Cascadia Code", Consolas, monospace;
1620
+ font-size: 0.85em;
1621
+ white-space: pre-wrap;
1622
+ word-break: break-word;
1623
+ }
1624
+
1625
+ .mdzip-root .plain-text-preview {
1626
+ margin: 0;
1627
+ white-space: pre-wrap;
1628
+ word-break: break-word;
1629
+ font-family: "Cascadia Code", Consolas, monospace;
1630
+ font-variant-ligatures: none;
1631
+ font-feature-settings: "liga" 0, "calt" 0;
1632
+ font-size: calc(20px * var(--mdz-zoom));
1633
+ line-height: 1.5;
1634
+ }
1635
+
1636
+ .mdzip-root .asset-preview-wrap {
1637
+ display: flex;
1638
+ justify-content: center;
1639
+ align-items: flex-start;
1640
+ min-height: 240px;
1641
+ }
1642
+
1643
+ .mdzip-root .asset-preview-image {
1644
+ max-width: min(100%, 1200px);
1645
+ max-height: calc(100vh - 140px);
1646
+ width: auto;
1647
+ height: auto;
1648
+ border: 1px solid var(--mdzip-border-color);
1649
+ background: var(--mdzip-widget-background-color);
1650
+ }
1651
+
1652
+ .mdzip-root .asset-preview-empty {
1653
+ padding: 14px 16px;
1654
+ border: 1px solid var(--mdzip-border-color);
1655
+ border-radius: 6px;
1656
+ background: var(--mdzip-widget-background-color);
1657
+ color: var(--mdzip-muted-foreground-color);
1658
+ }
1659
+
1660
+ .mdzip-root .md-syntax-heading { color: #c36f00; }
1661
+ .mdzip-root .md-syntax-marker,
1662
+ .mdzip-root .md-syntax-quote { color: #7a5c00; font-weight: 700; }
1663
+ .mdzip-root .md-syntax-code,
1664
+ .mdzip-root .md-syntax-fence { color: #8a8f00; }
1665
+ .mdzip-root .md-syntax-link { color: #0969da; }
1666
+ .mdzip-root .md-syntax-image { color: #d100d1; }
1667
+ .mdzip-root .md-syntax-emphasis { color: #008b8b; }
1668
+ .mdzip-root .md-syntax-rule { color: #6a9955; }
1669
+
1670
+ .mdzip-root .mdzip-empty {
1671
+ padding: 24px;
1672
+ color: var(--mdzip-muted-foreground-color);
1673
+ }
1674
+
1675
+ .mdzip-root .zoom-popover {
1676
+ position: absolute;
1677
+ top: calc(100% + 6px);
1678
+ right: 0;
1679
+ z-index: 20;
1680
+ display: flex;
1681
+ align-items: center;
1682
+ gap: 8px;
1683
+ padding: 4px;
1684
+ border: 1px solid var(--mdzip-widget-border-color);
1685
+ border-radius: 7px;
1686
+ background: var(--mdzip-widget-background-color);
1687
+ box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
1688
+ }
1689
+
1690
+ .mdzip-root .zoom-level {
1691
+ min-width: 44px;
1692
+ padding: 0 6px;
1693
+ font-size: 12px;
1694
+ line-height: 1;
1695
+ font-variant-numeric: tabular-nums;
1696
+ color: var(--mdzip-editor-foreground-color);
1697
+ }
1698
+
1699
+ .mdzip-root .zoom-stepper {
1700
+ display: inline-flex;
1701
+ align-items: center;
1702
+ gap: 2px;
1703
+ padding-left: 8px;
1704
+ border-left: 1px solid var(--mdzip-widget-border-color);
1705
+ }
1706
+
1707
+ .mdzip-root .zoom-popover button {
1708
+ height: 24px;
1709
+ min-width: 24px;
1710
+ border: none;
1711
+ border-radius: 6px;
1712
+ background: transparent;
1713
+ color: var(--mdzip-control-foreground-color);
1714
+ cursor: pointer;
1715
+ }
1716
+
1717
+ .mdzip-root .zoom-popover button:hover {
1718
+ background: var(--mdzip-control-hover-background-color);
1719
+ }
1720
+
1721
+ .mdzip-root .zoom-reset {
1722
+ padding: 0 12px;
1723
+ border-radius: 999px !important;
1724
+ background: var(--mdzip-control-hover-background-color) !important;
1725
+ font-size: 12px;
1726
+ }
1727
+
1728
+ .mdzip-root .title-dialog-backdrop {
1729
+ position: fixed;
1730
+ inset: 0;
1731
+ display: flex;
1732
+ align-items: center;
1733
+ justify-content: center;
1734
+ background: rgba(0, 0, 0, 0.32);
1735
+ z-index: 100;
1736
+ }
1737
+
1738
+ .mdzip-root .title-dialog {
1739
+ width: min(420px, calc(100vw - 32px));
1740
+ background: var(--mdzip-editor-background-color);
1741
+ border: 1px solid var(--mdzip-widget-border-color);
1742
+ border-radius: 6px;
1743
+ padding: 14px;
1744
+ box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
1745
+ }
1746
+
1747
+ .mdzip-root .title-dialog h3 {
1748
+ margin: 0;
1749
+ font-size: 14px;
1750
+ }
1751
+
1752
+ .mdzip-root .title-dialog p {
1753
+ margin: 8px 0 10px;
1754
+ font-size: 12px;
1755
+ color: var(--mdzip-muted-foreground-color);
1756
+ }
1757
+
1758
+ .mdzip-root .title-dialog input {
1759
+ width: 100%;
1760
+ border: 1px solid var(--mdzip-widget-border-color);
1761
+ background: var(--mdzip-editor-background-color);
1762
+ color: var(--mdzip-editor-foreground-color);
1763
+ border-radius: 4px;
1764
+ padding: 6px 8px;
1765
+ font-size: 13px;
1766
+ }
1767
+
1768
+ .mdzip-root .title-dialog select {
1769
+ width: 100%;
1770
+ border: 1px solid var(--mdzip-widget-border-color);
1771
+ background: var(--mdzip-editor-background-color);
1772
+ color: var(--mdzip-editor-foreground-color);
1773
+ border-radius: 4px;
1774
+ padding: 6px 8px;
1775
+ font-size: 13px;
1776
+ }
1777
+
1778
+ .mdzip-root .title-dialog input:disabled,
1779
+ .mdzip-root .title-dialog select:disabled {
1780
+ border-color: var(--mdzip-border-color);
1781
+ background: var(--mdzip-secondary-background-color);
1782
+ color: var(--mdzip-muted-foreground-color);
1783
+ opacity: 0.72;
1784
+ cursor: not-allowed;
1785
+ }
1786
+
1787
+ .mdzip-root .title-dialog input:disabled::placeholder {
1788
+ color: var(--mdzip-muted-foreground-color);
1789
+ }
1790
+
1791
+ .mdzip-root .title-dialog-validation {
1792
+ color: #cf222e !important;
1793
+ }
1794
+
1795
+ .mdzip-root .title-dialog-actions {
1796
+ display: flex;
1797
+ justify-content: flex-end;
1798
+ gap: 8px;
1799
+ margin-top: 12px;
1800
+ }
1801
+
1802
+ .mdzip-root .title-dialog-actions button {
1803
+ padding: 5px 10px;
1804
+ font-size: 12px;
1805
+ cursor: pointer;
1806
+ border-radius: 3px;
1807
+ border: 1px solid var(--mdzip-border-color);
1808
+ background: var(--mdzip-editor-background-color);
1809
+ color: var(--mdzip-editor-foreground-color);
1810
+ }
1811
+
1812
+ .mdzip-root .title-dialog-actions .reset-title {
1813
+ margin-right: auto;
1814
+ }
1815
+
1816
+ .mdzip-root .title-dialog-actions .save-title {
1817
+ border-color: var(--mdzip-accent-color);
1818
+ background: var(--mdzip-accent-color);
1819
+ color: var(--mdzip-accent-foreground-color);
1820
+ }
1821
+
1822
+ .mdzip-root .image-insert-dialog {
1823
+ width: min(460px, calc(100vw - 32px));
1824
+ }
1825
+
1826
+ .mdzip-root .image-insert-options {
1827
+ display: grid;
1828
+ gap: 6px;
1829
+ margin: 10px 0;
1830
+ padding: 10px;
1831
+ border: 1px solid var(--mdzip-widget-border-color);
1832
+ border-radius: 4px;
1833
+ }
1834
+
1835
+ .mdzip-root .image-insert-options legend {
1836
+ padding: 0 4px;
1837
+ color: var(--mdzip-muted-foreground-color);
1838
+ font-size: 12px;
1839
+ font-weight: 600;
1840
+ }
1841
+
1842
+ .mdzip-root .image-insert-options label,
1843
+ .mdzip-root .image-insert-field {
1844
+ display: grid;
1845
+ gap: 4px;
1846
+ font-size: 12px;
1847
+ }
1848
+
1849
+ .mdzip-root .image-insert-options label {
1850
+ grid-template-columns: auto 1fr;
1851
+ align-items: center;
1852
+ }
1853
+
1854
+ .mdzip-root .image-insert-options input {
1855
+ width: auto;
1856
+ }
1857
+
1858
+ .mdzip-root .image-insert-grid {
1859
+ display: grid;
1860
+ grid-template-columns: 1fr 1fr;
1861
+ gap: 8px;
1862
+ margin-top: 8px;
1863
+ }
1864
+
1865
+ .mdzip-root .image-insert-field {
1866
+ margin-top: 8px;
1867
+ }
1868
+
1869
+ .mdzip-root .image-insert-field.field-disabled {
1870
+ color: var(--mdzip-muted-foreground-color);
1871
+ }
1872
+
1873
+ .mdzip-root .pack-files-dialog {
1874
+ width: min(460px, calc(100vw - 32px));
1875
+ }
1876
+
1877
+ .mdzip-root .pack-files-options {
1878
+ display: grid;
1879
+ gap: 6px;
1880
+ margin: 10px 0;
1881
+ padding: 10px;
1882
+ border: 1px solid var(--mdzip-widget-border-color);
1883
+ border-radius: 4px;
1884
+ }
1885
+
1886
+ .mdzip-root .pack-files-options legend {
1887
+ padding: 0 4px;
1888
+ color: var(--mdzip-muted-foreground-color);
1889
+ font-size: 12px;
1890
+ font-weight: 600;
1891
+ }
1892
+
1893
+ .mdzip-root .pack-files-options label,
1894
+ .mdzip-root .pack-files-field {
1895
+ display: grid;
1896
+ gap: 4px;
1897
+ font-size: 12px;
1898
+ }
1899
+
1900
+ .mdzip-root .pack-files-options label {
1901
+ grid-template-columns: auto 1fr;
1902
+ align-items: center;
1903
+ }
1904
+
1905
+ .mdzip-root .pack-files-options input {
1906
+ width: auto;
1907
+ }
1908
+
1909
+ .mdzip-root .pack-files-field {
1910
+ margin-top: 8px;
1911
+ }
1912
+
1913
+ .mdzip-root .copy-render-progress-track {
1914
+ height: 6px;
1915
+ border-radius: 3px;
1916
+ background: var(--mdzip-secondary-background-color);
1917
+ overflow: hidden;
1918
+ }
1919
+
1920
+ .mdzip-root .copy-render-progress-bar {
1921
+ height: 100%;
1922
+ background: var(--mdzip-accent-color);
1923
+ transition: width 0.1s linear;
1924
+ }
1925
+
1926
+ .mdzip-root .metadata-dialog dl {
1927
+ margin: 12px 0 0;
1928
+ }
1929
+
1930
+ .mdzip-root .metadata-dialog {
1931
+ width: min(760px, calc(100vw - 32px));
1932
+ }
1933
+
1934
+ .mdzip-root .metadata-dialog h4 {
1935
+ margin: 18px 0 0;
1936
+ font-size: 13px;
1937
+ }
1938
+
1939
+ .mdzip-root .metadata-dialog h4 + dl {
1940
+ margin-top: 6px;
1941
+ }
1942
+
1943
+ .mdzip-root .metadata-row {
1944
+ display: grid;
1945
+ grid-template-columns: 110px minmax(0, 1fr);
1946
+ gap: 12px;
1947
+ padding: 7px 0;
1948
+ border-bottom: 1px solid var(--mdzip-border-color);
1949
+ font-size: 14px;
1950
+ }
1951
+
1952
+ .mdzip-root .metadata-row:last-child {
1953
+ border-bottom: 0;
1954
+ }
1955
+
1956
+ .mdzip-root .metadata-row dt {
1957
+ color: var(--mdzip-muted-foreground-color);
1958
+ font-weight: 600;
1959
+ }
1960
+
1961
+ .mdzip-root .metadata-row dd {
1962
+ min-width: 0;
1963
+ margin: 0;
1964
+ overflow-wrap: anywhere;
1965
+ }
1966
+
1967
+ .mdzip-root .library-row dt a {
1968
+ color: var(--mdzip-link-color);
1969
+ text-decoration: none;
1970
+ }
1971
+
1972
+ .mdzip-root .library-row dt a:hover,
1973
+ .mdzip-root .library-row dt a:focus-visible {
1974
+ text-decoration: underline;
1975
+ }
1976
+
1977
+ .mdzip-root .library-row {
1978
+ grid-template-columns: minmax(230px, 0.75fr) minmax(280px, 1.25fr);
1979
+ }
1980
+
1981
+ .mdzip-root .library-row dt {
1982
+ display: flex;
1983
+ gap: 8px;
1984
+ align-items: baseline;
1985
+ white-space: nowrap;
1986
+ }
1987
+
1988
+ .mdzip-root .library-version {
1989
+ color: var(--mdzip-muted-foreground-color);
1990
+ font-weight: 400;
1991
+ }
1992
+
1993
+ .mdzip-root .library-row dd {
1994
+ white-space: nowrap;
1995
+ }
1996
+
1997
+ .mdzip-root .library-description {
1998
+ color: var(--mdzip-muted-foreground-color);
1999
+ }
2000
+
2001
+ @media (max-width: 640px) {
2002
+ .mdzip-root .library-row {
2003
+ grid-template-columns: 1fr;
2004
+ gap: 3px;
2005
+ }
2006
+
2007
+ .mdzip-root .library-row dd {
2008
+ white-space: normal;
2009
+ }
2010
+ }
2011
+
2012
+ @media (max-width: 900px) {
2013
+ .mdzip-root { --nav-pane-width: 220px; }
2014
+ }
2015
+
2016
+ /* Stack the formatting toolbar only once the pushed-right view-mode toggle no
2017
+ longer has enough room between the edit tools and the right-side controls. */
2018
+ @media (max-width: 760px) {
2019
+ .mdzip-root .toolbar {
2020
+ grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
2021
+ row-gap: 4px;
2022
+ }
2023
+ .mdzip-root .toolbar-start {
2024
+ display: contents;
2025
+ }
2026
+ .mdzip-root .toolbar-left {
2027
+ grid-column: 1;
2028
+ grid-row: 1;
2029
+ }
2030
+ .mdzip-root .edit-toolbar {
2031
+ grid-column: 1 / -1;
2032
+ grid-row: 2;
2033
+ justify-self: start;
2034
+ position: static;
2035
+ transform: none;
2036
+ }
2037
+ .mdzip-root .view-mode-toggle-group {
2038
+ position: static;
2039
+ transform: none;
2040
+ }
2041
+ .mdzip-root .toolbar-controls {
2042
+ grid-column: 3;
2043
+ grid-row: 1;
2044
+ }
2045
+ }
2046
+
2047
+ @media (max-width: 1100px) {
2048
+ .mdzip-root.navigation-pane-visible .toolbar {
2049
+ grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
2050
+ row-gap: 4px;
2051
+ }
2052
+ .mdzip-root.navigation-pane-visible .toolbar-start {
2053
+ display: contents;
2054
+ }
2055
+ .mdzip-root.navigation-pane-visible .toolbar-left {
2056
+ grid-column: 1;
2057
+ grid-row: 1;
2058
+ }
2059
+ .mdzip-root.navigation-pane-visible .edit-toolbar {
2060
+ grid-column: 1 / -1;
2061
+ grid-row: 2;
2062
+ justify-self: start;
2063
+ position: static;
2064
+ transform: none;
2065
+ }
2066
+ .mdzip-root.navigation-pane-visible .view-mode-toggle-group {
2067
+ position: static;
2068
+ transform: none;
2069
+ }
2070
+ .mdzip-root.navigation-pane-visible .toolbar-controls {
2071
+ grid-column: 3;
2072
+ grid-row: 1;
2073
+ }
2074
+ }
2075
+
2076
+ @media (prefers-reduced-motion: reduce) {
2077
+ .mdzip-root .nav-pane,
2078
+ .mdzip-root .nav-resizer {
2079
+ transition: none;
2080
+ }
2081
+ }
2082
+
2083
+ @media (max-width: 640px) {
2084
+ .mdzip-root .toolbar {
2085
+ grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
2086
+ row-gap: 6px;
2087
+ }
2088
+ .mdzip-root .edit-toolbar {
2089
+ overflow-x: auto;
2090
+ }
2091
+ .mdzip-root .toolbar-controls {
2092
+ grid-column: 3;
2093
+ grid-row: 1;
2094
+ justify-self: end;
2095
+ }
2096
+ }
2097
+
2098
+ @media print {
2099
+ .mdzip-root {
2100
+ height: auto;
2101
+ min-height: 0;
2102
+ overflow: visible;
2103
+ display: block;
2104
+ background: #ffffff;
2105
+ color: #000000;
2106
+ }
2107
+
2108
+ .mdzip-root .toolbar,
2109
+ .mdzip-root .document-strip,
2110
+ .mdzip-root .nav-pane,
2111
+ .mdzip-root .nav-resizer,
2112
+ .mdzip-root .split-resizer,
2113
+ .mdzip-root .edit-pane,
2114
+ .mdzip-root .edit-toolbar,
2115
+ .mdzip-root .mdzip-tooltip,
2116
+ .mdzip-root .nav-context-menu,
2117
+ .mdzip-root .title-dialog-backdrop,
2118
+ .mdzip-root .theme-popover,
2119
+ .mdzip-root .toolbar-popover,
2120
+ .mdzip-root .zoom-popover {
2121
+ display: none !important;
2122
+ }
2123
+
2124
+ .mdzip-root .workspace-shell {
2125
+ display: block;
2126
+ }
2127
+
2128
+ .mdzip-root .pane-stack,
2129
+ .mdzip-root .pane-stack.split-mode {
2130
+ display: block;
2131
+ height: auto;
2132
+ }
2133
+
2134
+ .mdzip-root .preview-pane {
2135
+ display: block !important;
2136
+ overflow: visible;
2137
+ height: auto;
2138
+ }
2139
+
2140
+ .mdzip-root .preview-content {
2141
+ max-width: 100%;
2142
+ padding: 0;
2143
+ font-size: 11pt;
2144
+ line-height: 1.6;
2145
+ }
2146
+
2147
+ .mdzip-root .preview-content h1,
2148
+ .mdzip-root .preview-content h2,
2149
+ .mdzip-root .preview-content h3,
2150
+ .mdzip-root .preview-content h4,
2151
+ .mdzip-root .preview-content h5,
2152
+ .mdzip-root .preview-content h6 {
2153
+ page-break-after: avoid;
2154
+ color: #000000;
2155
+ }
2156
+
2157
+ .mdzip-root .preview-content pre,
2158
+ .mdzip-root .preview-content blockquote,
2159
+ .mdzip-root .preview-content img,
2160
+ .mdzip-root .preview-content table {
2161
+ page-break-inside: avoid;
2162
+ }
2163
+
2164
+ .mdzip-root .preview-content pre,
2165
+ .mdzip-root .preview-content code {
2166
+ white-space: pre-wrap;
2167
+ word-break: break-word;
2168
+ background: #f6f8fa;
2169
+ color: #000000;
2170
+ border-color: #d0d7de;
2171
+ }
2172
+
2173
+ .mdzip-root .preview-content a {
2174
+ color: #000000;
2175
+ text-decoration: underline;
2176
+ }
2177
+
2178
+ .mdzip-root .preview-content img {
2179
+ max-width: 100%;
2180
+ }
2181
+ }
2182
+
2183
+ /* Syntax highlighting for code blocks in preview (highlight.js) */
2184
+ .mdzip-root .preview-content pre code {
2185
+ display: block;
2186
+ overflow-x: auto;
2187
+ padding: 12px;
2188
+ background: var(--mdzip-editor-background-color);
2189
+ border-radius: 4px;
2190
+ font-family: "Courier New", Courier, monospace;
2191
+ font-variant-ligatures: none;
2192
+ font-feature-settings: "liga" 0, "calt" 0;
2193
+ font-size: 12px;
2194
+ color: var(--mdzip-editor-foreground-color);
2195
+ }
2196
+
2197
+ /* Dark theme (Monokai-inspired) - highlight.js classes */
2198
+ .mdzip-root .hljs { color: #f8f8f2; }
2199
+ .mdzip-root .hljs-comment { color: #75715e; }
2200
+ .mdzip-root .hljs-string { color: #a6e22e; }
2201
+ .mdzip-root .hljs-number { color: #ae81ff; }
2202
+ .mdzip-root .hljs-literal { color: #ae81ff; }
2203
+ .mdzip-root .hljs-attr { color: #a6e22e; }
2204
+ .mdzip-root .hljs-keyword { color: #f92672; }
2205
+ .mdzip-root .hljs-title { color: #a6e22e; }
2206
+ .mdzip-root .hljs-punctuation { color: #f8f8f2; }
2207
+ .mdzip-root .hljs-operator { color: #f92672; }
2208
+
2209
+ /* Light theme - highlight.js classes */
2210
+ .mdzip-root.mdzip-theme-light .hljs { color: #383a42; }
2211
+ .mdzip-root.mdzip-theme-light .hljs-comment { color: #a0a1a7; }
2212
+ .mdzip-root.mdzip-theme-light .hljs-string { color: #50a14f; }
2213
+ .mdzip-root.mdzip-theme-light .hljs-number { color: #986801; }
2214
+ .mdzip-root.mdzip-theme-light .hljs-literal { color: #986801; }
2215
+ .mdzip-root.mdzip-theme-light .hljs-attr { color: #50a14f; }
2216
+ .mdzip-root.mdzip-theme-light .hljs-keyword { color: #a626a4; }
2217
+ .mdzip-root.mdzip-theme-light .hljs-title { color: #50a14f; }
2218
+ .mdzip-root.mdzip-theme-light .hljs-punctuation { color: #383a42; }
2219
+ .mdzip-root.mdzip-theme-light .hljs-operator { color: #a626a4; }
2118
2220
  `;
2119
2221
  //# sourceMappingURL=view-css.js.map