diff --git a/frontend/global-styles/github-markdown.scss b/frontend/global-styles/github-markdown.scss index 13175a407..4006d6eab 100644 --- a/frontend/global-styles/github-markdown.scss +++ b/frontend/global-styles/github-markdown.scss @@ -107,12 +107,6 @@ font-size: 1em; } - hr { - box-sizing: initial; - height: 0; - overflow: visible; - } - input { font: inherit; margin: 0; diff --git a/frontend/global-styles/index.scss b/frontend/global-styles/index.scss index db7b98ca5..b61bd7742 100644 --- a/frontend/global-styles/index.scss +++ b/frontend/global-styles/index.scss @@ -17,6 +17,7 @@ @import "./github-markdown"; @import "./markdown-tweaks"; @import "./reveal"; +@import "./print"; .text-black, body[data-bs-theme=dark] .text-black { color: $black; diff --git a/frontend/global-styles/markdown-tweaks.scss b/frontend/global-styles/markdown-tweaks.scss index 5d8782155..e1b7e96ea 100644 --- a/frontend/global-styles/markdown-tweaks.scss +++ b/frontend/global-styles/markdown-tweaks.scss @@ -1,5 +1,5 @@ -/* - * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) +/*! + * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file) * * SPDX-License-Identifier: AGPL-3.0-only */ diff --git a/frontend/global-styles/print.scss b/frontend/global-styles/print.scss new file mode 100644 index 000000000..a99a905cd --- /dev/null +++ b/frontend/global-styles/print.scss @@ -0,0 +1,73 @@ +/*! + * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only + */ +@media print { + .heading-anchor, .footnote-backref { + display: none; + } + + a[href] { + border-bottom: none; + text-decoration: none; + + &::after { + content: ' (' attr(href) ')'; + font-size: 0.75em; + } + } + + nav.table-of-contents, sup.footnote-ref { + a[href]::after { + display: none; + content: ''; + } + } + + sup.footnote-ref { + a[href] { + color: unset; + } + } + + abbr[title] { + border-bottom: none !important; + text-decoration: none !important; + } + + mark { + print-color-adjust: exact; + -webkit-print-color-adjust: exact; + } + + h1, h2, h3, h4, h5 { + break-after: avoid; + page-break-after: avoid; + } + + table, figure, p, img, ul, ol, pre, code { + break-inside: avoid; + page-break-inside: avoid; + } + + @page { + padding: 1.5cm; + margin: 1cm auto; + } + + .print-only { + display: inline; + } + + hr { + background-color: transparent !important; + border-bottom: 2px solid #bbbcbf; + } +} + +@media screen { + .print-only { + display: none; + } +} diff --git a/frontend/locales/en.json b/frontend/locales/en.json index 3734a7e01..1b40a936f 100644 --- a/frontend/locales/en.json +++ b/frontend/locales/en.json @@ -370,7 +370,8 @@ } }, "rawHtml": "Raw HTML", - "markdown-file": "Markdown file" + "markdown-file": "Markdown file", + "print": "Print" }, "import": { "clipboard": "Clipboard", @@ -971,5 +972,11 @@ "example": "```markdown=12\nline1\n```\n```markdown=+\nline2\n```\n```markdown=\nline3\n```" } } + }, + "print": { + "warning": { + "title": "Warning!", + "text": "To print this note, please use the print button in the export menu in the sidebar. Printing this page directly will not work as expected." + } } } diff --git a/frontend/src/components/common/copyable/copy-to-clipboard-button/__snapshots__/copy-to-clipboard-button.spec.tsx.snap b/frontend/src/components/common/copyable/copy-to-clipboard-button/__snapshots__/copy-to-clipboard-button.spec.tsx.snap index 12f2e8282..12b168954 100644 --- a/frontend/src/components/common/copyable/copy-to-clipboard-button/__snapshots__/copy-to-clipboard-button.spec.tsx.snap +++ b/frontend/src/components/common/copyable/copy-to-clipboard-button/__snapshots__/copy-to-clipboard-button.spec.tsx.snap @@ -3,7 +3,7 @@ exports[`Copy to clipboard button show an error text if clipboard api isn't available 1`] = `