<xen:if is="{$profilePosts}">
<div class="section profilePostList">
<div class="secondaryContent">
<h3><a href="{xen:link find-new/profile-posts}" target="_blank">{xen:phrase new_profile_posts}</a></h3>
<xen:include template="sidebar_profile_post_list" />
</div>
</div>
</xen:if>
/* sidebar structural elements */
.mainContainer
{
float: left;
margin-right: -{xen:calc 'intval(@sidebar.width) + 10'}px;
width: 100%;
}
.mainContent
{
margin-right: {xen:calc 'intval(@sidebar.width) + 10'}px;
}
<xen:if is="(((@uix_offCanvasSidebarRight == 4) OR (@uix_offCanvasSidebarLeft == 4)))">
.mainContent {
margin-left: 0 !important;
margin-right: 0 !important;
}
</xen:if>
html .mainContainer_noSidebar .mainContent {
margin-left: 0;
margin-right: 0;
}
.mainContent.withTransition {
-ms-transition: margin 0.4s ease-out;
-o-transition: margin 0.4s ease-out;
-moz-transition: margin 0.4s ease-out;
-webkit-transition: margin 0.4s ease-out;
transition: margin 0.4s ease-out;
}
.sidebar
{
float: right;
@property "sidebar";
font-size: @uix_globalSmallFontSize;
width: 280px;
@property "/sidebar";
}
/* visitor panel */
.sidebar .visitorPanel
{
overflow: hidden; zoom: 1;
}
.sidebar .visitorPanel h2 .muted
{
display: none;
}
.sidebar .visitorPanel .avatar
{
@property "visitorPanelAvatar";
margin-right: 12px;
@property "/visitorPanelAvatar";
width: auto;
height: auto;
}
.sidebar .visitorPanel .avatar img
{
width: @visitorPanelAvatar.width;
height: @visitorPanelAvatar.height;
}
.sidebar .visitorPanel .username
{
@property "visitorPanelUsername";
font-size: 16px;
color: #fff;
@property "/visitorPanelUsername";
}
.sidebar .visitorPanel .stats
{
@property "visitorPanelStats";
color: @mutedTextColor;
margin-top: 2px;
@property "/visitorPanelStats";
}
.sidebar .visitorPanel .stats .pairsJustified
{
line-height: normal;
}
/* generic sidebar blocks */
.sidebar .section .primaryContent h3,
.sidebar .section .secondaryContent h3,
.profilePage .mast .section.infoBlock h3
{
@property "sidebarBlockHeading";
font-size: 14px;
color: @contentText;
background-color: #fff;
padding: @uix_gutterWidthSmall;
border-width: 0;
border-bottom: 1px solid @primaryLight;
border-radius: @uix_globalBorderRadius;
margin: -@uix_gutterWidthSmall -@uix_gutterWidthSmall @uix_gutterWidthSmall;
@property "/sidebarBlockHeading";
}
.sidebar .section .primaryContent h3 a,
.sidebar .section .secondaryContent h3 a
{
@property "sidebarBlockHeading.font";
font-size: 14px;
color: @contentText;
@property "/sidebarBlockHeading.font";
}
.sidebar .section .secondaryContent .footnote,
.sidebar .section .secondaryContent .minorHeading
{
@property "sidebarBlockFootnote";
color: @mutedTextColor;
margin-top: 5px;
@property "/sidebarBlockFootnote";
}
.sidebar .section .secondaryContent .minorHeading a
{
color: @sidebarBlockFootnote.color;
}
/* list of users with 32px avatars, username and user title */
.sidebar .avatarList li
{
@property "sidebarAvatarListItem";
padding-top: @uix_gutterWidthSmall;
padding-bottom: @uix_gutterWidthSmall;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid @primaryLight;
overflow: hidden;
zoom: 1;
@property "/sidebarAvatarListItem";
}
.sidebar .avatarList .avatar
{
@property "sidebarAvatarListAvatar";
margin-right: 5px;
float: left;
width: 32px;
height: 32px;
@property "/sidebarAvatarListAvatar";
width: auto;
height: auto;
}
.sidebar .avatarList .avatar img
{
width: @sidebarAvatarListAvatar.width;
height: @sidebarAvatarListAvatar.height;
}
.sidebar .avatarList .username
{
@property "sidebarAvatarListUsername";
font-size: 11pt;
margin-top: 2px;
display: block;
@property "/sidebarAvatarListUsername";
}
.sidebar .avatarList .userTitle
{
@property "sidebarAvatarListUserTitle";
color: @mutedTextColor;
@property "/sidebarAvatarListUserTitle";
}
/* list of users */
.sidebar .userList
{
}
.sidebar .userList .username
{
@property "sidebarUserListUsername";
font-size: 11px;
@property "/sidebarUserListUsername";
}
.sidebar .userList .username.invisible
{
@property "sidebarUserListUsernameInvisible";
color: @primaryLightish;
@property "/sidebarUserListUsernameInvisible";
}
.sidebar .userList .username.followed
{
@property "sidebarUserListUsernameFollowed";
@property "/sidebarUserListUsernameFollowed";
}
.sidebar .userList .moreLink
{
display: block;
}
/* people you follow online now */
.followedOnline
{
@property "sidebarFollowedUsers";
margin-top: 3px;
margin-bottom: -5px;
overflow: hidden;
zoom: 1;
@property "/sidebarFollowedUsers";
}
.followedOnline li
{
@property "sidebarFollowedUsersItem";
margin-right: 5px;
margin-bottom: 5px;
float: left;
@property "/sidebarFollowedUsersItem";
}
.followedOnline .avatar
{
@property "sidebarFollowedUsersAvatar";
width: 32px;
height: 32px;
@property "/sidebarFollowedUsersAvatar";
width: auto;
height: auto;
}
.followedOnline .avatar img
{
width: @sidebarFollowedUsersAvatar.width;
height: @sidebarFollowedUsersAvatar.height;
}
/* call to action */
#SignupButton
{
@property "signupButton";
display: inline-block;
line-height: 42px;
cursor: pointer;
outline: 0 none;
height: 42px;
@property "/signupButton";
}
#SignupButton .inner
{
@property "signupButtonInner";
font-size: 13px;
font-family: @uix_primaryFont;
color: @callToActionSpan.color;
background-color: @callToActionSpan.background-color;
padding: 0 16px;
border-radius: 2px;
display: block;
text-align: center;
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
text-transform: uppercase;
font-weight: 500;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),
0 3px 1px -2px rgba(0,0,0,.2),
0 1px 5px 0 rgba(0,0,0,.12);
min-width: 64px;
@property "/signupButtonInner";
}
#SignupButton:hover .inner
{
@property "signupButtonHover";
color: @callToActionSpan.color;
background-color: @callToActionSpan.background-color;
box-shadow: 0 6px 10px 0 rgba(0,0,0,.15),
0 4px 10px 0 rgba(0,0,0,.25),
0 2px 4px -1px rgba(0,0,0,.25);
@property "/signupButtonHover";
}
#SignupButton:active
{
@property "signupButtonActive";
color: @callToActionSpan.color;
background-color: @callToActionSpan.background-color;
box-shadow: 0 6px 10px 0 rgba(0,0,0,.15),
0 4px 10px 0 rgba(0,0,0,.25),
0 2px 4px -1px rgba(0,0,0,.25);
@property "/signupButtonActive";
}
<xen:if is="@enableResponsive">
<xen:if is="@uix_sidebarMaxResponsiveWidth != '100%'">
@media (max-width:@uix_sidebarMaxResponsiveWidth)
{
</xen:if>
.Responsive .mainContainer
{
float: none;
margin-right: 0;
width: auto;
}
.Responsive .mainContent
{
margin-right: 0;
}
.Responsive .sidebar
{
float: none;
margin: 0 auto;
width: auto;
}
.Responsive .mainPanelWrapper .sidebar .visitorPanel
{
display: none;
}
<xen:if is="@uix_sidebarMaxResponsiveWidth != '100%'">
}
</xen:if>
<xen:comment>
@media (max-width:340px)
{
.Responsive .sidebar
{
width: 100%;
}
}
</xen:comment>
</xen:if>