Todos los estilos de nuestra Pokedex!
/* General */ | |
/*-------------------------*/ | |
:root { | |
--red: #dd082f; | |
--dark-red: #3b020d; | |
--green: #2ff901; | |
--yellow: #ffcc02; | |
--sky: #01fbfb; | |
--orange: #ffcc02; | |
--blue: #519afb; | |
font-size: 16px; | |
} | |
body{ | |
margin: 0; | |
background-color: var(--dark-red); | |
} | |
h1, h2{ | |
margin: 0; | |
} | |
ul{ | |
padding: 0; | |
list-style: none; | |
} | |
.App { | |
display: flex; | |
align-items: center; | |
height: 100vh; | |
overflow: hidden; | |
margin: 0; | |
font-family: system-ui; | |
} | |
/*------------------*/ | |
/* Pokedex */ | |
/*------------------*/ | |
.pokedex { | |
perspective: 1000px; | |
position: relative; | |
overflow: hidden; | |
height: 31rem; | |
width: 23rem; | |
margin: 0 auto; | |
overflow: initial; | |
box-shadow: 0 2px 12px -2px rgba(255, 0, 0, 0.4); | |
} | |
.pokedex:hover .pokedex-right-front, | |
.pokedex.is-active .pokedex-right-front { | |
transform: rotateY(180deg); | |
} | |
.pokedex:hover .pokedex-right-back, | |
.pokedex.is-active .pokedex-right-back { | |
transform: rotateY(0); | |
} | |
.pokedex-right-front { | |
background: var(--red); | |
height: calc(100% - 6rem); | |
width: inherit; | |
position: absolute; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
transition: 1s; | |
transform-origin: right center; | |
z-index: 2; | |
backface-visibility: hidden; | |
border: 1px solid black; | |
box-sizing: border-box; | |
border-radius: 10px 0 0px 10px; | |
border-left: 10px solid #9b0a21; | |
} | |
.pokedex-right-front:before { | |
height: 5rem; | |
position: absolute; | |
bottom: 100%; | |
background: var(--red); | |
width: calc(100% - 9rem); | |
right: 0; | |
border-top: 1px solid black; | |
content: ''; | |
} | |
.pokedex-right-front:after { | |
content: ''; | |
border-right: 2.5rem solid var(--red); | |
border-bottom: 2.5rem solid var(--red); | |
border-left: 2.5rem solid transparent; | |
border-top: 2.5rem solid transparent; | |
position: absolute; | |
right: calc(100% - 9rem); | |
bottom: 100%; | |
filter: drop-shadow(0 -1px 0 black); | |
} | |
.pokedex-right-back { | |
background: var(--red); | |
height: calc(100% - 6rem); | |
width: inherit; | |
position: absolute; | |
backface-visibility: hidden; | |
transform: rotateY(-180deg); | |
right: 0; | |
bottom: 0; | |
transition: 1s; | |
left: 100%; | |
transform-origin: left top; | |
z-index: 1; | |
border-width: 1px; | |
border-style: solid; | |
border-color: black; | |
border-radius: 0 10px 10px 0; | |
border-left: none; | |
padding: 20px; | |
box-sizing: border-box; | |
display: flex; | |
} | |
.pokedex-right-back:before { | |
width: calc(100% - 9rem); | |
height: 5rem; | |
position: absolute; | |
bottom: 100%; | |
background-color: var(--red); | |
left: 0; | |
border-top: 1px solid black; | |
content: ''; | |
} | |
.pokedex-right-back:after { | |
content: ''; | |
border-left: 2.5rem solid var(--red); | |
border-bottom: 2.5rem solid var(--red); | |
border-top: 2.5rem solid transparent; | |
border-right: 2.5rem solid transparent; | |
display: block; | |
width: 0; | |
position: absolute; | |
left: calc(100% - 9rem); | |
bottom: 100%; | |
filter: drop-shadow(0 -1px 0 black) | |
} | |
.light { | |
border: 1px solid black; | |
box-shadow: -2px 2px 0 rgba(255,255,255, .5); | |
width: 20px; | |
height: 20px; | |
background: gray; | |
border-radius: 50%; | |
} | |
.light.is-animated { | |
animation: .3s light linear infinite; | |
} | |
@keyframes light { | |
0% { | |
background-color: white; | |
} | |
50% { | |
background-color: var(--sky); | |
} | |
100% { | |
background-color: white; | |
} | |
} | |
.light.is-big { | |
width: 50px; | |
height: 50px; | |
} | |
.light.is-medium { | |
width: 40px; | |
height: 40px; | |
} | |
.light.is-large { | |
width: 80px; | |
border-radius: 20px; | |
} | |
.light.is-red { | |
background-color: var(--red); | |
} | |
.light.is-blue { | |
background-color: var(--blue); | |
} | |
.light.is-green { | |
background-color: var(--green); | |
} | |
.light.is-sky { | |
background-color: var(--sky); | |
} | |
.light.is-orange { | |
background-color: var(--orange); | |
} | |
.light.is-yellow { | |
background-color: var(--yellow); | |
} | |
.pokedex-left { | |
background: var(--red); | |
height: inherit; | |
width: inherit; | |
border-radius: 10px 0 0 10px; | |
border: 1px solid black; | |
border-right: 10px solid black; | |
box-sizing: border-box; | |
padding: 15px 20px; | |
} | |
.pokedex-left-top { | |
display: flex; | |
align-items: flex-start; | |
} | |
.pokedex-left-top > * { | |
margin-right: .7em; | |
} | |
.pokedex-left-bottom-lights { | |
display: flex; | |
align-items: flex-start; | |
} | |
.pokedex-left-bottom { | |
margin-top: 1em; | |
} | |
.pokedex-left-bottom-lights > * { | |
margin-right: .8em; | |
} | |
/*----------------------*/ | |
/* Pokedex Screen */ | |
/*---------------------*/ | |
.pokedex-screen-container { | |
background: #b0b0b0; | |
border-radius: 10px 10px 0 0; | |
border: 1px solid black; | |
margin: 20px 0; | |
height: 50%; | |
padding: .8rem; | |
} | |
.pokedex-screen { | |
background: white; | |
border: 2px solid black; | |
border-radius: 10px; | |
height: 100%; | |
display: flex; | |
align-items: center; | |
} | |
.pokemon-info{ | |
padding: 0.8rem; | |
flex-grow: 1; | |
display: grid; | |
grid-template-columns: 40% calc(60% - 0.8rem); | |
grid-template-rows: 35px 1fr; | |
grid-column-gap: 0.8rem; | |
grid-row-gap: 0.8rem; | |
grid-template-areas: | |
"title title" | |
"img stats"; | |
} | |
.pokemon-name{ | |
text-align: center; | |
text-transform: capitalize; | |
grid-area: title; | |
font-weight: 700; | |
} | |
.pokemon-img{ | |
width: 100%; | |
transform: scale(1.2); | |
align-self: center; | |
grid-area: img; | |
} | |
.pokemon-stats{ | |
grid-area: stats; | |
} | |
.pokemon-stat{ | |
font-size: 0.9rem; | |
} | |
.pokedex-no-screen{ | |
width: 100%; | |
height: 100%; | |
} | |
.stat-name{ | |
text-transform: capitalize; | |
} | |
/*---------------------*/ | |
/* Pokedex Form */ | |
/*---------------------*/ | |
.pokemon-form { | |
display: grid; | |
grid-template-columns: 1fr 50px; | |
column-gap: .5rem; | |
margin-top: 1em; | |
} | |
.pokemon-input{ | |
font-family: system-ui; | |
padding: 10px; | |
background-color: var(--orange); | |
border: none; | |
border: 1px solid black; | |
border-radius: 10px; | |
outline: 0; | |
font-size: 1em; | |
flex-grow: 1; | |
transition: .2s; | |
} | |
.pokemon-input:focus { | |
border-color: #ffffff; | |
} | |
.pokemon-input:focus::-webkit-input-placeholder{ | |
color: rgba(255,255,255, 1); | |
} | |
.pokemon-input::-webkit-input-placeholder { | |
color: rgba(255,255,255, .8); | |
} | |
.pokemon-btn{ | |
border-radius: 50%; | |
} | |
.pokemon-btn { | |
width: 40px; | |
height: 40px; | |
position: relative; | |
background: radial-gradient(hsl(0, 100%, 70%), hsl(0, 97%, 25%)); /* Standard syntax */ | |
text-shadow: 0 -1px 0 #c30707; | |
color: white; | |
border: solid 1px hsl(0, 100%, 20%); | |
border-radius: 100%; | |
z-index: 1; | |
outline: none; | |
box-shadow: inset 0 .5px 0 hsl(0, 100%, 50%), | |
0 1px 0 hsl(0, 100%, 20%), | |
0 1.5px 0 hsl(0, 100%, 18%), | |
0 2px 0 hsl(0, 100%, 16%), | |
0 2.5px 0 hsl(0, 100%, 14%), | |
0 3px 0 hsl(0, 100%, 12%), | |
0 3.5px 0 hsl(0, 100%, 10%), | |
0 4px 0 hsl(0, 100%, 8%), | |
0 4.5px 0 hsl(0, 100%, 6%); | |
} | |
.pokemon-btn:hover { | |
background: radial-gradient(hsl(0, 100%, 70%), hsl(0, 97%, 35%)); /* Standard syntax */ | |
} | |
.pokemon-btn:active { | |
background: radial-gradient(hsl(0, 100%, 80%), hsl(0, 100%, 45%)); /* Standard syntax */ | |
top: 2px; | |
box-shadow: inset 0 .5px 0 hsl(0, 100%, 50%), | |
0 1px 0 hsl(0, 100%, 20%), | |
0 1.5px 0 hsl(0, 100%, 18%), | |
0 2px 0 hsl(0, 100%, 16%), | |
0 2.5px 0 hsl(0, 100%, 14%), | |
0 3px 0 hsl(0, 100%, 12%), | |
0 3.5px 0 hsl(0, 100%, 10%); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment