blob: 186c4531a685bd2a1d96c575b729718a5714a610 [file] [log] [blame]
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +02001/**
Marc Kupietz09b75752023-10-07 09:32:19 +02002 * White compact & high contrast reveal.js theme, with headers not in capitals.
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +02003 *
Marc Kupietz09b75752023-10-07 09:32:19 +02004 * By Peter Kehl. Based on white.(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).
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +02008 */
9@import url(./fonts/source-sans-pro/source-sans-pro.css);
10section.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 {
11 color: #fff;
12}
13
14/*********************************************
15 * GLOBAL STYLES
16 *********************************************/
17:root {
18 --r-background-color: #fff;
19 --r-main-font: Source Sans Pro, Helvetica, sans-serif;
20 --r-main-font-size: 42px;
Marc Kupietz09b75752023-10-07 09:32:19 +020021 --r-main-color: #000;
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +020022 --r-block-margin: 20px;
23 --r-heading-margin: 0 0 20px 0;
24 --r-heading-font: Source Sans Pro, Helvetica, sans-serif;
Marc Kupietz09b75752023-10-07 09:32:19 +020025 --r-heading-color: #000;
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +020026 --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: #2a76dd;
38 --r-link-color-dark: #1a53a1;
39 --r-link-color-hover: #6ca0e8;
40 --r-selection-background-color: #98bdef;
41 --r-selection-color: #fff;
42}
43
44.reveal-viewport {
45 background: #fff;
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}