manuth/ConnectForce
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Improve the style of the game
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse source
This commit is contained in:
Manuel Thalmann 2022-12-23 16:01:06 +01:00
parent 85d6298bff
commit b1ace6ceb3
No known key found for this signature in database
GPG key ID: 5FD9AD3CCDDBD27B
1 changed files with 50 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
src/styles/style.css
View file

@ -1,23 +1,52 @@
body {
font-family: Arial, Helvetica, sans-serif;
}
button {
padding: 0.5rem;
font-size: 1.3rem;
transition: 0.3s background-color ease-in-out;
background-color: azure;
border: lightblue solid 1px;
border-radius: 4px;
}
button:hover {
background-color: lightblue;
}
button:active {
background-color: rgb(96, 190, 221);
}
div {
box-sizing: border-box;
}
.board {
width: min(84vw, 84vh);
width: 84vmin;
margin: 10px auto;
outline: 1px solid black;
}
.board .field {
border: 1px solid black;
width: min(12vw, 12vh);
height: min(12vw, 12vh);
width: 12vmin;
height: 12vmin;
display: flex;
align-items: center;
justify-content: center;
float: left;
}
.game.winner.r .board, .game.winner.r .log {
background-color: pink;
}
.game.winner.b .board, .game.winner.b .log {
background-color: lightblue;
}
.board .row .field:first-child {
clear: both;
}
@ -35,3 +64,21 @@ div {
.board .field .red {
background-color: red;
}
.log {
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
}
.game.winner .log {
font-size: 3rem;
}
.game .menu-bar {
text-align: center;
}
.game .menu-bar button {
margin: 0 5px 5px 0;
}