.messageUserInfo
{
@property "messageUserInfo";
float: left;
width: 124px;
@property "/messageUserInfo";
}
.messageUserBlock
{
@property "messageUserBlock";
background: @primaryLighterStill url('@imagePath/xenforo/gradients/tab-selected-light.png') repeat-x bottom;
border: 1px solid @primaryLighterStill;
border-radius: 5px;
@property "/messageUserBlock";
position: relative;
}
.messageUserBlock div.avatarHolder
{
@property "messageAvatarHolder";
background-color: @primaryLightest;
padding: 10px;
border-radius: 4px;
@property "/messageAvatarHolder";
position: relative;
}
.messageUserBlock div.avatarHolder .avatar
{
display: block;
font-size: 0;
}
.messageUserBlock div.avatarHolder .onlineMarker
{
position: absolute;
top: {xen:calc '@messageAvatarHolder.padding-top - 1'}px;
left: {xen:calc '@messageAvatarHolder.padding-right - 1'}px;
@property "messageOnlineMarker";
border: 7px solid transparent;
border-top-color: rgb(127, 185, 0);
border-left-color: rgb(127, 185, 0);
border-top-left-radius: 5px;
border-top-right-radius: 3px;
border-bottom-left-radius: 3px;
@property "/messageOnlineMarker";
}
.messageUserBlock h3.userText
{
@property "messageUserText";
padding: 6px;
@property "/messageUserText";
}
.messageUserBlock .userBanner
{
display: block;
margin-bottom: 5px;
margin-left: -{xen:calc '@messageUserText.padding-left + 6'}px;
margin-right: -{xen:calc '@messageUserText.padding-right + 6'}px;
}
.messageUserBlock .userBanner:last-child
{
margin-bottom: 0;
}
.messageUserBlock a.username
{
@property "messageUsername";
font-weight: bold;
display: block;
overflow: hidden;
line-height: 16px;
@property "/messageUsername";
}
.messageUserBlock .userTitle
{
@property "messageUserTitle";
font-size: 11px;
display: block;
@property "/messageUserTitle";
}
.messageUserBlock .extraUserInfo
{
@property "messageExtraUserInfo";
font-size: 10px;
background-color: @primaryLightest;
padding: 4px 6px;
border-radius: 4px;
@property "/messageExtraUserInfo";
}
.messageUserBlock .extraUserInfo dl
{
margin: 2px 0 0;
}
.messageUserBlock .extraUserInfo img
{
max-width: 100%;
}
.messageUserBlock .arrow
{
position: absolute;
top: 10px;
right: -10px;
display: block;
width: 0px;
height: 0px;
line-height: 0px;
border: 10px solid transparent;
border-left-color: @messageUserBlock.border-color;
-moz-border-left-colors: @messageUserBlock.border-color;
border-right: none;
/* Hide from IE6 */
_display: none;
}
.messageUserBlock .arrow span
{
position: absolute;
top: -10px;
left: -11px;
display: block;
width: 0px;
height: 0px;
line-height: 0px;
border: 10px solid transparent;
border-left-color: @messageAvatarHolder.background-color;
-moz-border-left-colors: @messageAvatarHolder.background-color;
border-right: none;
}
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
.Responsive .messageUserInfo
{
float: none;
width: auto;
}
.Responsive .messageUserBlock
{
overflow: hidden;
margin-bottom: 5px;
position: relative;
}
.Responsive .messageUserBlock div.avatarHolder
{
float: left;
padding: 5px;
}
.Responsive .messageUserBlock div.avatarHolder .avatar img
{
width: 48px;
height: 48px;
}
.Responsive .messageUserBlock div.avatarHolder .onlineMarker
{
top: 4px;
left: 4px;
border-width: 6px;
}
.Responsive .messageUserBlock h3.userText
{
margin-left: 64px;
}
.Responsive .messageUserBlock .userBanner
{
max-width: 150px;
margin-left: 0;
margin-right: 0;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
position: static;
display: inline-block;
}
.Responsive .messageUserBlock .userBanner span
{
display: none;
}
.Responsive .messageUserBlock .extraUserInfo
{
display: none;
}
.Responsive .messageUserBlock .arrow
{
display: none;
}
}
</xen:if>
