blob: 9bb416ac4529595d4b13709192b30aa75382708e [file] [log] [blame]
JJ Allaireefa6ad42016-01-30 13:12:05 -05001// Base theme template for reveal.js
2
3/*********************************************
4 * GLOBAL STYLES
5 *********************************************/
6
7body {
8 @include bodyBackground();
9 background-color: $backgroundColor;
10}
11
12.reveal {
13 font-family: $mainFont;
14 font-size: $mainFontSize;
15 font-weight: normal;
16 color: $mainColor;
17}
18
19::selection {
20 color: $selectionColor;
21 background: $selectionBackgroundColor;
22 text-shadow: none;
23}
24
25.reveal .slides>section,
26.reveal .slides>section>section {
27 line-height: 1.3;
28 font-weight: inherit;
29}
30
31/*********************************************
32 * HEADERS
33 *********************************************/
34
35.reveal h1,
36.reveal h2,
37.reveal h3,
38.reveal h4,
39.reveal h5,
40.reveal h6 {
41 margin: $headingMargin;
42 color: $headingColor;
43
44 font-family: $headingFont;
45 font-weight: $headingFontWeight;
46 line-height: $headingLineHeight;
47 letter-spacing: $headingLetterSpacing;
48
49 text-transform: $headingTextTransform;
50 text-shadow: $headingTextShadow;
51
52 word-wrap: break-word;
53}
54
55.reveal h1 {font-size: $heading1Size; }
56.reveal h2 {font-size: $heading2Size; }
57.reveal h3 {font-size: $heading3Size; }
58.reveal h4 {font-size: $heading4Size; }
59
60.reveal h1 {
61 text-shadow: $heading1TextShadow;
62}
63
64
65/*********************************************
66 * OTHER
67 *********************************************/
68
69.reveal p {
70 margin: $blockMargin 0;
71 line-height: 1.3;
72}
73
74/* Ensure certain elements are never larger than the slide itself */
75.reveal img,
76.reveal video,
77.reveal iframe {
78 max-width: 95%;
79 max-height: 95%;
80}
81.reveal strong,
82.reveal b {
83 font-weight: bold;
84}
85
86.reveal em {
87 font-style: italic;
88}
89
90.reveal ol,
91.reveal dl,
92.reveal ul {
93 display: inline-block;
94
95 text-align: left;
96 margin: 0 0 0 1em;
97}
98
99.reveal ol {
100 list-style-type: decimal;
101}
102
103.reveal ul {
104 list-style-type: disc;
105}
106
107.reveal ul ul {
108 list-style-type: square;
109}
110
111.reveal ul ul ul {
112 list-style-type: circle;
113}
114
115.reveal ul ul,
116.reveal ul ol,
117.reveal ol ol,
118.reveal ol ul {
119 display: block;
120 margin-left: 40px;
121}
122
123.reveal dt {
124 font-weight: bold;
125}
126
127.reveal dd {
128 margin-left: 40px;
129}
130
131.reveal q,
132.reveal blockquote {
133 quotes: none;
134}
135
136.reveal blockquote {
137 display: block;
138 position: relative;
139 width: 70%;
140 margin: $blockMargin auto;
141 padding: 5px;
142
143 font-style: italic;
144 background: rgba(255, 255, 255, 0.05);
145 box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
146}
147 .reveal blockquote p:first-child,
148 .reveal blockquote p:last-child {
149 display: inline-block;
150 }
151
152.reveal q {
153 font-style: italic;
154}
155
156.reveal pre {
157 display: block;
158 position: relative;
159 width: 90%;
160 margin: $blockMargin auto;
161
162 text-align: left;
163 font-size: 0.55em;
164 font-family: monospace;
165 line-height: 1.2em;
166
167 word-wrap: break-word;
168
169 box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
170}
171.reveal code {
172 font-family: monospace;
173}
174
175.reveal pre code {
176 display: block;
177 padding: 5px;
178 overflow: auto;
179 max-height: 400px;
180 word-wrap: normal;
181}
182
183.reveal table {
184 margin: auto;
185 border-collapse: collapse;
186 border-spacing: 0;
187}
188
189.reveal table th {
190 font-weight: bold;
191}
192
193.reveal table th,
194.reveal table td {
195 text-align: left;
196 padding: 0.2em 0.5em 0.2em 0.5em;
197 border-bottom: 1px solid;
198}
199
200.reveal table th[align="center"],
201.reveal table td[align="center"] {
202 text-align: center;
203}
204
205.reveal table th[align="right"],
206.reveal table td[align="right"] {
207 text-align: right;
208}
209
210.reveal table tr:last-child td {
211 border-bottom: none;
212}
213
214.reveal sup {
215 vertical-align: super;
216}
217.reveal sub {
218 vertical-align: sub;
219}
220
221.reveal small {
222 display: inline-block;
223 font-size: 0.6em;
224 line-height: 1.2em;
225 vertical-align: top;
226}
227
228.reveal small * {
229 vertical-align: top;
230}
231
232
233/*********************************************
234 * LINKS
235 *********************************************/
236
237.reveal a {
238 color: $linkColor;
239 text-decoration: none;
240
241 -webkit-transition: color .15s ease;
242 -moz-transition: color .15s ease;
243 transition: color .15s ease;
244}
245 .reveal a:hover {
246 color: $linkColorHover;
247
248 text-shadow: none;
249 border: none;
250 }
251
252.reveal .roll span:after {
253 color: #fff;
254 background: darken( $linkColor, 15% );
255}
256
257
258/*********************************************
259 * IMAGES
260 *********************************************/
261
262.reveal section img {
263 margin: 15px 0px;
264 background: rgba(255,255,255,0.12);
265 border: 4px solid $mainColor;
266
267 box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
268}
269
270 .reveal section img.plain {
271 border: 0;
272 box-shadow: none;
273 }
274
275 .reveal a img {
276 -webkit-transition: all .15s linear;
277 -moz-transition: all .15s linear;
278 transition: all .15s linear;
279 }
280
281 .reveal a:hover img {
282 background: rgba(255,255,255,0.2);
283 border-color: $linkColor;
284
285 box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
286 }
287
288
289/*********************************************
290 * NAVIGATION CONTROLS
291 *********************************************/
292
293.reveal .controls .navigate-left,
294.reveal .controls .navigate-left.enabled {
295 border-right-color: $linkColor;
296}
297
298.reveal .controls .navigate-right,
299.reveal .controls .navigate-right.enabled {
300 border-left-color: $linkColor;
301}
302
303.reveal .controls .navigate-up,
304.reveal .controls .navigate-up.enabled {
305 border-bottom-color: $linkColor;
306}
307
308.reveal .controls .navigate-down,
309.reveal .controls .navigate-down.enabled {
310 border-top-color: $linkColor;
311}
312
313.reveal .controls .navigate-left.enabled:hover {
314 border-right-color: $linkColorHover;
315}
316
317.reveal .controls .navigate-right.enabled:hover {
318 border-left-color: $linkColorHover;
319}
320
321.reveal .controls .navigate-up.enabled:hover {
322 border-bottom-color: $linkColorHover;
323}
324
325.reveal .controls .navigate-down.enabled:hover {
326 border-top-color: $linkColorHover;
327}
328
329
330/*********************************************
331 * PROGRESS BAR
332 *********************************************/
333
334.reveal .progress {
335 background: rgba(0,0,0,0.2);
336}
337 .reveal .progress span {
338 background: $linkColor;
339
340 -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
341 -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
342 transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
343 }
344
345