Mercurial > hg > Members > innparusu > slides

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