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  }
  9  
 10  html {
 11      font-family: var(--font), sans-serif;
 12      color: var(--fg);
 13      background-color: var(--bg);
 14      text-size-adjust: none;
 15  }
 16  
 17  body {
 18      margin: 0;
 19      font-size: 1.6rem;
 20      font-family: var(--font);
 21      overflow-x: hidden;
 22  }
 23  
 24  
 25  code {
 26      font-family: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace !important;
 27      font-size: 0.875em; /* please adjust the ace font size accordingly in editor.js */
 28  }
 29  
 30  /* Don't change font size in headers. */
 31  h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
 32      font-size: unset;
 33  }
 34  
 35  .left { float: left; }
 36  .right { float: right; }
 37  .boring { opacity: 0.6; }
 38  .hide-boring .boring { display: none; }
 39  .hidden { display: none; }
 40  
 41  h2, h3 { margin-top: 2.5em; }
 42  h4, h5 { margin-top: 2em; }
 43  
 44  .header + .header h3,
 45  .header + .header h4,
 46  .header + .header h5 {
 47      margin-top: 1em;
 48  }
 49  
 50  h1 a.header:target::before,
 51  h2 a.header:target::before,
 52  h3 a.header:target::before,
 53  h4 a.header:target::before {
 54      display: inline-block;
 55      content: "»";
 56      margin-left: -30px;
 57      width: 30px;
 58  }
 59  
 60  h1 a.header:target,
 61  h2 a.header:target,
 62  h3 a.header:target,
 63  h4 a.header:target {
 64      scroll-margin-top: calc(var(--menu-bar-height) + 0.5em);
 65  }
 66  
 67  .page {
 68      outline: 0;
 69      padding: 0 var(--page-padding);
 70      margin-top: calc(0px - var(--menu-bar-height)); /* Compensate for the #menu-bar-hover-placeholder */
 71  }
 72  .page-wrapper {
 73      box-sizing: border-box;
 74  }
 75  .js:not(.sidebar-resizing) .page-wrapper {
 76      transition: margin-left 0.3s ease, transform 0.3s ease; /* Animation: slide away */
 77  }
 78  
 79  .content {
 80      overflow-y: auto;
 81      padding: 0 15px;
 82      padding-bottom: 50px;
 83      font-size: var(--content-font-size);
 84  }
 85  .content main {
 86      margin-left: auto;
 87      margin-right: auto;
 88      max-width: var(--content-max-width);
 89  }
 90  .content p { line-height: 1.45em; }
 91  .content ol { line-height: 1.45em; }
 92  .content ul { line-height: 1.45em; }
 93  .content a { text-decoration: none; }
 94  .content a:hover { text-decoration: underline; }
 95  .content img { max-width: 100%; }
 96  .content .header:link,
 97  .content .header:visited {
 98      color: var(--fg);
 99  }
100  .content .header:link,
101  .content .header:visited:hover {
102      text-decoration: none;
103  }
104  
105  table {
106      margin: 0 auto;
107      border-collapse: collapse;
108  }
109  table td {
110      padding: 3px 20px;
111      border: 1px var(--table-border-color) solid;
112  }
113  table thead {
114      background: var(--table-header-bg);
115  }
116  table thead td {
117      font-weight: 700;
118      border: none;
119  }
120  table thead th {
121      padding: 3px 20px;
122  }
123  table thead tr {
124      border: 1px var(--table-header-bg) solid;
125  }
126  /* Alternate background colors for rows */
127  table tbody tr:nth-child(2n) {
128      background: var(--table-alternate-bg);
129  }
130  
131  
132  blockquote {
133      margin: 20px 0;
134      padding: 0 20px;
135      color: var(--fg);
136      background-color: var(--quote-bg);
137      border-top: .1em solid var(--quote-border);
138      border-bottom: .1em solid var(--quote-border);
139  }
140  
141  
142  :not(.footnote-definition) + .footnote-definition,
143  .footnote-definition + :not(.footnote-definition) {
144      margin-top: 2em;
145  }
146  .footnote-definition {
147      font-size: 0.9em;
148      margin: 0.5em 0;
149  }
150  .footnote-definition p {
151      display: inline;
152  }
153  
154  .tooltiptext {
155      position: absolute;
156      visibility: hidden;
157      color: #fff;
158      background-color: #333;
159      transform: translateX(-50%); /* Center by moving tooltip 50% of its width left */
160      left: -8px; /* Half of the width of the icon */
161      top: -35px;
162      font-size: 0.8em;
163      text-align: center;
164      border-radius: 6px;
165      padding: 5px 8px;
166      margin: 5px;
167      z-index: 1000;
168  }
169  .tooltipped .tooltiptext {
170      visibility: visible;
171  }