|
2010-02-27
, 20:47
|
|
Posts: 682 |
Thanked: 208 times |
Joined on Jan 2010
@ UK
|
#322
|
|
2010-02-27
, 21:43
|
|
Posts: 1,090 |
Thanked: 476 times |
Joined on Jan 2010
@ Ingolstadt, Germany
|
#323
|
div.Avatar { width: 56px; display: inline-block; vertical-align: top; } .MessageAvatar.Self { margin-top: 4px; margin-right: 0px; width: 80px; height: 80px; -moz-border-radius-bottomleft: 30px; border-width: 2px; border-style: solid; }
div.Avatar { width: 80px; display: inline-block; vertical-align: top; } .MessageAvatar.Self { margin-top: 4px; margin-right: 0px; width: 80px; height: 80px; -moz-border-radius-bottomleft: 30px; border-width: 2px; border-style: solid; }
The Following User Says Thank You to b666m For This Useful Post: | ||
|
2010-02-27
, 21:51
|
|
Posts: 5,339 |
Thanked: 4,133 times |
Joined on Jan 2010
@ Israel
|
#324
|
div and span are for block-building.Code:<div id="MessageTextSelf" class="MessageText Self"></div> <span id="MessageTimeStampSelf" class="MessageTimeStamp SecondaryTextColor Self SmallSystemFont">12:30 PM</span> <span id="MessageDeliveryTimeStampSelf" class="MessageDeliveryTimeStamp SecondaryTextColor Self SmallSystemFont"> | 1:30 PM</span> <div class="MessageRight Self">
div adds a new break (after the /div !!!). span only groups things.
|
2010-02-27
, 22:17
|
|
Posts: 1,090 |
Thanked: 476 times |
Joined on Jan 2010
@ Ingolstadt, Germany
|
#325
|
/** * Style rules for the MessageBuffer */ /** * the body defaults */ body { padding: 0px 16px; margin: 0px; } /** * The table column formats */ div.Message { clear: both; } 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 { 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: 4px 0px 4px -4px; padding: 8px; display: inline-block; min-height: 44px; max-width: 628px; /* overflow: hidden; this bugs mouse events. see bug #123077 */ } div.BubbleOther { 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: 4px -8px 4px 0px; padding: 8px; display: inline-block; min-height: 44px; max-width: 628px; /* overflow: hidden; this bugs mouse events. see bug #123077 */ } div.BubbleSelfClicked { 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: 4px 0px 4px -4px; padding: 8px; display: inline-block; min-height: 44px; max-width: 628px; /* overflow: hidden; this bugs mouse events. see bug #123077 */ } div.BubbleOtherClicked { 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: 4px -8px 4px 0px; padding: 8px; display: inline-block; min-height: 44px; max-width: 628px; /* 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 { margin-top: 4px; margin-right: 0px; width: 60px; height: 60px; -moz-border-radius-bottomleft: 30px; border-width: 2px; border-style: solid; } .MessageAvatar.Other { margin-top: 4px; width: 60px; height: 60px; -moz-border-radius-bottomright: 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; }
|
2010-02-27
, 22:27
|
|
Posts: 1,090 |
Thanked: 476 times |
Joined on Jan 2010
@ Ingolstadt, Germany
|
#326
|
|
2010-02-27
, 22:46
|
|
Posts: 5,339 |
Thanked: 4,133 times |
Joined on Jan 2010
@ Israel
|
#327
|
I played with this option, but I get strange result...
Not only timestamp jumping to another line, but text-line jumping too...
How I can leave a line of text in his place ?
|
2010-02-27
, 23:01
|
|
Posts: 1,090 |
Thanked: 476 times |
Joined on Jan 2010
@ Ingolstadt, Germany
|
#328
|
/** * Style rules for the MessageBuffer */ /** * the body defaults */ body { padding: 0px 16px; margin: 0px; } /** * The table column formats */ div.Message { clear: both; } 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: 45px 0px 4px -23px; padding: 8px; display: inline-block; min-height: 44px; max-width: 628px; /* 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: 45px -23px 4px 0px; padding: 8px; display: inline-block; min-height: 44px; max-width: 628px; /* 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: 45px 0px 4px -23px; padding: 8px; display: inline-block; min-height: 44px; max-width: 628px; /* 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: 45px -23px 4px 0px; padding: 8px; display: inline-block; min-height: 44px; max-width: 628px; /* 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; }
|
2010-02-27
, 23:21
|
|
Posts: 1,090 |
Thanked: 476 times |
Joined on Jan 2010
@ Ingolstadt, Germany
|
#329
|
/** * 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; }
|
2010-02-28
, 03:34
|
Posts: 276 |
Thanked: 109 times |
Joined on Dec 2009
@ Vancouver,Canada / Dubai,UAE
|
#330
|
last tweak for tonight:
feel free to post critique or suggestionsCode:/** * 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; }
... or just have fun with it xD
edit: with 0.8 opacity for the bubbles and bit re-aligned:
Tags |
bada rox, his lunchbox |
|
these gaps are driving me nuts! o.O
i can't see any lines in the code which are causing this "problem"