MediaWiki:Mainpage.css

/* ======================  This CSS is specific to the front page, Doctor Who Wiki. Originally, it was necessary in order to force the front page to have the light text on dark background skin, regardless of whether the user hit the colour-changer button. Then it housed some code for the circular button design that sent people to the Transmats. In October 2018, it was repurposed as the basis for the S11 design.

Version 3.0 October 2018 Principal author: User:CzechOut 2022 adjustments: User:SOTO ====================== */

/* =================================  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

#262438 main (page) background (originally #292832) #262438 local navigation header background #e5c076 section header, link, button colors #262438 background skin #F59E9E is redlink color Light mode: #d7ab60 section header #fff9ee background skin;

/* 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; } /* General mainpage qualities */ .mainpage .WikiaPage .page-header__title, .mainpage .WikiaPage .page-header__separator { display:none; }

.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:#e5c076; 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-box-welcome img, .mainpage a.video.video-thumbnail.image.lightbox.large, .mainpage .video.video-thumbnail.image.lightbox.large, .mainpage .video-thumbnail, .mainpage .wikia-gallery-item img { filter: sepia(1)opacity(.5); transition: 1s !important; } .mainpage .mainpage-box-how-to-DW .wikia-gallery-item img { filter: sepia(1)opacity(.64); transition: 1s !important; } .mainpage .mainpage-box-featured-videos #gallery-2 .wikia-gallery-item img { filter: sepia(1)opacity(0.9); transition: 1s !important; } .mainpage-box-welcome img:hover, .mainpage a.video.video-thumbnail.image.lightbox.large:hover, .mainpage .video.video-thumbnail.image.lightbox.large:hover, .mainpage .video-thumbnail:hover, .mainpage .wikia-gallery-item img:hover, .mainpage .mainpage-box-how-to-DW .wikia-gallery-item img:hover, .mainpage .mainpage-box-featured-videos #gallery-2 .wikia-gallery-item img:hover { filter: sepia(0%); transition: 1s !important; } .mainpage-box-welcome#mainpage-random img { filter: opacity(.7); } .mainpage-box-welcome#mainpage-random img:hover { filter: opacity(1); } .mainpage .article-thumb { margin-top: 0px; } .mainpage div.wikia-gallery div.wikia-gallery-item { background: transparent; border: 0; }

.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; }

.theme-fandomdesktop-light .mainpage-wrap .header { color: #d7ab60; border-color: #e7c385; }

/* ==========  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; }

/* The small fixes below keep text and galleries from "clipping" into the right rail, particularly in smaller windows. */ .mainpage-box-about .subheader { margin-left: 0; max-width: 96%; } .mainpage-box-characters .header, .mainpage-box-characters .description, .mainpage-box-how-to-DW { max-width: 98%; } .mainpage-box-characters .wikia-gallery-item { max-width: 20.75%; } .mainpage-box-featured-videos .gallery .center .floatnone { max-width: 90%; margin-left: -2.5%; } .mainpage-box-how-to-DW .wikia-gallery { margin-left: -2%; } .mainpage-box-how-to-DW .wikia-gallery-item { max-width: 22.5%; }

/* 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: 25px auto; padding: 0; } .widget-twitter { height: 400px; overflow: hidden; } /** Welcome module **/ .mainpage-box-welcome { padding:20px; background-color:#e5c076; color:#000; } .mainpage-box-welcome a, .mainpage-box-welcome a:link, .mainpage-box-welcome a:visited { color:#000; text-decoration:underline; }

/** 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-twitter .header, .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; 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; }

.theme-fandomdesktop-light .mainpage-wrap .mainpage-box-twitter .header, .theme-fandomdesktop-light .mainpage-wrap .mainpage-box-share .header, .theme-fandomdesktop-light .mainpage-wrap .mainpage-box-welcome .header, .theme-fandomdesktop-light .mainpage-wrap .mainpage-box-discussions .header { color:#e5c076; } .theme-fandomdesktop-light .mainpage-wrap .mainpage-box-welcome .header { color:black; }

/* Twitter exceptions for visual consistency */ .mainpage-box-twitter { background: #5d76d6; padding-top: 11px; padding-left: 3px; padding-right: 2px; margin-top: -8px; margin-bottom: -14px; filter: sepia(1)opacity(.9); transition: 1s !important; } .mainpage-box-twitter .header { color: #ebedf7; margin-bottom: 11.5px; } .mainpage-box-twitter .header a { color: #e7d5b2; } .mainpage-box-twitter:hover { filter: sepia(0.25); }

/* 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; } }

/* ===================================  Some of the original CSS not specific to the October 2018 redesign =================================== */ /* Fixing graphics that don't look right on dark background */ body.mainpage .WikiaArticle a.external:after, body.mainpage .WikiaArticle a[href^="gopher://"]:after { background-image:url("https://images.wikia.nocookie.net/tardis/images/f/fb/ExternalLinkLight.png")!important; background-position:right top !important; background-repeat: no-repeat !important; } background:transparent }
 * 1) recirculation-footer-index-container {

/* ==================  External links =================== */  body.mainpage .WikiaArticle a.external::after, body.mainpage .WikiaArticle a[href^="gopher://"]::after { background-image:none !important }