Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
You can’t perform that action at this time.