Commit | Line | Data |
---|---|---|
2901b096 | 1 | .userProfileUser { |
07c80400 MW |
2 | .contentHeaderIcon { |
3 | position: relative; | |
8a52619a | 4 | |
07c80400 MW |
5 | a { |
6 | display: block; | |
7 | } | |
07c80400 | 8 | } |
8a52619a | 9 | |
2772d4eb MW |
10 | .contentHeaderIcon a { |
11 | display: block; | |
2901b096 | 12 | } |
8a52619a | 13 | |
46770eba | 14 | .contentHeaderDescription { |
34208c98 AE |
15 | margin-top: 20px; |
16 | } | |
8a52619a | 17 | |
07c80400 | 18 | @include screen-sm-down { |
91918c8f MW |
19 | display: flex; |
20 | flex-wrap: wrap; | |
8a52619a | 21 | |
f3b2b889 AE |
22 | .contentHeaderNavigation { |
23 | flex: 0 0 100%; | |
24 | } | |
25 | } | |
8a52619a | 26 | |
f3b2b889 AE |
27 | @include screen-sm { |
28 | .contentHeaderIcon { | |
29 | display: block; | |
30 | flex: 0 0 96px; | |
31 | margin-right: 15px; | |
8a52619a | 32 | |
f3b2b889 AE |
33 | img { |
34 | width: 96px !important; | |
35 | height: 96px !important; | |
36 | } | |
37 | } | |
8a52619a | 38 | |
f3b2b889 | 39 | .contentHeaderTitle { |
212264b7 AE |
40 | /* The `flex` shorthand fails in IE11 if `calc()` is used. */ |
41 | flex-grow: 0; | |
42 | flex-shrink: 0; | |
43 | flex-basis: calc(100% - 111px); | |
f3b2b889 AE |
44 | max-width: calc(100% - 11px); |
45 | } | |
46 | } | |
8a52619a | 47 | |
f3b2b889 | 48 | @include screen-xs { |
91918c8f MW |
49 | .contentHeaderIcon { |
50 | display: block; | |
51 | flex: 0 0 48px; | |
52 | margin-right: 10px; | |
8a52619a | 53 | |
91918c8f MW |
54 | img { |
55 | width: 48px !important; | |
56 | height: 48px !important; | |
57 | } | |
58 | } | |
8a52619a | 59 | |
91918c8f | 60 | .contentHeaderTitle { |
212264b7 AE |
61 | /* The `flex` shorthand fails in IE11 if `calc()` is used. */ |
62 | flex-grow: 0; | |
63 | flex-shrink: 0; | |
64 | flex-basis: calc(100% - 58px); | |
91918c8f | 65 | } |
91918c8f | 66 | } |
8a52619a | 67 | |
91918c8f MW |
68 | @include screen-md-up { |
69 | .contentHeaderIcon { | |
70 | flex: 0 0 128px; | |
71 | margin-right: 20px; | |
72 | } | |
73 | } | |
27db335a AE |
74 | } |
75 | ||
f3b2b889 AE |
76 | /* user profile cover photo */ |
77 | .userProfileUserWithCoverPhoto { | |
04311e29 | 78 | margin-top: 0; |
f3b2b889 AE |
79 | padding-top: 165px; |
80 | position: relative; | |
8a52619a | 81 | |
f3b2b889 AE |
82 | .userProfileCoverPhoto { |
83 | background: no-repeat center; | |
84 | background-size: cover; | |
85 | border-radius: 3px; | |
86 | height: 200px; | |
87 | left: 0; | |
88 | position: absolute; | |
89 | right: 0; | |
90 | top: 0; | |
8a52619a | 91 | |
f3b2b889 | 92 | &::after { |
8a52619a | 93 | background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.5) 100%); |
f3b2b889 AE |
94 | border-bottom-left-radius: 3px; |
95 | border-bottom-right-radius: 3px; | |
96 | bottom: 0; | |
97 | content: ""; | |
98 | display: block; | |
99 | left: 0; | |
100 | pointer-events: none; | |
101 | position: absolute; | |
102 | right: 0; | |
103 | top: 0; | |
104 | } | |
8a52619a | 105 | |
e26331e1 | 106 | .userProfileManageCoverPhoto { |
f3b2b889 AE |
107 | position: absolute; |
108 | right: 10px; | |
109 | top: 10px; | |
110 | } | |
111 | } | |
8a52619a | 112 | |
f3b2b889 | 113 | .contentHeaderTitle { |
04311e29 | 114 | margin-top: 0; |
f3b2b889 AE |
115 | /* avoid being covered by the photo */ |
116 | z-index: 10; | |
117 | } | |
8a52619a | 118 | |
f3b2b889 AE |
119 | .userProfileUsername { |
120 | color: #fff; | |
121 | text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); | |
122 | } | |
8a52619a | 123 | |
f3b2b889 AE |
124 | @include screen-md-up { |
125 | .contentHeaderIcon { | |
126 | flex: 0 0 138px; | |
127 | margin-top: -29px; /* 35px photo overlap - (128px height / 2) */ | |
128 | padding-left: 10px; | |
129 | } | |
8a52619a | 130 | |
f3b2b889 | 131 | .contentHeaderDescription { |
04311e29 | 132 | margin-top: 10px !important; |
f3b2b889 | 133 | } |
8a52619a | 134 | |
f3b2b889 AE |
135 | .contentHeaderNavigation { |
136 | padding-top: 45px; | |
137 | } | |
138 | } | |
8a52619a | 139 | |
f3b2b889 AE |
140 | @include screen-sm-up { |
141 | .contentHeaderIcon .badgeOnline { | |
142 | left: 10px !important; | |
143 | } | |
8a52619a | 144 | |
f3b2b889 AE |
145 | .userProfileUsername + .badge { |
146 | margin-left: 5px; | |
147 | } | |
148 | } | |
8a52619a | 149 | |
f3b2b889 AE |
150 | @include screen-sm { |
151 | padding-top: 170px; | |
8a52619a | 152 | |
f3b2b889 AE |
153 | .contentHeaderIcon { |
154 | margin-top: -18px; /* 30px photo overlap - (96px height / 2) */ | |
155 | padding-left: 5px; | |
156 | } | |
8a52619a | 157 | |
f3b2b889 AE |
158 | .contentHeaderDescription { |
159 | margin-top: 10px !important; | |
160 | } | |
161 | } | |
8a52619a | 162 | |
f3b2b889 AE |
163 | @include screen-xs { |
164 | padding-top: 120px; | |
8a52619a | 165 | |
f3b2b889 AE |
166 | .userProfileCoverPhoto { |
167 | height: 150px; | |
168 | } | |
8a52619a | 169 | |
f3b2b889 AE |
170 | .contentHeaderIcon { |
171 | margin-top: 6px; /* 30px photo overlap - (48px height / 2) */ | |
172 | padding-left: 5px; | |
173 | } | |
8a52619a | 174 | |
f3b2b889 AE |
175 | .contentTitle { |
176 | margin-bottom: 35px; | |
177 | position: relative; | |
178 | } | |
8a52619a | 179 | |
f3b2b889 AE |
180 | .userProfileUsername { |
181 | display: block; | |
182 | } | |
8a52619a | 183 | |
f3b2b889 AE |
184 | .userProfileUsername + .badge { |
185 | margin-left: 0; | |
186 | position: absolute; | |
187 | top: 35px !important; | |
188 | } | |
8a52619a | 189 | |
b8ba166d AE |
190 | .userProfileUsername + .userRankImage { |
191 | position: absolute; | |
192 | top: 32px; | |
193 | } | |
8a52619a | 194 | |
b8ba166d AE |
195 | .userProfileUsername + .badge + .userRankImage { |
196 | position: relative; | |
8a52619a | 197 | |
b8ba166d AE |
198 | > img { |
199 | transform: translateY(32px); | |
200 | } | |
201 | } | |
8a52619a | 202 | |
f3b2b889 AE |
203 | .contentHeaderDescription { |
204 | margin-left: -58px; | |
205 | } | |
206 | } | |
207 | } | |
208 | ||
1bcbab84 MW |
209 | .userTitleBadge { |
210 | max-width: 154px; | |
211 | overflow: hidden; | |
212 | text-overflow: ellipsis; | |
213 | } | |
214 | ||
cd358fd9 | 215 | .userAvatarImage { |
1f633a6b | 216 | background-color: #fff; |
cd358fd9 AE |
217 | border-radius: 50%; |
218 | } | |
219 | ||
fbbb6f70 AE |
220 | html[data-color-scheme="dark"] .userAvatarImage { |
221 | background-color: #333; | |
222 | } | |
223 | ||
929f7e47 MW |
224 | .userAvatarList { |
225 | display: flex; | |
226 | flex-wrap: wrap; | |
cd358fd9 | 227 | margin-bottom: -10px; |
8a52619a | 228 | |
929f7e47 | 229 | > li { |
cd358fd9 AE |
230 | flex: 0 0 48px; |
231 | margin-bottom: 10px; | |
929f7e47 | 232 | text-align: center; |
8a52619a | 233 | |
cd358fd9 AE |
234 | &:not(:last-child) { |
235 | margin-right: -12px; | |
236 | } | |
8a52619a | 237 | |
929f7e47 MW |
238 | > a { |
239 | display: block; | |
8a52619a | 240 | |
cd358fd9 | 241 | > img { |
7b27189d | 242 | border: 2px solid #fff; |
cd358fd9 | 243 | } |
929f7e47 MW |
244 | } |
245 | } | |
8a52619a | 246 | |
98618a3e MW |
247 | &.small { |
248 | > li { | |
249 | flex: 0 0 24px; | |
8a52619a | 250 | |
98618a3e MW |
251 | &:not(:last-child) { |
252 | margin-right: -6px; | |
253 | } | |
8a52619a | 254 | |
98618a3e MW |
255 | > a { |
256 | > img { | |
7b27189d | 257 | border: 1px solid #fff; |
98618a3e MW |
258 | } |
259 | } | |
c5dd767e | 260 | } |
98618a3e | 261 | } |
929f7e47 MW |
262 | } |
263 | ||
7e0b3f37 AE |
264 | html[data-color-scheme="dark"] .userAvatarList > li > a > img { |
265 | border-color: rgb(255 255 255 / 12%); | |
266 | } | |
267 | ||
929f7e47 MW |
268 | .userList { |
269 | .box48 { | |
270 | align-items: center; | |
271 | } | |
b8eab696 | 272 | } |
06a511ea | 273 | |
98618a3e MW |
274 | /* user notifications */ |
275 | .userNotificationItemList > .notificationItem { | |
276 | &.notificationUnconfirmed { | |
277 | align-items: center; | |
278 | display: flex; | |
8a52619a | 279 | |
98618a3e MW |
280 | > .box32 { |
281 | flex: 1 1 auto; | |
ddf66700 | 282 | position: relative; |
98618a3e | 283 | } |
8a52619a | 284 | |
98618a3e MW |
285 | > .notificationItemMarkAsConfirmed { |
286 | flex: 0 0 auto; | |
287 | } | |
288 | } | |
289 | } | |
8a3884ab | 290 | |
ddf66700 AE |
291 | .userNotificationItemList .userNotificationItemLink { |
292 | color: inherit; | |
293 | ||
294 | &::before { | |
295 | bottom: 0; | |
296 | content: ""; | |
297 | left: 0; | |
298 | position: absolute; | |
299 | right: 0; | |
300 | top: 0; | |
301 | } | |
302 | } | |
303 | ||
8a3884ab AE |
304 | .userProfileUser .contentHeaderIcon .badgeOnline { |
305 | left: 0; | |
306 | pointer-events: none; | |
307 | position: absolute; | |
8a52619a | 308 | |
8a3884ab AE |
309 | @include screen-md-up { |
310 | bottom: 0; | |
311 | } | |
8a52619a | 312 | |
8a3884ab AE |
313 | @include screen-sm-down { |
314 | color: transparent; | |
315 | padding: 0; | |
316 | top: 0; | |
317 | width: 0; | |
8a52619a | 318 | |
8a3884ab AE |
319 | &::before { |
320 | background-color: inherit; | |
321 | border: 1px solid rgba(255, 255, 255, 1); | |
322 | border-radius: 50%; | |
323 | content: ""; | |
324 | height: 16px; | |
325 | left: 34px; /* 48px (avatar) - 16px (width) - 2px (border-left + border-right) */ | |
326 | position: absolute; | |
327 | width: 16px; | |
328 | } | |
329 | } | |
b8ba166d | 330 | } |
e013e612 MW |
331 | |
332 | .userOnlineIndicator { | |
333 | background-color: rgba(0, 153, 0, 1); | |
334 | border-radius: 50%; | |
335 | display: inline-block; | |
336 | height: 8px; | |
337 | width: 8px; | |
338 | } |