MediaWiki:Gadget-site.css

/* This is the CSS for all skins (for all users) on MediaWiki.org.

SECTIONS: 1. Indication of namespaces 2. Color classes for content 3. Special pages 4. Main page styling 5. Sidebar external links 6. Extension Matrix stuff 7. Wikitables, infobox templates, warnings, and other such stylings 8. Some other small things

/** * 1. INDICATION OF NAMESPACES * - */

/* Pseudo NS Special (light grey) */ .ns--2 #content { background-color: #f4f4f4; } .ns--2 div.thumb { border-color: #f4f4f4; }

/* NS Project + Project_talk (light sky blue) */ .ns-4 #content, .ns-5 #content { background-color: #f8fcff; } .ns-4 div.thumb, .ns-5 div.thumb { border-color: #f8fcff; }

/* NS MediaWiki + MediaWiki_talk (light grey) */ .ns-8 #content, .ns-9 #content { background-color: #f4f4f4; } .ns-8 div.thumb, .ns-9 div.thumb { border-color: #f4f4f4; }

/* NS Manual + Manual_talk (light bluish violet) */ .ns-100 #content, .ns-101 #content { background-color: #f3f3ff; } .ns-100 div.thumb, .ns-101 div.thumb { border-color: #f3f3ff; }

/* NS Help (but NOT Help_talk) (blue border and Public Domain icon) */ .ns-12 #content { border: 2px solid #0000cc; border-right: none; background-image: url(//upload.wikimedia.org/wikipedia/mediawiki/b/b8/PD-banner.png); background-repeat: no-repeat; background-position: right top; } .ns-12 #bodyContent { background-image: url(//upload.wikimedia.org/wikipedia/mediawiki/6/67/PD-icon-faded.png); background-repeat: no-repeat; background-position: right 5em; }

/** * 2. COLOR CLASSES FOR CONTENT * - */

/* Border colors */ .borderc1 { border-color: #e9e9e9; border-width: thin; } .borderc2 { border-color: #aaaaaa; border-width: thin; } .borderc3 { border-color: #777777; border-width: thin; } .borderc4 { border-color: #000000; border-width: thin; } .borderc5 { border-color: #c00000; border-width: thin; } .borderc6 { border-color: #025e9d; border-width: thin; } .borderc7 { border-color: #008040; border-width: thin; } .borderc8 { border-color: #ffcc00; border-width: thin; } /* Used by: Template:Welcome. */

/* Background colors */ .backgroundc1 { background-color: #ffffff; } /* Used by: Template:Welcome. */ .backgroundc2 { background-color: #f9f9f9; } .backgroundc3 { background-color: #eeeeee; } .backgroundc4 { background-color: #e0e0e0; } .backgroundc5 { background-color: #d2d2d2; } .backgroundc6 { background-color: #b7b7b7; } .backgroundc7 { background-color: #a3a3a3; } .backgroundc8 { background-color: #444455; }

/** * 3. SPECIAL PAGES * - */

/* Consistent special page navigation */ .SpecialPageInfo { background-color: #f9f9f9; background-image: url(//upload.wikimedia.org/wikipedia/commons/thumb/8/89/Exquisite-khelpcenter.png/35px-Exquisite-khelpcenter.png); background-position: 0.8em 0.5em; background-repeat: no-repeat; padding: 0.3em 0.5em 0.3em 5.0em; border-color: #025e9d; border-width: 1px; border-style: solid; border-bottom-width: medium; margin-bottom: 1em; }

.mw-viewprevnext { display: block; border: 1px solid #cccccc; background-color: #f9f9f2; padding: 0.2em 0.4em; }

/** * 4. MAIN PAGE STYLING * - */

background: #f9f9f9; padding: 0px; border: 1px solid #aaaaaa; margin: 0.2em 10px 10px; } .mainpage_boxtitle, .mainpage_hubtitle, font-size: 105%; padding: 0.4em; background-color: #eeeeee; border-bottom: 1px solid #aaaaaa; } .mainpage_boxtitle { line-height: 120%; }	color: #cf7606; font-size: 200% !important; }	padding: 0.2em; text-align: center; background-color: white; } .mainpage_hubtitle { text-align: center; } .mainpage_boxcontents, .mainpage_boxcontents_small { background: #ffffff; padding: 0.2em 0.4em; } .mainpage_boxcontents_small { font-size: 95%; } .mainpage_hubbox, padding: 0; border: 1px solid #aaaaaa; } .mainpage_hubbox { margin-bottom: 0; }	margin-bottom: 15px; margin-top: 0 !important; }	background-image: url(//upload.wikimedia.org/wikipedia/commons/thumb/8/89/Exquisite-khelpcenter.png/20px-Exquisite-khelpcenter.png); background-repeat: no-repeat; background-position: 99% 0.3em; padding-right: 25px; }	width: 17em; margin-bottom: 5px; }	background-image: url(//upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Crystal_Clear_action_build.png/18px-Crystal_Clear_action_build.png); background-repeat: no-repeat; background-position: 96% 0.33em; padding-right: 25px; }	max-width: 25em; margin-bottom: 15px; margin-top: 0 !important; }	background-image: url(//upload.wikimedia.org/wikipedia/commons/thumb/6/63/User-online.svg/20px-User-online.svg.png); background-repeat: no-repeat; background-position: 98% 0.15em; padding-right: 25px; }	max-width: 25em; margin-bottom: 15px; margin-top: 0 !important; }	background-image: url(//upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Note_icon.svg/20px-Note_icon.svg.png); background-repeat: no-repeat; background-position: 98% 0.15em; padding-right: 25px; } /* The words 'MediaWiki.org' in the title. */	color: #005288; }
 * 1) mainpage_topbox {
 * 1) mainpage_pagetitle {
 * 1) mainpage_pagetitle {
 * 1) mainpage_sitelinks {
 * 1) mainpage_newscell,
 * 2) mainpage_downloadcell,
 * 3) mainpage_opportunitiescell,
 * 4) mainpage_featuredpagescell {
 * 1) mainpage_newscell {
 * 1) mainpage_newscell .mainpage_boxtitle {
 * 1) mainpage_downloadcell {
 * 1) mainpage_downloadcell .mainpage_boxtitle {
 * 1) mainpage_opportunitiescell {
 * 1) mainpage_opportunitiescell .mainpage_boxtitle {
 * 1) mainpage_featuredpagescell {
 * 1) mainpage_featuredpagescell .mainpage_boxtitle {
 * 1) mainpage_mwtitle {

/** * The "mainpage" class is added to the body with JavaScript for the main page in all * languages, so we can style things that apppear on the main page and also elsewhere. */ .mainpage #lastmod, .mainpage #siteSub, .mainpage h1.firstHeading { display: none !important; } .mainpage #content { padding-top: 1em; }

.mainpage_boxcontents ul li:first-child { list-style: none; border-bottom: 1px solid #AAA; margin-bottom: 0.5em; margin-left: -1.5em; text-align: center; }

/** * 5. SIDEBAR EXTERNAL LINKS * - */ /*	background: url(//upload.wikimedia.org/wikipedia/commons/6/64/Icon_External_Link.png) center right no-repeat; padding-right: 13px; color: #3366bb; }
 * 1) n-blog-text a,
 * 2) n-mw-repo-commits a,
 * 3) n-mw-repo-codereview a,
 * 4) n-browse-repo a,
 * 5) n-phpdoc a {

/** * 7. WIKITABLES, INFOBOX TEMPLATES, WARNINGS AND OTHER SUCH STYLINGS * - */

/* Custom h* styles (blue headings) */ .wikitable td.hl3, .wikitable th.hl3 { background-color: #8da7d6; } .wikitable td.hl1, .wikitable th.hl1 { background: #c5d8fc; } .wikitable td.hl2, .wikitable th.hl2 { background: #a7c1f2; }

/** * Make entire table valign=top, * To replace the |valign=top| on every cell. */ .vatop tr, tr.vatop, .vatop td, .vatop th { vertical-align: top; }

/* General purpose "pretty (data) tables" */ table.datatable { background-color: transparent; }

table.datatable th, table.datatable td { padding: 4px; }

table.datatable th { text-align: left; background-color: #999999; }

table.datatable tr { background-color: #cccccc; }

table.datatable tr:hover { background-color: #ffffcc; }

/* SideBox styling */ div.sideBox { position: relative; float: right; background: white; margin-left: 1em; border: 1px solid gray; padding: 0.3em; width: 200px; overflow: hidden; clear: right; } div.sideBox dl { padding: 0; margin: 0 0 0.3em 0; font-size: 96%; } div.sideBox dl dt { background: none; margin: 0.4em 0 0 0; } div.sideBox dl dd { margin: 0.1em 0 0 1.1em; background-color: #f3f3f3; }

/* Extension infobox styling */ .ext-infobox { border: 2px solid #aaaaaa; width: 280px; clear: right; float: right; margin: 0 0 0.5em 0.5em; border-collapse: collapse; background-color: white; } .ext-infobox td { border: 2px none #aaaaaa; padding: 0.2em 0.5em; border-bottom: 1px solid #f0f0f0 !important; } .ext-header { background-color: #aaaaaa; color: white; text-align: left; } .ext-header td { padding-top: 0.5em; } .ext-header img { padding: 0 0.2em 0 0.5em; } .ext-status-unstable, .ext-status-unstable td { border-color: #990000; } .ext-status-unstable .ext-header { background-color: #990000; color: #ffff00; } .ext-status-experimental, .ext-status-experimental td { border-color: #ff4500; } .ext-status-experimental .ext-header { background-color: #ff4500; } .ext-status-beta, .ext-status-beta td { border-color: #ffba01; } .ext-status-beta .ext-header { background-color: #ffba01; } .ext-status-stable, .ext-status-stable td { border-color: #32cd32; } .ext-status-stable .ext-header { background-color: #32cd32; } .ext-status-magic, .ext-status-magic td { border-color: #fe57a1; } .ext-status-magic .ext-header { color: #000; background: #FFDBEB url(//upload.wikimedia.org/wikipedia/commons/thumb/2/20/Magic_wand.svg/60px-Magic_wand.svg.png) 0 0 no-repeat; } .ext-status-magic .ext-header img { visibility: hidden; padding-right: 1em; }

/* Version box on Manual:Downloading MediaWiki */ border: 2px solid black; border-collapse: collapse; margin: auto; width: 50%; color: black; }	border: 2px solid black; padding: 20px; }
 * 1) DownloadVersionBox {
 * 1) DownloadVersionBox td {

/* Major warning - used on the main page template to warn against editing carelessly, but can be used elsewhere as well */ .majorwarning { background: yellow; padding: 0.3em; text-align: center; font-size: 125%; border: 2px solid red; }

/* Page headings used throughout the wiki (though not very much at the time of writing…) */ .page-notice, .page-warning { border-width: 1px; border-style: solid; padding: 0.3em 0.5em; margin-bottom: 1em; width: 95%; margin-left: auto; margin-right: auto; text-align: center; }

/* Informative notices at the top of pages (blue) */ .page-notice { background-color: #f9f9f9; border-color: #025e9d; text-align: left; }

/* Warning information at the top of pages (red) */ .page-warning { background-color: #ffffff; border-color: #c51919; border-width: 2px; } .pw-head { color: #c51919; font-weight: bold; }

/* Used in Template:Notice */ .block-note { background-image: url(//upload.wikimedia.org/wikipedia/commons/thumb/6/60/Bulbgraph.png/18px-Bulbgraph.png); background-position: top left; background-repeat: no-repeat; } /** * Using block-contents in the hope that it can apply to all block-level warning templates, * with different images applied as backgrounds to the wrapping DIV. */ .block-contents { display: block; padding-left: 20px; }

/* Template documentation (Template:Documentation) */ .template-documentation { clear: both; margin: 1em 0 0 0; border: 1px solid #aaa; background-color: #ecfcf4; padding: 5px; }

/* Default style for navigation boxes */ table.navbox { /* Navbox container style */ border: 1px solid #aaa; width: 100%; margin: auto; clear: both; font-size: 88%; text-align: center; padding: 1px; } table.navbox + table.navbox { /* Single pixel border between adjacent navboxes */ margin-top: -1px; /* (doesn't work for IE6, but that's okay) */ } .navbox th, .navbox-title, .navbox-abovebelow { text-align: center; /* Title and above/below styles */ padding-left: 1em; padding-right: 1em; } th.navbox-group { /* Group style */ white-space: nowrap; /* @noflip */ text-align: right; } .navbox, .navbox-subgroup { background: #fdfdfd; } .navbox-list { /* Must match background color */ border-color: #fdfdfd; } .navbox th, .navbox-title { /* Level 1 color */ background: #ccccff; } .navbox-abovebelow, th.navbox-group, .navbox-subgroup .navbox-title { /* Level 2 color */ background: #ddddff; } .navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow { /* Level 3 color */ background: #e6e6ff; } .navbox-even { /* Even row striping */ background: #f7f7f7; } .navbox-odd { /* Odd row striping */ background: transparent; } .navbox .hlist td dl, .navbox .hlist td ol, .navbox .hlist td ul, .navbox td.hlist dl, .navbox td.hlist ol, .navbox td.hlist ul { /* Adjust hlist padding in navboxes */ padding: 0.125em 0; } .navbox .hlist dd, .navbox .hlist dt, .navbox .hlist li { /* Nowrap list items in navboxes */ white-space: nowrap; /* IE < 8 no-wraps entire list, so disable it */ white-space: normal !ie; } .navbox .hlist dd dl, .navbox .hlist dt dl, .navbox .hlist li ol, .navbox .hlist li ul { /* But allow parent list items to be wrapped */ white-space: normal; } ol + table.navbox, ul + table.navbox { /* Prevent lists from clinging to navboxes */ margin-top: 0.5em; }

/* Default styling for Navbar template */ .navbar { display: inline; font-size: 88%; font-weight: normal; } .navbar ul { display: inline; white-space: nowrap; } .navbar li { word-spacing: -0.125em; }

/* Navbar styling when nested in navbox */ .navbox .navbar { display: block; font-size: 100%; } .navbox-title .navbar { /* @noflip */ float: left; /* @noflip */ text-align: left; /* @noflip */ margin-right: 0.5em; width: 6em; } /* Allow people to optionally wrap lines in source listings */ div.wrapPreLines pre { white-space: pre-wrap; }

/** * 8. SOME OTHER SMALL THINGS * - */

/* Give a bit of space to the TOC */ margin: 1em 0; }
 * 1) toc {

/** * Allow limiting of which header levels are shown in a TOC; *, for instance, will limit to * showing ==headings== and ===headings=== but no further. * Used in Template:TOCright */ .toclimit-2 .toclevel-1 ul, .toclimit-3 .toclevel-2 ul, .toclimit-4 .toclevel-3 ul, .toclimit-5 .toclevel-4 ul, .toclimit-6 .toclevel-5 ul, .toclimit-7 .toclevel-6 ul { display: none; }

/* make the list of references look smaller and highlight clicked reference in blue */ ol.references { font-size: 100%; } .references-small { font-size: 90%; } ol.references > li:target { background-color: #ddeeff; } sup.reference:target { background-color: #ddeeff; }

/** * Styling for links generated by MediaWiki:Edittools * @source www.mediawiki.org/wiki/Extension:CharInsert#Styling * @updated 2012-02-29 */ .mw-charinsert-buttons { margin-top: 10px; border: 1px solid #aaaaaa; padding: 1px; text-align: center; font-size: 110%; } .mw-charinsert-buttons a { color: black; background-color: #cde !important; font-weight: bold; font-size: .9em; text-decoration: none; border: thin #069 outset; padding: 0 .1em .1em; } .mw-charinsert-buttons a:hover, .mw-charinsert-buttons a:active { background-color: #bcd; border-style: inset; } .client-js .mw-edittools-section { display: inline; } .client-js .mw-edittools-section input[type="button"] { font-size: 0.9em; padding-left: 1px; padding-right: 1px; margin-left: 1px; }

/* from User:Splarka/Help:Linked images */ .imagelink_wikilogo a { width: 135px; height: 135px; display: block; text-decoration: none; background-image: url(//upload.wikimedia.org/wikipedia/mediawiki/b/bc/Wiki.png); }

/** reduced subset of the mbox styles from enwiki, mainly for the nice boxflow **/ table.mbox { margin: 4px 10%; border-collapse: collapse; border: 1px solid #aaa; /* Default "notice" gray */ background: #f9f9f9; } table.mbox-wide { margin: 4px 0; }

th.mbox-text, td.mbox-text { 	/* The message body cell(s) */ border: none; /* 0.9em left/right */ padding: 0.25em 0.9em; /* Make all mboxes the same width regardless of text length */ width: 100%; } /* The left image cell */ td.mbox-image { border: none; /* 0.9em left, 0px right */ padding: 2px 0 2px 0.9em; text-align: center; } /* The right image cell */ td.mbox-imageright { border: none; /* 0px left, 0.9em right */ padding: 2px 0.9em 2px 0; text-align: center; } /* An empty narrow cell */ td.mbox-empty-cell { border: none; padding: 0px; width: 1px; }

/** * These mbox-small classes must be placed after all other * ambox/tmbox/ombox etc classes. "body.mediawiki" is so * they override "table.ambox + table.ambox" above. */ /* For the "small=yes" option. */ body.mediawiki table.mbox-small { clear: right; float: right; margin: 4px 0 4px 1em; width: 238px; font-size: 88%; line-height: 1.25em; } /* For the "small=left" option. */ body.mediawiki table.mbox-small-left { margin: 4px 1em 4px 0; width: 238px; border-collapse: collapse; font-size: 88%; line-height: 1.25em; }

/** * These are the same colours as the enwiki * 'cmbox' styles; just with different names. */ table.mbox-critical { /* Red */ border: 4px solid #b22222; /* Pink */ background: #FFDBDB; } table.mbox-important { /* Red */ background: #FFDBDB; } table.mbox-warning { /* Orange */ background: #FFE7CE; } table.mbox-caution { /* Yellow */ background: #FFF9DB; } table.mbox-notice { /* Blue */ background: #D8E8FF; } table.mbox-move { /* Purple */ background: #E4D8FF; } table.mbox-protection { /* Gray-gold */ background: #EFEFE1; } table.mbox-license { /* Dark gray */ border: 3px solid #88a; /* Light gray */ background: #f7f8ff; }

/** * Infoboxes */ .infobox { float: right; clear: right; margin-bottom: 0.5em; margin-left: 1em; padding: 0.2em; border: 1px solid #AAA; background: #F9F9F9; color: black; }

.infobox td, .infobox th { vertical-align: top; }

.infobox caption { margin-left: inherit; font-size: larger; }

.infobox.bordered { border-collapse: collapse; }

.infobox.bordered td, .infobox.bordered th { border: 1px solid #AAA; }

.infobox.bordered .borderless td, .infobox.bordered .borderless th { border: 0; }

/** * Apparently the namespaces parameter * for inputbox forces a checkbox. * Let's hide it in the API sidebar */ .mw-inputbox-hideapicheck label[for="mw-inputbox-ns104"], display: none; }
 * 1) mw-inputbox-ns104 {

/** Testing for code review **/ div.mw-wordcloud { width: 100%; text-align: justify; }

.mw-wordcloud-size-1 { color: #222; font-size: 2.4em; } .mw-wordcloud-size-2 { color: #333; font-size: 2.2em; } .mw-wordcloud-size-3 { color: #444; font-size: 2.0em; } .mw-wordcloud-size-4 { color: #555; font-size: 1.8em; } .mw-wordcloud-size-5 { color: #666; font-size: 1.6em; } .mw-wordcloud-size-6 { color: #777; font-size: 1.4em; } .mw-wordcloud-size-7 { color: #888; font-size: 1.2em; } .mw-wordcloud-size-8 { color: #999; font-size: 1em; } .mw-wordcloud-size-9 { color: #aaa; font-size: 0.8em; letter-spacing: 3px; } .mw-wordcloud-size-10, .mw-wordcloud-size-0 { color: #bbb; font-size: 0.8em; }

/* Styling for related links and disambiguation links */ .rellink, .dablink { font-style: italic; margin-bottom: 0.5em; padding-left: 2em; }

/* @todo FIXME: document me :) */	float: left;	list-style: none;	font-family: sans-serif; }	color: #3ca7d4;	background: #c2e1f9;	line-height: 2.8em;	margin-right: .25em;	padding-right: .5em; }	color: #67ca36;	background: #d4f9c2;	border-color: #fff #fff #fff #67ca36; }	width: 0;	height: 0;	border-color: #fff #fff #fff #3CA7D4;	border-style: solid;	border-width: 1.4em .3em 1.4em 1.4em;	float: left; }	display: block;	width: 1.8em;	line-height: 1.8em;	background: #3ca7d4;	color: #c2e1f9;	text-align: center;	margin: .5em;	-webkit-border-radius: 50%;	-moz-border-radius: 50%;	-ms-border-radius: 50%;	-o-border-radius: 50%;	border-radius: 50%;	font-weight: 600;	float: left; }	background: #67ca36;	color: #d4f9c2; }	float: left; }	padding: 0; }
 * 1) signuptopbox li {
 * 1) signuptopbox li {
 * 1) signuptopbox li.pr-active,
 * 2) signuptopbox li.pr-active div {
 * 1) signuptopbox li div {
 * 1) signuptopbox li span.pr-number {
 * 1) signuptopbox li.pr-active span.pr-number {
 * 1) signuptopbox li span {
 * 1) signuptopbox li.pr-spacer {

/* BREADCRUMB CODE */

.breadcrumb { list-style: none; overflow: hidden; font: 14px Helvetica, Arial, sans-serif; } .breadcrumb li { float: left; margin-bottom: 0; } .breadcrumb li a { color: white; text-decoration: none; padding: 10px 0 10px 45px; position: relative; display: block; float: left; }

.breadcrumb li a:after { content: " "; display: block; width: 0; height: 0; /* Go big on the size, and let overflow hide */ border-top: 50px solid transparent; border-bottom: 50px solid transparent; position: absolute; top: 50%; margin-top: -50px; left: 100%; z-index: 2; }

.breadcrumb li a:before { content: " "; display: block; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 31px solid white; position: absolute; top: 50%; margin-top: -50px; margin-left: 1px; left: 100%; z-index: 1; }

.breadcrumb li:first-child a { padding-left: 20px; }

.currentcrumb a { background: #069; }

.currentcrumb a:after { border-left: 30px solid #069; }

.currentcrumb a:hover, .prevcrumb a:hover, .nextcrumb a:hover { background: #002d44; }

.currentcrumb a:hover:after, .prevcrumb a:hover:after, .nextcrumb a:hover:after { border-left-color: #002d44 !important; }

.prevcrumb a { background: #396; }

.prevcrumb a:after { border-left: 30px solid #396; }

.nextcrumb a { background: #999; }

.nextcrumb a:after { border-left: 30px solid #999; }

/* To facilitate rtl translations */ background: none; padding-right: 0; }
 * 1) bodyContent .table-RTL a {

margin-right: 10px; display: table; }
 * 1) bodyContent .table-RTL ul {

/* Fix annoying bug where the "date" column in the LQT sometimes * is two rows because of the date being too long even through there is * enough space (otherwise the browser makes it's own decision on where to cut) */ .lqt_toc th:nth-child(3), .lqt_toc td:nth-child(3) { white-space: nowrap; }

.persian { font-family: Tahoma; }

/** * Fix so tags and .css and .js pages get normal text size. * 26204 */ div.mw-geshi div, div.mw-geshi div pre, span.mw-geshi, pre.source-css, pre.source-javascript { font-family: monospace, "Courier New" !important; }

/** * Handle overflow (bug 260) * Merged. * Remove when 17d23282dd6d8b1bf6b1b80f97cf02265cbec59d (12564) is deployed. */ pre, .mw-code { overflow: auto; *padding-bottom: 21px; *overflow-y: hidden; }

/** * Manual:Database_layout */ .mwmanual-dbview-box img { opacity: 0.5; } .mwmanual-dbview-box:hover img { opacity: 0.8; } .mwmanual-dbview-link { background: rgb(198, 212, 235); background: hsla(217, 48%, 85%, 0.8); border: 1px solid #0645AD; border-radius: 4px; padding: 10px 5px; text-align: center; font-weight: bold; } .mwmanual-dbview-box:hover .mwmanual-dbview-link { background: hsla(215, 46%, 95%, 0.8); } .mwmanual-dbview-link:hover { background: hsla(215, 46%, 95%, 0.9); }