Mercurial > hg > Papers > 2015 > kaito-lola

comparison presentation/themes/g5/projection.css.less @ 3:c50a033e6635

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
create presentation slide
author Kaito Tokumori <e105711@ie.u-ryukyu.ac.jp>
date Wed, 01 Jul 2015 19:06:07 +0900
parents
children
comparison
equal deleted inserted replaced
2:771136eae970 3:c50a033e6635
1 /*********************************
2 * CSS @media projection rules (not print or screen)
3 *
4 * 1) projection -> slideshow mode (display one slide at-a-time; hide all others)
5 * 2) screen -> outline mode (display all slides-at-once on screen)
6 * 3) print -> print (and print preview)
7 *
8 * toggle between projection/screen (that is, slideshow/outline) mode using t-key
9 */
10
11 //////////////////////////////////////
12 // note: this is a less extendend css script, to learn more about less; see lesscss.org)
13
14
15 html {
16 height: 100%;
17 }
18
19 body {
20 margin: 0;
21 padding: 0;
22
23 height: 100%;
24 min-height: 740px;
25
26 overflow-x: hidden;
27 overflow-y: auto;
28
29 background: rgb(215, 215, 215);
30 background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
31 background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
32 background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
33 }
34
35 .presentation {
36 width: 100%;
37 height: 100%;
38 left: 0;
39 top: 0;
40
41 position: absolute;
42 -webkit-transform: translate3d(0, 0, 0);
43 }
44
45 .slide {
46 display: block;
47
48 position: absolute;
49 overflow: hidden;
50
51 width: 900px;
52 height: 700px;
53
54 left: 50%;
55 top: 50%;
56
57 margin-left: -450px;
58 margin-top: -350px;
59
60 padding: 40px 60px;
61
62 box-sizing: border-box; /* css note: lets use border-box; no need to add padding+border to get to 100% */
63 -o-box-sizing: border-box;
64 -moz-box-sizing: border-box;
65 -webkit-box-sizing: border-box;
66
67 border-radius: 10px;
68 -o-border-radius: 10px;
69 -moz-border-radius: 10px;
70 -webkit-border-radius: 10px;
71
72 background-color: white;
73
74 box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
75 border: 1px solid rgba(0, 0, 0, .3);
76
77 transition: transform .3s ease-out;
78 -o-transition: -o-transform .3s ease-out;
79 -moz-transition: -moz-transform .3s ease-out;
80 -webkit-transition: -webkit-transform .3s ease-out;
81 }
82
83
84 .slide {
85 display: none;
86 }
87
88 .slide.far-past {
89 display: block;
90 transform: translate(-2040px);
91 -o-transform: translate(-2040px);
92 -moz-transform: translate(-2040px);
93 -webkit-transform: translate3d(-2040px, 0, 0);
94 }
95 .slide.past {
96 display: block;
97 transform: translate(-1020px);
98 -o-transform: translate(-1020px);
99 -moz-transform: translate(-1020px);
100 -webkit-transform: translate3d(-1020px, 0, 0);
101 }
102
103 .slide.current {
104 display: block;
105 transform: translate(0);
106 -o-transform: translate(0);
107 -moz-transform: translate(0);
108 -webkit-transform: translate3d(0, 0, 0);
109 }
110
111 .slide.next {
112 display: block;
113 transform: translate(1020px);
114 -o-transform: translate(1020px);
115 -moz-transform: translate(1020px);
116 -webkit-transform: translate3d(1020px, 0, 0);
117 }
118
119 .slide.far-next {
120 display: block;
121 transform: translate(2040px);
122 -o-transform: translate(2040px);
123 -moz-transform: translate(2040px);
124 -webkit-transform: translate3d(2040px, 0, 0);
125 }
126
127
128 /***********
129 * styles
130 */
131
132 .slide h1 { // use h1 for title
133 margin-top: 200px;
134 }
135
136
137 .slide h2 { // use h2 for section title/segue
138 position: absolute;
139 bottom: 150px;
140 }
141
142 .slide.fill h3 {
143 background: rgba(255, 255, 255, .75);
144 padding-top: .2em;
145 padding-bottom: .3em;
146 margin-top: -.2em;
147 margin-left: -60px;
148 padding-left: 60px;
149 margin-right: -60px;
150 padding-right: 60px;
151 }
152
153 .slide iframe {
154 width: 100%;
155
156 height: 620px;
157
158 background: white;
159 border: 1px solid rgb(192, 192, 192);
160 margin: -1px;
161 /*box-shadow: inset 0 2px 6px rgba(0, 0, 0, .1);*/
162
163 overflow: hidden;
164 }
165
166 .slide h3 + iframe {
167 margin-top: 40px;
168 height: 540px;
169 }
170
171 .slide.fill iframe {
172 position: absolute;
173 left: 0;
174 top: 0;
175 width: 100%;
176 height: 100%;
177
178 border: 0;
179 margin: 0;
180
181 border-radius: 10px;
182 -o-border-radius: 10px;
183 -moz-border-radius: 10px;
184 -webkit-border-radius: 10px;
185
186 z-index: -1;
187 }
188
189 .slide.fill img {
190 position: absolute;
191 left: 0;
192 top: 0;
193 min-width: 100%;
194 min-height: 100%;
195
196 border-radius: 10px;
197 -o-border-radius: 10px;
198 -moz-border-radius: 10px;
199 -webkit-border-radius: 10px;
200
201 z-index: -1;
202 }
203
204
205 .slide img.centered {
206 margin: 0 auto;
207 display: block;
208 }
209
210
211 table {
212 width: 100%;
213 border-collapse: collapse;
214 }
215
216 th {
217 text-align: left;
218 }
219
220 td,
221 th {
222 border: 1px solid rgb(224, 224, 224);
223 padding: 5px 10px;
224 vertical-align: top;
225 }
226
227 ul {
228 list-style-type: square;
229 }
230
231 .source {
232 position: absolute;
233 left: 60px;
234 top: 644px;
235 padding-right: 175px;
236
237 font-size: 15px;
238 letter-spacing: 0;
239 line-height: 18px;
240 }
241
242 q {
243 font-size: 300%; // 60px
244 display: block;
245 margin-left: 1em;
246 }
247
248 q::before {
249 content: '“';
250 color: rgb(192, 192, 192);
251 position: absolute;
252 display: inline-block;
253 margin-left: -1.1em;
254 width: 1em;
255 text-align: right;
256 }
257
258 q::after {
259 content: '”';
260 color: rgb(192, 192, 192);
261 }
262
263
264 div.author {
265 text-align: right;
266
267 margin-top: 20px;
268 margin-right: 150px;
269
270 font-size: 200%; // 40px;
271 }
272
273 div.author::before {
274 content: '—';
275 }
276
277
278 /***********
279 * smaller
280 */
281
282 .slide.smaller {
283
284 p, ul, table { font-size: 80%; } // 20px
285
286 pre { font-size: 60%; } // 15px
287
288 q { font-size: 200%; } // 40px
289 }
290
291
292
293
294 /*********************************
295 * general text-alignment classes
296 */
297
298 .left { text-align: left; }
299 .center { text-align: center; }
300 .right { text-align: right; }
301
302
303 /*********************************
304 * general color classes
305 */
306
307 .white { color: white; }