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 { | |
111 | flex: 0 0 auto; | |
112 | margin-right: 10px; | |
113 | } | |
114 | ||
115 | > .userTitleBadge { | |
116 | flex: 0 0 auto; | |
117 | } | |
118 | } | |
119 | @include screen-sm-down { | |
120 | flex: 1 1 auto; | |
80dd04db AE |
121 | } |
122 | ||
2901b096 MW |
123 | a { |
124 | color: #fff; | |
125 | } | |
126 | ||
127 | > .userTitleBadge { | |
128 | box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); | |
129 | ||
130 | @include screen-sm-down { | |
131 | margin-top: 5px; | |
132 | } | |
133 | } | |
134 | } | |
135 | ||
136 | .contentDescription { | |
137 | @include screen-md-up { | |
138 | flex: 0 0 100%; | |
139 | margin-top: 5px; | |
140 | ||
141 | .inlineList:not(:first-child) { | |
142 | margin-top: 2px; | |
143 | ||
144 | @include wcfFontSmall; | |
145 | } | |
146 | } | |
147 | ||
148 | @include screen-sm-down { | |
149 | display: none; | |
80dd04db | 150 | } |
41ec911a MW |
151 | } |
152 | ||
80dd04db | 153 | .userProfileButtonContainer { |
f216765b | 154 | @include screen-md-up { |
80dd04db | 155 | display: flex; |
c0053218 | 156 | flex: 0 0 auto; |
2901b096 MW |
157 | margin-bottom: 20px; |
158 | } | |
159 | @include screen-sm-down { | |
160 | display: block; | |
161 | position: absolute; | |
162 | right: 10px; | |
163 | bottom: 0; | |
164 | } | |
165 | ||
166 | > li { | |
c0053218 | 167 | margin-left: 10px; |
2901b096 | 168 | position: relative; |
27db335a | 169 | |
2901b096 | 170 | @include screen-md-up { |
80dd04db | 171 | flex: 0 0 auto; |
2901b096 MW |
172 | } |
173 | @include screen-sm-down { | |
174 | margin-top: 10px; | |
175 | } | |
176 | ||
177 | > a { | |
178 | background-color: $wcfHeaderMenuBackground; | |
179 | border-radius: 50%; | |
180 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); | |
181 | color: $wcfHeaderMenuLink; | |
182 | display: block; | |
183 | padding: 10px; | |
80dd04db | 184 | |
2901b096 | 185 | @include screen-md-up { |
80dd04db | 186 | padding: 10px; |
2901b096 MW |
187 | } |
188 | @include screen-sm-down { | |
189 | padding: 5px; | |
190 | } | |
191 | ||
192 | .icon { | |
193 | color: inherit; | |
80dd04db | 194 | |
2901b096 MW |
195 | @include screen-sm-down { |
196 | font-size: 18px; | |
197 | height: 24px; | |
198 | line-height: 24px; | |
199 | width: 24px; | |
80dd04db AE |
200 | } |
201 | } | |
2901b096 MW |
202 | } |
203 | ||
204 | > .userProfileButtonMenu { | |
205 | background-color: $wcfHeaderMenuDropdownBackground; | |
206 | box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24); | |
207 | border-radius: 0 0 3px 3px; | |
208 | padding: 5px 0; | |
209 | position: absolute; | |
210 | visibility: hidden; | |
80dd04db | 211 | |
2901b096 | 212 | @include screen-md-up { |
80dd04db | 213 | right: 0; |
2901b096 MW |
214 | } |
215 | @include screen-sm-down { | |
216 | right: 40px; | |
217 | top: 0; | |
80dd04db | 218 | } |
c0053218 | 219 | |
2901b096 MW |
220 | > li { |
221 | &.divider:not(:first-child) { | |
222 | border-top: 1px solid $wcfHeaderMenuDropdownBackgroundActive; | |
223 | margin-top: 5px; | |
224 | padding-top: 5px; | |
225 | } | |
226 | ||
80dd04db | 227 | > a { |
2901b096 MW |
228 | color: $wcfHeaderMenuDropdownLink; |
229 | } | |
230 | ||
231 | > a, | |
232 | > span { | |
233 | display: block; | |
234 | padding: 7px 20px; | |
235 | white-space: nowrap; | |
236 | text-align: right; | |
80dd04db AE |
237 | } |
238 | ||
2901b096 MW |
239 | &.active > a, |
240 | > a:hover { | |
241 | background-color: $wcfHeaderMenuDropdownBackgroundActive; | |
242 | color: $wcfHeaderMenuDropdownLinkActive; | |
243 | text-decoration: none; | |
80dd04db | 244 | } |
c0053218 | 245 | } |
41ec911a | 246 | } |
2901b096 MW |
247 | |
248 | &:hover { | |
249 | > a { | |
250 | background-color: $wcfHeaderMenuBackgroundActive; | |
251 | color: $wcfHeaderMenuLinkActive; | |
252 | } | |
253 | ||
254 | > .userProfileButtonMenu { | |
255 | visibility: visible; | |
256 | } | |
257 | } | |
b8eab696 | 258 | } |
2901b096 MW |
259 | } |
260 | } | |
261 | ||
262 | .userProfileDescriptionMobile { | |
263 | @include screen-md-up { | |
264 | display: none; | |
265 | } | |
266 | ||
267 | @include screen-sm-down { | |
268 | border-bottom: 1px solid $wcfContentBorderInner; | |
c0053218 | 269 | |
2901b096 MW |
270 | > .layoutBoundary { |
271 | padding: 20px 10px; | |
c0053218 | 272 | } |
b8eab696 AE |
273 | } |
274 | } | |
929f7e47 | 275 | |
27db335a | 276 | .userProfileDetails { |
2901b096 MW |
277 | > .layoutBoundary { |
278 | @include screen-md-up { | |
279 | padding: 20px 20px 20px 208px; | |
280 | } | |
281 | @include screen-sm-down { | |
282 | padding: 20px 0; | |
4c12e5d1 AE |
283 | } |
284 | } | |
27db335a | 285 | |
2901b096 MW |
286 | .userStats { |
287 | display: flex; | |
288 | flex-wrap: wrap; | |
289 | margin-bottom: -20px; | |
c0053218 | 290 | |
2901b096 MW |
291 | li { |
292 | flex: 0 0 auto; | |
293 | margin-bottom: 20px; | |
294 | padding: 0 10px; | |
295 | text-align: center; | |
296 | white-space: nowrap; | |
297 | ||
298 | @include screen-lg { | |
299 | width: 12%; | |
300 | } | |
301 | @include screen-sm-md { | |
302 | width: 25%; | |
303 | } | |
304 | @include screen-xs { | |
305 | width: 33%; | |
306 | } | |
307 | ||
308 | a { | |
309 | display: block; | |
310 | } | |
311 | } | |
312 | ||
313 | .userStatsValue { | |
314 | overflow: hidden; | |
315 | ||
316 | @include wcfFontTitle; | |
317 | } | |
318 | ||
319 | .userStatsTitle { | |
320 | color: $wcfContentDimmedText; | |
321 | display: block; | |
322 | margin-top: 4px; | |
323 | overflow: hidden; | |
324 | text-overflow: ellipsis; | |
325 | ||
326 | @include screen-sm-down { | |
327 | @include wcfFontSmall; | |
328 | } | |
c0053218 | 329 | } |
27db335a AE |
330 | } |
331 | } | |
332 | ||
444623c3 | 333 | #tpl_wcf_user .main { |
27db335a | 334 | padding-top: 0; |
34208c98 AE |
335 | |
336 | .userProfileContent, | |
337 | .sidebar { | |
338 | margin-top: 20px; | |
339 | } | |
27db335a AE |
340 | } |
341 | ||
cd358fd9 | 342 | .userAvatarImage { |
cd358fd9 AE |
343 | border-radius: 50%; |
344 | } | |
345 | ||
929f7e47 MW |
346 | .userAvatarList { |
347 | display: flex; | |
348 | flex-wrap: wrap; | |
cd358fd9 | 349 | margin-bottom: -10px; |
929f7e47 MW |
350 | |
351 | > li { | |
cd358fd9 AE |
352 | flex: 0 0 48px; |
353 | margin-bottom: 10px; | |
929f7e47 MW |
354 | text-align: center; |
355 | ||
cd358fd9 AE |
356 | &:not(:last-child) { |
357 | margin-right: -12px; | |
358 | } | |
359 | ||
929f7e47 MW |
360 | > a { |
361 | display: block; | |
cd358fd9 AE |
362 | |
363 | > img { | |
364 | padding: 2px; | |
365 | } | |
929f7e47 MW |
366 | } |
367 | } | |
368 | } | |
369 | ||
370 | .userList { | |
371 | .box48 { | |
372 | align-items: center; | |
373 | } | |
b8eab696 | 374 | } |
06a511ea MW |
375 | |
376 | .likeList { | |
377 | > .likeTypeSelection { | |
378 | text-align: right; | |
379 | ||
380 | &:hover { | |
381 | background-color: transparent; | |
382 | } | |
383 | ||
384 | > .buttonGroup { | |
385 | display: inline-flex; | |
386 | ||
387 | &:not(:first-child) { | |
388 | margin-left: 5px; | |
389 | } | |
390 | } | |
391 | } | |
392 | } | |
b3df3a4d AE |
393 | |
394 | /* using `dl` + `.inlineDataList` to prevent styles applied to the | |
395 | data list provided by the `userInformation` template */ | |
396 | .userProfilePreview dl.inlineDataList { | |
397 | margin-top: 10px; | |
398 | ||
399 | @include wcfFontSmall; | |
400 | } |