| /* Base styles and content styles */ |
| |
| @import 'variables.css'; |
| |
| html { |
| font-family: "Open Sans", sans-serif; |
| color: var(--fg); |
| background-color: var(--bg); |
| text-size-adjust: none; |
| } |
| |
| body { |
| margin: 0; |
| font-size: 1rem; |
| overflow-x: hidden; |
| } |
| |
| code { |
| font-family: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace; |
| font-size: 0.875em; /* please adjust the ace font size accordingly in editor.js */ |
| } |
| |
| .left { float: left; } |
| .right { float: right; } |
| .hidden { display: none; } |
| .play-button.hidden { display: none; } |
| |
| h2, h3 { margin-top: 2.5em; } |
| h4, h5 { margin-top: 2em; } |
| |
| .header + .header h3, |
| .header + .header h4, |
| .header + .header h5 { |
| margin-top: 1em; |
| } |
| |
| h1 a.header:target::before, |
| h2 a.header:target::before, |
| h3 a.header:target::before, |
| h4 a.header:target::before { |
| display: inline-block; |
| content: "ยป"; |
| margin-left: -30px; |
| width: 30px; |
| } |
| |
| .page { |
| outline: 0; |
| padding: 0 var(--page-padding); |
| } |
| .page-wrapper { |
| box-sizing: border-box; |
| } |
| .js:not(.sidebar-resizing) .page-wrapper { |
| transition: margin-left 0.3s ease, transform 0.3s ease; /* Animation: slide away */ |
| } |
| |
| .content { |
| overflow-y: auto; |
| padding: 0 15px; |
| padding-bottom: 50px; |
| } |
| .content main { |
| margin-left: auto; |
| margin-right: auto; |
| max-width: var(--content-max-width); |
| } |
| .content a { text-decoration: none; } |
| .content a:hover { text-decoration: underline; } |
| .content img { max-width: 100%; } |
| .content .header:link, |
| .content .header:visited { |
| color: var(--fg); |
| } |
| .content .header:link, |
| .content .header:visited:hover { |
| text-decoration: none; |
| } |
| |
| table { |
| margin: 0 auto; |
| border-collapse: collapse; |
| } |
| table td { |
| padding: 3px 20px; |
| border: 1px var(--table-border-color) solid; |
| } |
| table thead { |
| background: var(--table-header-bg); |
| } |
| table thead td { |
| font-weight: 700; |
| border: none; |
| } |
| table thead tr { |
| border: 1px var(--table-header-bg) solid; |
| } |
| /* Alternate background colors for rows */ |
| table tbody tr:nth-child(2n) { |
| background: var(--table-alternate-bg); |
| } |
| |
| |
| blockquote { |
| margin: 20px 0; |
| padding: 0 20px; |
| color: var(--fg); |
| background-color: var(--quote-bg); |
| border-top: .1em solid var(--quote-border); |
| border-bottom: .1em solid var(--quote-border); |
| } |
| |
| |
| :not(.footnote-definition) + .footnote-definition, |
| .footnote-definition + :not(.footnote-definition) { |
| margin-top: 2em; |
| } |
| .footnote-definition { |
| font-size: 0.9em; |
| margin: 0.5em 0; |
| } |
| .footnote-definition p { |
| display: inline; |
| } |
| |
| .tooltiptext { |
| position: absolute; |
| visibility: hidden; |
| color: #fff; |
| background-color: #333; |
| transform: translateX(-50%); /* Center by moving tooltip 50% of its width left */ |
| left: -8px; /* Half of the width of the icon */ |
| top: -35px; |
| font-size: 0.8em; |
| text-align: center; |
| border-radius: 6px; |
| padding: 5px 8px; |
| margin: 5px; |
| z-index: 1000; |
| } |
| .tooltipped .tooltiptext { |
| visibility: visible; |
| } |