franpcode/Hangman-game-with-React
1
0
Fork 0
mirror of https://github.com/FranP-code/Hangman-game-with-React.git synced 2025-10-13 00:42:32 +00:00
Code Issues 1 Packages Projects Releases Wiki Activity

Navbar of buttons done

Browse Source
This commit is contained in:
Francisco Pessano
2021-10-22 18:31:32 -03:00
parent 2e9a2cee45
commit 4de12fa282
5 changed files with 240 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
public/css/index.css
View File

@@ -478,7 +478,7 @@ header .redirect-button:hover {
margin: 0;
}
.control-panel {
.control-panel .buttons-container {
height: 60vh;
max-width: 100vw;
display: flex;
@@ -487,7 +487,7 @@ header .redirect-button:hover {
flex-wrap: wrap;
padding: 5vh 15vw;
}
.control-panel button {
.control-panel .buttons-container button {
width: 16vw;
max-width: 250px;
height: 16vw;
@@ -499,136 +499,88 @@ header .redirect-button:hover {
border-radius: 5px;
cursor: pointer;
}
.control-panel button.add-words {
.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 button.add-words {
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 button.add-words:hover, .control-panel button.add-words:focus, .control-panel button.add-words:active {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.control-panel button.add-words:hover {
.control-panel .buttons-container button.add-words:hover {
background-color: #9ec9e2;
transition: ease-in-out 0.4s;
}
.control-panel button.add-category {
.control-panel .buttons-container button.add-category {
background-color: #c469cc;
border: 1px solid #ad69b3;
transition: ease-in-out 0.4s;
}
.control-panel button.add-category {
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 button.add-category:hover, .control-panel button.add-category:focus, .control-panel button.add-category:active {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.control-panel button.add-category:hover {
.control-panel .buttons-container button.add-category:hover {
background-color: #d38fd9;
transition: ease-in-out 0.4s;
}
.control-panel button.delete-category {
.control-panel .buttons-container button.delete-category {
background-color: #f79143;
border: 1px solid #de8643;
transition: ease-in-out 0.4s;
}
.control-panel button.delete-category {
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 button.delete-category:hover, .control-panel button.delete-category:focus, .control-panel button.delete-category:active {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.control-panel button.delete-category:hover {
.control-panel .buttons-container button.delete-category:hover {
background-color: #f9ae74;
transition: ease-in-out 0.4s;
}
.control-panel button.delete-word {
.control-panel .buttons-container button.delete-word {
background-color: #df6767;
border: 1px solid #c66767;
transition: ease-in-out 0.4s;
}
.control-panel button.delete-word {
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 button.delete-word:hover, .control-panel button.delete-word:focus, .control-panel button.delete-word:active {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.control-panel button.delete-word:hover {
.control-panel .buttons-container button.delete-word:hover {
background-color: #e89191;
transition: ease-in-out 0.4s;
}
.control-panel button.edit-word {
.control-panel .buttons-container button.edit-word {
background-color: #7dbb4e;
border: 1px solid #72a24e;
transition: ease-in-out 0.4s;
}
.control-panel button.edit-word {
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 button.edit-word:hover, .control-panel button.edit-word:focus, .control-panel button.edit-word:active {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.control-panel button.edit-word:hover {
.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 {
.control-panel .buttons-container {
height: auto;
flex-direction: column;
justify-content: space-around;
align-items: initial;
flex-wrap: nowrap;
}
.control-panel button {
.control-panel .buttons-container button {
max-width: none;
max-height: none;
width: 66vw;
@@ -636,6 +588,39 @@ header .redirect-button:hover {
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 */