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> <canvas id="canvas" width="800" height="400"></canvas>
<div id="tutorial-speech-bubble" class="text-bubble"> <div id="tutorial-speech-bubble" class="text-bubble">
<div class="dialog"> <div class="dialog">
<div class="left-point">
</div>
<div class="left-point shifted">
</div>
<p id="tutorial-box" class="speech"></p> <p id="tutorial-box" class="speech"></p>
<div class="right-point">
</div>
<div class="right-point shifted">
</div>
</div> </div>
</div> </div>
</div> </div>

17
style.css
View file

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