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

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