| 1 | <style type="text/css">
|
|---|
| 2 |
|
|---|
| 3 | .balloon {
|
|---|
| 4 | width: 75%;
|
|---|
| 5 | position: relative;
|
|---|
| 6 | }
|
|---|
| 7 |
|
|---|
| 8 | .on-left {
|
|---|
| 9 | margin-left: 0;
|
|---|
| 10 | }
|
|---|
| 11 |
|
|---|
| 12 | .on-right {
|
|---|
| 13 | margin-left: 25%;
|
|---|
| 14 | }
|
|---|
| 15 |
|
|---|
| 16 | .balloon .balloon-content {
|
|---|
| 17 | position: relative;
|
|---|
| 18 | padding: 4mm;
|
|---|
| 19 | padding: 4mm;
|
|---|
| 20 | margin-left: 2.8mm;
|
|---|
| 21 | margin-right: 2.8mm;
|
|---|
| 22 | margin-bottom: 4mm;
|
|---|
| 23 | border: 0.1mm solid grey;
|
|---|
| 24 | border-top: none;
|
|---|
| 25 | border-radius: 2mm;
|
|---|
| 26 | text-align: left;
|
|---|
| 27 | color: black;
|
|---|
| 28 | }
|
|---|
| 29 |
|
|---|
| 30 | .balloon .balloon-corner {
|
|---|
| 31 | width: 0;
|
|---|
| 32 | height: 0;
|
|---|
| 33 | border: none;
|
|---|
| 34 | margin: 0;
|
|---|
| 35 | padding: 0;
|
|---|
| 36 | position: absolute;
|
|---|
| 37 | top: 0;
|
|---|
| 38 | }
|
|---|
| 39 |
|
|---|
| 40 | .on-left .balloon-content {
|
|---|
| 41 | background-color: #FEFEFE;
|
|---|
| 42 | border-top-left-radius: 0;
|
|---|
| 43 | }
|
|---|
| 44 |
|
|---|
| 45 | .on-right .balloon-content {
|
|---|
| 46 | background-color: #E2FECB;
|
|---|
| 47 | border-top-right-radius: 0;
|
|---|
| 48 | }
|
|---|
| 49 |
|
|---|
| 50 | .on-left .balloon-corner {
|
|---|
| 51 | border-top: solid 3mm #FEFEFE;
|
|---|
| 52 | border-left: solid 3mm transparent;
|
|---|
| 53 | left: 0;
|
|---|
| 54 | }
|
|---|
| 55 |
|
|---|
| 56 | .on-right .balloon-corner {
|
|---|
| 57 | border-top: solid 3mm #E2FECB;
|
|---|
| 58 | border-right: solid 3mm transparent;
|
|---|
| 59 | right: 0;
|
|---|
| 60 | }
|
|---|
| 61 |
|
|---|
| 62 | .balloon .balloon-status {
|
|---|
| 63 | color: grey;
|
|---|
| 64 | position: absolute;
|
|---|
| 65 | right: 2mm;
|
|---|
| 66 | bottom: 2mm;
|
|---|
| 67 | font-size: 80%
|
|---|
| 68 | }
|
|---|
| 69 |
|
|---|
| 70 | .balloon .balloon-status img {
|
|---|
| 71 | width: 3mm;
|
|---|
| 72 | }
|
|---|
| 73 |
|
|---|
| 74 | </style>
|
|---|
| 75 | <page backcolor="#DDD">
|
|---|
| 76 | <div class="balloon on-right">
|
|---|
| 77 | <div class="balloon-content">
|
|---|
| 78 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacinia lectus ut lobortis vestibulum. In id consectetur enim. Donec eu erat ut magna consectetur vestibulum ac malesuada turpis. Suspendisse turpis risus, feugiat id gravida eu, euismod id orci. Nunc egestas ut erat molestie rutrum. Morbi posuere posuere sapien sed mattis. Fusce dapibus nunc leo, viverra mollis massa varius non. Ut in maximus quam. Aliquam volutpat consectetur odio, sed viverra eros tincidunt non. Ut consequat mi maximus congue faucibus. Morbi id finibus nisi.
|
|---|
| 79 | <div class="balloon-status">10:01 PM <img src="./res/check.png" alt="check" /></div>
|
|---|
| 80 | </div>
|
|---|
| 81 | <div class="balloon-corner"></div>
|
|---|
| 82 | </div>
|
|---|
| 83 | <div class="balloon on-left">
|
|---|
| 84 | <div class="balloon-content">
|
|---|
| 85 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacinia lectus ut lobortis vestibulum. In id consectetur enim. Donec eu erat ut magna consectetur vestibulum ac malesuada turpis. Suspendisse turpis risus, feugiat id gravida eu, euismod id orci. Nunc egestas ut erat molestie rutrum. Morbi posuere posuere sapien sed mattis. Fusce dapibus nunc leo, viverra mollis massa varius non. Ut in maximus quam. Aliquam volutpat consectetur odio, sed viverra eros tincidunt non. Ut consequat mi maximus congue faucibus. Morbi id finibus nisi.
|
|---|
| 86 | <div class="balloon-status">10:02 PM <img src="./res/check.png" alt="check" /></div>
|
|---|
| 87 | </div>
|
|---|
| 88 | <div class="balloon-corner"></div>
|
|---|
| 89 | </div>
|
|---|
| 90 | <div class="balloon on-right">
|
|---|
| 91 | <div class="balloon-content">
|
|---|
| 92 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacinia lectus ut lobortis vestibulum.
|
|---|
| 93 | <div class="balloon-status">10:03 PM</div>
|
|---|
| 94 | </div>
|
|---|
| 95 | <div class="balloon-corner"></div>
|
|---|
| 96 | </div>
|
|---|
| 97 | <div class="balloon on-left">
|
|---|
| 98 | <div class="balloon-content">
|
|---|
| 99 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacinia lectus ut lobortis vestibulum.
|
|---|
| 100 | <div class="balloon-status">10:04 PM</div>
|
|---|
| 101 | </div>
|
|---|
| 102 | <div class="balloon-corner"></div>
|
|---|
| 103 | </div>
|
|---|
| 104 | </page> |
|---|
