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