.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 'intval(@messageAvatarHolder.padding-top) - 1'}px; left: {xen:calc 'intval(@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 'intval(@messageUserText.padding-left) + 6'}px; margin-right: -{xen:calc 'intval(@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>