| OLD | NEW |
|---|
| (Empty) |
| 1 <style> | |
| 2 body { | |
| 3 font-family: Helvetica, sans-serif; | |
| 4 font-size: 12px; | |
| 5 } | |
| 6 | |
| 7 div { | |
| 8 // outline: 1px solid red; | |
| 9 } | |
| 10 | |
| 11 .message { | |
| 12 position: relative; | |
| 13 vertical-align: bottom; | |
| 14 min-height: 32px; | |
| 15 } | |
| 16 | |
| 17 .message.left { | |
| 18 margin-right: 44px; | |
| 19 text-align: left; | |
| 20 } | |
| 21 | |
| 22 .message.left .bubble { | |
| 23 margin-left: 36px; | |
| 24 } | |
| 25 | |
| 26 .message.right { | |
| 27 margin-left: 44px; | |
| 28 text-align: right; | |
| 29 } | |
| 30 | |
| 31 .message.right .bubble { | |
| 32 margin-right: 36px; | |
| 33 text-align: right; | |
| 34 } | |
| 35 | |
| 36 .message.left .icon { | |
| 37 left: 0; | |
| 38 } | |
| 39 | |
| 40 .message.right .icon { | |
| 41 right: 0; | |
| 42 } | |
| 43 | |
| 44 .message + .message { | |
| 45 margin-top: 4px; | |
| 46 } | |
| 47 | |
| 48 .icon { | |
| 49 -webkit-user-select: none; | |
| 50 position: absolute; | |
| 51 bottom: 0; | |
| 52 } | |
| 53 | |
| 54 .icon.default { | |
| 55 content: url(resources/largePerson.png); | |
| 56 } | |
| 57 | |
| 58 .bubble { | |
| 59 display: inline-block; | |
| 60 border-color: transparent; | |
| 61 border-style: solid; | |
| 62 -webkit-box-sizing: border-box; | |
| 63 -webkit-border-fit: lines; | |
| 64 } | |
| 65 | |
| 66 .message.left .bubble { | |
| 67 border-width: 10px 10px 10px 18px; | |
| 68 -webkit-border-image: url(resources/Balloon_12641896.tiff) 10 10 10 18; | |
| 69 } | |
| 70 | |
| 71 .message.right .bubble { | |
| 72 border-width: 10px 18px 10px 10px; | |
| 73 -webkit-border-image: url(resources/Balloon_8107502.tiff) 10 18 10 10; | |
| 74 } | |
| 75 | |
| 76 .bubble .content { | |
| 77 margin: -5px 0 -4px 0; | |
| 78 } | |
| 79 </style> | |
| 80 | |
| 81 <div class="message left"> | |
| 82 <img class="icon default"> | |
| 83 <div class="bubble"><div class="content">Lorem ipsum dolor sit amet, consectetue
r adipiscing elit. Donec ac odio. Fusce facilisis. Praesent eleifend dapibus mi.
Proin nulla nulla, hendrerit vitae, condimentum non, iaculis sed, sem. Aliquam
a turpis nec ante elementum dignissim. Suspendisse potenti. Suspendisse potenti.
</div></div> | |
| 84 </div> | |
| 85 | |
| 86 <div class="message right"> | |
| 87 <img class="icon default"> | |
| 88 <div class="bubble"><div class="content">Aliquam a turpis nec ante elementum dig
nissim. Suspendisse potenti.</div></div> | |
| 89 </div> | |
| 90 | |
| 91 <div class="message left"> | |
| 92 <img class="icon default"> | |
| 93 <div class="bubble"><div class="content">Lorem ipsum dolor sit amet.</div></div> | |
| 94 </div> | |
| 95 | |
| 96 <div class="message right"> | |
| 97 <img class="icon default"> | |
| 98 <div class="bubble"><div class="content"><div style="display:inline-block; width
:100%; height:100px;background-color:#eeeeee">Look at me, I'm an attachment!</di
v> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ac odio. Fusc
e facilisis. Praesent eleifend dapibus mi. Proin nulla nulla, hendrerit vitae, c
ondimentum non, iaculis sed, sem. Aliquam a turpis nec ante elementum dignissim.
Suspendisse potenti. Suspendisse potenti.</div></div> | |
| 99 </div> | |
| OLD | NEW |
|---|
Chromium Code Reviews
