MediaWiki:WikiaNav.css

From Tardis Wiki, the free Doctor Who reference
Revision as of 04:08, 1 November 2016 by CzechOut (talk | contribs) (fix to the contribute button)
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.
/* ================
   NEW NAV 1.2

   written by User:CzechOut 
   22 September 2012
   Latest version: 22 November 2015
   for use at tardis.wikia.com
   and released under the 
   CC-BY-SA 3.0 license

   Though almost all styling elements are
   unique to tardis, grateful acknowledgement 
   is certainly due to fellow code monkeys at
   memory-alpha.org, yoshi.wikia.com,
   all the respondents at
   [[community:Admin_Forum:Restyling_the_new_WikiHeader_navigation]],
   and various members of Wikia Staff
   ================

   On 3 October 2012, Wikia made compulsory a new
   system of top-of-page navigation which radically
   supplanted the previous drop-down-only notion. 

   This design is the homegrown tardis.wikia.com response to
   the new requirement.  */

/* ================ 
   BASICS 
   -- or --
   DEALING WITH 
   #WikiHeader
   ================ 

   +++++++++++++++
   Retaining artistic background
   from previous iteration of WikiHeader
   +++++++++++++++ */

.oasis-split-skin .WikiHeader > nav {
    -webkit-border-radius: 50%/15%;
       -moz-border-radius: 50%/15%;
        -ms-border-radius: 50%/15%;
         -o-border-radius: 50%/15%;
            border-radius: 50%/15%;
     padding-bottom:20px
}


#WikiHeader {
   font-size:10pt;
   padding-left:none;
   padding-right:none;
}

.WikiHeader .WikiNav {
   right:10px;
   
}
/*
nav.WikiNav {
    margin-top:10px;
}
*/
/* +++++++++++++++
   Removing border on top of tabs
   +++++++++++++++ */
.WikiHeader > nav li.marked > a,
.WikiHeader > nav li.marked > a:hover {
   border:none;
   background-color:whitesmoke;
   padding-left:none;
   padding-right:none;
   font-size:10pt;
}

.WikiHeader > nav li.marked > a:hover {
    text-decoration:underline;
}

/* +++++++++++++++
   Removing accent mark 
   under bottom and top row
   +++++++++++++++ */



.WikiHeader .navbackground { 
   background-color:transparent;
   font-size:10pt;
   width:96%; /* 575px keeps dividing line between tiers 
                  the width of the framing box */
} 

.WikiHeader .navbackground img {
    display:none!important;
}



/* ================
   Top row
   ================ */

/* +++++++++++++++
   Main style of WikiHeaderRestyle
   but because its margin-bottom is
   stretched, this effectively "creates an envelope/div"
   which becomes the most visible aspect of the nav
   the major style of the entire new nav.

   Alternately, think of this as the top row in an 
   unhovered state.
   +++++++++++++++ */

.WikiHeader > nav { 
   background:#FFF; /*url(http://images.wikia.com/tardistest/images/c/ce/70opacitywhite.png);*/ 
   border:3px solid #012c57; 
     -moz-border-radius:15px; 
  -webkit-border-radius:15px;
       -o-border-radius:15px;
      -ms-border-radius:15px;
          border-radius:15px;
     -moz-box-shadow:0 0 40px #012c57;
  -webkit-box-shadow:0 0 40px #012c57;
       -o-box-shadow:0 0 40px #012c57;
      -ms-box-shadow:0 0 40px #012c57;
          box-shadow:0 0 40px #012c57;
   color:#012c57;
   font-family: 'Lucida Grande', 'Trebuchet MS', 'Gill Sans', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif;
   padding-bottom:32px; /* "extends the shields" around bottom tier */
   letter-spacing:1.5 px;
   font-weight:normal;
   text-transform:uppercase;
   /*margin-top:-20px; moves it all up beyond reach of search/user masthead */
   z-index:-10px; /* for kicks */
   font-size:10pt;
   /*top:55px;*/
}


/* +++++++++++++++
   Other styling
   +++++++++++++++ */

.WikiHeader > nav li {
   border: none;
   font-size:10pt;
   letter-spacing:2px;
   font-weight:bold;
}
.WikiHeader > nav li.marked {
   border:none;
   color:#012c57;
   background-color: transparent;
   text-decoration: none;
   font-size:10pt;
   letter-spacing:2px;
   text-transform:uppercase;
   font-weight:bold;
}

.WikiHeader > nav li.marked > a:hover {
   border:none;
   color:#012c57;
   text-decoration: none;
   font-size:10pt;
   letter-spacing:2px;
   text-transform:uppercase;
   font-weight:bold;
   background-color:transparent;
}

.WikiHeader > nav li.marked a {
   border: none;
   color:#012c57;
   font-family: 'Lucida Grande', 'Trebuchet MS', 'Gill Sans', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif;
   font-size:10pt;
   padding:none;
   font-weight:bold;
   text-transform:uppercase;
   letter-spacing:2px;
   background-color:transparent;
}

/* ================
   Bottom row
   ================ */

/* This is the main selector for the actual drop down */
 .WikiHeader > nav .subnav {
   background:transparent;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
  border:1px solid #012c57;
  -moz-box-shadow:0 0 40px #012c57;
  -webkit-box-shadow:0 0 40px #012c57;
  box-shadow:0 0 40px #012c57;
  color:#012c57;
  font-family: 'Lucida Grande', 'Trebuchet MS', 'Gill Sans', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif;
  padding:1px;
  line-height:8pt;
  font-size:9pt;
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:2px;
  /*margin-top:-40px;*/
}
 
 
.WikiHeader > nav .subnav-2 accent {
  background-color: transparent;
}
 
.WikiHeader > nav .subnav-2 {
   border:none;
}
 
.WikiHeader > nav .subnav-2 li a.subnav-2a {
  background-color:transparent;
  color:#012c57;
  background-image:none;
  font-weight:bold;
  font-family: 'Lucida Grande', 'Trebuchet MS', 'Gill Sans', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif;
  text-transform:uppercase;
  letter-spacing:1px;
   width:auto;
    z-index: 100;
    display: block;
    border: 0px solid transparent;
    margin: 0px 0px 0px 0px;
    height: 25px;
    padding-left:7.5px;
    padding-right:3.5px;
}

  
.WikiHeader > nav .subnav-2 li.marked2 a.subnav-2a {
  background-color:transparent
}


.WikiHeader > nav li.marked .subnav-2 > li a:hover, 
.WikiHeader > nav li.marked .subnav-2 .marked2 a:hover { background-image: none; border: medium none; color: #012c57; font-family: 'Lucida Grande','Trebuchet MS','Gill Sans',Verdana,'URW Gothic L','Nimbus Sans L',sans-serif; font-weight: bold; }

/*
.WikiHeader > nav li.marked .subnav-2 > li a:hover, .WikiHeaderRestyle > nav li.marked .subnav-2 .marked2 a:hover { 

   background: none repeat scroll 0px 0px #D5D4F0 ; 
}
*/

.WikiHeader > nav .subnav-2 li a.subnav-2a:hover {
    color: rgb(47, 44, 184);
    background-color:none;
    font-weight: bold;
    font-family: 'Lucida Grande','Trebuchet MS','Gill Sans',Verdana,'URW Gothic L','Nimbus Sans L',sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: auto;
}


/* Keeping the hover background for tier 2 separate from tier 3 */
.WikiHeaderRestyle > nav li.marked .subnav-2 > li ul li:hover { background-color:#ececec; }

/* ================
   Floaty dropdown row
   ================ */

/* Get rid of annoying overlay of white */
.WikiHeader > nav .subnav-3 li {
   background:transparent 
}

.WikiHeader > nav .subnav-3 {
   background:#fff; 
    -webkit-border-radius: 10%;
       -moz-border-radius: 10%;
        -ms-border-radius: 10%;
         -o-border-radius: 10%;
            border-radius: 10%;
   border:1px solid #012c57;
      -moz-box-shadow:0 0 40px #012c57;
   -webkit-box-shadow:0 0 40px #012c57;
        -o-box-shadow:0 0 40px #012c57;
       -ms-box-shadow:0 0 40px #012c57;
           box-shadow:0 0 40px #012c57;
   color:#012c57;
   /*font-family: 'Book Antiqua','Calisto MT','Lucida Bright',Georgia,'DejaVu Serif',serif;*/
   font-family: 'Lucida Grande', 'Trebuchet MS', 'Gill Sans', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif;
   font-size:8pt;
   line-height:8pt;
   padding:5px;
   font-weight:bold;
   text-transform:uppercase;
   font-style:normal;
   /*margin-top:15px;*/
}
 
.WikiHeader > nav .subnav-3 li a {
  background-color:transparent;
  color:#012c57;
  background-image:none;
  font-weight:bold;
   font-family: 'Lucida Grande', 'Trebuchet MS', 'Gill Sans', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif;
  text-transform:uppercase;
  letter-spacing:0px;
  font-size:8pt;
  padding:5px;
  line-height:8pt;
  font-style:normal;
}
 
.WikiHeader > nav .subnav-3 li a:hover {
  background-color:whitesmoke;
  color:#012c57;
  border:none;
  font-weight:bold;
  background-image:none;
   font-family: 'Lucida Grande', 'Trebuchet MS', 'Gill Sans', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif;
  text-transform:uppercase;
  letter-spacing:0px;
  font-style:normal;
  padding:5px;
  line-height:8pt;
  }

/*
#WikiHeader li.subnav-3-item:first-child,
#WikiHeader li.subnav-3-item:first-child a {
    border-radius: 8px 8px 0 0;
}
#WikiHeader li.subnav-3-item:last-child,
#WikiHeader li.subnav-3-item:last-child a {
    border-radius: 0 0 8px 8px;
}
*/


/* =====================
   Things that have happened
   as a RESULT of New Nav, but
   which aren't strictly 
   PART OF New Nav
   ===================== */

/* +++++++++++++++++++++
   BASELINE FOR BOTH BUTTONS
   +++++++++++++++++++++ */

.WikiHeader .buttons .wikia-button, .WikiHeaderRestyle .buttons .wikia-menu-button {
    height: 20px;
    font-size: 12pt;
    font-weight:bold;
    vertical-align: top;
    z-index: 3;
    margin: 40px 0px 0px 0px;
}


/* +++++++++++++++++++++
   SHARE button
   +++++++++++++++++++++ */
.WikiHeader .buttons .contribute-button,
.WikiHeader .buttons .share-button {
    padding: 1px 0px 1px 3px!important;
    position: relative!important;
    margin-top: 40px!important;
    margin-right:10px!important;
    font-size:10pt;
    background:#012c57;
    color:white
}

.WikiHeader .buttons .share-button .share-dot {
    display: none;
}


/* ++++++++++++++++++++++
   CONTRIBUTE button  
   ++++++++++++++++++++++ */
/*
.wikia-menu-button.secondary.combined {
    padding: 1px 0px 1px 3px;
    margin-top: 40px!important;
    margin-left: 40px!important;
    margin-right:0px!important;
    font-size:12pt;
    background:#012c57;
    color:white
}
*/
/*
.wikia-menu-button.contribute.secondary.combined {
    padding: 1px 0px 1px 3px;
    margin-top: 40px!important;
    margin-left: 40px!important;
    margin-right:0px!important;
    font-size:12pt
}*/

.WikiHeader .buttons .contribute {
    padding-top: 2px;
    vertical-align: middle;
    margin-top: 40px;
    margin-right:10px;
    font-size: 14px;
    padding-bottom: 2px;
}


.sprite.contribute {
    display: none;
}

/* Trying to get some harmony of buttons
   Fixes prompted by Rappy 1 October 2013 */

.WikiHeader .buttons > .contribute:hover {
     color:#012c57
}

/* Margins on buttons depending on whether 
   Share button is present */

.buttons nav {
    margin-right:100px
}
.buttons nav + a {
    margin-right:200px
}

/* Contribute drop down */

.WikiHeader .buttons .contribute ul {
   background:transparent url(http://images.wikia.com/tardistest/images/c/ce/70opacitywhite.png); /* peek-a-boo, I see you! */
      -moz-border-radius:10px;
   -webkit-border-radius:0px 10px 10px 0;
           border-radius:10px;
   border:1px solid #012c57;
      -moz-box-shadow:0 0 40px #012c57;
   -webkit-box-shadow:0 0 40px #012c57;
           box-shadow:0 0 40px #012c57;
   color:#012c57;
   font-family: 'Book Antiqua','Calisto MT','Lucida Bright',Georgia,'DejaVu Serif',serif;
   font-size:9pt;
   line-height:8pt;
   padding:1px;
   font-weight:bold;
   text-transform:lowercase;
   font-style:italic;
   margin-top:2px;
   z-index:1007;
   width:auto;
}


.WikiHeader .buttons .contribute ul li a {
    line-height: 14px;
    background:none;
    border:none;
}

.WikiHeader .buttons .contribute ul { 
    border:#012c57 2px solid;
    background:transparent url(http://images.wikia.com/tardistest/images/c/ce/70opacitywhite.png); 
}

.WikiHeader .buttons .contribute li {
    border:none;
    background:none;
} 

/* ++++++++++++++++++++++++++
   Discussion button 
   ++++++++++++++++++++++++++ */

.wikinav2 .WikiaPageHeader > .comments {
    margin: 2px 10px 0px;
    display: inline;
    background-color: transparent;
    border: none;
    color: #012c57;
    font-size:12pt;
}

.commentsbubble { 
   display:inline; 
   font-size:16pt;
   font-family: 'Lucida Grande', 'Trebuchet MS', 'Gill Sans', Verdana, 'URW Gothic L','Nimbus Sans L',sans-serif;
   font-style:normal;
   padding:5px
}
 
.commentsbubble:before { 
   content:" "; 
}
 
.commentsbubble:after { 
   content:" "; 
}


/* +++++++++++++++++++++++++++
   Pages on wiki thingie 
   +++++++++++++++++++++++++++ */

/* Fixing article tally */

.wikinav2 .WikiaPageHeader > .tally {
    position: absolute;
    right: 0px;
    top: 0px;
}

.wikinav2 .WikiaPageHeader > .tally span {
    font-family: 'Futura','Gill Sans','Helvetica Neue','Trebuchet MS',Verdana,'URW Gothic L','Nimbus Sans L',sans-serif;
    text-transform: uppercase;
    font-weight: normal;
    top: 40px;
    margin-top: 30px;
    margin-left: -110px;
}

body.mainpage .WikiaPageHeader > .tally span, body.mainpage .WikiaPageHeader > .tally em {
   /*margin-left:-500px;*/
}

/*
body.mainpage .wikinav2 .WikiaPageHeader > .tally { 
   margin-left:-550px; 
   display:none;
}
*/

body.mainpage .WikiaPageHeader > .tally span, 
body.mainpage .WikiaPageHeader > .tally em,
body.page-Doctor-Who-Wiki .wikinav2 .WikiaPageHeader > .tally span  {
   /*margin-left:-30px;*/
   /*display:none*/ 
}
/* This does work, but I'd have to create a specialised 
   main page css to make it FULLY work.  Might have to 
   do that eventually anyway. 
 
body.mainpage div.WikiaPageContentWrapper {
   background:#012c57;
   color:white;
}
*/
/* ===============
   Media queries
   =============== */
   
   @media screen and (max-width: 1023px) and (orientation:portrait) {
    .WikiHeader .buttons .contribute {
        vertical-align:auto;
        margin-top:-90px;
        margin-right:10px;
    }
    nav.WikiNav {
        width:98%;
        left:5px;
    }
    .WikiHeader > nav.WikiNav .navbackground,
    div#navbackground,
    #navbackground {
    width:95%;
    left:0;
    }
     #WikiHeader .wordmark,
     .WikiHeader .wordmark {
         margin-top:10px;
    }
}
Retrieved from "https://tardis.wiki/w/index.php?title=MediaWiki:WikiaNav.css&oldid=2117438"