about summary refs log tree commit diff stats
path: root/app/assets
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets')
-rw-r--r--app/assets/images/pokeviewer/types/mystery.gifbin0 -> 905 bytes
-rw-r--r--app/assets/stylesheets/pokeviewer/pokemon.css.scss393
2 files changed, 267 insertions, 126 deletions
diff --git a/app/assets/images/pokeviewer/types/mystery.gif b/app/assets/images/pokeviewer/types/mystery.gif new file mode 100644 index 0000000..566a2f2 --- /dev/null +++ b/app/assets/images/pokeviewer/types/mystery.gif
Binary files differ
diff --git a/app/assets/stylesheets/pokeviewer/pokemon.css.scss b/app/assets/stylesheets/pokeviewer/pokemon.css.scss index ca6ae9c..4c1fc2c 100644 --- a/app/assets/stylesheets/pokeviewer/pokemon.css.scss +++ b/app/assets/stylesheets/pokeviewer/pokemon.css.scss
@@ -3,34 +3,20 @@
3 They will automatically be included in application.css. 3 They will automatically be included in application.css.
4*/ 4*/
5 5
6body {
7
8}
9
10#left-sidebar, #right-sidebar {
11 flex: 3 0px;
12}
13
14#container {
15 display: flex;
16
17}
18
19#banner { 6#banner {
20 box-sizing: border-box; 7 box-sizing: border-box;
21 height: 10em; 8 height: 2em;
22 margin: 0 auto; 9 margin: 0 auto;
23 width: 60%; 10 width: 60%;
24} 11}
25 12
26#content { 13#content {
27 flex: 10 0px; 14 margin: 2em;
28} 15}
29 16
30.trainer { 17.trainer {
31 margin: 1em; 18 margin: 1em;
32 font-family: 'Power Green'; 19 font-family: 'Power Green';
33/* width: 758px;*/
34 box-sizing: border-box; 20 box-sizing: border-box;
35 background-color: #f7f7f7; 21 background-color: #f7f7f7;
36 border: 1px solid #999; 22 border: 1px solid #999;
@@ -162,6 +148,7 @@ body {
162 border-radius: 4px; 148 border-radius: 4px;
163 position: absolute; 149 position: absolute;
164 max-width: 45ch; 150 max-width: 45ch;
151 text-align: left;
165 152
166 .pc-data-name { 153 .pc-data-name {
167 font-weight: bold; 154 font-weight: bold;
@@ -182,10 +169,10 @@ body {
182.pokemon { 169.pokemon {
183 font-family: 'Power Green'; 170 font-family: 'Power Green';
184 display: flex; 171 display: flex;
185 margin: 1em; 172 margin: 1em 0;
186 border: 1px solid #777; 173 background-color: #c0c8c4;
187 border-radius: 5px; 174 border: 1px solid #888;
188 background-color: #fafafa; 175 overflow: hidden;
189 176
190 .male { 177 .male {
191 color: blue; 178 color: blue;
@@ -200,164 +187,256 @@ body {
200 white-space: pre; 187 white-space: pre;
201 } 188 }
202 189
203 .pd-details { 190 &.in-emerald {
204 color: white; 191 .pokemon-image {
205 padding: .25em .5em; 192 img {
206 } 193 margin: -14px;
207 194 }
208 .pd-contents {
209 p {
210 margin: .25em;
211 } 195 }
212 } 196 }
213 197
214 .pokemon-basics { 198 .pokemon-basics {
215 margin: .5em; 199 width: 8.5em;
216 min-width: 5em; 200
217 } 201 .pokemon-nameline {
202 background-color: #dcb880;
203 padding: 6px 6px 0 6px;
204 border-top: 1px solid #d8a878;
205 border-left: 1px solid #d8a878;
206 border-right: 1px solid #d8a878;
207 border-top-left-radius: 6px;
208 border-top-right-radius: 6px;
209 margin: .25em .25em 0;
210 }
218 211
219 .pokemon-column { 212 .pokemon-ball {
220 border-left: 1px solid #aaa; 213 margin: -8px;
214 }
221 215
222 &>div + div { 216 .pokemon-name {
223 border-top: 1px solid #aaa; 217 margin-left: 3px;
224 } 218 }
225 }
226 219
227 .pokemon-row { 220 .pokemon-gender {
228 display: flex; 221 float: right;
229 flex: 1 0px; 222 }
230 223
231 &>div + div { 224 .pokemon-level {
232 border-left: 1px solid #aaa; 225 padding: 4px 8px 0px;
226 border-bottom-left-radius: 6px;
227 border-bottom-right-radius: 6px;
228 background-color: white;
229 margin: 0 .25em;
233 } 230 }
234 }
235 231
236 .pokemon-memo { 232 .pokemon-image {
237 background-color: #e7e8ff; 233 text-align: center;
238 flex-grow: 1;
239 234
240 .pd-details { 235 .pokemon-image-wrap {
241 background-color: #be3ff8; /*#d078f8;*/ 236 margin: 1em auto;
237 border: 10px solid #e0e0c8;
238 background-color: white;
239 border-radius: 10px;
240 display: inline-block;
241 padding: 4px;
242 }
242 } 243 }
243 }
244 244
245 .pokemon-moves { 245 .pokemon-item-label {
246 flex-grow: 1; 246 background-color: #dcb880;
247 color: white;
248 border-top: 1px solid #d8a878;
249 padding: .25em .25em 0 0.5em;
250
251 &.with-item {
252 padding-left: 30px;
253 }
247 254
248 .pd-details { 255 &:not(.with-item) {
249 background-color: #3fb5f8; 256 margin-top: .25em;
257 }
250 } 258 }
251 259
252 ul { 260 .pokemon-item {
253 display: flex; 261 background-color: white;
254 flex-direction: column; 262 padding: .25em .25em .25em .5em;
255 justify-content: space-between;
256 margin: 0;
257 padding: 0;
258 263
259 li { 264 img {
260 display: block; 265 vertical-align: bottom;
261 padding: 0.25em; 266 margin: -4px -4px -4px -8px;
262 box-sizing: border-box;
263 } 267 }
264 } 268 }
265 } 269 }
266 270
267 .pokemon-stats { 271 table {
268 background-color: #d7f4f6; 272 border-spacing: 0;
273 width: 100%;
274
275 th {
276 text-align: left;
277 color: white;
278 font-weight: normal;
279 white-space: nowrap;
280 }
281
282 .table-bubble {
283 background-color: #e4f0f0;
284 text-align: center;
285 padding: 4px 1em 0 1em;
286 height: 100%;
287
288 &.tb-top {
289 border-top-left-radius: 8px;
290 border-top-right-radius: 8px;
291 }
269 292
270 .pd-details { 293 &.tb-bottom {
271 background-color: #2068e0; 294 border-bottom-left-radius: 8px;
272 border-bottom: 1px solid #A9C6C8; 295 border-bottom-right-radius: 8px;
296 }
273 } 297 }
274 298
275 .nature-benefit { 299 .tb-only {
276 color: green; 300 text-align: center;
301 background-color: #e4f0f0;
302 border-radius: 6px;
303 padding: 3px 3px 0 3px;
304 height: 100%;
277 } 305 }
278 306
279 .nature-hinder { 307 tr:nth-child(odd) {
280 color: red; 308 .table-bubble {
309 background-color: #e4e8d0;
310 }
281 } 311 }
312 }
313
314 .pokemon-tab {
315 border-left: 1px solid #585450;
316 flex: 1 0px;
317 }
318
319 .pokemon-details {
320 background-color: #94c49c;
282 321
283 table { 322 table {
284 border-collapse: collapse; 323 padding-top: .75em;
285 border-style: hidden;
286 table-layout: fixed;
287 324
288 th, td { 325 th {
289 text-align: center; 326 padding: .25em 1em 0 .5em;
290 border: 1px solid #A9C6C8;
291 padding: 0.25em 0.25em;
292 width: 16.67%;
293 } 327 }
294 328
295 th { 329 td {
296 background-color: #bfdfff; 330 padding: 0 .5em 0 0;
331 }
332
333 tr:nth-child(odd) {
334 background-color: #84ac88;
297 } 335 }
298 } 336 }
299 } 337 }
300 338
301 .pokemon-condition { 339 .pokemon-stats {
302 background-color: #b9d7f2; 340 background-color: #6870d8;
303 border-left: 1px solid #aaa;
304 flex: 1 0px;
305 341
306 .pkcv-cool-circle { 342 table {
307 fill: #f59a55; 343 padding-top: .5em;
308 }
309 344
310 .pkcv-beauty-circle { 345 tr:nth-child(even) {
311 fill: #8095ff; 346 background-color: #8890f8;
312 } 347 }
313 348
314 .pkcv-cute-circle { 349 th {
315 fill: #f5a8d3; 350 padding: .25em .5em 0 1.5em;
316 } 351 }
317 352
318 .pkcv-smart-circle { 353 td {
319 fill: #79e15c; 354 padding: 0 1em 0 0;
320 } 355 }
321 356
322 .pkcv-tough-circle { 357 .pokemon-nature-label th {
323 fill: #f7f100; 358 padding-top: .75em;
324 } 359 }
325 360
326 .pkcv-outline { 361 .nature-benefit {
327 stroke: gray; 362 color: #99ff00;
328 stroke-width: 5; 363 }
329 stroke-linejoin: round;
330 fill: white;
331 fill-opacity: 0.3;
332 }
333 364
334 .pkcv-line { 365 .nature-hinder {
335 stroke: gray; 366 color: red;
336 stroke-width: 2; 367 }
337 } 368 }
369 }
338 370
339 .pkcv-data { 371 .pokemon-moves {
340 fill: #4ee100; 372 background-color: #ff847c;
341 fill-opacity: 0.9;
342 }
343 373
344 .pkcv-label, .pkcv-label-outline { 374 table {
345 font-family: "Power Green"; 375 padding-top: .75em;
346 font-size: 50px; 376
347 text-anchor: middle; 377 tr:nth-child(even) {
348 } 378 background-color: #f7aca6;
379
380 .tb-only {
381 color: black;
382 }
383 }
384
385 tr:nth-child(odd) {
386 td {
387 padding-top: .25em;
388 color: white;
389 }
390 }
391
392 th {
393 padding: .25em 0.25em 0 .25em;
394 text-align: right;
395 }
396
397 td {
398 padding-right: .5em;
399 }
400
401 .pp-label {
402 display: block;
403 position: absolute;
404 padding-left: .125em;
405 }
349 406
350 .pkcv-label-outline { 407 .pp-value {
351 stroke: #f0f8f8; 408 display: block;
352 stroke-width: 6; 409 margin-left: 2em;
353 stroke-linejoin: butt; 410 text-align: right;
411 }
354 } 412 }
355 } 413 }
356 414
415 .pokemon-met-label {
416 background-color: #84ac88;
417 padding: .75em 0 0 .5em;
418 overflow: hidden;
419 color: white;
420 }
421
422 .pokemon-description {
423 background: linear-gradient(
424 to bottom,
425 #e4f0f0,
426 #e4f0f0 50%,
427 #e4e8d0 50%,
428 #e4e8d0
429 );
430
431 background-size: 100% 3em;
432 padding: 0 .5em;
433 height: 100%;
434 line-height: 1.5em;
435 border-top: 1px solid #888;
436 }
437
357 .pokemon-ribbons { 438 .pokemon-ribbons {
358 .pd-details { 439 background-color: #f8d8f8;
359 background-color: #ffc8c8;
360 }
361 440
362 ul { 441 ul {
363 display: flex; 442 display: flex;
@@ -370,4 +449,66 @@ body {
370 } 449 }
371 } 450 }
372 } 451 }
452
453 .pokemon-contest {
454 background-color: #b9d7f2;
455
456 .pokemon-condition {
457 display: block;
458
459 .pkcv-cool-circle {
460 fill: #f59a55;
461 }
462
463 .pkcv-beauty-circle {
464 fill: #8095ff;
465 }
466
467 .pkcv-cute-circle {
468 fill: #f5a8d3;
469 }
470
471 .pkcv-smart-circle {
472 fill: #79e15c;
473 }
474
475 .pkcv-tough-circle {
476 fill: #f7f100;
477 }
478
479 .pkcv-outline {
480 stroke: gray;
481 stroke-width: 5;
482 stroke-linejoin: round;
483 fill: white;
484 fill-opacity: 0.3;
485 }
486
487 .pkcv-line {
488 stroke: gray;
489 stroke-width: 2;
490 }
491
492 .pkcv-data {
493 fill: #4ee100;
494 fill-opacity: 0.9;
495 }
496
497 .pkcv-label, .pkcv-label-outline {
498 font-family: "Power Green";
499 font-size: 50px;
500 text-anchor: middle;
501 }
502
503 .pkcv-label-outline {
504 stroke: #f0f8f8;
505 stroke-width: 6;
506 stroke-linejoin: butt;
507 }
508 }
509 }
510}
511
512.clear {
513 clear: both;
373} 514}