wcfsetup/install/files/style/ui/userMenu.scss

   1 .userMenu {
   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);
  10         color: var(--color);
  11         pointer-events: all;
  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         }
  30 }
  31
  32 .dropdownMenuContainer .userMenu {
  33         border-radius: 5px;
  34         box-shadow: rgb(0 0 0 / 20%) 0 12px 28px 0, rgb(0 0 0 / 10%) 0 2px 4px 0;
  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
  45         .userMenuContentScrollable {
  46                 flex: 1 auto;
  47         }
  48 }
  49
  50 .userMenuHeader {
  51         align-items: center;
  52         display: grid;
  53         min-height: 44px;
  54         grid-template-areas: "title buttons";
  55         grid-template-columns: auto max-content;
  56 }
  57
  58 .userMenuTitle {
  59         grid-area: title;
  60         margin: 0 10px;
  61         overflow: hidden;
  62         text-overflow: ellipsis;
  63         white-space: nowrap;
  64
  65         @include wcfFontHeadline;
  66
  67         font-weight: 600;
  68 }
  69
  70 .userMenuButtons {
  71         column-gap: 1px;
  72         display: grid;
  73         grid-auto-flow: column;
  74         grid-area: buttons;
  75 }
  76
  77 .userMenuButton {
  78         align-items: center;
  79         display: flex;
  80         height: 44px;
  81         justify-content: center;
  82         width: 44px;
  83 }
  84
  85 body:not(.touch) .userMenuButton {
  86         transform: scale(1);
  87         transition: transform 0.24s ease-in-out;
  88
  89         &:hover {
  90                 transform: scale(1.5);
  91         }
  92 }
  93
  94 .userMenuContentStatus {
  95         align-items: center;
  96         color: var(--color-dimmed);
  97         display: flex;
  98         height: 60px;
  99         justify-content: center;
 100
 101         @include wcfFontHeadline;
 102 }
 103
 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
 116 .userMenuItem {
 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;
 126
 127         &[data-is-unread="true"] .userMenuItemLink::before {
 128                 right: 30px;
 129         }
 130
 131         &[data-is-unread="false"] .userMenuItemUnread {
 132                 display: none;
 133         }
 134
 135         &.userMenuItemNarrow {
 136                 grid-template-columns: 40px auto;
 137         }
 138
 139         &.userMenuItemSingleLine {
 140                 grid-template-areas: "image content";
 141
 142                 .userMenuItemContent {
 143                         align-self: center;
 144                 }
 145         }
 146
 147         &.userMenuItemWithUsernames {
 148                 grid-template-areas:
 149                         "image content"
 150                         "image usernames"
 151                         "image meta";
 152                 grid-template-columns: 60px auto;
 153         }
 154 }
 155
 156 body:not(.touch) .userMenuItem:hover {
 157         background-color: var(--background-color-active);
 158 }
 159
 160 .userMenuItemLinkPlain {
 161         font-weight: 600;
 162 }
 163
 164 .userMenuItemLink,
 165 .userMenuItemLink:hover {
 166         color: inherit;
 167 }
 168
 169 .userMenuItemLink::before {
 170         bottom: 0;
 171         content: "";
 172         left: 0;
 173         position: absolute;
 174         right: 0;
 175         top: 0;
 176         z-index: 1;
 177 }
 178
 179 .userMenuItemImage {
 180         grid-area: image;
 181 }
 182
 183 .userMenuItemContent {
 184         grid-area: content;
 185 }
 186
 187 .userMenuItemUsernames {
 188         grid-area: usernames;
 189 }
 190
 191 .userMenuItemMeta {
 192         grid-area: meta;
 193 }
 194
 195 .userMenuItemUsernames,
 196 .userMenuItemMeta {
 197         color: var(--color-dimmed);
 198         overflow: hidden;
 199         text-overflow: ellipsis;
 200         white-space: nowrap;
 201
 202         @include wcfFontSmall;
 203 }
 204
 205 .userMenuItemUnread {
 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);
 223                 width: 10px;
 224         }
 225 }
 226
 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 {
 232         opacity: 0;
 233         left: 0;
 234 }
 235
 236 .userMenuItemMarkAsRead {
 237         display: block;
 238         opacity: 1;
 239         position: relative;
 240         left: 0;
 241         width: 100%;
 242 }
 243
 244 body:not(.touch) .userMenuItemMarkAsRead {
 245         transform: scale(1);
 246         transition: opacity 0.12s ease-in-out, left 0.12s ease-in-out, transform 0.24s ease-in-out;
 247
 248         &:hover {
 249                 transform: scale(1.5);
 250         }
 251 }
 252
 253 .userMenuItem:not(:hover) .userMenuItemMarkAsRead {
 254         opacity: 0;
 255         left: 10px;
 256 }
 257
 258 .userMenuFooter {
 259         border-top: 1px solid var(--border-color);
 260         padding: 10px;
 261         position: relative;
 262         text-align: center;
 263 }
 264
 265 .userMenuFooterLink {
 266         color: inherit;
 267
 268         &:hover {
 269                 color: inherit;
 270                 text-decoration: underline;
 271         }
 272
 273         &::before {
 274                 bottom: 0;
 275                 content: "";
 276                 left: 0;
 277                 position: absolute;
 278                 right: 0;
 279                 top: 0;
 280         }
 281 }
 282
 283 .userMenuContent .ps-scrollbar-y-rail {
 284         z-index: 2;
 285 }
 286
 287 .userMenuContentDivider {
 288         border-top: 1px solid var(--border-color);
 289 }
 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 }