feat: hover pixel qui affiche la desc
This commit is contained in:
gdamms
parent
8422886f91
commit
74a7d01114
|
|
@ -90,124 +90,719 @@
|
||||||
<div class="username">Moi</div>
|
<div class="username">Moi</div>
|
||||||
<div class="description">Petit desc oklm</div>
|
<div class="description">Petit desc oklm</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r0c1">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r0c2">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r0c3">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r0c4">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r0c5">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r0c6">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r0c7">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r0c8">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r0c9">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
</td>
|
</td>
|
||||||
<td class="pixel" id="r0c1"></td>
|
|
||||||
<td class="pixel" id="r0c2"></td>
|
|
||||||
<td class="pixel" id="r0c3"></td>
|
|
||||||
<td class="pixel" id="r0c4"></td>
|
|
||||||
<td class="pixel" id="r0c5"></td>
|
|
||||||
<td class="pixel" id="r0c6"></td>
|
|
||||||
<td class="pixel" id="r0c7"></td>
|
|
||||||
<td class="pixel" id="r0c8"></td>
|
|
||||||
<td class="pixel" id="r0c9"></td>
|
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="pixel" id="r1c0"></td>
|
<td class="pixel" id="r1c0">
|
||||||
<td class="pixel" id="r1c1"></td>
|
<div class="info-pixel">
|
||||||
<td class="pixel" id="r1c2"></td>
|
<div class="username">Moi</div>
|
||||||
<td class="pixel" id="r1c3"></td>
|
<div class="description">Petit desc oklm</div>
|
||||||
<td class="pixel" id="r1c4"></td>
|
</div>
|
||||||
<td class="pixel" id="r1c5"></td>
|
<div class="patch-shadow"></div>
|
||||||
<td class="pixel" id="r1c6"></td>
|
</td>
|
||||||
<td class="pixel" id="r1c7"></td>
|
<td class="pixel" id="r1c1">
|
||||||
<td class="pixel" id="r1c8"></td>
|
<div class="info-pixel">
|
||||||
<td class="pixel" id="r1c9"></td>
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r1c2">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r1c3">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r1c4">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r1c5">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r1c6">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r1c7">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r1c8">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r1c9">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="pixel" id="r2c0"></td>
|
<td class="pixel" id="r2c0">
|
||||||
<td class="pixel" id="r2c1"></td>
|
<div class="info-pixel">
|
||||||
<td class="pixel" id="r2c2"></td>
|
<div class="username">Moi</div>
|
||||||
<td class="pixel" id="r2c3"></td>
|
<div class="description">Petit desc oklm</div>
|
||||||
<td class="pixel" id="r2c4"></td>
|
</div>
|
||||||
<td class="pixel" id="r2c5"></td>
|
<div class="patch-shadow"></div>
|
||||||
<td class="pixel" id="r2c6"></td>
|
</td>
|
||||||
<td class="pixel" id="r2c7"></td>
|
<td class="pixel" id="r2c1">
|
||||||
<td class="pixel" id="r2c8"></td>
|
<div class="info-pixel">
|
||||||
<td class="pixel" id="r2c9"></td>
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r2c2">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r2c3">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r2c4">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r2c5">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r2c6">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r2c7">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r2c8">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r2c9">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="pixel" id="r3c0"></td>
|
<td class="pixel" id="r3c0">
|
||||||
<td class="pixel" id="r3c1"></td>
|
<div class="info-pixel">
|
||||||
<td class="pixel" id="r3c2"></td>
|
<div class="username">Moi</div>
|
||||||
<td class="pixel" id="r3c3"></td>
|
<div class="description">Petit desc oklm</div>
|
||||||
<td class="pixel" id="r3c4"></td>
|
</div>
|
||||||
<td class="pixel" id="r3c5"></td>
|
<div class="patch-shadow"></div>
|
||||||
<td class="pixel" id="r3c6"></td>
|
</td>
|
||||||
<td class="pixel" id="r3c7"></td>
|
<td class="pixel" id="r3c1">
|
||||||
<td class="pixel" id="r3c8"></td>
|
<div class="info-pixel">
|
||||||
<td class="pixel" id="r3c9"></td>
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r3c2">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r3c3">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r3c4">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r3c5">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r3c6">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r3c7">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r3c8">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r3c9">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="pixel" id="r4c0"></td>
|
<td class="pixel" id="r4c0">
|
||||||
<td class="pixel" id="r4c1"></td>
|
<div class="info-pixel">
|
||||||
<td class="pixel" id="r4c2"></td>
|
<div class="username">Moi</div>
|
||||||
<td class="pixel" id="r4c3"></td>
|
<div class="description">Petit desc oklm</div>
|
||||||
<td class="pixel" id="r4c4"></td>
|
</div>
|
||||||
<td class="pixel" id="r4c5"></td>
|
<div class="patch-shadow"></div>
|
||||||
<td class="pixel" id="r4c6"></td>
|
</td>
|
||||||
<td class="pixel" id="r4c7"></td>
|
<td class="pixel" id="r4c1">
|
||||||
<td class="pixel" id="r4c8"></td>
|
<div class="info-pixel">
|
||||||
<td class="pixel" id="r4c9"></td>
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r4c2">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r4c3">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r4c4">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r4c5">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r4c6">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r4c7">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r4c8">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r4c9">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="pixel" id="r5c0"></td>
|
<td class="pixel" id="r5c0">
|
||||||
<td class="pixel" id="r5c1"></td>
|
<div class="info-pixel">
|
||||||
<td class="pixel" id="r5c2"></td>
|
<div class="username">Moi</div>
|
||||||
<td class="pixel" id="r5c3"></td>
|
<div class="description">Petit desc oklm</div>
|
||||||
<td class="pixel" id="r5c4"></td>
|
</div>
|
||||||
<td class="pixel" id="r5c5"></td>
|
<div class="patch-shadow"></div>
|
||||||
<td class="pixel" id="r5c6"></td>
|
</td>
|
||||||
<td class="pixel" id="r5c7"></td>
|
<td class="pixel" id="r5c1">
|
||||||
<td class="pixel" id="r5c8"></td>
|
<div class="info-pixel">
|
||||||
<td class="pixel" id="r5c9"></td>
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r5c2">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r5c3">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r5c4">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r5c5">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r5c6">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r5c7">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r5c8">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r5c9">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="pixel" id="r6c0"></td>
|
<td class="pixel" id="r6c0">
|
||||||
<td class="pixel" id="r6c1"></td>
|
<div class="info-pixel">
|
||||||
<td class="pixel" id="r6c2"></td>
|
<div class="username">Moi</div>
|
||||||
<td class="pixel" id="r6c3"></td>
|
<div class="description">Petit desc oklm</div>
|
||||||
<td class="pixel" id="r6c4"></td>
|
</div>
|
||||||
<td class="pixel" id="r6c5"></td>
|
<div class="patch-shadow"></div>
|
||||||
<td class="pixel" id="r6c6"></td>
|
</td>
|
||||||
<td class="pixel" id="r6c7"></td>
|
<td class="pixel" id="r6c1">
|
||||||
<td class="pixel" id="r6c8"></td>
|
<div class="info-pixel">
|
||||||
<td class="pixel" id="r6c9"></td>
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r6c2">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r6c3">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r6c4">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r6c5">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r6c6">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r6c7">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r6c8">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r6c9">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="pixel" id="r7c0"></td>
|
<td class="pixel" id="r7c0">
|
||||||
<td class="pixel" id="r7c1"></td>
|
<div class="info-pixel">
|
||||||
<td class="pixel" id="r7c2"></td>
|
<div class="username">Moi</div>
|
||||||
<td class="pixel" id="r7c3"></td>
|
<div class="description">Petit desc oklm</div>
|
||||||
<td class="pixel" id="r7c4"></td>
|
</div>
|
||||||
<td class="pixel" id="r7c5"></td>
|
<div class="patch-shadow"></div>
|
||||||
<td class="pixel" id="r7c6"></td>
|
</td>
|
||||||
<td class="pixel" id="r7c7"></td>
|
<td class="pixel" id="r7c1">
|
||||||
<td class="pixel" id="r7c8"></td>
|
<div class="info-pixel">
|
||||||
<td class="pixel" id="r7c9"></td>
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r7c2">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r7c3">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r7c4">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r7c5">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r7c6">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r7c7">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r7c8">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r7c9">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="pixel" id="r8c0"></td>
|
<td class="pixel" id="r8c0">
|
||||||
<td class="pixel" id="r8c1"></td>
|
<div class="info-pixel">
|
||||||
<td class="pixel" id="r8c2"></td>
|
<div class="username">Moi</div>
|
||||||
<td class="pixel" id="r8c3"></td>
|
<div class="description">Petit desc oklm</div>
|
||||||
<td class="pixel" id="r8c4"></td>
|
</div>
|
||||||
<td class="pixel" id="r8c5"></td>
|
<div class="patch-shadow"></div>
|
||||||
<td class="pixel" id="r8c6"></td>
|
</td>
|
||||||
<td class="pixel" id="r8c7"></td>
|
<td class="pixel" id="r8c1">
|
||||||
<td class="pixel" id="r8c8"></td>
|
<div class="info-pixel">
|
||||||
<td class="pixel" id="r8c9"></td>
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r8c2">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r8c3">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r8c4">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r8c5">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r8c6">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r8c7">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r8c8">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r8c9">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="pixel" id="r9c0"></td>
|
<td class="pixel" id="r9c0">
|
||||||
<td class="pixel" id="r9c1"></td>
|
<div class="info-pixel">
|
||||||
<td class="pixel" id="r9c2"></td>
|
<div class="username">Moi</div>
|
||||||
<td class="pixel" id="r9c3"></td>
|
<div class="description">Petit desc oklm</div>
|
||||||
<td class="pixel" id="r9c4"></td>
|
</div>
|
||||||
<td class="pixel" id="r9c5"></td>
|
<div class="patch-shadow"></div>
|
||||||
<td class="pixel" id="r9c6"></td>
|
</td>
|
||||||
<td class="pixel" id="r9c7"></td>
|
<td class="pixel" id="r9c1">
|
||||||
<td class="pixel" id="r9c8"></td>
|
<div class="info-pixel">
|
||||||
<td class="pixel" id="r9c9"></td>
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r9c2">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r9c3">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r9c4">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r9c5">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r9c6">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r9c7">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r9c8">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
|
<td class="pixel" id="r9c9">
|
||||||
|
<div class="info-pixel">
|
||||||
|
<div class="username">Moi</div>
|
||||||
|
<div class="description">Petit desc oklm</div>
|
||||||
|
</div>
|
||||||
|
<div class="patch-shadow"></div>
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,8 @@
|
||||||
|
|
||||||
table {
|
table {
|
||||||
--side: 80px;
|
--side: 80px;
|
||||||
|
--border-width: 3px;
|
||||||
|
border-spacing: 0;
|
||||||
table-layout: fixed;
|
table-layout: fixed;
|
||||||
width: calc(10 * var(--side));
|
width: calc(10 * var(--side));
|
||||||
height: calc(10 * var(--side));
|
height: calc(10 * var(--side));
|
||||||
|
|
@ -17,24 +19,37 @@ table {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
width: var(--side);
|
width: var(--side);
|
||||||
height: var(--side);
|
height: var(--side);
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pixel:hover {
|
.pixel:hover {
|
||||||
box-shadow: 0px 0px 0px 3px #333;
|
box-shadow: 0px 0px 0px var(--border-width) #333;
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
|
||||||
border-spacing: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pixel-description {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-pixel {
|
.info-pixel {
|
||||||
|
display: none;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 200px;
|
width: max-content;
|
||||||
height: 200px;
|
top: var(--side);
|
||||||
|
box-shadow: 0px 0px 0px var(--border-width) #333;
|
||||||
|
background: #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixel:hover .info-pixel {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.patch-shadow {
|
||||||
|
display: none;
|
||||||
|
width: 3px;
|
||||||
|
position: relative;
|
||||||
|
height: var(--side);
|
||||||
left: var(--side);
|
left: var(--side);
|
||||||
|
top: calc(var(--side) / (-2) + var(--border-width));
|
||||||
|
background: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixel:hover .patch-shadow {
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
Loading…
Reference in a new issue