/* sidebar structural elements */
.mainContainer
{
float: left;
margin-right: -{xen:calc '@sidebar.width + 10'}px;
width: 100%;
}
.mainContent
{
margin-right: {xen:calc '@sidebar.width + 10'}px;
}
.sidebar
{
float: right;
@property "sidebar";
font-size: 11px;
float: right;
width: 250px;
@property "/sidebar";
}
/* visitor panel */
.sidebar .visitorPanel
{
overflow: hidden; zoom: 1;
}
.sidebar .visitorPanel h2 .muted
{
display: none;
}
.sidebar .visitorPanel .avatar
{
@property "visitorPanelAvatar";
margin-right: 5px;
float: left;
@property "/visitorPanelAvatar";
width: auto;
height: auto;
}
.sidebar .visitorPanel .avatar img
{
width: @visitorPanelAvatar.width;
height: @visitorPanelAvatar.height;
}
.sidebar .visitorPanel .username
{
@property "visitorPanelUsername";
font-weight: bold;
font-size: 11pt;
@property "/visitorPanelUsername";
}
.sidebar .visitorPanel .stats
{
@property "visitorPanelStats";
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-weight: bold;
font-size: @uix_globalFontSize;
font-family: @uix_secondaryFont;
color: @primaryDarker;
background-color: @primaryLighter;
padding: {xen:property uix_gutterWidthSmall}px;
margin: -5px -5px {xen:property uix_gutterWidthSmall}px;
border-radius: @uix_globalBorderRadius;
@uix_secondaryBlock.extra;
text-transform: uppercase;
@property "/sidebarBlockHeading";
}
.sidebar .section .primaryContent h3 a,
.sidebar .section .secondaryContent h3 a
{
@property "sidebarBlockHeading.font";
font-weight: bold;
font-size: @uix_globalFontSize;
font-family: @uix_secondaryFont;
color: @primaryDarker;
@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";
margin: 5px 0;
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";
margin: 10px 30px;
text-align: center;
line-height: 40px;
display: block;
cursor: pointer;
height: 40px;
@property "/signupButton";
}
#SignupButton .inner
{
@property "signupButtonInner";
font-weight: bold;
font-size: @uix_globalLargeFontSize;
font-family: @button.font-family;
color: @textCtrlBackground;
background-color: @uix_secondaryBlock.background-color;
border-radius: @uix_globalBorderRadius;
display: block;
@property "/signupButtonInner";
}
#SignupButton:hover .inner
{
@property "signupButtonHover";
text-decoration: none;
background-color: @secondaryLight;
@property "/signupButtonHover";
}
#SignupButton:active
{
@property "signupButtonActive";
box-shadow: 0 0 3px rgba(0,0,0, 0.2);
position: relative;
top: 2px;
@property "/signupButtonActive";
}
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveWideWidth)
{
.Responsive .mainContainer
{
float: none;
margin-right: 0;
width: auto;
}
.Responsive .mainContent
{
margin-right: 0;
}
.Responsive .sidebar
{
float: none;
margin: 0 auto;
}
.Responsive .sidebar .visitorPanel
{
display: none;
}
}
@media (max-width:340px)
{
.Responsive .sidebar
{
width: 100%;
}
}
</xen:if>