MediaWiki:Gadget-toplinksDropdown.less

// prevent this from doing anything on Special:Preferences; JS doesn't load on that // page, so users will be unable to access the personal links that are display: none'd

body:not(.mw-special-Preferences) {

   // hide these with css first so there's no jump after js loads
   #pt-mytalk,
   #pt-preferences,
   #pt-watchlist,
   #pt-mycontris,
   #pt-logout {
       display: none;
   }

   // username link
   #p-personal #pt-userpage {
       float: right;
       position: relative;

       // needs large padding (not margin) to increase hover target
       padding-bottom: 1.4em;
       background-position: left center;
   }

   #pt-userpage {

       // dropdown stuff
       .pt-userpage-dropdown {
           display: none;
           background: var(--body-light);
           border: 1px solid var(--body-border);
           padding: 1em;
           box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0,0,0,0.3);

           position: absolute;
           top: 2.5em;
           right: 0;
           z-index: 10;

           // same as .vector-menu-content ("More" dropdown)
           transition: opacity 100ms;

           // pointy triangle
           &::before {
               content: ;
               position: absolute;
               border: 8px solid transparent;
               border-top: 0;
               border-bottom: 8px solid var(--body-border);
               top: -8px;
               right: 10px;
           }

           &::after {
               content: ;
               position: absolute;
               border: 11px solid transparent;
               border-top: 0;
               border-bottom: 11px solid var(--body-light);
               top: -6.5px;
               right: 7px;
           }

           ul {
               padding: 0;
               list-style: none;
           }

           li {
               display: block; // undo the display: none
               width: 100%;
               font-size: 1.08333em; // 13px
               margin: 0;
               padding: 0;
           }

           // make link span entire dropdown
           li a {
               color: var(--link-color);
               display: block;
               padding: 0.625em;
               box-sizing: border-box;
               background-image: none;
           }

       }

       // show dropdown on username hover
       &:hover .pt-userpage-dropdown {
           display: block;
       }

   }

   // new talk page message
   #pt-mytalk .mw-echo-alert {
       color: #6bc71f;
       background: none;
       font-weight: bold;
   }

}