Mercurial > hg > Members > innparusu > slides

comparison 2015_03_17/themes/ribbon/styles/style.css @ 0:47676a16ed13

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Add Slides
author Tatsuki IHA <e125716@ie.u-ryukyu.ac.jp>
date Tue, 14 Jul 2015 17:23:04 +0900
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:47676a16ed13
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:25px/1.8 '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:80px 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 58px;
42 color:#666;
43 font:bold 40px/1.13 'PT Sans Narrow', sans-serif;
44 }
45
46 /* Elements */
47 .slide P {
48 margin:0 0 45px;
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:84px;
185 }
186 .slide.cover #author {
187 color:#888;
188 text-align:center;
189 margin-top: 200px;
190 }
191
192 .slide.cover H3#profile {
193 color:#888;
194 text-align:right;
195 font-size:24px;
196 margin-right:90px;
197 }
198
199 /* Shout */
200 .slide.shout SECTION:before {
201 display:none;
202 }
203 .slide.shout H2 {
204 position:absolute;
205 top:50%;
206 left:0;
207 width:100%;
208 text-align:center;
209 line-height:1;
210 font-size:150px;
211 -webkit-transform:translateY(-50%);
212 -moz-transform:translateY(-50%);
213 -ms-transform:translateY(-50%);
214 -o-transform:translateY(-50%);
215 transform:translateY(-50%);
216 }
217 .slide.shout H2 A[target=_blank] {
218 margin:0;
219 }
220 .slide.shout H2 A[target=_blank]:after {
221 content:'';
222 }
223
224 /* Middle */
225 .middle {
226 position:absolute;
227 top:50%;
228 left:50%;
229 -webkit-transform:translate(-50%, -50%);
230 -moz-transform:translate(-50%, -50%);
231 -ms-transform:translate(-50%, -50%);
232 -o-transform:translate(-50%, -50%);
233 transform:translate(-50%, -50%);
234 }
235
236 /* List
237 ---------------------------------------- */
238 .list {
239 float:left;
240 padding:80px 0 80px 100px;
241 background:#585A5E url(../images/linen.png);
242 }
243
244 /* Caption */
245 .list .caption {
246 color:#3C3D40;
247 text-shadow:0 1px 1px #8D8E90;
248 }
249 .list .caption H1 {
250 font:bold 50px/1 'PT Sans Narrow', sans-serif;
251 }
252
253 /* Slide */
254 .list .slide {
255 position:relative;
256 float:left;
257 margin:0 50px 0 0;
258 padding:80px 0 0;
259 }
260 .list .slide:after {
261 position:absolute;
262 bottom:-45px;
263 left:57px;
264 color:#3C3D40;
265 text-shadow:0 1px 1px #8D8E90;
266 line-height:1;
267 font-weight:bold;
268 font-size:25px;
269 }
270 .list .slide:target:after {
271 text-shadow:0 -1px 1px #1F3F60;
272 color:#4B86C2;
273 }
274 .list .slide > DIV {
275 position:relative;
276 overflow:hidden;
277 width:512px;
278 height:320px;
279 box-shadow:0 0 50px #3C3D40;
280 border-radius:1px;
281 background:rgba(0, 0, 0, 0.3);
282 }
283 .list .slide > DIV:hover {
284 box-shadow:
285 0 0 0 10px rgba(60, 61, 64, 0.6),
286 0 0 50px #3C3D40;
287 }
288 .list .slide:target > DIV {
289 box-shadow:
290 0 0 0 1px #305F8D,
291 0 0 0 10px #3C7CBD,
292 0 0 50px #3C3D40;
293 }
294 .list .slide SECTION {
295 -webkit-transform-origin:0 0;
296 -webkit-transform:scale(0.5);
297 -moz-transform-origin:0 0;
298 -moz-transform:scale(0.5);
299 -ms-transform-origin:0 0;
300 -ms-transform:scale(0.5);
301 -o-transform-origin:0 0;
302 -o-transform:scale(0.5);
303 transform-origin:0 0;
304 transform:scale(0.5);
305 }
306 .list .slide SECTION:after {
307 position:absolute;
308 top:0;
309 right:0;
310 bottom:0;
311 left:0;
312 content:'';
313 }
314
315 /* Full
316 ---------------------------------------- */
317 .full {
318 position:absolute;
319 top:50%;
320 left:50%;
321 overflow:hidden;
322 margin:-320px 0 0 -512px;
323 width:1024px;
324 height:640px;
325 background:#000;
326 }
327 .full .caption {
328 display:none;
329 }
330 .full .slide {
331 position:absolute;
332 visibility:hidden;
333 }
334 .full .slide:target {
335 visibility:visible;
336 }
337 .full .slide:after {
338 position:absolute;
339 bottom:85px;
340 left:120px;
341 color:#BBB;
342 line-height:1;
343 }
344 .full .slide SECTION {
345 -webkit-transform:scale(1);
346 -moz-transform:scale(1);
347 -ms-transform:scale(1);
348 -o-transform:scale(1);
349 transform:scale(1);
350 }
351 .full .slide.bg {
352 z-index:1;
353 }
354 .full .slide.bg:after,
355 .full .slide.shout:after {
356 content:'';
357 }
358
359 /* Inner Navigation */
360 .full .inner > * {
361 opacity:0;
362 -webkit-transition:opacity 0.5s linear;
363 -moz-transition:opacity 0.5s linear;
364 -ms-transition:opacity 0.5s linear;
365 -o-transition:opacity 0.5s linear;
366 transition:opacity 0.5s linear;
367 }
368 .full .inner > .active {
369 opacity:1;
370 }
371
372 /* Progress */
373 .full .progress {
374 position:absolute;
375 right:118px;
376 bottom:49px;
377 left:118px;
378 border-radius:7px;
379 border:2px solid rgba(255, 255, 255, 0.2);
380 }
381 .full .progress DIV {
382 width:0;
383 height:10px;
384 border-radius:5px;
385 background:rgba(177, 177, 177, 0.4);
386 -webkit-transition:width 0.2s linear;
387 -moz-transition:width 0.2s linear;
388 -ms-transition:width 0.2s linear;
389 -o-transition:width 0.2s linear;
390 transition:width 0.2s linear;
391 }
392 .full .progress-off {
393 z-index:1;
394 }
395
396 img {
397 width: 100%;
398 }
399
400 td {
401 border: solid 1px;
402 text-align: center;
403 width: 150px;
404 }