mirror of
https://github.com/FranP-code/Hangman-game-with-React.git
synced 2025-10-13 00:42:32 +00:00
Input for mobile users done
This commit is contained in:
305
build/css/index.css
Normal file
305
build/css/index.css
Normal file
@@ -0,0 +1,305 @@
|
||||
@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;
|
||||
}
|
||||
|
||||
.app {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 2vh;
|
||||
}
|
||||
.app .column-2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.hangman {
|
||||
user-select: none;
|
||||
}
|
||||
.hangman img {
|
||||
width: 20vw;
|
||||
}
|
||||
|
||||
.puzzleWord {
|
||||
font-family: "Rambla", sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 50pt;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 70vw;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.puzzleWord .letter {
|
||||
width: 3vw;
|
||||
height: 70pt;
|
||||
margin-left: 2vw;
|
||||
border-bottom: 5px solid #000;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.puzzleWord .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.Pokemon, .categories-container .categories select.Pokemon {
|
||||
color: #000;
|
||||
background-color: #ffcb05;
|
||||
border: #f7c505 solid 2px;
|
||||
cursor: pointer;
|
||||
transition: 0.4s ease-in-out;
|
||||
}
|
||||
.categories-container .categories button.Pokemon:hover, .categories-container .categories select.Pokemon:hover {
|
||||
background-color: #ffd638;
|
||||
transition: 0.4s ease-in-out;
|
||||
}
|
||||
.categories-container .categories button.Pokemon:hover img, .categories-container .categories select.Pokemon: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;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
1
build/css/index.css.map
Normal file
1
build/css/index.css.map
Normal file
@@ -0,0 +1 @@
|
||||
{"version":3,"sourceRoot":"","sources":["../sass/index.scss","../sass/_header.scss","../sass/_app.scss","../sass/_hangman.scss","../sass/_puzzleWord.scss","../sass/_current-score.scss","../sass/_categories.scss","../sass/_defeat-victory.scss","../sass/_loading.scss","../sass/_letters-registered.scss"],"names":[],"mappings":";AAAA;EACI;EACA;;;ACFJ;EACI;EAEA;EAEA;EACA;EACA;EACA;;AAEA;EDHA;EACA;EAIA;EACA;;ACGA;EDTA;EACA;EAIA;EACA;ECMI;EACA;EAEA;;;ACtBR;EAEI;EACA;EAEA;;AAMA;EACI;EACA;EAEA;;;ACfR;EAEI;;AAEA;EACI;;;ACLR;EJkBI;EACA;EIhBA;EAEA;EACA;EAEA;EAEA;EACA;;AAEA;EACI;EACA;EACA;EAEA;EAEA;EACA;EACA;;AAGJ;EACI;EAEA;EAEA;;;AC9BR;EAEI;EAEA;ELGA;EACA;EKAA;EAEA;;AAEA;EACI;;;ACbR;EAEI;;AAEA;EAEI;EAEA;EACA;EAEA;EACA;EAEA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;;AAEA;EACI;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACI;EACA;;AA0BJ;EArBI,OAFuD;EAIvD,kBAoBc;EAnBd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAYZ;EA3BI,OAFuD;EAIvD,kBA0Bc;EAzBd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAkBZ;EAjCI,OAFuD;EAIvD,kBAgCc;EA/Bd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAwBZ;EAvCI,OAyCY;EAvCZ,kBAsCc;EArCd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AA+BZ;EA9CI,OAFuD;EAIvD,kBA6Cc;EA5Cd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAqCZ;EApDI,OAsDY;EApDZ,kBAmDc;EAlDd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AA4CZ;EA3DI,OAFuD;EAIvD,kBA0Dc;EAzDd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAmDhB;EACI;EAEA;EACA;;AAEA;EAEI;;AAIR;EACI;;AAIJ;EACI;EACA;;AAEA;EAEI;;AAGJ;EAEI;;;ACnJhB;EACI;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAEA;;AAEA;EACI;EACA;;;AAIR;EACI;;;AAGJ;EACI;;;AC9BJ;EACI;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;;AAEA;EACI;EACA;;;AChBR;EACI;EAEA;EAEA;EAEA;EACA;EACA;EAEA;;AAEA;EACI","file":"index.css"}
|
||||
Reference in New Issue
Block a user