10 .contentHeaderIcon a {
14 .contentHeaderDescription {
18 @include screen-sm-down {
22 .contentHeaderNavigation {
34 width: 96px !important;
35 height: 96px !important;
40 /* The `flex` shorthand fails in IE11 if `calc()` is used. */
43 flex-basis: calc(100% - 111px);
44 max-width: calc(100% - 11px);
55 width: 48px !important;
56 height: 48px !important;
61 /* The `flex` shorthand fails in IE11 if `calc()` is used. */
64 flex-basis: calc(100% - 58px);
68 @include screen-md-up {
76 /* user profile cover photo */
77 .userProfileUserWithCoverPhoto {
82 .userProfileCoverPhoto {
83 background: no-repeat center;
84 background-size: cover;
93 background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.5) 100%);
94 border-bottom-left-radius: 3px;
95 border-bottom-right-radius: 3px;
100 pointer-events: none;
106 .userProfileManageCoverPhoto {
113 .contentHeaderTitle {
115 /* avoid being covered by the photo */
119 .userProfileUsername {
121 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
124 @include screen-md-up {
127 margin-top: -29px; /* 35px photo overlap - (128px height / 2) */
131 .contentHeaderDescription {
132 margin-top: 10px !important;
135 .contentHeaderNavigation {
140 @include screen-sm-up {
141 .contentHeaderIcon .badgeOnline {
142 left: 10px !important;
145 .userProfileUsername + .badge {
154 margin-top: -18px; /* 30px photo overlap - (96px height / 2) */
158 .contentHeaderDescription {
159 margin-top: 10px !important;
166 .userProfileCoverPhoto {
171 margin-top: 6px; /* 30px photo overlap - (48px height / 2) */
180 .userProfileUsername {
184 .userProfileUsername + .badge {
187 top: 35px !important;
190 .userProfileUsername + .userRankImage {
195 .userProfileUsername + .badge + .userRankImage {
199 transform: translateY(32px);
203 .contentHeaderDescription {
212 text-overflow: ellipsis;
216 background-color: #fff;
220 html[data-color-scheme="dark"] .userAvatarImage {
221 background-color: #333;
227 margin-bottom: -10px;
242 border: 2px solid #fff;
257 border: 1px solid #fff;
264 html[data-color-scheme="dark"] .userAvatarList > li > a > img {
265 border-color: rgb(255 255 255 / 12%);
274 /* user notifications */
275 .userNotificationItemList > .notificationItem {
276 &.notificationUnconfirmed {
285 > .notificationItemMarkAsConfirmed {
291 .userNotificationItemList .userNotificationItemLink {
304 .userProfileUser .contentHeaderIcon .badgeOnline {
306 pointer-events: none;
309 @include screen-md-up {
313 @include screen-sm-down {
320 background-color: inherit;
321 border: 1px solid rgba(255, 255, 255, 1);
325 left: 34px; /* 48px (avatar) - 16px (width) - 2px (border-left + border-right) */
332 .userOnlineIndicator {
333 background-color: rgba(0, 153, 0, 1);
335 display: inline-block;