Spaces:
Running
Running
| :root { | |
| --card-h: 47; | |
| --card-s: 95%; | |
| --card-l: 58%; | |
| --card-color: hsl(var(--card-h) var(--card-s) var(--card-l)); | |
| } | |
| html, | |
| body { | |
| overflow: scroll; | |
| } | |
| body { | |
| display: grid; | |
| place-items: center; | |
| height: 100vh; | |
| font-family: 'Gill Sans', 'Gill Sans Mt', 'sans-serif'; | |
| background-color: whitesmoke; | |
| } | |
| .duration { | |
| text-align: right; | |
| } | |
| button { | |
| padding: 0.5rem 1rem; | |
| margin: 1rem; | |
| } | |
| section.render { | |
| perspective: 100rem; | |
| margin: 0.5rem; | |
| height: 40rem; | |
| } | |
| .grass { | |
| --h: 90; | |
| --s: 60%; | |
| --l: 40%; | |
| } | |
| .grass.energy { | |
| filter: contrast(0.75) grayscale(1) sepia(1) saturate(10) hue-rotate(55deg) drop-shadow(0 0 0.1rem green); | |
| } | |
| .fire { | |
| --h: 0; | |
| --s: 75%; | |
| --l: 45%; | |
| } | |
| .fire.energy { | |
| filter: contrast(0.75) grayscale(1) sepia(1) saturate(10) hue-rotate(335deg) drop-shadow(0 0 0.1rem red); | |
| } | |
| .water { | |
| --h: 210; | |
| --s: 100%; | |
| --l: 58%; | |
| } | |
| .water.energy { | |
| filter: contrast(0.75) grayscale(1) sepia(1) saturate(10) hue-rotate(180deg) drop-shadow(0 0 0.1rem cyan); | |
| } | |
| .lightning { | |
| --h: 50; | |
| --s: 100%; | |
| --l: 58%; | |
| } | |
| .lightning.energy { | |
| filter: contrast(0.75) grayscale(1) sepia(1) saturate(10) hue-rotate(5deg) drop-shadow(0 0 0.1rem gold); | |
| } | |
| .fighting { | |
| --h: 25; | |
| --s: 72%; | |
| --l: 36%; | |
| } | |
| .fighting.energy { | |
| filter: contrast(0.75) grayscale(1) sepia(1) saturate(10) hue-rotate(320deg) drop-shadow(0 0 0.1rem brown); | |
| } | |
| .psychic { | |
| --h: 299; | |
| --s: 43%; | |
| --l: 44%; | |
| } | |
| .psychic.energy { | |
| filter: grayscale(1) sepia(1) saturate(10) hue-rotate(240deg) drop-shadow(0 0 0.1rem purple); | |
| } | |
| .colorless { | |
| --h: 21; | |
| --s: 27%; | |
| --l: 85%; | |
| } | |
| .colorless.energy { | |
| font-size: 0.9em; | |
| border-radius: 50%; | |
| background-color: hsl(0 0% 100% / 15%); | |
| filter: contrast(100) grayscale(1) drop-shadow(0 0 0.1rem white); | |
| } | |
| .darkness { | |
| --h: 100; | |
| --s: 3%; | |
| --l: 17%; | |
| } | |
| .darkness.energy { | |
| filter: drop-shadow(0 0 0.1rem black); | |
| } | |
| .darkness :not(.species) { | |
| color: whitesmoke; | |
| } | |
| .metal { | |
| --h: 240; | |
| --s: 20%; | |
| --l: 77%; | |
| } | |
| .metal.energy { | |
| filter: drop-shadow(0 0 0.1rem silver); | |
| } | |
| .dragon { | |
| --h: 30; | |
| --s: 6%; | |
| --l: 44%; | |
| } | |
| .dragon.energy { | |
| filter: contrast(0.75) grayscale(1) sepia(1) saturate(10) hue-rotate(15deg) drop-shadow(0 0 0.1rem gold); | |
| } | |
| .fairy { | |
| --h: 334; | |
| --s: 74%; | |
| --l: 55%; | |
| } | |
| .fairy.energy { | |
| filter: contrast(0.75) grayscale(1) sepia(1) saturate(10) hue-rotate(300deg) drop-shadow(0 0 0.1rem pink); | |
| } | |
| .pokecard, | |
| .pokecard * { | |
| box-sizing: border-box; | |
| } | |
| .pokecard { | |
| --color: hsl(var(--h) var(--s) var(--l)); | |
| --lighter: hsl(var(--h) var(--s) calc(var(--l) + 10%)); | |
| --lightest: hsl(var(--h) var(--s) calc(var(--l) + 30%)); | |
| --rotate-x: 0deg; | |
| --rotate-y: 0deg; | |
| --rotate-z: 0deg; | |
| display: flex; | |
| flex-direction: column; | |
| width: 25rem; | |
| aspect-ratio: 63 / 88; | |
| padding: 0.5rem 1rem; | |
| border: 1rem solid; | |
| border-radius: 0.75rem; | |
| border-color: var(--card-color); | |
| background-image: linear-gradient( | |
| 45deg, | |
| var(--lighter) 0%, | |
| var(--lightest) 15%, | |
| var(--lightest) 30%, | |
| var(--color) 50%, | |
| var(--lightest) 90%, | |
| var(--lighter) 100% | |
| ); | |
| transform-origin: center; | |
| transform-style: preserve-3d; | |
| transform: rotateX(var(--rotate-x)) rotateY(var(--rotate-y)) translate3d(10px, 10px, 10px); | |
| transition: transform 0.5s ease-out; | |
| } | |
| .pokecard[data-displayed='true'] { | |
| display: flex; | |
| } | |
| .pokecard[data-displayed='false'] { | |
| display: none; | |
| } | |
| .pokecard :where(header, p) { | |
| font-family: 'Gill Sans', 'Gill Sans Mt', 'sans-serif'; | |
| } | |
| .pokecard :is(.evolves) { | |
| font-family: 'Century Gothic', 'sans-serif'; | |
| } | |
| .pokecard :where(header, p) { | |
| font-family: 'Gill Sans', 'Gill Sans Mt'; | |
| } | |
| .evolves { | |
| margin: 0; | |
| font-weight: bold; | |
| font-size: 0.5rem; | |
| } | |
| header { | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: space-between; | |
| } | |
| header > * { | |
| display: inline-block; | |
| } | |
| .name { | |
| justify-self: left; | |
| font-size: 1.25rem; | |
| margin: 0; | |
| } | |
| .hp { | |
| font-size: 1.25rem; | |
| color: hsl(0 100% 50%); | |
| } | |
| header .energy { | |
| display: inline-block; | |
| transform: translateY(-0.15rem); | |
| } | |
| .frame:is(.picture, .species, .description) { | |
| --lighter: hsl(var(--card-h) var(--card-s) calc(var(--card-l) + 15%)); | |
| --lightest: hsl(var(--card-h) var(--card-s) calc(var(--card-l) + 30%)); | |
| --darker: hsl(var(--card-h) var(--card-s) calc(var(--card-l) - 15%)); | |
| border-color: var(--darker) var(--card-color) var(--lighter); | |
| } | |
| .picture { | |
| width: 100%; | |
| aspect-ratio: 4 / 3; | |
| object-fit: contain; | |
| background-color: white; | |
| border: 0.375rem solid; | |
| box-shadow: 0.25rem 0.25rem 0.5rem black; | |
| user-select: none; | |
| } | |
| .species { | |
| width: 90%; | |
| padding: 0.1rem; | |
| margin: 0.25rem auto; | |
| text-align: center; | |
| font-size: 0.75rem; | |
| font-style: italic; | |
| font-weight: bold; | |
| background-image: linear-gradient(90deg, var(--card-color), var(--lightest) 45% 55%, var(--card-color)); | |
| border-width: 0 0.2rem; | |
| border-style: solid; | |
| border-image: linear-gradient(var(--lightest), var(--darker)) 1 100%; | |
| } | |
| .grid-three { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| } | |
| .grid-three > *:first-child { | |
| text-align: left; | |
| } | |
| .grid-three > span:last-child { | |
| text-align: right; | |
| } | |
| .attacks { | |
| list-style-type: none; | |
| padding: 0; | |
| margin: 0.1rem auto 0; | |
| } | |
| .attacks-row { | |
| max-height: 5rem; | |
| grid-template-columns: 3rem 10fr 1fr; | |
| align-items: center; | |
| gap: 1rem; | |
| font-size: 0.95em; | |
| } | |
| .attack-text > span:only-child { | |
| display: block; | |
| margin-left: -2rem; | |
| text-align: center; | |
| } | |
| .attack-cost { | |
| display: flex; | |
| justify-content: space-evenly; | |
| flex-flow: row wrap; | |
| text-align: justify; | |
| } | |
| .energy { | |
| width: fit-content; | |
| aspect-ratio: 1 / 1; | |
| cursor: default; | |
| user-select: none; | |
| } | |
| .energy:only-child { | |
| justify-self: flex-start; | |
| margin: auto; | |
| } | |
| .attack-name { | |
| font-weight: bold; | |
| } | |
| .attack-damage { | |
| min-width: 2.25rem; | |
| font-size: 1.375rem; | |
| text-align: center; | |
| } | |
| hr { | |
| background-color: black; | |
| border: 0.5px solid black; | |
| } | |
| .multipliers { | |
| display: flex; | |
| flex-direction: row; | |
| justify-content: space-between; | |
| height: 2rem; | |
| margin-top: -0.5rem; | |
| text-align: center; | |
| font-size: 0.75rem; | |
| font-weight: bold; | |
| } | |
| .multipliers > div { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| margin: 0; | |
| } | |
| .resistance { | |
| position: relative; | |
| } | |
| .resistance-total { | |
| position: absolute; | |
| top: 1rem; | |
| left: 2.5rem; | |
| } | |
| .description { | |
| padding: 0.1rem 0.5rem; | |
| margin: 0.25rem 0 0.5rem; | |
| border: 0.15rem solid; | |
| font-size: 0.65rem; | |
| font-style: italic; | |
| font-weight: bold; | |
| } | |
| .footer { | |
| text-align: center; | |
| font-weight: bold; | |
| font-size: 0.6rem; | |
| margin: auto 0; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: black ; | |
| } | |