MediaWiki:Gadget-ms-Mainpage.css: Difference between revisions
From Tardis Wiki, the free Doctor Who reference
No edit summary |
Bongolium500 (talk | contribs) No edit summary |
||
(57 intermediate revisions by 5 users not shown) | |||
Line 15: | Line 15: | ||
Version 3.0 October 2018 | Version 3.0 October 2018 | ||
Principal author: [[User:CzechOut]] | Principal author: [[User: CzechOut]] | ||
2022 adjustments: [[User: SOTO]] | |||
Minor 2023 changes: [[User: Bongolium500]] | |||
2024 skin updates: [[User: SOTO]] | |||
====================== */ | ====================== */ | ||
Line 25: | Line 28: | ||
histories of main CSSs. | histories of main CSSs. | ||
================================= | ================================= | ||
*/ | */ | ||
Line 43: | Line 35: | ||
.WikiaMainContent a.new, | .WikiaMainContent a.new, | ||
.WikiaMainContent a.new:visited { | .WikiaMainContent a.new: visited { | ||
color:#F59E9E; | color: #F59E9E; | ||
} | } | ||
/* General mainpage qualities */ | /* General mainpage qualities */ | ||
.mainpage . | |||
.mainpage | .mainpage-wrap { | ||
font-family: "Maven Pro"; | |||
} | |||
.mainpage a, | |||
.mainpage a: link { | |||
color: var(--accent-5); | |||
} | } | ||
.mainpage-wrap { | .mainpage-wrap .gallerytext a: visited, | ||
.mainpage-wrap .gallerytext a: link, | |||
.mainpage-wrap .gallerytext { | |||
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; | |||
text-shadow: 2px 2px 5px #000; | |||
} | |||
.mainpage .gallerytext { | |||
background: transparent; | |||
margin-bottom: 5px; | |||
font-weight: normal; | |||
text-decoration: none; | |||
font-family: rubik; | |||
top: -60px; | |||
position: relative; | |||
text-align: center; | |||
} | |||
.mainpage .gallerybox img { | |||
width: 160px; | |||
} | |||
.mainpage li.gallerybox div.thumb { | |||
background: none; | |||
border: none; | |||
} | |||
.mainpage li.gallerybox { | |||
max-height: 240px; | |||
max-width: 150px; | |||
border: none; | |||
margin: 0; | |||
margin-right: 6px; | |||
border: none !important; | |||
background: none !important; | |||
box-shadow: none !important; | |||
} | |||
.mainpage-box-how-to-DW li.gallerybox { | |||
max-height: 150px; | |||
margin-right: 74px; | |||
max-width: 100px; | |||
} | } | ||
. | .skin-timeless .mainpage .gallerytext p a { | ||
.mainpage | color: #e5c076 !important; | ||
filter: none !important; | |||
} | } | ||
. | .skin-timeless .mainpage .gallerytext p { | ||
text-shadow: 2px 2px 5px #000; | |||
font-weight: bold; | |||
.mainpage | background: none !important; | ||
font-weight:bold | |||
background | |||
} | } | ||
.mainpage . | .skin-timeless .mainpage .gallery { | ||
margin-bottom: 20.4px; | |||
margin-left: 5.008px; | |||
} | } | ||
.mainpage-box-welcome img, | /* .mainpage-box-welcome img, | ||
.mainpage a.video.video-thumbnail.image.lightbox.large, | .mainpage a.video.video-thumbnail.image.lightbox.large, | ||
.mainpage .video.video-thumbnail.image.lightbox.large, | .mainpage .video.video-thumbnail.image.lightbox.large, | ||
.mainpage .video-thumbnail, | .mainpage .video-thumbnail, | ||
.mainpage .wikia-gallery-item img { | .mainpage .wikia-gallery-item img, | ||
.mainpage-box-series img { | |||
filter: sepia(1)opacity(.5); | filter: sepia(1)opacity(.5); | ||
transition: 1s !important; | transition: 1s !important; | ||
} | } | ||
.mainpage-box-welcome img:hover, | .mainpage .mainpage-box-how-to-DW .wikia-gallery-item img { | ||
.mainpage a.video.video-thumbnail.image.lightbox.large:hover, | filter: sepia(1)opacity(.64); | ||
.mainpage .video.video-thumbnail.image.lightbox.large:hover, | transition: 1s !important; | ||
.mainpage .video-thumbnail:hover, | } | ||
.mainpage .wikia-gallery-item img:hover { | .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, | |||
.mainpage-box-series img: hover { | |||
filter: sepia(0%); | filter: sepia(0%); | ||
transition: 1s !important; | 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 { | .mainpage .article-thumb { | ||
margin-top:0px | margin-top: 0px; | ||
} | } | ||
.mainpage .CategorySelect.articlePage.article-categories { | .mainpage .CategorySelect.articlePage.article-categories { | ||
border-color:#fff; | border-color: #fff; | ||
background-color:transparent; | background-color: transparent; | ||
} | } | ||
.mainpage .CategorySelect.articlePage.article-categories a, | .mainpage .CategorySelect.articlePage.article-categories a, | ||
.mainpage .CategorySelect.articlePage.article-categories a:visited { | .mainpage .CategorySelect.articlePage.article-categories a: visited { | ||
color:#fff; | color: #fff; | ||
} | } | ||
/* ========== | /* ========== | ||
Main section | |||
========== */ | ========== */ | ||
Line 128: | Line 165: | ||
.mainpage-box-how-to-DW, | .mainpage-box-how-to-DW, | ||
.mainpage-box-featured-videos, | .mainpage-box-featured-videos, | ||
.mainpage-box-parents { | .mainpage-box-parents, | ||
width: | .mainpage-box-series { | ||
text-align:left; | width: 735px; | ||
margin:0 auto; | text-align: left; | ||
margin: 0 auto; | |||
} | } | ||
.mainpage-box-characters, | .mainpage-box-characters, | ||
.mainpage-box-how-to-DW, | .mainpage-box-how-to-DW, | ||
.mainpage-box-parents { | .mainpage-box-parents, | ||
margin-top:50px; | .mainpage-box-series { | ||
margin-top: 50px; | |||
} | } | ||
.mainpage-box-featured-videos { | .mainpage-box-featured-videos { | ||
margin-top:90px; | margin-top: 90px; | ||
} | |||
.mainpage-box-characters li.gallerybox div.thumb div { | |||
margin-top: 6px!important; | |||
} | |||
.skin-timeless .mainpage-box-characters li.gallerybox div.thumb img { | |||
margin: 0; | |||
width: 148px; /* The pixelation bug is being fixed. */ | |||
} | |||
/* 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, | |||
.mainpage-box-series .header, | |||
.mainpage-box-series .description { | |||
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%; | |||
} | } | ||
/* | |||
/* Main section headers */ | |||
.mainpage-box-about .header, | .mainpage-box-about .header, | ||
.mainpage-box-characters .header, | .mainpage-box-characters .header, | ||
.mainpage-box-how-to-DW .header, | .mainpage-box-how-to-DW .header, | ||
.mainpage-box-featured-videos .header { | .mainpage-box-featured-videos .header, | ||
.mainpage-box-series .header { | |||
text-align: left; | |||
font-size: 24px; | |||
text-transform: uppercase; | |||
font-weight: bold; | |||
letter-spacing: 3px; | |||
margin: 0 auto 14px auto; | |||
color: var(--contrast-color-6); | |||
font-family: "Maven Pro"; | |||
line-height: 110%; | |||
border-bottom: 4.5px var(--contrast-color-1) dotted; | |||
padding-bottom: 9px; | |||
margin-bottom: 14px; | |||
} | |||
.mainpage-box-about .header { | |||
margin-top: 0px; | |||
padding-bottom: 8px; | |||
color: var(--contrast-color-4); | |||
font-size: 72px; | |||
line-height: 100%; | |||
text-align: center; | |||
} | |||
@media screen and (max-width: 720px) { | |||
.mainpage-box-about .header { | |||
font-size: 2.2052em; | |||
} | |||
} | |||
.mainpage .subheader { | |||
margin-left: 1px; | |||
margin-top: -6px; | |||
margin-bottom: -21px; | |||
padding-top: 7px; | |||
font-size: 1.2em; | |||
} | } | ||
.mainpage-box-about .subheader { | .mainpage-box-about .subheader { | ||
font-size:14px; | font-size: 14px; | ||
line-height:150%; | line-height: 150%; | ||
margin:0 auto; | margin: 0 auto; | ||
text-align:left; | text-align: left; | ||
} | } | ||
.mainpage-box-how-to-DW .description, | .mainpage-box-how-to-DW .description, | ||
.mainpage-box-about .description { | .mainpage-box-about .description, | ||
padding:20px 0 20px 0; | .mainpage-box-series .description { | ||
line-height:150%; | padding: 20px 0 20px 0; | ||
margin:0 auto; | line-height: 150%; | ||
text-align:left; | margin: 0 auto; | ||
text-align: left; | |||
} | } | ||
.mainpage-box-how-to-DW .subheader { | .mainpage-box-how-to-DW .subheader { | ||
width:580px; | width: 580px; | ||
font-size:25px; | font-size: 25px; | ||
margin:0 auto; | margin: 0 auto; | ||
padding-bottom:50px; | padding-bottom: 50px; | ||
line-height:125 | line-height: 125%; | ||
} | } | ||
/* ========== | /* ========== | ||
Right rail | Right rail | ||
Line 192: | Line 292: | ||
.mainpage-box-twitter, | .mainpage-box-twitter, | ||
.mainpage-box-discussions { | .mainpage-box-discussions { | ||
margin: | margin: 25px auto; | ||
padding:0; | padding: 0; | ||
} | |||
.widget-twitter { | |||
height: 400px; | |||
overflow: hidden; | |||
} | } | ||
/** Welcome module **/ | /** Welcome module **/ | ||
.mainpage-box-welcome { | .mainpage-box-welcome { | ||
padding:20px; | padding: 20px; | ||
background-color:#e5c076; | background-color: #e5c076; | ||
color:#000; | color: #000; | ||
} | |||
.mainpage-box-welcome p { | |||
color: #000 !important; | |||
} | } | ||
.mainpage-box-welcome a, | .mainpage-box-welcome a, | ||
.mainpage-box-welcome a:link, | .mainpage-box-welcome a: link, | ||
.mainpage-box-welcome a:visited { | .mainpage-box-welcome a: visited { | ||
color:#000; | color: #000; | ||
text-decoration:underline; | text-decoration: underline; | ||
} | |||
.mainpage-box-welcome ul { | |||
margin-left: 12px; | |||
} | } | ||
Line 211: | Line 321: | ||
.mainpage-box-share .icons { | .mainpage-box-share .icons { | ||
text-align: center; | text-align: center; | ||
margin:15px auto; | margin: 15px auto; | ||
} | } | ||
.mainpage-box-share .icon { | .mainpage-box-share .icon { | ||
display: inline; | display: inline; | ||
margin-right:5px; | margin-right: 5px; | ||
} | } | ||
/** Discussions module **/ | /** Discussions module **/ | ||
.mainpage .discussion-module { | .mainpage .discussion-module { | ||
display:none /* Turns off standard module to give deference to the bespoke one here */ | display: none /* Turns off standard module to give deference to the bespoke one here */ | ||
} | } | ||
.mainpage .embeddable-discussions-module { | .mainpage .embeddable-discussions-module { | ||
border:none; | border: none; | ||
background:transparent; | background: transparent; | ||
padding:5px; | padding: 5px; | ||
} | } | ||
.mainpage .embeddable-discussions-heading { | .mainpage .embeddable-discussions-heading { | ||
display:none; | display: none; | ||
} | } | ||
.mainpage .embeddable-discussions-show-all { | .mainpage .embeddable-discussions-show-all { | ||
display:none; | display: none; | ||
} | } | ||
.mainpage .embeddable-discussions-show-all a, | .mainpage .embeddable-discussions-show-all a, | ||
.mainpage .embeddable-discussions-show-all a:link, | .mainpage .embeddable-discussions-show-all a: link, | ||
.mainpage .embeddable-discussions-show-all a:visited { | .mainpage .embeddable-discussions-show-all a: visited { | ||
display:none; | display: none; | ||
} | } | ||
.mainpage .embeddable-discussions-module .embeddable-discussions-post-detail { | .mainpage .embeddable-discussions-module .embeddable-discussions-post-detail { | ||
background-color: transparent; | background-color: transparent; | ||
border:1px solid white; | border: 1px solid white; | ||
margin:0 0 20px 0; | margin: 0 0 20px 0; | ||
padding:5px; | padding: 5px; | ||
} | } | ||
.mainpage .embeddable-discussions-module .embeddable-discussions-reply-icon-tiny path, | .mainpage .embeddable-discussions-module .embeddable-discussions-reply-icon-tiny path, | ||
Line 250: | Line 360: | ||
} | } | ||
.mainpage .embeddable-discussions-module .embeddable-discussions-post-actions { | .mainpage .embeddable-discussions-module .embeddable-discussions-post-actions { | ||
border-top-color:#fff | border-top-color: #fff | ||
} | } | ||
.mainpage .embeddable-discussions-module .embeddable-discussions-post-actions a, | .mainpage .embeddable-discussions-module .embeddable-discussions-post-actions a, | ||
Line 257: | Line 367: | ||
.mainpage .embeddable-discussions-module .embeddable-discussions-timestamp, | .mainpage .embeddable-discussions-module .embeddable-discussions-timestamp, | ||
.embeddable-discussions-module .embeddable-discussions-forum { | .embeddable-discussions-module .embeddable-discussions-forum { | ||
color:#fff | color: #fff | ||
} | } | ||
.mainpage .embeddable-discussions-module .embeddable-discussions-title a, | .mainpage .embeddable-discussions-module .embeddable-discussions-title a, | ||
.mainpage .embeddable-discussions-module .embeddable-discussions-title { | .mainpage .embeddable-discussions-module .embeddable-discussions-title { | ||
color:#fff; | color: #fff; | ||
line-height:130%; | line-height: 130%; | ||
} | } | ||
.mainpage a.avatar-username { | .mainpage a.avatar-username { | ||
color:#fff; | color: #fff; | ||
} | } | ||
.mainpage .embeddable-discussions-heading-container { | .mainpage .embeddable-discussions-heading-container { | ||
margin-top:0; | margin-top: 0; | ||
} | } | ||
.mainpage .embeddable-discussions-module .embeddable-discussions-threads { | .mainpage .embeddable-discussions-module .embeddable-discussions-threads { | ||
padding-top:0!important; | padding-top: 0!important; | ||
} | } | ||
.mainpage-box-discussions { | .mainpage-box-discussions { | ||
margin:0 auto; | margin: 0 auto; | ||
} | } | ||
Line 282: | Line 392: | ||
.mainpage-box-welcome .header, | .mainpage-box-welcome .header, | ||
.mainpage-box-discussions .header { | .mainpage-box-discussions .header { | ||
font-size:18px; | font-size: 18px; | ||
text-align:left; | text-align: left; | ||
margin-bottom:20px; | margin-bottom: 20px; | ||
text-transform:none; | text-transform: none; | ||
letter-spacing:0; | letter-spacing: 0; | ||
font-family: "Maven Pro"; | font-family: "Maven Pro"; | ||
line-height:100%; | line-height: 100%; | ||
color:#e5c076 | color: #e5c076; | ||
font-weight: bold; | |||
font-weight:bold; | |||
} | } | ||
/* Header exceptions for the right rail */ | /* Header exceptions for the right rail */ | ||
.mainpage-box-welcome .header { | .mainpage-box-welcome .header { | ||
color:black; | color: black; | ||
font-weight:bold; | font-weight: bold; | ||
} | } | ||
.mainpage-box-discussions .header { | .mainpage-box-discussions .header { | ||
margin-bottom:0; | margin-bottom: 0; | ||
margin-top:40px; | margin-top: 40px; | ||
} | } | ||
/* temporary Doom's Day box */ | |||
@font-face { | |||
font-family: DSEG7; | |||
src: url(https: //static.wikia.nocookie.net/tardis/images/5/5d/DSEG7ClassicMini-Regular.woff); | |||
} | |||
.digital-clock { | |||
font-family: DSEG7; | |||
vertical-align: bottom; | |||
} | |||
/* 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 */ | /* Portability */ | ||
Line 310: | Line 450: | ||
.mainpage-box-twitter, | .mainpage-box-twitter, | ||
.mainpage-box-discussions { | .mainpage-box-discussions { | ||
margin:0 auto 20px auto; | margin: 0 auto 20px auto; | ||
padding-top:20px; | padding-top: 20px; | ||
width:300px; | width: 300px; | ||
} | } | ||
.mainpage-box-twitter, | .mainpage-box-twitter, | ||
.mainpage-box-share, | .mainpage-box-share, | ||
.mainpage-box-welcome { | .mainpage-box-welcome { | ||
display:inline-block; | display: inline-block; | ||
} | } | ||
.mainpage-box-share { | .mainpage-box-share { | ||
margin-left:10px; | margin-left: 10px; | ||
} | } | ||
.mainpage-box-discussions .header { | .mainpage-box-discussions .header { | ||
margin-top:0; | margin-top: 0; | ||
} | } | ||
.main-page-tag-rcs .module { | .main-page-tag-rcs .module { | ||
width:300px; | width: 300px; | ||
} | } | ||
} | } | ||
Line 343: | Line 483: | ||
on dark background */ | on dark background */ | ||
body.mainpage .WikiaArticle a.external:after, | body.mainpage .WikiaArticle a.external: after, | ||
body.mainpage .WikiaArticle a[href^="gopher://"]:after { | body.mainpage .WikiaArticle a[href^="gopher: //"]: after { | ||
background-image:url("https://images.wikia.nocookie.net/tardis/images/f/fb/ExternalLinkLight.png")!important; | background-image: url("https: //images.wikia.nocookie.net/tardis/images/f/fb/ExternalLinkLight.png")!important; | ||
background-position:right top !important; | background-position: right top !important; | ||
background-repeat: no-repeat !important; | background-repeat: no-repeat !important; | ||
} | } | ||
#recirculation-footer-index-container { | #recirculation-footer-index-container { | ||
background:transparent | background: transparent | ||
} | } | ||
Line 356: | Line 496: | ||
External links | External links | ||
=================== */ | =================== */ | ||
body.mainpage .WikiaArticle a.external: : after, | |||
body.mainpage .WikiaArticle a[href^="gopher: //"]: : after { | |||
background-image: none !important | |||
} | |||
/* smaller screens and mobile */ | |||
@media only screen and (min-width: 1480px) and (max-width: 1590px) { | |||
.main-page-tag-rcs { | |||
width: calc(100% - 735px); | |||
} | |||
} | |||
@media only screen and (min-width: 1340px) and (max-width: 1479px) { | |||
.main-page-tag-rcs { | |||
clear: both; | |||
column-count: 3; | |||
float: none; | |||
padding: 13px 10px 0; | |||
width: auto; | |||
} | |||
#mainpage-random { | |||
margin-top: 16em; | |||
} | |||
.mainpage-box-about, | |||
.mainpage-box-characters, | |||
.mainpage-box-how-to-DW, | |||
.mainpage-box-featured-videos, | |||
.mainpage-box-parents, | |||
.mainpage-box-series { | |||
width: 100%; | |||
} | |||
.lcs-container { | |||
margin-right: 0px !important; | |||
} | |||
ul.gallery { | |||
width: 735px; | |||
margin: auto | |||
} | |||
} | |||
@media only screen and (min-width: 1240px) and (max-width: 1339px) { | |||
.main-page-tag-rcs { | |||
width: calc(100% - 735px); | |||
} | |||
} | |||
@media only screen and (max-width: 1240px) { | |||
.main-page-tag-rcs { | |||
clear: both; | |||
column-count: 2; | |||
float: none; | |||
padding: 13px 10px 0; | |||
width: auto; | |||
} | |||
.mainpage-box-about, | |||
.mainpage-box-characters, | |||
.mainpage-box-how-to-DW, | |||
.mainpage-box-featured-videos, | |||
.mainpage-box-parents, | |||
.mainpage-box-series { | |||
width: 100%; | |||
} | |||
.lcs-container { | |||
margin-right: 0px !important; | |||
} | |||
ul.gallery { | |||
width: 735px; | |||
margin: auto; | |||
} | |||
} | |||
@media only screen and (max-width: 735px) { | |||
ul.gallery { | |||
width: 100%; | |||
} | |||
} | |||
@media only screen and (max-width: 704px) { | |||
.main-page-tag-rcs { | |||
column-count: 1; | |||
} | |||
.mainpage-box-welcome { | |||
width: auto; | |||
} | |||
} | |||
@media only screen and (max-width: 360px) { | |||
.main-page-tag-rcs { | |||
width: auto; | |||
} | |||
} | } |
Latest revision as of 22:02, 26 April 2024
/* ======================
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]]
Minor 2023 changes: [[User: Bongolium500]]
2024 skin updates: [[User: SOTO]]
====================== */
/* =================================
October 2018 redesign
Kept in a separate CSS so that
changes to it don't clutter page
histories of main CSSs.
=================================
*/
/* 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-wrap {
font-family: "Maven Pro";
}
.mainpage a,
.mainpage a: link {
color: var(--accent-5);
}
.mainpage-wrap .gallerytext a: visited,
.mainpage-wrap .gallerytext a: link,
.mainpage-wrap .gallerytext {
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;
text-shadow: 2px 2px 5px #000;
}
.mainpage .gallerytext {
background: transparent;
margin-bottom: 5px;
font-weight: normal;
text-decoration: none;
font-family: rubik;
top: -60px;
position: relative;
text-align: center;
}
.mainpage .gallerybox img {
width: 160px;
}
.mainpage li.gallerybox div.thumb {
background: none;
border: none;
}
.mainpage li.gallerybox {
max-height: 240px;
max-width: 150px;
border: none;
margin: 0;
margin-right: 6px;
border: none !important;
background: none !important;
box-shadow: none !important;
}
.mainpage-box-how-to-DW li.gallerybox {
max-height: 150px;
margin-right: 74px;
max-width: 100px;
}
.skin-timeless .mainpage .gallerytext p a {
color: #e5c076 !important;
filter: none !important;
}
.skin-timeless .mainpage .gallerytext p {
text-shadow: 2px 2px 5px #000;
font-weight: bold;
background: none !important;
}
.skin-timeless .mainpage .gallery {
margin-bottom: 20.4px;
margin-left: 5.008px;
}
/* .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,
.mainpage-box-series 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,
.mainpage-box-series 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 .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;
}
/* ==========
Main section
========== */
/* Left rail modules */
.mainpage-box-about,
.mainpage-box-characters,
.mainpage-box-how-to-DW,
.mainpage-box-featured-videos,
.mainpage-box-parents,
.mainpage-box-series {
width: 735px;
text-align: left;
margin: 0 auto;
}
.mainpage-box-characters,
.mainpage-box-how-to-DW,
.mainpage-box-parents,
.mainpage-box-series {
margin-top: 50px;
}
.mainpage-box-featured-videos {
margin-top: 90px;
}
.mainpage-box-characters li.gallerybox div.thumb div {
margin-top: 6px!important;
}
.skin-timeless .mainpage-box-characters li.gallerybox div.thumb img {
margin: 0;
width: 148px; /* The pixelation bug is being fixed. */
}
/* 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,
.mainpage-box-series .header,
.mainpage-box-series .description {
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%;
}
/* Main section headers */
.mainpage-box-about .header,
.mainpage-box-characters .header,
.mainpage-box-how-to-DW .header,
.mainpage-box-featured-videos .header,
.mainpage-box-series .header {
text-align: left;
font-size: 24px;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 3px;
margin: 0 auto 14px auto;
color: var(--contrast-color-6);
font-family: "Maven Pro";
line-height: 110%;
border-bottom: 4.5px var(--contrast-color-1) dotted;
padding-bottom: 9px;
margin-bottom: 14px;
}
.mainpage-box-about .header {
margin-top: 0px;
padding-bottom: 8px;
color: var(--contrast-color-4);
font-size: 72px;
line-height: 100%;
text-align: center;
}
@media screen and (max-width: 720px) {
.mainpage-box-about .header {
font-size: 2.2052em;
}
}
.mainpage .subheader {
margin-left: 1px;
margin-top: -6px;
margin-bottom: -21px;
padding-top: 7px;
font-size: 1.2em;
}
.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,
.mainpage-box-series .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%;
}
/* ==========
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 p {
color: #000 !important;
}
.mainpage-box-welcome a,
.mainpage-box-welcome a: link,
.mainpage-box-welcome a: visited {
color: #000;
text-decoration: underline;
}
.mainpage-box-welcome ul {
margin-left: 12px;
}
/** 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;
}
/* temporary Doom's Day box */
@font-face {
font-family: DSEG7;
src: url(https: //static.wikia.nocookie.net/tardis/images/5/5d/DSEG7ClassicMini-Regular.woff);
}
.digital-clock {
font-family: DSEG7;
vertical-align: bottom;
}
/* 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;
}
#recirculation-footer-index-container {
background: transparent
}
/* ==================
External links
=================== */
body.mainpage .WikiaArticle a.external: : after,
body.mainpage .WikiaArticle a[href^="gopher: //"]: : after {
background-image: none !important
}
/* smaller screens and mobile */
@media only screen and (min-width: 1480px) and (max-width: 1590px) {
.main-page-tag-rcs {
width: calc(100% - 735px);
}
}
@media only screen and (min-width: 1340px) and (max-width: 1479px) {
.main-page-tag-rcs {
clear: both;
column-count: 3;
float: none;
padding: 13px 10px 0;
width: auto;
}
#mainpage-random {
margin-top: 16em;
}
.mainpage-box-about,
.mainpage-box-characters,
.mainpage-box-how-to-DW,
.mainpage-box-featured-videos,
.mainpage-box-parents,
.mainpage-box-series {
width: 100%;
}
.lcs-container {
margin-right: 0px !important;
}
ul.gallery {
width: 735px;
margin: auto
}
}
@media only screen and (min-width: 1240px) and (max-width: 1339px) {
.main-page-tag-rcs {
width: calc(100% - 735px);
}
}
@media only screen and (max-width: 1240px) {
.main-page-tag-rcs {
clear: both;
column-count: 2;
float: none;
padding: 13px 10px 0;
width: auto;
}
.mainpage-box-about,
.mainpage-box-characters,
.mainpage-box-how-to-DW,
.mainpage-box-featured-videos,
.mainpage-box-parents,
.mainpage-box-series {
width: 100%;
}
.lcs-container {
margin-right: 0px !important;
}
ul.gallery {
width: 735px;
margin: auto;
}
}
@media only screen and (max-width: 735px) {
ul.gallery {
width: 100%;
}
}
@media only screen and (max-width: 704px) {
.main-page-tag-rcs {
column-count: 1;
}
.mainpage-box-welcome {
width: auto;
}
}
@media only screen and (max-width: 360px) {
.main-page-tag-rcs {
width: auto;
}
}