diff options
| author | Star Rauchenberger <fefferburbia@gmail.com> | 2024-12-07 11:49:49 -0500 |
|---|---|---|
| committer | Star Rauchenberger <fefferburbia@gmail.com> | 2024-12-07 11:49:49 -0500 |
| commit | 56f5841d4b9c12296cdfcaeff174b2627d59afc8 (patch) | |
| tree | 4f7da4ebbe5ee15a1594b26466ed78e2cf10de35 /app/assets/stylesheets/pokemon.css.scss | |
| parent | c1b0443ba2aebdbd39291ddab0c189f3f4831320 (diff) | |
| download | pokeviewer-56f5841d4b9c12296cdfcaeff174b2627d59afc8.tar.gz pokeviewer-56f5841d4b9c12296cdfcaeff174b2627d59afc8.tar.bz2 pokeviewer-56f5841d4b9c12296cdfcaeff174b2627d59afc8.zip | |
Migrate to full rails app
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 | } | ||
