point to working video
[slides.git] / slides.css
... / ...
CommitLineData
1/**************************
2 * styles for talk slides *
3 * by Robert Kaiser *
4 * <kairo@kairo.at> *
5 * (for FOSDEM 2013) *
6 **************************/
7
8
9/***** base style *****/
10
11@font-face {
12 font-family: 'Open Sans';
13 src: url('template/OpenSans-Regular-webfont.woff');
14 font-weight: normal;
15 font-style: normal;
16}
17
18@font-face {
19 font-family: 'Open Sans';
20 src: url('template/OpenSans-Semibold-webfont.woff');
21 font-weight: bold;
22 font-style: normal;
23}
24
25@font-face {
26 font-family: 'Open Sans';
27 src: url('template/OpenSans-Italic-webfont.woff');
28 font-weight: normal;
29 font-style: italic;
30}
31
32html {
33 overflow: hidden; /* to make translations not paint scrollbars */
34 background: #f5f1e8 url("template/page-background.png") top left repeat;
35 height: 100%;
36}
37
38body {
39 margin: 0px;
40 padding: 0px;
41 border: 0px;
42 font-family: "Open Sans", sans-serif;
43 font-size: 2em;
44 color: #333333;
45 background: url("template/page-background-top.png") top left repeat-x;
46 height: 100%;
47}
48
49ul {
50 padding-left: 1.2em;
51 margin-bottom: 0.5em;
52}
53
54ul:first-child,
55ul:last-child {
56 margin-top: 0;
57}
58
59#header {
60 height: 40px;
61 position: relative;
62 border-top: 1px solid white;
63}
64
65#headerlogo {
66 position: absolute;
67 display: block;
68 right: 20px;
69 top: 0;
70 text-indent: -2000px;
71 font-size: 1px;
72 overflow: hidden;
73 height: 41px;
74 width: 148px;
75 background: url("template/mozilla-tab.png") no-repeat;
76}
77
78#header-text {
79 position: relative;
80 top: 5px;
81 left: 25px;
82 width: calc(100% - 50px);
83 font-size: 20px;
84 font-weight: bold;
85 color: #808080;
86}
87
88#header-text.neartime {
89 color: #80AACC;
90}
91
92#header-text.ontime {
93 color: #80CC80;
94}
95
96#header-text.overtime {
97 color: #FF8080;
98}
99
100#subheader-text {
101 color: #808080;
102 position: relative;
103 top: 3px;
104 left: 25px;
105 width: calc(100% - 50px);
106 font-size: 10px;
107}
108
109#slidenav {
110 position: absolute;
111 right: 200px;
112 top: 15px;
113 font-size: 10px;
114}
115
116#slidenav a:link,
117#slidenav a:visited {
118 color: #484848;
119}
120
121#slidenav a:hover,
122#slidenav a:active {
123 color: #0073aa;
124}
125
126#slidenav .nolink {
127 color: #A0A0A0;
128}
129
130article {
131 position: absolute;
132 width: 100%;
133 /* header is 40px, 7px to have a bit of distance,
134 * 3px height-reducing on the bottom for safety */
135 top: 47px;
136 height: calc(100% - 50px);
137 overflow: auto;
138
139 transition-property: transform, opacity;
140 transition-duration: 3s;
141 transition-timing-function: ease;
142 transform-origin: center 5em;
143
144 opacity: 0;
145/*
146 transform: translate(-100%, 0);
147*/
148/*
149 transform: scale(0.1) rotate(360deg) translate(-200%, 0);
150*/
151 transform: scale(0.1) translate(-400%, 0);
152}
153
154article[aria-selected="true"] {
155 opacity: 1;
156 transform: scale(1) rotate(0deg) translate(0, 0);
157}
158
159article[aria-selected="true"] ~ article {
160 opacity: 0;
161/*
162 transform: translate(100%, 0);
163*/
164/*
165 transform: scale(0.1) rotate(-360deg) translate(200%, 0);
166*/
167 transform: scale(0.1) translate(400%, 0);
168}
169
170/***** headers *****/
171
172h1, h2, h3, h4 {
173 margin: 0.5em 0;
174 font-weight: bold;
175 color: #484848;
176 text-align: center;
177}
178
179h1 {
180 margin-top: 0;
181 font-size: 1.7em;
182 text-shadow: #AAAA80 3px 3px 5px;
183}
184
185h2 {
186 font-size: 1.3em;
187 text-shadow: #AAAA80 2px 2px 3px;
188}
189
190h3 {
191 font-size: 1.1em;
192}
193
194h4 {
195 font-size: 1em;
196 text-align: left;
197}
198
199/***** boxes *****/
200
201.simplebox {
202 padding: 0.5em;
203}
204
205.captionedbox {
206 padding: 0px;
207}
208
209.simplebox,
210.captionedbox {
211 margin: 1em;
212 box-shadow: 0 0 0 1px #fff inset;
213 background: #fff;
214 background-image: radial-gradient(center 45px, ellipse farthest-corner, #f5f1e8 0, #fff 100%);
215 border-bottom: 1px solid #ddd;
216}
217
218.captionedbox-content {
219 margin: 0;
220 padding: 0.5em;
221 border: 0px;
222 border-top: 1px solid #d6d6d6;
223}
224
225.captionedbox-caption {
226 margin: 0;
227 padding: 0.5em;
228 font-weight: bold;
229 text-shadow: #AAAA80 1px 1px 2px;
230}
231
232/***** misc formatting *****/
233
234mark {
235 font-weight: bold;
236 color: #FF6600;
237 background-color: transparent;
238 text-shadow: #AAAA80 2px 2px 3px;
239}
240
241.border {
242 border: 1px solid #6d7581;
243 padding: 0.5em;
244}
245
246.sshot {
247 box-shadow: #6d7581 1px 1px 3px 2px;
248}
249
250.slidepic {
251 float: right;
252 margin-left: .5em;
253}
254
255.ensurepicinbox {
256 clear: both;
257 font-size: 1px;
258 margin: 0;
259}
260
261.largetext {
262 font-size: 2em;
263}
264
265ul > li {
266 margin: 0.5em 0;
267}
268
269.columns2 {
270 -moz-columns: 2;
271}
272
273ul.nobullets > li {
274 list-style-type: none;
275}
276
277ul.arrows > li {
278 list-style-type: none;
279}
280ul.arrows > li:before {
281 content: "\21d2\20"; /* \2192 would be single thin arrow, hex 20 is space */
282}
283
284.cent {
285 text-align: center;
286}
287
288.topmargin {
289 margin-top: 0.5em;
290}
291
292.akey {
293 text-decoration: underline;
294}
295
296a:link, a:visited { color: #0096dd; text-decoration: none; }
297a:hover, a:active { color: #FF6600; text-decoration: underline; }
298
299mark a:link, mark a:visited { color: #FF6600; }
300mark a:hover, mark a:active { color: #FF6600; }
301
302pre { margin: 0; }
303
304/***** small stuff *****/
305
306.small,
307.small {
308 font-size: 0.75em;
309}
310
311ul.small,
312.small ul {
313 padding: 0px;
314 border: 0px;
315 margin: 0px 0px 0px 1em;
316}
317
318ul.small > li
319.small ul > li {
320 margin: 0px;
321 padding: 0px;
322 border: 0px;
323}
324
325/***** specific slides *****/
326