UNPKG

14.6 kBCSSView Raw
1/*-----------------------------------------------------------------------------
2| Copyright (c) Jupyter Development Team.
3| Distributed under the terms of the Modified BSD License.
4|----------------------------------------------------------------------------*/
5
6/*-----------------------------------------------------------------------------
7| RenderedText
8|----------------------------------------------------------------------------*/
9
10:root {
11 /* This is the padding value to fill the gaps between lines containing spans with background color. */
12 --jp-private-code-span-padding: calc(
13 (var(--jp-code-line-height) - 1) * var(--jp-code-font-size) / 2
14 );
15}
16
17.jp-RenderedText {
18 text-align: left;
19 padding-left: var(--jp-code-padding);
20 line-height: var(--jp-code-line-height);
21 font-family: var(--jp-code-font-family);
22}
23
24.jp-RenderedText pre,
25.jp-RenderedJavaScript pre,
26.jp-RenderedHTMLCommon pre {
27 color: var(--jp-content-font-color1);
28 font-size: var(--jp-code-font-size);
29 border: none;
30 margin: 0px;
31 padding: 0px;
32}
33
34.jp-RenderedText pre a:link {
35 text-decoration: none;
36 color: var(--jp-content-link-color);
37}
38.jp-RenderedText pre a:hover {
39 text-decoration: underline;
40 color: var(--jp-content-link-color);
41}
42.jp-RenderedText pre a:visited {
43 text-decoration: none;
44 color: var(--jp-content-link-color);
45}
46
47/* console foregrounds and backgrounds */
48.jp-RenderedText pre .ansi-black-fg {
49 color: #3e424d;
50}
51.jp-RenderedText pre .ansi-red-fg {
52 color: #e75c58;
53}
54.jp-RenderedText pre .ansi-green-fg {
55 color: #00a250;
56}
57.jp-RenderedText pre .ansi-yellow-fg {
58 color: #ddb62b;
59}
60.jp-RenderedText pre .ansi-blue-fg {
61 color: #208ffb;
62}
63.jp-RenderedText pre .ansi-magenta-fg {
64 color: #d160c4;
65}
66.jp-RenderedText pre .ansi-cyan-fg {
67 color: #60c6c8;
68}
69.jp-RenderedText pre .ansi-white-fg {
70 color: #c5c1b4;
71}
72
73.jp-RenderedText pre .ansi-black-bg {
74 background-color: #3e424d;
75 padding: var(--jp-private-code-span-padding) 0;
76}
77.jp-RenderedText pre .ansi-red-bg {
78 background-color: #e75c58;
79 padding: var(--jp-private-code-span-padding) 0;
80}
81.jp-RenderedText pre .ansi-green-bg {
82 background-color: #00a250;
83 padding: var(--jp-private-code-span-padding) 0;
84}
85.jp-RenderedText pre .ansi-yellow-bg {
86 background-color: #ddb62b;
87 padding: var(--jp-private-code-span-padding) 0;
88}
89.jp-RenderedText pre .ansi-blue-bg {
90 background-color: #208ffb;
91 padding: var(--jp-private-code-span-padding) 0;
92}
93.jp-RenderedText pre .ansi-magenta-bg {
94 background-color: #d160c4;
95 padding: var(--jp-private-code-span-padding) 0;
96}
97.jp-RenderedText pre .ansi-cyan-bg {
98 background-color: #60c6c8;
99 padding: var(--jp-private-code-span-padding) 0;
100}
101.jp-RenderedText pre .ansi-white-bg {
102 background-color: #c5c1b4;
103 padding: var(--jp-private-code-span-padding) 0;
104}
105
106.jp-RenderedText pre .ansi-black-intense-fg {
107 color: #282c36;
108}
109.jp-RenderedText pre .ansi-red-intense-fg {
110 color: #b22b31;
111}
112.jp-RenderedText pre .ansi-green-intense-fg {
113 color: #007427;
114}
115.jp-RenderedText pre .ansi-yellow-intense-fg {
116 color: #b27d12;
117}
118.jp-RenderedText pre .ansi-blue-intense-fg {
119 color: #0065ca;
120}
121.jp-RenderedText pre .ansi-magenta-intense-fg {
122 color: #a03196;
123}
124.jp-RenderedText pre .ansi-cyan-intense-fg {
125 color: #258f8f;
126}
127.jp-RenderedText pre .ansi-white-intense-fg {
128 color: #a1a6b2;
129}
130
131.jp-RenderedText pre .ansi-black-intense-bg {
132 background-color: #282c36;
133 padding: var(--jp-private-code-span-padding) 0;
134}
135.jp-RenderedText pre .ansi-red-intense-bg {
136 background-color: #b22b31;
137 padding: var(--jp-private-code-span-padding) 0;
138}
139.jp-RenderedText pre .ansi-green-intense-bg {
140 background-color: #007427;
141 padding: var(--jp-private-code-span-padding) 0;
142}
143.jp-RenderedText pre .ansi-yellow-intense-bg {
144 background-color: #b27d12;
145 padding: var(--jp-private-code-span-padding) 0;
146}
147.jp-RenderedText pre .ansi-blue-intense-bg {
148 background-color: #0065ca;
149 padding: var(--jp-private-code-span-padding) 0;
150}
151.jp-RenderedText pre .ansi-magenta-intense-bg {
152 background-color: #a03196;
153 padding: var(--jp-private-code-span-padding) 0;
154}
155.jp-RenderedText pre .ansi-cyan-intense-bg {
156 background-color: #258f8f;
157 padding: var(--jp-private-code-span-padding) 0;
158}
159.jp-RenderedText pre .ansi-white-intense-bg {
160 background-color: #a1a6b2;
161 padding: var(--jp-private-code-span-padding) 0;
162}
163
164.jp-RenderedText pre .ansi-default-inverse-fg {
165 color: var(--jp-ui-inverse-font-color0);
166}
167.jp-RenderedText pre .ansi-default-inverse-bg {
168 background-color: var(--jp-inverse-layout-color0);
169 padding: var(--jp-private-code-span-padding) 0;
170}
171
172.jp-RenderedText pre .ansi-bold {
173 font-weight: bold;
174}
175.jp-RenderedText pre .ansi-underline {
176 text-decoration: underline;
177}
178
179.jp-RenderedText[data-mime-type='application/vnd.jupyter.stderr'] {
180 background: var(--jp-rendermime-error-background);
181 padding-top: var(--jp-code-padding);
182}
183
184/*-----------------------------------------------------------------------------
185| RenderedLatex
186|----------------------------------------------------------------------------*/
187
188.jp-RenderedLatex {
189 color: var(--jp-content-font-color1);
190 font-size: var(--jp-content-font-size1);
191 line-height: var(--jp-content-line-height);
192}
193
194/* Left-justify outputs.*/
195.jp-OutputArea-output.jp-RenderedLatex {
196 padding: var(--jp-code-padding);
197 text-align: left;
198}
199
200/*-----------------------------------------------------------------------------
201| RenderedHTML
202|----------------------------------------------------------------------------*/
203
204.jp-RenderedHTMLCommon {
205 color: var(--jp-content-font-color1);
206 font-family: var(--jp-content-font-family);
207 font-size: var(--jp-content-font-size1);
208 line-height: var(--jp-content-line-height);
209 /* Give a bit more R padding on Markdown text to keep line lengths reasonable */
210 padding-right: 20px;
211}
212
213.jp-RenderedHTMLCommon em {
214 font-style: italic;
215}
216
217.jp-RenderedHTMLCommon strong {
218 font-weight: bold;
219}
220
221.jp-RenderedHTMLCommon u {
222 text-decoration: underline;
223}
224
225.jp-RenderedHTMLCommon a:link {
226 text-decoration: none;
227 color: var(--jp-content-link-color);
228}
229
230.jp-RenderedHTMLCommon a:hover {
231 text-decoration: underline;
232 color: var(--jp-content-link-color);
233}
234
235.jp-RenderedHTMLCommon a:visited {
236 text-decoration: none;
237 color: var(--jp-content-link-color);
238}
239
240/* Headings */
241
242.jp-RenderedHTMLCommon h1,
243.jp-RenderedHTMLCommon h2,
244.jp-RenderedHTMLCommon h3,
245.jp-RenderedHTMLCommon h4,
246.jp-RenderedHTMLCommon h5,
247.jp-RenderedHTMLCommon h6 {
248 line-height: var(--jp-content-heading-line-height);
249 font-weight: var(--jp-content-heading-font-weight);
250 font-style: normal;
251 margin: var(--jp-content-heading-margin-top) 0
252 var(--jp-content-heading-margin-bottom) 0;
253}
254
255.jp-RenderedHTMLCommon h1:first-child,
256.jp-RenderedHTMLCommon h2:first-child,
257.jp-RenderedHTMLCommon h3:first-child,
258.jp-RenderedHTMLCommon h4:first-child,
259.jp-RenderedHTMLCommon h5:first-child,
260.jp-RenderedHTMLCommon h6:first-child {
261 margin-top: calc(0.5 * var(--jp-content-heading-margin-top));
262}
263
264.jp-RenderedHTMLCommon h1:last-child,
265.jp-RenderedHTMLCommon h2:last-child,
266.jp-RenderedHTMLCommon h3:last-child,
267.jp-RenderedHTMLCommon h4:last-child,
268.jp-RenderedHTMLCommon h5:last-child,
269.jp-RenderedHTMLCommon h6:last-child {
270 margin-bottom: calc(0.5 * var(--jp-content-heading-margin-bottom));
271}
272
273.jp-RenderedHTMLCommon h1 {
274 font-size: var(--jp-content-font-size5);
275}
276
277.jp-RenderedHTMLCommon h2 {
278 font-size: var(--jp-content-font-size4);
279}
280
281.jp-RenderedHTMLCommon h3 {
282 font-size: var(--jp-content-font-size3);
283}
284
285.jp-RenderedHTMLCommon h4 {
286 font-size: var(--jp-content-font-size2);
287}
288
289.jp-RenderedHTMLCommon h5 {
290 font-size: var(--jp-content-font-size1);
291}
292
293.jp-RenderedHTMLCommon h6 {
294 font-size: var(--jp-content-font-size0);
295}
296
297/* Lists */
298
299.jp-RenderedHTMLCommon ul:not(.list-inline),
300.jp-RenderedHTMLCommon ol:not(.list-inline) {
301 padding-left: 2em;
302}
303
304.jp-RenderedHTMLCommon ul {
305 list-style: disc;
306}
307
308.jp-RenderedHTMLCommon ul ul {
309 list-style: square;
310}
311
312.jp-RenderedHTMLCommon ul ul ul {
313 list-style: circle;
314}
315
316.jp-RenderedHTMLCommon ol {
317 list-style: decimal;
318}
319
320.jp-RenderedHTMLCommon ol ol {
321 list-style: upper-alpha;
322}
323
324.jp-RenderedHTMLCommon ol ol ol {
325 list-style: lower-alpha;
326}
327
328.jp-RenderedHTMLCommon ol ol ol ol {
329 list-style: lower-roman;
330}
331
332.jp-RenderedHTMLCommon ol ol ol ol ol {
333 list-style: decimal;
334}
335
336.jp-RenderedHTMLCommon ol,
337.jp-RenderedHTMLCommon ul {
338 margin-bottom: 1em;
339}
340
341.jp-RenderedHTMLCommon ul ul,
342.jp-RenderedHTMLCommon ul ol,
343.jp-RenderedHTMLCommon ol ul,
344.jp-RenderedHTMLCommon ol ol {
345 margin-bottom: 0em;
346}
347
348.jp-RenderedHTMLCommon hr {
349 color: var(--jp-border-color2);
350 background-color: var(--jp-border-color1);
351 margin-top: 1em;
352 margin-bottom: 1em;
353}
354
355.jp-RenderedHTMLCommon > pre {
356 margin: 1.5em 2em;
357}
358
359.jp-RenderedHTMLCommon pre,
360.jp-RenderedHTMLCommon code {
361 border: 0;
362 background-color: var(--jp-layout-color0);
363 color: var(--jp-content-font-color1);
364 font-family: var(--jp-code-font-family);
365 font-size: inherit;
366 line-height: var(--jp-code-line-height);
367 padding: 0;
368 white-space: pre-wrap;
369}
370
371.jp-RenderedHTMLCommon :not(pre) > code {
372 background-color: var(--jp-layout-color2);
373 padding: 1px 5px;
374}
375
376/* Tables */
377
378.jp-RenderedHTMLCommon table {
379 border-collapse: collapse;
380 border-spacing: 0;
381 border: none;
382 color: var(--jp-ui-font-color1);
383 font-size: var(--jp-ui-font-size1);
384 table-layout: fixed;
385 margin-left: auto;
386 margin-right: auto;
387}
388
389.jp-RenderedHTMLCommon thead {
390 border-bottom: var(--jp-border-width) solid var(--jp-border-color1);
391 vertical-align: bottom;
392}
393
394.jp-RenderedHTMLCommon td,
395.jp-RenderedHTMLCommon th,
396.jp-RenderedHTMLCommon tr {
397 vertical-align: middle;
398 padding: 0.5em 0.5em;
399 line-height: normal;
400 white-space: normal;
401 max-width: none;
402 border: none;
403}
404
405.jp-RenderedMarkdown.jp-RenderedHTMLCommon td,
406.jp-RenderedMarkdown.jp-RenderedHTMLCommon th {
407 max-width: none;
408}
409
410:not(.jp-RenderedMarkdown).jp-RenderedHTMLCommon td,
411:not(.jp-RenderedMarkdown).jp-RenderedHTMLCommon th,
412:not(.jp-RenderedMarkdown).jp-RenderedHTMLCommon tr {
413 text-align: right;
414}
415
416.jp-RenderedHTMLCommon th {
417 font-weight: bold;
418}
419
420.jp-RenderedHTMLCommon tbody tr:nth-child(odd) {
421 background: var(--jp-layout-color0);
422}
423
424.jp-RenderedHTMLCommon tbody tr:nth-child(even) {
425 background: var(--jp-rendermime-table-row-background);
426}
427
428.jp-RenderedHTMLCommon tbody tr:hover {
429 background: var(--jp-rendermime-table-row-hover-background);
430}
431
432.jp-RenderedHTMLCommon table {
433 margin-bottom: 1em;
434}
435
436.jp-RenderedHTMLCommon p {
437 text-align: left;
438 margin: 0px;
439}
440
441.jp-RenderedHTMLCommon p {
442 margin-bottom: 1em;
443}
444
445.jp-RenderedHTMLCommon img {
446 -moz-force-broken-image-icon: 1;
447}
448
449/* Restrict to direct children as other images could be nested in other content. */
450.jp-RenderedHTMLCommon > img {
451 display: block;
452 margin-left: 0;
453 margin-right: 0;
454 margin-bottom: 1em;
455}
456
457/* Change color behind transparent images if they need it... */
458[data-jp-theme-light='false'] .jp-RenderedImage img.jp-needs-light-background {
459 background-color: var(--jp-inverse-layout-color1);
460}
461[data-jp-theme-light='true'] .jp-RenderedImage img.jp-needs-dark-background {
462 background-color: var(--jp-inverse-layout-color1);
463}
464/* ...or leave it untouched if they don't */
465[data-jp-theme-light='false'] .jp-RenderedImage img.jp-needs-dark-background {
466}
467[data-jp-theme-light='true'] .jp-RenderedImage img.jp-needs-light-background {
468}
469
470.jp-RenderedHTMLCommon img,
471.jp-RenderedImage img,
472.jp-RenderedHTMLCommon svg,
473.jp-RenderedSVG svg {
474 max-width: 100%;
475 height: auto;
476}
477
478.jp-RenderedHTMLCommon img.jp-mod-unconfined,
479.jp-RenderedImage img.jp-mod-unconfined,
480.jp-RenderedHTMLCommon svg.jp-mod-unconfined,
481.jp-RenderedSVG svg.jp-mod-unconfined {
482 max-width: none;
483}
484
485.jp-RenderedHTMLCommon .alert {
486 padding: var(--jp-notebook-padding);
487 border: var(--jp-border-width) solid transparent;
488 border-radius: var(--jp-border-radius);
489 margin-bottom: 1em;
490}
491
492.jp-RenderedHTMLCommon .alert-info {
493 color: var(--jp-info-color0);
494 background-color: var(--jp-info-color3);
495 border-color: var(--jp-info-color2);
496}
497.jp-RenderedHTMLCommon .alert-info hr {
498 border-color: var(--jp-info-color3);
499}
500.jp-RenderedHTMLCommon .alert-info > p:last-child,
501.jp-RenderedHTMLCommon .alert-info > ul:last-child {
502 margin-bottom: 0;
503}
504
505.jp-RenderedHTMLCommon .alert-warning {
506 color: var(--jp-warn-color0);
507 background-color: var(--jp-warn-color3);
508 border-color: var(--jp-warn-color2);
509}
510.jp-RenderedHTMLCommon .alert-warning hr {
511 border-color: var(--jp-warn-color3);
512}
513.jp-RenderedHTMLCommon .alert-warning > p:last-child,
514.jp-RenderedHTMLCommon .alert-warning > ul:last-child {
515 margin-bottom: 0;
516}
517
518.jp-RenderedHTMLCommon .alert-success {
519 color: var(--jp-success-color0);
520 background-color: var(--jp-success-color3);
521 border-color: var(--jp-success-color2);
522}
523.jp-RenderedHTMLCommon .alert-success hr {
524 border-color: var(--jp-success-color3);
525}
526.jp-RenderedHTMLCommon .alert-success > p:last-child,
527.jp-RenderedHTMLCommon .alert-success > ul:last-child {
528 margin-bottom: 0;
529}
530
531.jp-RenderedHTMLCommon .alert-danger {
532 color: var(--jp-error-color0);
533 background-color: var(--jp-error-color3);
534 border-color: var(--jp-error-color2);
535}
536.jp-RenderedHTMLCommon .alert-danger hr {
537 border-color: var(--jp-error-color3);
538}
539.jp-RenderedHTMLCommon .alert-danger > p:last-child,
540.jp-RenderedHTMLCommon .alert-danger > ul:last-child {
541 margin-bottom: 0;
542}
543
544.jp-RenderedHTMLCommon blockquote {
545 margin: 1em 2em;
546 padding: 0 1em;
547 border-left: 5px solid var(--jp-border-color2);
548}
549
550a.jp-InternalAnchorLink {
551 visibility: hidden;
552 margin-left: 8px;
553 color: var(--md-blue-800);
554}
555
556h1:hover .jp-InternalAnchorLink,
557h2:hover .jp-InternalAnchorLink,
558h3:hover .jp-InternalAnchorLink,
559h4:hover .jp-InternalAnchorLink,
560h5:hover .jp-InternalAnchorLink,
561h6:hover .jp-InternalAnchorLink {
562 visibility: visible;
563}
564
565.jp-RenderedHTMLCommon kbd {
566 background-color: var(--jp-rendermime-table-row-background);
567 border: 1px solid var(--jp-border-color0);
568 border-bottom-color: var(--jp-border-color2);
569 border-radius: 3px;
570 box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
571 display: inline-block;
572 font-size: var(--jp-ui-font-size0);
573 line-height: 1em;
574 padding: 0.2em 0.5em;
575}
576
577/* Most direct children of .jp-RenderedHTMLCommon have a margin-bottom of 1.0.
578 * At the bottom of cells this is a bit too much as there is also spacing
579 * between cells. Going all the way to 0 gets too tight between markdown and
580 * code cells.
581 */
582.jp-RenderedHTMLCommon > *:last-child {
583 margin-bottom: 0.5em;
584}