Difference between revisions of "MediaWiki:Common.css"

Line 1: Line 1:
/*  
+
/*
 
{{TOCright}}
 
{{TOCright}}
 
CSS placed here will be applied to all skins
 
CSS placed here will be applied to all skins
Line 12: Line 12:
  
 
a.topbar, a.topbar:link, a.topbar:active, a.topbar:visited, a.topbar:hover {
 
a.topbar, a.topbar:link, a.topbar:active, a.topbar:visited, a.topbar:hover {
 +
background-color: inherit;
 +
color: black;
 
  font-family: Verdana, Tahoma, sans-serif;
 
  font-family: Verdana, Tahoma, sans-serif;
 
  font-size: 11px;
 
  font-size: 11px;
color: black;
+
  font-weight: bold
  font-weight: bold;
 
 
}
 
}
  
Line 26: Line 27:
  
 
.allpagesredirect {
 
.allpagesredirect {
  font-style: italic;
+
  font-style: italic
 
}
 
}
  
 
.allpagesredirect a {
 
.allpagesredirect a {
  background: url("/wiki/images/5/5c/Allpagesredirect.gif") center left no-repeat; padding-left: 13px;
+
  background: url("/wiki/images/5/5c/Allpagesredirect.gif") center left no-repeat;
 +
padding-left: 13px
 
}
 
}
  
Line 39: Line 41:
 
<!-- Note that _all_ instances of #id will need to 'break' with the format standardised elsewhere on _this_ page or else the CSS will become unreadable. -->&nbsp;*/
 
<!-- Note that _all_ instances of #id will need to 'break' with the format standardised elsewhere on _this_ page or else the CSS will become unreadable. -->&nbsp;*/
  
  #file img { background: url("/wiki/images/5/5d/Checker-16x16.png") repeat; }
+
  #file img { background: url("/wiki/images/5/5d/Checker-16x16.png") repeat }
  
 
/*
 
/*
Line 47: Line 49:
  
 
table.downloadbox {
 
table.downloadbox {
 +
background: white;
 +
border-collapse: collapse;
 
  border: 1px solid #999;
 
  border: 1px solid #999;
 +
clear: right;
 +
color: black;
 +
float: right;
 
  margin: 10px;
 
  margin: 10px;
 
  padding: 5px;
 
  padding: 5px;
float: right;
+
  width: 250px
clear: right;
 
  width: 250px;
 
background: white;
 
border-collapse: collapse;
 
 
}
 
}
  
 
table.downloadbox tr {
 
table.downloadbox tr {
text-align: left;
 
spacing-top: 0px;
 
spacing-bottom: 0px;
 
vertical-align: middle;
 
 
  background: #F0F0F0;
 
  background: #F0F0F0;
 +
color: inherit;
 +
border-spacing: 0;
 +
text-align: left;
 +
vertical-align: middle
 
}
 
}
  
table.downloadbox tr td {  
+
table.downloadbox tr td {
  padding: 5px;
+
  background: #F0F0F0;
 
  border-top: 1px solid #999;
 
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;  
+
  border-bottom: 1px solid #999;
  background: #F0F0F0;
+
  color: inherit;
 +
padding: 5px
 
}
 
}
  
table.downloadbox tr td.downloadboxheading{
+
table.downloadbox tr td.downloadboxheading {
 
  background: #BDB;
 
  background: #BDB;
 +
color: inherit
 
}
 
}
  
Line 81: Line 86:
  
 
table.infobox {
 
table.infobox {
 +
background: white;
 
  border: 1px solid #999;
 
  border: 1px solid #999;
 +
border-collapse: collapse;
 +
clear: right;
 +
color: black;
 +
float: right;
 +
line-height: 2em;
 
  margin: 10px;
 
  margin: 10px;
 
  padding: 5px;
 
  padding: 5px;
float: right;
+
  width: 250px
clear: right;
 
  width: 250px;
 
background: white;
 
border-collapse: collapse;
 
line-height: 2em;
 
 
}
 
}
  
 
table.infobox tr {
 
table.infobox tr {
  text-align: center;
+
  text-align: center
 
}
 
}
  
 
table.infobox tr td.infoboxname {
 
table.infobox tr td.infoboxname {
text-align: center;
+
  color: inherit;
  color: black;
+
  background: white;
  background: white;  
+
  font-size: larger;
  font-size: larger;  
+
text-align: center
 
}
 
}
  
 
table.infobox tr td.infoboxheading{
 
table.infobox tr td.infoboxheading{
text-align: left;
 
 
  background: #BDB;
 
  background: #BDB;
 +
color: inherit;
 +
text-align: left
 
}
 
}
  
 
table.infobox tr.infoboxrow {
 
table.infobox tr.infoboxrow {
  text-align: left;  
+
  background: #F0F0F0;
  spacing-top: 0px;
+
  color: inherit;
  spacing-bottom: 0px;
+
  border-spacing: 0;
 
  vertical-align: middle;
 
  vertical-align: middle;
  background: #F0F0F0;
+
  text-align: left
 
}
 
}
  
table.infobox tr td {  
+
table.infobox tr td {
padding: 5px;
 
 
  background: white;
 
  background: white;
 +
color: inherit;
 +
padding: 5px
 
}
 
}
  
 
table.infobox tr.infoboxrow td {
 
table.infobox tr.infoboxrow td {
 +
background: #F0F0F0;
 
  border-top: 1px solid #999;
 
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;  
+
  border-bottom: 1px solid #999;
  background: #F0F0F0;
+
  color: inherit
 
}
 
}
  
 
table.infobox tr.infoboxrow td.bot {
 
table.infobox tr.infoboxrow td.bot {
 
 
  border-bottom: 1px solid #999;
 
  border-bottom: 1px solid #999;
 
  border-top: none;
 
  border-top: none;
 +
}
  
} table.infobox tr.infoboxrow td.top {
+
table.infobox tr.infoboxrow td.top {
 
 
 
  border-bottom: none;
 
  border-bottom: none;
 
  border-top: 1px solid #999;
 
  border-top: 1px solid #999;
 
 
}
 
}
  
 
/*
 
/*
===CSS for Skinng Message Boxes===
+
===CSS for Skinning General Purpose Message Boxes===
Messagebox templates
 
 
 
 
&nbsp;*/
 
&nbsp;*/
  
 
.messagebox {
 
.messagebox {
  background-color: #F9F9F9;
+
  background: #F9F9F9;
 
  border: 1px solid #AAA;
 
  border: 1px solid #AAA;
 
  clear: both;
 
  clear: both;
 +
color: black;
 
  margin: 0 auto 1em auto;
 
  margin: 0 auto 1em auto;
 
  padding: .45em;
 
  padding: .45em;
  width: 80%;
+
  width: 80%
 
}
 
}
  
 
.messagebox.merge {
 
.messagebox.merge {
  background-color: #F0E5FF;
+
  background: #F0E5FF;
 +
color: black;
 
  border: 1px solid #C0B8CC;
 
  border: 1px solid #C0B8CC;
  text-align: center;
+
  text-align: center
 
}
 
}
  
 
.messagebox.cleanup {
 
.messagebox.cleanup {
  background-color: #EFEFFF;
+
  background: #EFEFFF;
 
  border: 1px solid #9F9FFF;
 
  border: 1px solid #9F9FFF;
  text-align: center;
+
color: black;
 +
  text-align: center
 
}
 
}
  
 
.messagebox.standard-talk {
 
.messagebox.standard-talk {
  background-color: #F8EABA;
+
  background: #F8EABA;
 
  border: 1px solid #C0C090;
 
  border: 1px solid #C0C090;
 +
color: black
 
}
 
}
  
.messagebox.standard-talk.projectbm {
+
/*
  background: #F8EABA url(/wiki/images/d/dc/Mech.gif) no-repeat 10px center;
+
===CSS for Skinning WikiProject Message Boxes===
  padding: 10px 10px 10px 40px;
+
&nbsp;*/
 +
 
 +
.projectbm {
 +
  background: #F8EABA url("/wiki/images/d/dc/Mech.gif") no-repeat center;
 +
color: inherit;
 +
  padding: 10px 10px 10px 40px
 
}
 
}
  
Line 179: Line 193:
  
 
===CSS for Skinning Normal Tables===
 
===CSS for Skinning Normal Tables===
wikitable/prettytable class for skinning normal tables
+
wikitable class for skinning normal tables
  
 
&nbsp;*/
 
&nbsp;*/
  
table.wikitable,
+
table.wikitable {
table.prettytable {
 
margin: 1em 1em 1em 0;
 
 
  background: #F9F9F9;
 
  background: #F9F9F9;
 
  border: 1px #AAA solid;
 
  border: 1px #AAA solid;
 
  border-collapse: collapse;
 
  border-collapse: collapse;
 +
color: inherit;
 +
margin: 1em 1em 1em 0
 
}
 
}
  
table.wikitable th, table.wikitable td,
+
table.wikitable th, table.wikitable td {
table.prettytable th, table.prettytable td {
 
 
  border: 1px #AAA solid;
 
  border: 1px #AAA solid;
  padding: 0.2em;
+
  padding: 0.2em
 
}
 
}
  
table.wikitable th,
+
table.wikitable th {
table.prettytable th {
 
 
  background: #F2F2F2;
 
  background: #F2F2F2;
  text-align: center;
+
color: inherit;
 +
  text-align: center
 
}
 
}
  
table.wikitable caption,
+
table.wikitable caption {
table.prettytable caption {
+
font-weight: bold;
 
  margin-left: inherit;
 
  margin-left: inherit;
  margin-right: inherit;
+
  margin-right: inherit
font-weight: bold;
 
 
}
 
}
  
Line 219: Line 231:
  
 
.boilerplate {
 
.boilerplate {
  background-color: Gold;
+
  background-color: #FFD700;
 
  border: 1px solid #AA8;
 
  border: 1px solid #AA8;
 +
color: black;
 
  margin: 0 auto;
 
  margin: 0 auto;
 
  padding: 0 1em;
 
  padding: 0 1em;
Line 227: Line 240:
 
}
 
}
  
/* Used in disambig */
+
/* Used in template:disambig
 +
 
 +
;Note: Won't display properly in IE. Then again, what does? */
  
 
.dabnote {
 
.dabnote {
  background: url(/wiki/images/thumb/5/5f/Disambig_gray.svg/30px-Disambig_gray.svg.png) no-repeat 10px center;
+
  background: url("/wiki/images/thumb/5/5f/Disambig_gray.svg/30px-Disambig_gray.svg.png") no-repeat 10px 50%;
  border-bottom: 1px solid LightGrey;
+
  border-bottom: 1px solid #D3D3D3;
  border-top: 1px solid LightGrey;
+
  border-top: 1px solid #D3D3D3;
 
  display: table;
 
  display: table;
 
  font-style: italic;
 
  font-style: italic;
  height: 50px
+
  height: 50px;
}
+
margin: 0 auto;
 
+
  min-width: 80%
.dabnote div {
 
  padding-left: 25px
 
 
}
 
}
  
.dabnote + div {
+
.dabnote:first-child {
 
  display: table-cell;
 
  display: table-cell;
 
  vertical-align: middle
 
  vertical-align: middle
Line 249: Line 262:
 
/* For indenting paragraphs on fancruft */
 
/* For indenting paragraphs on fancruft */
  
div.indent p {  
+
div.indent p {
 
  text-indent: 1in
 
  text-indent: 1in
 
}
 
}

Revision as of 13:27, 3 December 2006

/*
{{TOCright}}
CSS placed here will be applied to all skins

Tools: [http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fsarna.net%2Fwiki%2Findex.php%3Ftitle%3DMediaWiki%3ACommon.css%26action%3Draw%26ctype%3Dtext%2Fcss&usermedium=all W3C CSS Validation Service] | [http://sarna.net/wiki/index.php?title=MediaWiki:Common.css&action=raw&ctype=text/css&smaxage=18000 reload cache]
<br style="clear: both"/>

===CSS for Navigation Bar===
Don't touch this without Nic's permission.

&nbsp;*/

a.topbar, a.topbar:link, a.topbar:active, a.topbar:visited, a.topbar:hover {
 background-color: inherit;
 color: black;
 font-family: Verdana, Tahoma, sans-serif;
 font-size: 11px;
 font-weight: bold
}

/*
=== CSS for Special: Pages ===

Puts a redirect indicator before redirects in Special:Allpages

&nbsp;*/

.allpagesredirect {
 font-style: italic
}

.allpagesredirect a {
 background: url("/wiki/images/5/5c/Allpagesredirect.gif") center left no-repeat;
 padding-left: 13px
}

/*
=== CSS for Image: Pages ===
Put a checker background at the image description page only visible if the image has transparent background

<!-- Note that _all_ instances of #id will need to 'break' with the format standardised elsewhere on _this_ page or else the CSS will become unreadable. -->&nbsp;*/

 #file img { background: url("/wiki/images/5/5d/Checker-16x16.png") repeat }

/*
===CSS for Skinning Download Boxes===

&nbsp;*/

table.downloadbox {
 background: white;
 border-collapse: collapse;
 border: 1px solid #999;
 clear: right;
 color: black;
 float: right;
 margin: 10px;
 padding: 5px;
 width: 250px
}

table.downloadbox tr {
 background: #F0F0F0;
 color: inherit;
 border-spacing: 0;
 text-align: left;
 vertical-align: middle
}

table.downloadbox tr td {
 background: #F0F0F0;
 border-top: 1px solid #999;
 border-bottom: 1px solid #999;
 color: inherit;
 padding: 5px
}

table.downloadbox tr td.downloadboxheading {
 background: #BDB;
 color: inherit
}

/*
===CSS for Skinning Info Boxes===
&nbsp;*/

table.infobox {
 background: white;
 border: 1px solid #999;
 border-collapse: collapse;
 clear: right;
 color: black;
 float: right;
 line-height: 2em;
 margin: 10px;
 padding: 5px;
 width: 250px
}

table.infobox tr {
 text-align: center
}

table.infobox tr td.infoboxname {
 color: inherit;
 background: white;
 font-size: larger;
 text-align: center
}

table.infobox tr td.infoboxheading{
 background: #BDB;
 color: inherit;
 text-align: left
}

table.infobox tr.infoboxrow {
 background: #F0F0F0;
 color: inherit;
 border-spacing: 0;
 vertical-align: middle;
 text-align: left
}

table.infobox tr td {
 background: white;
 color: inherit;
 padding: 5px
}

table.infobox tr.infoboxrow td {
 background: #F0F0F0;
 border-top: 1px solid #999;
 border-bottom: 1px solid #999;
 color: inherit
}

table.infobox tr.infoboxrow td.bot {
 border-bottom: 1px solid #999;
 border-top: none;
}

table.infobox tr.infoboxrow td.top {
 border-bottom: none;
 border-top: 1px solid #999;
}

/*
===CSS for Skinning General Purpose Message Boxes===
&nbsp;*/

.messagebox {
 background: #F9F9F9;
 border: 1px solid #AAA;
 clear: both;
 color: black;
 margin: 0 auto 1em auto;
 padding: .45em;
 width: 80%
}

.messagebox.merge {
 background: #F0E5FF;
 color: black;
 border: 1px solid #C0B8CC;
 text-align: center
}

.messagebox.cleanup {
 background: #EFEFFF;
 border: 1px solid #9F9FFF;
 color: black;
 text-align: center
}

.messagebox.standard-talk {
 background: #F8EABA;
 border: 1px solid #C0C090;
 color: black
}

/*
===CSS for Skinning WikiProject Message Boxes===
&nbsp;*/

.projectbm {
 background: #F8EABA url("/wiki/images/d/dc/Mech.gif") no-repeat center;
 color: inherit;
 padding: 10px 10px 10px 40px
}

/*

===CSS for Skinning Normal Tables===
wikitable class for skinning normal tables

&nbsp;*/

table.wikitable {
 background: #F9F9F9;
 border: 1px #AAA solid;
 border-collapse: collapse;
 color: inherit;
 margin: 1em 1em 1em 0
}

table.wikitable th, table.wikitable td {
 border: 1px #AAA solid;
 padding: 0.2em
}

table.wikitable th {
 background: #F2F2F2;
 color: inherit;
 text-align: center
}

table.wikitable caption {
 font-weight: bold;
 margin-left: inherit;
 margin-right: inherit
}

/*
===Miscellaneous CSS===
This area is for CSS that isn't 'categorised'. Try to fit CSS under a 'category' if at all possible.

For boilerplate messages

&nbsp;*/

.boilerplate {
 background-color: #FFD700;
 border: 1px solid #AA8;
 color: black;
 margin: 0 auto;
 padding: 0 1em;
 text-align: center;
 width: 95%
}

/* Used in template:disambig

;Note: Won't display properly in IE. Then again, what does? */

.dabnote {
 background: url("/wiki/images/thumb/5/5f/Disambig_gray.svg/30px-Disambig_gray.svg.png") no-repeat 10px 50%;
 border-bottom: 1px solid #D3D3D3;
 border-top: 1px solid #D3D3D3;
 display: table;
 font-style: italic;
 height: 50px;
 margin: 0 auto;
 min-width: 80%
}

.dabnote:first-child {
 display: table-cell;
 vertical-align: middle
}

/* For indenting paragraphs on fancruft */

div.indent p {
 text-indent: 1in
}

/* Style for "notices" */

.notice {
 margin: 1em;
 padding: 0.2em
}