about summary refs log tree commit diff stats
path: root/app/assets/stylesheets/pokemon.css.scss
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/stylesheets/pokemon.css.scss')
-rw-r--r--app/assets/stylesheets/pokemon.css.scss674
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}