general.css

  1/* Base styles and content styles */
  2
  3@import "variables.css";
  4
  5:root {
  6    /* Browser default font-size is 16px, this way 1 rem = 10px */
  7    font-size: 62.5%;
  8    color-scheme: var(--color-scheme);
  9}
 10
 11html {
 12    font-family: var(--font);
 13    color: var(--fg);
 14    background-color: var(--bg);
 15    text-size-adjust: none;
 16    -webkit-text-size-adjust: none;
 17
 18    text-rendering: geometricPrecision !important;
 19    -webkit-font-smoothing: antialiased !important;
 20    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.005);
 21}
 22
 23body {
 24    margin: 0;
 25    font-size: 1.6rem;
 26    overflow-x: hidden;
 27}
 28
 29code {
 30    font-family: var(--mono-font) !important;
 31    font-size: var(--code-font-size);
 32    direction: ltr !important;
 33}
 34
 35/* make long words/inline code not x overflow */
 36main {
 37    overflow-wrap: break-word;
 38}
 39
 40/* make wide tables scroll if they overflow */
 41.table-wrapper {
 42    overflow-x: auto;
 43}
 44
 45h1,
 46h2,
 47h3,
 48h4,
 49h5,
 50h6 {
 51    font-family: var(--title-font);
 52    font-weight: normal;
 53    color: var(--title-color);
 54}
 55
 56/* Don't change font size in headers. */
 57h1 code,
 58h2 code,
 59h3 code,
 60h4 code,
 61h5 code,
 62h6 code {
 63    font-size: unset;
 64}
 65
 66.left {
 67    float: left;
 68}
 69.right {
 70    float: right;
 71}
 72.boring {
 73    opacity: 0.6;
 74}
 75.hide-boring .boring {
 76    display: none;
 77}
 78.hidden {
 79    display: none !important;
 80}
 81
 82h2,
 83h3 {
 84    margin-block-start: 2.5em;
 85}
 86h4,
 87h5 {
 88    margin-block-start: 2em;
 89}
 90
 91.header + .header h3,
 92.header + .header h4,
 93.header + .header h5 {
 94    margin-block-start: 1em;
 95}
 96
 97h1:target::before,
 98h2:target::before,
 99h3:target::before,
100h4:target::before,
101h5:target::before,
102h6:target::before {
103    display: inline-block;
104    content: "ยป";
105    margin-inline-start: -30px;
106    width: 30px;
107}
108
109/* This is broken on Safari as of version 14, but is fixed
110   in Safari Technology Preview 117 which I think will be Safari 14.2.
111   https://bugs.webkit.org/show_bug.cgi?id=218076
112*/
113:target {
114    /* Safari does not support logical properties */
115    scroll-margin-top: calc(var(--menu-bar-height) + 0.5em);
116}
117
118.page {
119    outline: 0;
120    padding: 0 var(--page-padding);
121    margin-block-start: calc(
122        0px - var(--menu-bar-height)
123    ); /* Compensate for the #menu-bar-hover-placeholder */
124}
125.page-wrapper {
126    box-sizing: border-box;
127    background-color: var(--bg);
128}
129.no-js .page-wrapper,
130.js:not(.sidebar-resizing) .page-wrapper {
131    transition:
132        margin-left 0.3s ease,
133        transform 0.3s ease; /* Animation: slide away */
134}
135[dir="rtl"] .js:not(.sidebar-resizing) .page-wrapper {
136    transition:
137        margin-right 0.3s ease,
138        transform 0.3s ease; /* Animation: slide away */
139}
140
141.content {
142    overflow-y: auto;
143    padding: 0 5px 50px 5px;
144}
145.content main {
146    margin-inline-start: auto;
147    margin-inline-end: auto;
148    max-width: var(--content-max-width);
149}
150.content p {
151    line-height: 1.625em;
152}
153.content ol {
154    line-height: 1.625em;
155}
156.content ul {
157    line-height: 1.625em;
158}
159.content a {
160    text-decoration: none;
161}
162.content a:hover {
163    text-decoration: underline;
164}
165.content img,
166.content video {
167    max-width: 100%;
168}
169.content .header:link,
170.content .header:visited {
171    color: var(--title-color);
172}
173.content .header:link,
174.content .header:visited:hover {
175    text-decoration: none;
176}
177
178table {
179    margin: 0 auto;
180    border-collapse: collapse;
181}
182table td {
183    padding: 3px 20px;
184    border: 1px var(--table-border-color) solid;
185}
186table thead {
187    background: var(--table-header-bg);
188}
189table thead td {
190    font-weight: 700;
191    border: none;
192}
193table thead th {
194    padding: 3px 20px;
195}
196table thead tr {
197    border: 1px var(--table-header-bg) solid;
198}
199/* Alternate background colors for rows */
200table tbody tr:nth-child(2n) {
201    background: var(--table-alternate-bg);
202}
203
204blockquote {
205    margin: 20px 0;
206    padding: 0 20px;
207    color: var(--fg);
208    background-color: var(--quote-bg);
209    border-block-start: 0.1em solid var(--quote-border);
210    border-block-end: 0.1em solid var(--quote-border);
211}
212
213.warning {
214    margin: 20px;
215    padding: 0 20px;
216    border-inline-start: 2px solid var(--warning-border);
217}
218
219.warning:before {
220    position: absolute;
221    width: 3rem;
222    height: 3rem;
223    margin-inline-start: calc(-1.5rem - 21px);
224    content: "โ“˜";
225    text-align: center;
226    background-color: var(--bg);
227    color: var(--warning-border);
228    font-weight: bold;
229    font-size: 2rem;
230}
231
232blockquote .warning:before {
233    background-color: var(--quote-bg);
234}
235
236kbd {
237    background-color: rgba(8, 76, 207, 0.1);
238    border-radius: 4px;
239    border: solid 1px var(--theme-popup-border);
240    box-shadow: inset 0 -1px 0 var(--theme-hover);
241    display: inline-block;
242    font-size: var(--code-font-size);
243    font-family: var(--mono-font);
244    line-height: 10px;
245    padding: 4px 5px;
246    vertical-align: middle;
247}
248
249:not(.footnote-definition) + .footnote-definition,
250.footnote-definition + :not(.footnote-definition) {
251    margin-block-start: 2em;
252}
253.footnote-definition {
254    font-size: 0.9em;
255    margin: 0.5em 0;
256}
257.footnote-definition p {
258    display: inline;
259}
260
261.tooltiptext {
262    position: absolute;
263    visibility: hidden;
264    color: #fff;
265    background-color: #333;
266    transform: translateX(
267        -50%
268    ); /* Center by moving tooltip 50% of its width left */
269    left: -8px; /* Half of the width of the icon */
270    top: -35px;
271    font-size: 0.8em;
272    text-align: center;
273    border-radius: 6px;
274    padding: 5px 8px;
275    margin: 5px;
276    z-index: 1000;
277}
278.tooltipped .tooltiptext {
279    visibility: visible;
280}
281
282.chapter li.part-title {
283    font-size: 20px;
284    font-family: var(--title-font);
285    color: var(--title-color);
286    margin: 5px 0px;
287    margin-top: 3rem;
288}
289
290.result-no-output {
291    font-style: italic;
292}
293
294code.hljs {
295    color: rgb(75, 83, 97) !important;
296    background-color: rgba(8, 76, 207, 0.1);
297}