MediaWiki:Mainpage.css

/* =================================  March 2019 redesign

Kept in a separate CSS so that changes to it don't clutter page histories of main CSSs. =================================

Color palette from Ubisoft

000000 black 545456 dark grey ff6A13 orange (headers and link colors)

NO true white in the palette: d1d3d4 "white", yet really grey f8f8f9 "white", yet lighter grey background skin

D18D66 is redlink color (desaturated version of FF6A13)

Font theory (Ubisoft analogues)

Main header: Francois One Subheaders: Changa (uppercase, bold) Body: Changa (normal weight, case)



/* Redlink color has to be changed because this is a dark-themed wiki. Need redlinks to have contrast with dark background */ .WikiaMainContent a.new, .WikiaMainContent a.new:visited { color:#D18D66!important; } /* General mainpage qualities */ .mainpage-wrap { font-family:changa; } .mainpage-wrap a, .mainpage-wrap a:visited, .mainpage-wrap a:link { /* placeholder */ } .mainpage-wrap .wikia-gallery-caption-within .lightbox-caption a:visited, .mainpage-wrap .wikia-gallery-caption-within .lightbox-caption a:link, .mainpage-wrap .wikia-gallery-caption-within .lightbox-caption, .mainpage-wrap .wikia-gallery-caption-below .lightbox-caption a:visited, .mainpage-wrap .wikia-gallery-caption-below .lightbox-caption a:link, .mainpage-wrap .wikia-gallery-caption-below .lightbox-caption { letter-spacing:0; font-weight:normal; text-transform:uppercase; line-height:150%; font-family:changa; } .mainpage .wikia-gallery-item .lightbox-caption { background:transparent; margin-bottom:5px; font-size:18px; text-decoration:none; font-family:changa; }

.mainpage .article-thumb { margin-top:0px; } .mainpage .WikiaArticle a.external:after { display:none; }

.mainpage .WikiaPage .page-header__separator { border-color:#f8f8f9; }

/* ==========  Left rail ========== */

/* Left rail modules */ .mainpage-box-welcome, .mainpage-box-characters, .mainpage-box-featured-videos, .mainpage-box-patches { width:670px; text-align:left; margin:0 auto; } .mainpage-box-characters, .mainpage-box-featured-videos { margin-top:50px; }

.mainpage-box-featured-videos { margin-top:30px; }

/* Left rail headers */ .mainpage-box-welcome .header, .mainpage-box-characters .header, .mainpage-box-featured-videos .header, .mainpage-box-patches .header { text-align:left; font-size:24px; text-transform:uppercase; letter-spacing:2px; margin:0 auto 20px auto; color:#ff6813; font-family:changa; line-height:110%; } .mainpage-box-welcome .header { font-family:"Francois One"; font-size:50px!important; letter-spacing:3px; } .mainpage-box-welcome .subheader { font-size:25px; line-height:150%; width:420px; margin:0 auto; } .mainpage-box-welcome .description { width:420px; padding:20px 0 20px 0; line-height:150%; margin:0 auto; } /* Left rail header exceptions */ .mainpage-box-welcome .header { font-size:72px; line-height:100%; } /* ==========  Right rail ========== */ /* Right rail modules */ .mainpage-box-share, .mainpage-box-about, .mainpage-box-blogs, .mainpage-box-poll, .mainpage-box-discussions { margin:50px auto; padding:0; }

.mainpage-box-about { padding:25px; background:#ff6a13; line-height:130%; color:black; }

/** Share module **/ .mainpage-box-share .icons { text-align: center; margin:15px auto; } .mainpage-box-share .icon { display: inline; margin-right:5px; } /** Discussions module **/ .mainpage .discussion-module { display:none /* Turns off standard module to give deference to the bespoke one here */ } .mainpage .embeddable-discussions-module { border:none; background:transparent; padding:5px; } .mainpage .embeddable-discussions-heading { display:none; } .mainpage .embeddable-discussions-show-all { display:none; } .mainpage .embeddable-discussions-show-all a, .mainpage .embeddable-discussions-show-all a:link, .mainpage .embeddable-discussions-show-all a:visited { display:none; } .mainpage .embeddable-discussions-module .embeddable-discussions-post-detail { background-color: transparent; border:1px solid #f8f8f9; margin:0 0 20px 0; padding:5px; } .mainpage .embeddable-discussions-module .embeddable-discussions-reply-icon-tiny path, .mainpage .embeddable-discussions-module .embeddable-discussions-upvote-icon-tiny path, .mainpage .embeddable-discussions-module .embeddable-discussions-reply-icon path, .mainpage .embeddable-discussions-module .embeddable-discussions-upvote-icon path { fill: #f8f8f9; } .mainpage .embeddable-discussions-module .embeddable-discussions-post-actions { border-top-color:#f8f8f9 } .mainpage .embeddable-discussions-module .embeddable-discussions-post-actions a, .mainpage .embeddable-discussions-module .embeddable-discussions-post-counters, .mainpage .embeddable-discussions-module .avatar-details, .mainpage .embeddable-discussions-module .embeddable-discussions-timestamp, .embeddable-discussions-module .embeddable-discussions-forum { color:#f8f8f9 } .mainpage .embeddable-discussions-module .embeddable-discussions-title a, .mainpage .embeddable-discussions-module .embeddable-discussions-title { color:#f8f8f9; line-height:130%; } .mainpage a.avatar-username { color:#f8f8f9; } .mainpage .embeddable-discussions-heading-container { margin-top:0; } .mainpage .embeddable-discussions-module .embeddable-discussions-threads { padding-top:0!important; } .mainpage-box-discussions { margin:0 auto; }

/* Right rail headers */ .mainpage-box-about .header, .mainpage-box-share .header, .mainpage-box-news .header, .mainpage-box-poll .header, .mainpage-box-discussions .header { font-size:24px; text-align:left; margin-bottom:20px; text-transform:uppercase; letter-spacing:2px; font-family: changa; line-height:100%; color:#fff; }

/* Header exceptions for the right rail */

.mainpage-box-discussions .header { margin-bottom:0; margin-top:40px; } .mainpage-box-poll .header { font-weight:normal!important; }

/* Portability */ @media (max-width: 1023px) { .mainpage-box-share, .mainpage-box-poll, .mainpage-box-about, .mainpage-box-discussions { margin:0 auto 20px auto; padding-top:20px; width:300px; }    .mainpage-box-share, .mainpage-box-poll { display:inline-block; }    .mainpage-box-share { margin-left:10px; }    .mainpage-box-discussions .header { margin-top:0; }    .main-page-tag-rcs .module { width:300px; } }