diff options
Diffstat (limited to 'app/assets/stylesheets/pokemon.css.scss')
-rw-r--r-- | app/assets/stylesheets/pokemon.css.scss | 674 |
1 files changed, 674 insertions, 0 deletions
diff --git a/app/assets/stylesheets/pokemon.css.scss b/app/assets/stylesheets/pokemon.css.scss new file mode 100644 index 0000000..df2a184 --- /dev/null +++ b/app/assets/stylesheets/pokemon.css.scss | |||
@@ -0,0 +1,674 @@ | |||
1 | /* | ||
2 | Place all the styles related to the matching controller here. | ||
3 | They will automatically be included in application.css. | ||
4 | */ | ||
5 | |||
6 | #banner { | ||
7 | box-sizing: border-box; | ||
8 | height: 2em; | ||
9 | margin: 0 auto; | ||
10 | width: 60%; | ||
11 | } | ||
12 | |||
13 | #content { | ||
14 | margin: 2em; | ||
15 | } | ||
16 | |||
17 | .trainer { | ||
18 | margin: 1em auto; | ||
19 | width: 48em; | ||
20 | font-family: 'Power Green'; | ||
21 | box-sizing: border-box; | ||
22 | background-color: #f7f7f7; | ||
23 | border: 1px solid #999; | ||
24 | -webkit-border-top-left-radius: 6px; | ||
25 | -webkit-border-top-right-radius: 6px; | ||
26 | -moz-border-radius-topleft: 6px; | ||
27 | -moz-border-radius-topright: 6px; | ||
28 | border-top-left-radius: 6px; | ||
29 | border-top-right-radius: 6px; | ||
30 | |||
31 | .trainer-info { | ||
32 | padding: .5em .75em .25em .75em; | ||
33 | -webkit-border-top-left-radius: 6px; | ||
34 | -webkit-border-top-right-radius: 6px; | ||
35 | -moz-border-radius-topleft: 6px; | ||
36 | -moz-border-radius-topright: 6px; | ||
37 | border-top-left-radius: 6px; | ||
38 | border-top-right-radius: 6px; | ||
39 | border-bottom: 1px solid #888; | ||
40 | |||
41 | &.ruby { | ||
42 | background-color: #D67873; | ||
43 | } | ||
44 | |||
45 | &.sapphire { | ||
46 | background-color: #445E9C; | ||
47 | } | ||
48 | |||
49 | &.firered { | ||
50 | background-color: #F5AC78; | ||
51 | } | ||
52 | |||
53 | &.leafgreen { | ||
54 | background-color: #A7DB8D; | ||
55 | } | ||
56 | |||
57 | &.emerald { | ||
58 | background-color: #4E8234; | ||
59 | } | ||
60 | |||
61 | &.unaccounted { | ||
62 | background-color: black; | ||
63 | |||
64 | h2 { | ||
65 | color: white; | ||
66 | } | ||
67 | } | ||
68 | |||
69 | h2 { | ||
70 | margin: 0; | ||
71 | display: inline-block; | ||
72 | font-size: 24px; | ||
73 | } | ||
74 | |||
75 | .tid { | ||
76 | display: inline-block; | ||
77 | font-size: 13px; | ||
78 | } | ||
79 | } | ||
80 | |||
81 | .pc-boxes { | ||
82 | display: flex; | ||
83 | flex-wrap: wrap; | ||
84 | justify-content: space-between; | ||
85 | |||
86 | .party { | ||
87 | margin: 0; | ||
88 | |||
89 | li { | ||
90 | display: block; | ||
91 | margin: -5px 0; | ||
92 | |||
93 | .party-icon { | ||
94 | display: inline-block; | ||
95 | vertical-align: middle; | ||
96 | |||
97 | img { | ||
98 | image-rendering: pixelated; | ||
99 | } | ||
100 | } | ||
101 | |||
102 | .party-name { | ||
103 | vertical-align: sub; | ||
104 | display: inline-block; | ||
105 | margin-left: .25em; | ||
106 | white-space: pre; | ||
107 | } | ||
108 | |||
109 | a { | ||
110 | color: black; | ||
111 | text-decoration: none; | ||
112 | |||
113 | &:hover { | ||
114 | text-decoration: underline; | ||
115 | } | ||
116 | } | ||
117 | } | ||
118 | } | ||
119 | |||
120 | .pc-box { | ||
121 | margin: .5em; | ||
122 | padding: .5em; | ||
123 | border: 1px solid #ccc; | ||
124 | border-radius: 4px; | ||
125 | width: 236px; | ||
126 | box-sizing: border-box; | ||
127 | |||
128 | h3 { | ||
129 | margin: 0; | ||
130 | text-align: center; | ||
131 | } | ||
132 | |||
133 | .pc-contents { | ||
134 | margin: 0; | ||
135 | |||
136 | .spacer { | ||
137 | display: block; | ||
138 | width: 32px; | ||
139 | height: 32px; | ||
140 | } | ||
141 | |||
142 | img { | ||
143 | image-rendering: pixelated; | ||
144 | } | ||
145 | } | ||
146 | } | ||
147 | } | ||
148 | } | ||
149 | |||
150 | .pkv-hover { | ||
151 | display: none; | ||
152 | background-color: #111; | ||
153 | color: #fff; | ||
154 | z-index: 1; | ||
155 | padding: .5em; | ||
156 | box-shadow: 0px 0px 2px 1px #B3B3B3; | ||
157 | border-radius: 4px; | ||
158 | position: absolute; | ||
159 | max-width: 45ch; | ||
160 | text-align: left; | ||
161 | |||
162 | .pc-data-name { | ||
163 | font-weight: bold; | ||
164 | white-space: pre; | ||
165 | } | ||
166 | } | ||
167 | |||
168 | .pokemon-list { | ||
169 | display: flex; | ||
170 | flex-wrap: wrap; | ||
171 | padding: 0 1em; | ||
172 | |||
173 | li { | ||
174 | display: block; | ||
175 | |||
176 | img { | ||
177 | image-rendering: pixelated; | ||
178 | } | ||
179 | } | ||
180 | } | ||
181 | |||
182 | .pokemon { | ||
183 | font-family: 'Power Green'; | ||
184 | display: flex; | ||
185 | margin: 1em 0; | ||
186 | background-color: #c0c8c4; | ||
187 | border: 1px solid #888; | ||
188 | overflow: hidden; | ||
189 | |||
190 | .ot-gender { | ||
191 | &.male { | ||
192 | color: blue; | ||
193 | } | ||
194 | |||
195 | &.female { | ||
196 | color: red; | ||
197 | } | ||
198 | } | ||
199 | |||
200 | .pokemon-name { | ||
201 | font-weight: bold; | ||
202 | white-space: pre; | ||
203 | |||
204 | a { | ||
205 | color: blue; | ||
206 | text-decoration: none; | ||
207 | |||
208 | &:hover { | ||
209 | text-decoration: underline; | ||
210 | } | ||
211 | } | ||
212 | } | ||
213 | |||
214 | &.in-emerald { | ||
215 | .pokemon-image { | ||
216 | .pokemon-sprite { | ||
217 | margin: -14px; | ||
218 | } | ||
219 | } | ||
220 | } | ||
221 | |||
222 | .pokemon-basics { | ||
223 | width: 8.5em; | ||
224 | |||
225 | .pokemon-nameline { | ||
226 | background-color: #dcb880; | ||
227 | padding: 6px 6px 0 6px; | ||
228 | border-top: 1px solid #d8a878; | ||
229 | border-left: 1px solid #d8a878; | ||
230 | border-right: 1px solid #d8a878; | ||
231 | border-top-left-radius: 6px; | ||
232 | border-top-right-radius: 6px; | ||
233 | margin: .25em .25em 0; | ||
234 | } | ||
235 | |||
236 | .pokemon-ball { | ||
237 | margin: -8px; | ||
238 | image-rendering: pixelated; | ||
239 | } | ||
240 | |||
241 | .pokemon-name { | ||
242 | margin-left: 3px; | ||
243 | } | ||
244 | |||
245 | .pokemon-gender { | ||
246 | float: right; | ||
247 | |||
248 | &.female { | ||
249 | color: #ff6363; | ||
250 | } | ||
251 | |||
252 | &.male { | ||
253 | color: #00a2ff; | ||
254 | } | ||
255 | } | ||
256 | |||
257 | .pokemon-level { | ||
258 | padding: 4px 8px 0px; | ||
259 | border-bottom-left-radius: 6px; | ||
260 | border-bottom-right-radius: 6px; | ||
261 | background-color: white; | ||
262 | margin: 0 .25em; | ||
263 | } | ||
264 | |||
265 | .pokemon-image { | ||
266 | text-align: center; | ||
267 | |||
268 | .pokemon-image-wrap { | ||
269 | margin: 1em auto; | ||
270 | border: 10px solid #e0e0c8; | ||
271 | background-color: white; | ||
272 | border-radius: 10px; | ||
273 | display: inline-block; | ||
274 | padding: 4px; | ||
275 | position: relative; | ||
276 | |||
277 | img { | ||
278 | image-rendering: pixelated; | ||
279 | } | ||
280 | |||
281 | .pkv-shiny-star { | ||
282 | position: absolute; | ||
283 | top: 0; | ||
284 | right: -1.5em; | ||
285 | image-rendering: pixelated; | ||
286 | } | ||
287 | } | ||
288 | } | ||
289 | |||
290 | .pokemon-item-label { | ||
291 | background-color: #dcb880; | ||
292 | color: white; | ||
293 | border-top: 1px solid #d8a878; | ||
294 | padding: .25em .25em 0 0.5em; | ||
295 | |||
296 | &.with-item { | ||
297 | padding-left: 30px; | ||
298 | } | ||
299 | |||
300 | &:not(.with-item) { | ||
301 | margin-top: .25em; | ||
302 | } | ||
303 | } | ||
304 | |||
305 | .pokemon-item { | ||
306 | background-color: white; | ||
307 | padding: .25em .25em .25em .5em; | ||
308 | |||
309 | img { | ||
310 | vertical-align: bottom; | ||
311 | margin: -4px -4px -4px -8px; | ||
312 | image-rendering: pixelated; | ||
313 | } | ||
314 | } | ||
315 | } | ||
316 | |||
317 | .pkv-type { | ||
318 | image-rendering: pixelated; | ||
319 | } | ||
320 | |||
321 | table { | ||
322 | border-spacing: 0; | ||
323 | width: 100%; | ||
324 | |||
325 | th { | ||
326 | text-align: left; | ||
327 | color: white; | ||
328 | font-weight: normal; | ||
329 | white-space: nowrap; | ||
330 | } | ||
331 | |||
332 | .table-bubble { | ||
333 | background-color: #e4f0f0; | ||
334 | text-align: center; | ||
335 | padding: 4px 1em 0 1em; | ||
336 | height: 100%; | ||
337 | |||
338 | &.tb-top { | ||
339 | border-top-left-radius: 8px; | ||
340 | border-top-right-radius: 8px; | ||
341 | } | ||
342 | |||
343 | &.tb-bottom { | ||
344 | border-bottom-left-radius: 8px; | ||
345 | border-bottom-right-radius: 8px; | ||
346 | } | ||
347 | } | ||
348 | |||
349 | .tb-only { | ||
350 | text-align: center; | ||
351 | background-color: #e4f0f0; | ||
352 | border-radius: 6px; | ||
353 | padding: 3px 3px 0 3px; | ||
354 | height: 100%; | ||
355 | } | ||
356 | |||
357 | tr:nth-child(odd) { | ||
358 | .table-bubble { | ||
359 | background-color: #e4e8d0; | ||
360 | } | ||
361 | } | ||
362 | } | ||
363 | |||
364 | .pokemon-tab { | ||
365 | border-left: 1px solid #585450; | ||
366 | flex: 1 0px; | ||
367 | } | ||
368 | |||
369 | .pokemon-details { | ||
370 | background-color: #94c49c; | ||
371 | |||
372 | table { | ||
373 | padding-top: .75em; | ||
374 | |||
375 | th { | ||
376 | padding: .25em 1em 0 .5em; | ||
377 | } | ||
378 | |||
379 | td { | ||
380 | padding: 0 .5em 0 0; | ||
381 | } | ||
382 | |||
383 | tr:nth-child(odd) { | ||
384 | background-color: #84ac88; | ||
385 | } | ||
386 | } | ||
387 | } | ||
388 | |||
389 | .pokemon-stats { | ||
390 | background-color: #6870d8; | ||
391 | |||
392 | table { | ||
393 | padding-top: .5em; | ||
394 | |||
395 | tr:nth-child(even) { | ||
396 | background-color: #8890f8; | ||
397 | } | ||
398 | |||
399 | th { | ||
400 | padding: .25em .5em 0 1.5em; | ||
401 | } | ||
402 | |||
403 | td { | ||
404 | padding: 0 1em 0 0; | ||
405 | } | ||
406 | |||
407 | .pokemon-nature-label th { | ||
408 | padding-top: .75em; | ||
409 | } | ||
410 | |||
411 | .nature-benefit { | ||
412 | color: #99ff00; | ||
413 | } | ||
414 | |||
415 | .nature-hinder { | ||
416 | color: red; | ||
417 | } | ||
418 | } | ||
419 | } | ||
420 | |||
421 | .pokemon-moves { | ||
422 | background-color: #ff847c; | ||
423 | |||
424 | table { | ||
425 | padding-top: .75em; | ||
426 | |||
427 | tr:nth-child(even) { | ||
428 | background-color: #f7aca6; | ||
429 | |||
430 | .tb-only { | ||
431 | color: black; | ||
432 | } | ||
433 | } | ||
434 | |||
435 | tr:nth-child(odd) { | ||
436 | td { | ||
437 | padding-top: .25em; | ||
438 | color: white; | ||
439 | } | ||
440 | } | ||
441 | |||
442 | th { | ||
443 | padding: .25em 0.25em 0 .25em; | ||
444 | text-align: right; | ||
445 | } | ||
446 | |||
447 | td { | ||
448 | padding-right: .5em; | ||
449 | } | ||
450 | |||
451 | .pp-label { | ||
452 | display: block; | ||
453 | position: absolute; | ||
454 | padding-left: .125em; | ||
455 | } | ||
456 | |||
457 | .pp-value { | ||
458 | display: block; | ||
459 | margin-left: 2em; | ||
460 | text-align: right; | ||
461 | } | ||
462 | } | ||
463 | } | ||
464 | |||
465 | .pokemon-met-label { | ||
466 | background-color: #84ac88; | ||
467 | padding: .75em 0 0 .5em; | ||
468 | overflow: hidden; | ||
469 | color: white; | ||
470 | } | ||
471 | |||
472 | .pokemon-description { | ||
473 | background: linear-gradient( | ||
474 | to bottom, | ||
475 | #e4f0f0, | ||
476 | #e4f0f0 50%, | ||
477 | #e4e8d0 50%, | ||
478 | #e4e8d0 | ||
479 | ); | ||
480 | |||
481 | background-size: 100% 3em; | ||
482 | padding: 0 .5em; | ||
483 | height: 100%; | ||
484 | line-height: 1.5em; | ||
485 | border-top: 1px solid #888; | ||
486 | } | ||
487 | |||
488 | .pokemon-ribbons { | ||
489 | background-color: #f8d8f8; | ||
490 | |||
491 | ul { | ||
492 | display: flex; | ||
493 | flex-wrap: wrap; | ||
494 | padding: 0; | ||
495 | margin: 0.5em; | ||
496 | |||
497 | li { | ||
498 | display: block; | ||
499 | |||
500 | img { | ||
501 | image-rendering: pixelated; | ||
502 | } | ||
503 | } | ||
504 | } | ||
505 | } | ||
506 | |||
507 | .pokemon-contest { | ||
508 | background-color: #b9d7f2; | ||
509 | |||
510 | .pokemon-condition { | ||
511 | display: block; | ||
512 | |||
513 | .pkcv-cool-circle { | ||
514 | fill: #f59a55; | ||
515 | } | ||
516 | |||
517 | .pkcv-beauty-circle { | ||
518 | fill: #8095ff; | ||
519 | } | ||
520 | |||
521 | .pkcv-cute-circle { | ||
522 | fill: #f5a8d3; | ||
523 | } | ||
524 | |||
525 | .pkcv-smart-circle { | ||
526 | fill: #79e15c; | ||
527 | } | ||
528 | |||
529 | .pkcv-tough-circle { | ||
530 | fill: #f7f100; | ||
531 | } | ||
532 | |||
533 | .pkcv-outline { | ||
534 | stroke: gray; | ||
535 | stroke-width: 5; | ||
536 | stroke-linejoin: round; | ||
537 | fill: white; | ||
538 | fill-opacity: 0.3; | ||
539 | } | ||
540 | |||
541 | .pkcv-line { | ||
542 | stroke: gray; | ||
543 | stroke-width: 2; | ||
544 | } | ||
545 | |||
546 | .pkcv-data { | ||
547 | fill: #4ee100; | ||
548 | fill-opacity: 0.9; | ||
549 | } | ||
550 | |||
551 | .pkcv-label, .pkcv-label-outline { | ||
552 | font-family: "Power Green"; | ||
553 | font-size: 50px; | ||
554 | text-anchor: middle; | ||
555 | } | ||
556 | |||
557 | .pkcv-label-outline { | ||
558 | stroke: #f0f8f8; | ||
559 | stroke-width: 6; | ||
560 | stroke-linejoin: butt; | ||
561 | } | ||
562 | |||
563 | .pkcv-sheen-bg { | ||
564 | fill: #706860; | ||
565 | } | ||
566 | |||
567 | .pkcv-sheen-data { | ||
568 | fill: #a048c8; | ||
569 | border-top-left-radius: 10px; | ||
570 | border-bottom-left-radius: 10px; | ||
571 | } | ||
572 | |||
573 | .pkcv-sheen-border { | ||
574 | fill-opacity: 0; | ||
575 | stroke-width: 5; | ||
576 | stroke: gray; | ||
577 | } | ||
578 | |||
579 | .pkcv-sheen-label { | ||
580 | fill: white; | ||
581 | font-size: 40px; | ||
582 | } | ||
583 | } | ||
584 | } | ||
585 | } | ||
586 | |||
587 | .clear { | ||
588 | clear: both; | ||
589 | } | ||
590 | |||
591 | #pokemon-embed { | ||
592 | width: 350px; | ||
593 | margin: 1em; | ||
594 | |||
595 | #pokemon-embed-tabs { | ||
596 | margin: 0; | ||
597 | padding: 0; | ||
598 | text-align: right; | ||
599 | |||
600 | li { | ||
601 | display: inline-block; | ||
602 | padding: 3px; | ||
603 | border-width: 1px 1px 0 1px; | ||
604 | border-style: solid; | ||
605 | border-color: #888; | ||
606 | border-top-left-radius: 4px; | ||
607 | border-top-right-radius: 4px; | ||
608 | |||
609 | a { | ||
610 | font-family: 'Power Green'; | ||
611 | color: white; | ||
612 | text-decoration: none; | ||
613 | text-transform: uppercase; | ||
614 | } | ||
615 | |||
616 | &.ptabe-details { | ||
617 | background-color: #94c49c; | ||
618 | |||
619 | &.active, &:hover { | ||
620 | background-color: #84ac88; | ||
621 | } | ||
622 | } | ||
623 | |||
624 | &.ptabe-stats { | ||
625 | background-color: #8890f8; | ||
626 | |||
627 | &.active, &:hover { | ||
628 | background-color: #6870d8; | ||
629 | } | ||
630 | } | ||
631 | |||
632 | &.ptabe-moves { | ||
633 | background-color: #f7aca6; | ||
634 | |||
635 | &.active, &:hover { | ||
636 | background-color: #ff847c; | ||
637 | } | ||
638 | } | ||
639 | |||
640 | &.ptabe-contest { | ||
641 | background-color: #b9d7f2; | ||
642 | |||
643 | &.active, &:hover { | ||
644 | background-color: #63aef2; | ||
645 | } | ||
646 | } | ||
647 | |||
648 | &.ptabe-ribbons { | ||
649 | background-color: #f8d8f8; | ||
650 | |||
651 | &.active, &:hover { | ||
652 | background-color: #f8a0f8; | ||
653 | } | ||
654 | } | ||
655 | } | ||
656 | } | ||
657 | |||
658 | .pokemon { | ||
659 | margin: 0; | ||
660 | } | ||
661 | |||
662 | .pokemon-tab { | ||
663 | display: none; | ||
664 | } | ||
665 | } | ||
666 | |||
667 | #pk-embed-code { | ||
668 | width: 50%; | ||
669 | |||
670 | textarea { | ||
671 | width: 100%; | ||
672 | height: 4em; | ||
673 | } | ||
674 | } | ||