MediaWiki:Common.css

/***** Assassin's Creed Wiki — Common.css *****/\
/***** Adapted for MediaWiki Vector skin (light theme) *****/\
/***** Replaces the imported Fandom CSS with Vector-compatible styles *****/\
\
/* ==========================================================================\
   Google Fonts\
   ========================================================================== */\
@import url('https://fonts.googleapis.com/css2?family=Aldrich&family=Cinzel&family=Lora&display=swap');\
\
/* ==========================================================================\
   Portable Infobox — Themed for AC Wiki on Vector\
   The extension provides default light-theme styling. We enhance it here\
   with AC Wiki branding (dark blue/gold color scheme).\
   ========================================================================== */\
\
aside.portable-infobox {\
    width: 310px;\
    border: 1px solid #a2a9b1;\
    border-radius: 4px;\
    background-color: #f8f9fa;\
    font-size: 0.85em;\
    overflow: hidden;\
}\
\
.portable-infobox .pi-title {\
    text-align: center;\
    font-size: 1.4em;\
    font-weight: bold;\
    padding: 10px;\
    background-color: #003153;\
    color: #ffffff;\
    border: 0;\
    margin: 0;\
    line-height: 1.4;\
}\
\
.portable-infobox .pi-header {\
    background-color: #003153;\
    color: #ffffff;\
    text-align: center;\
    font-size: 1.1em;\
    font-weight: bold;\
    padding: 6px 10px;\
    border: 0;\
    margin: 0;\
    line-height: 1.3;\
}\
\
.portable-infobox .pi-media {\
    text-align: center;\
    margin: 0;\
}\
\
.portable-infobox .pi-image-thumbnail {\
    max-width: 100%;\
    height: auto;\
}\
\
.portable-infobox .pi-navigation {\
    font-size: 0.9em;\
    text-align: center;\
    padding: 8px 10px;\
    background-color: #eaecf0;\
}\
\
.portable-infobox .pi-data {\
    display: flex;\
    border-bottom: 1px solid #c8ccd1;\
    padding: 5px 10px;\
    box-sizing: border-box;\
}\
\
.portable-infobox .pi-data-label {\
    flex-basis: 92px;\
    font-weight: bold;\
    font-size: inherit;\
    overflow: hidden;\
    word-wrap: break-word;\
    hyphens: none;\
}\
\
.portable-infobox .pi-data-value {\
    flex-grow: 1;\
    word-break: break-word;\
    hyphens: none;\
    padding-left: 10px;\
}\
\
.portable-infobox .pi-data-value ul {\
    margin: 0;\
    padding-left: 1.2em;\
}\
\
.portable-infobox .pi-data-value ul li {\
    text-align: left;\
}\
\
.portable-infobox .pi-group {\
    border-bottom: 1px solid #c8ccd1;\
}\
\
.portable-infobox .pi-group > .pi-item:last-child {\
    border-bottom: 0;\
}\
\
.portable-infobox .pi-caption {\
    color: #72777d;\
    font-style: italic;\
    font-size: 0.9em;\
    text-align: center;\
    padding: 4px 10px;\
}\
\
.portable-infobox > .pi-item:last-child {\
    border-bottom: 0;\
}\
\
/* Smart data layout (used in some AC wiki infoboxes) */\
.pi-smart-data-value.pi-data-value ul,\
.pi-smart-data-value.pi-data-value ul li {\
    text-align: left;\
}\
\
.pi-horizontal-group-item.pi-data-value ul,\
.pi-horizontal-group-item.pi-data-value ul li {\
    text-align: left;\
}\
\
/* ==========================================================================\
   Navigation Boxes (Navboxes)\
   ========================================================================== */\
\
table.navbox {\
    background-color: #fdfdfd;\
    border: 1px solid #aaa;\
    clear: both;\
    font-size: 90%;\
    margin: 1em 0 0;\
    padding: 2px;\
    text-align: center;\
    width: 100%;\
}\
\
table.navbox th {\
    background-color: #ccf;\
    font-size: 120%;\
    padding-left: 1em;\
    padding-right: 1em;\
}\
\
@media print {\
    .navbox {\
        display: none;\
    }\
}\
\
/* ==========================================================================\
   NavFrame (collapsible navigation boxes from German Wikipedia style)\
   ========================================================================== */\
\
div.Boxmerge,\
div.NavFrame {\
    margin: 0;\
    padding: 4px;\
    border: 1px solid #aaa;\
    text-align: center;\
    border-collapse: collapse;\
    font-size: 95%;\
}\
\
div.Boxmerge div.NavFrame {\
    border-style: hidden;\
}\
\
div.NavFrame + div.NavFrame {\
    border-top-style: hidden;\
}\
\
div.NavPic {\
    background-color: #fff;\
    margin: 0;\
    padding: 2px;\
    float: left;\
}\
\
div.NavFrame div.NavHead {\
    height: 1.6em;\
    font-weight: bold;\
    background-color: #ccf;\
    position: relative;\
}\
\
div.NavFrame p,\
div.NavFrame div.NavContent,\
div.NavFrame div.NavContent p {\
    font-size: 100%;\
}\
\
div.NavEnd {\
    margin: 0;\
    padding: 0;\
    line-height: 1px;\
    clear: both;\
}\
\
a.NavToggle {\
    position: absolute;\
    top: 0;\
    right: 3px;\
    font-weight: normal;\
    font-size: smaller;\
}\
\
/* ==========================================================================\
   References\
   ========================================================================== */\
\
ol.references {\
    font-size: 100%;\
}\
\
.references-small {\
    font-size: 90%;\
}\
\
.references-2column {\
    font-size: 90%;\
    column-count: 2;\
}\
\
/* Highlight clicked reference in blue */\
ol.references > li:target,\
sup.reference:target,\
span.citation:target,\
cite:target {\
    background-color: #def;\
}\
\
/* ==========================================================================\
   Table of Contents\
   ========================================================================== */\
\
#toc,\
.toc {\
    background-color: #f8f9fa;\
    border: 1px solid #a2a9b1;\
    padding: 5px;\
}\
\
/* No-number TOC variant */\
.nonumtoc .tocnumber {\
    display: none;\
}\
\
.nonumtoc #toc ul,\
.nonumtoc .toc ul {\
    line-height: 1.5em;\
    list-style: none;\
    margin: 0.3em 0 0;\
    padding: 0;\
}\
\
.nonumtoc #toc ul ul,\
.nonumtoc .toc ul ul {\
    margin: 0 0 0 2em;\
}\
\
/* TOC level limiting */\
.toclimit-2 .toclevel-1 ul,\
.toclimit-3 .toclevel-2 ul,\
.toclimit-4 .toclevel-3 ul,\
.toclimit-5 .toclevel-4 ul,\
.toclimit-6 .toclevel-5 ul,\
.toclimit-7 .toclevel-6 ul {\
    display: none;\
}\
\
/* ==========================================================================\
   Wikitable — Light theme overrides\
   ========================================================================== */\
\
table.wikitable {\
    margin: 1em 1em 1em 0;\
    background: #f8f9fa;\
    border: 1px solid #a2a9b1;\
    border-collapse: collapse;\
}\
\
table.wikitable th,\
table.wikitable td {\
    border: 1px solid #a2a9b1;\
    padding: 0.2em 0.4em;\
}\
\
table.wikitable th {\
    background: #eaecf0;\
    text-align: center;\
}\
\
table.wikitable caption {\
    margin-left: inherit;\
    margin-right: inherit;\
    font-weight: bold;\
}\
\
/* ==========================================================================\
   VG Template (game data tables)\
   ========================================================================== */\
\
.vgr th {\
    background-color: #003153;\
    color: #e1e1e1;\
    border-color: #a2a9b1;\
}\
\
.vgr td {\
    background-color: #f8f9fa;\
    color: #202122;\
    border-color: #a2a9b1;\
}\
\
.vgr tr:hover td {\
    background-color: #eaecf0;\
}\
\
/* ==========================================================================\
   File history tables\
   ========================================================================== */\
\
table.filehistory th {\
    background-color: #eaecf0;\
}\
\
table.filehistory td {\
    background-color: #f8f9fa;\
    border-color: #a2a9b1;\
}\
\
/* ==========================================================================\
   Misc Fixes\
   ========================================================================== */\
\
/* Mark redirects in Special:Allpages and Special:Watchlist */\
.allpagesredirect a,\
.watchlistredir a {\
    color: #888;\
    font-style: italic;\
}\
\
/* Display tagline below header */\
#siteSub {\
    display: inline;\
    font-size: 92%;\
    font-weight: normal;\
}\
\
/* Recent changes: color additions/removals */\
.mw-plusminus-pos {\
    color: #006500;\
}\
\
.mw-plusminus-neg {\
    color: #8b0000;\
}\
\
/* Remove talk link from forum namespace */\
body.ns-110 #ca-talk,\
body.ns-110 #this_talk,\
body.ns-110 #page_tabs li + li {\
    display: none;\
}\
\
/* Transparent background checker on image description pages */\
#file img {\
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEX////MzMw46qqDAAAAD0lEQVQI12P4z8BQARBDAKkC/dnKHb0AAAAASUVORK5CYII=") repeat;\
}\
\
/* Small reference list for Template:Reflist */\
.same-bg {\
    background: none;\
}\
\
/* ==========================================================================\
   Era Icons and WP-REAL icon positioning\
   ========================================================================== */\
\
#title-eraicons {\
    display: inline-flex;\
    flex-wrap: wrap;\
    width: calc(100% - 25px);\
}\
\
#title-wpicon {\
    display: inline-flex;\
    height: 30px;\
}\
\
#title-wpicon .floatright {\
    margin: 0;\
}\
\
.header-icons {\
    margin-bottom: 20px;\
}\
\
#mw-indicator-wp-real {\
    position: absolute;\
    right: 35px;\
}\
\
/* Fix paragraph after Template:Era and Template:WP-REAL */\
#title-eraicons + p,\
.title-wp-real + p {\
    margin-top: 0;\
}\
\
/* ==========================================================================\
   Notice Templates (otheruses, stubs)\
   ========================================================================== */\
\
.otheruses,\
.stubnotice {\
    width: fit-content;\
    margin: 10px auto;\
    border-radius: 7px;\
    font-size: smaller;\
    padding: 0.5em;\
}\
\
.otheruses {\
    background: #c4dff9;\
    border: 1px solid #acbdcd;\
}\
\
.stubnotice {\
    background: #cdcdcd;\
    border: 1px solid #afafaf;\
    color: #000;\
}\
\
.stubnotice a {\
    color: #05769d;\
}\
\
/* ==========================================================================\
   Tabber overrides (TabberNeue extension)\
   ========================================================================== */\
\
.tabber__header {\
    border-bottom: 1px solid #a2a9b1;\
}\
\
/* ==========================================================================\
   Image thumbnails\
   ========================================================================== */\
\
.thumbinner {\
    border-radius: 4px;\
}\
\
/* Remove unnecessary breakline in infobox lists */\
.mw-parser-output ul ul {\
    margin: 1px 0 1px 1.5em;\
}\
\
/* ==========================================================================\
   Mobile responsiveness for infobox\
   ========================================================================== */\
\
@media screen and (max-width: 720px) {\
    aside.portable-infobox {\
        float: none;\
        width: 100%;\
        margin: 0 0 15px 0;\
    }\
\
    .portable-infobox .pi-title {\
        text-align: center;\
    }\
\
    .portable-infobox .pi-data-label {\
        flex-basis: 30%;\
    }\
}

/* Fix gallery-box dark background from Fandom templates */
.gallery-box {
    background-color: #eaf3fb !important;
    border-color: #a2a9b1 !important;
    color: #202122;
}