Mercurial > hg > Members > atton > generated_seminar_slides

comparison slides/20140422/themes/ribbon/styles/style.css @ 16:c88759812d2b

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