nbillard/sokoban
1
1
Fork 0
Code Issues Pull requests Releases Wiki Activity

change spiiiich bubble mirror

Browse source
This commit is contained in:
Ronan 2022-12-12 16:16:28 +01:00
parent 6badaced72
commit cfc2e411f7
2 changed files with 13 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
index.html
View file

@ -38,11 +38,12 @@
<canvas id="canvas" width="800" height="400"></canvas>
<div id="tutorial-speech-bubble" class="text-bubble">
<div class="dialog">
<div class="left-point">
</div>
<div class="left-point shifted">
</div>
<p id="tutorial-box" class="speech"></p>
<div class="right-point">
</div>
<div class="right-point shifted">
</div>
</div>
</div>
</div>

17
style.css
View file

@ -63,14 +63,14 @@ footer p:last-child {
/* transform: rotate(90deg); */
position: relative;
margin: auto;
margin-left: 658px;
margin-top: -385px;
margin-left: 185px;
margin-top: -395px;
z-index: 2;
}
.dialog {
height: 200px;
width: 400px;
height: 150px;
width: 350px;
background-color: var(--main-background-color);
position: relative;
border-radius: 10%;
@ -79,7 +79,7 @@ footer p:last-child {
border: 1px solid black;
}
.left-point {
.right-point {
width: 0;
height: 0;
border-left: 1rem solid transparent;
@ -87,19 +87,18 @@ footer p:last-child {
border-top: 5rem solid black;
position: absolute;
margin-top: 30%;
margin-left: -10%;
transform: rotate(60deg) ;
margin-left: 100%;
transform: rotate(-60deg) ;
z-index: -1;
}
.shifted {
transform:rotate(60deg) translate(0px,-2px);
transform:rotate(-60deg) translate(0px,-2px);
border-top: 5rem solid white;
z-index: 4;
}
.speech {
z-index: 3;
margin: auto;