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