Mercurial > hg > Members > innparusu > slides

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