176 lines
3.5 KiB
CSS
176 lines
3.5 KiB
CSS
/*---[ MAIN ]---*/
|
|
*, *::after, *::before {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--cell-size: 100px;
|
|
--mark-size: calc(var(--cell-size) * .9);
|
|
--background-color: black;
|
|
--main-color: white;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background-color: var(--background-color);
|
|
}
|
|
|
|
/*---[ Winner message ]---*/
|
|
.winner {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, .9);
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: var(--main-color);
|
|
font-size: 5rem;
|
|
font-family: Arial, sans-serif;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.winner button {
|
|
font-size: 3rem;
|
|
background-color: var(--background-color);
|
|
color: var(--main-color);
|
|
border: 1px solid var(--main-color);
|
|
padding: .25em .5em;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.winner button:hover {
|
|
background-color: var(--main-color);
|
|
color: var(--background-color);
|
|
border-color: var(--background-color);
|
|
}
|
|
|
|
.winner.show {
|
|
display: flex;
|
|
}
|
|
|
|
/*---[ Board styling ]---*/
|
|
.board {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
display: grid;
|
|
justify-content: center;
|
|
align-content: center;
|
|
justify-items: center;
|
|
align-items: center;
|
|
grid-template-columns: repeat(3, auto);
|
|
}
|
|
|
|
/*---[ Cell styling ]---*/
|
|
.cell {
|
|
width: var(--cell-size);
|
|
height: var(--cell-size);
|
|
justify-content: center;
|
|
align-items: center;
|
|
display: flex;
|
|
background-color: var(--background-color);
|
|
border: 2px solid var(--main-color);
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.cell.x,
|
|
.cell.o {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/*---[ Remove edge border for edge cells ]---*/
|
|
.cell:nth-child(1),
|
|
.cell:nth-child(2),
|
|
.cell:nth-child(3) {
|
|
border-top: none;
|
|
}
|
|
|
|
.cell:nth-child(1),
|
|
.cell:nth-child(4),
|
|
.cell:nth-child(7) {
|
|
border-left: none;
|
|
}
|
|
|
|
.cell:nth-child(3),
|
|
.cell:nth-child(6),
|
|
.cell:nth-child(9) {
|
|
border-right: none;
|
|
}
|
|
|
|
.cell:nth-child(7),
|
|
.cell:nth-child(8),
|
|
.cell:nth-child(9) {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/*---[ X ]---*/
|
|
.cell.x::before,
|
|
.cell.x::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: calc(var(--mark-size) * .1);
|
|
height: var(--mark-size);
|
|
background-color: var(--main-color);
|
|
}
|
|
|
|
.board.x .cell:not(.x):not(.o):hover::before,
|
|
.board.x .cell:not(.x):not(.o):hover::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: calc(var(--mark-size) * .1);
|
|
height: var(--mark-size);
|
|
background-color: dimgray;
|
|
}
|
|
|
|
.cell.x::before,
|
|
.board.x .cell:hover::before {
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.cell.x::after,
|
|
.board.x .cell:hover::after {
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
/*---[ O ]---*/
|
|
.cell.o::before,
|
|
.cell.o::after {
|
|
content: '';
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
width: var(--mark-size);
|
|
height: var(--mark-size);
|
|
background-color: var(--main-color);
|
|
}
|
|
|
|
.board.o .cell:not(.x):not(.o):hover::before,
|
|
.board.o .cell:not(.x):not(.o):hover::after {
|
|
content: '';
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
width: var(--mark-size);
|
|
height: var(--mark-size);
|
|
background-color: dimgray;
|
|
}
|
|
|
|
.cell.o::before {
|
|
height: calc(var(--mark-size) * .9);
|
|
width: calc(var(--mark-size) * .9);
|
|
background-color: var(--main-color);
|
|
}
|
|
|
|
.board.o .cell:not(.x):not(.o):hover::before {
|
|
height: calc(var(--mark-size) * .9);
|
|
width: calc(var(--mark-size) * .9);
|
|
background-color: dimgray;
|
|
}
|
|
|
|
.cell.o::after,
|
|
.board.o .cell:not(.x):not(.o):hover::after{
|
|
height: calc(var(--mark-size) * .69);
|
|
width: calc(var(--mark-size) *.69);
|
|
background-color: var(--background-color);
|
|
}
|