MediaWiki:Mainpage.css

/* =================================  October 2018 redesign

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

Color theory

All colors based on ones found on Jodie Whittaker's rainbow t-shirt

292832 main (page) background 292832 local navigation header background e5c076 section header, link colors 292832 background skin F59E9E is redlink color;

/* 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:#F59E9E!important; } /* General mainpage qualities */ .mainpage-wrap { font-family:rubik; } .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:bold; line-height:100%; font-family:"Maven Pro"; padding:.3em .2em .2em .1em; color:#fff; background-color:transparent; font-size:14px; } .mainpage .wikia-gallery-item .lightbox-caption { background:transparent; margin-bottom:5px; font-weight:normal; text-decoration:none; font-family:rubik; }

.mainpage .video .video-thumbnail .image .lightbox .large, .mainpage .video-thumbnail, .mainpage .wikia-gallery-item img { filter: sepia(1)opacity(.5); transition: 1s !important; } .mainpage .video .video-thumbnail .image .lightbox .large:hover, .mainpage .video-thumbnail:hover, .mainpage .wikia-gallery-item img:hover { filter: sepia(0%); transition: 1s !important; } .mainpage .article-thumb { margin-top:0px; } .mainpage .WikiaArticle a.external:after { display:none; } .mainpage .CategorySelect.articlePage.article-categories { border-color:#fff; background-color:transparent; } .mainpage .CategorySelect.articlePage.article-categories a, .mainpage .CategorySelect.articlePage.article-categories a:visited { color:#fff; } .mainpage .WikiaPage .page-header__separator { border-color:transparent; }

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

/* Left rail modules */ .mainpage-box-about, .mainpage-box-characters, .mainpage-box-how-to-DW, .mainpage-box-featured-videos, .mainpage-box-parents { width:670px; text-align:left; margin:0 auto; } .mainpage-box-characters, .mainpage-box-how-to-DW, .mainpage-box-parents { margin-top:50px; } .mainpage-box-featured-videos { margin-top:90px; } /* Left rail headers */ .mainpage-box-about .header, .mainpage-box-characters .header, .mainpage-box-how-to-DW .header, .mainpage-box-featured-videos .header { text-align:left; font-size:24px; text-transform:uppercase; font-weight:bold; letter-spacing:3px; margin:0 auto 5px auto; color:#e5c076; font-family:"Maven Pro"; line-height:110%; border-bottom:1px #e5c076 solid; padding-bottom:10px; } .mainpage-box-about .subheader { font-size:14px; line-height:150%; margin:0 auto; text-align:left; } .mainpage-box-how-to-DW .description, .mainpage-box-about .description { padding:20px 0 20px 0; line-height:150%; margin:0 auto; text-align:left; } .mainpage-box-how-to-DW .subheader { width:580px; font-size:25px; margin:0 auto; padding-bottom:50px; line-height:125%; } /* Left rail header exceptions */ .mainpage-box-about .header { font-size:72px; line-height:100%; } /* ==========  Right rail ========== */ /* Right rail modules */ .mainpage-box-share, .mainpage-box-welcome, .mainpage-box-twitter, .mainpage-box-discussions { margin:50px auto; padding:0; } .mainpage-box-welcome { padding:20px; background-color:#e5c076; 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 white; 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: #fff; } .mainpage .embeddable-discussions-module .embeddable-discussions-post-actions { border-top-color:#fff } .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:#fff } .mainpage .embeddable-discussions-module .embeddable-discussions-title a, .mainpage .embeddable-discussions-module .embeddable-discussions-title { color:#fff; line-height:130%; } .mainpage a.avatar-username { color:#fff; } .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-share .header, .mainpage-box-welcome .header, .mainpage-box-discussions .header { font-size:18px; text-align:left; margin-bottom:20px; text-transform:none; letter-spacing:0; font-family: "Maven Pro"; line-height:100%; color:#e5c076; border:1px #e5c076 solid; font-weight:bold; } /* Header exceptions for the right rail */ .mainpage-box-welcome .header { color:black; font-weight:bold; } .mainpage-box-discussions .header { margin-bottom:0; margin-top:40px; }

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