Guild Wars 2 Wiki:Projects/CSS documentation/noncontent ui- minerva

/** HEADER **/
/* Main CSS stolen (with permission) from FR GW2W's legendary User:IruleManik */

/* Hide text, use an image instead */
.minerva-header .branding-box h1 span,
.minerva-header .branding-box a span {
    color: transparent;
    padding-right: 7em;
    line-height: inherit;
}

.minerva-header .branding-box {
    background: url('/images/c/cb/Mobile_skin_header_logo.png') left/97% no-repeat;
    width: 15.4em;
    opacity: 0.9;
}

.mw-ui-icon-wikimedia-menu-base20::before,
.mw-ui-background-icon-menu {
    filter: invert(180);
}

.minerva-header .search-box .search {
    margin-left: 1em;
}

.minerva-search-form {
    width: unset;
}

/* Default darker (sky) background */
.header-container.header-chrome {
    background: url('/images/3/3b/Mobile_skin_background_dark.jpg') top -40px left /auto repeat-x;
}

/* Below 720px the searchbox collapses, and we have more space - use lighter (fields) background */
@media (max-width: 719px) {
    .header-container.header-chrome {
        background: url('/images/6/6f/Mobile_skin_background_light.jpg') left/cover no-repeat;
    }

}

/** FOOTER **/
/* Background images switch over at <640px, can't have the pyramid from the light image interfering with the logos */
/* Default - lighter (fields) background */
.minerva-footer {
    overflow: auto;
    padding-bottom: 6px;
    background: url('/images/6/6f/Mobile_skin_background_light.jpg') left/cover no-repeat;
}

footer > .post-content > .minerva-footer-logo {
    color: transparent;
    background: url('/images/4/40/Mobile_skin_footer_logo.png') left/37% no-repeat, url('/images/0/08/Mobile_skin_ArenaNet_logo.png') right/20% no-repeat;
    height: 10em;
}

footer > .post-content {
    color: white;
}

footer > .post-content a {
    color: white;
    font-weight: bold;
}

@media screen and (min-width: 720px)
    /* Improve clarity of "View edit history" line in the footer */
    .last-modified-bar {
        background-color: rgba(51, 51, 51, 0.7);
        color: white;
    }
}

/* For narrow screens up to 640px wide */
@media (max-width: 640px) {
    /* Dark to contrast with the white footer icons */
    .minerva-footer {
        background: url('/images/3/3b/Mobile_skin_background_dark.jpg') right/cover no-repeat;
    }

    /* Enlarge the icons a bit on narrow screens (Note: EN wiki logo slightly different size - was 60% on FR, now 45%) */
    footer > .post-content > .minerva-footer-logo {
        background: url('/images/4/40/Mobile_skin_footer_logo.png') left/45% no-repeat, url('/images/0/08/Mobile_skin_ArenaNet_logo.png') right/30% no-repeat;
        height: 7em;
    }

}

/** UI BUTTONS **/
/* Top menu - Sidebar */
.mw-ui-icon-minerva-mainmenu:before {
    background-image: url('/images/f/fe/Mobile_skin_menu_outline.svg');
}

/* Top menu - Notifications */
.mw-ui-icon-wikimedia-bellOutline-base20:before {
    background-image: url('/images/7/7e/Mobile_skin_notification_bell_outline.svg');
}

/* Top menu - Search magnifying glass (narrow screen only) */
.mw-ui-icon-wikimedia-search-base20:before,
.mw-ui-background-icon-search {
    background-image: url('/images/6/6d/Mobile_skin_menu_search.svg');
}

/* Top menu - Close the search window (narrow screen only) */
.mw-ui-icon-mf-close-base20:before {
    background-image: url('/images/e/e4/Mobile_skin_close_outline.svg');
}

/* Top Menu - User profile */
.mw-ui-icon-minerva-userAvatarOutline::before {
    filter: invert(100%) brightness(200%);
}

/* Top Menu - Burger menu */
.mw-ui-icon-wikimedia-menu-base20::before,
.mw-ui-background-icon-menu {
    filter: invert(100%) brightness(200%);
}

/* Sidebar - Community portal */
.mw-ui-icon-minerva-cp:before {
    background-image: url('/images/8/86/Mobile_skin_sidebar_community_portal.svg');
}

/* Sidebar - Recent changes */
.mw-ui-icon-minerva-rc:before {
    background-image: url('/images/6/66/Mobile_skin_sidebar_recent_changes.svg');
}

/* Sidebar - Help center */
.mw-ui-icon-minerva-hc:before {
    background-image: url('/images/c/c2/Mobile_skin_sidebar_help_center.svg');
}

/* Sidebar - Editing guide */
.mw-ui-icon-minerva-eg:before {
    background-image: url('/images/8/84/Mobile_skin_sidebar_editing_guide.svg');
}

/* Sidebar - Admin noticeboard */
.mw-ui-icon-minerva-an:before {
    background-image: url('/images/c/ca/Mobile_skin_sidebar_admin_noticeboard.svg');
}

/* Sidebar - Wiki bug */
.mw-ui-icon-minerva-wb:before {
    background-image: url('/images/1/17/Mobile_skin_sidebar_wiki_bug.svg');
}

/* Footer - History arrow */
.mf-mw-ui-icon-rotate-anti-clockwise::before {
    filter: brightness(200%);
}

/* Language interwiki cancel */
.overlay .header-cancel li button::before {
    background-color: red;
}

/** OTHER UI **/
/* Avoid descending letters in the last edited text being clipped */
footer .last-modified-bar__text {
    line-height: 1.5em;
}

/* Clarify meaning of languages button by displaying text */
.mw-ui-icon-minerva-language-switcher::before {
    font-size: 1.25em;
    width: 1.25em;
    height: 1.25em;
    display: inline-block;
    margin-bottom:-3px;
}

#language-selector a {
    color: #888;
    line-height: 1em;
    font-size: 0.8em;
    display: inline-block;
    overflow: visible;
    width: unset;
    height: unset;
    flex-basis: unset;
}

.content ul {
    list-style-image: url(data:image/gif;base64,R0lGODlhBQANAIAAAGOMnP///yH5BAEAAAEALAAAAAAFAA0AAAIJjI+pu+APo4SpADs=);
}

.mw-ui-input, textarea, pre, xmp, plaintext, listing {
    font-family: monospace;
}

/* Table of contents */
.toctitle.toctitle h2 {
    margin: 0em 1em;
}

/* Editing window */
.editor-container.content {
    height: 90vh;
}

#wikitext-editor {
    height: 100%;
}

/* override mw default which is to try and display these as a full width block element */
.diff tr {
    display: table-row;
}

.diff td {
    display: table-cell;
}