240 lines
4.3 KiB
CSS
240 lines
4.3 KiB
CSS
/* Print Styles - Hide Elements */
|
|
@media print {
|
|
iframe,
|
|
.g-mega-nav,
|
|
.g-product-subnav,
|
|
.g-footer,
|
|
[aria-hidden='true'],
|
|
[id='sidebar'],
|
|
[id='edit-this-page'],
|
|
[id='jump-to-section'],
|
|
[id='__next-build-watcher'] {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* Print Styles - Page Spacing */
|
|
@media print {
|
|
@page {
|
|
margin: 2cm 0.5cm;
|
|
}
|
|
|
|
@page :first {
|
|
margin-top: 0;
|
|
}
|
|
|
|
@page :last {
|
|
margin-top: 0;
|
|
}
|
|
|
|
blockquote {
|
|
break-inside: avoid;
|
|
}
|
|
|
|
body {
|
|
margin-bottom: 2cm;
|
|
margin-top: 2cm;
|
|
}
|
|
|
|
dl,
|
|
ol,
|
|
ul {
|
|
break-before: avoid;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
break-after: avoid;
|
|
break-inside: avoid;
|
|
}
|
|
|
|
img {
|
|
break-inside: avoid;
|
|
break-after: avoid;
|
|
}
|
|
|
|
pre,
|
|
table {
|
|
break-inside: avoid;
|
|
}
|
|
|
|
pre {
|
|
white-space: pre-wrap;
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
/* @todo: remove alongside @hashicorp/react-global-styles/_temporary-to-remove/layout.css */
|
|
.g-container {
|
|
/*
|
|
* A “measure” is the number of characters in a line of text.
|
|
* Long lines fatique readers as they find the start of a new line of text.
|
|
* It seems widely accepted that an ideal measure is 66 characters per line.
|
|
* An average character takes up .5em, and so we define a measure of 33em.
|
|
* See: https://webtypography.net/2.1.2
|
|
*/
|
|
max-width: 33em;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
word-break: break-word;
|
|
}
|
|
|
|
/* @todo: remove alongside @hashicorp/react-global-styles/_temporary-to-remove/tables.css */
|
|
table {
|
|
margin-bottom: 0;
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
|
|
/* @todo: move print styles to @hashicorp/react-global-styles/global.css */
|
|
@media print {
|
|
pre code,
|
|
code,
|
|
pre {
|
|
font-weight: inherit;
|
|
}
|
|
|
|
pre {
|
|
background: transparent;
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
|
|
color: inherit;
|
|
padding: 0.5em;
|
|
|
|
& > code {
|
|
white-space: inherit;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* @todo: move print styles to @hashicorp/react-content/dist/style.css */
|
|
@media print {
|
|
.g-content {
|
|
& a {
|
|
color: inherit;
|
|
font-weight: 700;
|
|
|
|
&:not(.anchor) {
|
|
&::after {
|
|
background-color: transparent;
|
|
position: static;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&[href^='http'] {
|
|
&::after {
|
|
content: ' <' attr(href) '>';
|
|
font-size: 0.8em;
|
|
font-style: italic;
|
|
letter-spacing: -0.01875em;
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
|
|
&:not([href^='http']) {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
& > code {
|
|
color: inherit;
|
|
font-weight: 700;
|
|
|
|
&::before,
|
|
&::after {
|
|
content: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
& h1,
|
|
& h2,
|
|
& h3,
|
|
& h4,
|
|
& h5,
|
|
& h6 {
|
|
& code {
|
|
background: none;
|
|
font-size: 1em;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
& h2 {
|
|
margin: 1em 0 0;
|
|
}
|
|
|
|
& h3 {
|
|
margin: 1em 0 0;
|
|
padding-bottom: 0.25em;
|
|
}
|
|
|
|
& img {
|
|
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
|
|
margin: 1em 0 0;
|
|
}
|
|
|
|
& ol,
|
|
& ul {
|
|
margin: 1em 0 0;
|
|
|
|
& li {
|
|
margin-bottom: 0;
|
|
margin-top: 0.5em;
|
|
|
|
& p:first-child {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
& p {
|
|
margin: 1em 0 0;
|
|
}
|
|
|
|
& pre {
|
|
background-color: transparent;
|
|
border-radius: 0;
|
|
margin: 1.5em 0 0;
|
|
|
|
& code {
|
|
background: transparent;
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
& dd,
|
|
& dt,
|
|
& li,
|
|
& p,
|
|
& td,
|
|
& th {
|
|
& > :not(pre) code,
|
|
& > code {
|
|
background: transparent;
|
|
font-weight: 700;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
& .alert.alert-danger,
|
|
& .alert.alert-info,
|
|
& .alert.alert-success,
|
|
& .alert.alert-warning {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* @todo: move print styles to @hashicorp/react-global-styles/code-highlighting.css */
|
|
@media print {
|
|
.hljs {
|
|
& * {
|
|
color: inherit;
|
|
}
|
|
}
|
|
}
|
|
|