Mercurial > hg > Members > kaito > slides
comparison trunk/styles.css @ 0:845ff8ff4fc9
1st
author | Kaito Tokumori <e105711@ie.u-ryukyu.ac.jp> |
---|---|
date | Tue, 14 Jan 2014 01:31:42 +0900 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:845ff8ff4fc9 |
---|---|
1 /* | |
2 Google HTML5 slides template | |
3 | |
4 Authors: Luke Mahé (code) | |
5 Marcin Wichary (code and design) | |
6 | |
7 Dominic Mazzoni (browser compatibility) | |
8 Charles Chen (ChromeVox support) | |
9 | |
10 URL: http://code.google.com/p/html5slides/ | |
11 */ | |
12 | |
13 /* Framework */ | |
14 | |
15 html { | |
16 height: 100%; | |
17 } | |
18 | |
19 body { | |
20 margin: 0; | |
21 padding: 0; | |
22 | |
23 display: block !important; | |
24 | |
25 height: 100%; | |
26 // min-height: 740px; | |
27 | |
28 overflow-x: hidden; | |
29 overflow-y: auto; | |
30 | |
31 background: rgb(215, 215, 215); | |
32 background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); | |
33 background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); | |
34 background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); | |
35 background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190))); | |
36 | |
37 -webkit-font-smoothing: antialiased; | |
38 } | |
39 | |
40 .slides { | |
41 width: 100%; | |
42 height: 100%; | |
43 left: 0; | |
44 top: 0; | |
45 | |
46 position: absolute; | |
47 | |
48 -webkit-transform: translate3d(0, 0, 0); | |
49 } | |
50 | |
51 .slides > article { | |
52 display: block; | |
53 | |
54 position: absolute; | |
55 overflow: hidden; | |
56 | |
57 width: 900px; | |
58 height: 700px; | |
59 | |
60 left: 50%; | |
61 top: 50%; | |
62 | |
63 margin-left: -450px; | |
64 margin-top: -350px; | |
65 | |
66 padding: 40px 60px; | |
67 | |
68 box-sizing: border-box; | |
69 -o-box-sizing: border-box; | |
70 -moz-box-sizing: border-box; | |
71 -webkit-box-sizing: border-box; | |
72 | |
73 border-radius: 10px; | |
74 -o-border-radius: 10px; | |
75 -moz-border-radius: 10px; | |
76 -webkit-border-radius: 10px; | |
77 | |
78 background-color: white; | |
79 | |
80 box-shadow: 0 2px 6px rgba(0, 0, 0, .1); | |
81 border: 1px solid rgba(0, 0, 0, .3); | |
82 | |
83 transition: transform .3s ease-out; | |
84 -o-transition: -o-transform .3s ease-out; | |
85 -moz-transition: -moz-transform .3s ease-out; | |
86 -webkit-transition: -webkit-transform .3s ease-out; | |
87 } | |
88 .slides.layout-widescreen > article { | |
89 margin-left: -550px; | |
90 width: 1100px; | |
91 } | |
92 .slides.layout-faux-widescreen > article { | |
93 margin-left: -550px; | |
94 width: 1100px; | |
95 | |
96 padding: 40px 160px; | |
97 } | |
98 | |
99 .slides.template-default > article:not(.nobackground):not(.biglogo) { | |
100 background: url(images/google-logo-small.png) 710px 625px no-repeat; | |
101 | |
102 background-color: white; | |
103 font-family: 'Times New Roman' | |
104 } | |
105 | |
106 .slides.template-io2011 > article:not(.nobackground):not(.biglogo) { | |
107 background: url(images/colorbar.png) 0 600px repeat-x, | |
108 url(images/googleio-logo.png) 640px 625px no-repeat; | |
109 | |
110 background-size: 100%, 225px; | |
111 | |
112 background-color: white; | |
113 } | |
114 .slides.layout-widescreen > article:not(.nobackground):not(.biglogo), | |
115 .slides.layout-faux-widescreen > article:not(.nobackground):not(.biglogo) { | |
116 background-position-x: 0, 840px; | |
117 } | |
118 | |
119 /* Clickable/tappable areas */ | |
120 | |
121 .slide-area { | |
122 z-index: 1000; | |
123 | |
124 position: absolute; | |
125 left: 0; | |
126 top: 0; | |
127 width: 150px; | |
128 height: 700px; | |
129 | |
130 left: 50%; | |
131 top: 50%; | |
132 | |
133 cursor: pointer; | |
134 margin-top: -350px; | |
135 | |
136 tap-highlight-color: transparent; | |
137 -o-tap-highlight-color: transparent; | |
138 -moz-tap-highlight-color: transparent; | |
139 -webkit-tap-highlight-color: transparent; | |
140 } | |
141 #prev-slide-area { | |
142 margin-left: -550px; | |
143 } | |
144 #next-slide-area { | |
145 margin-left: 400px; | |
146 } | |
147 .slides.layout-widescreen #prev-slide-area, | |
148 .slides.layout-faux-widescreen #prev-slide-area { | |
149 margin-left: -650px; | |
150 } | |
151 .slides.layout-widescreen #next-slide-area, | |
152 .slides.layout-faux-widescreen #next-slide-area { | |
153 margin-left: 500px; | |
154 } | |
155 | |
156 /* Slide styles */ | |
157 | |
158 .slides.template-default article.biglogo { | |
159 background: white url(images/google-logo.png) 50% 50% no-repeat; | |
160 } | |
161 | |
162 .slides.template-io2011 article.biglogo { | |
163 background: white url(images/googleio-logo.png) 50% 50% no-repeat; | |
164 | |
165 background-size: 600px; | |
166 } | |
167 | |
168 /* Slides */ | |
169 | |
170 .slides > article { | |
171 display: none; | |
172 } | |
173 .slides > article.far-past { | |
174 display: block; | |
175 transform: translate(-2040px); | |
176 -o-transform: translate(-2040px); | |
177 -moz-transform: translate(-2040px); | |
178 -webkit-transform: translate3d(-2040px, 0, 0); | |
179 } | |
180 .slides > article.past { | |
181 display: block; | |
182 transform: translate(-1020px); | |
183 -o-transform: translate(-1020px); | |
184 -moz-transform: translate(-1020px); | |
185 -webkit-transform: translate3d(-1020px, 0, 0); | |
186 } | |
187 .slides > article.current { | |
188 display: block; | |
189 transform: translate(0); | |
190 -o-transform: translate(0); | |
191 -moz-transform: translate(0); | |
192 -webkit-transform: translate3d(0, 0, 0); | |
193 } | |
194 .slides > article.next { | |
195 display: block; | |
196 transform: translate(1020px); | |
197 -o-transform: translate(1020px); | |
198 -moz-transform: translate(1020px); | |
199 -webkit-transform: translate3d(1020px, 0, 0); | |
200 } | |
201 .slides > article.far-next { | |
202 display: block; | |
203 transform: translate(2040px); | |
204 -o-transform: translate(2040px); | |
205 -moz-transform: translate(2040px); | |
206 -webkit-transform: translate3d(2040px, 0, 0); | |
207 } | |
208 | |
209 .slides.layout-widescreen > article.far-past, | |
210 .slides.layout-faux-widescreen > article.far-past { | |
211 display: block; | |
212 transform: translate(-2260px); | |
213 -o-transform: translate(-2260px); | |
214 -moz-transform: translate(-2260px); | |
215 -webkit-transform: translate3d(-2260px, 0, 0); | |
216 } | |
217 .slides.layout-widescreen > article.past, | |
218 .slides.layout-faux-widescreen > article.past { | |
219 display: block; | |
220 transform: translate(-1130px); | |
221 -o-transform: translate(-1130px); | |
222 -moz-transform: translate(-1130px); | |
223 -webkit-transform: translate3d(-1130px, 0, 0); | |
224 } | |
225 .slides.layout-widescreen > article.current, | |
226 .slides.layout-faux-widescreen > article.current { | |
227 display: block; | |
228 transform: translate(0); | |
229 -o-transform: translate(0); | |
230 -moz-transform: translate(0); | |
231 -webkit-transform: translate3d(0, 0, 0); | |
232 } | |
233 .slides.layout-widescreen > article.next, | |
234 .slides.layout-faux-widescreen > article.next { | |
235 display: block; | |
236 transform: translate(1130px); | |
237 -o-transform: translate(1130px); | |
238 -moz-transform: translate(1130px); | |
239 -webkit-transform: translate3d(1130px, 0, 0); | |
240 } | |
241 .slides.layout-widescreen > article.far-next, | |
242 .slides.layout-faux-widescreen > article.far-next { | |
243 display: block; | |
244 transform: translate(2260px); | |
245 -o-transform: translate(2260px); | |
246 -moz-transform: translate(2260px); | |
247 -webkit-transform: translate3d(2260px, 0, 0); | |
248 } | |
249 | |
250 /* Styles for slides */ | |
251 | |
252 .slides > article { | |
253 font-family: 'Open Sans', Arial, sans-serif; | |
254 | |
255 color: rgb(102, 102, 102); | |
256 text-shadow: 0 1px 1px rgba(0, 0, 0, .1); | |
257 | |
258 font-size: 30px; | |
259 line-height: 36px; | |
260 | |
261 letter-spacing: -1px; | |
262 } | |
263 | |
264 b { | |
265 font-weight: 600; | |
266 } | |
267 | |
268 .blue { | |
269 color: rgb(0, 102, 204); | |
270 } | |
271 .yellow { | |
272 color: rgb(255, 211, 25); | |
273 } | |
274 .green { | |
275 color: rgb(0, 138, 53); | |
276 } | |
277 .red { | |
278 color: rgb(255, 0, 0); | |
279 } | |
280 .black { | |
281 color: black; | |
282 } | |
283 .white { | |
284 color: white; | |
285 } | |
286 | |
287 a { | |
288 color: rgb(0, 102, 204); | |
289 } | |
290 a:visited { | |
291 color: rgba(0, 102, 204, .75); | |
292 } | |
293 a:hover { | |
294 color: black; | |
295 } | |
296 | |
297 p { | |
298 margin: 0; | |
299 padding: 0; | |
300 | |
301 margin-top: 20px; | |
302 } | |
303 p:first-child { | |
304 margin-top: 0; | |
305 } | |
306 | |
307 h1 { | |
308 font-size: 60px; | |
309 line-height: 60px; | |
310 | |
311 padding: 0; | |
312 margin: 0; | |
313 margin-top: 200px; | |
314 padding-right: 40px; | |
315 | |
316 font-weight: 600; | |
317 | |
318 letter-spacing: -3px; | |
319 | |
320 color: rgb(51, 51, 51); | |
321 } | |
322 | |
323 h2 { | |
324 font-size: 45px; | |
325 line-height: 45px; | |
326 | |
327 position: absolute; | |
328 bottom: 150px; | |
329 | |
330 padding: 0; | |
331 margin: 0; | |
332 padding-right: 40px; | |
333 | |
334 font-weight: 600; | |
335 | |
336 letter-spacing: -2px; | |
337 | |
338 color: rgb(51, 51, 51); | |
339 } | |
340 | |
341 h3 { | |
342 font-size: 30px; | |
343 line-height: 36px; | |
344 | |
345 padding: 0; | |
346 margin: 0; | |
347 padding-right: 40px; | |
348 | |
349 font-weight: 600; | |
350 | |
351 letter-spacing: -1px; | |
352 | |
353 color: rgb(51, 51, 51); | |
354 } | |
355 | |
356 article.fill h3 { | |
357 background: rgba(255, 255, 255, .75); | |
358 padding-top: .2em; | |
359 padding-bottom: .3em; | |
360 margin-top: -.2em; | |
361 margin-left: -60px; | |
362 padding-left: 60px; | |
363 margin-right: -60px; | |
364 padding-right: 60px; | |
365 } | |
366 | |
367 ul { | |
368 list-style: none; | |
369 margin: 0; | |
370 padding: 0; | |
371 | |
372 margin-top: 40px; | |
373 | |
374 margin-left: .75em; | |
375 } | |
376 ul:first-child { | |
377 margin-top: 0; | |
378 } | |
379 ul ul { | |
380 margin-top: .5em; | |
381 } | |
382 li { | |
383 padding: 0; | |
384 margin: 0; | |
385 | |
386 margin-bottom: .5em; | |
387 } | |
388 li::before { | |
389 content: '·'; | |
390 | |
391 width: .75em; | |
392 margin-left: -.75em; | |
393 | |
394 position: absolute; | |
395 } | |
396 | |
397 pre { | |
398 font-family: 'Droid Sans Mono', 'Courier New', monospace; | |
399 | |
400 font-size: 20px; | |
401 line-height: 28px; | |
402 padding: 5px 10px; | |
403 | |
404 letter-spacing: -1px; | |
405 | |
406 margin-top: 40px; | |
407 margin-bottom: 40px; | |
408 | |
409 color: black; | |
410 background: rgb(240, 240, 240); | |
411 border: 1px solid rgb(224, 224, 224); | |
412 box-shadow: inset 0 2px 6px rgba(0, 0, 0, .1); | |
413 | |
414 overflow: hidden; | |
415 } | |
416 | |
417 code { | |
418 font-size: 95%; | |
419 font-family: 'Droid Sans Mono', 'Courier New', monospace; | |
420 | |
421 color: black; | |
422 } | |
423 | |
424 iframe { | |
425 width: 100%; | |
426 | |
427 height: 620px; | |
428 | |
429 background: white; | |
430 border: 1px solid rgb(192, 192, 192); | |
431 margin: -1px; | |
432 /*box-shadow: inset 0 2px 6px rgba(0, 0, 0, .1);*/ | |
433 } | |
434 | |
435 h3 + iframe { | |
436 margin-top: 40px; | |
437 height: 540px; | |
438 } | |
439 | |
440 article.fill iframe { | |
441 position: absolute; | |
442 left: 0; | |
443 top: 0; | |
444 width: 100%; | |
445 height: 100%; | |
446 | |
447 border: 0; | |
448 margin: 0; | |
449 | |
450 border-radius: 10px; | |
451 -o-border-radius: 10px; | |
452 -moz-border-radius: 10px; | |
453 -webkit-border-radius: 10px; | |
454 | |
455 z-index: -1; | |
456 } | |
457 | |
458 article.fill img { | |
459 position: absolute; | |
460 left: 0; | |
461 top: 0; | |
462 min-width: 100%; | |
463 min-height: 100%; | |
464 | |
465 border-radius: 10px; | |
466 -o-border-radius: 10px; | |
467 -moz-border-radius: 10px; | |
468 -webkit-border-radius: 10px; | |
469 | |
470 z-index: -1; | |
471 } | |
472 img.centered { | |
473 margin: 0 auto; | |
474 display: block; | |
475 } | |
476 | |
477 table { | |
478 width: 100%; | |
479 border-collapse: collapse; | |
480 margin-top: 40px; | |
481 } | |
482 th { | |
483 font-weight: 600; | |
484 text-align: left; | |
485 } | |
486 td, | |
487 th { | |
488 border: 1px solid rgb(224, 224, 224); | |
489 padding: 5px 10px; | |
490 vertical-align: top; | |
491 } | |
492 | |
493 .source { | |
494 position: absolute; | |
495 left: 60px; | |
496 top: 644px; | |
497 padding-right: 175px; | |
498 | |
499 font-size: 15px; | |
500 letter-spacing: 0; | |
501 line-height: 18px; | |
502 } | |
503 | |
504 q { | |
505 display: block; | |
506 font-size: 60px; | |
507 line-height: 72px; | |
508 | |
509 margin-left: 20px; | |
510 | |
511 margin-top: 100px; | |
512 margin-right: 150px; | |
513 } | |
514 q::before { | |
515 content: '“'; | |
516 | |
517 position: absolute; | |
518 display: inline-block; | |
519 margin-left: -2.1em; | |
520 width: 2em; | |
521 text-align: right; | |
522 | |
523 font-size: 90px; | |
524 color: rgb(192, 192, 192); | |
525 } | |
526 q::after { | |
527 content: '”'; | |
528 | |
529 position: absolute; | |
530 margin-left: .1em; | |
531 | |
532 font-size: 90px; | |
533 color: rgb(192, 192, 192); | |
534 } | |
535 div.author { | |
536 text-align: right; | |
537 font-size: 40px; | |
538 | |
539 margin-top: 20px; | |
540 margin-right: 150px; | |
541 } | |
542 div.author::before { | |
543 content: '—'; | |
544 } | |
545 | |
546 /* Size variants */ | |
547 | |
548 article.smaller p, | |
549 article.smaller ul { | |
550 font-size: 20px; | |
551 line-height: 24px; | |
552 letter-spacing: 0; | |
553 } | |
554 article.smaller table { | |
555 font-size: 20px; | |
556 line-height: 24px; | |
557 letter-spacing: 0; | |
558 } | |
559 article.smaller pre { | |
560 font-size: 15px; | |
561 line-height: 20px; | |
562 letter-spacing: 0; | |
563 } | |
564 article.smaller q { | |
565 font-size: 40px; | |
566 line-height: 48px; | |
567 } | |
568 article.smaller q::before, | |
569 article.smaller q::after { | |
570 font-size: 60px; | |
571 } | |
572 | |
573 /* Builds */ | |
574 | |
575 .build > * { | |
576 transition: opacity 0.5s ease-in-out 0.2s; | |
577 -o-transition: opacity 0.5s ease-in-out 0.2s; | |
578 -moz-transition: opacity 0.5s ease-in-out 0.2s; | |
579 -webkit-transition: opacity 0.5s ease-in-out 0.2s; | |
580 } | |
581 | |
582 .to-build { | |
583 opacity: 0; | |
584 } | |
585 | |
586 /* Pretty print */ | |
587 | |
588 .prettyprint .str, /* string content */ | |
589 .prettyprint .atv { /* a markup attribute value */ | |
590 color: rgb(0, 138, 53); | |
591 } | |
592 .prettyprint .kwd, /* a keyword */ | |
593 .prettyprint .tag { /* a markup tag name */ | |
594 color: rgb(0, 102, 204); | |
595 } | |
596 .prettyprint .com { /* a comment */ | |
597 color: rgb(127, 127, 127); | |
598 font-style: italic; | |
599 } | |
600 .prettyprint .lit { /* a literal value */ | |
601 color: rgb(127, 0, 0); | |
602 } | |
603 .prettyprint .pun, /* punctuation, lisp open bracket, lisp close bracket */ | |
604 .prettyprint .opn, | |
605 .prettyprint .clo { | |
606 color: rgb(127, 127, 127); | |
607 } | |
608 .prettyprint .typ, /* a type name */ | |
609 .prettyprint .atn, /* a markup attribute name */ | |
610 .prettyprint .dec, | |
611 .prettyprint .var { /* a declaration; a variable name */ | |
612 color: rgb(127, 0, 127); | |
613 } |