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 | ||
32 | .contentHeaderIcon { | |
33 | display: block; | |
34 | flex: 0 0 48px; | |
35 | margin-right: 10px; | |
36 | ||
37 | img { | |
38 | width: 48px !important; | |
39 | height: 48px !important; | |
40 | } | |
41 | } | |
42 | ||
43 | .contentHeaderTitle { | |
44 | flex: 0 0 calc(100% - 58px); | |
45 | max-width: calc(100% - 58px); | |
46 | } | |
4964d067 MW |
47 | |
48 | .contentHeaderNavigation { | |
49 | flex: 0 0 100%; | |
50 | } | |
07c80400 MW |
51 | } |
52 | ||
53 | @include screen-xs { | |
91918c8f | 54 | .contentHeaderNavigation { |
91918c8f MW |
55 | .userProfileButtonContainer { |
56 | display: flex; | |
57 | ||
58 | > li { | |
59 | flex: 1 1 auto; | |
60 | margin-top: 0 !important; | |
5d9e3dd0 MW |
61 | |
62 | &:not(:last-child) { | |
63 | margin-right: 1px; | |
64 | } | |
89f914f1 MW |
65 | |
66 | .invisible { | |
67 | display: none !important; | |
68 | } | |
91918c8f MW |
69 | } |
70 | } | |
71 | } | |
72 | } | |
73 | ||
74 | @include screen-md-up { | |
75 | .contentHeaderIcon { | |
76 | flex: 0 0 128px; | |
77 | margin-right: 20px; | |
78 | } | |
79 | } | |
27db335a AE |
80 | } |
81 | ||
1bcbab84 MW |
82 | .userTitleBadge { |
83 | max-width: 154px; | |
84 | overflow: hidden; | |
85 | text-overflow: ellipsis; | |
86 | } | |
87 | ||
cd358fd9 | 88 | .userAvatarImage { |
1f633a6b | 89 | background-color: #fff; |
cd358fd9 AE |
90 | border-radius: 50%; |
91 | } | |
92 | ||
929f7e47 MW |
93 | .userAvatarList { |
94 | display: flex; | |
95 | flex-wrap: wrap; | |
cd358fd9 | 96 | margin-bottom: -10px; |
929f7e47 MW |
97 | |
98 | > li { | |
cd358fd9 AE |
99 | flex: 0 0 48px; |
100 | margin-bottom: 10px; | |
929f7e47 MW |
101 | text-align: center; |
102 | ||
cd358fd9 AE |
103 | &:not(:last-child) { |
104 | margin-right: -12px; | |
105 | } | |
106 | ||
929f7e47 MW |
107 | > a { |
108 | display: block; | |
cd358fd9 AE |
109 | |
110 | > img { | |
7b27189d | 111 | border: 2px solid #fff; |
cd358fd9 | 112 | } |
929f7e47 MW |
113 | } |
114 | } | |
98618a3e MW |
115 | |
116 | &.small { | |
117 | > li { | |
118 | flex: 0 0 24px; | |
119 | ||
120 | &:not(:last-child) { | |
121 | margin-right: -6px; | |
122 | } | |
123 | ||
124 | > a { | |
125 | > img { | |
7b27189d | 126 | border: 1px solid #fff; |
98618a3e MW |
127 | } |
128 | } | |
c5dd767e | 129 | } |
98618a3e | 130 | } |
929f7e47 MW |
131 | } |
132 | ||
133 | .userList { | |
134 | .box48 { | |
135 | align-items: center; | |
136 | } | |
b8eab696 | 137 | } |
06a511ea | 138 | |
e41f8bc3 MW |
139 | .userProfilePreview { |
140 | position: relative; | |
141 | ||
142 | .userInformation { | |
143 | padding-bottom: 16px; | |
144 | } | |
145 | ||
146 | .buttonGroupNavigation { | |
147 | position: absolute; | |
148 | bottom: 0; | |
149 | right: 0; | |
150 | } | |
151 | } | |
152 | ||
b3df3a4d AE |
153 | /* using `dl` + `.inlineDataList` to prevent styles applied to the |
154 | data list provided by the `userInformation` template */ | |
155 | .userProfilePreview dl.inlineDataList { | |
156 | margin-top: 10px; | |
157 | ||
158 | @include wcfFontSmall; | |
159 | } | |
98618a3e MW |
160 | |
161 | /* user notifications */ | |
162 | .userNotificationItemList > .notificationItem { | |
163 | &.notificationUnconfirmed { | |
164 | align-items: center; | |
165 | display: flex; | |
166 | ||
167 | > .box32 { | |
168 | flex: 1 1 auto; | |
169 | } | |
170 | ||
171 | > .notificationItemMarkAsConfirmed { | |
172 | flex: 0 0 auto; | |
173 | } | |
174 | } | |
175 | } | |
8a3884ab AE |
176 | |
177 | .userProfilePreviewAvatar { | |
5797d648 | 178 | align-self: flex-start; |
8a3884ab AE |
179 | display: block; |
180 | position: relative; | |
181 | } | |
182 | ||
183 | .userProfilePreviewAvatar .badgeOnline, | |
184 | .userProfileUser .contentHeaderIcon .badgeOnline { | |
185 | left: 0; | |
186 | pointer-events: none; | |
187 | position: absolute; | |
188 | ||
189 | @include screen-md-up { | |
190 | bottom: 0; | |
191 | } | |
192 | ||
193 | @include screen-sm-down { | |
194 | color: transparent; | |
195 | padding: 0; | |
196 | top: 0; | |
197 | width: 0; | |
198 | ||
199 | &::before { | |
200 | background-color: inherit; | |
201 | border: 1px solid rgba(255, 255, 255, 1); | |
202 | border-radius: 50%; | |
203 | content: ""; | |
204 | height: 16px; | |
205 | left: 34px; /* 48px (avatar) - 16px (width) - 2px (border-left + border-right) */ | |
206 | position: absolute; | |
207 | width: 16px; | |
208 | } | |
209 | } | |
210 | } |