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