1/**
  2 * Black compact & high contrast reveal.js theme, with headers not in capitals.
  3 *
  4 * By Peter Kehl. Based on black.(s)css by Hakim El Hattab, http://hakim.se
  5 *
  6 * - Keep the source similar to black.css - for easy comparison.
  7 * - $mainFontSize controls code blocks, too (although under some ratio).
  8 */
  9@import url(./fonts/source-sans-pro/source-sans-pro.css);
 10section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
 11  color: #000;
 12}
 13
 14/*********************************************
 15 * GLOBAL STYLES
 16 *********************************************/
 17:root {
 18  --r-background-color: #000000;
 19  --r-main-font: Source Sans Pro, Helvetica, sans-serif;
 20  --r-main-font-size: 42px;
 21  --r-main-color: #fff;
 22  --r-block-margin: 20px;
 23  --r-heading-margin: 0 0 20px 0;
 24  --r-heading-font: Source Sans Pro, Helvetica, sans-serif;
 25  --r-heading-color: #fff;
 26  --r-heading-line-height: 1.2;
 27  --r-heading-letter-spacing: normal;
 28  --r-heading-text-transform: uppercase;
 29  --r-heading-text-shadow: none;
 30  --r-heading-font-weight: 600;
 31  --r-heading1-text-shadow: none;
 32  --r-heading1-size: 2.5em;
 33  --r-heading2-size: 1.6em;
 34  --r-heading3-size: 1.3em;
 35  --r-heading4-size: 1em;
 36  --r-code-font: monospace;
 37  --r-link-color: #42affa;
 38  --r-link-color-dark: #068de9;
 39  --r-link-color-hover: #8dcffc;
 40  --r-selection-background-color: #bee4fd;
 41  --r-selection-color: #fff;
 42}
 43
 44.reveal-viewport {
 45  background: #000000;
 46  background-color: var(--r-background-color);
 47}
 48
 49.reveal {
 50  font-family: var(--r-main-font);
 51  font-size: var(--r-main-font-size);
 52  font-weight: normal;
 53  color: var(--r-main-color);
 54}
 55
 56.reveal ::selection {
 57  color: var(--r-selection-color);
 58  background: var(--r-selection-background-color);
 59  text-shadow: none;
 60}
 61
 62.reveal ::-moz-selection {
 63  color: var(--r-selection-color);
 64  background: var(--r-selection-background-color);
 65  text-shadow: none;
 66}
 67
 68.reveal .slides section,
 69.reveal .slides section > section {
 70  line-height: 1.3;
 71  font-weight: inherit;
 72}
 73
 74/*********************************************
 75 * HEADERS
 76 *********************************************/
 77.reveal h1,
 78.reveal h2,
 79.reveal h3,
 80.reveal h4,
 81.reveal h5,
 82.reveal h6 {
 83  margin: var(--r-heading-margin);
 84  color: var(--r-heading-color);
 85  font-family: var(--r-heading-font);
 86  font-weight: var(--r-heading-font-weight);
 87  line-height: var(--r-heading-line-height);
 88  letter-spacing: var(--r-heading-letter-spacing);
 89  text-transform: var(--r-heading-text-transform);
 90  text-shadow: var(--r-heading-text-shadow);
 91  word-wrap: break-word;
 92}
 93
 94.reveal h1 {
 95  font-size: var(--r-heading1-size);
 96}
 97
 98.reveal h2 {
 99  font-size: var(--r-heading2-size);
100}
101
102.reveal h3 {
103  font-size: var(--r-heading3-size);
104}
105
106.reveal h4 {
107  font-size: var(--r-heading4-size);
108}
109
110.reveal h1 {
111  text-shadow: var(--r-heading1-text-shadow);
112}
113
114/*********************************************
115 * OTHER
116 *********************************************/
117.reveal p {
118  margin: var(--r-block-margin) 0;
119  line-height: 1.3;
120}
121
122/* Remove trailing margins after titles */
123.reveal h1:last-child,
124.reveal h2:last-child,
125.reveal h3:last-child,
126.reveal h4:last-child,
127.reveal h5:last-child,
128.reveal h6:last-child {
129  margin-bottom: 0;
130}
131
132/* Ensure certain elements are never larger than the slide itself */
133.reveal img,
134.reveal video,
135.reveal iframe {
136  max-width: 95%;
137  max-height: 95%;
138}
139
140.reveal strong,
141.reveal b {
142  font-weight: bold;
143}
144
145.reveal em {
146  font-style: italic;
147}
148
149.reveal ol,
150.reveal dl,
151.reveal ul {
152  display: inline-block;
153  text-align: left;
154  margin: 0 0 0 1em;
155}
156
157.reveal ol {
158  list-style-type: decimal;
159}
160
161.reveal ul {
162  list-style-type: disc;
163}
164
165.reveal ul ul {
166  list-style-type: square;
167}
168
169.reveal ul ul ul {
170  list-style-type: circle;
171}
172
173.reveal ul ul,
174.reveal ul ol,
175.reveal ol ol,
176.reveal ol ul {
177  display: block;
178  margin-left: 40px;
179}
180
181.reveal dt {
182  font-weight: bold;
183}
184
185.reveal dd {
186  margin-left: 40px;
187}
188
189.reveal blockquote {
190  display: block;
191  position: relative;
192  width: 70%;
193  margin: var(--r-block-margin) auto;
194  padding: 5px;
195  font-style: italic;
196  background: rgba(255, 255, 255, 0.05);
197  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
198}
199
200.reveal blockquote p:first-child,
201.reveal blockquote p:last-child {
202  display: inline-block;
203}
204
205.reveal q {
206  font-style: italic;
207}
208
209.reveal pre {
210  display: block;
211  position: relative;
212  width: 90%;
213  margin: var(--r-block-margin) auto;
214  text-align: left;
215  font-size: 0.55em;
216  font-family: var(--r-code-font);
217  line-height: 1.2em;
218  word-wrap: break-word;
219  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
220}
221
222.reveal code {
223  font-family: var(--r-code-font);
224  text-transform: none;
225  tab-size: 2;
226}
227
228.reveal pre code {
229  display: block;
230  padding: 5px;
231  overflow: auto;
232  max-height: 400px;
233  word-wrap: normal;
234}
235
236.reveal .code-wrapper {
237  white-space: normal;
238}
239
240.reveal .code-wrapper code {
241  white-space: pre;
242}
243
244.reveal table {
245  margin: auto;
246  border-collapse: collapse;
247  border-spacing: 0;
248}
249
250.reveal table th {
251  font-weight: bold;
252}
253
254.reveal table th,
255.reveal table td {
256  text-align: left;
257  padding: 0.2em 0.5em 0.2em 0.5em;
258  border-bottom: 1px solid;
259}
260
261.reveal table th[align=center],
262.reveal table td[align=center] {
263  text-align: center;
264}
265
266.reveal table th[align=right],
267.reveal table td[align=right] {
268  text-align: right;
269}
270
271.reveal table tbody tr:last-child th,
272.reveal table tbody tr:last-child td {
273  border-bottom: none;
274}
275
276.reveal sup {
277  vertical-align: super;
278  font-size: smaller;
279}
280
281.reveal sub {
282  vertical-align: sub;
283  font-size: smaller;
284}
285
286.reveal small {
287  display: inline-block;
288  font-size: 0.6em;
289  line-height: 1.2em;
290  vertical-align: top;
291}
292
293.reveal small * {
294  vertical-align: top;
295}
296
297.reveal img {
298  margin: var(--r-block-margin) 0;
299}
300
301/*********************************************
302 * LINKS
303 *********************************************/
304.reveal a {
305  color: var(--r-link-color);
306  text-decoration: none;
307  transition: color 0.15s ease;
308}
309
310.reveal a:hover {
311  color: var(--r-link-color-hover);
312  text-shadow: none;
313  border: none;
314}
315
316.reveal .roll span:after {
317  color: #fff;
318  background: var(--r-link-color-dark);
319}
320
321/*********************************************
322 * Frame helper
323 *********************************************/
324.reveal .r-frame {
325  border: 4px solid var(--r-main-color);
326  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
327}
328
329.reveal a .r-frame {
330  transition: all 0.15s linear;
331}
332
333.reveal a:hover .r-frame {
334  border-color: var(--r-link-color);
335  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
336}
337
338/*********************************************
339 * NAVIGATION CONTROLS
340 *********************************************/
341.reveal .controls {
342  color: var(--r-link-color);
343}
344
345/*********************************************
346 * PROGRESS BAR
347 *********************************************/
348.reveal .progress {
349  background: rgba(0, 0, 0, 0.2);
350  color: var(--r-link-color);
351}
352
353/*********************************************
354 * PRINT BACKGROUND
355 *********************************************/
356@media print {
357  .backgrounds {
358    background-color: var(--r-background-color);
359  }
360}