Mercurial > hg > Papers > 2017 > mitsuki-thesis

comparison final_main/presen/styles.css @ 0:30a433a94a9a

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