10 .contentHeaderIcon a {
14 .contentHeaderDescription {
18 @include screen-sm-md {
19 .contentHeaderNavigation {
28 @include screen-sm-down {
32 .contentHeaderNavigation {
44 width: 96px !important;
45 height: 96px !important;
50 flex: 0 0 calc(100% - 111px);
51 max-width: calc(100% - 11px);
62 width: 48px !important;
63 height: 48px !important;
68 flex: 0 0 calc(100% - 58px);
69 max-width: calc(100% - 58px);
72 .contentHeaderNavigation {
73 .userProfileButtonContainer {
78 margin-top: 0 !important;
85 display: none !important;
92 @include screen-md-up {
100 /* user profile cover photo */
101 .userProfileUserWithCoverPhoto {
105 .userProfileCoverPhoto {
106 background: no-repeat center;
107 background-size: cover;
116 background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .5) 100%);
117 border-bottom-left-radius: 3px;
118 border-bottom-right-radius: 3px;
123 pointer-events: none;
129 .userProfileManageCoverPhoto {
136 .contentHeaderTitle {
137 /* avoid being covered by the photo */
141 .userProfileUsername {
143 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
146 @include screen-md-up {
149 margin-top: -29px; /* 35px photo overlap - (128px height / 2) */
153 .contentHeaderDescription {
154 margin-top: 15px !important;
157 .contentHeaderNavigation {
162 @include screen-sm-up {
163 .contentHeaderIcon .badgeOnline {
164 left: 10px !important;
167 .userProfileUsername + .badge {
176 margin-top: -18px; /* 30px photo overlap - (96px height / 2) */
180 .contentHeaderDescription {
181 margin-top: 10px !important;
188 .userProfileCoverPhoto {
193 margin-top: 6px; /* 30px photo overlap - (48px height / 2) */
202 .userProfileUsername {
206 .userProfileUsername + .badge {
209 top: 35px !important;
212 .userProfileUsername + .userRankImage {
217 .userProfileUsername + .badge + .userRankImage {
221 transform: translateY(32px);
225 .contentHeaderDescription {
234 text-overflow: ellipsis;
238 background-color: #fff;
245 margin-bottom: -10px;
260 border: 2px solid #fff;
275 border: 1px solid #fff;
288 .userProfilePreview {
295 .buttonGroupNavigation {
302 /* using `dl` + `.inlineDataList` to prevent styles applied to the
303 data list provided by the `userInformation` template */
304 .userProfilePreview dl.inlineDataList {
307 @include wcfFontSmall;
310 /* user notifications */
311 .userNotificationItemList > .notificationItem {
312 &.notificationUnconfirmed {
320 > .notificationItemMarkAsConfirmed {
326 .userProfilePreviewAvatar {
327 align-self: flex-start;
332 .userProfilePreviewAvatar .badgeOnline,
333 .userProfileUser .contentHeaderIcon .badgeOnline {
335 pointer-events: none;
338 @include screen-md-up {
342 @include screen-sm-down {
349 background-color: inherit;
350 border: 1px solid rgba(255, 255, 255, 1);
354 left: 34px; /* 48px (avatar) - 16px (width) - 2px (border-left + border-right) */