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