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