mirror of
https://github.com/FranP-code/Hangman-game-with-React.git
synced 2025-10-13 00:42:32 +00:00
328 lines
9.6 KiB
CSS
328 lines
9.6 KiB
CSS
@charset "UTF-8";
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
header {
|
|
border-bottom: 1px solid #c8c8c8;
|
|
height: 15vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
header h1 {
|
|
font-family: "Raleway", sans-serif;
|
|
font-weight: bold;
|
|
user-select: none;
|
|
margin: 0;
|
|
}
|
|
header h2 {
|
|
font-family: "Raleway", sans-serif;
|
|
font-weight: bold;
|
|
user-select: none;
|
|
margin: 0;
|
|
color: #48a6fd;
|
|
margin-top: 0.5vh;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.game-container {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-top: 2vh;
|
|
}
|
|
.game-container .column-2 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.hangman {
|
|
user-select: none;
|
|
}
|
|
.hangman img {
|
|
width: 20vw;
|
|
}
|
|
|
|
.word {
|
|
font-family: "Rambla", sans-serif;
|
|
font-weight: 400;
|
|
font-size: 50pt;
|
|
display: flex;
|
|
align-items: center;
|
|
max-width: 70vw;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.word .letter {
|
|
width: 3vw;
|
|
height: 70pt;
|
|
margin-left: 2vw;
|
|
border-bottom: 5px solid #000;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
}
|
|
.word .letter.blank {
|
|
border: none;
|
|
}
|
|
.word .counter {
|
|
font-size: 40pt;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
margin-left: 3vw;
|
|
}
|
|
|
|
.current-score {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
font-family: "Raleway", sans-serif;
|
|
font-weight: bold;
|
|
font-size: 18pt;
|
|
color: #58ff6b;
|
|
}
|
|
.current-score .text {
|
|
user-select: none;
|
|
}
|
|
|
|
.categories-container {
|
|
overflow-y: hidden;
|
|
}
|
|
.categories-container .categories {
|
|
position: absolute;
|
|
top: 15vh;
|
|
left: 0;
|
|
height: 85vh;
|
|
width: 100vw;
|
|
background-color: #e1e1e1;
|
|
transition: opacity 0.4s ease-in-out;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
padding-top: 10vh;
|
|
padding-bottom: 10vh;
|
|
}
|
|
.categories-container .categories button, .categories-container .categories select {
|
|
height: 10vh;
|
|
width: 50vw;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 22pt;
|
|
border: none;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
text-align-last: center;
|
|
-moz-text-align-last: center;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.categories-container .categories button img, .categories-container .categories button .blank-space, .categories-container .categories select img, .categories-container .categories select .blank-space {
|
|
height: 4vw;
|
|
width: 4vw;
|
|
}
|
|
.categories-container .categories button.Select, .categories-container .categories select.Select {
|
|
color: #000;
|
|
background-color: #E96363;
|
|
border: #e16363 solid 2px;
|
|
cursor: pointer;
|
|
transition: 0.4s ease-in-out;
|
|
}
|
|
.categories-container .categories button.Select:hover, .categories-container .categories select.Select:hover {
|
|
background-color: #ef9090;
|
|
transition: 0.4s ease-in-out;
|
|
}
|
|
.categories-container .categories button.Select:hover img, .categories-container .categories select.Select:hover img {
|
|
animation: bounce;
|
|
animation-duration: 0.5s;
|
|
}
|
|
.categories-container .categories button.Cities, .categories-container .categories button.Ciudades, .categories-container .categories select.Cities, .categories-container .categories select.Ciudades {
|
|
color: #000;
|
|
background-color: #5f9ea0;
|
|
border: #5f9798 solid 2px;
|
|
cursor: pointer;
|
|
transition: 0.4s ease-in-out;
|
|
}
|
|
.categories-container .categories button.Cities:hover, .categories-container .categories button.Ciudades:hover, .categories-container .categories select.Cities:hover, .categories-container .categories select.Ciudades:hover {
|
|
background-color: #7fb1b3;
|
|
transition: 0.4s ease-in-out;
|
|
}
|
|
.categories-container .categories button.Cities:hover img, .categories-container .categories button.Ciudades:hover img, .categories-container .categories select.Cities:hover img, .categories-container .categories select.Ciudades:hover img {
|
|
animation: bounce;
|
|
animation-duration: 0.5s;
|
|
}
|
|
.categories-container .categories button.Pokemons, .categories-container .categories select.Pokemons {
|
|
color: #000;
|
|
background-color: #ffcb05;
|
|
border: #f7c505 solid 2px;
|
|
cursor: pointer;
|
|
transition: 0.4s ease-in-out;
|
|
}
|
|
.categories-container .categories button.Pokemons:hover, .categories-container .categories select.Pokemons:hover {
|
|
background-color: #ffd638;
|
|
transition: 0.4s ease-in-out;
|
|
}
|
|
.categories-container .categories button.Pokemons:hover img, .categories-container .categories select.Pokemons:hover img {
|
|
animation: bounce;
|
|
animation-duration: 0.5s;
|
|
}
|
|
.categories-container .categories button.Programming.Languages, .categories-container .categories button.Lenguajes.De.Programación, .categories-container .categories select.Programming.Languages, .categories-container .categories select.Lenguajes.De.Programación {
|
|
color: #fff;
|
|
background-color: #e46f01;
|
|
border: #dc6b01 solid 2px;
|
|
cursor: pointer;
|
|
transition: 0.4s ease-in-out;
|
|
}
|
|
.categories-container .categories button.Programming.Languages:hover, .categories-container .categories button.Lenguajes.De.Programación:hover, .categories-container .categories select.Programming.Languages:hover, .categories-container .categories select.Lenguajes.De.Programación:hover {
|
|
background-color: #fe881a;
|
|
transition: 0.4s ease-in-out;
|
|
}
|
|
.categories-container .categories button.Programming.Languages:hover img, .categories-container .categories button.Lenguajes.De.Programación:hover img, .categories-container .categories select.Programming.Languages:hover img, .categories-container .categories select.Lenguajes.De.Programación:hover img {
|
|
animation: bounce;
|
|
animation-duration: 0.5s;
|
|
}
|
|
.categories-container .categories button.Animals, .categories-container .categories button.Animales, .categories-container .categories select.Animals, .categories-container .categories select.Animales {
|
|
color: #000;
|
|
background-color: #efa482;
|
|
border: #e7a282 solid 2px;
|
|
cursor: pointer;
|
|
transition: 0.4s ease-in-out;
|
|
}
|
|
.categories-container .categories button.Animals:hover, .categories-container .categories button.Animales:hover, .categories-container .categories select.Animals:hover, .categories-container .categories select.Animales:hover {
|
|
background-color: #f5c5af;
|
|
transition: 0.4s ease-in-out;
|
|
}
|
|
.categories-container .categories button.Animals:hover img, .categories-container .categories button.Animales:hover img, .categories-container .categories select.Animals:hover img, .categories-container .categories select.Animales:hover img {
|
|
animation: bounce;
|
|
animation-duration: 0.5s;
|
|
}
|
|
.categories-container .categories button.Countries, .categories-container .categories button.Países, .categories-container .categories select.Countries, .categories-container .categories select.Países {
|
|
color: #fff;
|
|
background-color: #9f0000;
|
|
border: #970000 solid 2px;
|
|
cursor: pointer;
|
|
transition: 0.4s ease-in-out;
|
|
}
|
|
.categories-container .categories button.Countries:hover, .categories-container .categories button.Países:hover, .categories-container .categories select.Countries:hover, .categories-container .categories select.Países:hover {
|
|
background-color: #d20000;
|
|
transition: 0.4s ease-in-out;
|
|
}
|
|
.categories-container .categories button.Countries:hover img, .categories-container .categories button.Países:hover img, .categories-container .categories select.Countries:hover img, .categories-container .categories select.Países:hover img {
|
|
animation: bounce;
|
|
animation-duration: 0.5s;
|
|
}
|
|
.categories-container .categories button.Random, .categories-container .categories select.Random {
|
|
color: #000;
|
|
background-color: #4285f4;
|
|
border: #4282ec solid 2px;
|
|
cursor: pointer;
|
|
transition: 0.4s ease-in-out;
|
|
}
|
|
.categories-container .categories button.Random:hover, .categories-container .categories select.Random:hover {
|
|
background-color: #72a4f7;
|
|
transition: 0.4s ease-in-out;
|
|
}
|
|
.categories-container .categories button.Random:hover img, .categories-container .categories select.Random:hover img {
|
|
animation: bounce;
|
|
animation-duration: 0.5s;
|
|
}
|
|
.categories-container .categories.hidden {
|
|
opacity: 0%;
|
|
top: 0;
|
|
height: 85vh;
|
|
}
|
|
.categories-container .categories.hidden button, .categories-container .categories.hidden select {
|
|
height: 5vh;
|
|
}
|
|
.categories-container .categories.show {
|
|
opacity: 100%;
|
|
}
|
|
.categories-container .categories.stretch {
|
|
height: auto;
|
|
width: 100%;
|
|
}
|
|
.categories-container .categories.stretch button, .categories-container .categories.stretch select {
|
|
margin-bottom: 5vh;
|
|
}
|
|
.categories-container .categories.stretch:last-child {
|
|
margin-bottom: 0vh !important;
|
|
}
|
|
|
|
.defeat, .victory {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 80pt;
|
|
background-color: rgba(0, 0, 0, 0.775);
|
|
user-select: none;
|
|
}
|
|
.defeat h1, .victory h1 {
|
|
padding: 5%;
|
|
background-color: rgba(0, 0, 0, 0.775);
|
|
}
|
|
|
|
.defeat {
|
|
color: #ff6363;
|
|
}
|
|
|
|
.victory {
|
|
color: #58ff6b;
|
|
}
|
|
|
|
.loading {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.loading img {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
|
|
.letters-registered {
|
|
margin: 0px 5vw;
|
|
display: flex;
|
|
align-items: center;
|
|
font-family: "Times New Roman", Times, serif;
|
|
color: #918c6c;
|
|
font-size: 50pt;
|
|
height: 20vh;
|
|
}
|
|
.letters-registered span {
|
|
margin-left: 1vw;
|
|
}
|
|
|
|
.letter-input-container {
|
|
height: 30vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.letter-input-container #letter-input {
|
|
width: 10vw;
|
|
height: 10vw;
|
|
text-align: center;
|
|
font-size: calc(10vw - 20px);
|
|
border-radius: 5px;
|
|
border: none;
|
|
outline: none;
|
|
border: 2px solid #f87665;
|
|
background-color: #303030cd;
|
|
color: #ffffff5f;
|
|
}
|
|
|
|
/*# sourceMappingURL=index.css.map */
|