MediaWiki:Gadget-usermenuDropdown.css

/*
Note: attached JS has to move user menu items into a newly created #p-usermenu added as the last child of #p-personal>div>ul
Remains in place: ThemeToggle switcher/dropdown and Echo (notification) icons
IDs:
#pt-themes  // ThemeToggle dropdownSwitcher
#p-themes   // ThemeToggle dayNightSwitcher
#pt-notifications-alert   // Echo Alerts (Notifications)
#pt-notifications-notice  // Echo Notices (Messages)

@name         Usermenu in dropdown
@version      0.2.0
@description  Packs mediawiki vector skin's personal menu on the header into 3 icons: Notifications, Messages, User menu. Supports ext:ThemeToggle (wiki.gg).
@author       GoboZen
@license      MIT
@namespace    https://gitlab.com/enshrouded-wiki/enshrouded-wiki-theme
@homepageURL  https://gitlab.com/enshrouded-wiki/enshrouded-wiki-theme
@supportURL   https://gitlab.com/enshrouded-wiki/enshrouded-wiki-theme/-/issues
@downloadURL  https://gitlab.com/enshrouded-wiki/enshrouded-wiki-theme/-/raw/main/usermenu/usermenu-dropdown.css
*/

:root {
  --focus--transition-duration: 150ms;
  --usermenu-icon--size: 1.25em;
  --usermenu-icon--size: 1.375em;
  --usermenu-icon-badge--fontsize: 65%;

  --topbar--bgcolor: #000538;  /* wikigg branding color required by host */
  --icon-userAvatar--white: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3E user avatar %3C/title%3E%3Cg fill='%23fff'%3E%3Cpath d='M10 11c-5.92 0-8 3-8 5v3h16v-3c0-2-2.08-5-8-5z'/%3E%3Ccircle cx='10' cy='5.5' r='4.5'/%3E%3C/g%3E%3C/svg%3E%0A");
}


header#wikigg-header #p-personal,
header#wikigg-header #p-personal ul,
header#wikigg-header #p-personal li {
  /* wikigg vector customization has all: unset; here so we need to rebuild with higher precedence */
}

/* TODO remove when fixed at wikigg: apply branding font on "Steam Spring Sale" */
header#wikigg-header {
  font-family: nunito, Helvetica, Arial, sans-serif;
}
  
/* Clean up mediawiki */
#p-personal #pt-notifications-alert,
#p-personal #pt-notifications-notice {
  margin-right: unset;
}



/* Layout header tray horizontally */
header#wikigg-header #p-personal {
  display: flex;
  align-items: center;
  margin: unset;
  margin-right: 10px;  /* same as margin-left on header#wikigg-header img.header-logo */
  margin-right: 1em;
}

#p-personal .mw-echo-notifications-badge {
  top: unset;
  margin: unset;

  &::after {
    /* Notification count badge */
    top: 50%;
    left: 50%;
    font-size: var(--usermenu-icon-badge--fontsize);
  }
}

/** Revert the .mobile-menu **/

header#wikigg-header .mobile-menu {
  display: none;
}
header#wikigg-header #p-personal {
  position: unset;
  width: unset;
  background-color: unset;
  padding: unset;
}
header#wikigg-header #p-personal#p-personal {
  display: block;
}
header#wikigg-header #p-personal ul {
  flex-direction: unset;
  gap: 0.75em;
  font-size: unset;
}

/* #p-personal#p-personal .mw-echo-notifications-badge.mw-echo-notifications-badge { */
#p-personal#p-personal#p-personal .mw-echo-notifications-badge {
  text-indent: -9999px;
  opacity: .51;
  filter: invert(1);
}
#p-personal#p-personal#p-personal .oo-ui-icon-bell {
  background-image: url(/load.php?modules=oojs-ui.styles.icons-alerts&image=bell&format=rasterized&skin=vector&version=xmucy);
}
#p-personal#p-personal#p-personal .oo-ui-icon-tray {
  background-image: url(/load.php?modules=oojs-ui.styles.icons-alerts&image=tray&format=rasterized&skin=vector&version=xmucy);
}

#p-personal#p-personal#p-personal .mw-echo-notifications-badge,
body #p-personal#p-personal .ext-iconbutton::before {
  /* Echo icon size */
  height: var(--usermenu-icon--size);
  width: var(--usermenu-icon--size);
  background-repeat: no-repeat;
  background-size: contain;
}
body #p-personal#p-personal .ext-iconbutton::before {
  content: '';
  display: block;
}
body #p-personal#p-personal .ext-iconbutton:not(:focus-within)::before {
  opacity: 50%;
}

body #p-personal#p-personal #p-usermenu::before {
  background-image: var(--icon-userAvatar--white);
}
.vector-user-menu-legacy #pt-anonuserpage,
.vector-user-menu-legacy #pt-tmpuserpage,
.vector-user-menu-legacy #pt-userpage a {
  background-image: unset;
}

body #p-personal#p-personal #p-usermenu:focus-visible {
  /* undo all:unset; */
  /* outline: -webkit-focus-ring-color auto 1px; */
}

body #p-personal#p-personal #p-usermenu .ext-dropdown {
  left: unset;
  right: 0em;
  width: fit-content;
  transform: unset;
  text-align: center;
}

#p-personal .vector-menu-heading-label {
  position: absolute;
  top: -9999px;
}

body #p-personal#p-personal .mw-list-item {
  /* unset .vector-user-menu-legacy li */
  font-size: unset;
  float: unset;
  text-align: unset;
  width: unset;
}

body #p-personal#p-personal > :is(li, .mw-list-item) {
  /* Echo replaces its icons when first clicked... removes the .mw-list-item class, so we need li also */
  margin-inline: 0.5em 0;
  margin-block: unset;
  /* Remove list dots */
  display: inline-block;
  /* list-style: none; */
  /* Relative positioning for dropdown */
  position: relative;
}

body #p-personal#p-personal .ext-dropdown .mw-list-item {
  /* unset .vector-user-menu-legacy li */
  display: block;
}

body #p-personal#p-personal #pt-themes > input,
body #p-personal#p-personal #pt-themes:not(:focus-within) > .ext-themetoggle-popup {
  display: none;
}
body #p-personal#p-personal li#pt-themes > label > span:last-child::after {
  transform: unset;
}



/** Alex's ThemeToggle switcher styles abstracted to .ext-dropdown **/
/* Source:
https://github.com/alex4401/mediawiki-extensions-ThemeToggle/blob/main/modules/dayNightSwitcher/styles-wikigg.less
https://github.com/alex4401/mediawiki-extensions-ThemeToggle/blob/main/modules/dropdownSwitcher/styles-wikigg.less
*/

/* precedence to override:
(2,1,1) body #p-personal #pt-themes .ext-themetoggle-popup
(2,0,1) header#wikigg-header #p-personal
*/
body #p-personal#p-personal .ext-dropdown {
  /* display: none; */
  position: absolute;
  /* Position dropdown */
  top: calc(100% - 2px);
  left: 50%;
  width: max-content;
  transform: translateX(-50%);
  /* font-size: 102%; */
  box-sizing: border-box;
  padding-top: 0.6rem

  /* Add: fade-out */
  visibility: hidden;  /* fallback */
  visibility: collapse;
  opacity: 0;
  transition: all var(--focus--transition-duration);
}
@media (720px < width) {
  body #p-personal#p-personal .ext-dropdown {
    font-size: 102%;
  }
}

body #p-personal#p-personal .mw-list-item:is( :focus-within ) .ext-dropdown {
  /* Add: fade-in */
  display: block;
  visibility: visible;
  opacity: 1;
}

body #p-personal#p-personal .ext-dropdown::before {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 0.1rem;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
  border-bottom: 0.5rem solid var(--topbar--bgcolor);
}

body #p-personal#p-personal .ext-dropdown .vector-menu-content-list {
  display: flex;
  flex-direction: column;
  padding: 0.3em;
  align-items: flex-start;
  gap: 0.25em;
  border-radius: 6px;
  border: 1px solid #3c3e40;
  background: var(--topbar--bgcolor);
  box-sizing: border-box

  /* Add: dropdown vertical layout */
  display: block;  /* flex also works */
  flex-direction: column;
  font-size: unset;
  justify-content: unset;
  align-content: unset;
  gap: unset;
}

body #p-personal#p-personal .ext-dropdown li:not(.mw-list-item) {
  color: #999;
  padding: 0.4em 0.25em 0;
  font-size: 90%
}
body #p-personal#p-personal .ext-dropdown .mw-list-item {
  width: 100%;
  border-radius: 4px
}
body #p-personal#p-personal .ext-dropdown .section-divisor {
  color: #aaa;
  font-size: .7125em;
  text-transform: uppercase;
  padding: 0.3em 0.4em 0em 0.3em;
  line-height: 1
}
body #p-personal#p-personal .ext-dropdown .mw-list-item:not(.section-divisor):hover {
  background-color: #fff3;
}
body #p-personal#p-personal .ext-dropdown .mw-list-item a {
  display: block;
  padding: 0.3em 0.4em 0.25em 0.3em;
  text-decoration: none
}
@media screen and (max-width:720px) {
  body #p-personal li#pt-themes {
    justify-content: center
  }
  body #p-personal li#pt-themes label {
    flex-direction: row
  }
  body #p-personal li#pt-themes label>span:first-child {
    font-size: 100%;
    margin-right: 0.5em
  }
  body #p-personal li#pt-themes label>span:first-child::after {
    content: ':'
  }
  body #p-personal li#pt-themes label>span:last-child::after {
    margin-left: 0.5em
  }
  body #p-personal li#pt-themes .ext-themetoggle-popup {
    font-size: 130%
  }
}