Mercurial > hg > Events > JavaKuche2014

comparison oc/themes/blank5/projection.css.less @ 0:4c04d9c9b71d

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
update
author oc
date Sat, 29 Nov 2014 14:15:55 +0900
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:4c04d9c9b71d
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 background: rgba(128, 141, 181, .75);
139 position: absolute;
140 bottom: 150px;
141 }
142
143 .slide h3 { // use h3 for section title/segue. original
144 background: rgba(128, 141, 181, .75);
145 padding-top: .2em;
146 padding-bottom: .3em;
147 margin-top: -.2em;
148 margin-left: -60px;
149 padding-left: 60px;
150 margin-right: -60px;
151 padding-right: 60px;
152 }
153
154 .slide h3-yellow { // use h3 for section title/segue. original
155 background: rgba(255, 204, 0, .75);
156 padding-top: .2em;
157 padding-bottom: .3em;
158 margin-top: -.2em;
159 margin-left: -60px;
160 padding-left: 60px;
161 margin-right: -60px;
162 padding-right: 60px;
163 }
164
165 .slide.fill h3 {
166 background: rgba(128, 141, 181, .75);
167 padding-top: .2em;
168 padding-bottom: .3em;
169 margin-top: -.2em;
170 margin-left: -60px;
171 padding-left: 60px;
172 margin-right: -60px;
173 padding-right: 60px;
174 }
175
176 .slide iframe {
177 width: 100%;
178
179 height: 620px;
180
181 background: white;
182 border: 1px solid rgb(192, 192, 192);
183 margin: -1px;
184 /*box-shadow: inset 0 2px 6px rgba(0, 0, 0, .1);*/
185
186 overflow: hidden;
187 }
188
189 .slide h3 + iframe {
190 background: rgba(128, 141, 181, .75);
191 margin-top: 40px;
192 height: 540px;
193 }
194
195 .slide.fill iframe {
196 position: absolute;
197 left: 0;
198 top: 0;
199 width: 100%;
200 height: 100%;
201
202 border: 0;
203 margin: 0;
204
205 border-radius: 10px;
206 -o-border-radius: 10px;
207 -moz-border-radius: 10px;
208 -webkit-border-radius: 10px;
209
210 z-index: -1;
211 }
212
213 .slide.fill img {
214 position: absolute;
215 left: 0;
216 top: 0;
217 min-width: 100%;
218 min-height: 100%;
219
220 border-radius: 10px;
221 -o-border-radius: 10px;
222 -moz-border-radius: 10px;
223 -webkit-border-radius: 10px;
224
225 z-index: -1;
226 }
227
228
229 .slide img.centered {
230 margin: 0 auto;
231 display: block;
232 }
233
234
235 table {
236 width: 100%;
237 border-collapse: collapse;
238 }
239
240 th {
241 text-align: left;
242 }
243
244 td,
245 th {
246 border: 1px solid rgb(224, 224, 224);
247 padding: 5px 10px;
248 vertical-align: top;
249 }
250
251 ul {
252 list-style-type: square;
253 }
254
255 .source {
256 position: absolute;
257 left: 60px;
258 top: 644px;
259 padding-right: 175px;
260
261 font-size: 15px;
262 letter-spacing: 0;
263 line-height: 18px;
264 }
265
266 q {
267 font-size: 300%; // 60px
268 display: block;
269 margin-left: 1em;
270 }
271
272 q::before {
273 content: '“';
274 color: rgb(192, 192, 192);
275 position: absolute;
276 display: inline-block;
277 margin-left: -1.1em;
278 width: 1em;
279 text-align: right;
280 }
281
282 q::after {
283 content: '”';
284 color: rgb(192, 192, 192);
285 }
286
287
288 div.author {
289 text-align: right;
290
291 margin-top: 20px;
292 margin-right: 150px;
293
294 font-size: 200%; // 40px;
295 }
296
297 div.author::before {
298 content: '—';
299 }
300
301
302 /***********
303 * smaller
304 */
305
306 .slide.smaller {
307
308 p, ul, table { font-size: 80%; } // 20px
309
310 pre {font-size: 60%;} // 15px
311
312 q { font-size: 200%; } // 40px
313 }
314
315
316
317
318 /*********************************
319 * general text-alignment classes
320 */
321
322 .left { text-align: left; }
323 .center { text-align: center; }
324 .right { text-align: right; }
325
326
327 /*********************************
328 * general color classes
329 */
330
331 .white { color: white; }