MediaWiki:WikiaNav.css

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

font-size:10pt; padding-left:none; padding-right:none; }
 * 1) WikiHeader {

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

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

/* =====================  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:#e2e2f0 }

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