MediaWiki:Mainpage.css

/** Imports **/ @import url('https://fonts.googleapis.com/css?family=Roboto'); /** Color palette notes

One of the "tricks" of an all-red-and-black design is figuring out a way to distinguish between the red of the "existing link" and the red of the "new link" -- all while keeping the red-on-black contrast ratio high enough for people of varying visual acuities able to read the page.

red of the American Gods logo. American Gods logo (and having a 7 AAA contrast ratio with       the black background -- so super-readable for pretty much        everyone.         It's still in the same vibrancy spectrum        as the American Gods log, but is the one that just barely passes        AAA contrast ratio at 7.01.  So it's "darker" than #ffb7b7, but         still pretty easily readable.
 * 1) ffa0a0 is the header and button color, deriving from the most vibrant
 * 1) b583ca is the link color, deriving from an intermediate red on the
 * 1) b583ca is the "redlink" color on this mock wiki.

.WikiaMainContent a.new, .WikiaMainContent a.new:visited { color:#b583ca!important; } .WikiaMainContent a:hover { color: #8545a0; text-decoration:none; }

/** General background qualities

Making the blending stop at the top, so that there's no odd grey streak at the bottom of the page. **/

body.background-dynamic.skin-oasis .background-image-gradient::before, body.background-dynamic.skin-oasis .background-image-gradient::after, body.background-dynamic.skin-oasis .background-image-gradient { height:30% } /** General mainpage qualities **/

.mainpage-wrap { } .mainpage-wrap .wikia-gallery-caption-below .lightbox-caption { color:#b583ca }

/** Share box **/ .mainpage-box-share { } .mainpage-box-share .icons { text-align: center; margin:15px 4px; } .mainpage-box-share .icon { display: inline; margin-right:9px; } /* Basic box qualities */ .mainpage-box-characters, .mainpage-box-welcome, .mainpage-box-featured-videos { margin:80px auto auto auto; width:670px; } .mainpage-box-discussions, .mainpage-box-share, .mainpage-box-news, .mainpage-box-blogs, .mainpage-box-buy, .mainpage-box-bts, .mainpage-box-about { margin:80px auto auto auto; } .mainpage-box-news { padding:20px; font-size:14px; } @media (max-width: 1023px) { .mainpage .embeddable-discussions-module { display:block; }    .mainpage-box-discussions, .mainpage-box-share, .mainpage-box-news, .mainpage-box-blogs, .mainpage-box-buy, .mainpage-box-about, .mainpage-box-bts { margin:20px auto; }    .mainpage-box-blogs { margin-bottom:35% } } /* Headers */ .mainpage-box-characters .header, .mainpage-box-featured-videos .header, .mainpage-box-discussions .header, .mainpage-box-share .header, .mainpage-box-news .header, .mainpage-box-blogs .header, .mainpage-box-welcome .header, .mainpage-box-about .header, .mainpage-box-bts .header { text-align:left; font-size:21px; text-transform:uppercase; margin:0 auto; top:-10px; position:relative; border-bottom:1px solid white; padding-bottom:10px; font-family:Roboto, sans-serif; font-weight:600; }

/** Discussions box **/ .mainpage .discussion-module { display:none /* Turns off standard module to give deference to the bespoke one here */ } .mainpage .embeddable-discussions-module { border:none; } .mainpage .embeddable-discussions-module .embeddable-discussions-post-detail { background-color:transparent; } .mainpage .embeddable-discussions-module .embeddable-discussions-content { line-height:130%; } .mainpage .embeddable-discussions-module .embeddable-discussions-timestamp { font-size:10px; line-height:130%; } .mainpage .embeddable-discussions-module .embeddable-discussions-title { display:none; } .mainpage .embeddable-discussions-heading { display:none; } .mainpage .embeddable-discussions-show-all { } .mainpage .embeddable-discussions-show-all a, .mainpage .embeddable-discussions-show-all a:link, .mainpage .embeddable-discussions-show-all a:visited { color:#b0b1b6!important }

/** Blogs box **/ .mainpage-box-blogs .communityposts { /* display: inline-block;*/ overflow-y: auto; vertical-align: top; } .mainpage-box-blogs .communityposts-container { border: 1px solid #b583ca; background-color:#000; overflow-y: auto; /*min-width:300px;*/ padding-bottom:10px; } /* Custom styling of the community posts */ .mainpage-box-blogs .communityposts-container .WikiaBlogListing .author-details h1 { font-size: 20px; color:white; letter-spacing:0; } .mainpage-box-blogs .communityposts-container .WikiaBlogListing .author-details { margin: 0 0 0px 40px; } .mainpage-box-blogs .communityposts-container .WikiaBlogListing img.avatar { height: 32px; width: 32px; } .mainpage-box-blogs .communityposts-container .WikiaBlogListing .WikiaBlogListingPost { padding: 6px; } .mainpage-box-blogs .newsfeed-container ul { list-style-type: circle; margin: 7px 1px 9px 22px; } .mainpage-box-blogs .newsfeed-container, .mainpage-box-blogs .newsfeed-container a { color: white; } .mainpage-box-blogs .communityposts-container .WikiaBlogListing { margin-bottom: -14px; margin-top: 9px; } .communityposts p a { display:none; }

.mainpage .read-more, .mainpage .read-more a, .mainpage .read-more a:link, .mainpage .read-more a:visited { color:#b583ca; font-size:13px; } .mainpage .author-details h2, .mainpage .author-details h2 a, .mainpage .author-details h2 a:visited, .mainpage .author-details h2 a:link { background:transparent; text-align:left; color:white!important; text-transform:none; font-weight:bold; font-family:"helvetica neue", helvetica, arial, sans-serif; font-size:20px; letter-spacing:0; margin:0; color:#b583ca; }

.mainpage .WikiaBlogListing .author-details span { color:white; font-size:13px; }

.mainpage .author-details a, .mainpage .author-details a:link, .mainpage .author-details a:visited { color:#b583ca }

.mainpage .WikiaBlogListing .avatar { padding: 6px 5px 0 0 }

.mainpage .commentslikes { display:none }

/* ======================  Pre Making it more readable ======================= */ .WikiaArticle pre, .pre { background-color:#e9e9e9; color:black; border:2px solid #000; -moz-border-radius:15px; -webkit-border-radius:15px; -o-border-radius:15px; -ms-border-radius:15px; border-radius:15px; -moz-box-shadow:0 0 5px #000 inset; -webkit-box-shadow:0 0 5px #000 inset; -o-box-shadow:0 0 5px #000 inset; -ms-box-shadow:0 0 5px #000 inset; box-shadow:0 0 5px #000 inset; line-height:140%; width:auto; margin:auto auto auto auto; font-family: Monaco,"Andale Mono","Lucida Sans Typewriter", "Lucida Console", "Nimbus Mono L", "Courier New", monospace; word-break: break-all; word-wrap: break-word; white-space: pre; white-space: -moz-pre-wrap; white-space: pre-wrap; white-space: pre\9; }