orz-markdown 1.2.2 → 1.3.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 (31) hide show
  1. package/README.md +20 -0
  2. package/dist/index.d.ts +1 -0
  3. package/dist/index.d.ts.map +1 -1
  4. package/dist/index.js +1 -0
  5. package/dist/index.js.map +1 -1
  6. package/dist/plugins/chart.d.ts +2 -0
  7. package/dist/plugins/chart.d.ts.map +1 -0
  8. package/dist/plugins/chart.js +137 -0
  9. package/dist/plugins/chart.js.map +1 -0
  10. package/dist/preview-frame.d.ts +59 -0
  11. package/dist/preview-frame.d.ts.map +1 -0
  12. package/dist/preview-frame.js +88 -0
  13. package/dist/preview-frame.js.map +1 -0
  14. package/dist/runtime.d.ts.map +1 -1
  15. package/dist/runtime.js +69 -5
  16. package/dist/runtime.js.map +1 -1
  17. package/orz-markdown-skills/SKILL.md +10 -4
  18. package/orz-markdown-skills/assets/template.html +2 -2
  19. package/orz-markdown-skills/references/embedding.md +195 -0
  20. package/package.json +4 -1
  21. package/themes/README.md +43 -0
  22. package/themes/beige-decent-1.css +27 -2
  23. package/themes/beige-decent-2.css +23 -3
  24. package/themes/dark-elegant-1.css +11 -0
  25. package/themes/dark-elegant-2.css +17 -9
  26. package/themes/dark-elegant-3.css +297 -0
  27. package/themes/light-academic-1.css +49 -1
  28. package/themes/light-academic-2.css +25 -1
  29. package/themes/light-neat-1.css +23 -9
  30. package/themes/light-neat-2.css +8 -5
  31. package/themes/light-neat-3.css +383 -0
package/themes/dark-elegant-3.css ADDED
@@ -0,0 +1,297 @@
1
+ /* ==========================================================================
2
+ Dark Elegant Theme 3 — orz-markdown
3
+ A VS Code-dark inspired theme: Lora serif body, colourful headings
4
+ (blue / amber / green / red / pink), blue accents, and decorative touches
5
+ (underline bars, ✦ markers, star rules, quote-mark blockquotes, translucent
6
+ blurred callouts). Matches the supplied reference design.
7
+
8
+ Fonts: Lora (body) · JetBrains Mono (code) · Noto Serif HK / LXGW WenKai TC (CJK)
9
+
10
+ Optional modifiers on <body> or .markdown-body:
11
+ - .size-xs | .size-sm | .size-lg | .size-xl
12
+ ========================================================================== */
13
+
14
+ @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,400&family=Raleway:wght@400;600;700&family=JetBrains+Mono:wght@400;500&family=LXGW+WenKai+TC&family=Noto+Serif+HK&display=swap');
15
+ @import './common.css';
16
+
17
+ :root {
18
+ color-scheme: dark;
19
+
20
+ --bg-color: #2e2e2e; /* content background */
21
+ --bg-secondary: #252526; /* elevated panels (toc, tabs, spoil, mermaid) */
22
+ --bg-code: #2d2d30; /* code blocks */
23
+ --bg-deep: #1e1e1e; /* deepest (scrollbar track, toc) */
24
+ --text-color: #d4d4d4;
25
+ --text-secondary: #9aa3b8;
26
+ --text-muted: #888888;
27
+ --border-color: #3e3e42;
28
+
29
+ --accent: #4ea8ff;
30
+ --accent-2: #60a5fa;
31
+ --link: #4ea8ff;
32
+ --link-hover: #79c0ff;
33
+
34
+ /* heading colours */
35
+ --h1: #4ea8ff; --h2: #60a5fa; --h3: #fbbf24; --h4: #34d399; --h5: #f87171; --h6: #fb7185;
36
+
37
+ /* inline span colours */
38
+ --span-red: #f87171; --span-yellow: #fbbf24; --span-green: #4ade80; --span-blue: #60a5fa;
39
+
40
+ --font-body: Lora, 'Noto Serif HK', 'LXGW WenKai TC', Georgia, serif;
41
+ --font-code: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, monospace;
42
+ --font-decoration: Georgia, 'Times New Roman', serif;
43
+ --decoration-color: #4ea8ff;
44
+
45
+ --base-size: 1rem;
46
+ --font-scale: 1;
47
+
48
+ --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem;
49
+ --blockquote-padding: 0.85rem 1.35rem;
50
+
51
+ /* container toggles (frameless: content flows on the page) */
52
+ --markdown-body-max-width: 60em;
53
+ --markdown-body-padding: clamp(1.4rem, 4.5vw, 3rem);
54
+ }
55
+
56
+ *, *::before, *::after { box-sizing: border-box; }
57
+ html { font-size: calc(var(--base-size) * var(--font-scale)); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
58
+
59
+ body {
60
+ margin: 0;
61
+ min-height: 100vh;
62
+ padding: clamp(0.8rem, 2.5vw, 2rem);
63
+ background: var(--bg-color);
64
+ color: var(--text-color);
65
+ font-family: var(--font-body);
66
+ line-height: 1.8;
67
+ -webkit-font-smoothing: antialiased;
68
+ }
69
+
70
+ body.size-xs, .markdown-body.size-xs { --font-scale: 0.9; }
71
+ body.size-sm, .markdown-body.size-sm { --font-scale: 0.96; }
72
+ body.size-lg, .markdown-body.size-lg { --font-scale: 1.08; }
73
+ body.size-xl, .markdown-body.size-xl { --font-scale: 1.18; }
74
+
75
+ ::-webkit-scrollbar { width: 10px; height: 10px; }
76
+ ::-webkit-scrollbar-track { background: var(--bg-deep); }
77
+ ::-webkit-scrollbar-thumb { background: #424242; border-radius: 5px; }
78
+ ::-webkit-scrollbar-thumb:hover { background: #4e4e4e; }
79
+ ::selection { background: rgba(78, 168, 255, 0.28); }
80
+
81
+ /* ---- article wrapper (frameless) ---- */
82
+ .markdown-body {
83
+ max-width: var(--markdown-body-max-width);
84
+ margin: 0 auto;
85
+ padding: var(--markdown-body-padding);
86
+ color: var(--text-color);
87
+ font-family: var(--font-body);
88
+ font-size: 1rem;
89
+ line-height: 1.8;
90
+ word-wrap: break-word;
91
+ overflow-wrap: break-word;
92
+ }
93
+ .markdown-body::after { content: ''; display: block; clear: both; }
94
+ .markdown-body > :first-child { margin-top: 0; }
95
+ .markdown-body > :last-child { margin-bottom: 0; }
96
+
97
+ /* ---- headings ---- */
98
+ .markdown-body h1, .markdown-body h2, .markdown-body h3,
99
+ .markdown-body h4, .markdown-body h5, .markdown-body h6 { font-family: var(--font-body); line-height: 1.3; }
100
+ .markdown-body h1 { color: var(--h1); font-size: 2.2em; font-weight: 700; margin: 1.5em 0 0.8em; position: relative; }
101
+ .markdown-body h1:first-child, .markdown-body h2:first-child { margin-top: 0; }
102
+ .markdown-body h1::after { content: ''; position: absolute; bottom: -8px; left: 0; width: 60px; height: 3px; background: var(--h1); border-radius: 2px; }
103
+ .markdown-body h2 { color: var(--h2); font-size: 1.8em; font-weight: 600; margin: 1.3em 0 0.7em; position: relative; }
104
+ .markdown-body h2::before { content: ''; position: absolute; left: -20px; top: 50%; transform: translateY(-50%); width: 4px; height: 24px; background: var(--h2); border-radius: 2px; }
105
+ .markdown-body h3 { color: var(--h3); font-size: 1.4em; font-weight: 600; margin: 1.2em 0 0.6em; position: relative; }
106
+ .markdown-body h3::after { content: '✦'; position: absolute; left: -25px; top: 2px; color: var(--h3); font-size: 0.8em; }
107
+ .markdown-body h4 { color: var(--h4); font-size: 1.2em; font-weight: 600; margin: 1.1em 0 0.5em; }
108
+ .markdown-body h5 { color: var(--h5); font-size: 1.1em; font-weight: 600; margin: 1em 0 0.5em; }
109
+ .markdown-body h6 { color: var(--h6); font-size: 1em; font-weight: 600; margin: 0.9em 0 0.4em; font-style: italic; }
110
+
111
+ .markdown-body .header-anchor {
112
+ float: left; margin-left: -1.25em; padding-right: 0.25em; opacity: 0;
113
+ color: var(--accent); text-decoration: none; font-size: 0.75em; transition: opacity 0.2s;
114
+ }
115
+ .markdown-body h1:hover .header-anchor, .markdown-body h2:hover .header-anchor,
116
+ .markdown-body h3:hover .header-anchor, .markdown-body h4:hover .header-anchor { opacity: 0.6; }
117
+
118
+ /* ---- paragraphs & inline ---- */
119
+ .markdown-body p { margin: 0 0 20px; line-height: 1.8; text-align: justify; hyphens: auto; word-wrap: break-word; }
120
+ .markdown-body strong { font-weight: 700; color: #e8edf5; }
121
+ .markdown-body em { font-style: italic; }
122
+ .markdown-body s, .markdown-body del { text-decoration: line-through; color: var(--text-muted); }
123
+ .markdown-body ins { text-decoration: underline dashed; color: var(--span-green); }
124
+ .markdown-body sub, .markdown-body sup { font-size: 0.75em; }
125
+ .markdown-body mark { background: rgba(251, 191, 36, 0.25); color: #fde68a; padding: 2px 6px; border-radius: 4px; border: 1px solid rgba(251, 191, 36, 0.5); font-weight: 500; }
126
+
127
+ /* ---- links (animated underline) ---- */
128
+ .markdown-body a { color: var(--link); text-decoration: none; position: relative; transition: all 0.3s ease; }
129
+ .markdown-body a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--accent); transition: width 0.3s ease; }
130
+ .markdown-body a:hover::after { width: 100%; }
131
+ .markdown-body a:hover { filter: brightness(1.2); }
132
+
133
+ /* ---- code ---- */
134
+ .markdown-body code { background: rgba(78, 168, 255, 0.1); color: #dbeafe; padding: 3px 8px; border-radius: 6px; font-family: var(--font-code); font-size: 0.85em; }
135
+ .markdown-body pre { background: var(--bg-code); padding: 14px 16px; border-radius: 6px; overflow-x: auto; margin: 0 0 1.25rem; border: none; position: relative; }
136
+ .markdown-body pre code { background: transparent; color: var(--text-color); padding: 0; border: 0; display: block; font-size: 0.92em; line-height: 1.6; }
137
+
138
+ /* ---- blockquotes (decorative quote mark) ---- */
139
+ .markdown-body blockquote {
140
+ margin: var(--spacing-lg) 0; padding: var(--blockquote-padding); border-left: none;
141
+ background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-color) 100%);
142
+ border-radius: 0 8px 8px 0; position: relative; font-style: italic; color: var(--text-secondary);
143
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
144
+ }
145
+ .markdown-body blockquote::before {
146
+ content: "\201C"; font-family: var(--font-decoration); font-size: 4em; color: var(--decoration-color);
147
+ opacity: 0.3; position: absolute; top: -0.2em; left: 0.1em; line-height: 1;
148
+ }
149
+ .markdown-body blockquote p { margin: 0.5em 0; position: relative; z-index: 1; }
150
+ .markdown-body blockquote p:first-child { margin-top: 0; }
151
+ .markdown-body blockquote p:last-child { margin-bottom: 0; }
152
+ .markdown-body blockquote blockquote { margin: var(--spacing-sm) 0; background: transparent; border-left: 2px solid var(--border-color); border-radius: 0; box-shadow: none; }
153
+ .markdown-body blockquote blockquote::before { display: none; }
154
+
155
+ /* ---- lists ---- */
156
+ .markdown-body ul, .markdown-body ol { margin: 20px 0; padding-left: 40px; }
157
+ .markdown-body li { margin: 8px 0; }
158
+ .markdown-body ul ul, .markdown-body ol ol, .markdown-body ul ol, .markdown-body ol ul { margin: 8px 0; padding-left: 30px; }
159
+ .markdown-body ol::marker { color: var(--accent); }
160
+ .markdown-body .task-list-item { list-style: none; margin-left: -1.4em; }
161
+ .markdown-body input[type="checkbox"] {
162
+ appearance: none; -webkit-appearance: none; width: 1.2em; height: 1.2em;
163
+ background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px;
164
+ margin-right: 0.5em; vertical-align: middle; cursor: default; position: relative;
165
+ }
166
+ .markdown-body input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
167
+ .markdown-body input[type="checkbox"]:checked::after { content: "\2713"; color: #fff; display: block; text-align: center; line-height: 1.1em; font-size: 0.9em; }
168
+
169
+ /* ---- horizontal rule (star ornament) ---- */
170
+ .markdown-body hr { border: none; height: 2px; background: var(--accent); margin: 40px 0; position: relative; }
171
+ .markdown-body hr::before { content: '✦ ✦ ✦'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); color: var(--accent); font-size: 0.8em; letter-spacing: 8px; background: var(--bg-color); padding: 0 12px; }
172
+
173
+ /* ---- tables ---- */
174
+ .markdown-body table { border-collapse: separate; border-spacing: 0; background: rgba(45, 45, 48, 0.8); border-radius: 8px; border: 1px solid #374151; margin: 20px 0; font-size: 0.95em; }
175
+ .markdown-body table th { background: #1f2937; color: #f9fafb; font-weight: 600; padding: 14px 18px; border-bottom: 2px solid var(--accent); text-align: left; white-space: nowrap; }
176
+ .markdown-body table td { padding: 12px 18px; border-bottom: 1px solid #374151; vertical-align: top; }
177
+ .markdown-body table tr:last-child td { border-bottom: none; }
178
+ .markdown-body table tr:nth-child(even) { background: rgba(78, 168, 255, 0.02); }
179
+ .markdown-body table tr:hover { background: rgba(78, 168, 255, 0.08); }
180
+
181
+ /* ---- images ---- */
182
+ .markdown-body img { border-radius: 8px; margin: 1.5rem auto; }
183
+ .markdown-body p > img { margin: 0; display: inline; }
184
+
185
+ /* ---- footnotes ---- */
186
+ .markdown-body .footnotes { font-size: 0.9em; color: var(--text-secondary); margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border-color); }
187
+ .markdown-body .footnote-ref a, .markdown-body .footnote-backref { color: var(--accent); text-decoration: none; font-size: 0.8em; vertical-align: super; }
188
+
189
+ /* ---- KaTeX ---- */
190
+ .markdown-body .katex { font-size: 1.08em; }
191
+ .markdown-body .katex-display { overflow-x: auto; overflow-y: hidden; padding: 0.5rem 0; margin: var(--spacing-lg) 0; }
192
+ .markdown-body .katex-error { background: rgba(244, 67, 54, 0.15); color: #f87171; border: 1px solid rgba(244, 67, 54, 0.3); border-radius: 4px; padding: 0.15em 0.4em; font-family: var(--font-code); font-size: 0.85em; }
193
+
194
+ /* ---- containers: semantic callouts (translucent, blurred) ---- */
195
+ .markdown-body .info, .markdown-body .warning, .markdown-body .success, .markdown-body .danger {
196
+ padding: var(--spacing-md) 1.25rem; margin: var(--spacing-md) 0; border-radius: 12px;
197
+ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
198
+ border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
199
+ }
200
+ .markdown-body .info { background: rgba(0, 188, 212, 0.15); border-color: rgba(0, 188, 212, 0.3); }
201
+ .markdown-body .warning { background: rgba(255, 152, 0, 0.15); border-color: rgba(255, 152, 0, 0.3); }
202
+ .markdown-body .success { background: rgba(76, 175, 80, 0.15); border-color: rgba(76, 175, 80, 0.3); }
203
+ .markdown-body .danger { background: rgba(244, 67, 54, 0.15); border-color: rgba(244, 67, 54, 0.3); }
204
+ .markdown-body .info > p:first-child > strong:first-child { color: #4dd0e1; }
205
+ .markdown-body .warning > p:first-child > strong:first-child { color: #ffb74d; }
206
+ .markdown-body .success > p:first-child > strong:first-child { color: #81c784; }
207
+ .markdown-body .danger > p:first-child > strong:first-child { color: #e57373; }
208
+ .markdown-body .info > :last-child, .markdown-body .warning > :last-child,
209
+ .markdown-body .success > :last-child, .markdown-body .danger > :last-child { margin-bottom: 0; }
210
+
211
+ /* ---- containers: layout ---- */
212
+ .markdown-body .center { text-align: center; margin: var(--spacing-md) auto; }
213
+ .markdown-body .right { text-align: right; margin: 0 0 var(--spacing-md); }
214
+ .markdown-body .left { float: left; max-width: min(44%, 22rem); padding: 0.75rem; border: 1px solid var(--border-color); margin: 0 1.5rem 1rem 0; background: rgba(30, 30, 30, 0.6); border-radius: 6px; }
215
+ @media (max-width: 600px) { .markdown-body .left { float: none; max-width: 100%; margin: 0 0 1rem; } }
216
+
217
+ /* ---- containers: spoiler ---- */
218
+ details.spoil { border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-secondary); margin: 1rem 0; overflow: hidden; }
219
+ details.spoil > summary { cursor: pointer; padding: 0.75rem 1.25rem; font-weight: 500; color: var(--text-secondary); user-select: none; list-style: none; display: flex; align-items: center; gap: 0.5rem; transition: background 0.2s, color 0.2s; }
220
+ details.spoil > summary::-webkit-details-marker { display: none; }
221
+ details.spoil > summary::before { content: '\25B6'; font-size: 0.65em; transition: transform 0.2s; display: inline-block; color: var(--accent); }
222
+ details.spoil[open] > summary::before { transform: rotate(90deg); }
223
+ details.spoil > summary:hover { background: #2d2d30; color: var(--text-color); }
224
+ details.spoil[open] > summary { border-bottom: 1px solid var(--border-color); color: var(--text-color); }
225
+ details.spoil > :not(summary) { padding: 1rem 1.25rem; }
226
+
227
+ /* ---- containers: tabs ---- */
228
+ .markdown-body .tabs { border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; margin: 1rem 0; }
229
+ .markdown-body .tabs-bar { display: flex; background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); overflow-x: auto; scrollbar-width: none; }
230
+ .markdown-body .tabs-bar::-webkit-scrollbar { display: none; }
231
+ .markdown-body .tabs-bar-btn { padding: 0.6rem 1.1rem; border: none; background: none; color: var(--text-secondary); font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s, background 0.2s; }
232
+ .markdown-body .tabs-bar-btn:hover { color: var(--text-color); background: rgba(255, 255, 255, 0.04); }
233
+ .markdown-body .tabs-bar-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
234
+ .markdown-body .tab { display: none; padding: 1.25rem 1.5rem; }
235
+ .markdown-body .tab.active { display: block; }
236
+ .markdown-body .tabs:not([data-js]) .tab { display: block; }
237
+ .markdown-body .tabs:not([data-js]) .tab + .tab { border-top: 1px solid var(--border-color); }
238
+
239
+ /* ---- containers: columns ---- */
240
+ .markdown-body .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin: 1rem 0; align-items: start; }
241
+ .markdown-body .col { min-width: 0; }
242
+ .markdown-body .col > p:last-child { margin-bottom: 0; }
243
+ @media (max-width: 600px) { .markdown-body .cols { grid-template-columns: 1fr; } }
244
+
245
+ /* ---- TOC ---- */
246
+ .markdown-body .toc-list, .markdown-body nav.toc { list-style: none; padding: 0.75rem 1rem; margin: 1rem 0; background: rgba(30, 30, 30, 0.95); border: 1px solid var(--border-color); border-radius: 8px; font-size: 0.9em; }
247
+ .markdown-body .toc-list li, .markdown-body nav.toc li { margin: 0; padding: 0; }
248
+ .markdown-body .toc-list li::before, .markdown-body nav.toc li::before { display: none; }
249
+ .markdown-body .toc-list a, .markdown-body nav.toc a { display: block; padding: 4px 0; color: var(--accent); text-decoration: none; line-height: 1.4; }
250
+ .markdown-body .toc-list a:hover, .markdown-body nav.toc a:hover { color: var(--link-hover); }
251
+ .markdown-body .toc-list a::after, .markdown-body nav.toc a::after { display: none; }
252
+
253
+ /* ---- inline colour spans & badges ---- */
254
+ .markdown-body span.red { color: var(--span-red); } .markdown-body span.yellow { color: var(--span-yellow); }
255
+ .markdown-body span.green { color: var(--span-green); } .markdown-body span.blue { color: var(--span-blue); }
256
+ .markdown-body span.success, .markdown-body span.info, .markdown-body span.warning, .markdown-body span.danger {
257
+ padding: 0.15em 0.55em; border-radius: 999px; font-size: 0.8em; font-weight: 600; border: 1px solid; vertical-align: baseline;
258
+ }
259
+ .markdown-body span.success { background: rgba(76, 175, 80, 0.15); color: #4ade80; border-color: rgba(76, 175, 80, 0.3); }
260
+ .markdown-body span.info { background: rgba(78, 168, 255, 0.15); color: #4ea8ff; border-color: rgba(78, 168, 255, 0.3); }
261
+ .markdown-body span.warning { background: rgba(255, 152, 0, 0.15); color: #fbbf24; border-color: rgba(255, 152, 0, 0.3); }
262
+ .markdown-body span.danger { background: rgba(244, 67, 54, 0.15); color: #f87171; border-color: rgba(244, 67, 54, 0.3); }
263
+
264
+ /* ---- generated constructs ---- */
265
+ .markdown-body div.youtube-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 8px; background: #000; margin: 1rem 0; }
266
+ .markdown-body div.youtube-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
267
+ .markdown-body div.mermaid { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; padding: 1.5rem; margin: 1rem 0; overflow-x: auto; text-align: center; }
268
+ .markdown-body div.smiles-render { display: flex; align-items: center; justify-content: center; margin: 1.5rem 0; padding: 0; background: transparent; border: none; }
269
+ .markdown-body div.smiles-render canvas, .markdown-body canvas[data-smiles] { display: block; max-width: min(100%, 16rem); height: auto; background: transparent; }
270
+ .markdown-body canvas.orz-chart { max-width: 100%; height: auto; }
271
+ .markdown-body span.qrcode { display: inline-block; position: relative; padding: 4px; line-height: 0; background: #fff; border-radius: 4px; vertical-align: baseline; cursor: zoom-in; }
272
+
273
+ /* ---- focus ---- */
274
+ .markdown-body a:focus-visible, .markdown-body .tabs-bar-btn:focus-visible, details.spoil > summary:focus-visible {
275
+ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; text-decoration: none;
276
+ }
277
+
278
+ /* ---- print ---- */
279
+ @media print {
280
+ body { background: #fff; color: #111; padding: 0; }
281
+ .markdown-body { max-width: 100%; padding: 0; font-size: 1rem; }
282
+ .markdown-body a { color: #0b57d0; } .markdown-body a::after { display: none; }
283
+ .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { color: #111; }
284
+ .markdown-body pre, .markdown-body code { background: #f4f4f4 !important; color: #111 !important; border: 1px solid #ccc; }
285
+ .markdown-body blockquote { background: #f7f7f7; color: #333; box-shadow: none; } .markdown-body blockquote::before { color: #bbb; }
286
+ .markdown-body .info, .markdown-body .warning, .markdown-body .success, .markdown-body .danger { backdrop-filter: none; box-shadow: none; }
287
+ .markdown-body .youtube-embed { display: none !important; }
288
+ tr, img, svg, canvas, iframe, video, pre, blockquote { break-inside: avoid; page-break-inside: avoid; }
289
+ }
290
+
291
+
292
+ /* ---- mermaid & charts: light panel for legibility on the dark background ---- */
293
+ .markdown-body div.mermaid { background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(255, 255, 255, 0.1);
294
+ border-radius: 10px; padding: 1.1rem; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.22); }
295
+ .markdown-body div.mermaid svg { max-width: 100%; height: auto; }
296
+ .markdown-body canvas.orz-chart { background: rgba(255, 255, 255, 0.88); border-radius: 10px; padding: 0.6rem;
297
+ box-shadow: 0 1px 8px rgba(0, 0, 0, 0.22); max-width: 100%; height: auto; }
package/themes/light-academic-1.css CHANGED
@@ -291,7 +291,6 @@ body {
291
291
  border: 1px solid var(--border-soft);
292
292
  font-family: var(--sans-font);
293
293
  font-size: 0.9em;
294
- border-left-width: 4px;
295
294
  }
296
295
 
297
296
  .markdown-body .success {
@@ -539,3 +538,52 @@ body {
539
538
  box-shadow: none;
540
539
  }
541
540
  }
541
+
542
+ /* code block — modern soft panel */
543
+ .markdown-body pre { background: #f6f5f1; border: 1px solid #e6e2d8; border-radius: 8px; padding: 1.1rem 1.25rem; }
544
+ .markdown-body pre code, .markdown-body pre code.hljs { background: transparent; padding: 0; }
545
+
546
+
547
+ /* ============ modern decorative refresh ============ */
548
+ /* blockquote — editorial hanging quote mark, no box */
549
+ .markdown-body blockquote { position: relative; background: none; border: none; border-radius: 0; box-shadow: none;
550
+ padding: 0.3rem 0 0.3rem 2.7rem; margin: 1.9rem 0; font-style: italic; font-size: 1.08em; color: #5b5447; }
551
+ .markdown-body blockquote::before { content: '“'; position: absolute; left: 0; top: 0.26em;
552
+ font-family: 'Alegreya', Georgia, serif; font-size: 3.4em; line-height: 0.7; color: #c8c2ab; }
553
+ .markdown-body blockquote p { margin: 0 0 0.6em; } .markdown-body blockquote > :last-child { margin-bottom: 0; }
554
+ .markdown-body blockquote blockquote { padding-left: 1.2rem; border-left: 2px solid #ddd9cb; }
555
+ .markdown-body blockquote blockquote::before { display: none; }
556
+ /* callouts — soft tinted rounded cards (replaces white box + left bar) */
557
+ .markdown-body .info, .markdown-body .success, .markdown-body .warning, .markdown-body .danger {
558
+ border: 1px solid; border-radius: 10px; padding: 0.95rem 1.25rem; }
559
+ .markdown-body .info { background: #eef3f9; border-color: #d3e0ec; }
560
+ .markdown-body .success { background: #eef5ef; border-color: #cfe3d2; }
561
+ .markdown-body .warning { background: #f9f3e2; border-color: #ecddb6; }
562
+ .markdown-body .danger { background: #f8edeb; border-color: #ead0cc; }
563
+ .markdown-body .info > p:first-child > strong:first-child { color: #2b5585; }
564
+ .markdown-body .success > p:first-child > strong:first-child { color: #2e8540; }
565
+ .markdown-body .warning > p:first-child > strong:first-child { color: #946612; }
566
+ .markdown-body .danger > p:first-child > strong:first-child { color: #a32a2a; }
567
+ /* spoiler — rounded with a chevron */
568
+ .markdown-body details.spoil { border: 1px solid #e6e2d8; border-radius: 10px; overflow: hidden; }
569
+ .markdown-body details.spoil > summary { background: #f7f6f1; display: flex; align-items: center; gap: 0.55rem; list-style: none; }
570
+ .markdown-body details.spoil > summary::-webkit-details-marker { display: none; }
571
+ .markdown-body details.spoil > summary::before { content: '▸'; color: #a39c86; transition: transform 0.2s; }
572
+ .markdown-body details.spoil[open] > summary::before { transform: rotate(90deg); }
573
+
574
+
575
+ /* ---- TOC: modern "Contents" panel ---- */
576
+ .markdown-body .toc-list, .markdown-body nav.toc {
577
+ list-style: none; background: #faf9f5; border: 1px solid #e6e2d8; border-radius: 10px;
578
+ padding: 1.05rem 1.35rem 1.1rem; margin: 2rem 0; font-family: var(--sans-font); font-size: 0.92em; line-height: 1.5; }
579
+ .markdown-body .toc-list::before, .markdown-body nav.toc::before {
580
+ content: 'Contents'; display: block; font-size: 0.68em; letter-spacing: 0.13em; text-transform: uppercase;
581
+ font-weight: 700; color: #9a9176; margin-bottom: 0.55rem; }
582
+ .markdown-body .toc-list ul, .markdown-body nav.toc ul {
583
+ list-style: none; margin: 0.2em 0 0; padding-left: 0.95rem; border-left: 1px solid #e3dfd2; }
584
+ .markdown-body .toc-list li, .markdown-body nav.toc li { margin: 0.1em 0; }
585
+ .markdown-body .toc-list li::before, .markdown-body nav.toc li::before { display: none; content: none; }
586
+ .markdown-body .toc-list a, .markdown-body nav.toc a {
587
+ color: #44403a; text-decoration: none; display: inline-block; padding: 0.08em 0; border-bottom: 0; transition: color 0.15s; }
588
+ .markdown-body .toc-list a:hover, .markdown-body nav.toc a:hover { color: var(--link-color); }
589
+ .markdown-body .toc-list > li > a, .markdown-body nav.toc > ul > li > a { font-weight: 600; }
package/themes/light-academic-2.css CHANGED
@@ -15,7 +15,7 @@
15
15
  --main-font: 'Vollkorn', 'Times New Roman', Times, 'Noto Serif SC', 'Noto Serif TC', serif;
16
16
  --code-font: 'Liberation Mono', Courier, monospace;
17
17
 
18
- --base-size: 16px;
18
+ --base-size: 17px;
19
19
  --line-height: 1.6;
20
20
 
21
21
  --markdown-body-max-width: 860px;
@@ -460,3 +460,27 @@ body {
460
460
  body { background: #fff; color: #000; padding: 0; }
461
461
  .markdown-body { max-width: 100%; padding: 0; border: none; box-shadow: none; }
462
462
  }
463
+
464
+ /* code block — modern soft panel with a quiet left rule */
465
+ .markdown-body pre { background: #f7f8fa; border: 1px solid #e6e8ec; border-left: 3px solid #cbd2dc; border-radius: 8px; padding: 1.1rem 1.25rem; }
466
+ .markdown-body pre code, .markdown-body pre code.hljs { background: transparent; padding: 0; }
467
+
468
+
469
+ /* ============ modern decorative refresh ============ */
470
+ /* blockquote — minimal thin rule, no box */
471
+ .markdown-body blockquote { background: none; border: none; border-left: 2px solid #cdd2d8; border-radius: 0; box-shadow: none;
472
+ padding: 0.15rem 0 0.15rem 1.3rem; margin: 1.8rem 0; font-style: italic; color: var(--text-muted); }
473
+ .markdown-body blockquote::before { display: none; }
474
+ .markdown-body blockquote p { margin: 0 0 0.6em; } .markdown-body blockquote > :last-child { margin-bottom: 0; }
475
+ /* callouts — soft tinted rounded cards (replaces flat page-bg + border) */
476
+ .markdown-body .info, .markdown-body .success, .markdown-body .warning, .markdown-body .danger { border-radius: 10px; border: 1px solid; }
477
+ .markdown-body .info { background: #eef3f9; border-color: #d3e0ec; }
478
+ .markdown-body .success { background: #eef5ef; border-color: #cfe3d2; }
479
+ .markdown-body .warning { background: #f9f3e2; border-color: #ecddb6; }
480
+ .markdown-body .danger { background: #f8edeb; border-color: #ead0cc; }
481
+ /* spoiler — rounded with a chevron */
482
+ .markdown-body details.spoil { border-radius: 10px; overflow: hidden; }
483
+ .markdown-body details.spoil > summary { display: flex; align-items: center; gap: 0.55rem; list-style: none; }
484
+ .markdown-body details.spoil > summary::-webkit-details-marker { display: none; }
485
+ .markdown-body details.spoil > summary::before { content: '▸'; color: #9aa3ae; transition: transform 0.2s; }
486
+ .markdown-body details.spoil[open] > summary::before { transform: rotate(90deg); }
package/themes/light-neat-1.css CHANGED
@@ -16,8 +16,8 @@
16
16
  :root {
17
17
  color-scheme: light;
18
18
 
19
- --bg: #edf4fa;
20
- --bg-soft: #f6fafe;
19
+ --bg: #f7f9fb;
20
+ --bg-soft: #ffffff;
21
21
  --surface: #ffffff;
22
22
  --surface-2: #f5f9fd;
23
23
  --surface-3: #eef4fa;
@@ -106,10 +106,10 @@
106
106
  /* markdown body container toggles */
107
107
  --markdown-body-max-width: 940px;
108
108
  --markdown-body-padding: clamp(1.25rem, 3.6vw, 3.2rem);
109
- --markdown-body-border: 1px solid var(--border);
110
- --markdown-body-radius: var(--radius-lg);
111
- --markdown-body-shadow: var(--shadow);
112
- --markdown-body-decorations-display: block;
109
+ --markdown-body-border: none;
110
+ --markdown-body-radius: 0;
111
+ --markdown-body-shadow: none;
112
+ --markdown-body-decorations-display: none;
113
113
  }
114
114
 
115
115
  body.font-serif,
@@ -170,8 +170,8 @@ body {
170
170
  min-height: 100vh;
171
171
  padding: clamp(0.9rem, 2.5vw, 2rem);
172
172
  background:
173
- radial-gradient(circle at top left, rgba(98, 176, 232, 0.12), transparent 28%),
174
- radial-gradient(circle at top right, rgba(72, 183, 168, 0.1), transparent 22%),
173
+ radial-gradient(circle at top left, rgba(98, 176, 232, 0.06), transparent 28%),
174
+ radial-gradient(circle at top right, rgba(72, 183, 168, 0.05), transparent 22%),
175
175
  linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
176
176
  color: var(--text);
177
177
  font-family: var(--font-body);
@@ -208,7 +208,7 @@ body {
208
208
  max-width: var(--markdown-body-max-width);
209
209
  margin: 0 auto;
210
210
  padding: var(--markdown-body-padding);
211
- background: var(--surface);
211
+ background: transparent;
212
212
  border: var(--markdown-body-border);
213
213
  border-radius: var(--markdown-body-radius);
214
214
  box-shadow: var(--markdown-body-shadow);
@@ -1242,3 +1242,17 @@ details.spoil > summary:focus-visible {
1242
1242
  page-break-inside: avoid;
1243
1243
  }
1244
1244
  }
1245
+
1246
+ /* code: panel tint shows through (no white highlight.js inner box) */
1247
+ .markdown-body pre code, .markdown-body pre code.hljs { background: transparent; padding: 0; }
1248
+
1249
+
1250
+ /* ============ modern decorative refresh ============ */
1251
+ /* blockquote — clean card with an accent gradient edge */
1252
+ .markdown-body blockquote { position: relative; background: var(--surface); border: 1px solid var(--border);
1253
+ border-radius: 14px; padding: 1rem 1.25rem 1rem 1.5rem; margin: 1.7rem 0; color: var(--text-soft);
1254
+ box-shadow: var(--shadow-soft); overflow: hidden; }
1255
+ .markdown-body blockquote::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
1256
+ background: linear-gradient(180deg, var(--accent), var(--accent-warm)); }
1257
+ .markdown-body blockquote p:last-child { margin-bottom: 0; }
1258
+ .markdown-body blockquote blockquote { background: var(--surface-2); }
package/themes/light-neat-2.css CHANGED
@@ -106,10 +106,10 @@
106
106
 
107
107
  --markdown-body-max-width: 920px;
108
108
  --markdown-body-padding: clamp(1.25rem, 3.4vw, 3rem);
109
- --markdown-body-border: 1px solid var(--border-strong);
110
- --markdown-body-radius: var(--radius-lg);
111
- --markdown-body-shadow: var(--shadow);
112
- --markdown-body-decorations-display: block;
109
+ --markdown-body-border: none;
110
+ --markdown-body-radius: 0;
111
+ --markdown-body-shadow: none;
112
+ --markdown-body-decorations-display: none;
113
113
  }
114
114
 
115
115
  body.font-serif,
@@ -210,7 +210,7 @@ body {
210
210
  max-width: var(--markdown-body-max-width);
211
211
  margin: 0 auto;
212
212
  padding: var(--markdown-body-padding);
213
- background: var(--surface);
213
+ background: transparent;
214
214
  border: var(--markdown-body-border);
215
215
  border-radius: var(--markdown-body-radius);
216
216
  box-shadow: var(--markdown-body-shadow);
@@ -1183,3 +1183,6 @@ details.spoil > summary:focus-visible {
1183
1183
  page-break-inside: avoid;
1184
1184
  }
1185
1185
  }
1186
+
1187
+ /* code: panel tint shows through (no white highlight.js inner box) */
1188
+ .markdown-body pre code, .markdown-body pre code.hljs { background: transparent; padding: 0; }