2 --background-color: #{$wcfUserMenuBackground};
3 --background-color-active: #{$wcfUserMenuBackgroundActive};
4 --border-color: #{$wcfUserMenuBorder};
5 --color: #{$wcfUserMenuText};
6 --color-dimmed: #{$wcfUserMenuTextDimmed};
7 --color-indicator: #{$wcfUserMenuIndicator};
9 background-color: var(--background-color);
13 &.userMenuControlPanel {
18 .userMenuItemContent {
23 color: var(--color-dimmed);
32 .dropdownMenuContainer .userMenu {
34 box-shadow: rgb(0 0 0 / 20%) 0 12px 28px 0, rgb(0 0 0 / 10%) 0 2px 4px 0;
40 .pageMenuUserTabPanel .userMenu {
42 flex-direction: column;
45 .userMenuContentScrollable {
54 grid-template-areas: "title buttons";
55 grid-template-columns: auto max-content;
62 text-overflow: ellipsis;
65 @include wcfFontHeadline;
73 grid-auto-flow: column;
81 justify-content: center;
85 body:not(.touch) .userMenuButton {
87 transition: transform 0.24s ease-in-out;
90 transform: scale(1.5);
94 .userMenuContentStatus {
96 color: var(--color-dimmed);
99 justify-content: center;
101 @include wcfFontHeadline;
104 .userMenuContent.userMenuContentScrollable {
111 @include screen-md-down {
112 overflow: hidden auto;
117 background-color: var(--background-color);
122 grid-template-columns: 60px auto;
123 padding: 10px 30px 10px 10px;
125 transition: background-color 0.12s linear;
127 &[data-is-unread="true"] .userMenuItemLink::before {
131 &[data-is-unread="false"] .userMenuItemUnread {
135 &.userMenuItemNarrow {
136 grid-template-columns: 40px auto;
139 &.userMenuItemSingleLine {
140 grid-template-areas: "image content";
142 .userMenuItemContent {
147 &.userMenuItemWithUsernames {
152 grid-template-columns: 60px auto;
156 body:not(.touch) .userMenuItem:hover {
157 background-color: var(--background-color-active);
160 .userMenuItemLinkPlain {
165 .userMenuItemLink:hover {
169 .userMenuItemLink::before {
183 .userMenuItemContent {
187 .userMenuItemUsernames {
188 grid-area: usernames;
195 .userMenuItemUsernames,
197 color: var(--color-dimmed);
199 text-overflow: ellipsis;
202 @include wcfFontSmall;
205 .userMenuItemUnread {
215 background-color: var(--color-indicator);
222 top: calc(50% - 5px);
227 body:not(.touch) .userMenuItemUnread::before {
228 transition: left 0.12s ease-in-out, opacity 0.12s ease-in-out;
231 body:not(.touch) .userMenuItem:hover .userMenuItemUnread::before {
236 .userMenuItemMarkAsRead {
244 body:not(.touch) .userMenuItemMarkAsRead {
246 transition: opacity 0.12s ease-in-out, left 0.12s ease-in-out, transform 0.24s ease-in-out;
249 transform: scale(1.5);
253 .userMenuItem:not(:hover) .userMenuItemMarkAsRead {
259 border-top: 1px solid var(--border-color);
264 .userMenuFooterLink {
269 text-decoration: underline;
273 .userMenuContent .ps-scrollbar-y-rail {
277 .userMenuContentDivider {
278 border-top: 1px solid var(--border-color);
281 .userMenuNotifications {
282 border: 1px solid var(--color-indicator);
287 @include wcfFontSmall;
290 .userMenuNotificationsButtons {