MediaWiki:Common.css: Difference between revisions

Revision as of 21:01, 14 May 2026

/* ============================================================
   ScholarlyWiki / HandWiki Stage custom Vector layout
   Clean version
   - soft warm page background
   - old sidebar hidden except logo
   - large logo top-left
   - article moved left
   - green vertical page frame starts 3mm lower
   - Portal/Sources/Tools top menus
   - HandWiki-like article typography
   ============================================================ */


/* ============================================================
   Basic page background
   ============================================================ */

html,
body {
    border-top: none !important;
    background: #fffdf4 !important;
}

#content,
.mw-body {
    background-color: #fffdf4 !important;
}


/* ============================================================
   Hide old left sidebar menus, but keep logo
   ============================================================ */

#mw-panel {
    width: 90px !important;
}

#mw-panel .portal,
#mw-panel nav,
#mw-panel .vector-menu-portal,
#mw-panel #p-navigation,
#mw-panel #p-tb {
    display: none !important;
}


/* ============================================================
   Large ScholarlyWiki logo
   ============================================================ */

#p-logo {
    display: block !important;
    position: absolute !important;
    top: -20px !important;
    left: -48px !important;
    width: 225px !important;
    height: 225px !important;
    z-index: 20 !important;
}

#p-logo a {
    width: 225px !important;
    height: 225px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}


/* ============================================================
   Move article left and keep room for logo/menu
   ============================================================ */

#content,
.mw-body {
    margin-left: 45px !important;
    margin-right: 18px !important;
    padding-left: 150px !important;
    padding-right: 28px !important;
    padding-top: 42px !important;
    border: none !important;
}


/* ============================================================
   Green vertical frame lines
   Starts about 3mm lower than the page top
   ============================================================ */

#content,
.mw-body {
    background-image:
        linear-gradient(to bottom, transparent 11px, #0b7a55 11px, #0b7a55 100%),
        linear-gradient(to bottom, transparent 11px, #0b7a55 11px, #0b7a55 100%) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-size: 3px 100%, 3px 100% !important;
    background-position: left top, right top !important;
}


/* ============================================================
   HandWiki-like article typography
   ============================================================ */

body,
.mw-body,
#content,
.mw-parser-output {
    font-family: Helvetica, Arial, Verdana, sans-serif, "Helvetica Neue", "Noto Sans" !important;
    font-size: 14.4px !important;
    line-height: 20.16px !important;
}

.mw-body h1,
.mw-body-content h1,
.firstHeading {
    font-family: Helvetica, Arial, Verdana, sans-serif !important;
    font-weight: 400 !important;
    font-size: 31px !important;
    line-height: 1.25 !important;
    border-bottom: 1px solid #a2a9b1 !important;
}

.mw-body h2 {
    font-family: Helvetica, Arial, Verdana, sans-serif !important;
    font-weight: 400 !important;
    font-size: 24px !important;
    line-height: 1.3 !important;
    border-bottom: 1px solid #a2a9b1 !important;
}

.mw-body h3 {
    font-family: Helvetica, Arial, Verdana, sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
}


/* ============================================================
   Top menu layout
   Portal / Sources / Tools
   ============================================================ */

#p-Portal,
#p-Sources,
#p-Tools,
#p-portal,
#p-sources,
#p-tools {
    display: inline-block !important;
    position: relative !important;
    top: 0 !important;
    margin-top: 8px !important;
    margin-right: 8px !important;
    z-index: 30 !important;
}

#p-Portal,
#p-portal {
    margin-left: 0 !important;
}

#p-Sources,
#p-sources {
    margin-left: 0 !important;
}

#p-Tools,
#p-tools {
    margin-left: 36px !important;
}


/* Portal button: green */
#p-Portal .vector-menu-heading,
#p-portal .vector-menu-heading {
    background: #008577 !important;
    color: #ffffff !important;
    border: 1px solid #006b60 !important;
    padding: 8px 18px !important;
    min-width: 150px !important;
    font-weight: bold !important;
}

/* Sources button: yellow/orange */
#p-Sources .vector-menu-heading,
#p-sources .vector-menu-heading {
    background: #f7bd3f !important;
    color: #000000 !important;
    border: 1px solid #d99b16 !important;
    padding: 8px 18px !important;
    min-width: 150px !important;
    font-weight: bold !important;
}

/* Tools button: yellow-green gradient */
#p-Tools .vector-menu-heading,
#p-tools .vector-menu-heading {
    background: linear-gradient(90deg, #f7bd3f 0%, #008577 100%) !important;
    color: #ffffff !important;
    border: 1px solid #778833 !important;
    padding: 8px 18px !important;
    min-width: 150px !important;
    font-weight: bold !important;
}


/* Dropdown menus */
.vector-menu-content,
.vector-menu-content-list {
    background: #ffffff !important;
    border: 1px solid #a2a9b1 !important;
    z-index: 100 !important;
}

.vector-menu-content-list li a {
    color: #0645ad !important;
}


/* ============================================================
   Top personal tools / search
   ============================================================ */

#p-personal,
.vector-user-links {
    background: transparent !important;
}

#p-search,
.vector-search-box,
.vector-search-box-input,
#searchInput {
    background: #ffffff !important;
}


/* ============================================================
   Keep content boxes clean/readable
   ============================================================ */

.toc,
#toc,
.infobox,
.wikitable,
.catlinks,
.thumbinner,
.mw_metadata {
    background-color: #ffffff !important;
}


/* ============================================================
   Main page / general boxes may be slightly warm if they do not
   already define their own color
   ============================================================ */

.mw-parser-output .plainlinks,
.mw-parser-output .metadata {
    background-color: inherit;
}


/* ============================================================
   Small responsive correction
   ============================================================ */

@media screen and (max-width: 900px) {
    #content,
    .mw-body {
        margin-left: 0 !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    #p-logo {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 120px !important;
        height: 120px !important;
    }

    #p-logo a {
        width: 120px !important;
        height: 120px !important;
    }
}