2558e56d |
1 | /************************** |
2 | * styles for talk slides * |
3 | * by Robert Kaiser * |
4 | * <kairo@kairo.at> * |
5 | * (for Linuxwochen 2009) * |
6 | **************************/ |
7 | |
8 | |
9 | /***** base style *****/ |
10 | |
369296c5 |
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 | |
2558e56d |
32 | html { |
33 | overflow: hidden; /* to make translations not paint scrollbars */ |
369296c5 |
34 | background: #f5f1e8 url("template/page-background.png") top left repeat; |
35 | height: 100%; |
2558e56d |
36 | } |
37 | |
38 | body { |
39 | margin: 0px; |
40 | padding: 0px; |
41 | border: 0px; |
369296c5 |
42 | font-family: "Open Sans", sans-serif; |
2558e56d |
43 | font-size: 2em; |
369296c5 |
44 | color: #333333; |
45 | background: url("template/page-background-top.png") top left repeat-x; |
46 | height: 100%; |
2558e56d |
47 | } |
48 | |
49 | ul { |
50 | padding-left: 1.2em; |
51 | margin-bottom: 0.5em; |
52 | } |
53 | |
54 | ul:first-child, |
55 | ul:last-child { |
56 | margin-top: 0; |
57 | } |
58 | |
59 | #header { |
369296c5 |
60 | height: 40px; |
2558e56d |
61 | position: relative; |
369296c5 |
62 | border-top: 1px solid white; |
2558e56d |
63 | } |
64 | |
65 | #headerlogo { |
369296c5 |
66 | position: absolute; |
2558e56d |
67 | display: block; |
369296c5 |
68 | right: 20px; |
69 | top: 0; |
70 | text-indent: -2000px; |
2558e56d |
71 | font-size: 1px; |
72 | overflow: hidden; |
369296c5 |
73 | height: 41px; |
74 | width: 148px; |
75 | background: url("template/mozilla-tab.png") no-repeat; |
2558e56d |
76 | } |
77 | |
78 | #header-text { |
369296c5 |
79 | position: relative; |
80 | top: 5px; |
81 | left: 25px; |
82 | font-size: 20px; |
2558e56d |
83 | font-weight: bold; |
369296c5 |
84 | color: #808080; |
2558e56d |
85 | } |
86 | |
87 | #header-text.neartime { |
369296c5 |
88 | color: #80AACC; |
2558e56d |
89 | } |
90 | |
91 | #header-text.ontime { |
92 | color: #80CC80; |
93 | } |
94 | |
95 | #header-text.overtime { |
96 | color: #FF8080; |
97 | } |
98 | |
369296c5 |
99 | #subheader-text { |
100 | color: #808080; |
101 | position: relative; |
102 | top: 3px; |
103 | left: 25px; |
104 | font-size: 10px; |
105 | } |
106 | |
2558e56d |
107 | #slidenav { |
369296c5 |
108 | position: absolute; |
109 | right: 200px; |
110 | top: 15px; |
2558e56d |
111 | font-size: 10px; |
2558e56d |
112 | } |
113 | |
114 | #slidenav a:link, |
115 | #slidenav a:visited { |
369296c5 |
116 | color: #484848; |
2558e56d |
117 | } |
118 | |
119 | #slidenav a:hover, |
120 | #slidenav a:active { |
369296c5 |
121 | color: #0073aa; |
2558e56d |
122 | } |
123 | |
124 | #slidenav .nolink { |
369296c5 |
125 | color: #A0A0A0; |
2558e56d |
126 | } |
127 | |
128 | article { |
129 | position: absolute; |
130 | width: 100%; |
131 | /* header is 38px + 1px border, slidenav is 13px + 4px + 30px paddings, |
132 | another 5px for safety */ |
133 | height: calc(100% - 90px); |
134 | overflow: auto; |
135 | |
136 | transition-property: transform, opacity; |
137 | transition-duration: 3s; |
138 | transition-timing-function: ease; |
139 | transform-origin: center 5em; |
140 | |
141 | opacity: 0; |
142 | /* |
143 | transform: translate(-100%, 0); |
144 | */ |
145 | /* |
146 | transform: scale(0.1) rotate(360deg); |
147 | */ |
148 | transform: scale(0.1) rotate(360deg) translate(-200%, 0); |
149 | } |
150 | |
151 | article[aria-selected="true"] { |
152 | opacity: 1; |
153 | transform: scale(1) rotate(0deg) translate(0, 0); |
154 | } |
155 | |
156 | article[aria-selected="true"] ~ article { |
157 | opacity: 0; |
158 | /* |
159 | transform: translate(100%, 0); |
160 | */ |
161 | /* |
162 | transform: scale(0.1) rotate(-360deg); |
163 | */ |
164 | transform: scale(0.1) rotate(-360deg) translate(200%, 0); |
165 | } |
166 | |
167 | /***** headers *****/ |
168 | |
369296c5 |
169 | h1, h2, h3, h4 { |
170 | margin: 0.5em 0; |
2558e56d |
171 | font-weight: bold; |
369296c5 |
172 | color: #484848; |
2558e56d |
173 | text-align: center; |
369296c5 |
174 | } |
175 | |
176 | h1 { |
177 | margin-top: 0; |
178 | font-size: 1.7em; |
2558e56d |
179 | text-shadow: #AAAA80 3px 3px 5px; |
180 | } |
181 | |
182 | h2 { |
2558e56d |
183 | font-size: 1.3em; |
2558e56d |
184 | text-shadow: #AAAA80 2px 2px 3px; |
185 | } |
186 | |
187 | h3 { |
2558e56d |
188 | font-size: 1.1em; |
2558e56d |
189 | } |
190 | |
191 | h4 { |
2558e56d |
192 | font-size: 1em; |
2558e56d |
193 | text-align: left; |
194 | } |
195 | |
196 | /***** boxes *****/ |
197 | |
198 | .simplebox { |
199 | padding: 0.5em; |
200 | } |
201 | |
202 | .captionedbox { |
203 | padding: 0px; |
204 | } |
205 | |
206 | .simplebox, |
207 | .captionedbox { |
208 | margin: 1em; |
369296c5 |
209 | box-shadow: 0 0 0 1px #fff inset; |
210 | background: #fff; |
211 | background-image: radial-gradient(center 45px, ellipse farthest-corner, #f5f1e8 0, #fff 100%); |
212 | border-bottom: 1px solid #ddd; |
2558e56d |
213 | } |
214 | |
215 | .captionedbox-content { |
216 | margin: 0px; |
217 | padding: 0.5em; |
218 | border: 0px; |
369296c5 |
219 | border-top: 1px solid #d6d6d6; |
2558e56d |
220 | } |
221 | |
222 | .captionedbox-caption { |
223 | margin: 0.5em; |
224 | font-weight: bold; |
225 | text-shadow: #AAAA80 1px 1px 2px; |
226 | } |
227 | |
228 | /***** misc formatting *****/ |
229 | |
230 | mark { |
231 | font-weight: bold; |
232 | color: #FF6600; |
233 | background-color: transparent; |
234 | text-shadow: #AAAA80 2px 2px 3px; |
235 | } |
236 | |
237 | .border { |
238 | border: 1px solid #6d7581; |
239 | padding: 0.5em; |
240 | } |
241 | |
496fd646 |
242 | .sshot { |
243 | box-shadow: #6d7581 1px 1px 3px 2px; |
244 | } |
245 | |
2558e56d |
246 | ul > li { |
247 | margin: 0.5em 0; |
248 | } |
249 | |
250 | .cent { |
251 | text-align: center; |
252 | } |
253 | |
254 | .topmargin { |
255 | margin-top: 0.5em; |
256 | } |
257 | |
258 | .akey { |
259 | text-decoration: underline; |
260 | } |
261 | |
369296c5 |
262 | a:link, a:visited { color: #0096dd; text-decoration: none; } |
2558e56d |
263 | a:hover, a:active { color: #FF6600; text-decoration: underline; } |
264 | |
265 | mark a:link, mark a:visited { color: #FF6600; } |
266 | mark a:hover, mark a:active { color: #FF6600; } |
267 | |
268 | /***** small stuff *****/ |
269 | |
270 | .small, |
271 | .small { |
272 | font-size: 0.75em; |
273 | } |
274 | |
275 | ul.small, |
276 | .small ul { |
277 | padding: 0px; |
278 | border: 0px; |
279 | margin: 0px 0px 0px 1em; |
280 | } |
281 | |
282 | ul.small > li |
283 | .small ul > li { |
284 | margin: 0px; |
285 | padding: 0px; |
286 | border: 0px; |
287 | } |
288 | |
289 | /***** specific slides *****/ |
290 | |