Contents

MediaWiki:Common.css: Difference between revisions

← Older editNewer edit →

WikiPartner (talk | contribs)

3 user groups
599 edits
No edit summary
No edit summary
Line 1: Line 1:
/* ============================================================
/* ============================================================
   WIKIPARTNER
   WIKIPARTNER
   GLOBAL BRAND + LIGHT / DARK THEME
   LOGGED-IN HAMBURGER USER MENU
============================================================ */
============================================================ */




/* ============================================================
/* ============================================================
   LIGHT THEME VARIABLES
   LOGGED-IN TOP LEVEL
============================================================ */
============================================================ */


:root {
.wp-user-menu-list.wp-is-logged-in {
    --wp-teal: #0F6B65;
     position: relative;
    --wp-teal-dark: #09534E;
     --wp-teal-soft: #EEF6F5;


     --wp-gold: #E8A33D;
     display: flex;


     --wp-blue: #3E7CB1;
     align-items: center;


     --wp-navy: #12233F;
     justify-content: flex-end;


     --wp-charcoal: #2B2B2B;
     gap: 8px;


     --wp-cream: #FAF7F2;
     flex-wrap: nowrap;
}


    --wp-text: #2B2B2B;
    --wp-muted: #6D7378;


    --wp-border: #DDDAD3;
/* Username remains visible */


    --wp-page-bg: #FAF9F7;
.wp-user-menu-list.wp-is-logged-in > #pt-userpage {
    display: flex;


     --wp-surface: #FFFFFF;
     align-items: center;
    --wp-surface-soft: #FAF7F2;
 
    --wp-heading: #12233F;
}
}




/* ============================================================
.wp-user-menu-list.wp-is-logged-in > #pt-userpage > a {
  DARK THEME VARIABLES
    min-height: 34px;
============================================================ */


html.wp-theme-dark {
     padding:
     color-scheme: dark;
        8px
        11px;


     --wp-teal: #69C9BD;
     display: inline-flex;
    --wp-teal-dark: #91DDD4;
    --wp-teal-soft: #18332F;


     --wp-gold: #E8B55D;
     align-items: center;


     --wp-blue: #82B6E1;
     background: transparent;


     --wp-navy: #F3E8D0;
     border: 0;


     --wp-charcoal: #E6ECEA;
     color: var(--wp-teal);
 
    --wp-cream: #142023;
 
    --wp-text: #E6ECEA;
    --wp-muted: #AAB6B4;
 
    --wp-border: #2C4043;


     --wp-page-bg: #0B1416;
     font-size: 12px;


     --wp-surface: #111D20;
     font-weight: 700;
    --wp-surface-soft: #162528;


     --wp-heading: #F0E8D8;
     text-decoration: none !important;
}
}




/* ============================================================
.wp-user-menu-list.wp-is-logged-in > #pt-userpage > a:hover {
  BASE
    background:
============================================================ */
        var(--wp-teal-soft);


body.skin-wikipartner {
    border-radius: 7px;
    background: var(--wp-page-bg);


     color: var(--wp-text);
     color:
 
        var(--wp-teal-dark);
    font-family:
        Inter,
        Arial,
        sans-serif;
 
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}
}




/* ============================================================
/* ============================================================
   HEADINGS
   DROPDOWN WRAPPER
============================================================ */
============================================================ */


body.skin-wikipartner .mw-parser-output h1,
.wp-user-dropdown {
body.skin-wikipartner .mw-parser-output h2,
     position: relative;
body.skin-wikipartner .mw-parser-output h3,
body.skin-wikipartner .mw-parser-output h4,
body.skin-wikipartner .firstHeading {
     color: var(--wp-heading);


     font-family:
     margin: 0 !important;
        "Source Serif 4",
    padding: 0 !important;
        Georgia,
        serif;
}


    display: flex;


/* ============================================================
    align-items: center;
  LINKS
============================================================ */


body.skin-wikipartner a {
     list-style: none !important;
     color: var(--wp-teal);
}
 
 
body.skin-wikipartner a:hover {
    color: var(--wp-teal-dark);
}
}




/* ============================================================
/* ============================================================
   MAIN PAGE AREAS
   HAMBURGER BUTTON
============================================================ */
============================================================ */


body.skin-wikipartner .wp-page {
.wp-user-menu-trigger {
     color: var(--wp-text);
     width: 36px;
}
    height: 36px;


    margin: 0;
    padding: 0;


body.skin-wikipartner .wp-content {
     display: inline-flex;
     color: var(--wp-text);
}


    align-items: center;
    justify-content: center;


body.skin-wikipartner .wp-article-body {
     appearance: none;
     color: var(--wp-text);
}


    cursor: pointer;


/* ============================================================
     background:
  INFOBOX
        var(--wp-teal-soft);
============================================================ */
 
body.skin-wikipartner .infobox {
     background: var(--wp-surface-soft) !important;
 
    color: var(--wp-text) !important;


     border:
     border:
         1px solid
         1px solid
         var(--wp-border) !important;
         #CEE0DB;
}


    border-radius: 8px;


body.skin-wikipartner .infobox th {
     color:
     background: var(--wp-teal-soft) !important;
        var(--wp-teal);


     color: var(--wp-heading) !important;
     transition:
}
        background 0.15s ease,
 
        color 0.15s ease,
 
        border-color 0.15s ease,
body.skin-wikipartner .infobox td {
        transform 0.15s ease;
    color: var(--wp-text) !important;
}
 
 
/* ============================================================
  TABLES
============================================================ */
 
body.skin-wikipartner .mw-parser-output table:not(.infobox) {
    color: var(--wp-text);
 
    border-color: var(--wp-border);
}
 
 
html.wp-theme-dark
body.skin-wikipartner
.mw-parser-output table:not(.infobox) th {
    background: #17272A;
 
    color: var(--wp-heading);
 
    border-color: var(--wp-border);
}
}




html.wp-theme-dark
.wp-user-menu-trigger:hover {
body.skin-wikipartner
.mw-parser-output table:not(.infobox) td {
    background: var(--wp-surface);
 
    color: var(--wp-text);
 
    border-color: var(--wp-border);
}
 
 
/* ============================================================
  HEADER — DARK MODE
============================================================ */
 
html.wp-theme-dark
body.skin-wikipartner
.wp-site-header {
     background:
     background:
         rgba(17, 29, 32, 0.98) !important;
         #E5F1EE;


     border-color:
     border-color:
        var(--wp-border) !important;
         #B7D3CC;
 
    border-bottom-color:
        var(--wp-teal) !important;
 
    box-shadow:
        0 5px 22px
        rgba(0, 0, 0, 0.27);
}
 
 
/* ============================================================
  SEARCH — DARK MODE
============================================================ */
 
html.wp-theme-dark
body.skin-wikipartner
.wp-search {
    background:
         #142225 !important;
 
    border-color:
        var(--wp-border) !important;
}
 
 
html.wp-theme-dark
body.skin-wikipartner
.wp-search input[type="search"],
html.wp-theme-dark
body.skin-wikipartner
.wp-search input[type="text"] {
    background:
        transparent !important;


     color:
     color:
         var(--wp-text) !important;
         var(--wp-teal-dark);
}
}




html.wp-theme-dark
.wp-user-menu-trigger:active {
body.skin-wikipartner
     transform:
.wp-search input::placeholder {
        scale(0.95);
     color: #8FA09D !important;
}
}




html.wp-theme-dark
.wp-user-menu-trigger:focus-visible {
body.skin-wikipartner
     outline:
.wp-search button {
         2px solid
     background:
         var(--wp-gold);
         #142225 !important;
 
    color:
         var(--wp-teal) !important;


     border-left-color:
     outline-offset: 2px;
        var(--wp-border) !important;
}
 
 
html.wp-theme-dark
body.skin-wikipartner
.wp-search button:hover {
    background:
        var(--wp-teal-soft) !important;
 
    color:
        var(--wp-teal-dark) !important;
}
}




/* ============================================================
/* ============================================================
   SEARCH SUGGESTIONS — DARK MODE
   THREE HORIZONTAL LINES
============================================================ */
============================================================ */


html.wp-theme-dark
.wp-menu-bars {
body.skin-wikipartner
    width: 17px;
.wp-search-suggestions {
    height: 14px;
     background:
 
        #111D20 !important;
     display: flex;


     border-color:
     flex-direction: column;
        var(--wp-border) !important;


     box-shadow:
     justify-content: space-between;
        0 14px 40px
        rgba(0, 0, 0, 0.4);
}
}




html.wp-theme-dark
.wp-menu-bars > span {
body.skin-wikipartner
     width: 100%;
.wp-search-suggestion,
    height: 2px;
html.wp-theme-dark
body.skin-wikipartner
.wp-search-suggestions a {
     color:
        var(--wp-text) !important;
}


    display: block;


html.wp-theme-dark
body.skin-wikipartner
.wp-search-suggestion:hover,
html.wp-theme-dark
body.skin-wikipartner
.wp-search-suggestions a:hover,
html.wp-theme-dark
body.skin-wikipartner
.wp-search-suggestion.is-active {
     background:
     background:
         var(--wp-teal-soft) !important;
         currentColor;


     color:
     border-radius: 999px;
        var(--wp-teal) !important;
}


 
    transition:
/* ============================================================
        transform 0.18s ease,
  SIDEBARS — DARK MODE
        opacity 0.18s ease;
============================================================ */
 
html.wp-theme-dark
body.skin-wikipartner
.wp-left-sidebar,
 
html.wp-theme-dark
body.skin-wikipartner
.wp-right-sidebar {
    color:
        var(--wp-text);
}
}




html.wp-theme-dark
/*
body.skin-wikipartner
  Cute small animation when menu opens.
.wp-sidebar-box {
*/
    background:
        var(--wp-surface) !important;


    color:
.wp-user-dropdown.is-open
        var(--wp-text) !important;
.wp-menu-bars > span:nth-child(1) {
 
     transform:
     border-color:
         translateY(6px)
         var(--wp-border) !important;
        rotate(45deg);
}
}




html.wp-theme-dark
.wp-user-dropdown.is-open
body.skin-wikipartner
.wp-menu-bars > span:nth-child(2) {
.wp-sidebar-title {
     opacity: 0;
     color:
        var(--wp-heading) !important;
}
}




html.wp-theme-dark
.wp-user-dropdown.is-open
body.skin-wikipartner
.wp-menu-bars > span:nth-child(3) {
.wp-sidebar-static-item {
     transform:
     color:
         translateY(-6px)
         var(--wp-muted) !important;
        rotate(-45deg);
}
}




/* ============================================================
/* ============================================================
   ARTICLE
   DROPDOWN MENU
============================================================ */
============================================================ */


html.wp-theme-dark
.wp-user-dropdown-menu {
body.skin-wikipartner
     position: absolute;
.wp-content {
     color:
        var(--wp-text) !important;
}


    top: calc(100% + 10px);
    right: 0;


html.wp-theme-dark
    z-index: 1000;
body.skin-wikipartner
.wp-article-header {
    color:
        var(--wp-text);
}


    width: 210px;


html.wp-theme-dark
    margin: 0;
body.skin-wikipartner
     padding: 6px;
.wp-article-body {
     color:
        var(--wp-text) !important;
}


    display: block;


html.wp-theme-dark
    list-style: none;
body.skin-wikipartner
.mw-parser-output {
    color:
        var(--wp-text) !important;
}


    background:
        var(--wp-surface);


/* ============================================================
    border:
  MEDIAWIKI CONTENT
        1px solid
============================================================ */
        var(--wp-border);


html.wp-theme-dark
    border-radius: 10px;
body.skin-wikipartner
.mw-body-content {
    color:
        var(--wp-text) !important;
}


 
    box-shadow:
html.wp-theme-dark
         0 12px 32px
body.skin-wikipartner
         rgba(18, 35, 63, 0.14);
.mw-body {
    background:
         transparent !important;
 
    color:
         var(--wp-text) !important;
}
}




/* ============================================================
.wp-user-dropdown-menu[hidden] {
  FORMS
     display: none !important;
============================================================ */
 
html.wp-theme-dark
body.skin-wikipartner
input,
 
html.wp-theme-dark
body.skin-wikipartner
textarea,
 
html.wp-theme-dark
body.skin-wikipartner
select {
     background:
        #142225;
 
    color:
        var(--wp-text);
 
    border-color:
        var(--wp-border);
}
}




/* ============================================================
/* ============================================================
   CODE / PRE
   MENU ITEMS
============================================================ */
============================================================ */


html.wp-theme-dark
.wp-user-dropdown-menu > li {
body.skin-wikipartner
    width: 100%;
pre,


html.wp-theme-dark
    margin: 0 !important;
body.skin-wikipartner
     padding: 0 !important;
code {
     background:
        #152326;


     color:
     display: block;
        #E2EAE8;


     border-color:
     list-style: none !important;
        var(--wp-border);
}
}




/* ============================================================
.wp-user-dropdown-menu > li::before,
  HORIZONTAL RULES
.wp-user-dropdown-menu > li::after {
============================================================ */
    display: none !important;


html.wp-theme-dark
     content: none !important;
body.skin-wikipartner
hr {
     border-color:
        var(--wp-border);
}
}




/* ============================================================
/* ============================================================
   FOOTER — DARK MODE
   MENU LINKS
============================================================ */
============================================================ */


html.wp-theme-dark
.wp-user-dropdown-menu > li > a {
body.skin-wikipartner
     width: 100%;
.wp-footer {
     background:
        #0E191B !important;


     color:
     min-height: 38px;
        var(--wp-muted) !important;


     border-color:
     padding:
         var(--wp-border) !important;
         9px
}
         11px;
 
 
html.wp-theme-dark
body.skin-wikipartner
.wp-footer a {
    color:
         var(--wp-teal) !important;
}
 
 
/* ============================================================
  USER MENU
============================================================ */
 
body.skin-wikipartner
.wp-user-menu-list {
    margin: 0;
    padding: 0;


     display: flex;
     display: flex;
Line 538: Line 295:
     align-items: center;
     align-items: center;


     justify-content: flex-end;
     border: 0 !important;


     gap: 7px;
     border-radius: 7px;


     list-style: none;
     background:
}
        transparent !important;


    color:
        var(--wp-text) !important;


body.skin-wikipartner
    font-size: 12px;
.wp-user-menu-list > li {
    margin: 0;
    padding: 0;


     display: flex;
     font-weight: 500;


     align-items: center;
     line-height: 1.25;
 
    list-style: none;
}


    text-align: left;


/* ============================================================
    white-space: normal;
  USER LINKS — DARK MODE
============================================================ */


html.wp-theme-dark
    text-decoration: none !important;
body.skin-wikipartner
.wp-user-menu-list > li > a {
    color:
        var(--wp-teal) !important;
}
}




html.wp-theme-dark
.wp-user-dropdown-menu > li > a:hover {
body.skin-wikipartner
.wp-user-menu-list > li > a:hover {
     background:
     background:
         var(--wp-teal-soft) !important;
         var(--wp-teal-soft) !important;
    border-color:
        #31514D !important;


     color:
     color:
Line 585: Line 328:




html.wp-theme-dark
/* ============================================================
body.skin-wikipartner
  LOG OUT
.wp-user-menu-list #pt-userpage > a,
============================================================ */


html.wp-theme-dark
.wp-user-dropdown-menu #pt-logout > a {
body.skin-wikipartner
     margin-top: 4px;
.wp-user-menu-list #pt-createaccount > a {
     background:
        var(--wp-teal-soft) !important;


     border-color:
     border-top:
         #31514D !important;
         1px solid
        var(--wp-border) !important;


     color:
     border-radius:
         var(--wp-teal-dark) !important;
         0
        0
        7px
        7px;
}
}




/* ============================================================
/* ============================================================
   THEME TOGGLE ITEM
   THEME INSIDE LOGGED-IN MENU
============================================================ */
============================================================ */


.wp-user-dropdown-menu
.wikipartner-theme-item {
.wikipartner-theme-item {
     display: flex;
     width: 100%;
 
    align-items: center;
 
    justify-content: center;
 
    margin:
        0
        1px
        0
        0 !important;
 
    padding: 0 !important;


     list-style: none !important;
     margin: 0 !important;
}
}




/* ============================================================
.wp-user-dropdown-menu
  THEME TOGGLE BUTTON
.wikipartner-theme-toggle {
============================================================ */
    width: 100% !important;
    height: 38px !important;


.wikipartner-theme-toggle {
    min-height: 38px;
    width: 34px;
    height: 34px;


     flex: 0 0 34px;
     margin: 0 !important;


     margin: 0;
     padding:
    padding: 0;
        8px
        11px !important;


     display: inline-flex;
     display: flex !important;


     align-items: center;
     align-items: center;
     justify-content: center;
     justify-content: flex-start !important;
 
    appearance: none;


     cursor: pointer;
     gap: 10px;


     border:
     border:
         1px solid
         0 !important;
        rgba(179, 137, 56, 0.35);


     border-radius: 50%;
     border-radius:
        7px !important;


     background:
     background:
         linear-gradient(
         transparent !important;
            145deg,
            #FFFDF7,
            #F6EEDC
        );


     color: #155E58;
     color:
        var(--wp-text) !important;


     box-shadow:
     box-shadow:
         0 2px 8px
         none !important;
        rgba(18, 35, 63, 0.08),
 
        inset
    transform:
        0
         none !important;
        0
 
         0
    font-size: 12px;
        1px
        rgba(255, 255, 255, 0.6);


     transition:
     font-weight: 500;
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease;
}
}




/* ============================================================
.wp-user-dropdown-menu
  THEME BUTTON HOVER
============================================================ */
 
.wikipartner-theme-toggle:hover {
.wikipartner-theme-toggle:hover {
     transform:
     background:
         translateY(-1px)
         var(--wp-teal-soft) !important;
        rotate(-6deg);


     border-color:
     color:
         rgba(179, 137, 56, 0.65);
         var(--wp-teal-dark) !important;


     box-shadow:
     box-shadow:
         0 5px 14px
         none !important;
        rgba(18, 35, 63, 0.13),
        0 0 0 3px
        rgba(232, 163, 61, 0.08);
}


.wikipartner-theme-toggle:active {
     transform:
     transform:
         translateY(0)
         none !important;
        scale(0.93);
}
}




.wikipartner-theme-toggle:focus-visible {
.wp-user-dropdown-menu
    outline:
        2px solid
        var(--wp-gold);
 
    outline-offset: 3px;
}
 
 
/* ============================================================
  THEME ICON
============================================================ */
 
.wp-theme-icon {
.wp-theme-icon {
     width: 18px;
     width: 18px;
    height: 18px;
    display: flex;


     align-items: center;
     flex: 0 0 18px;
    justify-content: center;
}
}




.wp-theme-icon svg {
.wp-theme-menu-label {
     width: 18px;
     display: none;
    height: 18px;
}


    display: block;


    fill: none;
/*
  Show the text Dark mode / Light mode
  only when the theme button is inside
  the logged-in hamburger menu.
*/


     stroke: currentColor;
.wp-user-dropdown-menu
.wp-theme-menu-label {
     display: inline;
}


    stroke-width: 1.75;


    stroke-linecap: round;
/* ============================================================
  LOGGED-OUT THEME BUTTON
============================================================ */


    stroke-linejoin: round;
/*
}
  Logged out:
  Create account | moon/sun | Log in


  Hide the text label so only the cute
  round icon remains.
*/


.wp-theme-star {
.wp-user-menu-list.wp-is-logged-out
    stroke-width: 1.45;
.wp-theme-menu-label {
}
     display: none;
 
 
.wp-theme-star-small {
     opacity: 0.72;
}
}




/* ============================================================
/* ============================================================
   DARK THEME BUTTON
   DARK MODE HAMBURGER
============================================================ */
============================================================ */


html.wp-theme-dark
html.wp-theme-dark
.wikipartner-theme-toggle {
.wp-user-menu-trigger {
     background:
     background:
         linear-gradient(
         #18332F;
            145deg,
 
            #1B3033,
    border-color:
            #101E20
        #31514D;
        );


     color:
     color:
         #F0BC60;
         #69C9BD;
}
 
 
html.wp-theme-dark
.wp-user-menu-trigger:hover {
    background:
        #20413C;


     border-color:
     border-color:
         rgba(232, 181, 93, 0.38);
         #42645F;


     box-shadow:
     color:
         0 3px 12px
         #91DDD4;
        rgba(0, 0, 0, 0.34),
        inset
        0
        0
        0
        1px
        rgba(255, 255, 255, 0.025);
}
}




html.wp-theme-dark
html.wp-theme-dark
.wikipartner-theme-toggle:hover {
.wp-user-dropdown-menu {
     color:
     background:
         #FFD17B;
         #111D20;


     border-color:
     border-color:
         rgba(232, 181, 93, 0.68);
         var(--wp-border);


     box-shadow:
     box-shadow:
         0 5px 16px
         0 14px 38px
         rgba(0, 0, 0, 0.4),
         rgba(0, 0, 0, 0.38);
        0 0 0 3px
        rgba(232, 181, 93, 0.08);
}
}


Line 814: Line 512:
@media (max-width: 700px) {
@media (max-width: 700px) {


     .wikipartner-theme-toggle {
     .wp-user-menu-trigger {
         width: 31px;
         width: 33px;
         height: 31px;
         height: 33px;


         flex-basis: 31px;
         border-radius: 7px;
     }
     }




     .wp-theme-icon,
     .wp-user-dropdown-menu {
     .wp-theme-icon svg {
        width: 195px;
         width: 16px;
 
         height: 16px;
        right: 0;
    }
 
 
     .wp-user-menu-list.wp-is-logged-in
    > #pt-userpage > a {
         max-width: 140px;
 
         overflow: hidden;
 
        text-overflow: ellipsis;
 
        white-space: nowrap;
     }
     }


}
}

Revision as of 23:30, 19 August 2026

/* ============================================================
   WIKIPARTNER
   LOGGED-IN HAMBURGER USER MENU
============================================================ */


/* ============================================================
   LOGGED-IN TOP LEVEL
============================================================ */

.wp-user-menu-list.wp-is-logged-in {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 8px;

    flex-wrap: nowrap;
}


/* Username remains visible */

.wp-user-menu-list.wp-is-logged-in > #pt-userpage {
    display: flex;

    align-items: center;
}


.wp-user-menu-list.wp-is-logged-in > #pt-userpage > a {
    min-height: 34px;

    padding:
        8px
        11px;

    display: inline-flex;

    align-items: center;

    background: transparent;

    border: 0;

    color: var(--wp-teal);

    font-size: 12px;

    font-weight: 700;

    text-decoration: none !important;
}


.wp-user-menu-list.wp-is-logged-in > #pt-userpage > a:hover {
    background:
        var(--wp-teal-soft);

    border-radius: 7px;

    color:
        var(--wp-teal-dark);
}


/* ============================================================
   DROPDOWN WRAPPER
============================================================ */

.wp-user-dropdown {
    position: relative;

    margin: 0 !important;
    padding: 0 !important;

    display: flex;

    align-items: center;

    list-style: none !important;
}


/* ============================================================
   HAMBURGER BUTTON
============================================================ */

.wp-user-menu-trigger {
    width: 36px;
    height: 36px;

    margin: 0;
    padding: 0;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    appearance: none;

    cursor: pointer;

    background:
        var(--wp-teal-soft);

    border:
        1px solid
        #CEE0DB;

    border-radius: 8px;

    color:
        var(--wp-teal);

    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}


.wp-user-menu-trigger:hover {
    background:
        #E5F1EE;

    border-color:
        #B7D3CC;

    color:
        var(--wp-teal-dark);
}


.wp-user-menu-trigger:active {
    transform:
        scale(0.95);
}


.wp-user-menu-trigger:focus-visible {
    outline:
        2px solid
        var(--wp-gold);

    outline-offset: 2px;
}


/* ============================================================
   THREE HORIZONTAL LINES
============================================================ */

.wp-menu-bars {
    width: 17px;
    height: 14px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;
}


.wp-menu-bars > span {
    width: 100%;
    height: 2px;

    display: block;

    background:
        currentColor;

    border-radius: 999px;

    transition:
        transform 0.18s ease,
        opacity 0.18s ease;
}


/*
   Cute small animation when menu opens.
*/

.wp-user-dropdown.is-open
.wp-menu-bars > span:nth-child(1) {
    transform:
        translateY(6px)
        rotate(45deg);
}


.wp-user-dropdown.is-open
.wp-menu-bars > span:nth-child(2) {
    opacity: 0;
}


.wp-user-dropdown.is-open
.wp-menu-bars > span:nth-child(3) {
    transform:
        translateY(-6px)
        rotate(-45deg);
}


/* ============================================================
   DROPDOWN MENU
============================================================ */

.wp-user-dropdown-menu {
    position: absolute;

    top: calc(100% + 10px);
    right: 0;

    z-index: 1000;

    width: 210px;

    margin: 0;
    padding: 6px;

    display: block;

    list-style: none;

    background:
        var(--wp-surface);

    border:
        1px solid
        var(--wp-border);

    border-radius: 10px;

    box-shadow:
        0 12px 32px
        rgba(18, 35, 63, 0.14);
}


.wp-user-dropdown-menu[hidden] {
    display: none !important;
}


/* ============================================================
   MENU ITEMS
============================================================ */

.wp-user-dropdown-menu > li {
    width: 100%;

    margin: 0 !important;
    padding: 0 !important;

    display: block;

    list-style: none !important;
}


.wp-user-dropdown-menu > li::before,
.wp-user-dropdown-menu > li::after {
    display: none !important;

    content: none !important;
}


/* ============================================================
   MENU LINKS
============================================================ */

.wp-user-dropdown-menu > li > a {
    width: 100%;

    min-height: 38px;

    padding:
        9px
        11px;

    display: flex;

    align-items: center;

    border: 0 !important;

    border-radius: 7px;

    background:
        transparent !important;

    color:
        var(--wp-text) !important;

    font-size: 12px;

    font-weight: 500;

    line-height: 1.25;

    text-align: left;

    white-space: normal;

    text-decoration: none !important;
}


.wp-user-dropdown-menu > li > a:hover {
    background:
        var(--wp-teal-soft) !important;

    color:
        var(--wp-teal-dark) !important;
}


/* ============================================================
   LOG OUT
============================================================ */

.wp-user-dropdown-menu #pt-logout > a {
    margin-top: 4px;

    border-top:
        1px solid
        var(--wp-border) !important;

    border-radius:
        0
        0
        7px
        7px;
}


/* ============================================================
   THEME INSIDE LOGGED-IN MENU
============================================================ */

.wp-user-dropdown-menu
.wikipartner-theme-item {
    width: 100%;

    margin: 0 !important;
}


.wp-user-dropdown-menu
.wikipartner-theme-toggle {
    width: 100% !important;
    height: 38px !important;

    min-height: 38px;

    margin: 0 !important;

    padding:
        8px
        11px !important;

    display: flex !important;

    align-items: center;
    justify-content: flex-start !important;

    gap: 10px;

    border:
        0 !important;

    border-radius:
        7px !important;

    background:
        transparent !important;

    color:
        var(--wp-text) !important;

    box-shadow:
        none !important;

    transform:
        none !important;

    font-size: 12px;

    font-weight: 500;
}


.wp-user-dropdown-menu
.wikipartner-theme-toggle:hover {
    background:
        var(--wp-teal-soft) !important;

    color:
        var(--wp-teal-dark) !important;

    box-shadow:
        none !important;

    transform:
        none !important;
}


.wp-user-dropdown-menu
.wp-theme-icon {
    width: 18px;

    flex: 0 0 18px;
}


.wp-theme-menu-label {
    display: none;
}


/*
   Show the text Dark mode / Light mode
   only when the theme button is inside
   the logged-in hamburger menu.
*/

.wp-user-dropdown-menu
.wp-theme-menu-label {
    display: inline;
}


/* ============================================================
   LOGGED-OUT THEME BUTTON
============================================================ */

/*
   Logged out:
   Create account | moon/sun | Log in

   Hide the text label so only the cute
   round icon remains.
*/

.wp-user-menu-list.wp-is-logged-out
.wp-theme-menu-label {
    display: none;
}


/* ============================================================
   DARK MODE HAMBURGER
============================================================ */

html.wp-theme-dark
.wp-user-menu-trigger {
    background:
        #18332F;

    border-color:
        #31514D;

    color:
        #69C9BD;
}


html.wp-theme-dark
.wp-user-menu-trigger:hover {
    background:
        #20413C;

    border-color:
        #42645F;

    color:
        #91DDD4;
}


html.wp-theme-dark
.wp-user-dropdown-menu {
    background:
        #111D20;

    border-color:
        var(--wp-border);

    box-shadow:
        0 14px 38px
        rgba(0, 0, 0, 0.38);
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 700px) {

    .wp-user-menu-trigger {
        width: 33px;
        height: 33px;

        border-radius: 7px;
    }


    .wp-user-dropdown-menu {
        width: 195px;

        right: 0;
    }


    .wp-user-menu-list.wp-is-logged-in
    > #pt-userpage > a {
        max-width: 140px;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;
    }

}
Retrieved from "https://en.wikipartner.org/index.php?title=MediaWiki:Common.css&oldid=110"