jshiffer/wordle-xdc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

tweak css

Browse Source
This commit is contained in:
Evan You 2022-01-24 09:20:43 +08:00
parent ad3f831936
commit 1261b0f905
1 changed files with 12 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/Game.vue
View File

@ -166,17 +166,12 @@ function shake() {
</header> </header>
<div id="board"> <div id="board">
<div <div
class="row"
v-for="(row, index) in board" v-for="(row, index) in board"
:class="{ shake: shakeRowIndex === index }" :class="['row', shakeRowIndex === index && 'shake']"
> >
<div <div
v-for="(tile, index) in row" v-for="(tile, index) in row"
:class="[ :class="['tile', tile.letter && 'filled', tile.state && 'revealed']"
'tile',
tile.letter ? 'filled' : 'empty',
tile.state && 'revealed'
]"
> >
<div class="front" :style="{ transitionDelay: `${index * 300}ms` }"> <div class="front" :style="{ transitionDelay: `${index * 300}ms` }">
{{ tile.letter }} {{ tile.letter }}
@ -236,10 +231,8 @@ function shake() {
user-select: none; user-select: none;
position: relative; position: relative;
} }
@media (max-height: 680px) { .tile.filled {
.tile { animation: zoom 0.2s;
font-size: 3vh;
}
} }
.tile .front, .tile .front,
.tile .back { .tile .back {
@ -259,17 +252,11 @@ function shake() {
.tile .front { .tile .front {
border: 2px solid #d3d6da; border: 2px solid #d3d6da;
} }
.tile .back {
transform: rotateX(180deg);
}
.tile.filled .front { .tile.filled .front {
border-color: #999; border-color: #999;
} }
.tile.filled { .tile .back {
animation: zoom 0.2s; transform: rotateX(180deg);
}
.tile:not(.empty) {
border: none;
} }
.tile.revealed .front { .tile.revealed .front {
transform: rotateX(180deg); transform: rotateX(180deg);
@ -326,4 +313,10 @@ function shake() {
transform: translate(1px); transform: translate(1px);
} }
} }
@media (max-height: 680px) {
.tile {
font-size: 3vh;
}
}
</style> </style>