MediaWiki:WikiaNav3.css: Difference between revisions
From Tardis Wiki, the free Doctor Who reference
No edit summary |
m (Applying changes that should make this CSS file HTTPS-ready. If you have any questions or noticed issues related to this edit, please reach out to us using the Special:Contact page.) |
||
(3 intermediate revisions by one other user not shown) | |||
Line 48: | Line 48: | ||
#WikiHeader { | #WikiHeader { | ||
background-image: url( | background-image: url(https://images.wikia.nocookie.net/tardis/images/1/17/WikiHeaderFullLengthWithGap.png) | ||
background-repeat:no-repeat; | background-repeat:no-repeat; | ||
font-size:10pt; | font-size:10pt; | ||
Line 56: | Line 56: | ||
.WikiHeader .WikiNav { | .WikiHeader .WikiNav { | ||
right:10px | right:10px; | ||
} | } | ||
Line 103: | Line 104: | ||
.WikiHeader > nav { | .WikiHeader > nav { | ||
background:#FFF; /*url( | background:#FFF; /*url(https://images.wikia.nocookie.net/tardistest/images/c/ce/70opacitywhite.png);*/ | ||
border:3px solid #012c57; | border:3px solid #012c57; | ||
-moz-border-radius: | -moz-border-radius:15px; | ||
-webkit-border-radius: | -webkit-border-radius:15px; | ||
-o-border-radius: | -o-border-radius:15px; | ||
-ms-border-radius: | -ms-border-radius:15px; | ||
border-radius: | border-radius:15px; | ||
-moz-box-shadow:0 0 40px #012c57; | -moz-box-shadow:0 0 40px #012c57; | ||
-webkit-box-shadow:0 0 40px #012c57; | -webkit-box-shadow:0 0 40px #012c57; | ||
Line 178: | Line 179: | ||
/* This is the main selector for the actual drop down */ | /* This is the main selector for the actual drop down */ | ||
.WikiHeader > nav .subnav { | .WikiHeader > nav .subnav { | ||
background:transparent url( | background:transparent url(https://images.wikia.nocookie.net/tardistest/images/c/ce/70opacitywhite.png); /* peek-a-boo, I see you! */ | ||
-moz-border-radius:10px; | -moz-border-radius:10px; | ||
-webkit-border-radius:10px; | -webkit-border-radius:10px; | ||
Line 264: | Line 265: | ||
.WikiHeader > nav .subnav-3 { | .WikiHeader > nav .subnav-3 { | ||
background:transparent url( | background:transparent url(https://images.wikia.nocookie.net/tardistest/images/c/ce/70opacitywhite.png); | ||
-webkit-border-radius: 50%/15%; | -webkit-border-radius: 50%/15%; | ||
-moz-border-radius: 50%/15%; | -moz-border-radius: 50%/15%; | ||
Line 402: | Line 403: | ||
.sprite.contribute { | .sprite.contribute { | ||
display: none; | 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 | |||
} | } | ||
Line 407: | Line 425: | ||
.WikiHeader .buttons .contribute ul { | .WikiHeader .buttons .contribute ul { | ||
background:transparent url( | background:transparent url(https://images.wikia.nocookie.net/tardistest/images/c/ce/70opacitywhite.png); /* peek-a-boo, I see you! */ | ||
-moz-border-radius:10px; | -moz-border-radius:10px; | ||
-webkit-border-radius:0px 10px 10px 0; | -webkit-border-radius:0px 10px 10px 0; | ||
Line 419: | Line 437: | ||
font-size:9pt; | font-size:9pt; | ||
line-height:8pt; | line-height:8pt; | ||
padding: | padding:1px; | ||
font-weight:bold; | font-weight:bold; | ||
text-transform:lowercase; | text-transform:lowercase; | ||
font-style:italic; | font-style:italic; | ||
margin-top: | margin-top:2px; | ||
z-index:1007; | z-index:1007; | ||
width:auto; | |||
} | } | ||
Line 436: | Line 455: | ||
.WikiHeader .buttons .contribute ul { | .WikiHeader .buttons .contribute ul { | ||
border:#012c57 2px solid; | border:#012c57 2px solid; | ||
background:transparent url( | background:transparent url(https://images.wikia.nocookie.net/tardistest/images/c/ce/70opacitywhite.png); | ||
} | } | ||
Latest revision as of 09:38, 9 March 2018
/* ================
NEW NAV 1.1
written by User:CzechOut
22 September 2012
Latest version: 15 January 2013
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 {
background-image: url(https://images.wikia.nocookie.net/tardis/images/1/17/WikiHeaderFullLengthWithGap.png)
background-repeat:no-repeat;
font-size:10pt;
padding-left:none;
padding-right:none;
}
.WikiHeader .WikiNav {
right:10px;
}
/* +++++++++++++++
Removing border on top of tabs
+++++++++++++++ */
.WikiHeader > nav li.marked > a,
.WikiHeader > nav li.marked > a:hover {
border:none;
background-color:transparent;
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 */
}
/* ================
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(https://images.wikia.nocookie.net/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 url(https://images.wikia.nocookie.net/tardistest/images/c/ce/70opacitywhite.png); /* peek-a-boo, I see you! */
-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 */
.subnav-3 li {
background:transparent
}
.WikiHeader > nav .subnav-3 {
background:transparent url(https://images.wikia.nocookie.net/tardistest/images/c/ce/70opacitywhite.png);
-webkit-border-radius: 50%/15%;
-moz-border-radius: 50%/15%;
-ms-border-radius: 50%/15%;
-o-border-radius: 50%/15%;
border-radius: 50%/15%;
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:1.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:none;
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;
font-size: 16px;
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(https://images.wikia.nocookie.net/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(https://images.wikia.nocookie.net/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;
}
*/