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

html,
body {
    min-height: 100%;
    height: auto !important;
}

html {
    background-color: #F3F3F3;
    background-image: url("/images/3/3c/Skin_footer.png"),
        url("/images/b/b0/Skin_page_bg_gradient.png");
    background-repeat: repeat-x, repeat-x;
    background-position: left bottom -75px, left top;
}

body {
    font-size: 0.8125em;
    line-height: 1.538em;
    width: 100%;
    background: none !important;
}

body div#globalWrapper {
    font-size: 100%;
    background: none !important;
}

div#column-content {
    background-image: url("/images/b/b1/Skin_header_(Janthir_Wilds).png");
    background-position: top left;
    background-repeat: no-repeat;
    background-color: transparent;
    width: 100%;
    position: static;
    min-height: 249px;
}

div#content {
    margin-top: 5.2em !important;
    box-shadow: rgba(0, 0, 0, 0.15) 0 0.1em 0.75em;
    border: 1px solid #CCC;
    border-radius: 0;
    padding: 1.2em 1.5em;
    border-right-width: 0;
}

#bodyContent {
    padding-top: 0.1em;
    position: relative;
}

/** FOOTER **/
#footer {
    background-color: transparent !important;
    margin-left: 12.2em !important;
    padding: 1em !important;
    border-width: 0 !important;
    text-align: left !important;
    font-size: 1em !important;
}

#footer #f-list {
    margin: 0 11em 0 0;
}

#footer li {
    display: block; /* for pages with a history, this prevents the "last edited" message flying about */
    font-size: 0.923em;
}

#footer #f-list #privacy,
#footer #f-list #about,
#footer #f-list #disclaimer,
#footer #f-list #mobileview {
    float: left;
    margin-right: 1em !important;
    margin-top: 0.833em !important;
}

#f-poweredbyico,
#f-copyrightico {
    margin: 30px 6px 0px !important;
}

#footer #f-copyrightico a {
    background-image: url("/images/0/07/ArenaNet_logo.png");
    height: 47px;
    width: 116px;
    display: block;
}

#footer #f-copyrightico img {
    display: none;
}

body:not(.skin--responsive) #f-copyrightico,
body.skin--responsive #f-copyrightico {
    float: right;
}

#f-poweredbyico a {
    margin-left: 0.5em;
}

div#globalWrapper,
input,
select {
    font-family: Arial, sans-serif;
    line-height: 1.538em;
}

input,
select {
    font-size: 1em;
}

div#content #toc {
    margin: 10px 0px;
}

.special li {
    line-height: 1.538em;
}

span.mw-editsection {
    font-family: Arial, sans-serif;
    font-size: 13px !important;
    vertical-align: middle;
}

/** PAGE TABS **/
body:not(.skin--responsive) #p-cactions,
body.skin--responsive #p-cactions {
    font-size: 1em;
    padding: 0;
    margin-left: 0.7em;
    margin-top: 1.7em;
    width: calc(100% - (11.5em + 0.7em)); /* fill page width instead of default 76% */
    z-index: 2; /* shadow for tabs */
}

/* Need to switch the above off in mobile view */
body.skin--responsive #p-cactions.mobile-menu-active {
    padding: unset;
    z-index: 10000;
}

body:not(.skin--responsive) #p-cactions .pBody,
body.skin--responsive #p-cactions .pBody {
    font-size: 0.923em;
    margin: 0;
}

#p-cactions ul {
    margin: 0 0 0 1px;
    list-style-type: none;
    list-style-image: none;
    list-style-position: outside;
}

body:not(.skin--responsive) #p-cactions li.selected,
body:not(.skin--responsive) #p-cactions li,
body.skin--responsive #p-cactions li.selected,
body.skin--responsive #p-cactions li {
    padding: 0;
}

body:not(.skin--responsive) #p-cactions li,
body.skin--responsive #p-cactions li {
    border: 1px solid #AAA;
    border-bottom-color: #CCC;
    background-color: #EEE;
    display: block;
    float: left;
    height: 2.3em;
    line-height: 2.3em;
    margin: 0 0 0 -1px;
}

body:not(.skin--responsive) #p-cactions li#ca-talk,
body.skin--responsive #p-cactions li#ca-talk {
    margin-right: 1.7em;
}

body:not(.skin--responsive) #p-cactions li.selected,
body.skin--responsive #p-cactions li.selected {
    background-color: #FFF;
    background-image: none;
    border: 1px solid #CCC;
    border-bottom-width: 0px;
    font-weight: normal;
    margin: 0 0 0 -1px;
    padding-bottom: 1px !important;
    overflow: visible;
}

body:not(.skin--responsive) #p-cactions li.selected a,
body.skin--responsive #p-cactions li.selected a {
    color: #000;
}

body:not(.skin--responsive) #p-cactions li:hover,
body.skin--responsive #p-cactions li:hover {
    background-color: #F8F8F8;
}

body:not(.skin--responsive) #p-cactions li:first-child,
body:not(.skin--responsive) #p-cactions li#special-articlefeedback,
body:not(.skin--responsive) #p-cactions li:nth-child(4),
body.skin--responsive #p-cactions li:first-child,
body.skin--responsive #p-cactions li#special-articlefeedback,
body.skin--responsive #p-cactions li:nth-child(4) {
    border-top-left-radius: 0.7em;
}

body:not(.skin--responsive) #p-cactions li:nth-child(2),
body:not(.skin--responsive) #p-cactions li:last-child,
body.skin--responsive #p-cactions li:nth-child(2),
body.skin--responsive #p-cactions li:last-child {
    border-top-right-radius: 0.7em;
}

body:not(.skin--responsive) #p-cactions li a,
body:not(.skin--responsive) #p-cactions li a:hover,
body:not(.skin--responsive) #p-cactions li.istalk a,
body:not(.skin--responsive) #p-cactions #ca-addsection a,
body.skin--responsive #p-cactions li a,
body.skin--responsive #p-cactions li a:hover,
body.skin--responsive #p-cactions li.istalk a,
body.skin--responsive #p-cactions #ca-addsection a {
    padding: 0.6em 1em;
    background: none;
}

body:not(.skin--responsive) #p-cactions li.selected a,
body.skin--responsive #p-cactions li.selected a {
    background: none;
}

/** LEFT SIDEBAR **/
#p-logo {
    margin: 0;
}

#p-navigation {
    margin-top: 1.5em;
}

#p-navigation h3 {
    display: none;
}

body:not(.skin--responsive) .portlet,
body.skin--responsive .portlet {
    width: 11em;
    position: relative;
    font-size: 1em;
    margin: 0.833em 0.5em 0.833em;
}

body:not(.skin--responsive) .portlet h5,
body:not(.skin--responsive) .portlet h3,
body.skin--responsive .portlet h5,
body.skin--responsive .portlet h3 {
    color: #4D4D4D;
    font-size: 1em;
    font-weight: bold;
    line-height: 1.333em;
    text-transform: none;
    display: block;
    margin: 0;
    padding: 0.2em 0.9em 0.5em;
    width: 9.2em;
}

body:not(.skin--responsive) .portlet .pBody,
body:not(.skin--responsive) #p-search .pBody,
body.skin--responsive .portlet .pBody,
body.skin--responsive #p-search .pBody {
    border: 0;
    background-color: transparent;
}

body:not(.skin--responsive) .portlet .pBody,
body.skin--responsive .portlet .pBody {
    margin: 0 0.5em;
    padding: 0;
}

.portlet ul {
    font-size: 1em;
    list-style-image: none;
    list-style-type: none;
    margin: 0em 0em 0em 0.5em;
}

.pBody ul {
    padding-inline-start: 0em;
}

.pBody li {
    line-height: 1.667em;
}

body:not(.skin--responsive) #searchInput,
body.skin--responsive #searchInput {
    font-size: 1em;
}

/** PERSONAL PORTLET **/
.pBody {
    font-size: 0.923em;
}

#p-personal {
    text-align: right;
}

body:not(.skin--responsive) #p-personal .pBody,
body.skin--responsive #p-personal .pBody {
    width: auto;
    display: inline-block;
    padding-right: 0.75em;
    border-radius: 0 0 0 0.5em;
    background-color: #FFF;
    margin-left: 13.2em; /* 12em plus compensation for page padding */
}

/* With responsive mode, need to undo the margin otherwise the options in the "personal" menu are invisible */
body.skin--responsive #p-personal.mobile-menu-active .pBody {
    margin-left: unset;
}

body:not(.skin--responsive) #p-personal ul,
body.skin--responsive #p-personal ul {
    padding-left: 0;
    padding-right: 0;
    line-height: 1.667em;
    text-align: left;
}

#p-personal li {
    font-size: 1em;
    margin: 0.5em 0 0.5em 1em;
}

body:not(.skin--responsive) #p-personal li a,
body.skin--responsive #p-personal li a {
    color: #002BB8;
}

#p-personal li a:hover {
    /* padding: 0; -- not sure why */
    background-color: transparent;
}

body:not(.skin--responsive) li#pt-userpage,
body.skin--responsive li#pt-userpage {
    background: none;
    padding-left: 0px !important;
}

/* References */
ol.references > li:target,
sup.reference:target,
cite:target {
    background: #EEF;
}

/* Red cancel button when editing pages, and on Special:Preferences */
.editButtons span.oo-ui-buttonElement-frameless a,
#mw-prefs-restoreprefs a {
    height: 33px;
    border: 1px solid #CCC;
    background-image: linear-gradient(180deg, #FEE 0, #FFD6D6 100%);
}

.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button > span.oo-ui-labelElement-label {
    color: rgb(51, 51, 51);
}

.editButtons span.oo-ui-buttonElement-frameless a:hover {
    border-color: #B55;
}

/** MOBILE LAYOUTS **/
/* Priority 1. Hide SMW and MW icons */
@media screen and (max-width: 1000px) {
    #f-poweredbyico {
        display: none;
    }
}

/* Priority 2. Hide any special tabs */
@media screen and (max-width: 940px) {
    li#special-articlefeedback,
    li#special-diff {
        display: none;
    }
}

/* Priority 3. Hide watch and protect tabs, full width footer, and hide popups */
@media screen and (max-width: 770px) {
    body:not(.skin--responsive) li#ca-watch,
    body:not(.skin--responsive) li#ca-protect,
    body:not(.skin--responsive) li#pt-notifications-alert,
    body:not(.skin--responsive) li#pt-notifications-notice,
    body:not(.skin--responsive) li#pt-watchlist,
    body:not(.skin--responsive) li#utcdate,
    body.skin--responsive li#ca-watch,
    body.skin--responsive li#ca-protect,
    body.skin--responsive li#pt-notifications-alert,
    body.skin--responsive li#pt-notifications-notice,
    body.skin--responsive li#pt-watchlist,
    body.skin--responsive li#utcdate{
        display: none;
    }
}

/* Priority 4. Remove spacing between tabs, hide all page header notifications, convert to flex-box grid */
@media screen and (max-width: 670px) {
    body:not(.skin--responsive) #p-cactions li#ca-talk,
    body.skin--responsive #p-cactions li#ca-talk {
        margin-right: 0;
    }

    body:not(.skin--responsive) #p-cactions li:nth-child(2),
    body:not(.skin--responsive) #p-cactions li:last-child,
    body:not(.skin--responsive) #p-cactions li:first-child,
    body:not(.skin--responsive) #p-cactions li#special-articlefeedback,
    body:not(.skin--responsive) #p-cactions li:nth-child(4),
    body.skin--responsive #p-cactions li:nth-child(2),
    body.skin--responsive #p-cactions li:last-child,
    body.skin--responsive #p-cactions li:first-child,
    body.skin--responsive #p-cactions li#special-articlefeedback,
    body.skin--responsive #p-cactions li:nth-child(4) {
        border-radius: 0;
    }

    li#pt-mycontris,
    .mw-indicators {
        display: none;
    }
}

/* Priority 5. Move footer to left side */
@media screen and (max-width: 550px) {
    #footer {
        margin-left: 0 !important;
    }


    /* Fixes for the responsive mode popup menus */
    body.skin--responsive .portlet.mobile-menu-active,
    body.skin--responsive .portlet.mobile-menu-active#p-cactions,
    body.skin--responsive .mobile-menu-active#sidebar-mobilejs {
        width: unset;
        top: 0.5em;
        left: 0.5em;
        padding: 1em;
        margin: 0em;
    }
  
    body.skin--responsive .mobile-menu-active#sidebar-mobilejs {
        font-size: 1em;
    }
  
    body.skin--responsive .mobile-menu-active ul {
        padding-top: 0;
    }
    
    body.skin--responsive .portlet.mobile-menu-active li,
    body.skin--responsive .portlet.mobile-menu-active#p-personal li,
    body.skin--responsive .portlet.mobile-menu-active#p-cactions li,
    body.skin--responsive .portlet.mobile-menu-active#p-cactions li.selected,
    body.skin--responsive .mobile-menu-active#sidebar-mobilejs li {
        float: unset;
        margin: 5px;
        line-height: unset;
        border: 1px solid #AAA;
        background-color: #EEE;
        display: block;
        height: unset;
    }
    
    body.skin--responsive .portlet.mobile-menu-active .pBody,
    body.skin--responsive .portlet.mobile-menu-active#p-personal .pBody {
        margin: 0;
        padding: 0;
        display: block;
    }
    
    body.skin--responsive .portlet.mobile-menu-active ul,
    body.skin--responsive:not(.monobook-capitalize-all-nouns) .portlet.mobile-menu-active h3 {
        padding: 0;
        margin: 0;
    }
    
    body.skin--responsive:not(.monobook-capitalize-all-nouns) .portlet.mobile-menu-active h3,
    body.skin--responsive:not(.monobook-capitalize-all-nouns) .portlet.mobile-menu-active ul li a,
    body.skin--responsive:not(.monobook-capitalize-all-nouns) #p-personal.mobile-menu-active ul,
    body.skin--responsive:not(.monobook-capitalize-all-nouns) #p-cactions.mobile-menu-active ul li a,
    body.skin--responsive .mobile-menu-active#sidebar-mobilejs ul li a {
        padding: 0.6em 1em;
        text-transform: none;
        width: unset;
    }
}