Commit | Line | Data |
---|---|---|
27db335a AE |
1 | .userProfileHeader.box { |
2 | margin: 0; | |
3 | } | |
4 | .userProfileCoverPhoto { | |
41ec911a | 5 | background-image: url('../images/user-profile-header.jpg'); // todo |
c0053218 | 6 | background-position: center; |
41ec911a | 7 | background-size: cover; |
c0053218 | 8 | |
2c50c296 AE |
9 | /* adds a box-shadow on the top and bottom of the element to create perspective |
10 | and a clear separation if the images color is close to the surrounding elements */ | |
11 | box-shadow: inset 0 10px 10px -10px rgba(0, 0, 0, .6), inset 0 -10px 10px -10px rgba(0, 0, 0, .6); | |
12 | ||
f216765b | 13 | @include screen-md-up { |
2901b096 | 14 | height: 300px; |
c0053218 AE |
15 | } |
16 | ||
f216765b | 17 | @include screen-sm-down { |
2901b096 | 18 | height: 200px; |
c0053218 | 19 | } |
41ec911a | 20 | |
2901b096 MW |
21 | &::after { |
22 | bottom: 0; | |
23 | content: ''; | |
24 | left: 0; | |
25 | position: absolute; | |
26 | right: 0; | |
27 | top: 0; | |
28 | ||
29 | @include screen-md-up { | |
30 | background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .7) 100%); | |
31 | } | |
c0053218 | 32 | |
f216765b | 33 | @include screen-sm-down { |
2901b096 | 34 | background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, .7) 100%); |
c0053218 | 35 | } |
41ec911a | 36 | } |
2901b096 MW |
37 | } |
38 | ||
39 | .userProfileHeaderContainer { | |
40 | position: relative; | |
41 | } | |
42 | ||
43 | .userProfileUser { | |
44 | position: absolute; | |
45 | width: 100%; | |
46 | ||
47 | @include screen-md-up { | |
48 | bottom: 0; | |
49 | } | |
50 | ||
51 | @include screen-sm-down { | |
52 | bottom: 10px; | |
53 | } | |
41ec911a | 54 | |
02a17ca6 | 55 | .contentHeader { |
2901b096 MW |
56 | @include screen-md-up { |
57 | align-items: flex-end; | |
58 | } | |
59 | ||
60 | @include screen-sm-down { | |
61 | align-items: center; | |
62 | display: flex; | |
63 | } | |
02a17ca6 AE |
64 | } |
65 | ||
66 | .contentHeaderIcon { | |
2901b096 MW |
67 | align-items: center; |
68 | background-color: #fff; | |
27db335a | 69 | border-radius: 50%; |
2901b096 MW |
70 | box-sizing: content-box; |
71 | box-shadow: 0 3px 6px rgba(0 ,0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); | |
72 | display: flex; | |
73 | justify-content: center; | |
74 | ||
75 | @include screen-md-up { | |
76 | border: 4px solid transparent; | |
77 | flex: 0 0 160px; | |
78 | height: 160px; | |
79 | margin-right: 20px; | |
80 | transform: translateY(50%); | |
81 | width: 160px; | |
82 | } | |
c0053218 | 83 | |
f216765b | 84 | @include screen-sm-down { |
2901b096 MW |
85 | border: 2px solid transparent; |
86 | flex: 0 0 64px; | |
87 | height: 64px; | |
88 | margin-right: 10px; | |
89 | width: 64px; | |
90 | } | |
91 | ||
92 | img { | |
93 | @include screen-sm-down { | |
c0053218 | 94 | width: 64px !important; |
2901b096 | 95 | height: 64px !important; |
c0053218 AE |
96 | } |
97 | } | |
b8eab696 | 98 | } |
b8eab696 | 99 | |
80dd04db AE |
100 | .contentHeaderTitle { |
101 | align-items: center; | |
2901b096 MW |
102 | color: #fff; |
103 | text-shadow: 0 1px 4px rgba(0, 0, 0, .5); | |
80dd04db | 104 | |
2901b096 MW |
105 | @include screen-md-up { |
106 | display: flex; | |
107 | flex-wrap: wrap; | |
108 | padding-bottom: 10px; | |
109 | ||
110 | > .contentTitle { | |
efed4643 AE |
111 | align-items: center; |
112 | display: flex; | |
2901b096 MW |
113 | flex: 0 0 auto; |
114 | margin-right: 10px; | |
efed4643 AE |
115 | |
116 | > .icon { | |
117 | margin-left: 5px; | |
118 | } | |
2901b096 MW |
119 | } |
120 | ||
121 | > .userTitleBadge { | |
122 | flex: 0 0 auto; | |
123 | } | |
124 | } | |
125 | @include screen-sm-down { | |
126 | flex: 1 1 auto; | |
80dd04db AE |
127 | } |
128 | ||
2901b096 MW |
129 | a { |
130 | color: #fff; | |
131 | } | |
132 | ||
133 | > .userTitleBadge { | |
134 | box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); | |
135 | ||
136 | @include screen-sm-down { | |
137 | margin-top: 5px; | |
138 | } | |
139 | } | |
70bd0f41 MW |
140 | |
141 | .icon { | |
142 | color: inherit; | |
143 | } | |
2901b096 MW |
144 | } |
145 | ||
146 | .contentDescription { | |
147 | @include screen-md-up { | |
148 | flex: 0 0 100%; | |
149 | margin-top: 5px; | |
150 | ||
151 | .inlineList:not(:first-child) { | |
152 | margin-top: 2px; | |
153 | ||
154 | @include wcfFontSmall; | |
155 | } | |
156 | } | |
157 | ||
158 | @include screen-sm-down { | |
159 | display: none; | |
80dd04db | 160 | } |
41ec911a MW |
161 | } |
162 | ||
80dd04db | 163 | .userProfileButtonContainer { |
f216765b | 164 | @include screen-md-up { |
80dd04db | 165 | display: flex; |
c0053218 | 166 | flex: 0 0 auto; |
2901b096 MW |
167 | margin-bottom: 20px; |
168 | } | |
169 | @include screen-sm-down { | |
170 | display: block; | |
171 | position: absolute; | |
172 | right: 10px; | |
173 | bottom: 0; | |
174 | } | |
175 | ||
176 | > li { | |
c0053218 | 177 | margin-left: 10px; |
2901b096 | 178 | position: relative; |
27db335a | 179 | |
2901b096 | 180 | @include screen-md-up { |
80dd04db | 181 | flex: 0 0 auto; |
2901b096 MW |
182 | } |
183 | @include screen-sm-down { | |
184 | margin-top: 10px; | |
185 | } | |
186 | ||
187 | > a { | |
188 | background-color: $wcfHeaderMenuBackground; | |
189 | border-radius: 50%; | |
190 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); | |
191 | color: $wcfHeaderMenuLink; | |
192 | display: block; | |
193 | padding: 10px; | |
80dd04db | 194 | |
2901b096 | 195 | @include screen-md-up { |
80dd04db | 196 | padding: 10px; |
2901b096 MW |
197 | } |
198 | @include screen-sm-down { | |
199 | padding: 5px; | |
200 | } | |
201 | ||
202 | .icon { | |
203 | color: inherit; | |
80dd04db | 204 | |
2901b096 MW |
205 | @include screen-sm-down { |
206 | font-size: 18px; | |
207 | height: 24px; | |
208 | line-height: 24px; | |
209 | width: 24px; | |
80dd04db AE |
210 | } |
211 | } | |
2901b096 MW |
212 | } |
213 | ||
214 | > .userProfileButtonMenu { | |
215 | background-color: $wcfHeaderMenuDropdownBackground; | |
216 | box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24); | |
217 | border-radius: 0 0 3px 3px; | |
218 | padding: 5px 0; | |
219 | position: absolute; | |
220 | visibility: hidden; | |
efed4643 | 221 | z-index: 1; |
80dd04db | 222 | |
2901b096 | 223 | @include screen-md-up { |
80dd04db | 224 | right: 0; |
2901b096 MW |
225 | } |
226 | @include screen-sm-down { | |
227 | right: 40px; | |
228 | top: 0; | |
80dd04db | 229 | } |
c0053218 | 230 | |
2901b096 MW |
231 | > li { |
232 | &.divider:not(:first-child) { | |
233 | border-top: 1px solid $wcfHeaderMenuDropdownBackgroundActive; | |
234 | margin-top: 5px; | |
235 | padding-top: 5px; | |
236 | } | |
237 | ||
80dd04db | 238 | > a { |
2901b096 MW |
239 | color: $wcfHeaderMenuDropdownLink; |
240 | } | |
241 | ||
242 | > a, | |
243 | > span { | |
244 | display: block; | |
245 | padding: 7px 20px; | |
246 | white-space: nowrap; | |
247 | text-align: right; | |
80dd04db AE |
248 | } |
249 | ||
2901b096 MW |
250 | &.active > a, |
251 | > a:hover { | |
252 | background-color: $wcfHeaderMenuDropdownBackgroundActive; | |
253 | color: $wcfHeaderMenuDropdownLinkActive; | |
254 | text-decoration: none; | |
80dd04db | 255 | } |
c0053218 | 256 | } |
41ec911a | 257 | } |
2901b096 MW |
258 | |
259 | &:hover { | |
260 | > a { | |
c4dc4aaa | 261 | background-color: $wcfHeaderMenuLinkBackgroundActive; |
2901b096 MW |
262 | color: $wcfHeaderMenuLinkActive; |
263 | } | |
264 | ||
265 | > .userProfileButtonMenu { | |
266 | visibility: visible; | |
267 | } | |
268 | } | |
b8eab696 | 269 | } |
2901b096 MW |
270 | } |
271 | } | |
272 | ||
273 | .userProfileDescriptionMobile { | |
274 | @include screen-md-up { | |
275 | display: none; | |
276 | } | |
277 | ||
278 | @include screen-sm-down { | |
279 | border-bottom: 1px solid $wcfContentBorderInner; | |
c0053218 | 280 | |
2901b096 MW |
281 | > .layoutBoundary { |
282 | padding: 20px 10px; | |
c0053218 | 283 | } |
b8eab696 AE |
284 | } |
285 | } | |
929f7e47 | 286 | |
27db335a | 287 | .userProfileDetails { |
9576b56f MW |
288 | @include screen-md-up { |
289 | min-height: 94px; | |
290 | } | |
291 | ||
2901b096 MW |
292 | > .layoutBoundary { |
293 | @include screen-md-up { | |
294 | padding: 20px 20px 20px 208px; | |
295 | } | |
296 | @include screen-sm-down { | |
297 | padding: 20px 0; | |
4c12e5d1 AE |
298 | } |
299 | } | |
27db335a | 300 | |
2901b096 MW |
301 | .userStats { |
302 | display: flex; | |
303 | flex-wrap: wrap; | |
304 | margin-bottom: -20px; | |
c0053218 | 305 | |
2901b096 MW |
306 | li { |
307 | flex: 0 0 auto; | |
308 | margin-bottom: 20px; | |
309 | padding: 0 10px; | |
310 | text-align: center; | |
311 | white-space: nowrap; | |
312 | ||
313 | @include screen-lg { | |
314 | width: 12%; | |
315 | } | |
316 | @include screen-sm-md { | |
317 | width: 25%; | |
318 | } | |
319 | @include screen-xs { | |
320 | width: 33%; | |
321 | } | |
322 | ||
323 | a { | |
324 | display: block; | |
325 | } | |
326 | } | |
327 | ||
328 | .userStatsValue { | |
329 | overflow: hidden; | |
330 | ||
331 | @include wcfFontTitle; | |
332 | } | |
333 | ||
334 | .userStatsTitle { | |
335 | color: $wcfContentDimmedText; | |
336 | display: block; | |
337 | margin-top: 4px; | |
338 | overflow: hidden; | |
339 | text-overflow: ellipsis; | |
340 | ||
341 | @include screen-sm-down { | |
342 | @include wcfFontSmall; | |
343 | } | |
c0053218 | 344 | } |
27db335a AE |
345 | } |
346 | } | |
347 | ||
444623c3 | 348 | #tpl_wcf_user .main { |
27db335a | 349 | padding-top: 0; |
34208c98 AE |
350 | |
351 | .userProfileContent, | |
352 | .sidebar { | |
353 | margin-top: 20px; | |
354 | } | |
27db335a AE |
355 | } |
356 | ||
cd358fd9 | 357 | .userAvatarImage { |
1f633a6b | 358 | background-color: #fff; |
cd358fd9 AE |
359 | border-radius: 50%; |
360 | } | |
361 | ||
929f7e47 MW |
362 | .userAvatarList { |
363 | display: flex; | |
364 | flex-wrap: wrap; | |
cd358fd9 | 365 | margin-bottom: -10px; |
929f7e47 MW |
366 | |
367 | > li { | |
cd358fd9 AE |
368 | flex: 0 0 48px; |
369 | margin-bottom: 10px; | |
929f7e47 MW |
370 | text-align: center; |
371 | ||
cd358fd9 AE |
372 | &:not(:last-child) { |
373 | margin-right: -12px; | |
374 | } | |
375 | ||
929f7e47 MW |
376 | > a { |
377 | display: block; | |
cd358fd9 AE |
378 | |
379 | > img { | |
380 | padding: 2px; | |
381 | } | |
929f7e47 MW |
382 | } |
383 | } | |
384 | } | |
385 | ||
386 | .userList { | |
387 | .box48 { | |
388 | align-items: center; | |
389 | } | |
b8eab696 | 390 | } |
06a511ea MW |
391 | |
392 | .likeList { | |
393 | > .likeTypeSelection { | |
394 | text-align: right; | |
395 | ||
396 | &:hover { | |
397 | background-color: transparent; | |
398 | } | |
399 | ||
400 | > .buttonGroup { | |
401 | display: inline-flex; | |
402 | ||
403 | &:not(:first-child) { | |
404 | margin-left: 5px; | |
405 | } | |
406 | } | |
407 | } | |
408 | } | |
b3df3a4d AE |
409 | |
410 | /* using `dl` + `.inlineDataList` to prevent styles applied to the | |
411 | data list provided by the `userInformation` template */ | |
412 | .userProfilePreview dl.inlineDataList { | |
413 | margin-top: 10px; | |
414 | ||
415 | @include wcfFontSmall; | |
416 | } |