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