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

Pannel control styles done

Browse Source
This commit is contained in:
Francisco Pessano
2021-10-22 17:19:10 -03:00
parent 28a85f63ec
commit 2e9a2cee45
25 changed files with 489 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
public/css/index.css
View File

@@ -478,4 +478,164 @@ header .redirect-button:hover {
margin: 0;
}
.control-panel {
height: 60vh;
max-width: 100vw;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding: 5vh 15vw;
}
.control-panel 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 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 {
background-color: #9ec9e2;
transition: ease-in-out 0.4s;
}
.control-panel 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 {
background-color: #d38fd9;
transition: ease-in-out 0.4s;
}
.control-panel 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 {
background-color: #f9ae74;
transition: ease-in-out 0.4s;
}
.control-panel 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 {
background-color: #e89191;
transition: ease-in-out 0.4s;
}
.control-panel 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 {
background-color: #98c973;
transition: ease-in-out 0.4s;
}
@media (max-width: 991.98px) {
.control-panel {
height: auto;
flex-direction: column;
justify-content: space-around;
align-items: initial;
flex-wrap: nowrap;
}
.control-panel button {
max-width: none;
max-height: none;
width: 66vw;
height: 20vh;
font-size: 3vw;
margin-bottom: 3vh;
}
}
/*# sourceMappingURL=index.css.map */