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