Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
quarto-dev
GitHub Repository: quarto-dev/quarto-cli
Path: blob/main/src/resources/tools/ast-diagram/style.css
12922 views
1
/* Pandoc AST Block Diagram Styles */
2
* {
3
box-sizing: border-box;
4
}
5
6
body {
7
font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
8
font-optical-sizing: auto;
9
font-weight: 400;
10
font-style: normal;
11
line-height: 1.5;
12
color: #333;
13
max-width: 1200px;
14
margin: 0 auto;
15
padding: 20px;
16
}
17
18
.pandoc-block-diagram {
19
/* inherits styles from body */
20
margin-left: 15px;
21
}
22
23
/* Block elements */
24
.block {
25
border: 1px solid #ddd;
26
border-radius: 4px;
27
margin: 2px 0;
28
padding: 5px 10px;
29
background-color: #f9f9f9;
30
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
31
display: grid;
32
grid-template-columns: 120px 1fr;
33
}
34
35
.block-type {
36
font-weight: 600;
37
color: #666;
38
font-size: 0.9em;
39
font-family: "Inconsolata", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
40
display: flex;
41
align-items: center;
42
cursor: pointer;
43
}
44
45
/* Toggle button styles */
46
.toggle-button {
47
background: none;
48
border: none;
49
color: #666;
50
font-size: 0.9em;
51
cursor: pointer;
52
transition: transform 0.2s ease;
53
position: relative;
54
}
55
56
/* Folded state */
57
.block.folded .block-content {
58
display: none;
59
}
60
61
.block.folded .toggle-button {
62
transform: rotate(-90deg);
63
}
64
65
.block-content {
66
padding-left: 15px;
67
border-left: 3px solid #eee;
68
line-height: 2em;
69
}
70
71
.block.block-bullet-list .block-content {
72
padding-left: 0;
73
border-left: none;
74
}
75
76
.block {
77
background-color: #f8f8f8;
78
border-color: #ddd;
79
}
80
81
/* Metadata styling */
82
.metadata-entry {
83
margin: 8px 0;
84
padding: 8px;
85
border-left: 3px solid #ddd;
86
background-color: rgba(255, 255, 255, 0.5);
87
border-radius: 4px;
88
}
89
90
.metadata-key {
91
font-weight: 600;
92
color: #446;
93
margin-bottom: 5px;
94
font-size: 0.95em;
95
}
96
97
.meta-map, .meta-list, .meta-blocks, .meta-inlines, .meta-bool, .meta-string {
98
padding: 5px;
99
border-radius: 3px;
100
}
101
102
.meta-map {
103
border: 1px solid #ddd;
104
}
105
106
.meta-list {
107
border: 1px solid #ddd;
108
}
109
110
.meta-blocks {
111
border: 1px solid #ddd;
112
}
113
114
.meta-inlines {
115
border: 1px solid #ddd;
116
}
117
118
.meta-bool {
119
border: 1px solid #ddd;
120
}
121
122
.meta-string {
123
background-color: #fff8ff;
124
border: 1px solid #ddd;
125
}
126
127
.meta-type {
128
font-family: "Inconsolata", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
129
font-size: 0.85em;
130
color: #777;
131
margin-bottom: 5px;
132
font-weight: 600;
133
}
134
135
.meta-map-entry {
136
margin: 6px 0;
137
padding: 5px;
138
border-left: 2px solid #ddf;
139
}
140
141
.meta-map-key {
142
font-weight: 600;
143
color: #557;
144
font-size: 0.9em;
145
margin-bottom: 3px;
146
}
147
148
.meta-list-items {
149
margin: 5px 0 5px 20px;
150
padding-left: 10px;
151
}
152
153
.meta-list-item {
154
margin: 5px 0;
155
}
156
157
.meta-content {
158
padding-left: 10px;
159
}
160
161
/* Header Levels */
162
.level-1 .block-type,
163
.level-2 .block-type,
164
.level-3 .block-type,
165
.level-4 .block-type {
166
color: #666;
167
}
168
169
/* List Items */
170
.list-item {
171
margin: 8px 0;
172
padding-left: 15px;
173
border-left: 3px solid #eee;
174
}
175
176
/* Code Formatting */
177
pre {
178
background-color: #f5f5f5;
179
padding: 10px;
180
border-radius: 3px;
181
font-family: "Inconsolata", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
182
font-size: 0.9em;
183
overflow-x: auto;
184
}
185
186
code {
187
font-family: "Inconsolata", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
188
padding: 2px 4px;
189
border-radius: 3px;
190
font-size: 0.9em;
191
}
192
193
/* Nested Elements */
194
.block .block {
195
margin-left: 5px;
196
}
197
198
/* Unknown Elements */
199
.block-type-unknown, .inline-unknown {
200
background-color: #fcf8e3;
201
border-color: #ddd;
202
color: #8a6d3b;
203
}
204
205
/* Inline Elements */
206
.inline {
207
border: 1px solid #ddd;
208
border-radius: 4px;
209
margin: 5px;
210
padding: 0 2px 0 2px;
211
background-color: #f9f9f9;
212
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
213
display: inline;
214
}
215
216
.inline-type {
217
font-family: "Inconsolata", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
218
font-weight: 600;
219
color: #666;
220
font-size: 0.8em;
221
display: inline;
222
align-items: center;
223
cursor: pointer;
224
top: -0.15em;
225
position: relative;
226
margin-left: 5px;
227
margin-right: 2px;
228
}
229
230
.inline-type .toggle-button {
231
padding: 0;
232
}
233
234
/* Override for inline-type with no content */
235
.inline-type.inline-type-no-content {
236
border-bottom: none;
237
margin-bottom: 0;
238
padding-bottom: 0;
239
}
240
241
div .inline-type.inline-type-no-content-folded-only {
242
display: none;
243
}
244
245
div.folded .inline-type.inline-type-no-content {
246
display: none;
247
}
248
div.folded .inline-type.inline-type-no-content-folded-only {
249
display: inherit;
250
}
251
252
/* Folded state for inline elements */
253
.inline.folded .inline-content,
254
.inline.folded .inline-classes,
255
.inline.folded .inline-attrs,
256
.inline.folded .inline-url,
257
.inline.folded .inline-title {
258
display: none;
259
}
260
261
.inline.folded .toggle-button {
262
transform: rotate(-90deg);
263
}
264
265
.inline-content {
266
display: inline-block;
267
}
268
269
/* Link styles with pseudo-elements */
270
.inline-url, .inline-title {
271
padding-left: 15px;
272
margin-bottom: 6px;
273
display: inline-block;
274
}
275
276
.inline-url::before {
277
content: "URL: ";
278
color: #666;
279
margin-right: 4px;
280
}
281
282
.inline-title::before {
283
font-size: 0.75em;
284
position: relative;
285
top: -0.125em;
286
content: "Title: ";
287
font-weight: 600;
288
color: #666;
289
}
290
291
.inline-alt-text::before {
292
font-size: 0.75em;
293
position: relative;
294
top: -0.125em;
295
content: "Alt: ";
296
color: #666;
297
margin-right: 4px;
298
margin-left: 4px;
299
}
300
301
.inline-text-content::before {
302
font-size: 0.75em;
303
position: relative;
304
top: -0.125em;
305
content: "Text: ";
306
color: #666;
307
margin-right: 4px;
308
}
309
310
/* Special link styling */
311
.inline-url a {
312
display: inline-block;
313
margin-left: 4px;
314
word-break: break-all;
315
}
316
317
/* Simple inline element styling */
318
.inline-emph {
319
background-color: #cde;
320
border-color: #ddd;
321
}
322
323
.inline-strong {
324
background-color: #ecc;
325
border-color: #ddd;
326
}
327
328
.inline-smallcaps {
329
background-color: #f4f9f9;
330
border-color: #ddd;
331
}
332
333
.inline-strikeout {
334
background-color: #f9f8f4;
335
border-color: #ddd;
336
}
337
338
.inline-subscript {
339
background-color: #f4f4f9;
340
border-color: #ddd;
341
}
342
343
.inline-superscript {
344
background-color: #f9f4f9;
345
border-color: #ddd;
346
}
347
348
.inline-underline {
349
background-color: #f4f9f4;
350
border-color: #ddd;
351
}
352
353
.inline-str {
354
padding-right: 5px;
355
}
356
357
a {
358
color: #337ab7;
359
text-decoration: none;
360
}
361
362
a:hover {
363
text-decoration: underline;
364
}
365
366
h2#ast-diagram-heading {
367
display: flex;
368
justify-content: space-between;
369
align-items: center; /* Optional: vertically centers content */
370
}
371
372
/* Fold controls */
373
.fold-controls {
374
margin: 15px 0 15px 15px;
375
display: inline-flex;
376
flex-wrap: wrap;
377
gap: 15px;
378
}
379
380
.control-group {
381
display: flex;
382
align-items: center;
383
border: 1px solid #eee;
384
border-radius: 4px;
385
padding: 5px 10px;
386
background-color: #f9f9f9;
387
}
388
389
.control-group span {
390
font-weight: 600;
391
margin-right: 10px;
392
color: #666;
393
}
394
395
.fold-controls button {
396
background-color: #f0f0f0;
397
border: 1px solid #ddd;
398
border-radius: 3px;
399
padding: 4px 8px;
400
margin-right: 6px;
401
cursor: pointer;
402
font-size: 0.85em;
403
}
404
405
.fold-controls button:hover {
406
background-color: #e0e0e0;
407
}
408
409
.fold-controls button:active {
410
background-color: #d0d0d0;
411
}
412
413
/* Page Layout and Headings */
414
h1, h2 {
415
margin-left: 15px;
416
color: #555;
417
}
418
419
h1 {
420
font-size: 1.6em;
421
border-bottom: 1px solid #eee;
422
padding-bottom: 10px;
423
margin-bottom: 10px;
424
}
425
426
.source-path {
427
margin-left: 15px;
428
color: #777;
429
font-style: italic;
430
margin-bottom: 20px;
431
}
432
433
h2 {
434
font-size: 1.3em;
435
margin-top: 30px;
436
margin-bottom: 15px;
437
}
438
439
/* Markdown source code */
440
.source-info {
441
margin: 20px 0 20px 15px;
442
}
443
444
/* Source info heading styles removed as they're now redundant
445
and inheriting properly from the general h2 styling */
446
447
.markdown-source {
448
margin: 15px 0;
449
}
450
451
/* Clean up: markdown header styles removed since folding is no longer needed */
452
453
.markdown-source pre {
454
max-height: 300px;
455
overflow-y: auto;
456
background-color: #f5f5f5;
457
padding: 15px;
458
border-radius: 4px;
459
border: 1px solid #ddd;
460
white-space: pre-wrap;
461
}
462
463
.language-markdown {
464
font-family: "Inconsolata", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
465
font-size: 0.75em;
466
top: -0.125em;
467
position: relative;
468
}
469
470
/* Node attribute styling */
471
.node-id, .node-classes, .node-attrs {
472
font-family: "Inconsolata", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
473
font-size: 0.85em;
474
border-radius: 3px;
475
display: inline-block;
476
margin: 0;
477
padding: 0;
478
color: #666;
479
}
480
481
div.meta-map-key, div.meta-map-value, div.metadata-key, div.metadata-value {
482
display: inline-block;
483
}
484
485
div.metadata-key {
486
min-width: 60px;
487
}
488
489
div.block.block-metadata div.block-content {
490
padding-left: 0;
491
border-left: none;
492
}
493
494
div.meta-list div.meta-type, div.meta-map div.meta-type {
495
margin-left: 5px;
496
}
497