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