ENSEEIHT/projet-application-web
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat: hover pixel qui affiche la desc

Browse source
This commit is contained in:
gdamms 2022-04-29 15:26:39 +02:00
parent 8422886f91
commit 74a7d01114
2 changed files with 720 additions and 110 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

793
src/front/index.html
View file

@ -90,124 +90,719 @@
<div class="username">Moi</div>
<div class="description">Petit desc oklm</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 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>
<td class="pixel" id="r1c0"></td>
<td class="pixel" id="r1c1"></td>
<td class="pixel" id="r1c2"></td>
<td class="pixel" id="r1c3"></td>
<td class="pixel" id="r1c4"></td>
<td class="pixel" id="r1c5"></td>
<td class="pixel" id="r1c6"></td>
<td class="pixel" id="r1c7"></td>
<td class="pixel" id="r1c8"></td>
<td class="pixel" id="r1c9"></td>
<td class="pixel" id="r1c0">
<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="r1c1">
<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="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>
<td class="pixel" id="r2c0"></td>
<td class="pixel" id="r2c1"></td>
<td class="pixel" id="r2c2"></td>
<td class="pixel" id="r2c3"></td>
<td class="pixel" id="r2c4"></td>
<td class="pixel" id="r2c5"></td>
<td class="pixel" id="r2c6"></td>
<td class="pixel" id="r2c7"></td>
<td class="pixel" id="r2c8"></td>
<td class="pixel" id="r2c9"></td>
<td class="pixel" id="r2c0">
<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="r2c1">
<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="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>
<td class="pixel" id="r3c0"></td>
<td class="pixel" id="r3c1"></td>
<td class="pixel" id="r3c2"></td>
<td class="pixel" id="r3c3"></td>
<td class="pixel" id="r3c4"></td>
<td class="pixel" id="r3c5"></td>
<td class="pixel" id="r3c6"></td>
<td class="pixel" id="r3c7"></td>
<td class="pixel" id="r3c8"></td>
<td class="pixel" id="r3c9"></td>
<td class="pixel" id="r3c0">
<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="r3c1">
<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="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>
<td class="pixel" id="r4c0"></td>
<td class="pixel" id="r4c1"></td>
<td class="pixel" id="r4c2"></td>
<td class="pixel" id="r4c3"></td>
<td class="pixel" id="r4c4"></td>
<td class="pixel" id="r4c5"></td>
<td class="pixel" id="r4c6"></td>
<td class="pixel" id="r4c7"></td>
<td class="pixel" id="r4c8"></td>
<td class="pixel" id="r4c9"></td>
<td class="pixel" id="r4c0">
<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="r4c1">
<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="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>
<td class="pixel" id="r5c0"></td>
<td class="pixel" id="r5c1"></td>
<td class="pixel" id="r5c2"></td>
<td class="pixel" id="r5c3"></td>
<td class="pixel" id="r5c4"></td>
<td class="pixel" id="r5c5"></td>
<td class="pixel" id="r5c6"></td>
<td class="pixel" id="r5c7"></td>
<td class="pixel" id="r5c8"></td>
<td class="pixel" id="r5c9"></td>
<td class="pixel" id="r5c0">
<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="r5c1">
<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="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>
<td class="pixel" id="r6c0"></td>
<td class="pixel" id="r6c1"></td>
<td class="pixel" id="r6c2"></td>
<td class="pixel" id="r6c3"></td>
<td class="pixel" id="r6c4"></td>
<td class="pixel" id="r6c5"></td>
<td class="pixel" id="r6c6"></td>
<td class="pixel" id="r6c7"></td>
<td class="pixel" id="r6c8"></td>
<td class="pixel" id="r6c9"></td>
<td class="pixel" id="r6c0">
<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="r6c1">
<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="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>
<td class="pixel" id="r7c0"></td>
<td class="pixel" id="r7c1"></td>
<td class="pixel" id="r7c2"></td>
<td class="pixel" id="r7c3"></td>
<td class="pixel" id="r7c4"></td>
<td class="pixel" id="r7c5"></td>
<td class="pixel" id="r7c6"></td>
<td class="pixel" id="r7c7"></td>
<td class="pixel" id="r7c8"></td>
<td class="pixel" id="r7c9"></td>
<td class="pixel" id="r7c0">
<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="r7c1">
<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="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>
<td class="pixel" id="r8c0"></td>
<td class="pixel" id="r8c1"></td>
<td class="pixel" id="r8c2"></td>
<td class="pixel" id="r8c3"></td>
<td class="pixel" id="r8c4"></td>
<td class="pixel" id="r8c5"></td>
<td class="pixel" id="r8c6"></td>
<td class="pixel" id="r8c7"></td>
<td class="pixel" id="r8c8"></td>
<td class="pixel" id="r8c9"></td>
<td class="pixel" id="r8c0">
<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="r8c1">
<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="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>
<td class="pixel" id="r9c0"></td>
<td class="pixel" id="r9c1"></td>
<td class="pixel" id="r9c2"></td>
<td class="pixel" id="r9c3"></td>
<td class="pixel" id="r9c4"></td>
<td class="pixel" id="r9c5"></td>
<td class="pixel" id="r9c6"></td>
<td class="pixel" id="r9c7"></td>
<td class="pixel" id="r9c8"></td>
<td class="pixel" id="r9c9"></td>
<td class="pixel" id="r9c0">
<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="r9c1">
<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="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>
</table>
</div>

37
src/front/pixels.css
View file

@ -8,6 +8,8 @@
table {
--side: 80px;
--border-width: 3px;
border-spacing: 0;
table-layout: fixed;
width: calc(10 * var(--side));
height: calc(10 * var(--side));
@ -17,24 +19,37 @@ table {
background: #fff;
width: var(--side);
height: var(--side);
display: inline-block;
}
.pixel:hover {
box-shadow: 0px 0px 0px 3px #333;
box-shadow: 0px 0px 0px var(--border-width) #333;
z-index: 5;
}
table {
border-spacing: 0;
}
.pixel-description {
position: absolute;
}
.info-pixel {
display: none;
position: relative;
width: 200px;
height: 200px;
width: max-content;
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);
top: calc(var(--side) / (-2) + var(--border-width));
background: #333;
}
.pixel:hover .patch-shadow {
display: block;
}