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