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