franpcode/Tic-Tac-Toe-Game
1
0
Fork 0
mirror of https://github.com/FranP-code/Tic-Tac-Toe-Game.git synced 2025-10-12 23:52:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Victory actions done

Browse Source
This commit is contained in:
Francisco Pessano
2021-12-27 20:25:33 -03:00
parent 2a866751f9
commit 658c5b2419
8 changed files with 236 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
styles/styles.css
View File

@@ -30,6 +30,8 @@
.player-selection form .player .symbol-input {
margin-top: 1vh;
width: 5vw;
font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
font-weight: bold;
}
.player-selection form .player .symbol-container {
width: 100%;
@@ -119,6 +121,8 @@ emoji-picker {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
z-index: 100;
position: relative;
}
.game .tic-tac-toe .box {
width: 10vw;
@@ -134,6 +138,27 @@ emoji-picker {
align-items: center;
user-select: none;
color: #e7e7e7;
background-color: #dd7979;
}
.game .tic-tac-toe .box.winner-box {
background-color: rgba(255, 255, 255, 0);
}
.game .tic-tac-toe .box.winner-box.black-letters {
color: #303030;
}
.game .background-winner-div {
background-color: rgba(95, 255, 62, 0.692);
position: absolute;
width: 80vw;
height: 80vw;
z-index: 10;
opacity: 0%;
transition: 1s ease-in-out;
}
.game .background-winner-div.show {
opacity: 100%;
transition: 1s ease-in-out;
}
.game .tic-tac-toe .box#box-1 {
@@ -172,14 +197,47 @@ emoji-picker {
}
.game .players-turn {
position: absolute;
top: -30%;
left: -20%;
margin-bottom: 5vh;
margin-left: -3vw;
}
.game .players-turn span {
font-size: 30pt;
font-weight: bold;
color: #e7e7e7;
color: #ffffff;
}
.victory-message {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-weight: bold;
font-size: 30pt;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: #fff;
margin-top: 5vh;
}
.victory-message button {
width: 30vw;
max-width: 330px;
height: 9vw;
max-height: 100px;
background: none;
border: 2px solid #fff;
border-radius: 10px;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 21pt;
font-weight: bold;
margin-top: 3vh;
transition: 0.4s ease-in-out;
}
.victory-message button:hover {
background-color: rgba(0, 0, 0, 0.062);
transition: 0.4s ease-in-out;
}
.victory-message.hidden {
opacity: 0%;
}
@media (max-width: 900px) {