Commit | Line | Data |
---|---|---|
e6717042 | 1 | .userMenu { |
ef2b339e AE |
2 | --background-color: #{$wcfUserMenuBackground}; |
3 | --background-color-active: #{$wcfUserMenuBackgroundActive}; | |
4 | --border-color: #{$wcfUserMenuBorder}; | |
5 | --color: #{$wcfUserMenuText}; | |
6 | --color-dimmed: #{$wcfUserMenuTextDimmed}; | |
7 | --color-indicator: #{$wcfUserMenuIndicator}; | |
8 | ||
9 | background-color: var(--background-color); | |
ef2b339e AE |
10 | color: var(--color); |
11 | pointer-events: all; | |
ef2b339e AE |
12 | |
13 | &.userMenuControlPanel { | |
14 | .userMenuItemImage { | |
15 | align-self: center; | |
16 | } | |
17 | ||
18 | .userMenuItemContent { | |
19 | font-weight: 600; | |
20 | } | |
21 | ||
22 | .icon { | |
23 | color: var(--color-dimmed); | |
24 | } | |
25 | } | |
26 | ||
27 | .icon { | |
28 | color: var(--color); | |
29 | } | |
6d44b5e7 | 30 | } |
ef2b339e | 31 | |
6d44b5e7 AE |
32 | .dropdownMenuContainer .userMenu { |
33 | border-radius: 5px; | |
384c3efa | 34 | box-shadow: rgb(0 0 0 / 20%) 0 12px 28px 0, rgb(0 0 0 / 10%) 0 2px 4px 0; |
6d44b5e7 AE |
35 | position: fixed; |
36 | width: 400px; | |
37 | z-index: 450; | |
38 | } | |
39 | ||
40 | .pageMenuUserTabPanel .userMenu { | |
41 | display: flex; | |
42 | flex-direction: column; | |
43 | height: 100%; | |
44 | ||
4996d792 | 45 | .userMenuContentScrollable { |
6d44b5e7 | 46 | flex: 1 auto; |
ef2b339e | 47 | } |
e6717042 AE |
48 | } |
49 | ||
50 | .userMenuHeader { | |
79e38519 | 51 | align-items: center; |
ef2b339e | 52 | display: grid; |
b74e8d8b | 53 | min-height: 44px; |
ef2b339e AE |
54 | grid-template-areas: "title buttons"; |
55 | grid-template-columns: auto max-content; | |
e6717042 AE |
56 | } |
57 | ||
58 | .userMenuTitle { | |
ef2b339e | 59 | grid-area: title; |
79e38519 | 60 | margin: 0 10px; |
ef2b339e AE |
61 | overflow: hidden; |
62 | text-overflow: ellipsis; | |
63 | white-space: nowrap; | |
f7cda355 | 64 | |
ef2b339e | 65 | @include wcfFontHeadline; |
f7cda355 | 66 | |
ef2b339e | 67 | font-weight: 600; |
e6717042 AE |
68 | } |
69 | ||
70 | .userMenuButtons { | |
79e38519 | 71 | column-gap: 1px; |
ef2b339e AE |
72 | display: grid; |
73 | grid-auto-flow: column; | |
74 | grid-area: buttons; | |
e6717042 AE |
75 | } |
76 | ||
77 | .userMenuButton { | |
79e38519 | 78 | align-items: center; |
b74e8d8b AE |
79 | display: flex; |
80 | height: 44px; | |
81 | justify-content: center; | |
82 | width: 44px; | |
83 | } | |
84 | ||
85 | body:not(.touch) .userMenuButton { | |
ef2b339e AE |
86 | transform: scale(1); |
87 | transition: transform 0.24s ease-in-out; | |
e6717042 | 88 | |
ef2b339e AE |
89 | &:hover { |
90 | transform: scale(1.5); | |
91 | } | |
e6717042 AE |
92 | } |
93 | ||
94 | .userMenuContentStatus { | |
ef2b339e AE |
95 | align-items: center; |
96 | color: var(--color-dimmed); | |
97 | display: flex; | |
98 | height: 60px; | |
99 | justify-content: center; | |
f7cda355 | 100 | |
ef2b339e | 101 | @include wcfFontHeadline; |
e6717042 AE |
102 | } |
103 | ||
92b14ca0 AE |
104 | .userMenuContent.userMenuContentScrollable { |
105 | @include screen-lg { | |
106 | max-height: 400px; | |
107 | overflow: hidden; | |
108 | position: relative; | |
109 | } | |
110 | ||
111 | @include screen-md-down { | |
112 | overflow: hidden auto; | |
113 | } | |
114 | } | |
115 | ||
e6717042 | 116 | .userMenuItem { |
ef2b339e AE |
117 | background-color: var(--background-color); |
118 | display: grid; | |
119 | grid-template-areas: | |
120 | "image content" | |
121 | "image meta"; | |
122 | grid-template-columns: 60px auto; | |
123 | padding: 10px 30px 10px 10px; | |
124 | position: relative; | |
125 | transition: background-color 0.12s linear; | |
e6717042 | 126 | |
ef2b339e AE |
127 | &[data-is-unread="true"] .userMenuItemLink::before { |
128 | right: 30px; | |
129 | } | |
e6717042 | 130 | |
ef2b339e AE |
131 | &[data-is-unread="false"] .userMenuItemUnread { |
132 | display: none; | |
133 | } | |
e6717042 | 134 | |
ef2b339e AE |
135 | &.userMenuItemNarrow { |
136 | grid-template-columns: 40px auto; | |
137 | } | |
e6717042 | 138 | |
ef2b339e AE |
139 | &.userMenuItemSingleLine { |
140 | grid-template-areas: "image content"; | |
e6717042 | 141 | |
ef2b339e AE |
142 | .userMenuItemContent { |
143 | align-self: center; | |
144 | } | |
145 | } | |
f7c73d38 AE |
146 | |
147 | &.userMenuItemWithUsernames { | |
148 | grid-template-areas: | |
37681335 AE |
149 | "image content" |
150 | "image usernames" | |
151 | "image meta"; | |
152 | grid-template-columns: 60px auto; | |
f7c73d38 | 153 | } |
e6717042 AE |
154 | } |
155 | ||
b74e8d8b AE |
156 | body:not(.touch) .userMenuItem:hover { |
157 | background-color: var(--background-color-active); | |
158 | } | |
159 | ||
e998034c AE |
160 | .userMenuItemLinkPlain { |
161 | font-weight: 600; | |
162 | } | |
163 | ||
e6717042 AE |
164 | .userMenuItemLink, |
165 | .userMenuItemLink:hover { | |
ef2b339e | 166 | color: inherit; |
e6717042 AE |
167 | } |
168 | ||
169 | .userMenuItemLink::before { | |
ef2b339e AE |
170 | bottom: 0; |
171 | content: ""; | |
172 | left: 0; | |
173 | position: absolute; | |
174 | right: 0; | |
175 | top: 0; | |
176 | z-index: 1; | |
e6717042 AE |
177 | } |
178 | ||
179 | .userMenuItemImage { | |
ef2b339e | 180 | grid-area: image; |
e6717042 AE |
181 | } |
182 | ||
183 | .userMenuItemContent { | |
ef2b339e | 184 | grid-area: content; |
e6717042 AE |
185 | } |
186 | ||
f7c73d38 AE |
187 | .userMenuItemUsernames { |
188 | grid-area: usernames; | |
189 | } | |
190 | ||
e6717042 | 191 | .userMenuItemMeta { |
ef2b339e | 192 | grid-area: meta; |
f7c73d38 AE |
193 | } |
194 | ||
195 | .userMenuItemUsernames, | |
196 | .userMenuItemMeta { | |
197 | color: var(--color-dimmed); | |
ef2b339e AE |
198 | overflow: hidden; |
199 | text-overflow: ellipsis; | |
200 | white-space: nowrap; | |
f7cda355 | 201 | |
ef2b339e | 202 | @include wcfFontSmall; |
e6717042 AE |
203 | } |
204 | ||
205 | .userMenuItemUnread { | |
ef2b339e AE |
206 | align-items: center; |
207 | bottom: 0; | |
208 | display: flex; | |
209 | position: absolute; | |
210 | right: 0; | |
211 | top: 0; | |
212 | width: 34px; | |
213 | ||
214 | &::before { | |
215 | background-color: var(--color-indicator); | |
216 | border-radius: 50%; | |
217 | content: ""; | |
218 | height: 10px; | |
219 | left: 7px; | |
220 | opacity: 1; | |
221 | position: absolute; | |
222 | top: calc(50% - 5px); | |
ef2b339e AE |
223 | width: 10px; |
224 | } | |
e6717042 AE |
225 | } |
226 | ||
b74e8d8b AE |
227 | body:not(.touch) .userMenuItemUnread::before { |
228 | transition: left 0.12s ease-in-out, opacity 0.12s ease-in-out; | |
229 | } | |
230 | ||
231 | body:not(.touch) .userMenuItem:hover .userMenuItemUnread::before { | |
ef2b339e AE |
232 | opacity: 0; |
233 | left: 0; | |
e6717042 AE |
234 | } |
235 | ||
236 | .userMenuItemMarkAsRead { | |
ef2b339e AE |
237 | display: block; |
238 | opacity: 1; | |
239 | position: relative; | |
240 | left: 0; | |
b74e8d8b AE |
241 | width: 100%; |
242 | } | |
243 | ||
244 | body:not(.touch) .userMenuItemMarkAsRead { | |
ef2b339e AE |
245 | transform: scale(1); |
246 | transition: opacity 0.12s ease-in-out, left 0.12s ease-in-out, transform 0.24s ease-in-out; | |
e6717042 | 247 | |
ef2b339e AE |
248 | &:hover { |
249 | transform: scale(1.5); | |
250 | } | |
e6717042 AE |
251 | } |
252 | ||
253 | .userMenuItem:not(:hover) .userMenuItemMarkAsRead { | |
ef2b339e AE |
254 | opacity: 0; |
255 | left: 10px; | |
e6717042 AE |
256 | } |
257 | ||
258 | .userMenuFooter { | |
ef2b339e AE |
259 | border-top: 1px solid var(--border-color); |
260 | padding: 10px; | |
f9ea63e5 | 261 | position: relative; |
ef2b339e | 262 | text-align: center; |
e6717042 AE |
263 | } |
264 | ||
265 | .userMenuFooterLink { | |
ef2b339e | 266 | color: inherit; |
e6717042 | 267 | |
ef2b339e AE |
268 | &:hover { |
269 | color: inherit; | |
270 | text-decoration: underline; | |
271 | } | |
f9ea63e5 AE |
272 | |
273 | &::before { | |
274 | bottom: 0; | |
275 | content: ""; | |
276 | left: 0; | |
277 | position: absolute; | |
278 | right: 0; | |
279 | top: 0; | |
280 | } | |
e6717042 AE |
281 | } |
282 | ||
c8cb7f9a AE |
283 | .userMenuContent .ps-scrollbar-y-rail { |
284 | z-index: 2; | |
285 | } | |
286 | ||
e6717042 | 287 | .userMenuContentDivider { |
ef2b339e | 288 | border-top: 1px solid var(--border-color); |
e6717042 | 289 | } |
f99a0caf AE |
290 | |
291 | .userMenuNotifications { | |
292 | border: 1px solid var(--color-indicator); | |
293 | border-radius: 5px; | |
294 | margin: 0 10px; | |
295 | padding: 10px; | |
296 | ||
297 | @include wcfFontSmall; | |
298 | } | |
299 | ||
300 | .userMenuNotificationsButtons { | |
301 | margin-top: 10px; | |
302 | text-align: right; | |
303 | } |