Skip to content
Newer
Older
100644 594 lines (545 sloc) 14.9 KB
98e1944 @hdragomir I'm free. Here be dragons!
hdragomir authored Apr 25, 2012
1 .popup {
2 position: absolute;
3 top: 50%;
4 left: 50%;
5 margin: -180px 0 0 -180px;
6 width: 360px;
7 height: 360px;
8 z-index: 8001;
9 font-family: 'Bubblegum Sans', sans-serif;
10 }
11 .popup h1 {
12 margin: 0; padding: 0;
13 color: #fff;
14 font-size: 25px;
15 font-family: 'Bubblegum Sans', sans-serif;
16 }
17 .popup h2 {
18 margin: 0; padding: 0;
19 color: #fff;
20 font-size: 13px;
21 font-family: 'Bubblegum Sans', sans-serif;
22 }
23 .xgoals button.cancel,
24 .popup button.cancel {
25 position: absolute;
26 right: 37px; top: 36px;
27 width: 46px; height: 46px;
28 border: none;
29 background: url("../images/popup/close_button.png") no-repeat 0 0;
30 background-size: auto 100%;
31 }
32 .xgoals button.cancel:active,
33 .popup button.cancel:active {
34 background-position: -46px 0;
35 }
36
37
38
39 #level-up {
40 background: url(../images/popup/levelup.png) no-repeat center;
41 border: none;
42 -webkit-border-image: none;
d76a741 @hdragomir added correct prefixes and made visual adjustments for FF
hdragomir authored Jun 24, 2012
43 -moz-border-image: none;
98e1944 @hdragomir I'm free. Here be dragons!
hdragomir authored Apr 25, 2012
44 }
45
46
47 #level-up .header {
48 background: none;
49 }
50 #level-up .header h1 {
51 background: none;
52 color: red;
53 width: 100%;
54 margin-top: 28px;
55 text-align: center;
56 font: 48px/108px 'Luckiest Guy', sans-serif;
57 font-weight: normal;
58 text-shadow: 0 2px 1px rgba(0, 0, 0, .5), 0 -2px 0 rgba(255, 255, 255, .3);
59 }
60 #level-up h2 {
61 background: none;
62 }
63 #level-up .unlocked {
64 position: absolute;
65 background: none;
66 color: #6e1700;
67 top: 373px;
68 margin-left: 267px;
69 height: 50px;
70 text-shadow: 0 2px 1px rgba(0, 0, 0, .5), 0 -2px 0 rgba(255, 255, 255, .3);
71 }
72 #level-up .unlocked figure{
73 height: 120px;
74 width: 120px;
75 margin-top: 0px;
76 display: inline-block;
77 background-size: 120px;
78 background-repeat: no-repeat;
79 }
80 #level-up .rewards {
81 position: absolute;
82 color: red;
83 margin-left: 0px;
84 width: 100%;
85 bottom: 115px;
86 font: 42px/90px 'Bubblegum Sans', sans-serif;
87 text-shadow: 0 2px 1px rgba(0, 0, 0, .5), 0 -2px 0 rgba(255, 255, 255, .3);
88 }
89 #level-up .rewards figure{
90 height: 100px;
91 width: 64px;
92 background-size: 150px;
93 background-repeat: no-repeat;
94 background-position: 50%;
95
96 }
97
98 #level-up .checkout {
99 bottom: 20px;
100 }
101
102 #level-up .rewards .gold{
103 background-image: url(../images/status/coins.png);
104 padding-bottom: 50px;
105 height: 70px;
106 width: 65px;
107 display: inline-block;
108 }
109
110 #level-up .rewards .food{
111 background-image: url(../images/popup/food.png);
112 height:43px;
113 width: 60px;
114 display: inline-block;
115 }
116
117 @media all and (-webkit-min-device-pixel-ratio: 2) {
118
119 #level-up figure.gold{
120 background: url(../images/status/coins-small.png) no-repeat center;
121 }
122 #level-up .unlocked figure {
123 margin-top: 60px;
124 }
125 .popup {
126 margin: -420px 0 0 -360px;
127 width: 720px;
128 height: 720px;
129 }
130 .popup h1 {
131 font-size: 50px;
132 }
133 .popup h2 {
134 font-size: 26px;
135 }
136 .xgoals button.cancel,
137 .popup button.cancel {
138 right: 27px; top: 72px;
139 width: 92px; height: 92px;
140 }
141 .xgoals button.cancel:active,
142 .popup button.cancel:active {
143 background-position: 100% 0;
144 }
145 .popup button.share {
146 left: 186px; top: 624px;
147 width: 124px!important; height: 90px!important;
148 font-size: 46px;
149 }
150 .popup button.share:active {
151 text-shadow: 0 0 20px yellow, 0 0 20px yellow;
152 }
153
154
155 /* Level Up */
156
157 #level-up {
158 figure{
159 height: 24px; padding-top: 90px; width: 128px;
160 font-size: 22px;
161 line-height: 40px;
162 margin-top: -20px;
163 }
164
165 }
166 }
167
168 .ipad {
169 #level-up{
170 .wrap{
171 width: 500px;
172 left: 50%; top: 50%;
173 position: absolute;
174 margin: -460px 0 0 -250px;
175 height: 920px;
176
177 }
178 .header h1 {
179 margin-top: 5px;
180 }
181 .unlocked {
182 top: 371px;
183 margin-left: 255px;
184 height: 60px;
185 font: 30px/70px 'Bubblegum Sans', sans-serif;
186 }
187 .unlocked figure{
188 margin-top: 50px;
189 }
190 .rewards {
191 bottom: 105px;
192 }
193 }
194 }
195
196 #level-up-wrapper{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
197
198 /* Welcome Comic */
199
200 .comic {
201 display: none;
202 padding-top: 25px;
203 border-width: none;
204 -webkit-border-image: none;
d76a741 @hdragomir added correct prefixes and made visual adjustments for FF
hdragomir authored Jun 24, 2012
205 -moz-border-image: none;
98e1944 @hdragomir I'm free. Here be dragons!
hdragomir authored Apr 25, 2012
206 z-index: 100000;
207 text-align: center;
208 .wrap{
209 display: inline-block;
210 position: relative;
211 min-width: 309px;
212 }
213 .frame {
214 height: 98px;
215 width: 144px;
216 position: absolute;
217 border: 2px solid rgb(248,187,85);
218 -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.8);
d76a741 @hdragomir added correct prefixes and made visual adjustments for FF
hdragomir authored Jun 24, 2012
219 -moz-box-shadow: 0 1px 4px rgba(0,0,0,.8);
98e1944 @hdragomir I'm free. Here be dragons!
hdragomir authored Apr 25, 2012
220 background-image: url(../images/comic/blue-panels.jpg);
221 p {
222 margin: 4px 7px;
223 font: normal 16px/16px 'Bubblegum Sans', sans-serif;
224 text-shadow: 0 0 2px #1166a7, 0 0 2px #1166a7, 0 0 2px #1166a7, 0 0 2px #1166a7, 0 0 2px #1166a7;
225 }
226 }
227 .no1, .no4 {
228 width: 305px;
229 height: 93px;
230 }
231 .no1 { background-position: 0 0; margin: 5px 0 0 5px;}
232 .no2 { background-position: 0 -285px; margin: 95px 0 0 5px; z-index: 3;
233 p {
234 margin-top: 60px;
235 text-shadow: 0 0 2px #a84b00, 0 0 2px #a84b00, 0 0 2px #a84b00, 0 0 2px #a84b00, 0 0 2px #a84b00;
236 }
237 }
238 .no3 { background-position: 0 -187px; margin: 103px 0 0 166px; z-index: 3; }
239 .no4 { background-position: 0 -93px; margin: 198px 0 0 5px; }
240 .no5 { background-position: -144px -187px; margin: 285px 0 0 5px; }
241 .no6 { background-position: -144px -285px; margin: 285px 0 0 166px;
242 .logo {
243 margin-top: 4px;
244 background: url(../images/logo.png) no-repeat center;
245 height: 78px;
246 position: absolute;
247 width: 100%;
248 background-size: contain;
249 }
250 button {
251 margin: 80px 0 0 30px;
252 position: absolute;
253 }
254 }
255 }
256 .landscape {
257 .comic {
258 padding-top: 75px;
259 .no1 { margin: 5px 0 0 5px;}
260 .no2 { margin: 5px 0 0 320px; }
261 .no3 { margin: 110px 0 0 10px; z-index: 3; }
262 .no4 { margin: 97px 0 0 164px; width: 151px; background-position: -115px -93px; }
263 .no5 { margin: 112px 0 0 325px; z-index: 3; height: 83px; }
264 .no6 {
265 margin: 204px 0 0 5px;
266 width: 462px; height: 50px;
267 z-index: 0;
268 background-size: 200% 400px;
269 background-position: bottom right;
270 .logo {
271 margin-top: -20px;
272 height: 80px;
273 }
274 button {
275 margin: 5px 0 0 360px;
276 position: absolute;
277 }
278 }
279 }
280 }
281
282 @media all and (-webkit-min-device-pixel-ratio: 2) {
283 .comic {
284 .wrap{
285
286 min-width: 640px;
287 }
288 .frame {
289 height: 196px;
290 width: 288px;
291 border: 4px solid rgb(248,187,85);
292 -webkit-box-shadow: 0 2px 8px rgba(0,0,0,.8);
293 background-image: url(../images/comic/blue-panels.jpg);
294 p {
295 margin: 8px 14px;
296 font: normal 30px/32px 'Bubblegum Sans', sans-serif;
297 text-shadow: 0 0 4px #1166a7, 0 0 4px #1166a7, 0 0 4px #1166a7, 0 0 4px #1166a7, 0 0 4px #1166a7;
298 }
299 }
300 .no1, .no4 {
301 width: 610px;
302 height: 187px;
303 }
304 .no1 { margin: -15px 0 0 10px;}
305 .no2 { background-position: 0 -570px; margin: 175px 0 0 25px; z-index: 3;
306 p {
307 margin-top: 120px;
308 text-shadow: 0 0 4px #a84b00, 0 0 4px #a84b00, 0 0 4px #a84b00, 0 0 4px #a84b00, 0 0 4px #a84b00;
309 }
310 }
311 .no3 { background-position: 0 -374px; margin: 205px 0 0 317px;}
312 .no4 { background-position: -300px -187px; margin: 400px 0 0 25px; width: 290px; z-index: 3;}
313 .no5 { background-position: -288px -374px; margin: 430px 0 0 317px; height: 187px; z-index: 3;}
314 .no6 { background-position: bottom; margin: 620px 0 0 10px; width: 610px; height: 187px; z-index: 3;
315 .logo {
316 margin-top: 13px;
317 height: 165px;
318 }
319 button {
320 margin: 205px 0 0 215px;
321 }
322 }
323 }
324 .browser {
325
326 /* horrible mobile browser adjustment */
327 .comic {
328 .frame {
329 top: -20px;
330 }
331 .no6 {
332 top: -80px;
333 button{
334 top: -50px;
335 right: 20px;
336
337 margin-left: 0;
338 }
339 }
340
341 }
342 }
343 .landscape {
344 .comic {
345 .no1 { margin: 10px 0 0 10px;}
346 .no2 { margin: 10px 0 0 640px; }
347 .no3 { margin: 219px 0 0 20px; }
348 .no4 { margin: 195px 0 0 328px; width: 302px; background-position: -230px -187px; }
349 .no5 { margin: 225px 0 0 650px; height: 166px; }
350 .no6 {
351 margin: 408px 0 0 10px;
352 width: 925px; height: 100px;
353 box-shadow: 0 2px 8px rgba(0,0,0,.6);
354 background-size: 200% 400px;
355 .logo {
356 margin-top: -40px;
357 height: 160px;
358 }
359 button {
360 margin: 10px 0 0 740px;
361 }
362 }
363 }
364 }
365 }
366 .ipad {
367 .comic {
368 .wrap{
369
370 min-width: 681px;
371 }
372 padding: 50px 0 0 64px;
373 .frame {
374 height: 196px;
375 width: 288px;
376 border: 4px solid rgb(248,187,85);
377 -webkit-box-shadow: 0 2px 8px rgba(0,0,0,.8);
d76a741 @hdragomir added correct prefixes and made visual adjustments for FF
hdragomir authored Jun 24, 2012
378 -moz-box-shadow: 0 2px 8px rgba(0,0,0,.8);
98e1944 @hdragomir I'm free. Here be dragons!
hdragomir authored Apr 25, 2012
379 background-image: url(../images/comic/blue-panels.jpg);
380 p {
381 margin: 8px 14px;
382 font: normal 30px/32px 'Bubblegum Sans', sans-serif;
383 text-shadow: 0 0 4px #1166a7, 0 0 4px #1166a7, 0 0 4px #1166a7, 0 0 4px #1166a7, 0 0 4px #1166a7;
384 }
385 }
386 .no1, .no4 {
387 width: 610px;
388 height: 187px;
389 }
390 .no1 { margin: -15px 0 0 10px; }
391 .no2 { background-position: 0 -570px; margin: 190px 0 0 25px; z-index: 3;
392 p {
393 margin-top: 120px;
394 text-shadow: 0 0 4px #a84b00, 0 0 4px #a84b00, 0 0 4px #a84b00, 0 0 4px #a84b00, 0 0 4px #a84b00;
395 }
396 }
397 .no3 { background-position: 0 -374px; margin: 220px 0 0 317px;}
398 .no4 { background-position: -300px -187px; margin: 415px 0 0 25px; width: 288px; z-index: 3;}
399 .no5 { background-position: -288px -374px; margin: 445px 0 0 317px; height: 187px; z-index: 3;}
400 .no6 { background-position: bottom; margin: 650px 0 0 10px; width: 610px; height: 187px; z-index: 3;
401 .logo {
402 margin-top: 13px;
403 height: 165px;
404 }
405 button {
406 margin: 210px 0 0 230px;
407 font-size: 36px;
408 line-height: 32px;
409 padding: 9px 30px 9px 30px;
410 }
411 }
412 }
413 &.landscape {
414 .comic {
415 padding: 70px 0 0 32px;
416 .no1 { margin: 10px 0 0 10px;}
417 .no2 { margin: 10px 0 0 640px; }
418 .no3 { margin: 219px 0 0 20px; }
419 .no4 { margin: 195px 0 0 328px; width: 302px; background-position: -230px -187px; }
420 .no5 { margin: 225px 0 0 650px; height: 166px; }
421 .no6 {
422 margin: 408px 0 0 10px;
423 width: 925px; height: 100px;
424 box-shadow: 0 2px 8px rgba(0,0,0,.6);
425 background-size: 200% 400px;
426 background-position: bottom right;
427 .logo {
428 margin-top: -40px;
429 height: 160px;
430 }
431 button {
432 margin: 25px 0 0 760px;
433 }
434 }
435 }
436 }
437
438 /* fixes for tutorial screen on ipad */
439 .step_7 .tutarrow .arrow {
440 background: url(../images/hud/hand-right.png) top left no-repeat;
441 }
442 }
443
444 .intro {
445 display: none;
446 overflow: hidden;
447 z-index: 200000;
448 position :relative;
449 height: 100%;
450 width: 100%;
451 color: #543001;
452 background: rgba(0,0,0, 0.85);
453 /* starting game already. intro should still be ontop of everything */
454
455 .parrot {
456 background: url('../images/hud/parrot.png') center top no-repeat;
457 /*width: 424px;*/
458 width: 100%;
459 height: 538px;
460 margin-top: 75px;
461 &:before {
462 position: absolute;
463 top: 180px; left: 50%;
464 margin-left: -200px;
465 display: block;
466 content: "Squaak!";
467 font: normal 52px/32px 'Bubblegum Sans', sans-serif;
468 color: #fff;
469 text-shadow: 0 0 5px #000, 2px 2px 4px #000;
470 }
471 }
472
473 .intro-text {
474 position: relative;
475 margin: -190px auto 0;
476 font: normal 30px/32px 'Bubblegum Sans', sans-serif;
477 width: 401px;
478
479
480 padding: 10px 30px;
481 border: 4px solid #fff;
482 border-radius: 12px;
483 -webkit-box-shadow: 0 2px 8px rgba(0,0,0,.8), 0 1px 2px #d59d26 inset;
d76a741 @hdragomir added correct prefixes and made visual adjustments for FF
hdragomir authored Jun 24, 2012
484 -moz-box-shadow: 0 2px 8px rgba(0,0,0,.8), 0 1px 2px #d59d26 inset;
98e1944 @hdragomir I'm free. Here be dragons!
hdragomir authored Apr 25, 2012
485 background: url('../images/popup/pergament.png') center;
486 background-size: cover;
487
488 p {
489 padding: .5em 0 .5em 0;
490 }
491
492
493 }
494 .button {
495 position: absolute;
496 left: 50%;
497 margin-top: 30px;
498 margin-left: -3em;
499 }
500 }
501
502
503 .connect {
504 padding: 20px;
505 text-align: center;
506 }
507 .connect img {
508 max-width: 90%;
509 }
510 .connect .embossed {
511 margin-top: 10px;
512 }
513 .connect .button {
514 margin-top: -8px;
515 }
516 .connect .button.play {
517 width: 200px;
518 font-size: 18px;
519 line-height: 25px;
520 }
521 .connect .button.facebook {
522 font-family: 'Bubblegum Sans';
523 border-color: #2a447e!important;
524 background-color: #617aac!important;
525 }
526 .ipad .connect {
527 width: 400px;
528 margin: 0 auto;
529 padding-top: 100px;
530 }
531 @media all and (-webkit-min-device-pixel-ratio: 2) {
532 .connect {
533 padding: 40px;
534 }
535 .connect .embossed {
536 margin-top: 20px;
537 }
538 .connect .button {
539 margin-top: -15px;
540 }
541 .connect .button.play {
542 width: 400px;
543 font-size: 36px;
544 line-height: 50px;
545 }
546
547 .ipad{
548 .comic{
549 .wrap{
550 margin-top: 100px;
551 }
552 }
553 .intro {
554 .parrot{
555 margin-top: 175px;
556 }
557 }
558
559 #level-up{
560
561 .unlocked{
562 margin-left: 195px!important;
563 margin-top: -20px;
564 }
565
566 }
567 }
568 }
569
570 #castle-complete {
571 z-index: 5001;
572 }
573
574 .browser {
575
576 &.ipad{
577 .comic {
578 .frame {
579 top: -20px;
580 }
581 .no6 {
582 top: -40px;
583 button{
584 top: -40px;
585 }
586 }
587
588 }
589 }
590
591 }
592
593
Something went wrong with that request. Please try again.