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