Mercurial > hg > Papers > 2015 > kkb-sigos
comparison presen/themes/ribbon/styles/style.css @ 12:ff895b2c6792
add presen
author | Shohei KOKUBO <e105744@ie.u-ryukyu.ac.jp> |
---|---|
date | Sun, 24 May 2015 18:12:03 +0900 |
parents | |
children | 40686d8028c5 |
comparison
equal
deleted
inserted
replaced
11:37c481e6d758 | 12:ff895b2c6792 |
---|---|
1 /* | |
2 Ribbon theme for Shower presentation template: http://github.com/pepelsbey/shower | |
3 Copyright © 2010–2011 Vadim Makeev, http://pepelsbey.net/ | |
4 Licensed under MIT license: https://github.com/pepelsbey/shower/wiki/License | |
5 */ | |
6 | |
7 @import url(fonts.css); | |
8 @import url(reset.css); | |
9 | |
10 BODY { | |
11 font:140% 'PT Sans', sans-serif; | |
12 counter-reset:paging; | |
13 } | |
14 | |
15 /* Slide | |
16 ---------------------------------------- */ | |
17 .slide:after { | |
18 counter-increment:paging; | |
19 content:counter(paging, decimal-leading-zero); | |
20 } | |
21 .slide SECTION { | |
22 padding:5% 120px 0; | |
23 width:784px; | |
24 height:560px; | |
25 background:#FFF; | |
26 color:#000; | |
27 } | |
28 .slide SECTION:before { | |
29 position:absolute; | |
30 bottom:-90px; | |
31 right:45px; | |
32 width:200px; | |
33 height:200px; | |
34 background:url(../../../pictures/logo.svg) no-repeat; | |
35 background-size: 200px; | |
36 content:''; | |
37 } | |
38 | |
39 /* Header */ | |
40 .slide HEADER { | |
41 margin:0 0 3%; | |
42 color:#666; | |
43 font:bold 220% 'PT Sans Narrow', sans-serif; | |
44 } | |
45 | |
46 /* Elements */ | |
47 .slide P { | |
48 margin:0 0 1%; | |
49 } | |
50 .slide P.note { | |
51 color:#888; | |
52 } | |
53 .slide A { | |
54 border-bottom:0.1em solid; | |
55 color:#0174A7; | |
56 text-decoration:none; | |
57 } | |
58 .slide A[target=_blank] { | |
59 margin-right:22px; | |
60 } | |
61 .slide A[target=_blank]:after { | |
62 position:absolute; | |
63 margin-left:7px; | |
64 font-family:'Target Blank'; | |
65 content:'\005E'; | |
66 } | |
67 .slide B, | |
68 .slide STRONG { | |
69 font-weight:bold; | |
70 } | |
71 .slide I, | |
72 .slide EM { | |
73 font-style:italic; | |
74 } | |
75 .slide KBD, | |
76 .slide CODE { | |
77 padding:3px 8px; | |
78 -webkit-border-radius:8px; | |
79 -moz-border-radius:8px; | |
80 border-radius:8px; | |
81 background:#FAFAA2; | |
82 -webkit-tab-size:4; | |
83 -moz-tab-size:4; | |
84 -o-tab-size:4; | |
85 tab-size:4; | |
86 font-family:Consolas, 'Droid Sans Mono', monospace; | |
87 } | |
88 | |
89 /* Quote */ | |
90 .slide BLOCKQUOTE { | |
91 font-style:italic; | |
92 } | |
93 .slide BLOCKQUOTE:before { | |
94 position:absolute; | |
95 margin:-15px 0 0 -80px; | |
96 color:#CCC; | |
97 font:200px/1 'PT Sans', sans-serif; | |
98 content:'\201C'; /* ldquo */ | |
99 } | |
100 .slide BLOCKQUOTE:after { | |
101 margin:-45px 0 45px; | |
102 display:block; | |
103 color:#444; | |
104 font-weight:bold; | |
105 content:attr(cite); | |
106 } | |
107 | |
108 /* Lists */ | |
109 .slide OL, | |
110 .slide UL { | |
111 margin:0 0 45px; | |
112 counter-reset:list; | |
113 } | |
114 .slide UL UL, | |
115 .slide OL UL, | |
116 .slide OL OL, | |
117 .slide UL OL { | |
118 margin:0 0 0 38px; | |
119 } | |
120 .slide OL > LI:before, | |
121 .slide UL > LI:before { | |
122 position:absolute; | |
123 margin-left:-120px; | |
124 width:100px; | |
125 color:#BBB; | |
126 text-align:right; | |
127 } | |
128 .slide UL > LI:before { | |
129 content:'\2022'; /* bull */ | |
130 line-height:1.1; | |
131 font-size:40px; | |
132 } | |
133 .slide OL > LI:before { | |
134 counter-increment:list; | |
135 content:counter(list)'.'; | |
136 } | |
137 | |
138 /* Code */ | |
139 .slide PRE { | |
140 margin:0 0 45px; | |
141 counter-reset:code; | |
142 white-space:normal; | |
143 } | |
144 .slide PRE CODE { | |
145 display:block; | |
146 padding:0; | |
147 background:none; | |
148 white-space:pre; | |
149 } | |
150 .slide PRE CODE:before { | |
151 position:absolute; | |
152 margin:0 0 0 -120px; | |
153 width:110px; | |
154 color:#BBB; | |
155 text-align:right; | |
156 counter-increment:code; | |
157 content:counter(code, decimal-leading-zero)'.'; | |
158 } | |
159 .slide PRE MARK { | |
160 padding:3px 8px; | |
161 -webkit-border-radius:8px; | |
162 -moz-border-radius:8px; | |
163 border-radius:8px; | |
164 } | |
165 .slide PRE MARK { | |
166 background:#FAFAA2; | |
167 color:#000; | |
168 font-style:normal; | |
169 } | |
170 .slide PRE MARK.important { | |
171 background:#C00; | |
172 color:#FFF; | |
173 font-weight:normal; | |
174 } | |
175 | |
176 /* Cover */ | |
177 .slide.cover SECTION { | |
178 background:transparent; | |
179 background-color: white; | |
180 } | |
181 .slide.cover H2 { | |
182 color:#666; | |
183 text-align:center; | |
184 font-size:120%; | |
185 margin-top:20%; | |
186 } | |
187 .slide.cover H3#author { | |
188 color:#888; | |
189 text-align:right; | |
190 font-size:80%; | |
191 margin-top:10%; | |
192 margin-right:55px; | |
193 } | |
194 | |
195 .slide.cover H3#profile { | |
196 color:#888; | |
197 text-align:right; | |
198 font-size:24px; | |
199 margin-right:55px; | |
200 } | |
201 | |
202 /* Shout */ | |
203 .slide.shout SECTION:before { | |
204 display:none; | |
205 } | |
206 .slide.shout H2 { | |
207 position:absolute; | |
208 top:50%; | |
209 left:0; | |
210 width:100%; | |
211 text-align:center; | |
212 line-height:1; | |
213 font-size:150px; | |
214 -webkit-transform:translateY(-50%); | |
215 -moz-transform:translateY(-50%); | |
216 -ms-transform:translateY(-50%); | |
217 -o-transform:translateY(-50%); | |
218 transform:translateY(-50%); | |
219 } | |
220 .slide.shout H2 A[target=_blank] { | |
221 margin:0; | |
222 } | |
223 .slide.shout H2 A[target=_blank]:after { | |
224 content:''; | |
225 } | |
226 | |
227 /* Middle */ | |
228 .middle { | |
229 position:absolute; | |
230 top:50%; | |
231 left:50%; | |
232 -webkit-transform:translate(-50%, -50%); | |
233 -moz-transform:translate(-50%, -50%); | |
234 -ms-transform:translate(-50%, -50%); | |
235 -o-transform:translate(-50%, -50%); | |
236 transform:translate(-50%, -50%); | |
237 } | |
238 | |
239 /* List | |
240 ---------------------------------------- */ | |
241 .list { | |
242 float:left; | |
243 padding:80px 0 80px 100px; | |
244 background:#585A5E url(../images/linen.png); | |
245 } | |
246 | |
247 /* Caption */ | |
248 .list .caption { | |
249 color:#3C3D40; | |
250 text-shadow:0 1px 1px #8D8E90; | |
251 } | |
252 .list .caption H1 { | |
253 font:bold 50px/1 'PT Sans Narrow', sans-serif; | |
254 } | |
255 | |
256 /* Slide */ | |
257 .list .slide { | |
258 position:relative; | |
259 float:left; | |
260 margin:0 50px 0 0; | |
261 padding:80px 0 0; | |
262 } | |
263 .list .slide:after { | |
264 position:absolute; | |
265 bottom:-45px; | |
266 left:57px; | |
267 color:#3C3D40; | |
268 text-shadow:0 1px 1px #8D8E90; | |
269 line-height:1; | |
270 font-weight:bold; | |
271 font-size:25px; | |
272 } | |
273 .list .slide:target:after { | |
274 text-shadow:0 -1px 1px #1F3F60; | |
275 color:#4B86C2; | |
276 } | |
277 .list .slide > DIV { | |
278 position:relative; | |
279 overflow:hidden; | |
280 width:512px; | |
281 height:320px; | |
282 box-shadow:0 0 50px #3C3D40; | |
283 border-radius:1px; | |
284 background:rgba(0, 0, 0, 0.3); | |
285 } | |
286 .list .slide > DIV:hover { | |
287 box-shadow: | |
288 0 0 0 10px rgba(60, 61, 64, 0.6), | |
289 0 0 50px #3C3D40; | |
290 } | |
291 .list .slide:target > DIV { | |
292 box-shadow: | |
293 0 0 0 1px #305F8D, | |
294 0 0 0 10px #3C7CBD, | |
295 0 0 50px #3C3D40; | |
296 } | |
297 .list .slide SECTION { | |
298 -webkit-transform-origin:0 0; | |
299 -webkit-transform:scale(0.5); | |
300 -moz-transform-origin:0 0; | |
301 -moz-transform:scale(0.5); | |
302 -ms-transform-origin:0 0; | |
303 -ms-transform:scale(0.5); | |
304 -o-transform-origin:0 0; | |
305 -o-transform:scale(0.5); | |
306 transform-origin:0 0; | |
307 transform:scale(0.5); | |
308 } | |
309 .list .slide SECTION:after { | |
310 position:absolute; | |
311 top:0; | |
312 right:0; | |
313 bottom:0; | |
314 left:0; | |
315 content:''; | |
316 } | |
317 | |
318 /* Full | |
319 ---------------------------------------- */ | |
320 .full { | |
321 position:absolute; | |
322 top:50%; | |
323 left:50%; | |
324 overflow:hidden; | |
325 margin:-320px 0 0 -512px; | |
326 width:1024px; | |
327 height:640px; | |
328 background:#000; | |
329 } | |
330 .full .caption { | |
331 display:none; | |
332 } | |
333 .full .slide { | |
334 position:absolute; | |
335 visibility:hidden; | |
336 } | |
337 .full .slide:target { | |
338 visibility:visible; | |
339 } | |
340 .full .slide:after { | |
341 position:absolute; | |
342 bottom:85px; | |
343 left:120px; | |
344 color:#BBB; | |
345 line-height:1; | |
346 } | |
347 .full .slide SECTION { | |
348 -webkit-transform:scale(1); | |
349 -moz-transform:scale(1); | |
350 -ms-transform:scale(1); | |
351 -o-transform:scale(1); | |
352 transform:scale(1); | |
353 } | |
354 .full .slide.bg { | |
355 z-index:1; | |
356 } | |
357 .full .slide.bg:after, | |
358 .full .slide.shout:after { | |
359 content:''; | |
360 } | |
361 | |
362 /* Inner Navigation */ | |
363 .full .inner > * { | |
364 opacity:0; | |
365 -webkit-transition:opacity 0.5s linear; | |
366 -moz-transition:opacity 0.5s linear; | |
367 -ms-transition:opacity 0.5s linear; | |
368 -o-transition:opacity 0.5s linear; | |
369 transition:opacity 0.5s linear; | |
370 } | |
371 .full .inner > .active { | |
372 opacity:1; | |
373 } | |
374 | |
375 /* Progress */ | |
376 .full .progress { | |
377 position:absolute; | |
378 right:118px; | |
379 bottom:49px; | |
380 left:118px; | |
381 border-radius:7px; | |
382 border:2px solid rgba(255, 255, 255, 0.2); | |
383 } | |
384 .full .progress DIV { | |
385 width:0; | |
386 height:10px; | |
387 border-radius:5px; | |
388 background:rgba(177, 177, 177, 0.4); | |
389 -webkit-transition:width 0.2s linear; | |
390 -moz-transition:width 0.2s linear; | |
391 -ms-transition:width 0.2s linear; | |
392 -o-transition:width 0.2s linear; | |
393 transition:width 0.2s linear; | |
394 } | |
395 .full .progress-off { | |
396 z-index:1; | |
397 } |