blob: 101a56732c92d8c1a783822ce6ebdf70bb001d9f [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
Bruce's Thinkpad3c3d67d2016-07-14 01:43:48 +0800210.reveal table tbody tr:last-child th,
211.reveal table tbody tr:last-child td {
JJ Allaireefa6ad42016-01-30 13:12:05 -0500212 border-bottom: none;
213}
214
215.reveal sup {
216 vertical-align: super;
217}
218.reveal sub {
219 vertical-align: sub;
220}
221
222.reveal small {
223 display: inline-block;
224 font-size: 0.6em;
225 line-height: 1.2em;
226 vertical-align: top;
227}
228
229.reveal small * {
230 vertical-align: top;
231}
232
233
234/*********************************************
235 * LINKS
236 *********************************************/
237
238.reveal a {
239 color: $linkColor;
240 text-decoration: none;
241
242 -webkit-transition: color .15s ease;
243 -moz-transition: color .15s ease;
244 transition: color .15s ease;
245}
246 .reveal a:hover {
247 color: $linkColorHover;
248
249 text-shadow: none;
250 border: none;
251 }
252
253.reveal .roll span:after {
254 color: #fff;
255 background: darken( $linkColor, 15% );
256}
257
258
259/*********************************************
260 * IMAGES
261 *********************************************/
262
263.reveal section img {
264 margin: 15px 0px;
265 background: rgba(255,255,255,0.12);
266 border: 4px solid $mainColor;
267
268 box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
269}
270
271 .reveal section img.plain {
272 border: 0;
273 box-shadow: none;
274 }
275
276 .reveal a img {
277 -webkit-transition: all .15s linear;
278 -moz-transition: all .15s linear;
279 transition: all .15s linear;
280 }
281
282 .reveal a:hover img {
283 background: rgba(255,255,255,0.2);
284 border-color: $linkColor;
285
286 box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
287 }
288
289
290/*********************************************
291 * NAVIGATION CONTROLS
292 *********************************************/
293
294.reveal .controls .navigate-left,
295.reveal .controls .navigate-left.enabled {
296 border-right-color: $linkColor;
297}
298
299.reveal .controls .navigate-right,
300.reveal .controls .navigate-right.enabled {
301 border-left-color: $linkColor;
302}
303
304.reveal .controls .navigate-up,
305.reveal .controls .navigate-up.enabled {
306 border-bottom-color: $linkColor;
307}
308
309.reveal .controls .navigate-down,
310.reveal .controls .navigate-down.enabled {
311 border-top-color: $linkColor;
312}
313
314.reveal .controls .navigate-left.enabled:hover {
315 border-right-color: $linkColorHover;
316}
317
318.reveal .controls .navigate-right.enabled:hover {
319 border-left-color: $linkColorHover;
320}
321
322.reveal .controls .navigate-up.enabled:hover {
323 border-bottom-color: $linkColorHover;
324}
325
326.reveal .controls .navigate-down.enabled:hover {
327 border-top-color: $linkColorHover;
328}
329
330
331/*********************************************
332 * PROGRESS BAR
333 *********************************************/
334
335.reveal .progress {
336 background: rgba(0,0,0,0.2);
337}
338 .reveal .progress span {
339 background: $linkColor;
340
341 -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
342 -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
343 transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
344 }
345
346