diff --git a/CHANGES.rst b/CHANGES.rst index 449ca3c69..225700cd4 100644 --- a/CHANGES.rst +++ b/CHANGES.rst @@ -18,6 +18,9 @@ Major changes Minor changes ------------- +* The reports created by :class:`TableReport`, when inserted in an html page (or + displayed in a notebook), now use the same font as the surrounding page. + :pr:`1038` by :user:`Jérôme Dockès `. Release 0.3.0 diff --git a/skrub/_reporting/_data/templates/base.css b/skrub/_reporting/_data/templates/base.css index 5bb5f06ac..f7f7fda21 100644 --- a/skrub/_reporting/_data/templates/base.css +++ b/skrub/_reporting/_data/templates/base.css @@ -22,16 +22,15 @@ --lightg: #f0f0f0; --fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, "DejaVu Sans Mono", Liberation Mono, monospace; - --fontStack-sansSerif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; } :host { - font-family: var(--fontStack-sansSerif); font-size: 1rem; line-height: 1.5; -webkit-text-size-adjust: 100%; } + /* The report is in a shadow DOM so outside selectors don't reach it but properties */ /* can still be inherited from a parent element. We make sure it has black text on */ /* a white background otherwise eg a dark mode in the page could make parts of it */ @@ -45,6 +44,10 @@ max-width: max-content; } +h1 { + font-size: var(--huge); +} + button > * { pointer-events: none; } @@ -80,6 +83,7 @@ pre { code, pre { font-family: var(--fontStack-monospace); + font-size: calc(0.9 * var(--small)); } :is(td, th) { @@ -260,9 +264,9 @@ dd { } .announcement { - font-size: var(--large); - padding-block-start: var(--huge); - padding-block-end: var(--huge); + font-size: var(--small); + padding-block-start: var(--small); + padding-block-end: var(--small); } .important-note { diff --git a/skrub/_reporting/_data/templates/copybutton.css b/skrub/_reporting/_data/templates/copybutton.css index d2fc653eb..8f862cc62 100644 --- a/skrub/_reporting/_data/templates/copybutton.css +++ b/skrub/_reporting/_data/templates/copybutton.css @@ -17,7 +17,7 @@ .box pre { overflow-x: auto; - padding: var(--tiny); + padding: var(--micro); flex-grow: 1; white-space: pre; } @@ -54,7 +54,7 @@ border-radius: var(--radius, 5px); position: absolute; right: calc(100% + 5px); - top: 5px; + top: 3px; margin: 0; } diff --git a/skrub/_reporting/_data/templates/standalone-report.css b/skrub/_reporting/_data/templates/standalone-report.css new file mode 100644 index 000000000..f4b3c3254 --- /dev/null +++ b/skrub/_reporting/_data/templates/standalone-report.css @@ -0,0 +1,7 @@ +:root { + --fontStack-sansSerif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; +} + +body { + font-family: var(--fontStack-sansSerif); +} diff --git a/skrub/_reporting/_data/templates/standalone-report.html b/skrub/_reporting/_data/templates/standalone-report.html index 8148fe90c..f35b717d9 100644 --- a/skrub/_reporting/_data/templates/standalone-report.html +++ b/skrub/_reporting/_data/templates/standalone-report.html @@ -5,6 +5,9 @@ {{ summary.file_name if summary.file_name else "skrub report" }} +