82 lines
1.2 KiB
CSS
82 lines
1.2 KiB
CSS
:root {
|
|
--color-primary: #4CAF50;;
|
|
--color-primary-darken: #F5DF50;
|
|
--color-primary-lighten: #0f0d11;
|
|
--color-success: #50b154;
|
|
--color-error: #ff5252;
|
|
}
|
|
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
|
|
.ttt-game {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: auto;
|
|
width: 13rem;
|
|
}
|
|
|
|
.ttt-player-icon {
|
|
color: var(--color-primary-darken);
|
|
width: 1.2rem;
|
|
height: 1.2rem;
|
|
}
|
|
|
|
.ttt-player-icon--hidden {
|
|
display: none;
|
|
}
|
|
|
|
.ttt-score {
|
|
color: var(--color-primary);
|
|
padding: .3rem;
|
|
}
|
|
|
|
.ttt-grid {
|
|
background: var(--color-primary-lighten);
|
|
border-radius: 4px;
|
|
line-height: 0;
|
|
margin: auto;
|
|
width: 6rem;
|
|
}
|
|
|
|
.ttt-cell {
|
|
border: 1px solid var(--color-primary);
|
|
border-width: 1px 0 0 1px;
|
|
display: inline-block;
|
|
padding: .2rem;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
}
|
|
|
|
.ttt-row:first-child .ttt-cell {
|
|
border-top: none;
|
|
}
|
|
|
|
.ttt-cell:first-child {
|
|
border-left: none;
|
|
}
|
|
|
|
.ttt-icon {
|
|
display: none;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.ttt-cell .ttt-icon {
|
|
color: var(--color-primary-darken);
|
|
display: block;
|
|
}
|
|
|
|
.ttt-blink .ttt-icon {
|
|
animation: blink 250ms step-end 0s 3;
|
|
|
|
@keyframes blink {
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|