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 /* The `flex` shorthand fails in IE11 if `calc()` is used. */
53 flex-basis: calc(100% - 111px);
54 max-width: calc(100% - 11px);
65 width: 48px !important;
66 height: 48px !important;
71 /* The `flex` shorthand fails in IE11 if `calc()` is used. */
74 flex-basis: calc(100% - 58px);
77 .contentHeaderNavigation {
78 .userProfileButtonContainer {
83 margin-top: 0 !important;
90 display: none !important;
97 @include screen-md-up {
105 /* user profile cover photo */
106 .userProfileUserWithCoverPhoto {
110 .userProfileCoverPhoto {
111 background: no-repeat center;
112 background-size: cover;
121 background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .5) 100%);
122 border-bottom-left-radius: 3px;
123 border-bottom-right-radius: 3px;
128 pointer-events: none;
134 .userProfileManageCoverPhoto {
141 .contentHeaderTitle {
142 /* avoid being covered by the photo */
146 .userProfileUsername {
148 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
151 @include screen-md-up {
154 margin-top: -29px; /* 35px photo overlap - (128px height / 2) */
158 .contentHeaderDescription {
159 margin-top: 15px !important;
162 .contentHeaderNavigation {
167 @include screen-sm-up {
168 .contentHeaderIcon .badgeOnline {
169 left: 10px !important;
172 .userProfileUsername + .badge {
181 margin-top: -18px; /* 30px photo overlap - (96px height / 2) */
185 .contentHeaderDescription {
186 margin-top: 10px !important;
193 .userProfileCoverPhoto {
198 margin-top: 6px; /* 30px photo overlap - (48px height / 2) */
207 .userProfileUsername {
211 .userProfileUsername + .badge {
214 top: 35px !important;
217 .userProfileUsername + .userRankImage {
222 .userProfileUsername + .badge + .userRankImage {
226 transform: translateY(32px);
230 .contentHeaderDescription {
239 text-overflow: ellipsis;
243 background-color: #fff;
250 margin-bottom: -10px;
265 border: 2px solid #fff;
280 border: 1px solid #fff;
293 .userProfilePreview {
300 .buttonGroupNavigation {
307 /* using `dl` + `.inlineDataList` to prevent styles applied to the
308 data list provided by the `userInformation` template */
309 .userProfilePreview dl.inlineDataList {
312 @include wcfFontSmall;
315 /* user notifications */
316 .userNotificationItemList > .notificationItem {
317 &.notificationUnconfirmed {
325 > .notificationItemMarkAsConfirmed {
331 .userProfilePreviewAvatar {
332 align-self: flex-start;
337 .userProfilePreviewAvatar .badgeOnline,
338 .userProfileUser .contentHeaderIcon .badgeOnline {
340 pointer-events: none;
343 @include screen-md-up {
347 @include screen-sm-down {
354 background-color: inherit;
355 border: 1px solid rgba(255, 255, 255, 1);
359 left: 34px; /* 48px (avatar) - 16px (width) - 2px (border-left + border-right) */