123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144 |
- /* 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;
- }
- a.header:target h1:before,
- a.header:target h2:before,
- a.header:target h3:before,
- a.header:target h4: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 .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;
- }
-
|