+{capture assign='__userProfileDescription'}
+ <ul class="inlineList commaSeparated">
+ {if $user->isVisibleOption('gender') && $user->gender}<li>{lang}wcf.user.gender.{if $user->gender == 1}male{else}female{/if}{/lang}</li>{/if}
+ {if $user->isVisibleOption('birthday') && $user->getAge()}<li>{@$user->getAge()}</li>{/if}
+ {if $user->isVisibleOption('location') && $user->location}<li>{lang}wcf.user.membersList.location{/lang}</li>{/if}
+ {if $user->getOldUsername()}<li>{lang}wcf.user.profile.oldUsername{/lang}</li>{/if}
+ <li>{lang}wcf.user.membersList.registrationDate{/lang}</li>
+ {event name='userDataRow1'}
+ </ul>
+
+ {if $user->canViewOnlineStatus() && $user->getLastActivityTime()}
+ <ul class="inlineList commaSeparated">
+ <li>{lang}wcf.user.usersOnline.lastActivity{/lang}: {@$user->getLastActivityTime()|time}</li>
+ {if $user->getCurrentLocation()}<li>{@$user->getCurrentLocation()}</li>{/if}
+ </ul>
+ {/if}
+{/capture}
+
<div class="box userProfileHeader">
<div class="boxContent">
- <div class="userProfileCoverPhoto"></div>
-
- <div class="userProfileUser"{if $isAccessible}
- data-object-id="{@$user->userID}"
- {if $__wcf->session->getPermission('admin.user.canBanUser')}
- data-banned="{@$user->banned}"
- {/if}
- {if $__wcf->session->getPermission('admin.user.canDisableAvatar')}
- data-disable-avatar="{@$user->disableAvatar}"
- {/if}
- {if $__wcf->session->getPermission('admin.user.canDisableSignature')}
- data-disable-signature="{@$user->disableSignature}"
- {/if}
- {/if}>
+ <div class="userProfileHeaderContainer">
+ <div class="userProfileCoverPhoto"></div>
- <div class="layoutBoundary">
- <header class="contentHeader">
- {if $user->userID == $__wcf->user->userID}
- <a href="{link controller='AvatarEdit'}{/link}" class="contentHeaderIcon jsTooltip" title="{lang}wcf.user.avatar.edit{/lang}">{@$user->getAvatar()->getImageTag(128)}</a>
- {else}
- <span class="contentHeaderIcon">{@$user->getAvatar()->getImageTag(128)}</span>
- {/if}
-
- <div class="contentHeaderTitle">
- <h1 class="contentTitle">
- {$user->username}{if $user->banned} <span class="icon icon16 fa-lock jsTooltip jsUserBanned" title="{lang}wcf.user.banned{/lang}"></span>{/if}
- </h1>
- {if MODULE_USER_RANK}
- {if $user->getUserTitle()}
- <span class="badge userTitleBadge{if $user->getRank() && $user->getRank()->cssClassName} {@$user->getRank()->cssClassName}{/if}">{$user->getUserTitle()}</span>
- {/if}
- {if $user->getRank() && $user->getRank()->rankImage}
- <span class="userRankImage">{@$user->getRank()->getImage()}</span>
- {/if}
+ <div class="userProfileUser"{if $isAccessible}
+ data-object-id="{@$user->userID}"
+ {if $__wcf->session->getPermission('admin.user.canBanUser')}
+ data-banned="{@$user->banned}"
+ {/if}
+ {if $__wcf->session->getPermission('admin.user.canDisableAvatar')}
+ data-disable-avatar="{@$user->disableAvatar}"
+ {/if}
+ {if $__wcf->session->getPermission('admin.user.canDisableSignature')}
+ data-disable-signature="{@$user->disableSignature}"
+ {/if}
+ {/if}>
+
+ <div class="layoutBoundary">
+ <header class="contentHeader">
+ {if $user->userID == $__wcf->user->userID}
+ <a href="{link controller='AvatarEdit'}{/link}" class="contentHeaderIcon jsTooltip" title="{lang}wcf.user.avatar.edit{/lang}">{@$user->getAvatar()->getImageTag(160)}</a>
+ {else}
+ <span class="contentHeaderIcon">{@$user->getAvatar()->getImageTag(160)}</span>
{/if}
- </div>
-
- <ul class="userProfileButtonContainer">
- {hascontent}
- <li>
- <a class="jsTooltip" title="{lang}wcf.user.profile.customization{/lang}"><span class="icon icon32 fa-pencil"></span> <span class="invisible">{lang}wcf.user.profile.customization{/lang}</span></a>
- <ul class="userProfileButtonMenu" data-menu="customization">
- {content}
- {event name='menuCustomization'}
-
- {if $user->userID == $__wcf->user->userID}
- <li><a href="{link controller='AvatarEdit'}{/link}">{lang}wcf.user.avatar.edit{/lang}</a></li>
- {/if}
-
- <li><a href="#" class="jsButtonEditCoverPhoto">todo: edit cover photo</a></li>
-
- {if $user->canEdit() || ($__wcf->getUser()->userID == $user->userID && $user->canEditOwnProfile())}
- <li class="divider"><a href="#" class="jsButtonEditProfile">{lang}wcf.user.editProfile{/lang}</a></li>
- {/if}
- {/content}
- </ul>
- </li>
- {/hascontent}
- <li>
- <a class="jsTooltip" title="{lang}wcf.user.profile.user{/lang}"><span class="icon icon32 fa-user"></span> <span class="invisible">{lang}wcf.user.profile.dropdown.interaction{/lang}</span></a>
- <ul class="userProfileButtonMenu" data-menu="interaction">
- {event name='menuInteraction'}
-
- {if $user->userID != $__wcf->user->userID}
- {if $user->isAccessible('canViewEmailAddress') || $__wcf->session->getPermission('admin.user.canEditMailAddress')}
- <li><a href="mailto:{@$user->getEncodedEmail()}">{lang}wcf.user.button.mail{/lang}</a></li>
- {elseif $user->isAccessible('canMail') && $__wcf->session->getPermission('user.profile.canMail')}
- <li><a href="{link controller='Mail' object=$user}{/link}">{lang}wcf.user.button.mail{/lang}</a></li>
- {/if}
+ <div class="contentHeaderTitle">
+ <h1 class="contentTitle">
+ {$user->username}{if $user->banned} <span class="icon icon16 fa-lock jsTooltip jsUserBanned" title="{lang}wcf.user.banned{/lang}"></span>{/if}
+ </h1>
+ {if MODULE_USER_RANK}
+ {if $user->getUserTitle()}
+ <span class="badge userTitleBadge{if $user->getRank() && $user->getRank()->cssClassName} {@$user->getRank()->cssClassName}{/if}">{$user->getUserTitle()}</span>
{/if}
-
- {if $__wcf->session->getPermission('user.profile.canReportContent')}
- <li class="jsReportUser divider" data-object-id="{@$user->userID}"><a href="#">{lang}wcf.user.profile.report{/lang}</a></li>
+ {if $user->getRank() && $user->getRank()->rankImage}
+ <span class="userRankImage">{@$user->getRank()->getImage()}</span>
{/if}
- </ul>
- </li>
-
- {hascontent}
- <li>
- <a class="jsTooltip" title="{lang}wcf.user.searchUserContent{/lang}"><span class="icon icon32 fa-search"></span> <span class="invisible">{lang}wcf.user.searchUserContent{/lang}</span></a>
- <ul class="userProfileButtonMenu" data-menu="search">
- {content}{event name='menuSearch'}{/content}
- </ul>
- </li>
- {/hascontent}
-
- {hascontent}
- <li>
- <a class="jsTooltip" title="{lang}wcf.user.profile.management{/lang}"><span class="icon icon32 fa-cog"></span> <span class="invisible">{lang}wcf.user.profile.dropdown.management{/lang}</span></a>
- <ul class="userProfileButtonMenu" data-menu="management">
- {content}
- {if $isAccessible && $__wcf->user->userID != $user->userID && ($__wcf->session->getPermission('admin.user.canBanUser') || $__wcf->session->getPermission('admin.user.canDisableAvatar') || $__wcf->session->getPermission('admin.user.canDisableSignature') || ($__wcf->session->getPermission('admin.general.canUseAcp') && $__wcf->session->getPermission('admin.user.canEditUser')){event name='moderationDropdownPermissions'})}
- <li><a href="{link controller='UserEdit' object=$user isACP=true}{/link}" class="jsUserInlineEditor">{lang}wcf.user.moderate{/lang}</a></li>
- {/if}
-
- {event name='menuManagement'}
- {/content}
- </ul>
- </li>
- {/hascontent}
+ {/if}
+ <div class="contentDescription">
+ {@$__userProfileDescription}
+ </div>
+ </div>
- {event name='buttonMenu'}
- </ul>
- </header>
+ <ul class="userProfileButtonContainer">
+ {hascontent}
+ <li>
+ <a class="jsTooltip" title="{lang}wcf.user.profile.customization{/lang}"><span class="icon icon32 fa-pencil"></span> <span class="invisible">{lang}wcf.user.profile.customization{/lang}</span></a>
+ <ul class="userProfileButtonMenu" data-menu="customization">
+ {content}
+ {event name='menuCustomization'}
+
+ {if $user->userID == $__wcf->user->userID}
+ <li><a href="{link controller='AvatarEdit'}{/link}">{lang}wcf.user.avatar.edit{/lang}</a></li>
+ {/if}
+
+ <li><a href="#" class="jsButtonEditCoverPhoto">todo: edit cover photo</a></li>
+
+ {if $user->canEdit() || ($__wcf->getUser()->userID == $user->userID && $user->canEditOwnProfile())}
+ <li class="divider"><a href="#" class="jsButtonEditProfile">{lang}wcf.user.editProfile{/lang}</a></li>
+ {/if}
+ {/content}
+ </ul>
+ </li>
+ {/hascontent}
+
+ {hascontent}
+ <li>
+ <a class="jsTooltip" title="{lang}wcf.user.profile.user{/lang}"><span class="icon icon32 fa-user"></span> <span class="invisible">{lang}wcf.user.profile.dropdown.interaction{/lang}</span></a>
+ <ul class="userProfileButtonMenu" data-menu="interaction">
+ {content}
+ {event name='menuInteraction'}
+
+ {if $user->userID != $__wcf->user->userID}
+ {if $user->isAccessible('canViewEmailAddress') || $__wcf->session->getPermission('admin.user.canEditMailAddress')}
+ <li><a href="mailto:{@$user->getEncodedEmail()}">{lang}wcf.user.button.mail{/lang}</a></li>
+ {elseif $user->isAccessible('canMail') && $__wcf->session->getPermission('user.profile.canMail')}
+ <li><a href="{link controller='Mail' object=$user}{/link}">{lang}wcf.user.button.mail{/lang}</a></li>
+ {/if}
+ {/if}
+
+ {if $user->userID != $__wcf->user->userID && $__wcf->session->getPermission('user.profile.canReportContent')}
+ <li class="jsReportUser divider" data-object-id="{@$user->userID}"><a href="#">{lang}wcf.user.profile.report{/lang}</a></li>
+ {/if}
+ {/content}
+ </ul>
+ </li>
+ {/hascontent}
+
+ {hascontent}
+ <li>
+ <a class="jsTooltip" title="{lang}wcf.user.searchUserContent{/lang}"><span class="icon icon32 fa-search"></span> <span class="invisible">{lang}wcf.user.searchUserContent{/lang}</span></a>
+ <ul class="userProfileButtonMenu" data-menu="search">
+ {content}{event name='menuSearch'}{/content}
+ </ul>
+ </li>
+ {/hascontent}
+
+ {hascontent}
+ <li>
+ <a class="jsTooltip" title="{lang}wcf.user.profile.management{/lang}"><span class="icon icon32 fa-cog"></span> <span class="invisible">{lang}wcf.user.profile.dropdown.management{/lang}</span></a>
+ <ul class="userProfileButtonMenu" data-menu="management">
+ {content}
+ {if $isAccessible && $__wcf->user->userID != $user->userID && ($__wcf->session->getPermission('admin.user.canBanUser') || $__wcf->session->getPermission('admin.user.canDisableAvatar') || $__wcf->session->getPermission('admin.user.canDisableSignature') || ($__wcf->session->getPermission('admin.general.canUseAcp') && $__wcf->session->getPermission('admin.user.canEditUser')){event name='moderationDropdownPermissions'})}
+ <li><a href="{link controller='UserEdit' object=$user isACP=true}{/link}" class="jsUserInlineEditor">{lang}wcf.user.moderate{/lang}</a></li>
+ {/if}
+
+ {event name='menuManagement'}
+ {/content}
+ </ul>
+ </li>
+ {/hascontent}
+
+ {event name='buttonMenu'}
+ </ul>
+ </header>
+ </div>
</div>
</div>
- <div class="userProfileDetails">
+
+ <div class="userProfileDescriptionMobile">
<div class="layoutBoundary">
- <ul class="inlineList commaSeparated">
- {if $user->isVisibleOption('gender') && $user->gender}<li>{lang}wcf.user.gender.{if $user->gender == 1}male{else}female{/if}{/lang}</li>{/if}
- {if $user->isVisibleOption('birthday') && $user->getAge()}<li>{@$user->getAge()}</li>{/if}
- {if $user->isVisibleOption('location') && $user->location}<li>{lang}wcf.user.membersList.location{/lang}</li>{/if}
- {if $user->getOldUsername()}<li>{lang}wcf.user.profile.oldUsername{/lang}</li>{/if}
- <li>{lang}wcf.user.membersList.registrationDate{/lang}</li>
- {event name='userDataRow1'}
- </ul>
-
- {if $user->canViewOnlineStatus() && $user->getLastActivityTime()}
- <ul class="inlineList commaSeparated">
- <li>{lang}wcf.user.usersOnline.lastActivity{/lang}: {@$user->getLastActivityTime()|time}</li>
- {if $user->getCurrentLocation()}<li>{@$user->getCurrentLocation()}</li>{/if}
- </ul>
- {/if}
-
- {hascontent}
- <dl class="plain inlineDataList">
+ {@$__userProfileDescription}
+ </div>
+ </div>
+
+ {hascontent}
+ <div class="userProfileDetails">
+ <div class="layoutBoundary">
+ <ul class="userStats">
{content}
- {event name='statistics'}
-
- {if MODULE_LIKE && $user->likesReceived}
- <dt>{if !$user->isProtected()}<a href="{link controller='User' object=$user}{/link}#likes" class="jsTooltip" title="{lang}wcf.like.showLikesReceived{/lang}">{lang}wcf.like.likesReceived{/lang}</a>{else}{lang}wcf.like.likesReceived{/lang}{/if}</dt>
- <dd>{#$user->likesReceived}</dd>
- {/if}
-
- {if $user->activityPoints}
- <dt><a href="#" class="activityPointsDisplay jsTooltip" title="{lang}wcf.user.activityPoint.showActivityPoints{/lang}" data-user-id="{@$user->userID}">{lang}wcf.user.activityPoint{/lang}</a></dt>
- <dd>{#$user->activityPoints}</dd>
- {/if}
-
- {if $user->profileHits}
- <dt>{lang}wcf.user.profileHits{/lang}</dt>
- <dd{if $user->getProfileAge() > 1} title="{lang}wcf.user.profileHits.hitsPerDay{/lang}"{/if}>{#$user->profileHits}</dd>
- {/if}
+ {event name='statistics'}
+
+ {if MODULE_LIKE && $user->likesReceived}
+ <li>
+ {if !$user->isProtected()}<a href="{link controller='User' object=$user}{/link}#likes" class="jsTooltip" title="{lang}wcf.like.showLikesReceived{/lang}">{/if}
+ <span class="userStatsValue">{@$user->likesReceived|shortUnit}</span>
+ <span class="userStatsTitle">{lang}wcf.like.likesReceived{/lang}</span>
+ {if !$user->isProtected()}</a>{/if}
+ </li>
+ {/if}
+
+ {if $user->activityPoints}
+ <li>
+ <a href="#" class="activityPointsDisplay jsTooltip" title="{lang}wcf.user.activityPoint.showActivityPoints{/lang}" data-user-id="{@$user->userID}">
+ <span class="userStatsValue">{@$user->activityPoints|shortUnit}</span>
+ <span class="userStatsTitle">{lang}wcf.user.activityPoint{/lang}</span>
+ </a>
+ </li>
+ {/if}
+
+ {if $user->profileHits}
+ <li{if $user->getProfileAge() > 1} title="{lang}wcf.user.profileHits.hitsPerDay{/lang}"{/if}>
+ <span class="userStatsValue">{@$user->profileHits|shortUnit}</span>
+ <span class="userStatsTitle">{lang}wcf.user.profileHits{/lang}</span>
+ </li>
+ {/if}
{/content}
- </dl>
- {/hascontent}
+ </ul>
+ </div>
</div>
- </div>
+ {/hascontent}
</div>
-
</div>
box-shadow: inset 0 10px 10px -10px rgba(0, 0, 0, .6), inset 0 -10px 10px -10px rgba(0, 0, 0, .6);
@include screen-md-up {
- height: 200px;
+ height: 300px;
}
@include screen-sm-down {
- height: 100px;
+ height: 200px;
}
-}
-
-.userProfileUser {
- background-color: $wcfHeaderMenuBackground;
- > .layoutBoundary {
- align-items: center;
- display: flex;
- padding: 0 10px 0 160px;
- position: relative;
+ &::after {
+ bottom: 0;
+ content: '';
+ left: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+
+ @include screen-md-up {
+ background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .7) 100%);
+ }
@include screen-sm-down {
- padding-left: 90px;
+ background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, .7) 100%);
}
}
+}
+
+.userProfileHeaderContainer {
+ position: relative;
+}
+
+.userProfileUser {
+ position: absolute;
+ width: 100%;
+
+ @include screen-md-up {
+ bottom: 0;
+ }
+
+ @include screen-sm-down {
+ bottom: 10px;
+ }
.contentHeader {
- align-items: center;
- color: $wcfHeaderText;
- width: 100%;
+ @include screen-md-up {
+ align-items: flex-end;
+ }
+
+ @include screen-sm-down {
+ align-items: center;
+ display: flex;
+ }
}
.contentHeaderIcon {
- background-color: $wcfHeaderMenuBackground;
+ align-items: center;
+ background-color: #fff;
border-radius: 50%;
- left: 0;
- padding: 10px;
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
+ box-sizing: content-box;
+ box-shadow: 0 3px 6px rgba(0 ,0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+ display: flex;
+ justify-content: center;
+
+ @include screen-md-up {
+ border: 4px solid transparent;
+ flex: 0 0 160px;
+ height: 160px;
+ margin-right: 20px;
+ transform: translateY(50%);
+ width: 160px;
+ }
@include screen-sm-down {
- .userAvatarImage {
- height: 64px !important;
+ border: 2px solid transparent;
+ flex: 0 0 64px;
+ height: 64px;
+ margin-right: 10px;
+ width: 64px;
+ }
+
+ img {
+ @include screen-sm-down {
width: 64px !important;
+ height: 64px !important;
}
}
}
.contentHeaderTitle {
align-items: center;
- display: flex;
+ color: #fff;
+ text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
- > .contentTitle {
- flex: 0 0 auto;
+ @include screen-md-up {
+ display: flex;
+ flex-wrap: wrap;
+ padding-bottom: 10px;
+
+ > .contentTitle {
+ flex: 0 0 auto;
+ margin-right: 10px;
+ }
+
+ > .userTitleBadge {
+ flex: 0 0 auto;
+ }
+ }
+ @include screen-sm-down {
+ flex: 1 1 auto;
}
- > span {
- border: 1px solid rgba(255, 255, 255, 1);
- flex: 0 0 auto;
- margin-left: 10px;
+ a {
+ color: #fff;
+ }
+
+ > .userTitleBadge {
+ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+
+ @include screen-sm-down {
+ margin-top: 5px;
+ }
+ }
+ }
+
+ .contentDescription {
+ @include screen-md-up {
+ flex: 0 0 100%;
+ margin-top: 5px;
+
+ .inlineList:not(:first-child) {
+ margin-top: 2px;
+
+ @include wcfFontSmall;
+ }
+ }
+
+ @include screen-sm-down {
+ display: none;
}
}
@include screen-md-up {
display: flex;
flex: 0 0 auto;
+ margin-bottom: 20px;
+ }
+ @include screen-sm-down {
+ display: block;
+ position: absolute;
+ right: 10px;
+ bottom: 0;
+ }
+
+ > li {
margin-left: 10px;
+ position: relative;
- > li {
+ @include screen-md-up {
flex: 0 0 auto;
- position: relative;
+ }
+ @include screen-sm-down {
+ margin-top: 10px;
+ }
+
+ > a {
+ background-color: $wcfHeaderMenuBackground;
+ border-radius: 50%;
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+ color: $wcfHeaderMenuLink;
+ display: block;
+ padding: 10px;
- > a {
- background-color: $wcfHeaderMenuBackground;
- color: $wcfHeaderMenuLink;
- display: block;
+ @include screen-md-up {
padding: 10px;
+ }
+ @include screen-sm-down {
+ padding: 5px;
+ }
+
+ .icon {
+ color: inherit;
- .icon {
- color: inherit;
+ @include screen-sm-down {
+ font-size: 18px;
+ height: 24px;
+ line-height: 24px;
+ width: 24px;
}
}
+ }
+
+ > .userProfileButtonMenu {
+ background-color: $wcfHeaderMenuDropdownBackground;
+ box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
+ border-radius: 0 0 3px 3px;
+ padding: 5px 0;
+ position: absolute;
+ visibility: hidden;
- > .userProfileButtonMenu {
- background-color: $wcfHeaderMenuDropdownBackground;
- box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
- border-radius: 0 0 3px 3px;
- padding: 5px 0;
- position: absolute;
+ @include screen-md-up {
right: 0;
- visibility: hidden;
-
- > li {
- &.divider:not(:first-child) {
- border-top: 1px solid $wcfHeaderMenuDropdownBackgroundActive;
- margin-top: 5px;
- padding-top: 5px;
- }
-
- > a {
- color: $wcfHeaderMenuDropdownLink;
- }
-
- > a,
- > span {
- display: block;
- padding: 7px 20px;
- white-space: nowrap;
- text-align: right;
- }
-
- &.active > a,
- > a:hover {
- background-color: $wcfHeaderMenuDropdownBackgroundActive;
- color: $wcfHeaderMenuDropdownLinkActive;
- text-decoration: none;
- }
- }
+ }
+ @include screen-sm-down {
+ right: 40px;
+ top: 0;
}
- &:hover {
+ > li {
+ &.divider:not(:first-child) {
+ border-top: 1px solid $wcfHeaderMenuDropdownBackgroundActive;
+ margin-top: 5px;
+ padding-top: 5px;
+ }
+
> a {
- background-color: $wcfHeaderMenuBackgroundActive;
- color: $wcfHeaderMenuLinkActive;
+ color: $wcfHeaderMenuDropdownLink;
+ }
+
+ > a,
+ > span {
+ display: block;
+ padding: 7px 20px;
+ white-space: nowrap;
+ text-align: right;
}
- > .userProfileButtonMenu {
- visibility: visible;
+ &.active > a,
+ > a:hover {
+ background-color: $wcfHeaderMenuDropdownBackgroundActive;
+ color: $wcfHeaderMenuDropdownLinkActive;
+ text-decoration: none;
}
}
}
+
+ &:hover {
+ > a {
+ background-color: $wcfHeaderMenuBackgroundActive;
+ color: $wcfHeaderMenuLinkActive;
+ }
+
+ > .userProfileButtonMenu {
+ visibility: visible;
+ }
+ }
}
+ }
+}
+
+.userProfileDescriptionMobile {
+ @include screen-md-up {
+ display: none;
+ }
+
+ @include screen-sm-down {
+ border-bottom: 1px solid $wcfContentBorderInner;
- @include screen-sm-down {
- display: none;
+ > .layoutBoundary {
+ padding: 20px 10px;
}
}
}
.userProfileDetails {
- background-color: $wcfSidebarBackground;
- color: $wcfSidebarText;
-
- a {
- color: $wcfSidebarLink;
-
- &:hover {
- color: $wcfSidebarLinkActive;
+ > .layoutBoundary {
+ @include screen-md-up {
+ padding: 20px 20px 20px 208px;
+ }
+ @include screen-sm-down {
+ padding: 20px 0;
}
}
- > .layoutBoundary {
- padding: 10px 10px 10px 160px;
+ .userStats {
+ display: flex;
+ flex-wrap: wrap;
+ margin-bottom: -20px;
- @include screen-sm-down {
- padding: 20px 10px 10px;
+ li {
+ flex: 0 0 auto;
+ margin-bottom: 20px;
+ padding: 0 10px;
+ text-align: center;
+ white-space: nowrap;
+
+ @include screen-lg {
+ width: 12%;
+ }
+ @include screen-sm-md {
+ width: 25%;
+ }
+ @include screen-xs {
+ width: 33%;
+ }
+
+ a {
+ display: block;
+ }
+ }
+
+ .userStatsValue {
+ overflow: hidden;
+
+ @include wcfFontTitle;
+ }
+
+ .userStatsTitle {
+ color: $wcfContentDimmedText;
+ display: block;
+ margin-top: 4px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ @include screen-sm-down {
+ @include wcfFontSmall;
+ }
}
}
}
}
.userAvatarImage {
- background-color: rgba(255, 255, 255, 1);
border-radius: 50%;
}
projects / GitHub / WoltLab / WCF.git / commitdiff