Originally Posted by b666m

last tweak for tonight:

Code:

/**
 * Style rules for the MessageBuffer
 */

/**
 * the body defaults
 */
body {
  padding: 0px 16px;
  margin: 0px;
}

/**
 * The table column formats
 */

div.Message {
  clear: both;
  margin-top: -22px;
}

div.Message.Self {
  float: left;
}

div.Message.Other {
  float: right; 
}

div.Message:first-child {
  padding-top: 0px;
}

div.Message:last-child {
  padding-bottom: 0px;
}

div.BubbleSelf {
  position: relative;
  z-index: 2;

  background: #600000;

  text-shadow:black 3px 2px 5px;



  -moz-border-radius-topright: 30px;
  -moz-border-radius-bottomright: 30px;
  -moz-border-radius-bottomleft: 30px;

  border-style: solid;

  border-width: 2px;

  margin: 35px 0px 4px -15px;
  padding: 8px;

  display: inline-block;
  min-height: 44px;  
  max-width: 636px;
  /* overflow: hidden; this bugs mouse events. see bug #123077 */
}

div.BubbleOther {
  position: relative;
  z-index: 2;

  background: #2F4F4F;

  text-shadow:black 3px 2px 5px;



  -moz-border-radius-topleft: 30px;
  -moz-border-radius-bottomleft: 30px;
  -moz-border-radius-bottomright: 30px;

  border-style: solid;

  border-width: 2px;
  
  margin: 35px -19px 4px 0px;
  padding: 8px;
  
  display: inline-block;
  min-height: 44px;
  max-width: 636px;
  /* overflow: hidden; this bugs mouse events. see bug #123077 */
}

div.BubbleSelfClicked {
  position: relative;
  z-index: 2;

  text-shadow:black 3px 2px 5px;



  -moz-border-radius-topright: 30px;
  -moz-border-radius-bottomright: 30px;
  -moz-border-radius-bottomleft: 30px;

  border-style: solid;

  border-width: 2px;

  margin: 35px 0px 4px -15px;
  padding: 8px;

  display: inline-block;
  min-height: 44px;
  max-width: 636px;
 /* overflow: hidden; this bugs mouse events. see bug #123077 */
}


div.BubbleOtherClicked {
  position: relative;
  z-index: 2;

  text-shadow:black 3px 2px 5px;



  -moz-border-radius-topleft: 30px;
  -moz-border-radius-bottomleft: 30px;
  -moz-border-radius-bottomright: 30px;

  border-style: solid;

  border-width: 2px;
  
  margin: 35px -19px 4px 0px;
  padding: 8px;
  
  display: inline-block;
  min-height: 44px;
  max-width: 636px;
  /* overflow: hidden; this bugs mouse events. see bug #123077 */
}

/**
 * Others' Avatars
 *
 * This needs a "drop down" shadow, but no idea if that can be done
 *Adele: please note that this drop down shadow might be subjected to change
 *I've talked about it with Vilja who's in charge of address book layout
 *and we might change it so that it's a double border colour to indicate
 *that the avatar is clickable. drop shawdow doesn't seem to work with
 *dark backgrounds unless it's a light colour drop shadow.
 *PLEASE tell me if it's difficult to implement the drop shadow.
 * Looks like drop shadow is dropped from ui specs. And bug 139130 made me
 *remove the space for it anyway.
 */

div.Avatar {
  width: 60px;
  display: inline-block;
  vertical-align: top;
}

.MessageAvatar.Self {
  position: relative;
  z-index: 1;
  margin-top: 4px;
  margin-right: 0px;
  width: 60px;
  height: 60px;

  -moz-border-radius-topleft: 30px;
  -moz-border-radius-topright: 30px;
  -moz-border-radius-bottomleft: 30px;
  -moz-border-radius-bottomright: 30px;

  border-width: 2px;

  border-style: solid;

}

.MessageAvatar.Other {
  position: relative;
  z-index: 1;
  margin-top: 4px;
  width: 60px;
  height: 60px;

  -moz-border-radius-topright: 30px;
  -moz-border-radius-topleft: 30px;
  -moz-border-radius-bottomright: 30px;
  -moz-border-radius-bottomleft: 30px;

  border-width: 2px;

  border-style: solid;

}

img.MessagePresence {
  vertical-align: middle;
  width: 16px;
  height: 16px;
}

/**
 * the Name field
 */
span.MessageNameField {
  word-wrap: break-word;
  vertical-align: middle;
}

/**
 * the Text field
 */
span.MessageText.Self {
  text-align: left;
  vertical-align: middle;
  word-wrap: break-word;
}

span.MessageText.Other {
  text-align: right;
  vertical-align: middle; 
  word-wrap: break-word;
}

/**
 * the TimeStamp default rules
 */
div.MessageRight {
  float: right;
  margin-left: 8px;
  white-space: nowrap;
  text-align: right;
  display: inline-block;
}

img.MessageBusinessCardImg {
  vertical-align: middle;
}

img.MessageStatusImg {
  vertical-align: middle;
}

.MessagingWidgetsSmiley {
  height: 24px;
  width: 24px;
}

feel free to post critique or suggestions

... or just have fun with it xD




edit: with 0.8 opacity for the bubbles and bit re-aligned: