MediaWiki:Gadget-ms-Mainpage.css

From Tardis Wiki, the free Doctor Who reference
Revision as of 08:38, 2 February 2022 by SOTO (talk | contribs) (Small fixes to make the main page work at smaller widths. Right now, it was overlapping with the right rail, and rendered a little unreadable.)
Clear your cache often around here

After changes are made to this site's CSS or Javascript, you have to bypass your browser's cache to see the changes. You can always do this by going to your browser's preferences panel. But many browsers also offer keyboard shortcuts to save you that trouble. The following shortcuts work in the versions of the browsers that Tardis currently supports. They may not work in earlier versions.

  • Firefox: hold down Shift while performing a page reload.
  • Opera offers no default keyboard shortcut, but you can create a custom keyboard shortcut with the value Clear disk cache
  • Safari users should simultaneously hold down ⌘ + Option + E. You may need to enable the Develop menu first
  • Chrome: press Ctrl + F5 or Shift + F5 while performing a page reload.
/* ======================
   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]]
   ====================== */

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

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


/* ==========
   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%;
}
.mainpage-box-featured-videos .gallery .center .floatnone {
    max-width: 90%;
    margin-left: 0;
}
.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;
}

/* 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
   }
Retrieved from "https://tardis.wiki/w/index.php?title=MediaWiki:Gadget-ms-Mainpage.css&oldid=3230098"