mirror of
https://github.com/FranP-code/Hangman-game-with-React.git
synced 2025-10-13 00:42:32 +00:00
627 lines
16 KiB
CSS
627 lines
16 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;
|
|
}
|
|
header .redirect-button {
|
|
position: absolute;
|
|
left: 5%;
|
|
width: 10vw;
|
|
padding: 2vh 0px;
|
|
background-color: #e76f4b;
|
|
border: 1px solid #ff6233;
|
|
border-radius: 5px;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
transition: ease-in-out 0.1s;
|
|
}
|
|
header .redirect-button:hover {
|
|
background-color: #ce694b;
|
|
transition: ease-in-out 0.2s;
|
|
}
|
|
|
|
@media (max-width: 991.98px) {
|
|
header h2 {
|
|
color: #fff;
|
|
background-color: #48a6fd;
|
|
padding: 1vh 1vw;
|
|
border-radius: 5px;
|
|
transition: 0.2s ease-in-out;
|
|
}
|
|
header h2:active {
|
|
background-color: #1f476d;
|
|
transition: 0.4s ease-in-out;
|
|
}
|
|
}
|
|
@media (max-width: 576px) {
|
|
header .redirect-button {
|
|
width: 20vw;
|
|
position: initial;
|
|
}
|
|
}
|
|
.game-container {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-top: 2vh;
|
|
}
|
|
.game-container .column-2 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
@media (max-width: 991.98px) {
|
|
.game-container {
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.game-container .column-1 {
|
|
order: 10;
|
|
}
|
|
.game-container .column-1 .hangman img {
|
|
width: 30vw;
|
|
}
|
|
.game-container .column-2 {
|
|
order: 0;
|
|
margin-bottom: 10vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
}
|
|
/*@media (max-width: 576px) {
|
|
|
|
}*/
|
|
.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;
|
|
}
|
|
|
|
@media (max-width: 991.98px) {
|
|
.word .letter {
|
|
font-size: 10vw;
|
|
}
|
|
.word .counter {
|
|
align-self: flex-end;
|
|
}
|
|
}
|
|
@media (max-width: 576px) {
|
|
.word .counter {
|
|
font-size: 10vw;
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
@media (max-width: 991.98px) {
|
|
.categories-container .categories {
|
|
padding: 0;
|
|
}
|
|
.categories-container .categories button, .categories-container .categories select {
|
|
font-size: 4vw !important;
|
|
}
|
|
}
|
|
.defeat, .victory {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 7vw;
|
|
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;
|
|
}
|
|
|
|
@media (max-width: 991.98px) {
|
|
.defeat, .victory {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
.loading {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.loading img {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
|
|
.letters-registered {
|
|
padding: 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;
|
|
}
|
|
|
|
.form-container {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
.form-container .options-container {
|
|
display: flex;
|
|
height: 10vh;
|
|
width: 100%;
|
|
}
|
|
.form-container .options-container .option {
|
|
color: #fff;
|
|
background-color: #3670c9;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
transition: ease-in-out 0.2s;
|
|
}
|
|
.form-container .options-container .option.active {
|
|
cursor: initial;
|
|
background-color: #364f75;
|
|
transition: ease-in-out 0.4s;
|
|
}
|
|
.form-container form {
|
|
height: 64vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-top: 3vh;
|
|
}
|
|
.form-container form input {
|
|
width: 33vw;
|
|
height: 5vh;
|
|
padding: 0;
|
|
box-sizing: content-box;
|
|
margin-bottom: 0.5vh;
|
|
border: 0;
|
|
border-bottom: 1px solid #797979;
|
|
outline: none;
|
|
}
|
|
.form-container form input[type=submit] {
|
|
margin-top: 1vh;
|
|
border-bottom: 0;
|
|
border: 1px solid #797979;
|
|
}
|
|
.form-container .loading {
|
|
opacity: 70%;
|
|
}
|
|
|
|
@media (min-width: 991.98px) {
|
|
.form-container {
|
|
margin: 0px 20vw;
|
|
}
|
|
}
|
|
.message-container {
|
|
padding: 4vh 5vw;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #ff4e4e;
|
|
}
|
|
.message-container h2 {
|
|
color: #fff;
|
|
margin: 0;
|
|
}
|
|
|
|
.control-panel .buttons-container {
|
|
height: 60vh;
|
|
max-width: 100vw;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
padding: 5vh 15vw;
|
|
}
|
|
.control-panel .buttons-container button {
|
|
width: 16vw;
|
|
max-width: 250px;
|
|
height: 16vw;
|
|
max-height: 250px;
|
|
margin: 0px 3vw;
|
|
font-size: 1.8vw;
|
|
font-weight: bold;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
}
|
|
.control-panel .buttons-container button {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
-webkit-transform: perspective(1px) translateZ(0);
|
|
transform: perspective(1px) translateZ(0);
|
|
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
|
-webkit-transition-duration: 0.3s;
|
|
transition-duration: 0.3s;
|
|
-webkit-transition-property: transform;
|
|
transition-property: transform;
|
|
}
|
|
.control-panel .buttons-container button:hover, .control-panel .buttons-container button:focus, .control-panel .buttons-container button:active {
|
|
-webkit-transform: scale(1.1);
|
|
transform: scale(1.1);
|
|
}
|
|
.control-panel .buttons-container button.add-words {
|
|
background-color: #77b3d6;
|
|
border: 1px solid #77a3bd;
|
|
transition: ease-in-out 0.4s;
|
|
}
|
|
.control-panel .buttons-container button.add-words:hover {
|
|
background-color: #9ec9e2;
|
|
transition: ease-in-out 0.4s;
|
|
}
|
|
.control-panel .buttons-container button.add-category {
|
|
background-color: #c469cc;
|
|
border: 1px solid #ad69b3;
|
|
transition: ease-in-out 0.4s;
|
|
}
|
|
.control-panel .buttons-container button.add-category:hover {
|
|
background-color: #d38fd9;
|
|
transition: ease-in-out 0.4s;
|
|
}
|
|
.control-panel .buttons-container button.delete-category {
|
|
background-color: #f79143;
|
|
border: 1px solid #de8643;
|
|
transition: ease-in-out 0.4s;
|
|
}
|
|
.control-panel .buttons-container button.delete-category:hover {
|
|
background-color: #f9ae74;
|
|
transition: ease-in-out 0.4s;
|
|
}
|
|
.control-panel .buttons-container button.delete-word {
|
|
background-color: #df6767;
|
|
border: 1px solid #c66767;
|
|
transition: ease-in-out 0.4s;
|
|
}
|
|
.control-panel .buttons-container button.delete-word:hover {
|
|
background-color: #e89191;
|
|
transition: ease-in-out 0.4s;
|
|
}
|
|
.control-panel .buttons-container button.edit-word {
|
|
background-color: #7dbb4e;
|
|
border: 1px solid #72a24e;
|
|
transition: ease-in-out 0.4s;
|
|
}
|
|
.control-panel .buttons-container button.edit-word:hover {
|
|
background-color: #98c973;
|
|
transition: ease-in-out 0.4s;
|
|
}
|
|
.control-panel .buttons-container.nav-mode {
|
|
height: 5vw;
|
|
padding: 1vh 5vw;
|
|
align-items: initial;
|
|
justify-content: space-between;
|
|
}
|
|
.control-panel .buttons-container.nav-mode button {
|
|
height: 3vh;
|
|
width: 15vw;
|
|
margin: 0px 0.5vw;
|
|
font-size: 1vw;
|
|
}
|
|
|
|
@media (max-width: 991.98px) {
|
|
.control-panel .buttons-container {
|
|
height: auto;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
align-items: initial;
|
|
flex-wrap: nowrap;
|
|
}
|
|
.control-panel .buttons-container button {
|
|
max-width: none;
|
|
max-height: none;
|
|
width: 66vw;
|
|
height: 20vh;
|
|
font-size: 3vw;
|
|
margin-bottom: 3vh;
|
|
}
|
|
.control-panel .buttons-container.nav-mode {
|
|
padding: 0;
|
|
height: auto;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
align-items: stretch;
|
|
align-content: stretch;
|
|
}
|
|
.control-panel .buttons-container.nav-mode button {
|
|
box-sizing: border-box;
|
|
height: 8vh;
|
|
border-radius: 0;
|
|
min-width: 50vw;
|
|
flex-grow: 1;
|
|
align-self: stretch;
|
|
margin: 0;
|
|
font-size: 2vw;
|
|
}
|
|
.control-panel .buttons-container.nav-mode button {
|
|
display: initial;
|
|
vertical-align: none;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
box-shadow: none;
|
|
-webkit-transition-duration: none;
|
|
transition-duration: none;
|
|
-webkit-transition-property: none;
|
|
transition-property: none;
|
|
}
|
|
.control-panel .buttons-container.nav-mode button:hover, .control-panel .buttons-container.nav-mode button:focus, .control-panel .buttons-container.nav-mode button:active {
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
/*# sourceMappingURL=index.css.map */
|